/* Champs Space — Bold Sunshine design system
   Fonts: Nunito (headings) + Plus Jakarta Sans (body). Animations: transform/opacity only. */
:root{
  --navy:#12103A;--navy2:#1E1B52;--navy3:#2D2970;
  --coral:#FF4D3D;--coral-dk:#D93628;--amber:#FFB627;--amber-dk:#B87400;
  --mint:#00C49A;--mint-dk:#008A6B;--sky:#38B6FF;--sky-dk:#1A7FC4;--lilac:#8B5CF6;
  --cream:#FFFCF5;--cream2:#FFF8EC;--ink:#0D0C22;--ink2:#2A2859;--muted:#5F5E82;
  --g-hero:linear-gradient(145deg,#1A1750 0%,#0F0D2E 50%,#1A1055 100%);
  --g-coral:linear-gradient(135deg,#FF4D3D,#FF8C6B);--g-amber:linear-gradient(135deg,#FFB627,#FF8C00);
  --g-mint:linear-gradient(135deg,#00C49A,#00E5C0);--g-sky:linear-gradient(135deg,#38B6FF,#0080FF);
  --g-lilac:linear-gradient(135deg,#8B5CF6,#C084FC);
  --s1:0 2px 8px rgba(18,16,58,.07);--s2:0 6px 20px rgba(18,16,58,.1);
  --s3:0 14px 44px rgba(18,16,58,.14);--s4:0 28px 80px rgba(18,16,58,.18);
  --sc:0 8px 28px rgba(255,77,61,.4);
  --r1:10px;--r2:18px;--r3:26px;--r4:36px;--rp:9999px;
  --fh:'Nunito',system-ui,sans-serif;--fb:'Plus Jakarta Sans',system-ui,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.25,.46,.45,.94);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--cream);color:var(--ink);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}ul{list-style:none}
button{cursor:pointer;font-family:var(--fb);border:none;background:none;color:inherit}
input,textarea,select{font-family:var(--fb)}
img,svg{max-width:100%;display:block}
::selection{background:rgba(255,77,61,.18)}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;z-index:2000}
.skip:focus{left:8px}

h1,h2,h3,h4{font-family:var(--fh);line-height:1.12;color:var(--ink)}
h1{font-size:clamp(2.5rem,5.2vw + .5rem,5rem);font-weight:900;letter-spacing:-.03em}
h2{font-size:clamp(1.9rem,3.5vw + .3rem,3.3rem);font-weight:900;letter-spacing:-.025em}
h3{font-size:clamp(1.25rem,2vw + .2rem,1.8rem);font-weight:800}
h4{font-size:clamp(1rem,1.2vw + .1rem,1.2rem);font-weight:800}
p{color:var(--muted);line-height:1.8;font-size:clamp(.95rem,1vw + .04rem,1.05rem)}
.gc{background:var(--g-coral);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ga{background:var(--g-amber);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gm{background:var(--g-mint);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.container{width:100%;max-width:1200px;margin:0 auto;padding-inline:clamp(18px,5vw,60px)}
.sec{padding-block:clamp(64px,9vw,120px);position:relative}
.sec-sm{padding-block:clamp(40px,6vw,76px)}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,60px)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,30px)}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
@media(max-width:960px){.g2{grid-template-columns:1fr}.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.g3,.g4{grid-template-columns:1fr}}
.tc{text-align:center}.z1{position:relative;z-index:1}
.sec-hd{margin-bottom:clamp(36px,5vw,64px)}
.sec-hd.tc p{margin:14px auto 0;max-width:600px}

/* Keyframes */
@keyframes fadeUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes bobSm{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes popIn{0%{transform:scale(0) rotate(-15deg);opacity:0}65%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1);opacity:1}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-10deg)}70%{transform:rotate(10deg)}}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stag>*{opacity:0;transform:translateY(26px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(2){transition-delay:.08s}.stag.in>*:nth-child(3){transition-delay:.16s}
.stag.in>*:nth-child(4){transition-delay:.24s}.stag.in>*:nth-child(5){transition-delay:.32s}
.stag.in>*:nth-child(6){transition-delay:.4s}.stag.in>*:nth-child(7){transition-delay:.48s}
.stag.in>*:nth-child(8){transition-delay:.56s}

/* Pills / buttons */
.pill{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:var(--rp);font-family:var(--fh);font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.p-c{background:rgba(255,77,61,.12);color:var(--coral-dk)}.p-a{background:rgba(255,182,39,.18);color:var(--amber-dk)}
.p-m{background:rgba(0,196,154,.13);color:var(--mint-dk)}.p-k{background:rgba(56,182,255,.14);color:var(--sky-dk)}
.p-l{background:rgba(139,92,246,.12);color:#6D28D9}.p-w{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--rp);font-family:var(--fh);font-weight:800;white-space:nowrap;transition:transform .2s var(--spring),box-shadow .18s var(--ease),background .15s}
.btn:hover{transform:translateY(-3px) scale(1.03)}.btn:active{transform:scale(.97)}
.btn-lg{padding:15px clamp(26px,3.5vw,40px);font-size:1.02rem}.btn-md{padding:11px 26px;font-size:.92rem}.btn-sm{padding:8px 18px;font-size:.8rem}
.btn-c{background:var(--g-coral);color:#fff;box-shadow:var(--sc)}.btn-a{background:var(--g-amber);color:#1a1000;box-shadow:0 8px 28px rgba(255,182,39,.4)}
.btn-m{background:var(--g-mint);color:#fff}.btn-dark{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--ink);box-shadow:var(--s2)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(255,255,255,.22)}
.btn-outline{border:2.5px solid rgba(255,77,61,.3);color:var(--coral-dk);background:transparent}
.btn-outline:hover{background:rgba(255,77,61,.07);border-color:var(--coral)}
.btn[aria-disabled=true]{opacity:.7;cursor:not-allowed;pointer-events:none}

/* Navbar */
.navbar{position:fixed;top:0;inset-inline:0;z-index:1000;transition:background .3s,box-shadow .3s}
.navbar.up{background:rgba(255,252,245,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(18,16,58,.08)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:clamp(64px,7vw,76px);max-width:1200px;margin:0 auto;padding-inline:clamp(18px,5vw,60px);gap:16px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{width:42px;height:42px;border-radius:14px;background:var(--g-coral);display:grid;place-items:center;font-size:1.4rem;box-shadow:var(--sc);transition:transform .3s var(--spring)}
.logo:hover .logo-mark{transform:rotate(-10deg) scale(1.1)}
.logo-name{font-family:var(--fh);font-weight:900;font-size:1.25rem;letter-spacing:-.03em;color:var(--ink)}
.logo-name span{color:var(--coral)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{padding:8px 14px;border-radius:var(--rp);font-family:var(--fh);font-weight:800;font-size:.88rem;color:var(--ink2);transition:color .15s,background .15s,transform .2s var(--spring)}
.nav-link:hover,.nav-link.active{color:var(--coral-dk);background:rgba(255,77,61,.09);transform:translateY(-1px)}
.nav-acts{display:flex;align-items:center;gap:9px}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:10px}
.nav-burger span{display:block;width:24px;height:3px;background:var(--ink);border-radius:3px;transition:transform .3s var(--spring),opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-burger.open span{background:#fff}
.drawer{position:fixed;inset:0;background:var(--navy);z-index:999;padding:100px 28px 40px;display:flex;flex-direction:column;gap:4px;transform:translateX(110%);transition:transform .4s cubic-bezier(.32,.72,0,1);overflow-y:auto;visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer a.dl{padding:13px 18px;border-radius:var(--r2);font-family:var(--fh);font-weight:900;font-size:1.25rem;color:rgba(255,255,255,.7);transition:all .2s var(--spring)}
.drawer a.dl:hover,.drawer a.dl.active{color:#fff;background:rgba(255,77,61,.18);padding-left:26px}
.drawer .btn{margin-top:18px}
@media(max-width:960px){.nav-links,.nav-acts{display:none}.nav-burger{display:flex}.navbar{z-index:1001}}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--g-hero);padding:clamp(110px,13vw,150px) 0 clamp(70px,9vw,110px);min-height:100svh;display:flex;align-items:center}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 80% 20%,rgba(255,77,61,.2),transparent),radial-gradient(ellipse 55% 50% at 10% 80%,rgba(139,92,246,.18),transparent),radial-gradient(ellipse 40% 40% at 50% 50%,rgba(56,182,255,.08),transparent)}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.25;background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);background-size:32px 32px}
.hero h1,.hero h2{color:#fff}.hero p{color:rgba(255,255,255,.78)}
.hero-copy>*{animation:fadeUp .8s both var(--ease)}
.hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}
.hero-copy>*:nth-child(4){animation-delay:.24s}.hero-copy>*:nth-child(5){animation-delay:.32s}
.deco{position:absolute;pointer-events:none;font-size:clamp(1.6rem,3vw,2.8rem);will-change:transform;z-index:1}
.d1{animation:bobSm 5.5s ease-in-out infinite}.d2{animation:bobSm 7s ease-in-out infinite 1.2s}
.d3{animation:bobSm 6.5s ease-in-out infinite .6s}.d4{animation:bobSm 8s ease-in-out infinite 2s}
@media(max-width:700px){.deco{opacity:.5}}
.subhero{background:var(--g-hero);padding:clamp(110px,12vw,150px) 0 clamp(52px,7vw,84px);position:relative;overflow:hidden;text-align:center}
.subhero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 80% 20%,rgba(255,77,61,.2),transparent),radial-gradient(ellipse 50% 50% at 10% 80%,rgba(139,92,246,.18),transparent)}
.subhero h1{color:#fff;font-size:clamp(2.2rem,4.5vw + .5rem,4.2rem);position:relative}
.subhero p{color:rgba(255,255,255,.78);max-width:620px;margin:16px auto 0;position:relative}

/* Phone mockup */
.phone-wrap{position:relative;display:flex;justify-content:center;padding:20px}
.phone{width:clamp(220px,28vw,290px);aspect-ratio:9/18.5;background:#0b0a24;border-radius:42px;padding:10px;box-shadow:0 40px 90px rgba(0,0,0,.45),0 0 0 2px rgba(255,255,255,.1);animation:bob 6s ease-in-out infinite;position:relative}
.phone::before{content:'';position:absolute;top:18px;left:50%;transform:translateX(-50%);width:34%;height:16px;border-radius:12px;background:#0b0a24;z-index:3}
.screen{width:100%;height:100%;border-radius:33px;background:linear-gradient(180deg,#FFF3F0,#FFFCF5 60%,#F0F4FF);padding:40px 14px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.scr-hi{font-family:var(--fh);font-weight:900;color:var(--ink);font-size:1.05rem}
.scr-hi small{display:block;font-size:.7rem;color:var(--muted);font-weight:700}
.scr-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;flex:1}
.scr-tile{border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:var(--fh);font-weight:900;font-size:.72rem;color:var(--ink);transition:transform .25s var(--spring)}
.scr-tile span{font-size:1.9rem}
.scr-tile:nth-child(1){background:#FFE1DC}.scr-tile:nth-child(2){background:#D9F7EE}
.scr-tile:nth-child(3){background:#FFF0C7}.scr-tile:nth-child(4){background:#DDEBFF}
.scr-tile:nth-child(5){background:#EADDFF}.scr-tile:nth-child(6){background:#FFE1DC}
.scr-tile:hover{transform:scale(1.07) rotate(-2deg)}
.float-chip{position:absolute;background:#fff;border-radius:var(--rp);padding:8px 16px;box-shadow:var(--s3);font-family:var(--fh);font-weight:800;font-size:.78rem;color:var(--ink);will-change:transform;z-index:4;white-space:nowrap}
.fc1{top:12%;left:-2%;animation:bob 6s ease-in-out infinite}.fc2{bottom:16%;right:-2%;animation:bob 7s ease-in-out infinite 1s;color:var(--mint-dk)}
.fc3{top:46%;left:-6%;animation:bob 5.5s ease-in-out infinite .5s}
@media(max-width:560px){.fc1{left:0}.fc2{right:0}.fc3{display:none}}

/* Platform strip */
.platforms{display:flex;gap:12px;flex-wrap:wrap}
.plat{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:16px;font-family:var(--fh);font-weight:800;font-size:.86rem;line-height:1.2}
.plat small{display:block;font-size:.66rem;font-weight:700;opacity:.75;letter-spacing:.04em;text-transform:uppercase}
.plat .em{font-size:1.5rem}
.plat.live{background:#fff;color:var(--ink);box-shadow:var(--s2);transition:transform .2s var(--spring)}.plat.live:hover{transform:translateY(-3px)}
.plat.soon{background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);border:1.5px dashed rgba(255,255,255,.3)}
.on-light .plat.soon{background:rgba(18,16,58,.05);color:var(--ink2);border-color:rgba(18,16,58,.25)}

/* Marquee */
.marq{background:var(--navy);overflow:hidden;padding:18px 0;border-block:2px solid rgba(255,255,255,.06)}
.marq-track{display:flex;width:max-content;animation:marquee 32s linear infinite;will-change:transform}
.marq:hover .marq-track{animation-play-state:paused}
.marq-item{display:flex;align-items:center;gap:10px;padding:0 28px;font-family:var(--fh);font-weight:900;font-size:1.05rem;color:#fff;white-space:nowrap}
.marq-item::after{content:'✦';color:var(--amber);margin-left:28px}

/* Cards */
.feat{border-radius:var(--r4);padding:clamp(24px,3.5vw,40px);position:relative;overflow:hidden;transition:transform .28s var(--spring),box-shadow .24s;will-change:transform}
.feat:hover{transform:translateY(-8px) rotate(.3deg);box-shadow:var(--s4)}
.feat .ico{font-size:clamp(2.3rem,4vw,3rem);margin-bottom:14px;display:block;transition:transform .28s var(--spring)}
.feat:hover .ico{transform:scale(1.18) rotate(-7deg)}
.feat p{font-size:.93rem;margin-top:8px}
.f1{background:linear-gradient(145deg,#FFF3F0,#FFE8E5)}.f2{background:linear-gradient(145deg,#F0F4FF,#E8EDFF)}
.f3{background:linear-gradient(145deg,#F0FDF8,#E0FAF2)}.f4{background:linear-gradient(145deg,#FFFAED,#FFF3CC)}
.f5{background:linear-gradient(145deg,#F7F0FF,#EEE3FF)}.f6{background:linear-gradient(145deg,#EFF9FF,#DDF1FF)}
.app-card{border-radius:var(--r4);padding:clamp(28px,4vw,48px);background:var(--navy);color:#fff;position:relative;overflow:hidden;transition:transform .28s var(--spring),box-shadow .24s}
.app-card:hover{transform:translateY(-8px);box-shadow:var(--s4)}
.app-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 90% 0%,rgba(255,77,61,.3),transparent 55%),radial-gradient(ellipse at 0% 100%,rgba(139,92,246,.28),transparent 55%)}
.app-card>*{position:relative}.app-card h3{color:#fff}.app-card p{color:rgba(255,255,255,.75)}
.app-icon{width:78px;height:78px;border-radius:24px;background:var(--g-coral);display:grid;place-items:center;font-size:2.4rem;box-shadow:var(--sc);margin-bottom:20px;transition:transform .28s var(--spring)}
.app-card:hover .app-icon{transform:scale(1.1) rotate(-6deg)}
.app-card.ghost{background:#fff;border:3px dashed rgba(18,16,58,.18);color:var(--ink);text-align:center;display:grid;place-items:center}
.app-card.ghost::before{display:none}.app-card.ghost h3{color:var(--ink)}.app-card.ghost p{color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 24px}
.chip{padding:5px 13px;border-radius:var(--rp);background:rgba(255,255,255,.12);font-size:.74rem;font-weight:800;font-family:var(--fh)}

/* Feature rows (landing) */
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.row.flip .row-vis{order:-1}
@media(max-width:900px){.row{grid-template-columns:1fr}.row.flip .row-vis{order:0}}
.row h2{margin:14px 0 14px}
.tick{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.tick li{display:flex;gap:10px;align-items:flex-start;color:var(--ink2);font-weight:600;font-size:.95rem}
.tick li::before{content:'✓';flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(0,196,154,.15);color:var(--mint-dk);display:grid;place-items:center;font-size:.7rem;font-weight:900;margin-top:2px}
.vis-card{border-radius:var(--r4);padding:clamp(22px,3.5vw,40px);box-shadow:var(--s3);position:relative}
.vis-big{font-size:clamp(4rem,10vw,6.5rem);text-align:center;animation:bobSm 5s ease-in-out infinite;line-height:1.1}
.mini{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.mini div{background:#fff;border-radius:var(--r2);padding:14px;font-family:var(--fh);font-weight:800;font-size:.85rem;color:var(--ink);box-shadow:var(--s1)}
.mini div small{display:block;color:var(--muted);font-weight:600;font-family:var(--fb);font-size:.76rem;margin-top:2px}

/* Dashboard visual */
.dash{background:#fff;border-radius:var(--r3);padding:22px;box-shadow:var(--s2)}
.dash-row{display:flex;align-items:center;gap:12px;margin-top:14px;font-family:var(--fh);font-weight:800;font-size:.85rem}
.bar{flex:1;height:10px;background:#eceaf7;border-radius:10px;overflow:hidden}.bar i{display:block;height:100%;border-radius:10px}

/* Demos */
.demo{background:#fff;border-radius:var(--r4);padding:clamp(20px,3vw,34px);box-shadow:var(--s3);border:2px solid rgba(18,16,58,.05)}
.demo h3{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.demo>p{font-size:.9rem;margin-bottom:16px}
.palette{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.swatch{width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px rgba(18,16,58,.15);transition:transform .2s var(--spring)}
.swatch:hover{transform:scale(1.15)}.swatch.on{box-shadow:0 0 0 4px var(--navy);transform:scale(1.15)}
.paint-svg{width:100%;max-width:440px;margin:0 auto;background:#F4FBFF;border-radius:var(--r3)}
.fillable{fill:#fff;stroke:#12103A;stroke-width:3;stroke-linejoin:round;cursor:pointer;transition:fill .25s}
.fillable:hover{filter:brightness(.96)}
.alpha-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px;margin-bottom:16px}
.al{aspect-ratio:1;border-radius:14px;font-family:var(--fh);font-weight:900;font-size:1.2rem;background:var(--cream2);color:var(--ink2);border:2px solid transparent;transition:transform .2s var(--spring),background .2s}
.al:hover{transform:translateY(-3px) scale(1.06);background:#FFE8E5}
.al.on{background:var(--g-coral);color:#fff}
.alpha-out{display:flex;align-items:center;gap:18px;background:var(--cream2);border-radius:var(--r3);padding:16px 20px;min-height:110px}
.alpha-out .big{font-family:var(--fh);font-weight:900;font-size:3.6rem;line-height:1;color:var(--coral)}
.alpha-out .em{font-size:3rem;animation:popIn .5s var(--spring)}
.alpha-out strong{font-family:var(--fh);font-size:1.15rem;color:var(--ink)}
.mimi{text-align:center}
.mimi-face{font-size:5rem;line-height:1;transition:transform .3s var(--spring)}
.mimi-face.eat{animation:wiggle .5s}
.mimi-goal{font-family:var(--fh);font-weight:900;font-size:1.2rem;margin:8px 0}
.mimi-food{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-height:44px;font-size:1.7rem;margin:8px 0 14px}
.mimi-msg{min-height:26px;font-family:var(--fh);font-weight:800;color:var(--mint-dk)}

/* Stats / steps */
.band{background:var(--navy);border-radius:var(--r4);padding:clamp(32px,5vw,56px);position:relative;overflow:hidden}
.band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 15% 50%,rgba(255,77,61,.22),transparent 60%),radial-gradient(ellipse at 85% 30%,rgba(139,92,246,.2),transparent 55%)}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
@media(max-width:700px){.band-grid{grid-template-columns:repeat(2,1fr)}}
.band-item{text-align:center}.band-item .n{font-size:2.4rem}.band-item b{display:block;font-family:var(--fh);color:#fff;font-weight:900;font-size:1.05rem;margin-top:6px}
.band-item span{font-size:.8rem;color:rgba(255,255,255,.55)}
.cta-band{border-radius:var(--r4);padding:clamp(44px,7vw,84px) clamp(24px,6vw,72px);position:relative;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--navy2) 45%,#1A0050);text-align:center}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 60%,rgba(255,77,61,.25),transparent 55%),radial-gradient(ellipse at 80% 20%,rgba(139,92,246,.22),transparent 50%)}
.cta-band>*{position:relative}.cta-band h2{color:#fff}.cta-band p{color:rgba(255,255,255,.8);max-width:560px;margin:14px auto 28px}
.cta-band .platforms{justify-content:center}

/* FAQ */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border-radius:var(--r2);border:2px solid rgba(18,16,58,.06);padding:4px 22px;transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--s2);border-color:rgba(255,77,61,.25)}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-family:var(--fh);font-weight:800;font-size:1.02rem;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.5rem;color:var(--coral);transition:transform .25s var(--spring)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:18px}

/* Insights */
.post-card{background:#fff;border-radius:var(--r3);overflow:hidden;border:2px solid rgba(0,0,0,.05);display:flex;flex-direction:column;transition:transform .28s var(--spring),box-shadow .24s}
.post-card:hover{transform:translateY(-8px);box-shadow:var(--s4)}
.pc-img{height:clamp(150px,17vw,190px);display:grid;place-items:center;font-size:clamp(3rem,6vw,4rem);overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover}
.pc-body{padding:clamp(18px,2.4vw,26px);flex:1;display:flex;flex-direction:column}
.pc-meta{display:flex;gap:10px;align-items:center;margin-bottom:10px;font-size:.74rem;color:var(--muted);font-weight:700}
.pc-title{font-family:var(--fh);font-weight:900;font-size:1.12rem;line-height:1.3;color:var(--ink);margin-bottom:8px}
.pc-exc{font-size:.88rem;color:var(--muted);flex:1;margin-bottom:14px;line-height:1.7}
.pc-cta{color:var(--coral-dk);font-weight:800;font-family:var(--fh);font-size:.88rem;transition:letter-spacing .2s}
.post-card:hover .pc-cta{letter-spacing:.03em}
.cat-0 .pc-img{background:#FFE8E5}.cat-1 .pc-img{background:#E0FAF2}.cat-2 .pc-img{background:#FFF3CC}.cat-3 .pc-img{background:#E8EDFF}
.article{max-width:740px;margin:0 auto}
.crumbs{font-size:.8rem;color:rgba(255,255,255,.65);margin-bottom:14px;position:relative}
.crumbs a:hover{color:#fff;text-decoration:underline}
.art-meta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:18px;color:rgba(255,255,255,.75);font-size:.84rem;font-weight:600;position:relative}
.prose{font-size:1.08rem}
.prose>*+*{margin-top:1.2em}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:2em}
.prose h3{font-size:1.3rem;margin-top:1.6em}
.prose p,.prose li{color:var(--ink2);font-size:1.06rem;line-height:1.85}
.prose ul,.prose ol{padding-left:1.4em}.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li+li{margin-top:.5em}
.prose a{color:var(--coral-dk);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.prose blockquote{border-left:5px solid var(--amber);background:var(--cream2);padding:16px 22px;border-radius:0 var(--r2) var(--r2) 0;font-family:var(--fh);font-weight:700;color:var(--ink2)}
.prose figure{margin-block:1.8em}.prose figure img{border-radius:var(--r3);width:100%;box-shadow:var(--s2)}
.prose figcaption{font-size:.82rem;color:var(--muted);text-align:center;margin-top:8px}
.prose code{background:#EEEAFB;padding:2px 7px;border-radius:6px;font-size:.92em}
.progress{position:fixed;top:0;left:0;height:4px;width:100%;transform-origin:left;transform:scaleX(0);background:var(--g-coral);z-index:1100}
.art-cta{margin-top:3em;border-radius:var(--r4);background:var(--navy);padding:clamp(24px,4vw,40px);text-align:center;position:relative;overflow:hidden}
.art-cta h3{color:#fff;margin-bottom:8px}.art-cta p{color:rgba(255,255,255,.75);margin-bottom:20px}

/* Store */
.filter-row{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:clamp(28px,4vw,48px)}
.f-btn{padding:9px 22px;border-radius:var(--rp);font-family:var(--fh);font-size:.84rem;font-weight:800;border:2px solid rgba(0,0,0,.1);background:#fff;color:var(--muted);transition:all .22s var(--spring)}
.f-btn:hover{border-color:rgba(255,77,61,.4);color:var(--coral-dk);transform:translateY(-2px)}
.f-btn.on{background:var(--coral);color:#fff;border-color:var(--coral);box-shadow:var(--sc);transform:translateY(-2px)}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(16px,2.5vw,26px)}
.prod{background:#fff;border-radius:var(--r3);overflow:hidden;border:2px solid rgba(0,0,0,.05);display:flex;flex-direction:column;transition:transform .28s var(--spring),box-shadow .24s}
.prod:hover{transform:translateY(-8px) rotate(.3deg);box-shadow:var(--s4)}
.prod-img{height:170px;display:grid;place-items:center;font-size:4rem;position:relative;overflow:hidden}
.prod-img span.e{transition:transform .28s var(--spring)}.prod:hover .prod-img span.e{transform:scale(1.2) rotate(-7deg)}
.prod-tag{position:absolute;top:12px;left:12px;background:var(--g-amber);color:#1a1000;padding:4px 12px;border-radius:var(--rp);font-family:var(--fh);font-size:.66rem;font-weight:900;letter-spacing:.05em}
.prod-body{padding:20px;flex:1;display:flex;flex-direction:column}
.prod-body h3{font-size:1.05rem;margin-bottom:6px}.prod-body p{font-size:.86rem;flex:1;margin-bottom:14px}
.prod-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:2px solid rgba(0,0,0,.05);padding-top:14px}
.price{font-family:var(--fh);font-weight:900;font-size:1.3rem;color:var(--coral)}

/* Forms / contact */
.field{width:100%;padding:13px 16px;border:2px solid rgba(0,0,0,.1);border-radius:var(--r2);font-size:.95rem;color:var(--ink);background:#fff;outline:none;transition:border-color .18s,box-shadow .18s}
.field:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,77,61,.12)}
textarea.field{resize:vertical;min-height:150px}
.f-label{display:block;font-family:var(--fh);font-weight:800;font-size:.82rem;color:var(--ink2);margin-bottom:6px}
.f-grp{margin-bottom:16px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-card{background:#fff;border-radius:var(--r4);padding:clamp(24px,4vw,44px);box-shadow:var(--s3)}
.note{font-size:.8rem;color:var(--muted);margin-top:12px}
.info-card{display:flex;gap:16px;align-items:center;padding:20px;background:#fff;border-radius:var(--r3);box-shadow:var(--s1);margin-bottom:14px;transition:transform .25s var(--spring)}
.info-card:hover{transform:translateX(6px)}
.info-card .e{font-size:1.8rem;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;flex-shrink:0}
.info-card b{font-family:var(--fh);display:block}.info-card span{font-size:.88rem;color:var(--muted)}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.soc{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:rgba(255,255,255,.7);border:2px solid rgba(255,255,255,.08);transition:background .18s,color .18s,transform .25s var(--spring)}
.soc svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.soc:hover{background:var(--coral);color:#fff;transform:translateY(-4px) rotate(-5deg)}
.socials.light .soc{background:#fff;color:var(--ink2);border-color:rgba(0,0,0,.06);box-shadow:var(--s1)}
.socials.light .soc:hover{background:var(--coral);color:#fff}

/* About */
.avatar{width:clamp(160px,22vw,240px);aspect-ratio:1;border-radius:50%;background:var(--g-coral);display:grid;place-items:center;font-size:clamp(4.5rem,9vw,7rem);box-shadow:var(--sc),0 0 0 10px rgba(255,77,61,.12);margin:0 auto;animation:bobSm 6s ease-in-out infinite}
.quote{font-family:var(--fh);font-weight:800;font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.4;color:var(--ink);border-left:6px solid var(--coral);padding-left:22px}
.timeline{display:grid;gap:14px}
.tl{display:flex;gap:16px;background:#fff;border-radius:var(--r3);padding:20px;box-shadow:var(--s1)}
.tl .e{font-size:1.8rem}.tl b{font-family:var(--fh)}.tl p{font-size:.92rem;margin-top:4px}

/* Footer */
.footer{background:var(--navy);padding-top:clamp(52px,7vw,88px);color:#fff}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);margin-bottom:clamp(36px,5vw,60px)}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer .logo-name{color:#fff}
.f-desc{font-size:.86rem;line-height:1.85;color:rgba(255,255,255,.55);max-width:300px;margin:14px 0 18px}
.footer h5{font-family:var(--fh);font-size:.9rem;margin-bottom:16px;color:#fff}
.f-links{display:flex;flex-direction:column;gap:10px}
.f-link{font-size:.86rem;color:rgba(255,255,255,.55);transition:color .15s,padding-left .18s var(--spring)}
.f-link:hover{color:#fff;padding-left:6px}
.footer-btm{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.8rem;color:rgba(255,255,255,.4)}
.footer-btm p{color:inherit;font-size:inherit}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,120px);background:var(--navy);color:#fff;padding:14px 24px;border-radius:var(--rp);font-family:var(--fh);font-weight:800;z-index:1300;transition:transform .4s var(--spring);box-shadow:var(--s4);max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.stag>*{opacity:1!important;transform:none!important}
}