:root { --teal:#08aebe; --deep:#087c8d; --pink:#ff709e; --yellow:#ffc94d; --ink:#31515a; --cream:#fffdf5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.site-header { position:fixed; z-index:20; top:0; left:0; right:0; height:76px; display:flex; align-items:center; justify-content:space-between; padding:10px clamp(18px,4vw,64px); background:rgba(255,255,255,.9); border-bottom:1px solid rgba(255,255,255,.7); box-shadow:0 6px 25px rgba(15,104,117,.1); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:10px; color:#147b88; font-size:12px; line-height:1.05; letter-spacing:.04em; }
.brand img { width:52px; height:52px; border-radius:50%; box-shadow:0 3px 12px rgba(22,146,158,.18); }
.brand strong { font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; font-size:16px; }
.header-play { color:white; background:linear-gradient(135deg,#ff7ca9,#ff5f90); border-radius:999px; padding:12px 24px; font-weight:800; box-shadow:0 6px 0 #d94472,0 10px 20px rgba(217,68,114,.24); transition:.2s; }
.header-play:hover,.primary-button:hover { transform:translateY(-2px); filter:saturate(1.08); }
.hero { position:relative; min-height:min(820px,100svh); padding-top:76px; display:flex; align-items:center; overflow:hidden; background:#36cadd; }
.hero-art,.hero-shade { position:absolute; inset:76px 0 0; }
.hero-art { background:url("assets/pumaru-lp-hero.webp") center/cover no-repeat; }
.hero-shade { background:linear-gradient(90deg,rgba(0,112,139,.63) 0%,rgba(0,133,151,.2) 42%,transparent 66%); }
.hero-copy { position:relative; z-index:2; width:min(1180px,100%); margin:auto; padding:60px clamp(24px,7vw,110px); color:white; text-shadow:0 3px 18px rgba(0,94,119,.22); }
.eyebrow,.section-kicker { font-size:13px; font-weight:800; letter-spacing:.18em; }
.eyebrow { display:inline-block; padding:7px 14px; color:#0a7d8e; background:rgba(255,255,255,.92); border-radius:999px; text-shadow:none; }
.hero h1 { max-width:760px; margin:18px 0 8px; font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; font-size:clamp(40px,4.7vw,64px); line-height:1.2; letter-spacing:.02em; }
.hero-copy>h1+p { margin:0 0 20px; font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; font-size:clamp(26px,3.2vw,44px); font-weight:900; line-height:1.3; }
.hero-lead { margin:0 0 30px; font-size:clamp(16px,1.7vw,22px); font-weight:700; line-height:1.9; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:min(390px,100%); padding:15px 24px; color:white; background:linear-gradient(135deg,#ff779f,#f95087); border:3px solid rgba(255,255,255,.72); border-radius:999px; box-shadow:0 8px 0 #d64272,0 14px 25px rgba(77,35,63,.22); font-size:20px; font-weight:900; text-shadow:none; transition:.2s; }
.primary-button span { display:block; padding:3px 8px; color:#cb3867; background:#fff1a9; border-radius:99px; font-size:11px; }
.primary-button b { font-size:30px; line-height:.5; }
.microcopy { margin:18px 0 0 36px; font-size:12px; font-weight:700; }
.section { padding:100px clamp(20px,5vw,72px); }
.intro,.howto { text-align:center; background-image:radial-gradient(#bdecee 1.2px,transparent 1.2px); background-size:22px 22px; }
.section-kicker { margin:0 0 12px; color:var(--teal); }
.section-kicker::before,.section-kicker::after { content:""; display:inline-block; width:32px; height:1px; margin:0 12px 4px; background:currentColor; }
h2 { margin:0; font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; font-size:clamp(32px,4.3vw,54px); line-height:1.35; color:#247987; }
.section-lead { max-width:760px; margin:22px auto 48px; line-height:2; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1080px; margin:auto; }
.feature-card { position:relative; padding:40px 28px 34px; border:5px solid white; border-radius:36px; box-shadow:0 15px 40px rgba(41,114,124,.13); overflow:hidden; }
.feature-card.mint { background:#dff7ef; }.feature-card.pink { background:#ffe5ed; }.feature-card.yellow { background:#fff3c9; }
.feature-number { position:absolute; top:12px; left:20px; color:rgba(36,121,135,.28); font-size:34px; font-weight:900; }
.feature-icon { width:86px; height:86px; display:grid; place-items:center; margin:0 auto 12px; background:white; border-radius:28px; font-size:43px; transform:rotate(-4deg); box-shadow:0 8px 20px rgba(73,130,137,.13); }
.feature-card h3 { margin:12px 0; color:#277987; font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; font-size:24px; line-height:1.45; }
.feature-card p { margin:0; font-size:14px; line-height:1.9; }
.story { position:relative; color:#31515a; background:linear-gradient(135deg,#fff9de 0%,#fff3f7 48%,#e9fbfa 100%); overflow:hidden; }
.story::before,.story::after { content:"★"; position:absolute; color:rgba(255,201,77,.2); line-height:1; }
.story::before { top:45px; left:5%; font-size:92px; transform:rotate(-16deg); }
.story::after { right:6%; bottom:30px; font-size:130px; transform:rotate(13deg); }
.story-inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(320px,1.1fr) minmax(280px,.9fr); align-items:center; gap:80px; max-width:1080px; margin:auto; }
.story-copy h2 { color:#d85b83; }
.story-copy>p:not(.section-kicker) { max-width:620px; margin:18px 0 0; line-height:2; }
.story-prologue { font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; font-size:20px; color:#5b7780; }
.story-prologue strong { color:#d94e7b; font-size:1.18em; }
.story-voice { max-width:570px; margin:22px 0; padding:18px 24px; color:#b74770; background:rgba(255,255,255,.72); border:1px solid rgba(216,91,131,.15); border-radius:18px; box-shadow:0 8px 24px rgba(196,91,126,.08); font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; font-size:18px; font-weight:700; line-height:1.85; }
.story-copy .story-promise { color:#168c99; font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; font-size:20px; font-weight:900; }
.story-question { padding-left:18px; border-left:4px solid var(--yellow); color:#bd4770; font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; font-size:19px; font-weight:900; }
.story-visual { position:relative; width:min(380px,100%); aspect-ratio:1; margin:auto; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle,#fff 0 36%,rgba(255,255,255,.72) 37% 55%,rgba(255,255,255,.25) 56% 68%,transparent 69%); }
.story-visual>img { position:relative; z-index:2; width:48%; border:8px solid white; border-radius:50%; box-shadow:0 18px 38px rgba(196,91,126,.2); transform:rotate(-5deg); }
.story-orbit { position:absolute; inset:13%; border:2px dashed rgba(8,174,190,.28); border-radius:50%; transform:rotate(-18deg); }
.story-star { position:absolute; z-index:3; display:grid; place-items:center; color:#ffc94d; text-shadow:0 3px 0 #e7a932,0 8px 15px rgba(216,151,41,.25); }
.star-one { top:6%; left:23%; font-size:58px; transform:rotate(-12deg); }.star-two { top:36%; right:2%; font-size:42px; transform:rotate(17deg); }.star-three { bottom:8%; left:16%; font-size:34px; transform:rotate(-20deg); }
.journey { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(450px,1.3fr); align-items:center; gap:70px; color:white; background:linear-gradient(145deg,#087f98,#11b5bd); overflow:hidden; }
.journey h2 { color:white; }.section-kicker.light { color:#adf5ed; }.journey-copy>p:not(.section-kicker) { line-height:2; }
.journey-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; transform:rotate(2deg); }
.journey-gallery img { aspect-ratio:3/5; width:100%; object-fit:cover; border:6px solid white; border-radius:28px; box-shadow:0 18px 35px rgba(0,57,76,.3); }.journey-gallery img:nth-child(2) { transform:translateY(-28px); }
.howto h2 { margin-bottom:46px; }
.steps { display:flex; align-items:center; justify-content:center; gap:25px; max-width:1000px; margin:auto; }
.steps article { flex:1; position:relative; padding:30px 18px; background:white; border-radius:30px; box-shadow:0 12px 35px rgba(43,118,127,.12); }
.steps article b { position:absolute; top:-15px; left:calc(50% - 18px); width:36px; height:36px; display:grid; place-items:center; color:white; background:var(--pink); border:4px solid white; border-radius:50%; }
.steps>i { color:#7bd1d7; font-size:46px; font-style:normal; }.step-emoji { display:block; font-size:52px; }.steps h3 { margin:5px 0; color:#247987; font-size:22px; }.steps p { margin:0; font-size:13px; line-height:1.7; }
.about-project { text-align:center; background:#eaf9f7; }
.about-project h2 { margin-bottom:34px; }
.about-project-card { display:flex; align-items:center; gap:26px; max-width:820px; margin:auto; padding:30px 36px; text-align:left; background:white; border:1px solid rgba(8,174,190,.13); border-radius:28px; box-shadow:0 12px 32px rgba(43,118,127,.1); }
.about-project-paw { flex:0 0 auto; display:grid; place-items:center; width:82px; height:82px; background:#fff3c9; border-radius:26px; font-size:40px; transform:rotate(-5deg); }
.about-project-card p { margin:0; font-size:14px; line-height:1.95; }.about-project-card p+p { margin-top:10px; }
.final-cta { position:relative; display:flex; align-items:center; justify-content:center; gap:45px; padding:70px 24px; text-align:center; background:linear-gradient(180deg,#fff4d4,#ffedf3); overflow:hidden; }
.final-cta>img { width:190px; height:190px; border:9px solid white; border-radius:50%; box-shadow:0 15px 35px rgba(215,88,128,.2); transform:rotate(-5deg); }.final-cta p { margin:0 0 5px; color:#e24f81; font-weight:900; }.final-cta h2 { margin-bottom:25px; color:#dd4e7c; }.cta-paws { position:absolute; inset:auto -20px -45px auto; opacity:.08; font-size:180px; transform:rotate(-15deg); }
footer { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; padding:34px clamp(20px,5vw,72px); color:#5b9298; background:#e7f8f6; font-size:11px; }.footer-main { display:flex; align-items:center; gap:32px; }.footer-brand img { width:36px; height:36px; }.footer-brand span { font-weight:800; }.footer-links { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }.footer-links a { padding:4px 0; border-bottom:1px solid transparent; font-weight:700; }.footer-links a:hover { color:#167d88; border-bottom-color:currentColor; }.credits { color:#6b969b; }.credits a { color:#287e87; }.copyright { margin:0; white-space:nowrap; }
.mobile-only { display:none; }
@media (max-width:760px) {
  .site-header { height:64px; padding:7px 14px; }.brand img { width:44px;height:44px; }.brand span { display:none; }.header-play { padding:9px 16px; font-size:13px; box-shadow:0 4px 0 #d94472; }
  .hero { min-height:780px; padding-top:64px; align-items:flex-end; background:linear-gradient(180deg,#37cadd 0 43%,#078da5 72%,#057d93 100%); }.hero-art { inset:64px 0 auto; height:350px; background-color:#37cadd; background-size:auto 100%; background-position:76% center; background-repeat:no-repeat; }.hero-shade { inset:64px 0 auto; height:420px; background:linear-gradient(180deg,transparent 0 68%,#078da5 100%); }
  .hero-copy { padding:385px 22px 76px; text-align:left; }.eyebrow { font-size:10px; }.hero h1 { font-size:clamp(32px,9.5vw,40px); line-height:1.25; }.hero-copy>h1+p { font-size:clamp(23px,7vw,30px); }.hero-lead { font-size:14px; line-height:1.8; }.microcopy { margin:16px 0 0; text-align:center; }.primary-button { min-width:0; width:100%; padding:13px 15px; font-size:17px; }.desktop-only { display:none; }
  .section { padding:72px 18px; }.mobile-only { display:block; }.section-kicker { font-size:10px; }.section-lead { font-size:14px; }
  .feature-grid { grid-template-columns:1fr; gap:18px; }.feature-card { max-width:420px; margin:auto; padding:30px 24px; }.feature-icon { width:70px;height:70px;font-size:36px; }.feature-card h3 { font-size:21px; }
  .story-inner { grid-template-columns:1fr; gap:38px; text-align:center; }.story-copy>p:not(.section-kicker) { margin-left:auto; margin-right:auto; font-size:14px; }.story-prologue { font-size:18px!important; }.story-voice { margin:20px auto; padding:16px 12px; font-size:16px; }.story-copy .story-promise { font-size:18px; }.story-question { padding:14px 8px 0; border-left:0; border-top:3px solid var(--yellow); font-size:17px!important; }.story-visual { width:min(300px,90vw); }.story::before { font-size:60px; }.story::after { font-size:80px; }
  .journey { grid-template-columns:1fr; gap:50px; text-align:center; }.journey-copy>p:not(.section-kicker) { font-size:14px; }.journey-gallery { gap:8px; }.journey-gallery img { border-width:3px; border-radius:15px; }
  .steps { flex-direction:column; }.steps article { width:100%; max-width:380px; }.steps>i { transform:rotate(90deg); line-height:.5; }
  .about-project-card { flex-direction:column; padding:26px 22px; text-align:left; }.about-project-paw { width:68px; height:68px; font-size:34px; }.about-project-card p { font-size:13px; }
  .final-cta { flex-direction:column; gap:20px; padding:65px 20px; }.final-cta>img { width:145px;height:145px; }.final-cta h2 { font-size:30px; } footer, .footer-main { flex-direction:column; align-items:center; gap:18px; text-align:center; }.footer-brand span { display:block; }.footer-links { justify-content:center; flex-direction:column; gap:8px; }.footer-links>span { max-width:340px; line-height:1.8; }
}

@media (max-width:380px) {
  .hero-art { height:325px; background-position:77% center; }
  .hero-shade { height:395px; }
  .hero-copy { padding-top:355px; }
  .hero h1 { font-size:32px; }
  .hero-copy>h1+p { font-size:23px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { animation:none!important; transition:none!important; } }

.policy-page { background:linear-gradient(145deg,#e8fbf8,#fff9e8 46%,#fff1f5); }
.policy-main { padding:126px 20px 70px; }
.policy-card { width:min(880px,100%); margin:auto; padding:clamp(28px,5vw,58px); background:rgba(255,255,255,.96); border:1px solid rgba(8,174,190,.15); border-radius:32px; box-shadow:0 18px 50px rgba(43,118,127,.13); }
.policy-card>h1 { margin:8px 0 4px; color:#247987; font-size:clamp(31px,5vw,50px); line-height:1.35; }
.policy-updated { margin:0 0 34px; color:#6b969b; font-size:13px; font-weight:700; }
.policy-guide { display:flex; align-items:center; gap:22px; margin:0 0 34px; padding:22px 26px; color:#31515a; background:linear-gradient(135deg,#e5faf7,#fff7d9); border:2px solid rgba(8,174,190,.18); border-radius:24px; }
.policy-guide img { flex:0 0 auto; width:88px; height:88px; border:6px solid white; border-radius:50%; box-shadow:0 8px 22px rgba(43,118,127,.16); }
.policy-guide strong { display:block; margin-bottom:5px; color:#168c99; font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; font-size:21px; }
.policy-guide p { margin:0; font-size:15px; line-height:1.8; }
.policy-card>p,.policy-card section p,.policy-card li { font-size:15px; line-height:1.9; }
.policy-card section { margin-top:38px; padding-top:34px; border-top:1px solid #d9efec; }
.policy-card section h2 { margin:0 0 14px; color:#247987; font-size:23px; }
.policy-card ul { margin:10px 0; padding-left:1.4em; }
.policy-card li+li { margin-top:6px; }
.policy-card section a { color:#087c8d; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.policy-notice { padding:20px 22px; background:#fff7d9; border:2px solid #ffd66e; border-radius:18px; }
.policy-notice>strong { color:#b74c6e; font-size:17px; }
.policy-notice p { margin:8px 0 0; }
.policy-actions { display:grid; justify-items:center; gap:24px; margin-top:48px; }
.policy-back { color:#247987; font-weight:800; border-bottom:1px solid currentColor; }
.policy-footer { justify-content:center; align-items:center; }
@media (max-width:760px) { .policy-main { padding:88px 12px 44px; }.policy-card { padding:26px 20px; border-radius:22px; }.policy-card>h1 { font-size:29px; }.policy-card>p,.policy-card section p,.policy-card li { font-size:14px; }.policy-guide { flex-direction:column; gap:12px; padding:20px 18px; text-align:center; }.policy-guide img { width:78px; height:78px; }.policy-guide strong { font-size:19px; }.policy-guide p { font-size:14px; }.policy-card section { margin-top:30px; padding-top:28px; }.policy-card section h2 { font-size:20px; }.policy-notice { padding:17px; } }