:root{
  --orange:#ff9f1c;
  --orange-2:#ffb52e;
  --yellow:#ffd84d;
  --cream:#fff1c2;
  --paper:#fff8df;
  --brown:#4b260b;
  --brown-2:#7a3f12;
  --ink:#1f160f;
  --white:#fffdf5;
  --shadow:0 18px 0 rgba(75,38,11,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",sans-serif;
  color:var(--ink);
  background:#f7a227;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(1180px,calc(100% - 36px));margin-inline:auto}
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:14px 0;
  transition:.25s ease;
}
.site-header.scrolled{
  background:rgba(255,159,28,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(70,35,6,.15);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Baloo 2";font-weight:800;font-size:1.2rem;letter-spacing:.04em}
.brand img{width:48px;height:48px;object-fit:contain}
.brand span span{color:#fff7ca}
.nav{display:flex;align-items:center;gap:26px;font-weight:700;font-size:.95rem}
.nav a{transition:.2s}
.nav a:hover{transform:translateY(-2px);color:white}
.nav-cta{
  background:var(--brown);color:white!important;padding:12px 18px;border-radius:999px;
  box-shadow:0 6px 0 #2e1707;
}
.menu-btn{display:none;background:none;border:0;padding:8px}
.menu-btn span{display:block;width:26px;height:3px;background:var(--brown);margin:5px;border-radius:4px}

.hero{
  min-height:100vh;
  padding-top:110px;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,244,157,.95) 0 8%,transparent 24%),
    linear-gradient(180deg,#ffb02f 0%,#ff9718 100%);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(92,42,8,.12) 1.2px,transparent 1.2px);
  background-size:19px 19px;
  mask-image:linear-gradient(to bottom,#000,transparent 80%);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;min-height:calc(100vh - 170px);position:relative;z-index:2}
.eyebrow{
  display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em;
  color:#fff6c6;background:var(--brown);padding:8px 12px;border-radius:999px;
}
.eyebrow.dark{color:#fff;background:var(--brown)}
.hero h1,.section h2,.final-card h2{
  font-family:"Baloo 2",sans-serif;
  font-weight:800;line-height:.92;margin:22px 0 18px;
}
.hero h1{font-size:clamp(4rem,8vw,7rem);letter-spacing:-.045em}
.hero h1 span{color:var(--paper);text-shadow:4px 4px 0 var(--brown)}
.lead{font-size:1.15rem;line-height:1.7;max-width:700px;color:#47260f}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 22px;border-radius:14px;font-weight:800;border:2px solid var(--brown);
  transition:.22s ease;cursor:pointer;
}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--brown);color:white;box-shadow:0 7px 0 #2d1607}
.btn-primary:hover{box-shadow:0 4px 0 #2d1607}
.btn-ghost{background:rgba(255,255,255,.18);color:var(--brown)}
.btn-ghost.light{color:white;border-color:white}
.contract-box{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:min(520px,100%);padding:14px 16px;border-radius:16px;background:#fff6cf;
  border:2px solid var(--brown);box-shadow:6px 7px 0 rgba(75,38,11,.22);
}
.contract-box small{display:block;font-weight:700;opacity:.65;margin-bottom:3px}
.contract-box strong{font-family:monospace}
.contract-box button{border:0;background:#d8caa3;color:#7d7356;font-weight:800;padding:9px 12px;border-radius:10px}
.mini-proof{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px;font-size:.88rem;font-weight:800;color:#5c300f}

.hero-art{position:relative;min-height:610px;display:grid;place-items:center}
.sun{
  position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,#ffe66c 0 44%,#ffc845 45% 61%,rgba(255,218,85,.16) 62% 66%,transparent 67%);
  animation:pulseSun 4s ease-in-out infinite;
}
@keyframes pulseSun{50%{transform:scale(1.05) rotate(4deg)}}
.hero-video-wrap{
  position:relative;
  z-index:2;
  width:min(620px,100%);
  border-radius:28px;
  overflow:hidden;
  filter:drop-shadow(0 24px 20px rgba(70,34,5,.26));
  animation:floatDog 4.5s ease-in-out infinite;
  background:transparent;
}
.hero-video{
  display:block;
  width:100%;
  height:auto;
  max-height:620px;
  object-fit:contain;
  background:transparent;
}
@keyframes floatDog{50%{transform:translateY(-14px) rotate(-1deg)}}
.sticker{
  position:absolute;z-index:3;font-family:"Baloo 2";font-weight:800;background:var(--paper);
  border:3px solid var(--brown);padding:10px 14px;border-radius:12px;box-shadow:5px 6px 0 var(--brown);
}
.sticker-1{left:3%;top:18%;transform:rotate(-7deg)}
.sticker-2{right:0;bottom:18%;transform:rotate(5deg)}
.floating-coin{position:absolute;font-family:"Baloo 2";font-weight:800;border:3px solid var(--brown);background:var(--yellow);color:var(--brown);border-radius:50%;display:grid;place-items:center;z-index:1;box-shadow:5px 7px 0 rgba(75,38,11,.25)}
.coin-a{width:65px;height:65px;left:3%;top:28%;animation:drift 5s ease-in-out infinite}
.coin-b{width:52px;height:52px;left:47%;top:15%;animation:drift 4s ease-in-out infinite reverse}
.coin-c{width:82px;height:82px;right:3%;bottom:25%;animation:drift 6s ease-in-out infinite}
@keyframes drift{50%{transform:translate(10px,-22px) rotate(12deg)}}

.ticker{position:relative;z-index:5;overflow:hidden;background:var(--brown);color:#fff2b8;border-block:2px solid #2f1607;transform:rotate(-1deg);width:102%;margin-left:-1%}
.ticker-track{display:flex;width:max-content;gap:28px;padding:14px 0;font-family:"Baloo 2";font-size:1.05rem;font-weight:800;animation:ticker 25s linear infinite}
@keyframes ticker{to{transform:translateX(-50%)}}

.section{padding:110px 0}
.section-light{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}
.dog-card{
  background:linear-gradient(150deg,#ffd94d,#ff9b1c);border:3px solid var(--brown);
  border-radius:34px;box-shadow:14px 16px 0 var(--brown);padding:24px;transform:rotate(-2deg)
}
.dog-card img{aspect-ratio:1/1;object-fit:contain}
.about-visual{position:relative}
.paw{position:absolute;font-size:4rem;filter:sepia(1);opacity:.2}
.paw-1{top:-50px;right:-30px;transform:rotate(15deg)}
.paw-2{bottom:-50px;left:-20px;transform:rotate(-18deg)}
.section-copy h2,.section-head h2{font-size:clamp(2.8rem,5vw,5rem);letter-spacing:-.03em}
.section-copy>p,.section-head p{font-size:1.07rem;line-height:1.75;color:#5d4a38}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.feature-grid article{background:#fff0b4;border:2px solid #633310;border-radius:18px;padding:20px;box-shadow:5px 6px 0 rgba(84,42,9,.17)}
.feature-grid b{font-family:"Baloo 2";font-size:1.35rem}
.feature-grid h3{font-family:"Baloo 2";font-size:1.25rem;margin:5px 0}
.feature-grid p{font-size:.92rem;line-height:1.55;margin:0;color:#5f4a35}

.meme-strip{background:var(--brown);padding:55px 0}
.meme-card{display:grid;grid-template-columns:1fr 210px;align-items:center;gap:30px;color:white}
.meme-card h2{font-family:"Baloo 2";font-size:clamp(2.7rem,5vw,5.2rem);line-height:.95;margin:8px 0}
.meme-kicker{font-weight:900;color:var(--yellow);letter-spacing:.13em;font-size:.78rem}
.meme-card img{filter:drop-shadow(0 18px 24px rgba(0,0,0,.24));animation:spinCoin 9s linear infinite}
@keyframes spinCoin{50%{transform:rotateY(20deg) rotate(4deg)}}

.roadmap-section{
  background:
  radial-gradient(circle at 15% 15%,rgba(255,235,125,.45),transparent 24%),
  #ee8616;
}
.section-head{max-width:760px;margin-bottom:50px}
.roadmap-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.road-card{background:#fff3c2;border:3px solid var(--brown);border-radius:24px;padding:28px;box-shadow:10px 11px 0 var(--brown);position:relative;overflow:hidden}
.road-card::after{content:"🐾";position:absolute;right:18px;bottom:6px;font-size:4rem;opacity:.08}
.phase{display:inline-block;background:var(--brown);color:var(--yellow);font-weight:900;padding:7px 10px;border-radius:9px}
.road-card h3{font-family:"Baloo 2";font-size:1.8rem;margin:15px 0 9px}
.road-card ul{padding-left:21px;line-height:1.75;margin:0}
.roadmap-poster{margin-top:50px;background:#f2a63b;padding:14px;border-radius:22px;border:3px solid var(--brown);box-shadow:11px 12px 0 rgba(75,38,11,.35)}
.roadmap-poster img{width:100%;border-radius:12px}

.how-section{background:var(--paper)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:white;border:2px solid var(--brown);border-radius:22px;padding:24px;box-shadow:6px 7px 0 rgba(75,38,11,.17)}
.step span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--orange);border:2px solid var(--brown);font-family:"Baloo 2";font-weight:800;font-size:1.35rem}
.step h3{font-family:"Baloo 2";font-size:1.35rem;margin:16px 0 8px}
.step p{color:#62513f;line-height:1.55;margin:0;font-size:.94rem}
.warning{margin-top:30px;border:2px dashed var(--brown);padding:18px 20px;border-radius:16px;display:flex;gap:12px;align-items:flex-start;background:#fff0af}
.warning strong{white-space:nowrap}

.community-section{background:var(--brown);color:white;overflow:hidden}
.community-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:50px}
.community-grid h2{font-size:clamp(3rem,5vw,5.6rem)}
.community-grid p{font-size:1.06rem;line-height:1.75;color:#f3dfc8;max-width:660px}
.community-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.community-art{position:relative}
.community-art img{max-height:560px;margin:auto;filter:drop-shadow(0 30px 26px rgba(0,0,0,.35))}
.speech{position:absolute;right:0;top:12%;background:var(--paper);color:var(--brown);border:3px solid #140a03;padding:14px 18px;border-radius:20px 20px 20px 4px;font-family:"Baloo 2";font-size:1.25rem;font-weight:800;transform:rotate(4deg)}

.faq-section{background:#ffcf4c}
.faq-wrap{max-width:900px}
.faq-list{display:grid;gap:13px}
details{background:var(--paper);border:2px solid var(--brown);border-radius:16px;padding:0 20px;box-shadow:5px 6px 0 rgba(75,38,11,.15)}
summary{cursor:pointer;font-family:"Baloo 2";font-size:1.2rem;font-weight:800;padding:20px 0}
details p{margin:0 0 20px;color:#5b4937;line-height:1.65}

.final-cta{background:var(--paper);padding:80px 0}
.final-card{background:linear-gradient(135deg,#ff9d1d,#ffd652);border:3px solid var(--brown);box-shadow:13px 15px 0 var(--brown);border-radius:30px;padding:30px;display:grid;grid-template-columns:130px 1fr auto;gap:28px;align-items:center}
.final-card img{width:130px}
.final-card span{font-weight:900;letter-spacing:.13em;font-size:.75rem}
.final-card h2{font-size:2.5rem;margin:4px 0}
.final-card p{margin:0;line-height:1.6}

footer{background:#251307;color:#e9d4bd;padding:42px 0 0}
.footer-grid{display:grid;grid-template-columns:1fr 1.4fr .7fr;gap:40px;align-items:start}
.footer-brand{display:flex;gap:12px;align-items:center}
.footer-brand img{width:55px}
.footer-brand strong,.footer-brand span{display:block}
.footer-brand span{font-size:.85rem;opacity:.7}
.footer-grid p{margin:0;line-height:1.6;font-size:.9rem;opacity:.75}
.footer-links{display:flex;gap:18px;justify-content:flex-end;font-weight:700}
.footer-bottom{text-align:center;padding:24px;margin-top:28px;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;opacity:.65}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:950px){
  .nav{position:absolute;top:72px;left:18px;right:18px;display:none;flex-direction:column;background:#ffe189;border:2px solid var(--brown);border-radius:18px;padding:18px;box-shadow:8px 9px 0 var(--brown)}
  .nav.open{display:flex}
  .menu-btn{display:block}
  .hero-grid,.about-grid,.community-grid{grid-template-columns:1fr}
  .hero{padding-top:95px}
  .hero-grid{padding-bottom:60px}
  .hero-copy{text-align:center}
  .hero-actions,.mini-proof{justify-content:center}
  .contract-box{margin-inline:auto}
  .hero-art{min-height:520px}
  .about-grid{gap:55px}
  .roadmap-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .final-card{grid-template-columns:100px 1fr}
  .final-card .btn{grid-column:1/-1}
  .footer-grid{grid-template-columns:1fr}
  .footer-links{justify-content:flex-start}
}
@media(max-width:620px){
  .container{width:min(100% - 24px,1180px)}
  .site-header{padding:9px 0}
  .brand span{font-size:1rem}
  .brand img{width:42px;height:42px}
  .hero h1{font-size:3.55rem}
  .lead{font-size:1rem}
  .hero-art{min-height:410px}
  .sun{width:360px;height:360px}
  .sticker{font-size:.8rem}
  .feature-grid,.steps{grid-template-columns:1fr}
  .meme-card{grid-template-columns:1fr;text-align:center}
  .meme-card img{width:180px;margin:auto}
  .section{padding:78px 0}
  .section-copy h2,.section-head h2{font-size:2.75rem}
  .warning{display:block}
  .warning strong{display:block;margin-bottom:6px}
  .final-card{grid-template-columns:1fr;text-align:center}
  .final-card img{margin:auto}
  .speech{font-size:1rem;right:5px}
}