/* ===========================================================
   Baby CashCat — storybook landing styles
   Palette pulled straight from the art: cream parchment, sage
   mint, chocolate brown, gold coins, pink cheeks, tear-blue.
   =========================================================== */
:root{
  --cream:#F7F0DB; --cream-2:#FBF6E9; --parchment:#F1E7C9;
  --card:#FCF8EC; --card-2:#F6EFD8;
  --ink:#3E2C1E; --ink-soft:#6E5847; --ink-faint:#9A8570;
  --sage:#A9C6A0; --sage-deep:#7FA378; --sage-dark:#5E8257;
  --gold:#E4A93C; --gold-deep:#C88F2E; --gold-soft:#F3D48A;
  --pink:#E9A3A6; --pink-soft:#F4C9CB; --tear:#A9D2E8;
  --ring:#E7DBB6;
  --shadow:0 18px 40px -18px rgba(90,68,40,.45);
  --shadow-sm:0 8px 20px -10px rgba(90,68,40,.4);
  --radius:26px; --radius-sm:16px;
  --maxw:1120px;
  --head:'Fredoka',system-ui,sans-serif;
  --body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--body); color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -5%, #EAF2E2 0%, transparent 55%),
    radial-gradient(1000px 500px at 0% 10%, #FBEEDC 0%, transparent 50%),
    linear-gradient(180deg,#FAF3E0 0%, #F5ECD2 100%);
  min-height:100vh; overflow-x:hidden; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--head); color:var(--ink); line-height:1.1; margin:0 0 .4em}
a{color:var(--sage-dark); text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.eyebrow{font-family:var(--head); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  font-size:.78rem; color:var(--sage-dark); margin-bottom:.5rem}
.section{padding:80px 0; position:relative}
.section h2{font-size:clamp(1.9rem,4.4vw,3rem); font-weight:700}
.lead{font-size:clamp(1.02rem,1.7vw,1.2rem); color:var(--ink-soft); max-width:60ch}

/* ---------- floating decor ---------- */
.decor{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.decor span{position:absolute; opacity:.5; animation:float 14s ease-in-out infinite}
.decor span:nth-child(1){left:6%; top:18%; font-size:2rem; animation-delay:0s}
.decor span:nth-child(2){left:88%; top:26%; font-size:1.6rem; animation-delay:2s}
.decor span:nth-child(3){left:14%; top:70%; font-size:1.8rem; animation-delay:4s}
.decor span:nth-child(4){left:80%; top:74%; font-size:2.2rem; animation-delay:1s}
.decor span:nth-child(5){left:46%; top:12%; font-size:1.3rem; animation-delay:3s}
.decor span:nth-child(6){left:62%; top:60%; font-size:1.5rem; animation-delay:5s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-26px) rotate(6deg)}}

/* ---------- top nav ---------- */
header.nav{position:sticky; top:0; z-index:40;
  backdrop-filter:blur(10px); background:rgba(250,243,224,.78);
  border-bottom:1px solid rgba(200,143,46,.18)}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:14px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--head); font-weight:700; font-size:1.18rem}
.brand img{width:42px; height:42px; border-radius:50%; box-shadow:var(--shadow-sm);
  border:2px solid var(--gold-soft)}
.brand small{display:block; font-weight:600; font-size:.72rem; color:var(--sage-dark); letter-spacing:.05em}
.nav-links{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.nav-links a.navlink{font-family:var(--head); font-weight:500; color:var(--ink-soft); padding:8px 12px; border-radius:12px}
.nav-links a.navlink:hover{color:var(--ink); background:rgba(169,198,160,.25)}
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--head); font-weight:600;
  padding:12px 20px; border-radius:14px; cursor:pointer; border:none; transition:.2s transform,.2s box-shadow;
  font-size:1rem}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(180deg,var(--gold) 0%,var(--gold-deep) 100%); color:#fff;
  box-shadow:0 10px 22px -8px rgba(200,143,46,.7)}
.btn-sage{background:linear-gradient(180deg,var(--sage) 0%,var(--sage-deep) 100%); color:#fff;
  box-shadow:0 10px 22px -8px rgba(94,130,87,.6)}
.btn-ghost{background:var(--card); color:var(--ink); border:1.5px solid var(--ring); box-shadow:var(--shadow-sm)}

/* ---------- hero ---------- */
.hero{position:relative; z-index:1; padding:56px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem); font-weight:700}
.hero h1 .grad{background:linear-gradient(90deg,var(--gold-deep),var(--sage-dark));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.tag{font-size:clamp(1.1rem,2vw,1.4rem); color:var(--ink-soft); font-weight:600; margin:.2rem 0 1.3rem}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.hero-art{position:relative}
.hero-art img{border-radius:var(--radius); animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.mini-badge{display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1.5px solid var(--ring);
  border-radius:999px; padding:7px 14px; font-family:var(--head); font-weight:600; font-size:.85rem; box-shadow:var(--shadow-sm)}
.mini-badge b{color:var(--sage-dark)}

/* ---------- CA copy box ---------- */
.ca-box{display:flex; align-items:center; gap:12px; background:var(--card); border:2px dashed var(--gold);
  border-radius:var(--radius-sm); padding:12px 14px; box-shadow:var(--shadow-sm); max-width:520px; cursor:pointer;
  transition:.2s}
.ca-box:hover{background:var(--cream-2); transform:translateY(-1px)}
.ca-box .ca-label{font-family:var(--head); font-weight:600; font-size:.72rem; color:var(--gold-deep);
  text-transform:uppercase; letter-spacing:.1em}
.ca-box .ca-val{font-family:'Nunito',monospace; font-weight:700; font-size:.92rem; word-break:break-all; color:var(--ink)}
.ca-box .ca-copy{margin-left:auto; flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#fff; font-size:1.05rem}

/* ---------- stats ---------- */
.stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.tok-card{background:var(--card); border:1.5px solid var(--ring); border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow); position:relative; overflow:hidden}
.tok-card::after{content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,var(--gold-soft),transparent 70%); opacity:.6}
.tok-head{display:flex; align-items:center; gap:12px; margin-bottom:16px; position:relative; z-index:1}
.tok-head img{width:48px; height:48px; border-radius:50%; border:2px solid var(--gold-soft)}
.tok-head .tk-name{font-family:var(--head); font-weight:700; font-size:1.2rem}
.tok-head .tk-tick{font-size:.82rem; color:var(--sage-dark); font-weight:700}
.tok-head .tk-live{margin-left:auto; font-family:var(--head); font-size:.72rem; font-weight:600; color:var(--sage-dark);
  display:inline-flex; align-items:center; gap:6px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--sage-deep); box-shadow:0 0 0 0 rgba(127,163,120,.6);
  animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,163,120,.6)}70%{box-shadow:0 0 0 10px rgba(127,163,120,0)}100%{box-shadow:0 0 0 0 rgba(127,163,120,0)}}
.stat-rows{display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative; z-index:1}
.stat{background:var(--card-2); border-radius:14px; padding:12px 14px}
.stat .k{font-family:var(--head); font-size:.72rem; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em}
.stat .v{font-family:var(--head); font-weight:700; font-size:1.35rem; color:var(--ink)}
.stat .v.small{font-size:1.05rem}
.chg-up{color:var(--sage-dark)} .chg-down{color:#C77}
.tok-card .card-cta{margin-top:16px; position:relative; z-index:1}
.airdrop-banner{grid-column:1/-1; background:linear-gradient(110deg,#F3E7C4,#E7F0DD); border:1.5px solid var(--ring);
  border-radius:var(--radius); padding:22px 26px; display:flex; align-items:center; gap:22px; box-shadow:var(--shadow); flex-wrap:wrap}
.airdrop-banner .big{font-family:var(--head); font-weight:700; font-size:clamp(2rem,5vw,3.2rem); color:var(--gold-deep); line-height:1}
.airdrop-banner .lbl{font-family:var(--head); font-weight:600; color:var(--ink-soft)}
.airdrop-banner img{width:88px; flex:none}

/* live airdrop stats (pushed from the bot) */
.live-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; margin-bottom:24px}
.lstat{background:var(--card); border:1.5px solid var(--ring); border-radius:var(--radius); padding:28px 22px;
  box-shadow:var(--shadow); text-align:center; position:relative; overflow:hidden}
.lstat::after{content:""; position:absolute; left:-30px; bottom:-30px; width:130px; height:130px; border-radius:50%;
  background:radial-gradient(circle,var(--sage),transparent 70%); opacity:.18}
.lstat-ic{width:62px; height:62px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center;
  font-size:1.9rem; background:linear-gradient(180deg,var(--gold-soft),var(--gold)); box-shadow:var(--shadow-sm); position:relative; z-index:1}
.lstat-k{font-family:var(--head); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); position:relative; z-index:1}
.lstat-v{font-family:var(--head); font-weight:700; font-size:clamp(1.9rem,4.4vw,2.7rem); color:var(--gold-deep); line-height:1.05; margin:6px 0 5px; position:relative; z-index:1}
.lstat-sub{font-size:.86rem; color:var(--ink-soft); font-weight:600; position:relative; z-index:1}
.lstat-v.bump{animation:bump .5s ease}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.14); color:var(--sage-dark)}100%{transform:scale(1)}}
.updated{text-align:center; color:var(--ink-faint); font-size:.92rem; margin-top:26px; font-weight:600}
.updated b{color:var(--sage-dark)}

/* ---------- lore / content blocks ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.split.rev{direction:rtl} .split.rev>*{direction:ltr}
.art-frame{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:3px solid #fff;
  background:var(--card); transform:rotate(-1.5deg); transition:.3s}
.art-frame:hover{transform:rotate(0) scale(1.02)}
.art-frame.r2{transform:rotate(1.5deg)}
.prose p{color:var(--ink-soft); font-size:1.05rem; margin:0 0 1rem}
.prose p strong{color:var(--ink)}
.tick-list{list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:10px}
.tick-list li{position:relative; padding-left:30px; font-weight:600; color:var(--ink-soft)}
.tick-list li::before{content:"🐾"; position:absolute; left:0; top:0}

/* ---------- flywheel ---------- */
.flywheel-wrap{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
.flywheel{position:relative; width:min(460px,90vw); aspect-ratio:1; margin:0 auto}
.fw-ring{position:absolute; inset:8%; border-radius:50%; border:3px dashed var(--gold);
  animation:spin 40s linear infinite; opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}
.fw-center{position:absolute; inset:30%; border-radius:50%; overflow:hidden; box-shadow:var(--shadow);
  border:4px solid #fff; z-index:2}
.fw-center img{width:100%; height:100%; object-fit:cover}
.fw-node{position:absolute; width:33%; transform:translate(-50%,-50%); background:var(--card);
  border:1.5px solid var(--ring); border-radius:16px; padding:10px 10px; box-shadow:var(--shadow-sm); z-index:3; text-align:center}
.fw-node .n{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#fff; font-family:var(--head); font-weight:700;
  font-size:.85rem; margin-bottom:4px}
.fw-node .t{font-family:var(--head); font-weight:600; font-size:.82rem; color:var(--ink); line-height:1.15}
.fw-node.top{left:50%; top:5%} .fw-node.right{left:88%; top:50%}
.fw-node.bottom{left:50%; top:95%} .fw-node.left{left:12%; top:50%}
.fw-steps{display:none}

/* mobile flywheel = vertical stepper */
@media(max-width:820px){
  .flywheel-wrap{grid-template-columns:1fr}
  .flywheel{display:none}
  .fw-steps{display:grid; gap:0}
  .fw-steps .st{display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1.5px solid var(--ring);
    border-radius:16px; padding:16px; box-shadow:var(--shadow-sm)}
  .fw-steps .arw{justify-self:center; text-align:center; color:var(--gold-deep); font-size:1.4rem; padding:6px 0}
  .fw-steps .st .n{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
    background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#fff; font-family:var(--head); font-weight:700}
  .fw-steps .st .t{font-family:var(--head); font-weight:600; color:var(--ink)}
  .fw-steps .st .d{font-size:.9rem; color:var(--ink-soft)}
}

/* ---------- floating social dock ---------- */
.dock{position:fixed; right:18px; bottom:18px; z-index:45; display:flex; flex-direction:column; gap:12px}
.dock a{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:var(--card);
  border:1.5px solid var(--ring); box-shadow:var(--shadow); color:var(--ink); transition:.2s; animation:dockbob 3s ease-in-out infinite}
.dock a:hover{transform:translateY(-4px) scale(1.08); background:var(--sage); color:#fff}
.dock a svg{width:26px; height:26px}
.dock a.chart{background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#fff; border:none}
.dock a:nth-child(2){animation-delay:.4s}.dock a:nth-child(3){animation-delay:.8s}.dock a:nth-child(4){animation-delay:1.2s}
@keyframes dockbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.dock a[hidden]{display:none}

/* ---------- footer ---------- */
footer{padding:56px 0 120px; text-align:center; position:relative; z-index:1}
footer .fbrand{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px}
footer .fbrand img{width:56px; height:56px; border-radius:50%; border:2px solid var(--gold-soft)}
footer .flinks{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:16px 0}
footer .disc{max-width:60ch; margin:18px auto 0; font-size:.82rem; color:var(--ink-faint)}
.copy-toast{position:fixed; left:50%; bottom:40px; transform:translateX(-50%) translateY(20px); opacity:0;
  background:var(--ink); color:#fff; font-family:var(--head); font-weight:600; padding:12px 22px; border-radius:14px;
  box-shadow:var(--shadow); z-index:60; transition:.25s; pointer-events:none}
.copy-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero-cta,.badge-row{justify-content:center}
  .ca-box{margin:0 auto}
  .hero-art{order:-1; max-width:340px; margin:0 auto}
  .stats-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr; gap:26px}
  .split .art-frame{max-width:420px; margin:0 auto}
  .nav-links .navlink{display:none}
}
@media(max-width:520px){
  .section{padding:56px 0}
  .stat-rows{grid-template-columns:1fr 1fr}
  .dock a{width:48px; height:48px}
}