:root{
  --bg:#F6F3FB;--surface:#FFFFFF;--ink:#1E1330;--muted:#5E5375;--line:#DDD5EC;--teal:#5B2A86;--teal-2:#2F1157;--teal-ink:#FFFFFF;--tx:#5B2A86;--gold:#FFA6C1;--gold-ink:#1E1330;--nav-link:#3E2A5E;--nav-hover:#1E1330;--h-eyebrow:#68459A;--h-lead:#5A506D;--h-proof:#5A506D;--h-proof-b:#241333;--h-sec:#4B2A73;--h-sec-bd:#8B67B5;--h-sec-bg:rgba(255,255,255,.35);--h-sec-hv:#26163A;--h-sec-hv-bg:rgba(255,255,255,.7);--h-sec-hv-bd:#6D469A;--h-quiet:#4B2A73;--h-quiet-bg:rgba(255,255,255,.2);--h-quiet-hv:#241333;--h-quiet-hv-bg:rgba(255,255,255,.65);
  --head:'Bricolage Grotesque','Trebuchet MS',sans-serif;--body:'Instrument Sans','Segoe UI',Arial,sans-serif;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#150E22;--surface:#1F1533;--ink:#EFE9F8;--muted:#B3A6CC;--line:#33254D;--teal:#B79CF2;--teal-2:#6C4FC9;--teal-ink:#150E22;--tx:#B79CF2;--gold:#FFA6C1;--gold-ink:#1E1330;--nav-link:#FFFFFF;--nav-hover:#FFFFFF;--h-eyebrow:#D5C7EE;--h-lead:#D9CFE8;--h-proof:#CFC2DC;--h-proof-b:#F3EAFA;--h-sec:#F5EDF8;--h-sec-bd:rgba(245,237,248,.75);--h-sec-bg:transparent;--h-sec-hv:#FFFFFF;--h-sec-hv-bg:rgba(255,255,255,.08);--h-sec-hv-bd:#FFFFFF;--h-quiet:#DDD0F0;--h-quiet-bg:transparent;--h-quiet-hv:#FFFFFF;--h-quiet-hv-bg:rgba(255,255,255,.08);}
}
:root[data-theme="dark"]{--bg:#150E22;--surface:#1F1533;--ink:#EFE9F8;--muted:#B3A6CC;--line:#33254D;--teal:#B79CF2;--teal-2:#6C4FC9;--teal-ink:#150E22;--tx:#B79CF2;--gold:#FFA6C1;--gold-ink:#1E1330;--nav-link:#FFFFFF;--nav-hover:#FFFFFF;--h-eyebrow:#D5C7EE;--h-lead:#D9CFE8;--h-proof:#CFC2DC;--h-proof-b:#F3EAFA;--h-sec:#F5EDF8;--h-sec-bd:rgba(245,237,248,.75);--h-sec-bg:transparent;--h-sec-hv:#FFFFFF;--h-sec-hv-bg:rgba(255,255,255,.08);--h-sec-hv-bd:#FFFFFF;--h-quiet:#DDD0F0;--h-quiet-bg:transparent;--h-quiet-hv:#FFFFFF;--h-quiet-hv-bg:rgba(255,255,255,.08);}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--head);line-height:1.1;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,7vw,4.6rem);font-weight:800}
h2{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
.lead{color:var(--muted);max-width:56ch;margin-top:14px}
.btn{display:inline-block;padding:13px 22px;border-radius:10px;font-weight:600;text-decoration:none;border:2px solid transparent;cursor:pointer;font:600 1rem var(--body);transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.btn:hover{transform:translateY(-3px)}
.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-gold:hover{filter:brightness(1.08);box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}
.btn-cta{background:linear-gradient(90deg,#3fd3ff,#8b5cf6);color:#fff;border:none;transition:background .3s ease,filter .25s ease,box-shadow .25s ease,transform .25s ease}
.btn-cta:hover{filter:brightness(1.1);box-shadow:0 14px 30px -12px rgba(139,92,246,.6)}
#svcDiscussBtn.is-active{background:linear-gradient(90deg,var(--teal),var(--gold));color:var(--teal-ink)}
#svcDiscussBtn.is-active:hover{box-shadow:0 14px 30px -12px color-mix(in srgb,var(--gold) 55%,transparent)}
.custom-card{position:relative;overflow:hidden}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
header{position:fixed;top:0;left:0;width:100%;z-index:10;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
main#top{display:block;padding-top:calc(72px + env(safe-area-inset-top,0px))}
nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{font:800 1.25rem var(--head);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo i{width:22px;height:22px;background:var(--teal);border-radius:6px 14px 6px 14px;display:inline-block}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav ul a{text-decoration:none;color:var(--muted);font-weight:500}
nav ul a:hover{color:var(--ink)}
@media(max-width:760px){nav ul{display:none}}
.hero{padding:80px 0 64px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero h1 span{display:block;color:var(--tx)}
.proof{display:flex;gap:10px 28px;flex-wrap:wrap;margin-top:34px;color:var(--muted);font-size:.95rem}
.proof b{color:var(--ink)}
.grid{display:grid;gap:18px;margin-top:34px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px}
.card p{color:var(--muted);margin-top:8px;font-size:.98rem}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tags span{font-size:.8rem;padding:3px 10px;border-radius:99px;background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.band{position:relative;overflow:hidden;color:var(--teal-ink);
  background-color:var(--teal);
  background-image:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.14) 0,transparent 2px),
    radial-gradient(circle at 62% 68%,rgba(255,255,255,.10) 0,transparent 2px),
    linear-gradient(135deg,var(--teal) 0%,var(--teal-2) 100%);
  background-size:26px 26px,26px 26px,100% 100%;
  background-position:0 0,13px 13px,0 0;
}
@media(prefers-reduced-motion:reduce){.band::before,.band::after,.band .sheen{animation:none!important}}
.band::before,.band::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;transform-origin:center}
.band::before{width:440px;height:440px;top:-160px;right:-140px;background:radial-gradient(circle,var(--gold),transparent 70%);opacity:.28;animation:breatheA 7s ease-in-out infinite}
.band::after{width:380px;height:380px;bottom:-180px;left:-110px;background:radial-gradient(circle,#ffffff,transparent 70%);opacity:.1;animation:breatheB 9s ease-in-out infinite 1.5s}
@keyframes breatheA{0%,100%{opacity:.22;transform:scale(1)}50%{opacity:.42;transform:scale(1.15)}}
@keyframes breatheB{0%,100%{opacity:.08;transform:scale(1)}50%{opacity:.2;transform:scale(1.12)}}
.band .sheen{position:absolute;top:-20%;left:-60%;width:45%;height:140%;pointer-events:none;z-index:0;
  background:linear-gradient(75deg,transparent 0%,rgba(255,255,255,.16) 45%,rgba(255,255,255,.02) 60%,transparent 100%);
  animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{0%{left:-60%}45%{left:120%}100%{left:120%}}
.band .wrap{position:relative;z-index:1}
.band .lead{color:inherit;opacity:.85}
.band .card{color:var(--ink)}
.band .card small{color:var(--muted)}
.steps{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:14px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.steps li::before{content:counter(s);width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;font:800 1.1rem var(--head)}
.steps b{display:block;font-family:var(--head);font-size:1.1rem}
.steps span{opacity:.85;font-size:.97rem}
.flow{display:flex;align-items:flex-start;gap:0;margin:44px 0 0;padding:0;list-style:none;counter-reset:f;position:relative}
.flow-step{counter-increment:f;flex:1;position:relative;text-align:center;padding:0 8px;cursor:pointer;opacity:.5;transition:opacity .5s ease}
.flow-step.done{opacity:.82}
.flow-step.active{opacity:1}
.flow-step .fline{position:absolute;top:27px;left:-50%;width:100%;height:3px;background:var(--gold);opacity:.28;z-index:1;border-radius:3px;overflow:hidden}
.flow-step:first-child .fline{display:none}
.flow-step .fline-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),#fff);box-shadow:0 0 10px 2px rgba(255,166,193,.65);transform:scaleX(var(--p,0));transform-origin:left center;transition:transform .12s linear}
.flow-step .dot{position:relative;z-index:2;width:54px;height:54px;margin:0 auto 16px;border-radius:50%;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;font:800 1.25rem var(--head);box-shadow:0 8px 20px -6px rgba(0,0,0,.35);transition:background .35s,color .35s,transform .35s,box-shadow .35s}
.flow-step .dot::before{content:counter(f);transition:color .35s}
.flow-step.active .dot{background:linear-gradient(135deg,var(--teal),var(--gold));color:var(--teal-ink);box-shadow:0 0 0 7px rgba(255,166,193,.28),0 10px 24px -8px rgba(0,0,0,.4);animation:dotPulse .55s ease}
.flow-step:last-child.active .dot{box-shadow:0 0 0 10px rgba(255,166,193,.4),0 12px 28px -8px rgba(0,0,0,.45)}
@keyframes dotPulse{0%{transform:scale(1)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
.flow-step:hover .dot{background:linear-gradient(135deg,var(--teal),var(--gold));color:var(--teal-ink);transform:scale(1.14) rotate(-6deg);box-shadow:0 0 0 8px rgba(255,166,193,.25),0 10px 24px -8px rgba(0,0,0,.4)}
.flow-step b{display:block;font-family:var(--head);font-size:1rem;margin-bottom:6px;transition:transform .25s ease,opacity .35s ease}
.flow-step:hover b{transform:translateY(-3px)}
.flow-step span{opacity:.75;font-size:.88rem;display:block;line-height:1.45;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.flow-step.active span,.flow-step:hover span{opacity:1;transform:translateY(0)}
.flow-particle{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#fff,var(--gold));box-shadow:0 0 14px 4px rgba(255,166,193,.75);top:21px;left:0;transform:translate(-50%,0);transition:left .12s linear;pointer-events:none;z-index:3;opacity:0}
.flow.animating .flow-particle{opacity:1}
.flow.complete{animation:timelineGlow 1.1s ease}
@keyframes timelineGlow{0%{filter:drop-shadow(0 0 0 rgba(255,166,193,0))}45%{filter:drop-shadow(0 0 18px rgba(255,166,193,.6))}100%{filter:drop-shadow(0 0 0 rgba(255,166,193,0))}}
.reveal-up{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
#process.in-view .reveal-up{opacity:1;transform:translateY(0)}
#process .reveal-up.r2{transition-delay:.18s}
@media(max-width:760px){
  .flow{flex-direction:column;gap:26px;margin-top:34px}
  .flow-step{text-align:left;padding:0 0 0 70px;min-height:54px}
  .flow-step .dot{position:absolute;left:0;top:0;margin:0}
  .flow-step .fline{top:-13px;left:26px;width:3px;height:26px}
  .flow-step .fline-fill{transform:scaleY(var(--p,0));transform-origin:top center}
  .flow-particle{left:26px;top:0;transition:top .12s linear}
}

.work{border-style:dashed;text-align:center;padding:44px 20px}
.price{font:800 2.2rem var(--head);margin-top:10px}
.price small{font:500 .9rem var(--body);color:var(--muted)}
.card ul{list-style:none;padding:0;margin:16px 0 22px;display:grid;gap:7px;font-size:.96rem}
.card li::before{content:"✓ ";color:var(--tx);font-weight:700}
.card.pop{border:2px solid var(--gold)}
.badge{display:inline-block;background:var(--gold);color:var(--gold-ink);font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:99px;margin-bottom:10px}
details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-top:12px}
summary{cursor:pointer;font-weight:600}
details p{color:var(--muted);margin-top:10px}
/* ---- FAQ: accordion cards ---- */
.faq-list{display:grid;gap:14px;margin-top:30px}
.faq-item{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.faq-item:has(.faq-q[aria-expanded="true"]){
  border-color:color-mix(in srgb,var(--gold) 55%,var(--teal));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 45%,transparent),0 18px 36px -22px rgba(107,51,163,.45);
}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:none;text-align:left;cursor:pointer;
  padding:18px 20px;font:700 1.02rem var(--head);color:var(--ink);letter-spacing:-.01em;
}
.faq-q:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.faq-icon{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--gold) 16%,var(--surface));border:1px solid var(--line);
  color:var(--tx);transition:transform .35s cubic-bezier(.4,0,.2,1),background .3s ease,border-color .3s ease,color .3s ease;
}
.faq-icon svg{width:15px;height:15px}
.faq-q[aria-expanded="true"] .faq-icon{
  transform:rotate(180deg);
  background:linear-gradient(135deg,var(--teal),var(--gold));border-color:transparent;color:var(--teal-ink);
}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1)}
.faq-a-inner{overflow:hidden;min-height:0}
.faq-a-inner p{color:var(--muted);padding:0 20px 20px;margin:0;line-height:1.6}
.faq-q[aria-expanded="true"] + .faq-a{grid-template-rows:1fr}
@media(prefers-reduced-motion:reduce){
  .faq-item,.faq-icon,.faq-a{transition:none}
}
.contact{display:grid;gap:36px;grid-template-columns:1fr}
@media(min-width:820px){.contact{grid-template-columns:1fr 1.2fr}}
label{display:block;font-weight:600;font-size:.92rem;margin-top:14px}
input,select,textarea{width:100%;margin-top:6px;padding:12px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:400 1rem var(--body)}
textarea{min-height:100px;resize:vertical}
form .btn{margin-top:20px;width:100%}
.direct a{display:block;margin-top:10px;font-weight:600}
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:.9rem}

.hero{position:relative;overflow:hidden;padding:64px 0 56px}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(30px);pointer-events:none}
.hero::before{width:520px;height:520px;right:-140px;top:-140px;background:radial-gradient(circle,var(--gold),transparent 65%);opacity:.3}
.hero::after{width:460px;height:460px;left:-160px;bottom:-200px;background:radial-gradient(circle,var(--teal),transparent 65%);opacity:.22}
.hero-grid{position:relative;z-index:1;display:grid;gap:44px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.15fr .85fr}}
.hl>*{animation:rise .7s both}.hl>:nth-child(2){animation-delay:.12s}.hl>:nth-child(3){animation-delay:.24s}.hl>:nth-child(4){animation-delay:.36s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.mock{position:relative;animation:rise .9s .3s both;margin:16px 10px}
.win{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 34px 60px -24px rgba(165,13,40,.35);animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.dots i:first-child{background:var(--gold)}
.ln{height:10px;border-radius:5px;background:var(--line);margin-top:12px}
.blk{height:120px;border-radius:12px;margin-top:14px;background:linear-gradient(135deg,var(--teal),var(--gold))}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.mini{height:56px;border-radius:9px;background:var(--bg);border:1px solid var(--line)}
.chip{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-weight:600;font-size:.85rem;box-shadow:0 12px 24px -10px rgba(0,0,0,.3)}
.c1{left:-12px;top:40px}.c2{right:-10px;bottom:76px}.c3{left:26px;bottom:-16px}
.marq{overflow:hidden;background:var(--ink);color:var(--bg);padding:15px 0}
.track{display:flex;gap:44px;width:max-content;animation:mq 30s linear infinite}
.track span{font:700 1.05rem var(--head);white-space:nowrap}.track span::after{content:"✦";margin-left:44px;color:var(--gold)}
@keyframes mq{to{transform:translateX(-50%)}}
.ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:14px;background:linear-gradient(135deg,var(--teal),var(--gold))}
.card{transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
.est{display:grid;gap:22px;margin-top:30px}
@media(min-width:840px){.est{grid-template-columns:1.3fr 1fr}}
.est b{display:block;margin-top:18px}.est b:first-child{margin-top:0}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.opt{padding:10px 16px;border-radius:99px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;font:500 .95rem var(--body)}
.opt:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.opt[aria-pressed=true]{background:var(--teal);color:var(--teal-ink);border-color:var(--teal)}
.out{background:var(--teal);color:var(--teal-ink);border-radius:18px;padding:28px;align-self:start}
.out .big{font:800 2.1rem/1.1 var(--head);margin:8px 0 12px}
.out p{opacity:.85;font-size:.93rem;margin-bottom:18px}
.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:20;width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;font-size:1.6rem;text-decoration:none;box-shadow:0 12px 26px -8px rgba(0,0,0,.4)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a,button,summary,select,label[for],.btn,.opt,.wa,.logo,input[type=submit]{cursor:pointer}
input,textarea{cursor:text}
.card:hover,.card.pop:hover{cursor:default}

.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;opacity:0;transition:opacity .2s}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;mix-blend-mode:difference}
.cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:2px solid var(--gold);transition:opacity .2s,width .2s,height .2s,margin .2s,background .2s}
.cur-ring.hov{width:64px;height:64px;margin:-32px 0 0 -32px;background:color-mix(in srgb,var(--gold) 28%,transparent)}
.cur-ring.dn{width:28px;height:28px;margin:-14px 0 0 -14px}
html.cc,html.cc *{cursor:none!important}
html.cc input,html.cc textarea{cursor:text!important}
.hero h1{font-size:clamp(2rem,5.6vw,3.7rem);line-height:1.08}

.talk{display:grid;gap:44px;align-items:start}
@media(min-width:900px){.talk{grid-template-columns:1fr 1.25fr}}
.ci{display:flex;gap:14px;align-items:center;margin-top:16px}
.ci i{flex:none;width:48px;height:48px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center}
.ci svg,.btn svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ci small{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ci b{font-weight:600;overflow-wrap:anywhere}.ci a{text-decoration:none}
.tb{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.map{display:block;position:relative;height:200px;border-radius:16px;border:1px solid var(--line);margin-top:26px;overflow:hidden;text-decoration:none;background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/40px 40px,var(--surface)}
.map em{position:absolute;inset:0;display:grid;place-items:center;font-size:2.4rem;font-style:normal}
.map span{position:absolute;left:12px;top:12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-weight:600;font-size:.88rem;color:var(--tx)}
.frm{padding:28px}
.r2{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin-top:16px}.r2:first-child{margin-top:0}
@media(max-width:560px){.r2{grid-template-columns:1fr}}
.frm label{margin-top:0;font-size:.85rem;color:var(--muted)}
.frm .req{color:var(--gold)}
.frm .full{margin-top:16px}
.frm .btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px}
.frm .btn svg{stroke:var(--gold-ink)}
.up{position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:20;width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.2rem;display:none;place-items:center;text-decoration:none}
.up.show{display:grid}

.wrap{max-width:1360px;padding:0 clamp(20px,4vw,64px)}
@media(min-width:1000px){
  body{font-size:18px}
  section{padding:104px 0}
  .hero{padding:96px 0 88px;min-height:calc(100vh - 64px);display:flex;align-items:center}
  .hero .wrap{width:100%}
  .hero h1{font-size:clamp(3rem,4.6vw,5rem)}
  .hero .lead{font-size:1.15rem;max-width:60ch}
  .grid{grid-template-columns:repeat(3,1fr);gap:26px}
  .card{padding:30px}
  nav{height:72px}
  html{scroll-padding-top:calc(80px + env(safe-area-inset-top,0px))}
  .est,.talk{gap:64px}
}
@media(min-width:1500px){body{font-size:19px}.wrap{max-width:1480px}}

.wrap{max-width:none;padding:0 clamp(20px,5vw,110px)}
@media(min-width:1000px){.hero h1{font-size:clamp(3rem,5vw,6rem)}.hero .lead{max-width:64ch}.card{padding:34px}}
@media(min-width:1500px){body{font-size:20px}.grid{gap:34px}}

.mock{width:100%;max-width:440px;justify-self:center}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.win{box-shadow:0 34px 60px -24px rgba(91,42,134,.45)}
.ci svg{stroke:var(--tx)}
.frm .req{color:var(--tx)}
.cur-ring{border-color:var(--tx)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.opt:focus-visible{outline-color:var(--tx)}
.logo svg{height:42px;width:auto;display:block}
.logo .ld{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .ll{display:none}:root:not([data-theme="light"]) .logo .ld{display:block}}
:root[data-theme="dark"] .logo .ll{display:none}:root[data-theme="dark"] .logo .ld{display:block}
.nr{display:flex;align-items:center;gap:10px}
.tt{width:42px;height:42px;flex:none;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center}
.tt svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tt .sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tt .moon{display:none}:root:not([data-theme="light"]) .tt .sun{display:block}:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"] .tt .moon{display:none}:root[data-theme="dark"] .tt .sun{display:block}:root[data-theme="dark"]{color-scheme:dark}:root[data-theme="light"]{color-scheme:light}
@media(max-width:480px){.logo svg{height:32px}.nr{gap:8px}.nr .btn{padding:10px 13px;font-size:.9rem}.tt{width:38px;height:38px}}
.tt:focus-visible{outline:3px solid var(--tx);outline-offset:2px}
#splash{position:fixed;inset:0;z-index:9990;background:var(--bg);display:grid;place-items:center;animation:sOut .45s ease .9s forwards}
.sbox{width:min(560px,84vw);animation:logoIn .7s cubic-bezier(.2,.8,.2,1) both}
.sbox svg{width:100%;height:auto;display:block}
.sbox .sd{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sbox .sl{display:none}:root:not([data-theme="light"]) .sbox .sd{display:block}}
:root[data-theme="dark"] .sbox .sl{display:none}:root[data-theme="dark"] .sbox .sd{display:block}
.sbar{height:4px;border-radius:4px;background:var(--line);margin:28px auto 0;width:60%;overflow:hidden}
.sbar i{display:block;height:100%;width:0;background:var(--gold);border-radius:4px;animation:fill .8s ease-out .05s forwards}
@keyframes fill{to{width:100%}}
@keyframes sOut{to{opacity:0;visibility:hidden}}
@keyframes logoIn{from{opacity:0;transform:scale(.86) translateY(12px)}}
html.sp{overflow:hidden}
.hl>*{animation-delay:1.1s}.hl>:nth-child(2){animation-delay:1.18s}.hl>:nth-child(3){animation-delay:1.26s}.hl>:nth-child(4){animation-delay:1.34s}.mock{animation-delay:1.3s}
@media(prefers-reduced-motion:reduce){#splash{display:none}}
.wa-tip{position:fixed;right:84px;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:10px 16px;font-weight:600;font-size:.92rem;text-decoration:none;box-shadow:0 10px 24px -10px rgba(0,0,0,.35);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.wa-tip span{display:inline-block;color:var(--tx);font-size:1.1rem}
.wa:hover+.wa-tip,.wa:focus-visible+.wa-tip,.wa-tip:hover,.wa-tip:focus-visible{opacity:1;transform:translateY(0);pointer-events:auto}
@media(prefers-reduced-motion:reduce){.wa-tip{transition:none}}

/* CodexCrafts polish */
.hamb{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--surface);align-items:center;justify-content:center;flex-direction:column;gap:4px}
.hamb span{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.mobile-menu{display:none}
@media(max-width:760px){
  .hamb{display:flex}
  nav ul{display:none}
  .mobile-menu{display:grid;gap:4px;padding:0 0 16px}
  .mobile-menu a{padding:11px 12px;text-decoration:none;color:var(--muted);font-weight:600;border-radius:10px}
  .mobile-menu a:hover{background:var(--surface);color:var(--ink)}
  .mobile-menu .btn{margin-top:6px;text-align:center;color:var(--gold-ink)}
  .mobile-menu[aria-hidden="true"]{display:none}
}
.hamb.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamb.open span:nth-child(2){opacity:0}
.hamb.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.work-card{padding:0;overflow:hidden;text-align:left}
.work-thumb{height:190px;overflow:hidden;background:var(--surface2,#1a1430)}
.work-thumb img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.work-card:hover .work-thumb img{transform:scale(1.045)}
@media(prefers-reduced-motion:reduce){.work-thumb img{transition:none}.work-card:hover .work-thumb img{transform:none}}
.work-body{padding:24px}
.work-body .eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--tx);font-weight:700}
.work-body h3{margin-top:7px}
.work-body p{margin-top:8px}
.work-body .tags{margin-bottom:16px}
.trust-grid{display:grid;gap:18px;margin-top:34px;grid-template-columns:repeat(3,1fr)}
.trust-card{padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.trust-card b{display:block;font:700 1.1rem var(--head);margin-bottom:7px}
.trust-card p{color:var(--muted);font-size:.96rem}
.quote-card{position:relative}
.quote-card::before{content:"“";font:800 4rem/1 var(--head);color:var(--gold);position:absolute;right:18px;top:12px}
.founder{display:flex;gap:18px;align-items:center}
.avatar{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),var(--gold));color:var(--teal-ink);font:800 1.3rem var(--head);flex:none}
.founder small{display:block;color:var(--muted);margin-top:3px}
.founder a{display:inline-block;margin-top:8px;color:var(--tx);font-weight:600;text-decoration:none}

.feedback-sub{color:var(--muted);margin-top:8px;font-size:.98rem}
.feedback-grid{column-count:3;column-gap:18px;margin-top:34px}
@media(max-width:900px){.feedback-grid{column-count:2}}
@media(max-width:620px){.feedback-grid{column-count:1}}
.review-card{break-inside:avoid;display:block;width:100%;margin:0 0 18px;position:relative;border-radius:16px;padding:20px 20px 16px;
  background:color-mix(in srgb,var(--surface) 62%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.review-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--gold) 55%,var(--line));box-shadow:0 18px 36px -20px rgba(107,51,163,.45),0 0 0 1px color-mix(in srgb,var(--teal) 25%,transparent)}
.review-head{display:flex;align-items:center;gap:12px}
.review-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),var(--gold));color:var(--teal-ink);font:800 .95rem var(--head);flex:none;transition:transform .28s ease}
.review-card:hover .review-avatar{transform:scale(1.08) rotate(-3deg)}
.review-who{min-width:0}
.review-name{display:flex;align-items:center;gap:5px;font-weight:700;font-size:.96rem;line-height:1.25}
.review-name .verified{flex:none;width:13px;height:13px;fill:var(--teal)}
.review-role{color:var(--muted);font-size:.82rem;margin-top:1px}
.review-stars{display:flex;gap:2px;margin-top:11px}
.review-stars svg{width:13px;height:13px;fill:var(--gold)}
.review-text{margin-top:9px;font-size:.94rem;line-height:1.55;color:var(--ink)}
.review-meta{display:flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);color:var(--muted);font-size:.78rem}
.review-meta svg{width:12px;height:12px;fill:none;stroke:var(--muted);stroke-width:2;flex:none}
@media(prefers-reduced-motion:reduce){.review-card,.review-avatar{transition:none}}
@media(max-width:820px){.trust-grid{grid-template-columns:1fr}.work-thumb{height:160px}}
@media(min-width:900px){.work-thumb{height:210px}}

/* First-screen UX refinement */
nav ul{
  gap:clamp(24px,2.6vw,42px);
}
nav ul a{
  color:var(--nav-link);
  font-weight:600;
  position:relative;
  padding:8px 2px;
  transition:color .2s ease, transform .2s ease;
}
nav ul a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
}
nav ul a:hover{
  color:var(--nav-hover);
  transform:translateY(-1px);
}
nav ul a:hover::after{transform:scaleX(1)}

.hero{
  padding-top:72px;
  padding-bottom:72px;
}
.hero-grid{
  gap:clamp(52px,6vw,96px);
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  color:var(--h-eyebrow);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.14em;
}
.hero-eyebrow::before{
  content:"";
  width:24px;
  height:2px;
  border-radius:2px;
  background:var(--gold);
}
.hero h1{
  font-size:clamp(2.65rem,4.25vw,4.7rem)!important;
  line-height:1.04;
  max-width:850px;
}
.hero .lead{
  color:var(--h-lead);
  margin-top:22px;
  max-width:620px;
  font-size:1.08rem;
  line-height:1.65;
}
.hero .cta{
  gap:14px;
  margin-top:28px;
  align-items:center;
}
.hero-primary{
  min-width:154px;
  box-shadow:0 12px 28px -14px rgba(255,166,193,.8);
}
.hero-primary:hover{
  box-shadow:0 18px 38px -12px rgba(255,166,193,1);
}
/* Hero CTA + benefit lines: colours come from theme tokens, always opaque, always above decoration */
.hero .cta,.hero .proof{position:relative;z-index:5;opacity:1}
.hero-primary,.hero-primary:visited,.hero-primary:focus,.hero-primary:active{
  color:var(--gold-ink);
  opacity:1;
}
.hero-secondary,.hero-secondary:visited{
  border-color:var(--h-sec-bd);
  color:var(--h-sec);
  background:var(--h-sec-bg);
  opacity:1;
}
.hero-secondary:hover,.hero-secondary:focus,.hero-secondary:active{
  color:var(--h-sec-hv);
  background:var(--h-sec-hv-bg);
  border-color:var(--h-sec-hv-bd);
}
.btn-quiet,.btn-quiet:visited{
  border:0;
  color:var(--h-quiet);
  background:var(--h-quiet-bg);
  padding-left:8px;
  padding-right:8px;
  opacity:1;
}
.btn-quiet:hover,.btn-quiet:focus,.btn-quiet:active{
  color:var(--h-quiet-hv);
  background:var(--h-quiet-hv-bg);
}
.proof{
  gap:12px 34px;
  margin-top:34px;
  color:var(--h-proof);
}
.proof span b{color:var(--h-proof-b)}
.proof span{
  display:flex;
  align-items:baseline;
  gap:4px;
}
.proof small{
  color:var(--h-proof);
  opacity:1;
  font-size:.88rem;
}
.agency-visual{
  max-width:560px;
  min-height:410px;
  margin:0 auto;
  display:grid;
  place-items:center;
}
.laptop{
  position:relative;
  width:min(470px,88%);
  transform:translateX(-8px);
  filter:drop-shadow(0 28px 30px rgba(0,0,0,.25));
}
.laptop-screen{
  position:relative;
  aspect-ratio:16/10;
  padding:12px;
  border:1px solid #49346A;
  border-radius:18px 18px 10px 10px;
  background:#211735;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.screen-top{
  height:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#AFA0C8;
  font-size:.62rem;
  font-weight:700;
  padding:0 4px;
}
.screen-top .dots{gap:5px}
.screen-top .dots i{width:7px;height:7px}
.screen-body{
  height:calc(100% - 24px);
  border-radius:11px;
  padding:18px;
  background:linear-gradient(135deg,#30204B,#1A122A);
  border:1px solid #3A2A52;
}
.screen-copy{
  display:grid;
  gap:7px;
  width:45%;
}
.screen-copy i{
  display:block;
  height:7px;
  border-radius:5px;
  background:#9C7DD2;
}
.screen-copy i:nth-child(2){width:72%;background:#5F497F}
.screen-copy i:nth-child(3){width:54%;background:#4B3867}
.screen-hero{
  margin-top:16px;
  height:84px;
  border-radius:12px;
  background:linear-gradient(135deg,#6F3DB2,#FFA6C1);
  opacity:.92;
}
.screen-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:10px;
}
.screen-grid i{
  height:38px;
  border-radius:8px;
  background:#241937;
  border:1px solid #493663;
}
.laptop-base{
  width:108%;
  height:12px;
  margin:-1px auto 0;
  border-radius:0 0 14px 14px;
  background:linear-gradient(90deg,#3A2853,#8C6EB6,#3A2853);
  box-shadow:0 8px 14px rgba(0,0,0,.25);
}
.phone{
  position:absolute;
  right:4%;
  bottom:28px;
  width:116px;
  height:236px;
  padding:8px;
  border:2px solid #6C518F;
  border-radius:24px;
  background:#171022;
  box-shadow:0 24px 40px -16px rgba(0,0,0,.55);
  transform:rotate(5deg);
}
.phone-notch{
  width:38px;
  height:6px;
  border-radius:0 0 7px 7px;
  background:#0C0812;
  margin:0 auto 8px;
}
.phone-screen{
  height:calc(100% - 14px);
  padding:10px;
  border-radius:17px;
  background:linear-gradient(180deg,#30204A,#171022);
}
.phone-head{
  width:55%;
  height:8px;
  border-radius:6px;
  background:#D2BFEF;
}
.phone-card{
  height:66px;
  margin-top:12px;
  border-radius:10px;
  background:linear-gradient(135deg,#8D58CF,#FFA6C1);
}
.phone-card.small{
  height:36px;
  margin-top:8px;
  background:#2D2140;
  border:1px solid #49365F;
}
.phone-nav{
  display:flex;
  justify-content:space-around;
  margin-top:12px;
}
.phone-nav i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#8F75B7;
}
.phone-nav i:first-child{background:var(--gold)}
.service-chip{
  position:absolute;
  padding:9px 13px;
  border:1px solid #4D3969;
  border-radius:999px;
  background:rgba(28,19,43,.94);
  color:#F0EAF8;
  font-size:.75rem;
  font-weight:700;
  box-shadow:0 12px 25px -12px rgba(0,0,0,.65);
  backdrop-filter:blur(8px);
  white-space:nowrap;
}
.chip-web{left:1%;top:58px}
.chip-app{right:-2%;top:110px}
.chip-software{left:5%;bottom:30px}
.chip-ai{right:8%;bottom:82px}
@media(max-width:899px){
  .agency-visual{min-height:360px;margin-top:18px}
}
@media(max-width:600px){
  .hero{padding-top:54px;padding-bottom:58px}
  .hero-eyebrow{font-size:.68rem}
  .hero h1{font-size:clamp(2.35rem,10.5vw,3.4rem)!important}
  .hero .lead{font-size:1rem}
  .hero .cta{align-items:stretch}
  .hero .cta .btn{width:100%;text-align:center}
  .btn-quiet{border:1px solid var(--line);padding-left:16px;padding-right:16px}
  .proof{display:grid;grid-template-columns:1fr;gap:12px}
  .agency-visual{min-height:315px}
  .laptop{width:86%;transform:translateX(-4px)}
  .phone{width:88px;height:182px;right:2%;bottom:22px;border-radius:19px}
  .phone-screen{border-radius:13px;padding:7px}
  .chip-app{right:-1%;top:76px}
  .chip-ai{right:0;bottom:66px}
  .chip-web{left:-1%;top:36px}
  .chip-software{left:0;bottom:22px}
  .service-chip{font-size:.66rem;padding:7px 9px}
}

/* Hostinger-inspired multi-column footer, adapted to CodexCrafts */
.site-footer{
  margin-top:0;
  padding:72px 0 0;
  background:#F7F6FA;
  color:#241833;
  border-top:1px solid var(--line);
}
.site-footer .wrap{padding-top:0}
.footer-top{
  display:grid;
  grid-template-columns:1.45fr repeat(4,1fr);
  gap:42px;
  padding-bottom:58px;
}
.footer-brand{max-width:310px}
.footer-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#241833;
  font:800 1.35rem var(--head);
}
.footer-logo span span{color:#6B33A3}
.footer-logo-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px 16px 10px 16px;
  color:#fff;
  background:linear-gradient(135deg,#6B33A3,#3A1462);
  font:800 1rem var(--body);
}
.footer-brand p{
  margin-top:18px;
  color:#665B75;
  font-size:.94rem;
  line-height:1.65;
}
.footer-social{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px;
}
.footer-social a{
  text-decoration:none;
  color:#5B2A86;
  border:1px solid #D9D0E7;
  background:#fff;
  border-radius:999px;
  padding:7px 12px;
  font-size:.8rem;
  font-weight:700;
  transition:.2s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.footer-social a i{font-size:1.15em;line-height:1}
.footer-social a svg{height:1.15em;width:1.15em;display:block}
.icon-row{
  display:inline-flex;
  flex-wrap:nowrap;
  gap:10px;
}
.footer-social a.ig,
.footer-social a.fb{
  padding:0;
  width:40px;
  height:40px;
  justify-content:center;
  font-size:1.05rem;
  flex:none;
}
.footer-social a:hover{
  border-color:#FFA6C1;
  transform:translateY(-2px);
}
.footer-social a.ig{
  background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF);
  color:#fff;
  border-color:transparent;
}
.footer-social a.ig:hover{
  filter:brightness(1.08);
  border-color:transparent;
}
.footer-social a.fb{
  background:#1877F2;
  color:#fff;
  border-color:transparent;
}
.footer-social a.fb:hover{
  filter:brightness(1.1);
  border-color:transparent;
}

.footer-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.footer-col h3{
  color:#17111F;
  font:700 1rem var(--body);
  letter-spacing:0;
  margin:0 0 18px;
}
.footer-col a,
.footer-col span{
  color:#51485F;
  text-decoration:none;
  font-size:.9rem;
  line-height:1.5;
  margin-bottom:11px;
  transition:color .18s ease, transform .18s ease;
}
.footer-col a:hover{
  color:#6B33A3;
  transform:translateX(2px);
}
.footer-contact a:first-of-type{
  color:#2B2037;
  font-weight:700;
}
.footer-contact span{
  color:#766B82;
  margin-bottom:4px;
}
.footer-cta{
  margin-top:9px;
  padding:10px 14px;
  border-radius:9px;
  background:#FFA6C1;
  color:#1E1330!important;
  font-weight:700;
}
.footer-cta span{margin:0;color:inherit}
.footer-bottom{
  min-height:68px;
  border-top:1px solid #DDD5E5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#756A80;
  font-size:.82rem;
}
.footer-bottom a{
  color:#5B2A86;
  text-decoration:none;
  font-weight:700;
}
@media(max-width:1050px){
  .footer-top{
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:34px 28px;
  }
  .footer-brand{grid-column:1 / -1;max-width:620px}
}
@media(max-width:760px){
  .site-footer{padding:54px 0 0}
  .footer-top{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:34px 26px;
    padding-bottom:38px;
  }
  .footer-brand{grid-column:1 / -1;max-width:none}
  .footer-col h3{margin-bottom:14px}
  .footer-col a,.footer-col span{font-size:.88rem;margin-bottom:9px}
  .footer-bottom{
    min-height:86px;
    padding:18px 0;
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
}
@media(max-width:480px){
  .site-footer{padding-top:44px}
  .footer-top{
    grid-template-columns:1fr 1fr;
    gap:30px 18px;
  }
  .footer-brand{grid-column:1 / -1}
  .footer-logo{font-size:1.18rem}
  .footer-logo-mark{width:34px;height:34px;font-size:.9rem}
  .footer-brand p{font-size:.88rem;margin-top:13px}
  .footer-social{margin-top:16px}
  .footer-social a{font-size:.74rem;padding:6px 10px}
  .footer-col h3{font-size:.9rem;margin-bottom:12px}
  .footer-col a,.footer-col span{font-size:.78rem;line-height:1.45}
  .footer-cta{padding:9px 10px}
  .footer-bottom{font-size:.76rem}
}
/* General small-screen safety: no accidental horizontal overflow */
html,body{overflow-x:hidden}
img,svg,canvas,video{max-width:100%;height:auto}
button,.btn{max-width:100%}
input,select,textarea{min-width:0}
@media(max-width:760px){
  .wrap{padding-left:18px;padding-right:18px}
  section{padding:64px 0}
  .hero{min-height:auto!important}
  .hero-grid{gap:42px}
  .grid{grid-template-columns:1fr!important}
  .card{padding:22px}
  .steps li{grid-template-columns:38px 1fr;gap:11px}
  .steps li::before{width:38px;height:38px;font-size:1rem}
  .est,.talk,.contact{grid-template-columns:1fr!important}
  .price{font-size:2rem}
  .r2{grid-template-columns:1fr!important}
  .frm{padding:20px}
  .map{height:170px}
  .wa-tip{right:74px;max-width:calc(100vw - 140px);font-size:.78rem;padding:9px 11px}
  .wa{right:14px;width:52px;height:52px}
  .up{right:14px}
}
@media(max-width:380px){
  .wrap{padding-left:15px;padding-right:15px}
  nav{gap:8px}
  .nr .btn{padding:9px 10px;font-size:.82rem}
  .tt{width:36px;height:36px}
  .hero h1{font-size:2.15rem!important}
  .hero .cta .btn{font-size:.92rem;padding:12px 15px}
  .service-chip{white-space:normal;max-width:145px;text-align:center}
  .wa-tip{display:none}
}

/* Footer follows the active theme */
footer{
  background:var(--bg);
  color:var(--muted);
  border-top:1px solid var(--line);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
:root:not([data-theme="dark"]) footer{
  background:#F6F3FB;
  color:#241833;
}
footer a{color:inherit;transition:color .2s ease}
:root:not([data-theme="dark"]) footer a:hover{
  color:#5B2A86;
}
/* Footer dark colours: manual dark theme, or system dark when no theme was chosen */
:root[data-theme="dark"] footer{
  background:#1F1533;
  color:#C9BEE0;
}
:root[data-theme="dark"] footer a:hover{
  color:#FFA6C1;
}
:root[data-theme="dark"] .footer-logo{color:#EFE9F8}
:root[data-theme="dark"] .footer-logo span span{color:#C9A6F2}
:root[data-theme="dark"] .footer-brand p{color:#C9BEE0}
:root[data-theme="dark"] .footer-social a{color:#E7D9FF;background:#2A1F45;border-color:#413063}
:root[data-theme="dark"] .footer-social a.ig{background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF);color:#fff;border-color:transparent}
:root[data-theme="dark"] .footer-social a.fb{background:#1877F2;color:#fff;border-color:transparent}
:root[data-theme="dark"] .footer-col h3{color:#F3EEFB}
:root[data-theme="dark"] .footer-col a,
:root[data-theme="dark"] .footer-col span{color:#C9BEE0}
:root[data-theme="dark"] .footer-col a:hover{color:#FFA6C1}
:root[data-theme="dark"] .footer-contact a:first-of-type{color:#F3EEFB}
:root[data-theme="dark"] .footer-contact span{color:#B3A6CC}
:root[data-theme="dark"] .footer-bottom{color:#B3A6CC;border-top-color:#33254D}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) footer{
  background:#1F1533;
  color:#C9BEE0;
}
  :root:not([data-theme="light"]) footer a:hover{
  color:#FFA6C1;
}
  :root:not([data-theme="light"]) .footer-logo{color:#EFE9F8}
  :root:not([data-theme="light"]) .footer-logo span span{color:#C9A6F2}
  :root:not([data-theme="light"]) .footer-brand p{color:#C9BEE0}
  :root:not([data-theme="light"]) .footer-social a{color:#E7D9FF;background:#2A1F45;border-color:#413063}
  :root:not([data-theme="light"]) .footer-social a.ig{background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF);color:#fff;border-color:transparent}
  :root:not([data-theme="light"]) .footer-social a.fb{background:#1877F2;color:#fff;border-color:transparent}
  :root:not([data-theme="light"]) .footer-col h3{color:#F3EEFB}
  :root:not([data-theme="light"]) .footer-col a,
  :root:not([data-theme="light"]) .footer-col span{color:#C9BEE0}
  :root:not([data-theme="light"]) .footer-col a:hover{color:#FFA6C1}
  :root:not([data-theme="light"]) .footer-contact a:first-of-type{color:#F3EEFB}
  :root:not([data-theme="light"]) .footer-contact span{color:#B3A6CC}
  :root:not([data-theme="light"]) .footer-bottom{color:#B3A6CC;border-top-color:#33254D}
}
footer .footer-title,
footer h3,
footer h4{
  color:var(--ink);
}

/* ============================================================
   Project Builder — Estimate section
   Uses the site's own background/surface/ink tokens (so it follows
   the existing light/dark toggle) with a fixed purple→pink accent
   gradient for interactive fills and CTAs.
   ============================================================ */
#estimate{
  --pb-bg:var(--bg);
  --pb-bg-2:var(--surface);
  --pb-panel:var(--surface);
  --pb-panel-strong:var(--surface);
  --pb-line:var(--line);
  --pb-line-soft:var(--line);
  --pb-ink:var(--ink);
  --pb-muted:var(--muted);
  --pb-accent:var(--tx);
  --pb-purple:#8B5CF6;
  --pb-purple-2:#6D28D9;
  --pb-pink:#FF8FD1;
  --pb-grad:linear-gradient(120deg,var(--pb-purple),var(--pb-pink));
  position:relative;
  color:var(--pb-ink);
  padding:104px 0 96px;
}
#estimate .wrap{position:relative;z-index:2}

.pb-head{max-width:640px;margin:0 auto;text-align:center}
.pb-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font:700 .78rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--pb-accent);padding:7px 14px;border:1px solid rgba(255,143,209,.35);
  border-radius:99px;background:rgba(255,143,209,.08);
}
.pb-head h2{margin-top:20px;font-size:clamp(2rem,5vw,2.9rem);color:var(--pb-ink)}
.pb-head h2 em{
  font-style:normal;background:var(--pb-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pb-sub{color:var(--pb-muted);margin-top:14px;font-size:1.02rem}

.pb-shell{max-width:900px;margin:52px auto 0}

/* progress rail */
.pb-progress{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:48px}
.pb-progress-track{position:absolute;top:19px;left:12.5%;right:12.5%;height:2px;background:var(--pb-line);z-index:0}
.pb-progress-fill{display:block;height:100%;width:0%;background:var(--pb-grad);transition:width .5s cubic-bezier(.16,1,.3,1)}
.pb-pstep{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:none;color:var(--pb-muted);cursor:pointer;font-family:var(--body);padding:4px;
}
.pb-pstep:disabled{cursor:default}
.pb-pnum{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font:800 .85rem var(--head);background:var(--pb-bg-2);border:1.5px solid var(--pb-line);color:var(--pb-muted);
  transition:all .35s cubic-bezier(.16,1,.3,1);
}
.pb-plabel{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pb-pstep[aria-current="step"] .pb-pnum{
  background:var(--pb-grad);border-color:transparent;color:#0c0616;
  box-shadow:0 0 0 5px rgba(139,92,246,.18),0 6px 22px -6px rgba(139,92,246,.7);
  transform:scale(1.08);
}
.pb-pstep[aria-current="step"] .pb-plabel{color:var(--pb-ink)}
.pb-pstep.is-done .pb-pnum{background:rgba(139,92,246,.16);border-color:var(--pb-purple);color:var(--pb-accent)}
.pb-pstep.is-done .pb-plabel{color:var(--pb-muted)}
.pb-pstep:not(:disabled):hover .pb-pnum{border-color:var(--pb-pink)}
.pb-pstep:focus-visible .pb-pnum{outline:3px solid var(--pb-pink);outline-offset:2px}

/* stage / panels */
.pb-stage{position:relative}
.pb-panel{
  background:var(--pb-panel);border:1px solid var(--pb-line);border-radius:26px;
  padding:clamp(24px,4vw,44px);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  animation:pbPanelIn .55s cubic-bezier(.16,1,.3,1);
}
@keyframes pbPanelIn{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
.pb-qtitle{font-size:clamp(1.25rem,3vw,1.6rem);margin-bottom:22px}

/* step 1 — tiles */
.pb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.pb-tile{
  position:relative;text-align:left;overflow:hidden;cursor:pointer;
  background:var(--pb-bg-2);border:1.5px solid var(--pb-line);border-radius:18px;
  padding:22px 18px;color:var(--pb-ink);font-family:var(--body);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.pb-tile-glow{position:absolute;inset:-1px;background:var(--pb-grad);opacity:0;transition:opacity .35s ease;z-index:0;border-radius:inherit}
.pb-tile > *{position:relative;z-index:1}
.pb-tile-icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--pb-bg);border:1px solid var(--pb-line);color:var(--pb-accent);
  transition:all .3s ease;
}
.pb-tile-icon svg{width:22px;height:22px}
.pb-tile-name{font:800 1.02rem var(--head);letter-spacing:-.01em}
.pb-tile-desc{color:var(--pb-muted);font-size:.86rem;line-height:1.4}
.pb-tile-check{position:absolute;top:16px;right:16px;width:22px;height:22px;color:#0c0616;opacity:0;transform:scale(.5);transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:1}
.pb-tile-check svg{width:100%;height:100%;background:var(--pb-grad);border-radius:50%;padding:3px}
.pb-tile:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.5);box-shadow:0 16px 34px -18px rgba(139,92,246,.55)}
.pb-tile[aria-checked="true"]{border-color:transparent;background:linear-gradient(var(--pb-bg-2),var(--pb-bg-2)) padding-box,var(--pb-grad) border-box;box-shadow:0 18px 40px -16px rgba(139,92,246,.55)}
.pb-tile[aria-checked="true"] .pb-tile-icon{background:var(--pb-grad);color:#0c0616;border-color:transparent}
.pb-tile[aria-checked="true"] .pb-tile-check{opacity:1;transform:scale(1)}
.pb-tile:focus-visible{outline:3px solid var(--pb-pink);outline-offset:3px}

/* step 2 — scale */
.pb-scale{position:relative;padding:8px 6px}
.pb-scale-track{position:absolute;top:33px;left:8%;right:8%;height:3px;background:var(--pb-line);border-radius:99px}
.pb-scale-fill{display:block;height:100%;width:0%;background:var(--pb-grad);border-radius:99px;transition:width .5s cubic-bezier(.16,1,.3,1)}
.pb-scale-nodes{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pb-scale-node{
  background:var(--pb-bg-2);border:1.5px solid var(--pb-line);border-radius:18px;cursor:pointer;
  padding:26px 14px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--pb-ink);font-family:var(--body);
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.pb-scale-node i{
  width:20px;height:20px;border-radius:50%;background:var(--pb-bg-2);border:2px solid var(--pb-line);display:block;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.pb-scale-node b{font:800 1.05rem var(--head)}
.pb-scale-node small{color:var(--pb-muted);font-size:.82rem;text-align:center}
.pb-scale-node:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.5)}
.pb-scale-node[aria-checked="true"]{border-color:transparent;background:linear-gradient(var(--pb-bg-2),var(--pb-bg-2)) padding-box,var(--pb-grad) border-box;box-shadow:0 16px 34px -16px rgba(139,92,246,.5)}
.pb-scale-node[aria-checked="true"] i{background:var(--pb-grad);border-color:transparent;box-shadow:0 0 0 5px rgba(139,92,246,.2);transform:scale(1.15)}
.pb-scale-node:focus-visible{outline:3px solid var(--pb-pink);outline-offset:3px}

/* step 3 — features */
.pb-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.pb-feature{
  position:relative;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  background:var(--pb-bg-2);border:1.5px solid var(--pb-line);border-radius:16px;padding:16px 16px;
  color:var(--pb-ink);font-family:var(--body);transition:all .3s cubic-bezier(.16,1,.3,1);
}
.pb-feature-check{
  flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--pb-line);
  display:grid;place-items:center;transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.pb-feature-check svg{width:13px;height:13px;color:#0c0616;opacity:0;transform:scale(.4);transition:all .25s cubic-bezier(.34,1.56,.64,1)}
.pb-feature-icon{flex:none;width:34px;height:34px;border-radius:10px;background:var(--pb-bg);display:grid;place-items:center;color:var(--pb-accent)}
.pb-feature-icon svg{width:18px;height:18px}
.pb-feature-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.pb-feature-name{font:700 .95rem var(--body)}
.pb-feature-price{color:var(--pb-muted);font-size:.8rem}
.pb-feature:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.5)}
.pb-feature[aria-pressed="true"]{border-color:transparent;background:linear-gradient(var(--pb-bg-2),var(--pb-bg-2)) padding-box,var(--pb-grad) border-box}
.pb-feature[aria-pressed="true"] .pb-feature-check{background:var(--pb-grad);border-color:transparent}
.pb-feature[aria-pressed="true"] .pb-feature-check svg{opacity:1;transform:scale(1)}
.pb-feature:focus-visible{outline:3px solid var(--pb-pink);outline-offset:3px}

/* step 4 — estimate */
.pb-estimate-hero{text-align:center;padding:8px 0 26px;border-bottom:1px solid var(--pb-line-soft);margin-bottom:22px}
.pb-estimate-label{display:block;font:800 .76rem var(--body);letter-spacing:.18em;color:var(--pb-muted)}
.pb-estimate-num{
  font:800 clamp(2.4rem,8vw,4rem)/1.05 var(--head);margin-top:10px;
  background:var(--pb-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(139,92,246,.35);
}
.pb-breakdown{display:grid;gap:2px;margin-bottom:26px}
.pb-bitem{display:flex;justify-content:space-between;gap:12px;padding:11px 4px;border-bottom:1px dashed var(--pb-line-soft);font-size:.94rem}
.pb-bitem:last-child{border-bottom:none}
.pb-bitem span:first-child{color:var(--pb-muted)}
.pb-bitem span:last-child{font-weight:700;font-family:var(--head)}
.pb-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.pb-chip{font-size:.82rem;font-weight:600;padding:6px 13px;border-radius:99px;background:var(--pb-bg);border:1px solid var(--pb-line);color:var(--pb-ink)}
.pb-chip.is-empty{color:var(--pb-muted)}

.pb-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--pb-grad);color:#0c0616;font:800 1.02rem var(--head);letter-spacing:-.01em;
  padding:18px 24px;border-radius:16px;text-decoration:none;position:relative;overflow:hidden;
  box-shadow:0 18px 40px -16px rgba(139,92,246,.6);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;
}
.pb-cta::before{
  content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease;
}
.pb-cta:hover{transform:translateY(-3px);box-shadow:0 22px 48px -14px rgba(139,92,246,.75)}
.pb-cta:hover::before{transform:translateX(120%)}
.pb-cta-arrow{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.pb-cta:hover .pb-cta-arrow{transform:translateX(5px)}
.pb-cta:focus-visible{outline:3px solid var(--pb-pink);outline-offset:3px}

/* controls */
.pb-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px}
.pb-btn{
  font:700 .92rem var(--body);padding:13px 22px;border-radius:12px;cursor:pointer;border:1.5px solid var(--pb-line);
  background:transparent;color:var(--pb-ink);transition:all .25s ease;
}
.pb-btn:hover:not(:disabled){border-color:var(--pb-accent);color:var(--pb-accent)}
.pb-btn:disabled{opacity:.35;cursor:default}
.pb-btn-primary{background:var(--pb-grad);border-color:transparent;color:#0c0616}
.pb-btn-primary:hover:not(:disabled){color:#0c0616;filter:brightness(1.08);transform:translateY(-2px)}
.pb-btn:focus-visible{outline:3px solid var(--pb-pink);outline-offset:2px}
.pb-live{text-align:center;display:flex;flex-direction:column;gap:2px}
.pb-live-label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pb-muted);font-weight:700}
.pb-live-value{font:800 1.05rem var(--head);color:var(--pb-ink)}

@media(max-width:640px){
  .pb-controls{flex-wrap:wrap}
  .pb-live{order:3;width:100%;padding-top:14px;border-top:1px solid var(--pb-line-soft)}
  .pb-scale-nodes{grid-template-columns:1fr;gap:12px}
  .pb-scale-track{display:none}
  .pb-plabel{display:none}
  .pb-progress-track{left:6%;right:6%}
}
@media(prefers-reduced-motion:reduce){
  #estimate .pb-panel,.pb-tile,.pb-scale-node,.pb-feature,.pb-cta,.pb-pnum{animation:none!important;transition:none!important}
}
/* ---- Service selection (Services section) ---- */
#services .card[data-service]{position:relative;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease}
#services .card[data-service]:hover{transform:translateY(-3px)}
#services .card[data-service]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#services .card[data-service].is-selected{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--gold) 60%,var(--teal));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 55%,transparent),0 20px 36px -22px rgba(107,51,163,.5);
  background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 14%,var(--surface)),color-mix(in srgb,var(--teal) 10%,var(--surface)));
}
.svc-badge{
  position:absolute;top:14px;right:14px;z-index:1;
  display:none;align-items:center;gap:5px;
  background:linear-gradient(135deg,var(--teal),var(--gold));
  color:var(--teal-ink);
  font:700 .72rem var(--head);
  padding:4px 10px 4px 7px;
  border-radius:999px;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.4);
}
.svc-badge svg{width:11px;height:11px;flex:none}
#services .card[data-service].is-selected .svc-badge{display:inline-flex}
@keyframes svcPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,166,193,0)}50%{box-shadow:0 0 0 7px rgba(255,166,193,.35)}}
#services .card[data-service].pulse-hint{animation:svcPulse .55s ease-in-out 2}
.svc-hint-msg{
  margin-top:10px;font-size:.85rem;font-weight:700;color:var(--gold);
  opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease,max-height .3s ease;
}
.svc-hint-msg.show{opacity:1;max-height:40px}
@media(prefers-reduced-motion:reduce){
  #services .card[data-service],
  #services .card[data-service].pulse-hint{transition:none;animation:none}
}

/* ---- Service selection / budget preview ---- */
.svc-selection-box{
  margin:16px 0;
  padding:14px 16px;
  border:1px solid color-mix(in srgb,var(--gold) 42%,var(--line));
  border-radius:14px;
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  display:grid;
  gap:3px;
}
.svc-selection-label{
  font-size:.68rem;
  letter-spacing:.12em;
  font-weight:800;
  color:var(--muted);
}
.svc-selection-box strong{font-family:var(--head);font-size:1.05rem}
.svc-selection-price{font-size:.86rem;color:var(--tx);font-weight:700}
.custom-card .btn{transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.card.is-selected{border-color:var(--gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 55%,transparent),0 22px 45px -25px rgba(255,166,193,.7);transform:translateY(-4px)}
.card[data-service]{cursor:pointer}
.svc-hint-msg{margin-top:10px;color:var(--tx);font-size:.84rem;min-height:1.2em;opacity:0;transition:opacity .2s ease}
.svc-hint-msg.show{opacity:1}
@media(prefers-reduced-motion:reduce){.card.is-selected{transform:none}}


/* ---- CodexCrafts FAQ premium redesign ---- */
#faq{
  position:relative;
  overflow:hidden;
  padding-top:110px!important;
  padding-bottom:110px!important;
}
#faq::before{
  content:"";
  position:absolute;
  width:520px;height:520px;
  top:-250px;right:-180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(167,104,255,.20),transparent 68%);
  pointer-events:none;
}
#faq::after{
  content:"";
  position:absolute;
  width:420px;height:420px;
  bottom:-250px;left:-180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,166,193,.13),transparent 68%);
  pointer-events:none;
}
#faq .wrap{position:relative;z-index:1}
.faq-heading{
  text-align:center;
  max-width:760px;
  margin:0 auto;
}
.faq-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--tx);
  font:800 .72rem var(--body);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.faq-kicker span{
  width:24px;height:2px;border-radius:2px;
  background:var(--gold);
}
.faq-heading h2{
  font-size:clamp(2.1rem,4vw,3.25rem);
  line-height:1.02;
}
.faq-heading h2 em{
  color:var(--tx);
  font-style:normal;
}
.faq-heading p{
  margin:16px auto 0;
  max-width:610px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.65;
}
#faq .faq-list{
  max-width:920px;
  margin:42px auto 0;
  gap:12px;
}
#faq .faq-item{
  position:relative;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 88%,transparent);
  border-radius:18px;
  box-shadow:0 8px 30px -24px rgba(45,17,87,.45);
  backdrop-filter:blur(12px);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
#faq .faq-item:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--tx) 35%,var(--line));
  box-shadow:0 18px 38px -25px rgba(91,42,134,.42);
}
#faq .faq-item:has(.faq-q[aria-expanded="true"]){
  transform:none;
  border-color:var(--gold);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 55%,transparent),
             0 20px 44px -28px rgba(91,42,134,.48);
}
#faq .faq-q{
  position:relative;
  min-height:72px;
  padding:18px 22px 18px 58px;
  font-size:1.03rem;
}
#faq .faq-q::before{
  content:"?";
  position:absolute;
  left:18px;top:50%;
  transform:translateY(-50%);
  width:26px;height:26px;
  border-radius:9px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal),var(--gold));
  color:var(--teal-ink);
  font:800 .82rem var(--head);
  box-shadow:0 5px 14px -8px rgba(91,42,134,.7);
}
#faq .faq-icon{
  width:34px;height:34px;
  border-radius:11px;
  background:color-mix(in srgb,var(--bg) 75%,var(--surface));
}
#faq .faq-q[aria-expanded="true"] .faq-icon{
  transform:rotate(180deg);
}
#faq .faq-a-inner p{
  padding:0 58px 22px;
  color:var(--muted);
}
@media(max-width:600px){
  #faq{padding-top:76px!important;padding-bottom:76px!important}
  #faq .faq-list{margin-top:30px}
  #faq .faq-q{min-height:66px;padding:16px 54px 16px 50px;font-size:.96rem}
  #faq .faq-q::before{left:16px}
  #faq .faq-a-inner p{padding:0 20px 20px 50px;font-size:.92rem}
}

#why .lead{margin-top:16px}
#why .stage{position:relative;container-type:inline-size;width:100%;max-width:1000px;aspect-ratio:1000/640;margin:60px auto 0}
#why .stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#why .ring{fill:none;stroke:color-mix(in srgb,var(--tx) 30%,transparent);stroke-width:1}
#why .dash{stroke-dasharray:3 9}
#why .spin{transform-origin:500px 320px}
#why .s1{animation:whySpin 140s linear infinite}#why .s2{animation:whySpin 70s linear infinite reverse}
#why .orb{fill:var(--gold);filter:drop-shadow(0 0 5px var(--gold))}
#why .mote{fill:var(--gold);opacity:.15;animation:whyTw 6s ease-in-out infinite}
#why .ln{fill:none;stroke-width:1.3;opacity:.5;transition:opacity .35s,stroke-width .35s}
#why .particle{fill:var(--gold);filter:drop-shadow(0 0 4px var(--gold))}
.stage[data-hot="1"] .ln1{stroke-width:2.4;opacity:1;filter:drop-shadow(0 0 5px var(--gold))}.stage[data-hot="2"] .ln2{stroke-width:2.4;opacity:1;filter:drop-shadow(0 0 5px var(--gold))}.stage[data-hot="3"] .ln3{stroke-width:2.4;opacity:1;filter:drop-shadow(0 0 5px var(--gold))}.stage[data-hot="4"] .ln4{stroke-width:2.4;opacity:1;filter:drop-shadow(0 0 5px var(--gold))}.stage[data-hot="5"] .ln5{stroke-width:2.4;opacity:1;filter:drop-shadow(0 0 5px var(--gold))}
#why .core{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;text-align:center;
 background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--gold) 20%,var(--surface)),var(--surface) 64%);
 border:1px solid color-mix(in srgb,var(--tx) 55%,var(--line));
 box-shadow:0 0 50px color-mix(in srgb,var(--tx) 26%,transparent),0 0 110px color-mix(in srgb,var(--gold) 14%,transparent),inset 0 0 36px color-mix(in srgb,var(--tx) 16%,transparent);
 transition:box-shadow .5s,border-color .5s}
#why .core::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--gold);opacity:0;animation:whyPulse 5s ease-out infinite}
#why .stage[data-hot] .core{border-color:color-mix(in srgb,var(--gold) 65%,var(--tx));box-shadow:0 0 70px color-mix(in srgb,var(--tx) 42%,transparent),0 0 150px color-mix(in srgb,var(--gold) 26%,transparent),inset 0 0 44px color-mix(in srgb,var(--tx) 22%,transparent)}
#why .core-r1,#why .core-r2{display:none}
#why .core-in{display:flex;flex-direction:column;align-items:center;gap:1cqw}
#why .code{display:grid;place-items:center;width:4cqw;height:4cqw;min-width:30px;min-height:30px;border-radius:1cqw;background:linear-gradient(135deg,var(--tx),var(--gold));color:var(--teal-ink);font:700 max(11px,1.4cqw) var(--head)}
#why .core strong{font:800 max(15px,2.6cqw)/1.12 var(--head);color:var(--ink)}
#why .node{position:absolute;left:var(--x);top:var(--y);width:25cqw;transform:translate(-50%,-50%);animation:whyBob 8s ease-in-out infinite;animation-delay:var(--d);z-index:2}
#why .node-body{display:flex;align-items:center;gap:1.1cqw;width:100%;padding:1.1cqw 1.4cqw;border:1px solid color-mix(in srgb,var(--tx) 30%,var(--line));border-radius:2cqw;background:color-mix(in srgb,var(--surface) 95%,transparent);color:var(--ink);font:700 max(12px,1.6cqw)/1.25 var(--head);text-align:left;cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
#why .num{flex:none;display:grid;place-items:center;width:2.8cqw;height:2.8cqw;min-width:22px;min-height:22px;border-radius:50%;border:1px solid color-mix(in srgb,var(--tx) 45%,var(--line));color:var(--tx);font:600 max(10px,1cqw) var(--body)}
#why .node.hot .node-body,#why .node:hover .node-body{transform:scale(1.06);border-color:color-mix(in srgb,var(--gold) 75%,var(--tx));box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 40%,transparent),0 14px 34px -14px color-mix(in srgb,var(--tx) 70%,transparent)}
#why .node-body:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#why .node-desc{position:absolute;left:-4%;right:-4%;top:100%;margin:.9cqw 0 0;padding:6px 8px;border-radius:10px;background:color-mix(in srgb,var(--bg) 88%,transparent);text-align:center;color:var(--muted);font:400 max(11.5px,1.3cqw)/1.45 var(--body);opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s;pointer-events:none}
#why .node.hot .node-desc,#why .node:hover .node-desc{opacity:1;transform:none}
@keyframes whySpin{to{transform:rotate(360deg)}}
@keyframes whyBob{50%{translate:0 -4px}}
@keyframes whyTw{50%{opacity:.7}}
@keyframes whyPulse{0%{transform:scale(1);opacity:.35}100%{transform:scale(1.5);opacity:0}}
@keyframes whyDrop{0%{top:150px;opacity:0}10%,90%{opacity:1}100%{top:calc(100% - 20px);opacity:0}}
@media(max-width:760px){
 #why .stage{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px;padding-bottom:8px}
 #why .stage svg{display:none}
 #why .stage::before{content:"";position:absolute;left:50%;top:150px;bottom:20px;width:1px;background:linear-gradient(var(--tx),var(--gold),transparent);opacity:.6}
 #why .stage::after{content:"";position:absolute;left:calc(50% - 2.5px);top:150px;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:whyDrop 7s linear infinite}
 #why .core{position:relative;left:auto;top:auto;transform:none;width:190px;margin:22px 0 26px;z-index:1}
 #why .core-r1,#why .core-r2{display:block;position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--tx) 30%,transparent);inset:-16px}
 #why .core-r2{inset:-34px;border-style:dashed;opacity:.6}
 #why .code{width:30px;height:30px;border-radius:9px;font-size:12px}
 #why .core strong{font-size:21px}
 #why .node{position:relative;left:auto;top:auto;transform:none;animation:none;width:100%;max-width:380px}
 #why .node-body{padding:12px 16px;gap:12px;font-size:16px;border-radius:16px}
 #why .num{width:28px;height:28px;font-size:11px}
 #why .node-desc{position:static;margin:0;padding:8px 12px 2px;background:var(--bg);font-size:14px;opacity:1;transform:none}
 #why .node.hot .node-body,#why .node:hover .node-body{transform:scale(1.02)}
}
@media(prefers-reduced-motion:reduce){#why *,#why *::before,#why *::after{animation:none!important;transition:none!important}#why .particle{display:none}}