/* Salion Design — cinematic puzzle site */
:root{
  --bg:#060403; --ink:#F7EEDD; --mute:#BBAA8F; --dim:#857660;
  --gold:#E8A853; --gold-2:#FFD08A; --gold-3:#C77E2E; --gold-deep:#7A4513;
  --glass:rgba(22,15,10,.62); --glass-2:rgba(32,22,13,.74);
  --line:rgba(255,190,110,.16); --line-2:rgba(255,190,110,.34);
  --serif:'Cinzel','Trajan Pro',Georgia,serif; --sans:'Manrope',system-ui,sans-serif;
  --r:18px; --ease:cubic-bezier(.2,1,.3,1); --pop:cubic-bezier(.2,1.35,.35,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;background:var(--bg)}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;background:var(--bg);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
::selection{background:#e8a853;color:#1a0f05}
html{scrollbar-color:#6b4a22 #0b0805;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0805}
::-webkit-scrollbar-thumb{background:#5c3f1d;border-radius:10px;border:2px solid #0b0805}
input,textarea,select{caret-color:var(--gold-2);accent-color:var(--gold)}
a{text-underline-offset:3px}
:root{font-variant-numeric:tabular-nums lining-nums}
a{color:var(--gold-2)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0;letter-spacing:.005em;text-wrap:balance}
em{font-style:normal}
h1 em,h2 em{font-style:normal;font-weight:700;color:var(--gold-2)}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.ic{width:1em;height:1em;flex:none}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.muted{color:var(--dim)}
.only-touch{display:none}
@media (hover:none),(pointer:coarse){.only-hover{display:none}.only-touch{display:inline}}

/* ---------- layers ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;touch-action:pan-y}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,transparent 40%,rgba(4,3,2,.55) 100%),linear-gradient(180deg,rgba(6,4,3,.0) 70%,rgba(6,4,3,.5))}
body.no-gl{background:radial-gradient(1000px 600px at 50% 0%,rgba(200,120,40,.25),transparent 60%),var(--bg)}
main,.foot{position:relative;z-index:2}
main{pointer-events:none;overflow-x:clip}
main > section:not(.hero){pointer-events:auto}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .9s ease,visibility .9s}
.loader img{animation:breathe 2.2s ease-in-out infinite}
.loader-bar{width:180px;height:2px;background:rgba(255,190,110,.15);overflow:hidden;border-radius:2px}
.loader-bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,transparent,var(--gold-2),transparent);animation:sweep 1.2s ease-in-out infinite}
.loader p{margin:0;font-size:14px;color:var(--mute)}
.loader.gone{opacity:0;visibility:hidden}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@keyframes breathe{50%{transform:scale(1.04)}}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;text-decoration:none;
  font:700 16.5px/1 var(--sans);letter-spacing:.01em;border:0;border-radius:999px;padding:18px 32px;min-height:54px;
  transition:box-shadow .3s,background .3s,color .3s;will-change:transform;
}
.btn .arr{width:22px;height:12px;position:relative;display:inline-block;transition:transform .35s var(--pop)}
.btn .arr::before{content:'';position:absolute;left:0;right:2px;top:50%;height:1.6px;background:currentColor;transform:translateY(-50%)}
.btn .arr::after{content:'';position:absolute;right:1px;top:50%;width:8px;height:8px;border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.btn:hover .arr{transform:translateX(5px)}
.btn-gold{color:#241302;background:linear-gradient(180deg,#f6cf86,#e3a14d);box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,244,220,.65),inset 0 -2px 0 rgba(120,62,12,.35)}
.btn-gold:hover{background:linear-gradient(180deg,#fbdca0,#eaae5c);box-shadow:0 12px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,244,220,.75),inset 0 -2px 0 rgba(120,62,12,.35)}
.btn:active{transform:translateY(1px)}
.btn-line{color:var(--gold-2);background:rgba(20,13,7,.35);box-shadow:inset 0 0 0 1.5px rgba(240,170,90,.65);backdrop-filter:blur(8px)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--gold-2);background:rgba(232,168,83,.08);color:#fff}
.btn-sm{padding:12px 20px;min-height:44px;font-size:15px}
.btn-block{width:100%}
.link{background:none;border:0;padding:0;font:inherit;color:var(--gold-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;padding:14px clamp(18px,4vw,64px);transition:background-color .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(8,6,4,.86);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;margin-right:auto}
.brand img{width:44px;height:auto}
.brand span{font-family:var(--serif);font-size:22px;letter-spacing:.06em;line-height:1;display:flex;flex-wrap:wrap;column-gap:.3em}
.brand b{font-weight:500;color:var(--gold)}
.brand small{flex-basis:100%;font:500 11.5px var(--sans);letter-spacing:.02em;color:var(--mute);margin-top:5px}
.links{display:flex;gap:34px}
.links a{color:var(--ink);opacity:.82;text-decoration:none;font-weight:600;font-size:15px;padding:8px 0;position:relative;transition:opacity .2s,color .2s}
.links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .35s var(--ease);border-radius:2px}
.links a:hover,.links a.on{opacity:1;color:var(--gold-2)}
.links a:hover::after,.links a.on::after{transform:scaleX(1)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px 20px 90px;pointer-events:none}
.hero a,.hero button{pointer-events:auto}
.hero-in{max-width:640px}
.hero h1{font-size:clamp(38px,5.4vw,80px);font-weight:600;text-shadow:0 6px 40px rgba(0,0,0,.6)}
.hero h1 span{display:block}
.hero h1 em{display:block;padding-bottom:.1em;line-height:1.12}
.hero h1 .w{display:inline-block}
.lede{font-size:clamp(18px,1.6vw,21px);color:var(--ink);opacity:.88;margin:24px auto 34px}
.hero-cta{display:flex;justify-content:center}
.hint{margin:26px 0 0;font-size:14px;color:var(--mute);letter-spacing:.02em}

/* ---------- sections ---------- */
.sec{position:relative;padding:130px 0 60px}
.head{max-width:760px;margin:0 0 52px}
.head h2,.show-head h2{font-size:clamp(28px,3.6vw,46px)}
.head p{color:var(--mute);font-size:18px;margin:16px 0 0;max-width:58ch}

/* glass card base */
.glass{background:linear-gradient(180deg,rgba(40,27,16,.66),rgba(14,10,7,.78));border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,220,160,.08)}

/* ---------- step 1: base cards ---------- */
.base-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;perspective:1400px}
.bcard{position:relative;display:flex;flex-direction:column;overflow:hidden;transition:border-color .35s,box-shadow .35s,transform .45s var(--ease);transform-style:preserve-3d}
.bcard:hover{border-color:var(--line-2);box-shadow:0 30px 60px rgba(0,0,0,.55)}
.bcard.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold),0 30px 60px rgba(0,0,0,.55);background:linear-gradient(180deg,rgba(74,48,20,.7),rgba(20,14,9,.8))}
.bcard .art{height:170px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(120% 90% at 70% 0%,rgba(240,160,70,.35),transparent 60%),#120c07}
.bcard .mkwrap{position:absolute;left:74px;top:18px;width:440px;transform:scale(.5) rotate(-4deg);transform-origin:top left;transition:transform .7s var(--ease);pointer-events:none}
.bcard:hover .mkwrap{transform:scale(.53) rotate(-2deg) translateY(-10px)}
.bcard .mk-sample{display:none}
.bcard .badge-ic{position:absolute;left:16px;top:16px;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:24px;color:var(--gold-2);background:rgba(10,7,4,.7);border:1px solid var(--line-2)}
.bcard .body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.bcard .who{font-size:14px;font-weight:600;color:var(--gold)}
.bcard h3{font-size:24px;margin:8px 0 6px}
.bcard .tag{color:var(--mute);font-size:15px;margin:0 0 14px}
.checks{list-style:none;margin:0 0 18px;padding:0;font-size:14.5px}
.checks li{display:flex;gap:9px;align-items:flex-start;margin:6px 0;line-height:1.35}
.checks .ic{color:var(--gold);font-size:15px;margin-top:2px}
.bcard .acts{margin-top:auto;display:flex;gap:10px}
.bcard .acts .btn{flex:1;padding:12px 10px;min-height:44px;font-size:14px}
.sel-dot{width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;display:inline-grid;place-items:center}
.on .sel-dot{background:var(--gold-2);border-color:var(--gold-2)}
.on .sel-dot::after{content:'';width:8px;height:5px;border-left:2px solid #2a1604;border-bottom:2px solid #2a1604;transform:rotate(-45deg) translate(1px,-1px)}
.pkg3{margin-top:26px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:22px 26px;border-radius:var(--r);position:relative;
  background:linear-gradient(90deg,rgba(60,36,14,.85),rgba(24,15,8,.85));border:1px solid var(--gold-3);box-shadow:inset 0 1px 0 rgba(255,220,160,.12)}
.pkg3 .t{display:flex;align-items:center;gap:16px}
.pkg3 .t .ic{font-size:40px;color:var(--gold-2)}
.pkg3 small{display:block;font-size:14px;font-weight:600;color:var(--gold)}
.pkg3 h3{font-size:24px}
.pkg3 p{margin:0;color:var(--ink);opacity:.86;font-size:15px}
.pkg3.on{box-shadow:inset 0 0 0 2px var(--gold-2)}

/* ---------- step 2: jigsaw tiles ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 48px}
.fchip{font:700 14.5px var(--sans);cursor:pointer;color:var(--ink);background:rgba(30,20,12,.55);border:1px solid var(--line);border-radius:999px;padding:10px 22px;min-height:42px;display:inline-flex;align-items:center;gap:9px;transition:all .3s var(--ease);backdrop-filter:blur(8px)}
.fchip i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.fchip:hover{border-color:var(--line-2);transform:translateY(-2px)}
.fchip[aria-pressed="true"]{color:#241302;background:var(--gold);border-color:var(--gold)}
.tile-grid{--s:148px;--t:calc(var(--s)*.21);display:grid;grid-template-columns:repeat(auto-fill,var(--s));justify-content:center;gap:0;perspective:1200px}
.tile{position:relative;width:calc(var(--s) + var(--t)*2);height:calc(var(--s) + var(--t)*2);margin:calc(var(--t)*-1);cursor:pointer;transform-style:preserve-3d;
  transition:transform .5s var(--pop),filter .4s;filter:drop-shadow(0 14px 18px rgba(0,0,0,.55));-webkit-tap-highlight-color:transparent}
.tile[hidden]{display:none}
.tile .tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .35s var(--ease)}
.tile svg.shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tile .fill{fill:url(#tFill);stroke:url(#tEdge);stroke-width:1.6px;vector-effect:non-scaling-stroke;transition:fill .3s}
.tile .glow{fill:none;stroke:transparent;stroke-width:4px;vector-effect:non-scaling-stroke;transition:stroke .3s}
.tile:hover{z-index:3;filter:drop-shadow(0 22px 24px rgba(0,0,0,.6))}
.tile.on .glow{stroke:var(--gold-2)}
.tile.on .fill{fill:url(#tFillOn)}
.tile.on{z-index:2}
.tile .tc{position:absolute;inset:calc(var(--t) + var(--s)*.2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;pointer-events:none}
.tile .tc .ic{font-size:calc(var(--s)*.22);color:var(--gold-2);stroke-width:1.5}
.tile .tc b{font-size:calc(var(--s)*.098);font-weight:700;line-height:1.22;color:var(--ink)}
.tile .tc small{font-size:calc(var(--s)*.075);font-weight:600;color:var(--mute)}
.tile .add{position:absolute;right:calc(var(--t) + 8px);top:calc(var(--t) + 8px);width:28px;height:28px;border-radius:8px;border:1.5px solid rgba(255,200,130,.55);background:rgba(10,7,4,.55);color:var(--gold-2);display:grid;place-items:center;cursor:pointer;padding:0;transition:all .3s var(--pop);transform:translateZ(24px)}
.tile .add .ic{font-size:16px;stroke-width:2.2}
.tile .add .tick{display:none}
.tile.on .add{background:var(--gold-2);color:#2a1604;border-color:var(--gold-2)}
.tile.on .add .tick{display:block}.tile.on .add .plus{display:none}
.tile .add:hover{transform:translateZ(24px) scale(1.15)}
.tile.snapflash .glow{animation:snapg .8s ease-out}
@keyframes snapg{0%{stroke:#ffe2a6;stroke-width:4px}100%{stroke:transparent;stroke-width:4px}}
.trust{margin:64px 0 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding:26px 0 0}
.trust div{display:flex;gap:14px;align-items:flex-start;padding:0 28px 0 0}
.trust div+div{padding-left:28px;border-left:1px solid var(--line)}
.trust .ic{font-size:26px;color:var(--gold-2);margin-top:2px}
.trust b{display:block;font-size:16px}
.trust span{font-size:14px;color:var(--mute)}
.custom-note{color:var(--mute);margin:22px 0 0;font-size:15.5px}

/* ---------- showcase ---------- */
.showcase{position:relative;padding:120px 0 60px;overflow:hidden}
.show-head{margin-bottom:40px}
.track{display:flex;gap:34px;padding:0 max(28px,calc((100vw - 1140px)/2));width:max-content}
.panel{width:min(1140px,calc(100vw - 56px));display:grid;grid-template-columns:1fr 1.05fr;gap:30px;align-items:center;padding:42px 44px;min-height:560px;position:relative;overflow:hidden}
.panel::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 70% at 85% 30%,rgba(240,150,60,.18),transparent 70%);pointer-events:none}
.panel .kick{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.panel .kick .pc{width:58px;height:58px;display:grid;place-items:center;font-size:28px;color:var(--gold-2);position:relative}
.panel .kick .pc svg.shape{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);overflow:visible}
.panel .kick .pc .fill{fill:#120c07;stroke:url(#tEdge);stroke-width:1.4px;vector-effect:non-scaling-stroke}
.panel .kick .pc .ic{position:relative}
.panel h3{font-size:clamp(32px,3.4vw,46px)}
.panel .tg{color:var(--ink);opacity:.9;font-size:18px;margin:14px 0 6px}
.panel .ds{color:var(--mute);font-size:15.5px;margin:0 0 20px}
.feats{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:12px}
.feats li{display:flex;gap:14px;align-items:flex-start}
.feats .fi{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:19px;color:var(--gold-2);background:rgba(255,170,80,.08);border:1px solid var(--line)}
.feats b{display:block;font-size:15.5px;font-weight:700}
.feats small{display:block;font-size:13.5px;color:var(--mute)}
.panel .acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.panel .stage{position:relative;height:100%;min-height:420px;display:grid;place-items:center}

/* ---------- step 3 ---------- */
.puzzle-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pz{padding:28px 26px 26px;display:flex;flex-direction:column}
.pz .who{font-size:14px;font-weight:600;color:var(--gold)}
.pz h3{font-size:26px;margin:8px 0}
.pz p{color:var(--mute);font-size:15px;margin:0 0 22px}
.pz .mini{--s:132px;--t:calc(var(--s)*.21);display:grid;grid-template-columns:repeat(2,var(--s));justify-content:center;gap:0;margin:6px auto 26px}
.pz .mini .tile .tc{gap:4px}
.pz .mini .tile .tc .ic{font-size:calc(var(--s)*.16)}
.pz .mini .tile .tc b{font-size:calc(var(--s)*.098);line-height:1.18}
.pz .mini .tile .tc small{text-transform:none;letter-spacing:0;font-weight:500;font-style:italic;color:var(--mute);font-size:calc(var(--s)*.08);line-height:1.2}
.pz .mini .tile .add{display:none}
.pz .btn{margin-top:auto}

/* ---------- build ---------- */
.build-grid{display:grid;grid-template-columns:260px 1fr 340px;gap:26px;align-items:stretch}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.steps li{padding:18px 18px 18px 64px;position:relative;border-radius:14px;border:1px solid var(--line);background:rgba(20,14,9,.55);backdrop-filter:blur(10px);transition:all .45s var(--ease)}
.steps li i{position:absolute;left:16px;top:16px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--sans);font-style:normal;color:var(--gold-2);border:1.5px solid var(--gold-3)}
.steps li b{display:block;font-family:var(--serif);font-size:19px;font-weight:600}
.steps li span{font-size:13.5px;color:var(--mute)}
.steps li.on{border-color:var(--gold);background:linear-gradient(90deg,rgba(80,48,18,.6),rgba(20,14,9,.55))}
.steps li.on i{background:var(--gold-2);color:#2a1604;border-color:var(--gold-2)}
.platform{position:relative;min-height:470px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;padding:30px 10px 80px;overflow:hidden}
.platform::after{content:'';position:absolute;left:8%;right:8%;bottom:26px;height:70px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,170,80,.35),transparent 70%);border:1px solid rgba(255,190,110,.35);transform:perspective(500px) rotateX(60deg);pointer-events:none}
.plat-grid{--s:104px;--t:calc(var(--s)*.21);display:grid;grid-template-columns:repeat(4,var(--s));gap:0;justify-content:center;position:relative;z-index:1}
.plat-grid .tile.base-t{grid-column:span 2;grid-row:span 2;--s:208px;--t:calc(208px*.21)}
.plat-grid .tile .add{display:none}
.plat-grid .tile.ghost .fill{fill:rgba(255,190,110,.04);stroke-dasharray:6 6}
.plat-grid .tile.ghost .tc{color:var(--gold-2)}
.plat-note{position:absolute;top:14px;left:0;right:0;text-align:center;font-family:var(--serif);font-style:italic;color:var(--mute);font-size:15px}
.setup{padding:24px 22px;display:flex;flex-direction:column}
.setup h3{font-size:24px}
.setup>p{color:var(--mute);font-size:14px;margin:4px 0 16px}
.setup ul{list-style:none;margin:0;padding:0;flex:1;max-height:330px;overflow:auto}
.setup li{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);font-size:15px;animation:slidein .45s var(--pop)}
.setup li .ic{color:var(--gold);font-size:18px}
.setup li small{margin-left:auto;font-size:12.5px;color:var(--dim)}
.setup li button{background:none;border:0;color:var(--mute);cursor:pointer;padding:6px;font-size:16px;line-height:1;width:32px;height:32px}
.setup li button:hover{color:#fff}
.setup .empty{color:var(--dim);font-style:italic;font-size:15px;padding:14px 0}
.setup .more{margin:14px 0 18px;border:1.5px dashed var(--line-2);border-radius:12px;padding:12px;text-align:center;color:var(--gold-2);background:none;font:600 15px var(--sans);cursor:pointer;width:100%}
.setup .more:hover{border-color:var(--gold-2)}
.setup .est{font-size:13.5px;color:var(--mute);margin:0 0 14px;line-height:1.45}
.setup .est b{display:block;font-family:var(--serif);font-size:30px;color:var(--ink);font-weight:600}
.setup .fine{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12px;color:var(--dim)}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}}
.promises{margin-top:56px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line)}
.promises article{padding:24px 22px 0 0;display:flex;flex-direction:column;gap:8px}
.promises article+article{padding-left:22px;border-left:1px solid var(--line)}
.promises .ic{font-size:26px;color:var(--gold-2)}
.promises b{font-size:15.5px}
.promises span{font-size:13.5px;color:var(--mute)}

/* ---------- final ---------- */
.final{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px 0}
.final-in{display:flex;flex-direction:column;align-items:center;position:relative}
.final-in::before{content:'';position:absolute;inset:-60px -40px;z-index:-1;background:radial-gradient(closest-side,rgba(6,4,3,.82),rgba(6,4,3,.55) 60%,transparent);pointer-events:none}
.final-in img{margin-bottom:22px}
.final h2{font-size:clamp(40px,6vw,82px);max-width:13ch}
.final h2 em{display:block}
.final p{color:var(--mute);font-size:18.5px;max-width:52ch;margin:22px 0 34px}
.final-cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:rgba(4,3,2,.82);padding:34px 0 44px}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr auto;gap:26px;align-items:center;color:var(--mute);font-size:15px}
.foot-in p{margin:0}

/* ---------- dock, fab, toast ---------- */
.dock{position:fixed;left:50%;bottom:20px;z-index:60;transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:8px 8px 8px 16px;border-radius:999px;
  background:rgba(16,11,7,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:0;box-shadow:0 10px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,220,160,.14);animation:dockin .6s var(--pop) both}
.dock[hidden]{display:none}
@keyframes dockin{from{opacity:0;transform:translate(-50%,40px)}}
.dock-pieces{display:flex}
.dock-pieces span{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--gold-2);font-size:16px;background:#1a120a;border:1px solid var(--line-2);margin-left:-8px;box-shadow:0 0 0 2px rgba(16,11,7,1);animation:pop .45s var(--pop)}
.dock-pieces span:first-child{margin-left:0}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}}
.dock strong{font-size:15px;white-space:nowrap}
.fab{position:fixed;right:22px;bottom:22px;z-index:55;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 30% 30%,#3ee08d,#128c55);box-shadow:0 10px 22px rgba(0,0,0,.5);transition:transform .35s var(--pop),bottom .4s var(--ease)}
.fab .ic{font-size:30px}
.fab:hover{transform:scale(1.08) rotate(-6deg)}
@keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}
body.has-dock .fab{bottom:92px}
.toast{position:fixed;left:50%;top:96px;z-index:300;transform:translate(-50%,-16px);opacity:0;pointer-events:none;padding:12px 22px;border-radius:999px;background:linear-gradient(180deg,#ffe0a3,#e9a24d);color:#2a1604;font-weight:700;font-size:15px;box-shadow:0 10px 24px rgba(0,0,0,.45);transition:opacity .3s,transform .5s var(--pop);text-align:center;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- modals ---------- */
.modal{border:0;padding:0;background:transparent;color:var(--ink);max-width:none;max-height:none;width:100%;height:100%;overflow:auto}
.modal::backdrop{background:rgba(5,3,2,.72);backdrop-filter:blur(8px)}
.modal-box{position:relative;margin:max(24px,4vh) auto;width:min(1180px,calc(100vw - 32px));border-radius:24px;padding:40px 44px;
  background:linear-gradient(180deg,rgba(34,23,14,.97),rgba(12,8,5,.98));border:1px solid var(--line-2);box-shadow:0 40px 80px rgba(0,0,0,.7)}
.modal[open] .modal-box{animation:modalin .6s var(--pop) both}
@keyframes modalin{from{opacity:0;transform:translateY(40px) scale(.96)}}
.close{position:absolute;right:18px;top:18px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(10,7,4,.7);color:var(--ink);border:1px solid var(--line-2);font:600 14px var(--sans);cursor:pointer;z-index:3}
.close:hover{border-color:var(--gold-2)}
.close .ic{font-size:16px}
.detail-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center}
.detail-grid .d-kind{margin:0;font-size:15px;font-weight:600;color:var(--gold)}
.detail-grid h2{font-size:clamp(34px,4vw,56px);margin:14px 0 10px}
.detail-grid .tg{font-size:20px;margin:0 0 12px}
.detail-grid .ds{color:var(--mute);margin:0 0 22px}
.detail-grid .acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.wa-link{display:inline-flex;align-items:center;gap:8px;color:var(--mute);font-size:14.5px;text-decoration:none}
.wa-link b{color:var(--gold-2);font-weight:600}
.strip{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.strip div{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:rgba(255,170,80,.05);border:1px solid var(--line);font-size:14px;font-weight:600}
.strip .ic{font-size:22px;color:var(--gold-2)}

.quote-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:30px}
.q-intro h2{font-size:clamp(34px,4vw,54px);margin:14px 0 12px}
.q-intro>p{color:var(--mute);margin:0 0 20px}
.q-perks{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:24px}
.q-perks div{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--mute)}
.q-perks b{display:block;color:var(--ink);font-size:14.5px}
.q-perks .ic{font-size:24px;color:var(--gold-2)}
.q-block{border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:18px;background:rgba(0,0,0,.18)}
.q-block h3{display:flex;align-items:center;gap:12px;font-size:21px;margin-bottom:4px}
.q-block h3 i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--sans);font-style:normal;color:#2a1604;background:linear-gradient(180deg,#ffd896,#e49b45);flex:none}
.q-block>p{margin:0 0 14px 44px;color:var(--mute);font-size:14px}
.q-bases{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.q-opt{position:relative;text-align:left;cursor:pointer;border-radius:14px;border:1px solid var(--line);background:rgba(20,14,9,.7);color:var(--ink);padding:14px 12px;font:600 14.5px var(--sans);display:flex;flex-direction:column;gap:8px;transition:all .3s var(--ease)}
.q-opt .ic{font-size:22px;color:var(--gold-2)}
.q-opt small{font-weight:500;color:var(--dim);font-size:12px;line-height:1.3}
.q-opt:hover{border-color:var(--line-2)}
.q-opt.on{border-color:var(--gold-2);box-shadow:inset 0 0 0 1px var(--gold-2);background:linear-gradient(180deg,rgba(80,48,18,.6),rgba(20,14,9,.7))}
.q-search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:0 14px;margin:0 0 12px;background:rgba(0,0,0,.25)}
.q-search .ic{color:var(--dim)}
.q-search input{flex:1;background:none;border:0;color:var(--ink);font:500 15px var(--sans);padding:12px 0;outline:none}
.q-pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;max-height:330px;overflow:auto;padding:2px}
.q-pieces .q-opt{align-items:center;text-align:center;padding:14px 8px 12px;font-size:13px;line-height:1.25}
.q-pieces .q-opt .box{position:absolute;right:8px;top:8px;width:16px;height:16px;border-radius:4px;border:1.5px solid var(--line-2)}
.q-pieces .q-opt.on .box{background:var(--gold-2);border-color:var(--gold-2)}
.q-form{border:1px solid var(--line);border-radius:18px;padding:22px;background:rgba(0,0,0,.2)}
.q-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.q-form label{display:block;font-size:13.5px;font-weight:600;margin:0 0 14px}
.q-form label span{color:var(--gold)}
.q-form input,.q-form select,.q-form textarea{display:block;width:100%;margin-top:7px;padding:13px 14px;border-radius:12px;font:500 15px var(--sans);color:var(--ink);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.q-form select option{background:#1a120a}
.q-form input:focus,.q-form select:focus,.q-form textarea:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(255,190,110,.12)}
.q-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 16px}
.q-chips .q-opt{align-items:center;text-align:center;padding:12px 6px;font-size:13px}
.q-chips .q-opt .ic{font-size:20px}
.q-label{font-size:13.5px;font-weight:600;margin:4px 0 0}
.q-note{text-align:center;font-size:12.5px;color:var(--dim);margin:12px 0 0}
.q-alt{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mute)}

/* ---------- product mockups (CSS-built samples) ---------- */
.mk{position:relative;width:100%;max-width:520px;aspect-ratio:1.18;font-family:var(--sans);color:#2a1d10;font-size:10px;user-select:none}
.mk-sample{position:absolute;left:0;bottom:-26px;font-size:13px;color:var(--dim)}
.mk .scr{position:absolute;border-radius:14px;overflow:hidden;background:#faf4ea;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,210,150,.35)}
.mk .lap{left:0;top:6%;width:84%;height:70%;border:7px solid #15100b;border-radius:16px}
.mk .lapbase{position:absolute;left:-3%;top:76%;width:90%;height:3.5%;background:linear-gradient(#2a2119,#0d0906);border-radius:0 0 12px 12px;box-shadow:0 18px 30px rgba(0,0,0,.6)}
.mk .ph{right:0;bottom:0;width:31%;height:76%;border:6px solid #15100b;border-radius:24px}
.mk .ph.solo{left:50%;right:auto;transform:translateX(-50%);bottom:auto;top:0;width:52%;height:100%}
.mk .site-nav{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:9.5px;color:#6b5236}
.mk .site-nav b{font-family:var(--serif);font-size:12px;color:#2a1d10;margin-right:auto}
.mk .site-nav i{font-style:normal;padding:4px 8px;border-radius:10px;background:#c9842f;color:#fff}
.mk .site-hero{margin:0 10px;height:46%;border-radius:10px;background:linear-gradient(120deg,rgba(30,20,10,.85),rgba(30,20,10,.2)),radial-gradient(circle at 75% 40%,#f2c27a,#7a4a1c 70%);color:#fff;padding:12px;display:flex;flex-direction:column;justify-content:center;gap:5px}
.mk .site-hero b{font-family:var(--serif);font-size:16px;line-height:1.05;max-width:60%}
.mk .site-hero span{font-size:9px;opacity:.8}
.mk .site-hero i{font-style:normal;align-self:flex-start;padding:4px 9px;border-radius:9px;background:#e7a04c;color:#2a1604;font-weight:700;font-size:9px}
.mk .gal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 10px}
.mk .gal div{aspect-ratio:1.3;border-radius:7px;background:linear-gradient(160deg,#e9cfa6,#a8692a);position:relative}
.mk .gal div:nth-child(2){background:linear-gradient(160deg,#d8b98e,#6b4420)}
.mk .gal div:nth-child(3){background:linear-gradient(160deg,#f3dcb7,#c08040)}
.mk .gal div:nth-child(4){background:linear-gradient(160deg,#cfa775,#5a3615)}
.mk .ph .site-hero{height:42%;margin:6px}
.mk .ph .site-hero b{font-size:12px;max-width:none}
.mk .ph .gal{grid-template-columns:repeat(2,1fr);margin:6px}
.mk .wa-top{background:#0f6b4d;color:#fff;padding:10px 10px 8px;display:flex;align-items:center;gap:8px;font-size:9.5px}
.mk .wa-top i{width:22px;height:22px;border-radius:50%;background:linear-gradient(#ffd896,#c9842f);flex:none}
.mk .wa-top small{display:block;font-size:8.5px;opacity:.75}
.mk .chat{padding:8px;display:flex;flex-direction:column;gap:6px;background:#efe6d6;height:100%}
.mk .b{max-width:78%;padding:7px 9px;border-radius:10px;background:#fff;font-size:9px;line-height:1.35;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.mk .b.me{align-self:flex-end;background:#d7f5d0}
.mk .prods{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mk .prods div{background:#fff;border-radius:7px;padding:4px;font-size:9px;text-align:center}
.mk .prods div::before{content:'';display:block;aspect-ratio:1.2;border-radius:5px;margin-bottom:3px;background:linear-gradient(150deg,#f1d9b0,#a8692a)}
.mk .prods em{display:block;margin-top:2px;padding:2px;border-radius:4px;background:#0f6b4d;color:#fff;font-size:8px}
.mk .doc{display:flex;align-items:center;gap:6px;background:#fff;border-radius:8px;padding:6px 8px;font-size:8.5px;align-self:flex-start}
.mk .doc i{width:16px;height:20px;border-radius:3px;background:#d64b3b}
.mk .gcard{position:absolute;inset:0;border-radius:16px;background:#fff;padding:14px;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.mk .gsearch{display:flex;align-items:center;gap:8px;border:1px solid #ddd;border-radius:20px;padding:7px 12px;font-size:10px;color:#555}
.mk .gsearch::before{content:'';width:10px;height:10px;border:2px solid #888;border-radius:50%}
.mk .gmap{margin:12px 0;height:40%;border-radius:10px;position:relative;overflow:hidden;background:
  linear-gradient(90deg,transparent 48%,#fff 48% 52%,transparent 52%),linear-gradient(0deg,transparent 46%,#fff 46% 50%,transparent 50%),linear-gradient(35deg,transparent 60%,#fbe3b8 60% 64%,transparent 64%),#e9efe4}
.mk .gmap::after{content:'';position:absolute;left:52%;top:30%;width:22px;height:22px;border-radius:50% 50% 50% 0;background:#d9452f;transform:rotate(-45deg);box-shadow:0 4px 10px rgba(0,0,0,.3)}
.mk .glist b{display:block;font-size:14px;font-family:var(--serif)}
.mk .glist span{font-size:9px;color:#777}
.mk .gbtns{display:flex;gap:6px;margin-top:10px}
.mk .gbtns i{font-style:normal;flex:1;text-align:center;padding:6px 0;border-radius:16px;border:1px solid #c9d6ea;color:#2f5fb3;font-size:8.5px;font-weight:700}
.mk .gphotos{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}
.mk .gphotos div{aspect-ratio:1.4;border-radius:6px;background:linear-gradient(150deg,#e9cfa6,#7a4a1c)}
.mk .pay{position:absolute;left:4%;top:4%;width:70%;bottom:6%;border-radius:16px;background:#fff;padding:16px;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.mk .pay h4{margin:0 0 4px;font-size:13px}
.mk .pay .amt{font-family:var(--serif);font-size:26px;font-weight:700;margin:6px 0 12px}
.mk .methods{display:flex;gap:6px;margin-bottom:12px}
.mk .methods i{font-style:normal;flex:1;text-align:center;padding:8px 0;border-radius:8px;border:1px solid #e3d6c3;font-weight:800;font-size:9px}
.mk .methods i:first-child{border-color:#c9842f;background:#fff5e6}
.mk .fld{height:26px;border-radius:7px;border:1px solid #e3d6c3;margin-bottom:8px;padding:0 8px;display:flex;align-items:center;color:#aaa;font-size:8.5px}
.mk .paybtn{margin-top:10px;padding:10px;border-radius:9px;text-align:center;color:#fff;font-weight:800;background:linear-gradient(#e7a04c,#b8701f)}
.mk .qr{position:absolute;right:0;bottom:0;width:38%;aspect-ratio:.6;border-radius:18px;border:6px solid #15100b;background:#fff;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 20px 40px rgba(0,0,0,.6)}
.mk .qr div{width:80%;aspect-ratio:1;background:
  conic-gradient(#000 25%,#fff 0 50%,#000 0 75%,#fff 0) 0 0/20% 20%;border:4px solid #000;border-radius:4px;opacity:.85}
.mk .qr span{font-size:8.5px;font-weight:700}
.mk .dash{position:absolute;inset:0;border-radius:16px;background:#120d09;border:1px solid rgba(255,190,110,.3);padding:14px;color:#f4e6cf;box-shadow:0 30px 60px rgba(0,0,0,.6);display:grid;grid-template-columns:70px 1fr;gap:12px}
.mk .side{display:flex;flex-direction:column;gap:7px;font-size:9.5px;color:#a8937a}
.mk .side i{font-style:normal;padding:5px 6px;border-radius:6px}
.mk .side i:first-child{background:rgba(255,170,80,.18);color:#ffd08a}
.mk .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mk .stats div{border-radius:8px;background:#1d150e;border:1px solid rgba(255,190,110,.18);padding:7px;font-size:9px;color:#a8937a}
.mk .stats b{display:block;font-size:14px;color:#fff;margin-top:2px}
.mk .chart{margin:10px 0;height:46%;border-radius:8px;background:#1a130c;border:1px solid rgba(255,190,110,.12);position:relative;overflow:hidden}
.mk .chart svg{position:absolute;inset:0;width:100%;height:100%}
.mk .rows div{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,190,110,.1);font-size:10px}
.mk .rows em{font-style:normal;padding:2px 8px;border-radius:6px;background:#1f6f4f;color:#d6ffe9;font-size:9px;font-weight:700}
.mk .cal{position:absolute;inset:0;border-radius:16px;background:#fff;padding:16px;box-shadow:0 30px 60px rgba(0,0,0,.6);display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.mk .cal h4{grid-column:1/-1;margin:0;font-size:13px}
.mk .days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-size:8.5px}
.mk .days span{padding:5px 0;border-radius:6px}
.mk .days .h{color:#999;font-weight:700}
.mk .days .on{background:#c9842f;color:#fff;font-weight:800}
.mk .days .off{color:#ccc}
.mk .slots{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.mk .slots i{font-style:normal;text-align:center;padding:7px 0;border-radius:7px;border:1px solid #e3d6c3;font-size:8.5px}
.mk .slots i.on{background:#2a1d10;color:#ffd08a;border-color:#2a1d10}
.mk .slots .go{grid-column:1/-1;margin-top:6px;background:linear-gradient(#e7a04c,#b8701f);color:#fff;font-weight:800;border:0}
.mk .catl{position:absolute;inset:0;border-radius:16px;background:#14100b;border:1px solid rgba(255,190,110,.3);padding:14px;box-shadow:0 30px 60px rgba(0,0,0,.6);color:#f4e6cf}
.mk .catl h4{font-family:var(--serif);font-size:16px;margin:0 0 4px;color:#ffd08a}
.mk .catl p{margin:0 0 10px;font-size:10px;color:#a8937a}
.mk .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mk .cgrid div{border-radius:8px;border:1px solid rgba(255,190,110,.25);padding:6px;font-size:9.5px}
.mk .cgrid div::before{content:'';display:block;aspect-ratio:1.1;border-radius:6px;margin-bottom:5px;background:radial-gradient(circle at 50% 40%,#ffe0a3,#a8692a 60%,#3a2410)}
.mk .cgrid em{display:block;font-style:normal;color:#ffd08a;margin-top:2px;font-size:9px}
.mk .links-pg{background:linear-gradient(180deg,#2a1d10,#120d09);color:#fff;height:100%;padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.mk .links-pg .av{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe0a3,#a8692a)}
.mk .links-pg b{font-family:var(--serif);font-size:13px}
.mk .links-pg i{font-style:normal;width:100%;text-align:center;padding:8px 0;border-radius:10px;border:1px solid rgba(255,190,110,.4);font-size:9px;font-weight:700}
.mk .links-pg i:first-of-type{background:linear-gradient(#e7a04c,#b8701f);border:0}
.mk .float{position:absolute;padding:8px 12px;border-radius:12px;background:rgba(16,11,7,.92);border:1px solid var(--line-2);color:var(--ink);font-size:10.5px;box-shadow:0 14px 30px rgba(0,0,0,.5);display:flex;align-items:center;gap:8px;animation:bob 4s ease-in-out infinite alternate}
.mk .float .ic{color:var(--gold-2);font-size:14px}
@keyframes bob{to{transform:translateY(-8px)}}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .base-grid{grid-template-columns:repeat(2,1fr)}
  .build-grid{grid-template-columns:1fr 1fr}
  .platform{grid-column:1/-1;order:-1}
  .promises{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .links{display:none}
  .panel{grid-template-columns:1fr;padding:30px 24px;min-height:0}
  .panel .stage{min-height:340px}
  .puzzle-list{grid-template-columns:1fr}
  .detail-grid,.quote-grid{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr;gap:12px}
  .trust div+div{border-left:0;border-top:1px solid var(--line);padding-top:14px}
}
@media (max-width:720px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .nav{gap:12px;padding:12px 14px}
  .brand small{display:none}
  .brand span{font-size:18px}
  .brand img{width:36px}
  .nav .btn{padding:10px 16px;min-height:42px;font-size:14px}
  .nav .btn .arr{display:none}
  .hero{align-items:start;padding-top:108px;padding-bottom:0}
  .hero-in{max-width:none}
    .lede{margin:16px auto 22px}
  .hint{margin-top:16px}
    .sec{padding:90px 0 40px}
  .head{margin-bottom:40px}
  .head p{font-size:16px}
  .base-grid{grid-template-columns:1fr}
  .pkg3{grid-template-columns:1fr;gap:14px;text-align:left}
  .tile-grid{--s:calc((100vw - 48px)/2)}
  .tile-grid .tile .tc b{font-size:15px}
  .tile-grid .tile .tc small{font-size:10px}
  .showcase{padding-top:80px}
  .track{flex-direction:column;width:auto;padding:0 18px;gap:22px}
  .panel{width:auto}
    .build-grid{grid-template-columns:1fr}
  .plat-grid{--s:calc((100vw - 76px)/4)}
  .plat-grid .tile.base-t{--s:calc((100vw - 76px)/2);--t:calc(var(--s)*.21)}
  .plat-grid .tile:not(.base-t) .tc b{display:none}   /* names are in the setup list beside it */
  .plat-grid .tile:not(.base-t) .tc .ic{font-size:calc(var(--s)*.3)}
  .plat-grid .tile .tc small{display:none}
  .platform{min-height:0;padding:44px 0 70px}
  .promises{grid-template-columns:1fr 1fr}
  .final h2{font-size:42px}
  .foot-in{grid-template-columns:1fr}
  .modal-box{padding:56px 18px 22px;border-radius:20px;margin:12px auto}
  .q-form .row{grid-template-columns:1fr}
  .q-chips{grid-template-columns:repeat(2,1fr)}
  .q-block>p{margin-left:0}
  .dock{left:12px;right:12px;transform:none;justify-content:space-between;animation:none}
  .dock-pieces{display:none}
  .fab{width:54px;height:54px;right:14px;bottom:14px}
  body.has-dock .fab{bottom:84px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- fit the pinned showcase into the viewport ---------- */
.btn,.links a{white-space:nowrap}
@media (min-width:721px){
  .showcase{height:100vh;padding:clamp(76px,11vh,110px) 0 0;display:flex;flex-direction:column}
  .show-head{margin-bottom:clamp(16px,3vh,40px)}
  .show-head   .show-head h2{font-size:clamp(30px,4.4vh,52px)}
  .track{flex:1;min-height:0;padding-bottom:clamp(20px,4vh,46px)}
  .panel{min-height:0;height:100%;max-height:760px;padding:clamp(22px,3.4vh,42px) clamp(26px,3vw,44px)}
  .panel .copy{max-height:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
  .panel h3{font-size:clamp(28px,4.6vh,46px)}
  .panel .tg{font-size:clamp(15px,2.1vh,18px);margin:8px 0 4px}
  .panel .ds{margin-bottom:clamp(10px,2vh,20px)}
  .panel .feats{gap:clamp(6px,1.2vh,12px);margin-bottom:clamp(12px,2.4vh,26px)}
  .panel .stage{min-height:0;height:100%}
  .panel .stage .mk{max-width:min(520px,calc((100vh - 300px) * 1.18))}
}
@media (min-width:721px) and (max-height:820px){
  .panel .ds{display:none}
  .panel .feats li:nth-child(4){display:none}
}
@media (max-width:1100px) and (min-width:721px){ .links{gap:20px} }

/* ---------- add-on pieces: topic on the front, details open on hover / tap ---------- */
.tile .tc b{font-size:calc(var(--s)*.105)}
.tile .chk{position:absolute;right:calc(var(--t) + 8px);top:calc(var(--t) + 8px);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-2);color:#241302;transform:translateZ(24px) scale(0);transition:transform .45s var(--pop);box-shadow:0 3px 8px rgba(0,0,0,.5)}
.tile .chk .ic{font-size:14px;stroke-width:2.6}
.tile.on .chk{transform:translateZ(24px) scale(1)}
.tile.open{z-index:30}
.tile.open .glow{stroke:var(--gold-2)}
.tile.open .fill{fill:url(#tFillOn)}
.tile.open .tc .ic{transform:scale(1.12);transition:transform .4s var(--pop)}
.drawer{
  position:absolute;left:50%;top:calc(100% - 2px);width:min(300px,calc(100vw - 24px));z-index:5;cursor:default;text-align:left;
  padding:18px 18px 16px;border-radius:16px;color:var(--ink);
  background:linear-gradient(180deg,rgba(48,32,18,.98),rgba(16,11,7,.98));border:1px solid var(--gold-3);
  box-shadow:0 30px 60px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,220,160,.12);
  transform-origin:50% 0;transform:translateX(calc(-50% + var(--dx,0px))) translateY(-10px) scale(.92) rotateX(-12deg);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .45s var(--pop),visibility 0s linear .25s;
}
.drawer::before{content:'';position:absolute;top:-9px;left:calc(50% - var(--dx,0px));width:16px;height:16px;margin-left:-8px;background:#30200f;
  border:1px solid var(--gold-3);border-right:0;border-bottom:0;transform:rotate(45deg)}
.tile.up .drawer{top:auto;bottom:calc(100% - 2px);transform-origin:50% 100%;transform:translateX(calc(-50% + var(--dx,0px))) translateY(10px) scale(.92) rotateX(12deg)}
.tile.up .drawer::before{top:auto;bottom:-9px;transform:rotate(225deg);background:#110c07}
.tile.open .drawer{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(calc(-50% + var(--dx,0px))) translateY(0) scale(1) rotateX(0);transition:opacity .2s ease,transform .5s var(--pop),visibility 0s}
.drawer .kick{display:block;font-size:13px;font-weight:600;color:var(--gold)}
.drawer h4{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.15;margin:6px 0 8px}
.drawer p{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--mute)}
.drawer .d-acts{display:flex;gap:8px;flex-wrap:wrap}
.drawer .d-acts .btn{padding:10px 14px;min-height:40px;font-size:13.5px;gap:7px}
.drawer .d-acts .btn .ic{font-size:15px}
.tile.open .drawer > *{animation:dIn .45s var(--pop) both}
.tile.open .drawer > :nth-child(2){animation-delay:.04s}
.tile.open .drawer > :nth-child(3){animation-delay:.08s}
.tile.open .drawer > :nth-child(4){animation-delay:.12s}
@keyframes dIn{from{opacity:0;transform:translateY(8px)}}
.pz:has(.tile.open){position:relative;z-index:6}
.tile-grid:has(.tile.open),.pz .mini:has(.tile.open){z-index:6;position:relative}

/* WhatsApp button steps aside while the pinned showcase fills the screen */
.fab.away{transform:translateY(140%) scale(.8);opacity:0;pointer-events:none}
.fab{transition:transform .45s var(--pop),opacity .3s,bottom .4s var(--ease)}

/* ======================================================================
   CONTENT REBUILD (Salion Digital Solutions)
   Adds the new sections and the readability fixes. The 3D scene, the
   piece shapes, the palette and the motion are untouched.
   ====================================================================== */

/* ---------- readability: sizes, contrast, tap targets ---------- */
:root{--dim:#A99B82}                                   /* decorative only; readable grey is --mute */
body{font-size:16px;line-height:1.6}
@media (min-width:1100px){body{font-size:17px}}
.ta body,.ta button,.ta input{font-family:'Noto Sans Tamil','Manrope',system-ui,sans-serif}
.ta body{font-size:17px;line-height:1.75}
.ta h1,.ta h2,.ta h3,.ta h4{font-family:'Noto Sans Tamil','Manrope',system-ui,sans-serif;letter-spacing:0}
.ta .brand-name{letter-spacing:.1em}
h4{font-family:var(--sans);font-weight:700;margin:0}
p{max-width:65ch}
.btn{font-size:16px;min-height:48px}
.btn-sm{font-size:16px;min-height:48px;padding:12px 20px}
.sr-only,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1200px;padding:0 24px}
.sec{padding:96px 0}
.head{margin:0 0 32px}
.head p{font-size:18px}
.sub-h{font-family:var(--sans);font-size:clamp(22px,2.2vw,28px);font-weight:700;margin:56px 0 20px}
.head-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.head .flag{font-family:var(--serif);font-size:22px;color:var(--gold-2);margin-top:12px}
.safety{display:flex;gap:10px;align-items:center;color:var(--gold-2)!important;font-weight:600;margin-top:16px!important}
.safety .ic{font-size:22px;flex:none}
@media (max-width:720px){.wrap{padding:0 20px}.sec{padding:64px 0}}

/* ---------- loading screen: the page appears only when it is fully ready ---------- */
html.loading{overflow:hidden}
.loader{z-index:300}
.loader-bar{width:min(220px,60vw);height:3px}
.loader-bar i{width:0;animation:none;background:linear-gradient(90deg,var(--gold-3),var(--gold-2));border-radius:3px;transition:width .5s var(--ease)}
.loader p{font-size:16px;color:var(--mute)}
.loader.gone{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- nav and brand ---------- */
.brand .brand-name{font-family:var(--serif);font-size:22px;letter-spacing:.1em;line-height:1;display:flex;flex-direction:column;flex-wrap:nowrap;gap:5px}
.brand .brand-name small{flex-basis:auto;font:600 13px var(--sans);letter-spacing:.02em;color:var(--mute);margin:0}
.nav{gap:20px}
.links{gap:24px}
.links a{font-size:16px}
.lang{font:700 16px var(--sans);color:var(--gold-2);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:10px 18px;min-height:48px;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s}
.lang:hover{border-color:var(--gold-2);color:#fff}
@media (max-width:1100px){.links{display:none}}
@media (max-width:720px){.brand .brand-name small{display:none}.lang{padding:8px 14px}}

/* ---------- hero text ---------- */
.hero-in{max-width:760px}
.eyebrow{margin:0 auto 16px;font-size:15px;font-weight:600;color:var(--gold-2)}
.hero h1{font-size:clamp(28px,3.9vw,58px);line-height:1.14;letter-spacing:.005em}
.hero h1 span,.hero h1 em{display:block}
.lede{font-size:clamp(16px,1.35vw,19px);max-width:62ch;margin:20px auto 24px;opacity:.92}
.hero-doors{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero-doors .btn{padding:14px 22px}
.hint{font-size:15px;margin-top:20px}
@media (max-width:720px){.hero h1{font-size:30px}.hero-doors .btn{flex:1 1 100%}}

/* ---------- AI team: relay ---------- */
.relay-h{font-family:var(--sans);font-size:clamp(20px,2vw,26px);font-weight:700;margin:0 0 24px}
.relay{--s:min(176px,calc((100vw - 56px)/6));--t:calc(var(--s)*.21);list-style:none;margin:0 0 64px;padding:0;display:grid;grid-template-columns:repeat(6,var(--s));justify-content:center;position:relative}
.relay>li{width:var(--s);position:relative}
.relay .cap{margin:22px 0 0;font-size:16px;line-height:1.5;color:var(--mute);opacity:.6;transition:opacity .4s,color .4s;max-width:none}
.relay>li.on .cap{opacity:1;color:var(--ink)}
.relay .cap .n{display:block;font-size:14px;font-weight:700;color:var(--gold-2);margin-bottom:4px}
.relay .gate{display:flex;gap:8px;align-items:center;margin-top:12px;padding:8px 12px;border:1px solid var(--gold-3);color:var(--gold-2);font-weight:700;font-size:14px;width:max-content;max-width:100%}
.relay .gate .ic{font-size:16px}
.relay-token{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--gold-2);border:3px solid #241302;box-shadow:0 4px 10px rgba(0,0,0,.6);left:calc(50% - 3*var(--s) + var(--s)/2 - 9px + var(--p,0)*5*var(--s));top:calc(var(--s)/2 - 9px);z-index:6;pointer-events:none}
.tile.agent .fill{fill:url(#tFillOn);stroke:url(#tEdge)}
.tile.agent .tc b{color:#ffe7b8}
.tile.agent .tc .ic{color:#ffd08a}
@media (max-width:720px){
  .relay{--s:min(124px,32vw);grid-template-columns:1fr;justify-content:start;margin-bottom:48px}
  .relay>li{width:auto;display:grid;grid-template-columns:var(--s) 1fr;gap:18px;align-items:center;height:var(--s)}   /* one piece tall per row, so the pieces interlock and the token path stays straight */
  .relay .cap{margin:0;font-size:16px;line-height:1.38}
  .relay .cap .n{display:inline;margin:0 6px 0 0}
  .relay .gate{border:0;padding:0;margin-top:6px;font-size:15px}
  #navQuote{min-height:48px}
  .relay-token{left:calc(var(--s)/2 - 9px);top:calc(var(--s)/2 - 9px + var(--p,0)*5*var(--s))}
}

/* ---------- AI team: agent cards ---------- */
.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:56px}
.agent-card{padding:24px;display:flex;flex-direction:column;transition:border-color .3s}
.agent-card.on{border-color:var(--gold)}
.ac-top{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.ac-ic{flex:none;width:52px;height:52px;display:grid;place-items:center;font-size:26px;color:#241302;background:linear-gradient(180deg,#f6cf86,#d99a45);border-radius:12px}
.agent-card h3{font-family:var(--sans);font-size:19px;font-weight:700;line-height:1.25}
.status{display:block;margin-top:4px;font-size:13px;font-weight:600;color:var(--gold-2)}
.agent-card .job{font-weight:600;color:var(--ink);font-size:17px;margin:0 0 4px}
.agent-card h4,.pz h4,.bcard h4{font-size:14px;color:var(--gold-2);margin:16px 0 6px}
.agent-card ul{margin:0;padding-left:18px;color:var(--mute)}
.agent-card li{margin:6px 0;line-height:1.5}
.agent-card .inside{margin:0;color:var(--mute)}
.ac-acts{margin-top:auto;padding-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.ba{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin:0 0 24px}
.ba-col{padding:22px 24px}
.ba-col+.ba-col{border-left:1px solid var(--line);background:rgba(232,168,83,.06)}
.ba-col h4{margin:0 0 12px;font-size:16px;color:var(--gold-2)}
.ba-col.today h4{color:var(--mute)}
.ba-col ul{list-style:none;margin:0;padding:0;color:var(--mute)}
.ba-col li{padding:9px 0;border-top:1px solid var(--line)}
.ba-col li:first-child{border-top:0}
.auto-list{list-style:none;margin:0;padding:0}
.auto-list li{display:flex;gap:10px;padding:5px 0;line-height:1.5}
.auto-list .ic{font-size:18px;color:var(--gold-2);margin-top:3px;flex:none}
.soon-row{margin:0 0 28px;color:var(--mute);font-size:15px;max-width:none}
.soon-row b{color:var(--gold-2)}
@media (max-width:1000px){.agents{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
  .agents{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -20px 40px;padding:0 20px 10px}
  .agent-card{flex:0 0 86%;scroll-snap-align:center}
  .ba{grid-template-columns:1fr}.ba-col+.ba-col{border-left:0;border-top:1px solid var(--line)}
}

/* ---------- industries (puzzles) ---------- */
.pz-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.pz{padding:24px;display:flex;flex-direction:column}
.pz[hidden]{display:none}
.pz h3{font-size:clamp(22px,1.8vw,26px);margin:0 0 10px}
.pz .proof{display:flex;gap:8px;align-items:flex-start;color:var(--gold-2);font-weight:600;font-size:15px;margin:0 0 12px}
.pz .proof .ic{font-size:18px;flex:none;margin-top:2px}
.pz blockquote{margin:0 0 18px;font-size:17px;font-style:italic;line-height:1.55;color:var(--ink)}
.pz .mini{--s:60px;--t:calc(var(--s)*.21);display:grid;grid-template-columns:repeat(auto-fill,var(--s));justify-content:start;gap:0;margin:0 0 20px;padding:0 var(--t) var(--t) 0}
.tile.icon-only .tc b,.tile.icon-only .tc small{display:none}
.tile.icon-only .tc .ic{font-size:calc(var(--s)*.42)}
.tile.icon-only .bolt{display:none}
.pz .soon-line{margin:12px 0 0;font-size:15px;color:var(--mute)}
.pz .soon-line b{color:var(--gold-2)}
.pz-ba{margin:14px 0 18px}
.pz-ba summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:700;color:var(--gold-2);list-style:none}
.pz-ba summary::-webkit-details-marker{display:none}
.pz-ba summary::after{content:'+';margin-left:10px;font-size:22px}
.pz-ba[open] summary::after{content:'\2212'}
.pz-ba .ba{margin:8px 0 0;grid-template-columns:1fr}
.pz-ba .ba-col+.ba-col{border-left:0;border-top:1px solid var(--line)}
.pz>.btn{margin-top:auto;align-self:flex-start}
.pz-more{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:1000px){.pz-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
  .pz-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -20px;padding:0 20px 10px}
  .pz{flex:0 0 86%;scroll-snap-align:center}
}

/* ---------- build your own: starting points + pieces ---------- */
.starts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bcard[hidden]{display:none}
.starts .bcard .body{padding:24px}
.starts .badge-ic{position:static;margin-bottom:14px}
.bcard h3{font-family:var(--sans);font-size:20px;font-weight:700;margin:0 0 4px}
.bcard .who{display:block;font-size:14px;color:var(--gold-2);margin-bottom:8px}
.bcard .tag{font-size:16px;margin:0 0 12px}
.checks{font-size:16px}
.bcard .acts .btn{font-size:16px;min-height:48px}
.bcard .from{color:var(--gold-2);font-weight:700;margin:12px 0 0}
.bcard .muted-line{margin:0;color:var(--mute)}
.tile .bolt{position:absolute;left:calc(var(--t) + 6px);top:calc(var(--t) + 6px);width:24px;height:24px;display:grid;place-items:center;color:var(--gold-2);transform:translateZ(24px)}
.tile .bolt .ic{font-size:17px;stroke-width:2}
.tile .tc b{font-size:max(14px,calc(var(--s)*.105))}
.tile .tc small{font-size:max(13px,calc(var(--s)*.075))}
.auto-key{display:flex;gap:8px;align-items:center;color:var(--mute);margin:24px 0 0;font-size:15px;max-width:none}
.auto-key .ic{color:var(--gold-2);font-size:18px}
@media (max-width:1000px){.starts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
  .starts{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -20px;padding:0 20px 10px}
  .starts .bcard{flex:0 0 86%;scroll-snap-align:center}
}

/* ---------- JK Ops ---------- */
.jk-problems{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.jk-problems li{padding:22px 24px 22px 0;font-size:18px;font-weight:600;line-height:1.4;border-bottom:1px solid var(--line)}
.flow-grid{--s:132px;--t:calc(var(--s)*.21);display:grid;grid-template-columns:repeat(auto-fill,var(--s));justify-content:center;gap:0;margin:0 0 8px}
.jk-two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:72px 0}
.jk-copy h3{font-size:clamp(22px,2.4vw,30px);margin:0 0 14px}
.jk-copy p{color:var(--mute);font-size:18px}
.jk-plan svg{width:100%;height:auto;display:block;border:1px solid var(--line)}
.jk-chat .mk{margin:0 auto;max-width:380px}
.jk-modules{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.jk-modules article{padding:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(232,168,83,.05),transparent)}
.jk-modules h3{display:flex;gap:12px;align-items:center;font-family:var(--sans);font-size:19px;font-weight:700;margin:0 0 14px;line-height:1.3}
.jk-modules h3 .ic{color:var(--gold-2);font-size:24px}
.jk-modules ul{margin:0;padding-left:18px;color:var(--mute)}
.jk-modules li{margin:9px 0;line-height:1.5}
.jk-numbers{margin-top:56px}
.jk-numbers ul{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.jk-numbers li{flex:1 1 150px;padding:24px 20px;display:flex;flex-direction:column;gap:6px}
.jk-numbers li+li{border-left:1px solid var(--line)}
.jk-numbers b{font-family:var(--serif);font-size:clamp(32px,4vw,52px);line-height:1;color:var(--gold-2)}
.jk-numbers span{color:var(--mute);font-size:15px}
.proof-line{margin:20px 0 0;font-size:18px;color:var(--ink)}
.jk-factory,.jk-soon,.jk-build{margin-top:56px}
.jk-factory h3,.jk-soon h3,.jk-build h3{font-family:var(--sans);font-size:clamp(22px,2.2vw,28px);margin:0 0 14px}
.jk-factory p,.jk-build p{font-size:18px;max-width:62ch}
.jk-soon ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.jk-soon li{padding:10px 16px;border:1px dashed var(--line-2);color:var(--mute);font-size:15px}
@media (max-width:1000px){.jk-problems,.jk-modules{grid-template-columns:repeat(2,1fr)}.jk-two{grid-template-columns:1fr;gap:28px}}
@media (max-width:720px){.jk-problems,.jk-modules{grid-template-columns:1fr}.jk-numbers li+li{border-left:0;border-top:1px solid var(--line)}.jk-two{margin:48px 0}.flow-grid{--s:calc((100vw - 48px)/2)}}

/* ---------- our work ---------- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.work-card{overflow:hidden;display:flex;flex-direction:column}
.work-card[hidden]{display:none}
.work-card .art{height:210px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#120c07}
.work-card .mkwrap{position:absolute;left:22px;top:16px;width:440px;transform:scale(.56);transform-origin:top left;pointer-events:none}
.work-card .mk-sample{display:none}
.work-card .body{padding:20px 24px 24px}
.work-card h3{font-family:var(--sans);font-size:19px;font-weight:700;line-height:1.3;margin:0 0 8px}
.work-card p{margin:0;color:var(--mute)}
@media (max-width:1000px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.work-grid{grid-template-columns:1fr}.work-card .art{height:190px}}

/* ---------- why, process, faq, footer ---------- */
.promises b{font-size:18px}
.promises span{font-size:16px;line-height:1.5}
@media (max-width:1100px){.promises{grid-template-columns:repeat(2,1fr)}.promises article{padding:20px 20px 20px 0;border-bottom:1px solid var(--line)}.promises article+article{border-left:0;padding-left:0}}
.steps li b{font-family:var(--sans);font-size:18px;font-weight:700}
.steps li span{font-size:16px;line-height:1.5}
.setup li small{font-size:13px}
.setup .fine{font-size:13px}
.setup .est{font-size:15px}
.faq-list{max-width:820px}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;font-weight:700;font-size:18px;line-height:1.4;position:relative;min-height:48px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--gold-2)}
.faq-list details[open] summary::after{content:'\2212'}
.faq-list p{margin:0 0 24px;color:var(--mute)}
.foot-in{font-size:16px;grid-template-columns:1.2fr 1fr 1.2fr}
.foot-meta p{margin:0 0 6px}
.dock strong{font-size:16px}
.d-wa{margin:18px 0 0}
.wa-link{font-size:16px}
.drawer p{font-size:15.5px}
.drawer h4{font-family:var(--sans);font-size:19px;font-weight:700}
.drawer .d-acts .btn{font-size:16px;min-height:48px}
.q-opt small{color:var(--mute);font-size:13px}
@media (max-width:1100px){.foot-in{grid-template-columns:1fr}}

/* ---------- enquiry builder ---------- */
.modal-quote .modal-box.bld{width:min(820px,calc(100vw - 24px));padding:36px 40px 28px}
.b-head h2{font-size:clamp(24px,3vw,34px)}
.b-head>p{color:var(--mute);margin:10px 0 0}
.b-prog{display:flex;align-items:center;gap:14px;margin-top:16px;color:var(--mute);font-size:15px}
.b-dots{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.b-dots li{width:34px;height:6px;background:rgba(255,190,110,.2)}
.b-dots li.on,.b-dots li.done{background:var(--gold-2)}
.b-step{font-family:var(--sans);font-size:20px;font-weight:700;margin:28px 0 16px}
.b-chips{display:flex;flex-wrap:wrap;gap:10px}
.b-chips .q-opt{flex-direction:row;align-items:center;gap:8px;padding:12px 16px;min-height:48px;font-size:16px;font-weight:600}
.b-chips .q-opt .ic{font-size:18px}
.q-opt[aria-pressed="true"]{border-color:var(--gold-2);box-shadow:inset 0 0 0 1px var(--gold-2);background:linear-gradient(180deg,rgba(80,48,18,.6),rgba(20,14,9,.7))}
.q-opt.gold{border-color:var(--gold-3)}
.q-opt:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.b-block{margin:0 0 26px}
.b-block h3{font-family:var(--sans);font-size:17px;font-weight:700;margin:0 0 12px}
.b-group h4{margin:16px 0 8px;font-size:15px;color:var(--gold-2)}
.b-live{display:flex;align-items:center;gap:10px;position:sticky;bottom:-1px;background:#17110a;padding:14px 0;margin:0;font-weight:700;color:var(--gold-2);border-top:1px solid var(--line);max-width:none}
.b-live .ic{font-size:20px}
.b-note{color:var(--mute);margin:0 0 14px}
.b-fields{display:grid;gap:16px;margin-bottom:22px}
.b-fields label{display:block;font-weight:700;font-size:16px}
.b-fields input{display:block;width:100%;margin-top:8px;min-height:48px;padding:12px 14px;font:500 17px var(--sans);color:var(--ink);background:rgba(255,255,255,.04);border:1.5px solid var(--line);border-radius:0}
.b-fields input:focus{outline:none;border-color:var(--gold-2)}
.b-err{color:#ffb4b4;font-weight:700;margin:0 0 12px}
.b-msg{white-space:pre-wrap;font:500 16px/1.6 var(--sans);background:rgba(255,255,255,.04);border:1px solid var(--line);padding:18px;margin:0 0 20px;max-height:44vh;overflow:auto}
.b-actions{display:grid;gap:12px}
.b-foot{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.b-alt{margin:22px 0 0;color:var(--mute);max-width:none}
@media (max-width:720px){.modal-quote .modal-box.bld{padding:56px 18px 22px}.b-foot .btn{flex:1}}

/* QA fixes: tap size, note font, grid line */
.fchip{min-height:48px}
.plat-note{font-family:var(--sans);font-style:normal;font-size:15px}
.setup .more{min-height:48px}
.link{min-height:48px;display:inline-flex;align-items:center}
.setup li button{width:48px;height:48px;margin:-8px -10px -8px 0;display:inline-flex;align-items:center;justify-content:center}
.setup li button{flex:none;min-width:48px}
#navQuote{padding:12px 22px}

/* ===================================================================
   21st.dev components, ported to plain CSS in the gold palette
   =================================================================== */

/* Klyv Shimmer Button (klyv-ui, MIT): a sheen sweeps across, a soft light follows the pointer.
   The sheen runs continuously only on the few main calls to action; elsewhere it sweeps on hover. */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn::before{content:'';position:absolute;top:0;bottom:0;left:0;width:34%;z-index:-1;pointer-events:none;
  background:rgba(255,250,235,.7);filter:blur(6px);transform:translateX(-160%) skewX(-18deg);
  opacity:0;animation:sdSheen 3.2s ease-in-out infinite;animation-play-state:paused;transition:opacity .3s}
.btn-line::before{background:rgba(255,208,138,.34)}
.btn:hover::before,.btn:focus-visible::before,
.hero-doors .btn-gold::before,.final .btn-gold::before,#bGo::before,#dockCta::before{opacity:1;animation-play-state:running}
.btn::after{content:'';position:absolute;left:var(--gx,50%);top:var(--gy,50%);width:150px;height:150px;translate:-50% -50%;
  border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(255,250,230,.6),transparent 70%);
  filter:blur(16px);opacity:var(--go,0);transition:opacity .45s}
.btn-line::after{background:radial-gradient(circle,rgba(255,196,110,.38),transparent 70%)}
@keyframes sdSheen{0%{transform:translateX(-160%) skewX(-18deg)}55%,100%{transform:translateX(420%) skewX(-18deg)}}

/* Glowing Effect (Aceternity UI): a gold light runs along a card's edge toward the pointer. */
@property --ge-start{syntax:'<number>';inherits:true;initial-value:0}
.ge-host{position:relative}
.ge{position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:3;
  opacity:var(--ge-on,0);transition:opacity .35s,--ge-start 1.4s cubic-bezier(.16,1,.3,1);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ge::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:conic-gradient(from 0deg,var(--gold-3),var(--gold-2),#fff3d6,var(--gold),var(--gold-3),var(--gold-2),var(--gold-3));
  -webkit-mask:conic-gradient(from calc((var(--ge-start) - 40) * 1deg),#0000 0deg,#000 40deg,#0000 80deg);
  mask:conic-gradient(from calc((var(--ge-start) - 40) * 1deg),#0000 0deg,#000 40deg,#0000 80deg)}

@media (prefers-reduced-motion:reduce){.btn::before{animation:none!important;opacity:0!important}.ge{display:none}}
@media (hover:none){.btn::after,.ge{display:none}}