/* Gramito product landing. Visual language = the app ("Lavender mist": docs/DESIGN_TOKENS.md): aurora backdrop, glass cards, violet-blue ring gradient,
   protein/carbs/fat colours, system font. Motion = transform/opacity (+ one small SVG stroke). No external assets. */
:root{color-scheme:light dark;--bg:#ece8e3;--fg:#1f1c3b;--fg2:rgba(31,28,59,.74);--fg3:rgba(31,28,59,.7);--accent:#4a3ea0;--accent-sub:#e7e3f6;--ring1:#7464e2;--ring2:#3f6fdb;--protein:#2f8f80;--carbs:#a6761b;--fat:#c4527f;--ai:#7a3e9e;--ai-sub:#f0e4f6;--ok:#26704f;
--g1:rgba(255,255,255,.66);--g2:rgba(255,255,255,.42);--rim:rgba(255,255,255,.85);--shadow:0 18px 44px -18px rgba(58,47,122,.30);--track:rgba(31,28,59,.09);--line:rgba(31,28,59,.12);--glow:rgba(122,108,222,.30);
--a1:rgba(189,180,226,.55);--a2:rgba(174,187,230,.5);--a3:rgba(231,215,195,.55);--a4:rgba(216,196,222,.4);--gs1:#fff;--gs2:#f8f6fc;--btn1:#5746cf;--btn2:#3f5fd0;--hdr:rgba(246,243,240,.72);
--sys:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root{--bg:#15122b;--fg:#f3f1fa;--fg2:rgba(243,241,250,.76);--fg3:rgba(243,241,250,.68);--accent:#c3bbff;--accent-sub:#2c2759;--ring1:#a194ff;--ring2:#6fa0ff;--protein:#4cc4ae;--carbs:#e2a940;--fat:#f38db4;--ai:#d9a6f5;--ai-sub:#382350;--ok:#6bd3a0;
--g1:rgba(255,255,255,.12);--g2:rgba(255,255,255,.06);--rim:rgba(255,255,255,.16);--shadow:0 20px 48px -18px rgba(7,5,26,.7);--track:rgba(255,255,255,.1);--line:rgba(255,255,255,.12);--glow:rgba(142,128,245,.34);
--gs1:#302b5c;--gs2:#26224a;--a1:rgba(106,92,214,.30);--a2:rgba(79,107,216,.26);--a3:rgba(138,95,134,.2);--a4:rgba(123,79,168,.22);--hdr:rgba(21,18,43,.7)}}
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.55 var(--sys);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:10px}
.skip{position:absolute;left:1rem;top:-4rem;z-index:60;background:var(--accent);color:var(--bg);padding:.6rem 1rem;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:.75rem}
.ico{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:min(100% - 2rem,72rem);margin-inline:auto}
main>.wrap{width:min(100% - 2rem,72rem)}

/* aurora backdrop (fixed, compositor-only drift) */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;will-change:transform}
.aurora i:nth-child(1){left:-18vmax;top:-16vmax;width:62vmax;height:62vmax;background:radial-gradient(closest-side,var(--a1),transparent);animation:d1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){right:-22vmax;top:-6vmax;width:58vmax;height:58vmax;background:radial-gradient(closest-side,var(--a2),transparent);animation:d2 30s ease-in-out infinite alternate}
.aurora i:nth-child(3){left:-20vmax;top:46vh;width:56vmax;height:56vmax;background:radial-gradient(closest-side,var(--a3),transparent);animation:d2 34s ease-in-out infinite alternate-reverse}
.aurora i:nth-child(4){right:-18vmax;top:60vh;width:52vmax;height:52vmax;background:radial-gradient(closest-side,var(--a4),transparent);animation:d1 28s ease-in-out infinite alternate-reverse}
@keyframes d1{to{transform:translate3d(9vmax,6vmax,0) scale(1.12)}}
@keyframes d2{to{transform:translate3d(-8vmax,7vmax,0) scale(.92)}}

/* glass (app: glass/fill gradient + rim + tinted shadow) */
.glass{position:relative;background:linear-gradient(135deg,var(--g1),var(--g2));border:1px solid var(--rim);border-radius:28px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--hdr)}}

/* header */
.top{position:sticky;top:.75rem;z-index:40;margin-top:.75rem}
.top .bar{display:flex;align-items:center;gap:.5rem 1.25rem;padding:.45rem .6rem .45rem .9rem;border-radius:999px;background:var(--hdr);border:1px solid var(--rim);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--fg);text-decoration:none}
.brand img{width:2rem;height:2rem}
.brand svg{height:1.15rem;width:auto;fill:currentColor;flex:none}
.brand img{flex:none}
.sec{display:none;margin-left:auto;gap:.25rem}
.sec a,.lang a,.lang span{display:inline-flex;align-items:center;min-height:44px;padding:0 .75rem;border-radius:999px;text-decoration:none;color:var(--fg2);font-size:.95rem;font-weight:500}
.sec a:hover,.lang a:hover{color:var(--fg);background:var(--track)}
.lang{display:flex;margin-left:auto;font-size:.85rem}
.lang span{color:var(--fg);font-weight:700;background:var(--track)}
.lang a,.lang span{padding:0 .65rem;font-size:.85rem}
.btn.nav-cta{display:none}
@media (min-width:56rem){.sec{display:flex}.lang{margin-left:0}.btn.nav-cta{display:inline-flex}}

/* buttons (pill, add-orb gradient) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:0 1.6rem;border-radius:999px;border:0;font:600 1.0625rem/1 var(--sys);color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--btn1),var(--btn2));box-shadow:0 10px 26px -10px rgba(63,95,208,.75),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .25s,box-shadow .25s}
.btn{position:relative}
/* hover lifts the button 2px: this invisible strip keeps the pointer inside the hit area, so hover never flips on/off at the bottom edge */
.btn::after{content:"";position:absolute;left:0;right:0;top:0;bottom:-6px}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(63,95,208,.85),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.sm{min-height:44px;font-size:.95rem;padding:0 1.15rem}
.btn.ghost{background:var(--g1);color:var(--fg);border:1px solid var(--rim);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.btn .ico{width:1.25rem;height:1.25rem}

/* hero */
.hero{display:grid;gap:2rem;padding:3.5rem 0 1rem;align-items:center}
@media (min-width:60rem){.hero{grid-template-columns:1.02fr .98fr;gap:2rem;padding:4.5rem 0 2rem;min-height:calc(100svh - 4.5rem)}}
.chip{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem 1rem;border-radius:999px;background:var(--g1);border:1px solid var(--rim);font-size:.9rem;font-weight:600;color:var(--fg2)}
.chip::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--ring1);box-shadow:0 0 0 0 var(--glow);animation:ping 2.6s ease-out infinite}
@keyframes ping{70%,100%{box-shadow:0 0 0 .6rem transparent}}
h1,h2,h3{margin:0;letter-spacing:-.03em;line-height:1.08;font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.45rem,5.4vw,4.1rem);margin:1.1rem 0 1.1rem}
h2{font-size:clamp(1.9rem,4.6vw,3rem)}
h3{font-size:1.25rem;letter-spacing:-.015em;line-height:1.2}
.grad{background:linear-gradient(100deg,var(--ring1),var(--ring2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:clamp(1.1rem,2.2vw,1.3rem);line-height:1.5;color:var(--fg2);max-width:34rem;margin:0}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.75rem 0 1rem}
.fine{font-size:.9rem;color:var(--fg3);margin:0;max-width:32rem}

/* stage: phone + floating live cards */
.stage{position:relative;display:grid;place-items:center;--pw:clamp(14rem,60vw,18.5rem);padding:1.5rem 0 3rem}
@media (min-width:60rem){.stage{--pw:min(19rem,max(13rem,calc((100svh - 12rem)*.4599)),26vw);padding:1.5rem 0}}
.stage-glow{position:absolute;left:50%;top:50%;width:min(100%,calc(var(--pw)*2.2));aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:.9;pointer-events:none}
.phone{position:relative;width:var(--pw);padding:calc(var(--pw)*.026);border-radius:calc(var(--pw)*.15);background:linear-gradient(150deg,#4a4a5c,#12121c 38%,#2c2c3a 100%);box-shadow:0 50px 90px -34px rgba(40,30,110,.6),0 18px 40px -20px rgba(0,0,0,.5),inset 0 0 0 1.5px rgba(255,255,255,.16);pointer-events:none;will-change:transform}
.phone .scr{position:relative;border-radius:calc(var(--pw)*.124);overflow:hidden;background:#111;aspect-ratio:1206/2622}
.phone .scr img,.phone .scr picture{width:100%;height:100%;display:block}
.phone .scr img{object-fit:cover}
.island{position:absolute;left:50%;top:1.6%;width:27%;height:3.1%;margin-left:-13.5%;border-radius:999px;background:#05050a;z-index:2}
.fl{position:absolute;z-index:3;pointer-events:none;will-change:transform}
/* the cards sit on a moving layer: no backdrop-filter here (blur + transformed parent flickers), a near-opaque glass fill instead */
.fl>.glass{background:linear-gradient(135deg,var(--gs1),var(--gs2));-webkit-backdrop-filter:none;backdrop-filter:none}
.fl>.glass{animation:bob 7s ease-in-out infinite alternate;animation-delay:var(--dl,0s);padding:.9em 1em;border-radius:1.9em;font-size:clamp(.62rem,2.3vw,.8rem)}
@media (min-width:60rem){.fl>.glass{font-size:.84rem}}
@keyframes bob{to{transform:translate3d(0,-.7em,0)}}
.fl-ring{left:0;bottom:8%}
.fl-chat{right:0;top:12%;--dl:-2s}
.fl-macro{left:0;top:8%;--dl:-4s}
.fl-scan{right:0;bottom:4%;--dl:-1s}
@media (max-width:47.99rem){.fl-macro{display:none}.fl-ring{left:-2%;bottom:2%}.fl-scan{right:-2%;bottom:-1%}.fl-chat{right:-2%;top:6%}}
.lbl{font-size:.82em;font-weight:600;color:var(--fg3);letter-spacing:.01em}
/* ring card */
.rc{display:flex;align-items:center;gap:.9em;width:16em}
.rc svg{width:6em;height:6em;flex:none;transform:rotate(-90deg)}
.rc .t{fill:none;stroke:var(--track);stroke-width:9}
.rc .a{fill:none;stroke:url(#rg);stroke-width:9;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;filter:drop-shadow(0 0 5px var(--glow))}
.in .rc .a,.rc.in .a{stroke-dashoffset:103;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .2s}
.no-js .rc .a,html:not(.js) .rc .a{stroke-dashoffset:103}
.rc b{display:block;font-size:2em;line-height:1;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rc small{display:block;color:var(--fg3);font-size:.9em;margin-top:.3em}
/* macro card */
.mc{width:15em}
.mc .r{display:grid;grid-template-columns:5.2em 1fr;gap:.2em .6em;align-items:center;margin-top:.6em}
.mc .r span{font-size:.86em;color:var(--fg2);font-weight:500}
.mc .bar{grid-column:1/-1;height:.55em;border-radius:99px;background:var(--track);overflow:hidden}
.mc .bar i{display:block;height:100%;border-radius:99px;background:var(--c);transform-origin:left;transform:scaleX(0)}
.mc .p{--c:var(--protein);--v:.59;--n:0}.mc .c{--c:var(--carbs);--v:.64;--n:1}.mc .f{--c:var(--fat);--v:.6;--n:2}
.mc .r em{font-style:normal;font-size:.86em;text-align:right;font-variant-numeric:tabular-nums;color:var(--fg)}
.mc .r{grid-template-columns:1fr auto}
.in .mc .bar i,.mc.in .bar i{transform:scaleX(var(--v));transition:transform 1.3s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--n,0)*.15s)}
html:not(.js) .mc .bar i{transform:scaleX(var(--v))}
/* chat card */
.cc{width:16.5em;display:grid;gap:.55em}
.bub{padding:.6em .9em;border-radius:1.3em;font-size:.95em;line-height:1.35}
.bub.u{justify-self:end;background:linear-gradient(135deg,var(--btn1),var(--btn2));color:#fff;border-bottom-right-radius:.4em;min-height:2.3em}
.bub.u{display:grid}.bub.u>*{grid-area:1/1}.bub.u .full{visibility:hidden}
.bub.u .caret{display:inline-block;width:.1em;height:1em;margin-left:.1em;background:currentColor;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
.bub.a{background:var(--g1);border:1px solid var(--rim);border-bottom-left-radius:.4em;color:var(--fg)}
.bub.a{position:relative}
.js .bub.a .ans{opacity:0;transform:translate3d(0,.5em,0) scale(.97);transform-origin:left top;transition:opacity .45s,transform .45s}
.js .cc.res .bub.a .ans{opacity:1;transform:none}
.dots{position:absolute;left:1em;top:1.1em;display:flex;gap:.3em}
.dots i{width:.5em;height:.5em;border-radius:50%;background:var(--fg3);animation:dot 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{40%{transform:translate3d(0,-.3em,0)}}
html:not(.js) .dots,.js .cc.res .dots{display:none}
.js .bub.u .caret{opacity:1}
html:not(.js) .bub.u .caret{display:none}
.aitag{display:inline-flex;align-items:center;gap:.3em;padding:.1em .6em;border-radius:99px;background:var(--ai-sub);color:var(--ai);font-size:.78em;font-weight:700}
.aitag .ico{width:1em;height:1em;stroke-width:2}
.bub.a strong{display:block;font-size:1.25em;letter-spacing:-.02em;margin:.25em 0 .35em;font-variant-numeric:tabular-nums}
.mac{display:flex;gap:.8em;font-size:.82em;color:var(--fg2);font-variant-numeric:tabular-nums}
.mac b{font-weight:700;color:var(--fg)}
.mac i{display:inline-block;width:.55em;height:.55em;border-radius:50%;margin-right:.3em}
.mac .p{background:var(--protein)}.mac .c{background:var(--carbs)}.mac .f{background:var(--fat)}
@keyframes blink{50%{opacity:0}}
/* scan card */
.sc{width:12.5em;padding:.6em!important}
.sc .ph{position:relative;aspect-ratio:10/7;border-radius:1.3em;overflow:hidden}
.sc img{width:100%;height:100%;object-fit:cover}
.sc .br{position:absolute;inset:.7em;border-radius:.9em;pointer-events:none;background:
 linear-gradient(#fff,#fff) 0 0/1.2em .16em,linear-gradient(#fff,#fff) 0 0/.16em 1.2em,linear-gradient(#fff,#fff) 100% 0/1.2em .16em,linear-gradient(#fff,#fff) 100% 0/.16em 1.2em,
 linear-gradient(#fff,#fff) 0 100%/1.2em .16em,linear-gradient(#fff,#fff) 0 100%/.16em 1.2em,linear-gradient(#fff,#fff) 100% 100%/1.2em .16em,linear-gradient(#fff,#fff) 100% 100%/.16em 1.2em;background-repeat:no-repeat;opacity:.9}
.sc .bar{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0,transparent 78%,rgba(201,189,255,.55) 97%,#fff 100%);transform:translate3d(0,-100%,0);animation:scan 3.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes scan{0%{transform:translate3d(0,-100%,0)}55%,100%{transform:translate3d(0,0,0)}}
.sc .res{display:flex;align-items:center;justify-content:space-between;gap:.5em;margin:.6em .3em .1em;font-size:.88em;font-weight:600}
.sc .res span{color:var(--fg)}
.sc .res em{font-style:normal;color:var(--fg2);font-variant-numeric:tabular-nums}

/* sections */
section{padding:4.5rem 0}
.head{max-width:44rem;margin:0 0 2.5rem}
.head.c{margin-inline:auto;text-align:center}
.head p{color:var(--fg2);font-size:1.15rem;margin:1rem 0 0}
.eyebrow{display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);padding:1.4rem .5rem;margin-top:1rem}
.stats div{text-align:center;padding:0 .4rem}
.stats div+div{border-left:1px solid var(--line)}
.stats b{display:block;font-size:clamp(2rem,6vw,3.4rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stats span{display:block;color:var(--fg2);font-size:clamp(.78rem,2.4vw,1rem);margin-top:.4rem}
.duo{display:grid;gap:1.25rem}
@media (min-width:56rem){.duo{grid-template-columns:1fr 1fr}}
.duo .glass{padding:1.75rem}
.duo ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.7rem}
.duo li{display:flex;gap:.7rem;align-items:flex-start;color:var(--fg2)}
.duo li .ico{flex:none;margin-top:.1rem}
.duo .no .ico{color:var(--fat)}
.duo .yes .ico{color:var(--protein)}
.duo .yes{background:linear-gradient(135deg,var(--accent-sub),var(--g2))}

/* story */
.story{display:grid;gap:2rem}
.story-phone{display:none}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
.step{padding:1.5rem 1.5rem 1.6rem}
.step .n{display:block;font:700 .95rem var(--mono);color:var(--accent);margin-bottom:.6rem}
.step p{color:var(--fg2);margin:.6rem 0 0}
.step .m{display:grid;place-items:center;margin-top:1.25rem;--pw:12.5rem}
@media (min-width:60rem){
.story{--H:calc(100svh - 8rem);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:stretch}
.story-phone{display:block;order:2}
.story-phone .sticky{position:sticky;top:6.5rem;height:var(--H);display:grid;place-items:center;--pw:min(19rem,calc((100svh - 10rem)*.4599))}
.story-phone .phone{transform:none}
.story-phone .scr picture{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.story-phone .scr picture:first-child{opacity:1;transform:none}
.story[data-step="2"] .scr picture:nth-child(1),.story[data-step="3"] .scr picture:nth-child(1){opacity:0;transform:scale(.97)}
.story[data-step="2"] .scr picture:nth-child(2),.story[data-step="3"] .scr picture:nth-child(3){opacity:1;transform:none}
/* Alignment contract: every step is as tall as the sticky phone box (--H) and its text block is centred in it, so the block's centre is the phone's
   centre when the story starts (step 1), when it ends (step 3) and whenever a step is the one crossing the phone's centre line. */
.steps{order:1;padding:0;gap:0}
.step{min-height:var(--H);display:flex;flex-direction:column;justify-content:center;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
.js .step.rv.in{opacity:.4;transition:opacity .5s;transition-delay:0s}
.js .step.rv.in.on{opacity:1}
.step .m{display:none}
html:not(.js) .story{grid-template-columns:1fr}
html:not(.js) .story-phone{display:none}
html:not(.js) .steps{gap:2rem}
html:not(.js) .step{min-height:0}
html:not(.js) .step .m{display:grid}
.step h3{font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:-.03em}
.step p{font-size:1.2rem}
}
.step .num{font-size:1.1rem}

/* features */
.grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:40rem){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:60rem){.grid{grid-template-columns:repeat(3,1fr)}}
.feat{padding:1.6rem;transition:transform .3s,border-color .3s;overflow:hidden}
.feat::before{content:"";position:absolute;inset:0;background:radial-gradient(18rem circle at var(--mx,70%) var(--my,0%),var(--glow),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
@media (hover:hover){.feat:hover::before{opacity:1}}
.tile{display:grid;place-items:center;width:3rem;height:3rem;border-radius:1rem;background:linear-gradient(135deg,var(--ring1),var(--ring2));color:#fff;margin-bottom:1.1rem;box-shadow:0 10px 20px -10px var(--ring2)}
.feat p{color:var(--fg2);margin:.55rem 0 0}

/* honesty + privacy */
.honest{display:grid;gap:1.5rem;padding:2rem}
@media (min-width:56rem){.honest{grid-template-columns:1.1fr .9fr;padding:2.75rem;gap:3rem;align-items:center}}
.honest p{color:var(--fg2);margin:1rem 0 0}
.honest .formula{padding:1.4rem;border-radius:22px;background:var(--accent-sub)}
.formula b{display:block;font:700 1.05rem var(--mono);margin-bottom:.5rem;color:var(--accent)}
.formula p{margin:0;font-size:1rem}
.priv{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.priv .glass{padding:1.5rem}
.priv .tile{background:var(--accent-sub);color:var(--accent);box-shadow:none}
.priv p{color:var(--fg2);margin:.5rem 0 0}
.pledge{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 0;padding:0;list-style:none}
.pledge li{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem 1rem;border-radius:99px;background:var(--g1);border:1px solid var(--rim);font-weight:600;font-size:.95rem}
.pledge .ico{width:1.1rem;height:1.1rem;color:var(--ok)}

/* faq */
.faq{display:grid;gap:.75rem;max-width:50rem;margin-inline:auto}
details{padding:0;border-radius:22px}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.4rem;font-weight:600;font-size:1.08rem;min-height:56px;border-radius:22px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:.6rem;height:.6rem;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .3s;margin-right:.2rem}
details[open] summary::after{transform:rotate(-135deg)}
details p{margin:0;padding:0 1.4rem 1.3rem;color:var(--fg2)}

/* final CTA */
.final{padding:3rem 1.5rem;text-align:center;overflow:hidden;background:linear-gradient(135deg,rgba(116,100,226,.28),rgba(63,111,219,.22)),linear-gradient(135deg,var(--g1),var(--g2))}
.final p{max-width:34rem;margin:1rem auto 0;color:var(--fg2);font-size:1.15rem}
.final .cta{justify-content:center}
.final .mail{font-weight:500;color:var(--fg2);font-size:1rem}

/* footer: structured columns, every fact on its own line, nothing wraps mid-phrase */
.foot{padding:3rem 0 2rem;margin-top:1rem;border-top:1px solid var(--line);color:var(--fg3);font-size:.95rem}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}
.fbrand,.fco{grid-column:1/-1}
@media (min-width:44rem){.fgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.fbrand,.fco{grid-column:auto}}
@media (min-width:44rem) and (max-width:63.99rem){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fbrand,.fco{grid-column:auto}}
@media (min-width:64rem){.fgrid{grid-template-columns:1.3fr .8fr 1fr 1.3fr}}
.fbrand p{margin:.9rem 0 0;max-width:20rem;color:var(--fg2)}
.fh{margin:0 0 .6rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{display:inline-flex;align-items:center;min-height:32px;color:var(--fg2);text-decoration:none}
.foot a:hover{color:var(--fg);text-decoration:underline}
.foot a{color:var(--fg2)}
.foot address{font-style:normal;display:grid;gap:.55rem;color:var(--fg2)}
.foot address strong{color:var(--fg);font-size:1rem}
.foot .ln{display:block;line-height:1.4}
.foot .k{display:block;font-size:.75rem;color:var(--fg3);letter-spacing:.02em}
.fbottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;margin-top:2.25rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.fbottom p{margin:0;font-size:.9rem;display:flex;flex-wrap:wrap;gap:.2rem 1.25rem}
.flang{margin:0}

/* reveal on scroll (content is visible without JS) */
.js .rv{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.js .rv.in{opacity:1;transform:none}
@keyframes rvfail{to{opacity:1;transform:none}}
/* if gramito.js never ran (blocked, failed), everything shows after 2.5 s */
.js:not(.ok) .rv,.js:not(.ok) .bub.a .ans,.js:not(.ok) .step{animation:rvfail .01s 2.5s forwards}
.d1{--i:1}.d2{--i:2}.d3{--i:3}.d4{--i:4}.d5{--i:5}.d6{--i:6}

@media (max-width:40rem){section{padding:3.25rem 0}.btn:not(.sm){width:100%}.cta{flex-direction:column}.top .bar{padding-left:.75rem}.stats{padding:1.1rem 0}}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.js .rv{opacity:1;transform:none}
.js .bub.a .ans{opacity:1;transform:none}
.rc .a{stroke-dashoffset:103}
.mc .bar i{transform:scaleX(var(--v))}
.phone,.fl{transform:none!important}
.sc .bar{display:none}
.step{opacity:1}
}