/* =========================================================
   BTRFLY — visual upgrades (texture, tones, tiles, dusk mode,
   butterflies, progress bar, quote band, footer art)
   ========================================================= */
@property --mood-c{syntax:'<color>';inherits:true;initial-value:rgba(151,184,217,.22)}

/* 1. Paper grain + per-section tones */
body::after{content:"";position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body{transition:background-color 1s var(--ease)}
.meet{background:radial-gradient(55% 50% at 20% 45%,rgba(214,190,160,.06),transparent 70%)}
.lore{background:radial-gradient(50% 55% at 25% 50%,rgba(222,170,118,.09),transparent 70%),radial-gradient(40% 40% at 85% 20%,rgba(240,201,195,.05),transparent 70%)}
.dash{background:linear-gradient(180deg,var(--deep),var(--tile-bg,#23251f) 18%,var(--tile-bg,#23251f) 82%,var(--deep))}
.garden{background:radial-gradient(60% 50% at 50% 40%,rgba(151,184,217,.08),transparent 72%)}
.montra{background:radial-gradient(55% 45% at 50% 30%,rgba(240,201,195,.07),transparent 72%)}

/* 2. Soft transitions: no hard lines, ink-brush divider */
.lore,.montra,.dash{border:0}
.lore::before,.dash::before,.garden::before,.montra::before,.quote-band::before{content:"";position:absolute;left:50%;top:0;z-index:3;width:min(460px,64%);height:16px;transform:translate(-50%,-50%);pointer-events:none;opacity:.55;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 16' preserveAspectRatio='none'%3E%3Cpath d='M2 9C60 6 110 4 170 6s120 5 180 3 80-4 108-2c-30 3-80 5-140 5S170 12 110 12 30 11 2 9z' fill='%23d9be99'/%3E%3C/svg%3E") center/100% 100% no-repeat;-webkit-mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
.quote-band::before{top:0}

/* 3. Full-width moment */
.quote-band{position:relative;min-height:clamp(420px,52vw,640px);display:grid;place-items:center;overflow:hidden;text-align:center}
.qb-bg{position:absolute;inset:0;overflow:hidden}
.qb-bg img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;object-position:60% 50%}
.qb-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(34,35,31,.55),rgba(34,35,31,.25) 70%),linear-gradient(180deg,var(--deep) 0%,transparent 22%,transparent 78%,var(--deep) 100%)}
.qb-in{position:relative;z-index:2;padding:80px 0}
.qb-quote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.6rem,6.4vw,5.8rem);line-height:1.05;letter-spacing:-.03em;margin:0 auto;max-width:12em;color:var(--white);text-shadow:0 2px 30px rgba(20,14,10,.55),0 0 60px rgba(255,236,206,.18);text-wrap:balance}
.qb-sub{margin:26px 0 0;font-size:.9rem;letter-spacing:.14em;color:#efe4d3;text-shadow:0 1px 12px rgba(20,14,10,.6)}

/* 4. Token stats as garden stones */
.stats{gap:18px;border:0}
.stat,.stat+.stat{border:1px solid var(--line-soft);border-radius:30px 30px 22px 22px;padding:30px 24px 28px;background:linear-gradient(160deg,rgba(246,232,210,.08),rgba(246,232,210,.02) 55%,rgba(20,18,14,.18));box-shadow:inset 0 1px 0 rgba(255,250,240,.1),0 18px 40px rgba(14,12,9,.28);transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s}
.stat:hover{background:linear-gradient(160deg,rgba(246,232,210,.1),rgba(246,232,210,.03) 55%,rgba(20,18,14,.18));transform:translateY(-4px);border-color:rgba(151,184,217,.45);box-shadow:inset 0 1px 0 rgba(255,250,240,.14),0 26px 50px rgba(14,12,9,.4),0 0 40px rgba(151,184,217,.16)}
.stat .icon{color:var(--blue)}
@media(max-width:1080px){.stat:nth-child(3),.stat:nth-child(n+3){border:1px solid var(--line-soft)}.stat:hover{border-color:rgba(151,184,217,.45)}}
@media(max-width:640px){.stats{gap:12px}.stat,.stat+.stat{border-radius:24px 24px 18px 18px;padding:22px 16px}}

/* 6. Mood colors in the garden */
.garden{transition:--mood-c 1.2s var(--ease)}
.garden-bg::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(45% 42% at 50% 56%,var(--mood-c),transparent 72%)}
.g-card[aria-pressed=true]{border-color:var(--mood-c)}
.g-caption h3{text-shadow:0 0 34px var(--mood-c);transition:text-shadow 1.2s}

/* 8. Easier-to-read text */
.lede{font-size:1.04rem;color:#ddd5c8}
.panel p,.lore-steps p,.g-caption p{font-size:.95rem;color:#d9d0c3}
.stat-label{font-size:.8rem}.stat-note{font-size:.84rem}
.disclaimer{font-size:.8rem}
@media(max-width:640px){.lede{font-size:1rem}}

/* 9. Scroll progress butterfly */
.scroll-prog{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:2px;z-index:55;pointer-events:none}
.scroll-prog i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(151,184,217,.2),var(--blue) 60%,var(--champagne));transform-origin:left;transform:scaleX(0)}
.scroll-prog .bfly{position:absolute;top:-8px;left:0;width:18px;height:18px}

/* 5. Cursor butterfly + bursts */
.cursor-bf{position:fixed;left:0;top:0;width:18px;height:18px;z-index:80;pointer-events:none;opacity:0;transition:opacity .4s}
.cursor-bf.on{opacity:.95}
.burst-layer{position:fixed;inset:0;z-index:81;pointer-events:none;overflow:hidden}
.burst-layer .bfly{position:absolute;left:0;top:0}

/* 7. Dusk mode */
.mode-btn{width:46px;height:46px;border-radius:999px;border:1px solid var(--line);background:rgba(38,33,31,.3);display:grid;place-items:center;cursor:pointer;color:var(--ivory);transition:border-color .4s,box-shadow .4s,transform .4s var(--ease)}
.mode-btn:hover{border-color:var(--champagne);box-shadow:0 0 22px rgba(151,184,217,.3);transform:translateY(-1px)}
.mode-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.mode-btn .sun{display:none}
[data-mode=dusk] .mode-btn .sun{display:block}[data-mode=dusk] .mode-btn .moon{display:none}
@media(max-width:640px){.mode-btn{width:42px;height:42px}}

[data-mode=dusk]{--deep:#1b2130;--deeper:#151a25;--tile-bg:#181e2b;--line:rgba(190,210,240,.24);--line-soft:rgba(190,210,240,.12);--champagne:#c6d4ee;--stone:#b8c4da;--taupe:#9ba7bd;color-scheme:dark}
[data-mode=dusk] body{background:var(--deep)}
[data-mode=dusk] .hero{background:#1b2130}
[data-mode=dusk] .hero .scene,[data-mode=dusk] .hero-top-fade,[data-mode=dusk] .hero-blossom{filter:brightness(.62) saturate(.7) hue-rotate(-8deg)}
[data-mode=dusk] .hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(40% 50% at 88% 10%,rgba(200,220,255,.22),transparent 70%),linear-gradient(180deg,rgba(40,60,110,.35),rgba(27,33,48,.25));mix-blend-mode:screen}
[data-mode=dusk] .hero .sun{opacity:.25}
[data-mode=dusk] .nav.scrolled{background:rgba(21,26,37,.9)}
[data-mode=dusk] .nav::before{background:linear-gradient(180deg,rgba(21,26,37,.6),transparent)}
[data-mode=dusk] .eco-bar{background:rgba(27,33,48,.93)}
[data-mode=dusk] .lede,[data-mode=dusk] .panel p,[data-mode=dusk] .lore-steps p,[data-mode=dusk] .g-caption p{color:#d3dae8}
[data-mode=dusk] .meet .art img,[data-mode=dusk] .lore-frame img,[data-mode=dusk] .arch-frame img,[data-mode=dusk] .qb-bg img,[data-mode=dusk] .garden-bg img,[data-mode=dusk] .montra-bg img{filter:brightness(.68) saturate(.75) hue-rotate(-6deg)}
[data-mode=dusk] .art::after,[data-mode=dusk] .lore-frame::after{background:linear-gradient(180deg,rgba(60,90,150,.28),rgba(20,26,40,.35))}
[data-mode=dusk] .qb-bg::after{background:radial-gradient(70% 60% at 50% 50%,rgba(21,26,37,.6),rgba(21,26,37,.3) 70%),linear-gradient(180deg,var(--deep) 0%,transparent 22%,transparent 78%,var(--deep) 100%)}
[data-mode=dusk] .lore{background:radial-gradient(50% 55% at 25% 50%,rgba(151,184,217,.1),transparent 70%)}
[data-mode=dusk] .meet,[data-mode=dusk] .garden,[data-mode=dusk] .montra{background:radial-gradient(55% 50% at 50% 40%,rgba(151,184,217,.08),transparent 72%)}
[data-mode=dusk] .lore-post{background:rgba(27,33,48,.92)}
[data-mode=dusk] .btn-primary{background:linear-gradient(180deg,#f6f8ff 0%,#dfe7f6 45%,#bccbe6 100%);color:#24304a;border-color:rgba(240,245,255,.9);box-shadow:inset 0 1px 0 #fff,0 8px 26px rgba(151,184,217,.3)}
[data-mode=dusk] .bfly svg{filter:drop-shadow(0 0 5px rgba(200,225,255,1)) drop-shadow(0 0 14px rgba(151,184,217,.9))}
[data-mode=dusk] .lore::before,[data-mode=dusk] .dash::before,[data-mode=dusk] .garden::before,[data-mode=dusk] .montra::before,[data-mode=dusk] .quote-band::before{filter:hue-rotate(180deg) saturate(.6) brightness(1.2)}
.hero::after,.hero .sun,.hero .scene,.hero-top-fade,.hero-blossom,.art img,.lore-frame img,.arch-frame img,.qb-bg img{transition:filter 1s var(--ease),opacity 1s var(--ease)}

/* 10. Richer footer */
footer{overflow:hidden}
.f-blossom{position:absolute;right:-60px;top:-40px;width:min(520px,60vw);opacity:.13;pointer-events:none;transform:scaleX(-1);-webkit-mask:radial-gradient(closest-side,#000 35%,transparent);mask:radial-gradient(closest-side,#000 35%,transparent)}
footer .wrap{position:relative;z-index:1}
.f-nap{display:flex;align-items:flex-end;gap:14px;margin-top:22px}
.f-nap img{width:96px;height:auto;filter:drop-shadow(0 8px 12px rgba(10,8,6,.4));animation:bob 5s ease-in-out infinite}
.f-nap span{font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--stone);padding-bottom:14px}
@media(prefers-reduced-motion:reduce){.cursor-bf,.scroll-prog .bfly{display:none}.f-nap img,