:root,:root[data-theme="dark"]{--bg:#0a110c;--card:#131e17;--line:rgba(255,255,255,.1);--ink:#eef5ef;--mut:#9bb0a2;--g:#79CE67;--g2:#30B155;--lime:#C2DD6C;--cream:#FFE3B3;--bl:#3B82F6;--vi:#A78BFA;--or:#F88F22;--or2:#EA6113;--sh:0 20px 50px rgba(0,0,0,.35)}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
*,*::before,*::after{box-sizing:inherit;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);background:var(--bg);touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:60}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.08;letter-spacing:-.03em}
.w{max-width:1180px;margin:0 auto;padding:0 20px}
:focus{outline:none}
:focus:not(:focus-visible){outline:none;box-shadow:none}
:focus-visible{outline:2.5px solid var(--g);outline-offset:3px;border-radius:8px}
a,button,input,textarea,select,[role="button"],[tabindex],.btn,.pc,.fc,.cat,.ic2,.ak,.tp,.hub-detail-card,.tabs button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,.btn,.tabs button,.burger,.dd>button,.pc,.fc,.cat,.ic2,.ak,.hub-detail-card,[role="button"]{-webkit-user-select:none;user-select:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;font:600 15px Inter,sans-serif;border:1.5px solid transparent;cursor:pointer;transition:transform .12s cubic-bezier(.32,.72,0,1),background .2s,border-color .2s}
.btn:active{transform:scale(.96);transition:transform .06s ease}
button:active{transform:scale(.96);transition:transform .06s ease}
.tabs button:active{transform:scale(.96);transition:transform .06s ease}
.burger:active{transform:scale(.92);transition:transform .06s ease}
.b1{background:linear-gradient(135deg,#79CE67,#30B155);color:#07140b}.b1:hover{background:linear-gradient(135deg,#C2DD6C,#79CE67)}
.b2{border-color:rgba(255,255,255,.3)}.b2:hover{background:rgba(255,255,255,.08)}
.bb{background:linear-gradient(135deg,#3B82F6,#7C6CF2);color:#fff}.bo{background:linear-gradient(135deg,#FBB931,#F88F22);color:#2b1503}
.rv{transition:opacity .7s cubic-bezier(.32,.72,0,1) var(--d,0s),transform .7s cubic-bezier(.32,.72,0,1) var(--d,0s)}
.js .rv:not(.in){opacity:0;transform:translateY(16px)}
.sec{padding:38px 0}.sec h2{font-size:clamp(24px,4.5vw,36px);font-weight:800}.sub{color:var(--mut);max-width:620px;margin-top:8px;font-size:15px}
.ctr{text-align:center}.ctr .sub{margin-inline:auto}
.in-s{margin:8px 12px;border-radius:24px}@media(min-width:860px){.in-s{margin:12px 20px;border-radius:28px}}
/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(10,17,12,.78);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-bottom:.5px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{line-height:0}.alg{display:block;height:32px;width:auto}
.burger{background:none;border:1px solid var(--line);color:#fff;border-radius:12px;width:46px;height:46px;font-size:20px;cursor:pointer}
.menu{display:none;position:absolute;top:68px;left:0;right:0;background:rgba(10,17,12,.98);padding:8px 20px 20px;flex-direction:column;border-bottom:1px solid var(--line)}
header.open .menu{display:flex}
.menu>a,.dd>button{color:#cfdcd2;background:none;border:0;font:500 16px Inter,sans-serif;padding:12px 8px;min-height:48px;text-align:left;cursor:pointer;width:100%;border-radius:10px}
.menu>a:hover,.dd>button:hover{color:#fff}
.dd-m{display:none;padding:0 0 6px 12px}.dd.open .dd-m{display:block}.dd-m a{display:block;padding:10px 8px;color:#b6c8bb;font-weight:600}.dd-m small{display:block;color:#7f9486;font-weight:400}
.menu .btn{margin-top:10px}
@media(min-width:900px){.burger{display:none}.menu{display:flex;position:static;flex-direction:row;align-items:center;gap:2px;padding:0;border:0;background:none}
.menu>a,.dd>button{width:auto;padding:10px 14px}.dd{position:relative}.menu .btn{margin:0 0 0 10px;min-height:44px}
.dd-m{position:absolute;top:100%;left:0;min-width:260px;background:#16221a;padding:8px;border-radius:18px;border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.dd:hover .dd-m{display:block}.dd-m a:hover{background:rgba(255,255,255,.06);border-radius:12px;color:#fff}}
/* hero */
.hero{background:radial-gradient(800px 460px at 82% 0,rgba(48,177,85,.3),transparent 62%),radial-gradient(600px 380px at 0 100%,rgba(194,221,108,.1),transparent 60%),var(--bg);padding:32px 0 40px}
.hero .w{display:grid;gap:20px;align-items:start}@media(min-width:900px){.hero .w{grid-template-columns:.8fr 1.2fr}.hero{padding:48px 0 48px}}
.tag{display:inline-block;padding:7px 14px;border-radius:999px;background:rgba(121,206,103,.1);border:1px solid rgba(121,206,103,.4);color:#dff3c8;font-size:13px;font-weight:600;margin-bottom:16px}
h1{font-size:clamp(46px,12vw,84px);font-weight:800;line-height:1.02}
.gt{background:linear-gradient(90deg,#79CE67,#C2DD6C 60%,#FFE3B3);-webkit-background-clip:text;background-clip:text;color:transparent}
.dot{display:inline-block;width:.13em;height:.13em;border-radius:50%;background:#ef2b2b;margin-left:.05em}
.lead{color:#b9c9bd;font-size:18px;max-width:520px;margin:20px 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.chk{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;padding:0;margin:28px 0 0;font-size:14px;color:#c9d8cc}
.chk li{display:flex;align-items:center;gap:8px}.chk li::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--g);color:var(--g);font-size:11px}
/* devices */
.dev{container-type:inline-size;position:relative;width:100%;padding-bottom:5cqw}
.mbp{margin:0 2.6cqw 0 14cqw}
.lid{position:relative;background:#040405;padding:1cqw 1cqw 1.1cqw;border-radius:2.4cqw 2.4cqw .5cqw .5cqw;box-shadow:0 0 0 .2cqw #7a7e83,0 0 0 .32cqw #2a2c2f}
.cam{position:absolute;top:0;left:50%;transform:translateX(-50%);width:8cqw;height:1.3cqw;background:#040405;border-radius:0 0 1cqw 1cqw;z-index:3}
.mbp-solo{container-type:inline-size;width:100%;max-width:760px;margin:0 auto}
.mbp-solo .mbp{margin:0}
.lap{position:relative;aspect-ratio:16/9;border-radius:.8cqw;overflow:hidden;font-size:max(6px,1.5cqw);background:#07090e;color:#14233a}
.lap::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 42%);pointer-events:none;z-index:2}
.lap .lscr{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:.6cqw;display:block}
.top{background:#2d5788;display:flex;align-items:center;gap:2cqw;padding:1.3cqw 2cqw}.top img{height:2.6cqw;width:auto}
.top span{flex:1;background:#fff;color:#8a97a8;border-radius:2cqw;padding:.8cqw 1.6cqw}
.mg{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw;padding:1.8cqw}
.mc{background:#fff;border-radius:1.6cqw;padding:1.4cqw 1.6cqw;box-shadow:0 .2cqw .8cqw rgba(20,35,58,.08)}.mc b{display:block;font-size:1.15em;margin-bottom:1cqw}
.mt{display:flex;gap:1.2cqw}.mt span{flex:1;text-align:center;font-size:.8em;line-height:1.2}
.mt i{display:grid;place-items:center;width:4.4cqw;height:4.4cqw;margin:0 auto .4cqw;border-radius:1.2cqw;background:#e9f1fc;color:#2d5788}.mt .ic{width:60%;height:60%}
.mbb{position:relative;height:1.8cqw;margin:0 -2.6cqw;background:linear-gradient(#e3e5e8,#b4b8bd 55%,#8f9399);border-radius:0 0 2.6cqw 2.6cqw/0 0 1.6cqw 1.6cqw;box-shadow:0 2.4cqw 5cqw rgba(0,0,0,.55)}
.mbb::after{content:"";position:absolute;top:0;left:50%;width:13cqw;height:.7cqw;margin-left:-6.5cqw;background:linear-gradient(#6d7176,#9a9ea3);border-radius:0 0 1.2cqw 1.2cqw}
.mob{--s:1cqw;font-size:var(--s);position:absolute;left:.5cqw;bottom:1cqw;width:21em;aspect-ratio:9/19.5;padding:0;background:#05070a;border:.55em solid #101114;border-radius:4.5em;box-shadow:0 0 0 .15em #38393c,0 0 0 .32em #1c1d20,0 2.5em 5.5em rgba(0,0,0,.75);animation:fl 7s ease-in-out infinite;overflow:hidden}
.solo{max-width:320px;margin:0 auto;padding:.8em 0 1.2em}.solo .mob{--s:13px;position:relative;left:auto;bottom:auto;margin:0 auto;animation:none}
.isl{position:absolute;top:.75em;left:50%;width:5.4em;height:1.55em;margin-left:-2.7em;background:#000;border-radius:1em;z-index:4;box-shadow:0 0 1px 1px rgba(0,0,0,.9)}
.isl::after{content:"";position:absolute;right:.65em;top:50%;transform:translateY(-50%);width:.55em;height:.55em;background:radial-gradient(circle at 35% 35%,#1c283a,#090d14 60%,#000);border-radius:50%;box-shadow:0 0 1px rgba(255,255,255,.25)}
.st{display:none}
.hb{position:absolute;bottom:.65em;left:50%;width:6.4em;height:.3em;margin-left:-3.2em;background:rgba(0,0,0,.5);border-radius:1em;z-index:4}
.mob .scr{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:3.9em;display:block}
.sk{position:absolute;width:.3em;background:#444649;border-radius:.2em;z-index:1}
.sk.a{left:-.75em;top:6.5em;height:1.5em}.sk.b{left:-.75em;top:9.2em;height:2.6em}.sk.c{left:-.75em;top:12.6em;height:2.6em}.sk.d{right:-.75em;top:9.8em;height:4.2em}
@keyframes fl{50%{transform:translateY(-8px)}}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* facts */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(min-width:860px){.facts{grid-template-columns:repeat(4,1fr)}}
.fc{border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:var(--card)}.fc b{display:block;font-size:clamp(20px,3vw,26px);font-weight:800;letter-spacing:-.03em;color:var(--g)}.fc span{color:var(--mut);font-size:14px}
/* product cards */
.g2{display:grid;gap:16px;margin-top:20px}@media(min-width:860px){.g2{grid-template-columns:1fr 1fr}}
.pc{border:1px solid var(--line);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.32,.72,0,1)}.pc:hover{transform:translateY(-4px)}
.pa{background:radial-gradient(120% 90% at 100% 0,rgba(96,165,250,.3),transparent 55%),#101c30}.ph{background:radial-gradient(120% 90% at 100% 0,rgba(248,143,34,.3),transparent 55%),#1a1511}
.lg{height:34px;width:auto;align-self:flex-start;display:block}.lgk{height:50px;width:auto;display:block;border-radius:0}.pc .tl{color:var(--mut);margin:16px 0 12px}.ds{max-width:44ch;margin-bottom:10px;font-size:14px}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.pills span{font-size:12px;font-weight:500;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.peek{height:115px;margin:0 0 12px;display:flex;justify-content:center;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.peek img{width:min(300px,86%);height:auto;align-self:flex-start;border-radius:22px 22px 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.p60{height:115px;margin:0 0 12px;border-radius:14px;border:1px solid rgba(248,143,34,.25);background:radial-gradient(90% 120% at 100% 0,rgba(248,143,34,.22),transparent 60%),rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;gap:16px}
.p60 b,.big{font-size:52px;line-height:1;font-weight:800;letter-spacing:-.05em;background:linear-gradient(#FBB931,#EA6113);-webkit-background-clip:text;background-clip:text;color:transparent}.p60 span{font-size:20px;font-weight:600;line-height:1.2}
.go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line);font-weight:600;cursor:pointer}
.go i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid;transition:transform .35s cubic-bezier(.32,.72,0,1)}.go:hover i{transform:translateX(4px)}
.pa .go i{color:#60A5FA}.ph .go i{color:#F88F22}
/* astabiz */
.az{background:radial-gradient(700px 400px at 100% 0,rgba(59,130,246,.24),transparent 60%),#0b1424}
.sw{display:grid;gap:20px;align-items:center;margin-top:20px}
.sw>div{min-width:0;max-width:100%}@media(min-width:900px){.sw{grid-template-columns:1.15fr .85fr}}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.tabs::-webkit-scrollbar{display:none}
.tabs button{white-space:nowrap;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--mut);font:600 14px Inter,sans-serif;cursor:pointer;transition:background .2s}
.tabs [aria-selected=true]{background:#fff;color:#0b1424;border-color:#fff}
.tp{margin-top:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:16px 20px}.tp h3{font-size:20px;margin-bottom:6px}.tp p{color:#b7c5dc}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.chips span{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.25);font-size:14px;font-weight:500}
.chips i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(96,165,250,.2);color:#8dbbfb}.chips .ic{width:16px;height:16px}
/* homekart */
.hk{background:#FFF6E8;color:#2a1a0a}.hk .sub{color:#7a5d3c}.hk .lgk{height:54px;width:auto;display:block;border-radius:0}
.hk .w{display:grid;gap:32px}@media(min-width:900px){.hk .w{grid-template-columns:1.2fr .8fr;align-items:center}}
.hk h2{color:#072C63}.srch{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #f0dcc0;border-radius:16px;padding:0 16px;min-height:54px;max-width:520px;margin-top:26px}
.srch:focus-within{border-color:var(--or)}.srch input{flex:1;border:0;background:none;font:inherit;color:#2a1a0a;min-height:50px;outline:0;min-width:0}
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}@media(min-width:600px){.cats{grid-template-columns:repeat(3,1fr)}}@media(min-width:960px){.cats{grid-template-columns:repeat(6,1fr)}}@media(min-width:600px){.cats{grid-template-columns:repeat(3,1fr)}}
.cat{background:#fff;border-radius:14px;padding:10px 14px;display:grid;gap:2px;box-shadow:0 6px 18px rgba(120,80,20,.08);transition:transform .3s cubic-bezier(.32,.72,0,1)}.cat:hover{transform:translateY(-3px)}
.cat span{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#FFE3B3;font-size:24px;margin-bottom:8px}.cat small{color:#7a5d3c}
.dl{background:#fff;border-radius:32px;padding:32px;box-shadow:0 12px 40px rgba(120,80,20,.12);text-align:center}.dl span{display:block;font-weight:700;font-size:20px;color:#072C63}.dl small{display:block;color:#7a5d3c;margin:6px 0 20px}
/* industries etc */
.ig{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:40px}
.ic2{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:24px;transition:transform .35s cubic-bezier(.32,.72,0,1),border-color .2s}.ic2:hover{transform:translateY(-4px);border-color:rgba(121,206,103,.5)}
.ic2 i{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(121,206,103,.14);color:var(--g);margin-bottom:16px}.ic2 h3{font-size:19px;margin-bottom:6px}.ic2 p{color:var(--mut);font-size:15px}
.faq{max-width:820px;margin:40px auto 0;display:grid;gap:12px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:0 22px}.faq summary{cursor:pointer;list-style:none;font-weight:600;padding:18px 0;min-height:56px;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:22px;color:var(--g);transition:transform .3s}.faq details[open] summary::after{transform:rotate(45deg)}.faq details p{color:var(--mut);padding:0 0 20px}
.ct{background:radial-gradient(700px 380px at 0 0,rgba(48,177,85,.28),transparent 60%),#0f1a13}
.ct .w{display:grid;gap:20px}@media(min-width:900px){.ct .w{grid-template-columns:1fr 1fr;align-items:start}}
.ml{color:var(--g);font-weight:600;display:inline-block;margin-top:20px;min-height:44px}
form{background:var(--card);border:1px solid var(--line);border-radius:30px;padding:24px;display:grid;gap:16px}
label{font-weight:600;font-size:14px;display:grid;gap:6px}
input,select,textarea{font:inherit;color:var(--ink);background:rgba(255,255,255,.07);border:1.5px solid transparent;border-radius:14px;padding:12px 14px;min-height:48px;width:100%}select option{color:#000}
textarea{min-height:110px;resize:vertical}input:focus,select:focus,textarea:focus{outline:0;border-color:var(--g2);box-shadow:0 0 0 3px rgba(48,177,85,.28)}
[aria-invalid=true]{border-color:#e05555}.er{color:#ff8a8a;font-size:13px}.stx{font-size:14px;color:var(--mut)}
footer{background:#070d09;padding:56px 0 32px;font-size:15px;color:#b3c3b8;margin-top:12px}
.fg{display:grid;gap:32px}@media(min-width:860px){.fg{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer h4{color:#fff;margin:0 0 12px}footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}footer li a{display:inline-block;padding:6px 0}footer a:hover{color:#fff}
.fb{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:14px}.fb div{display:flex;gap:20px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js .rv:not(.in){opacity:1;transform:none}}
/* Asta by Astafic */
.ak{padding:14px 18px;border-radius:14px}
@media(max-width:520px){.msgs{height:240px}}
@media(max-width:380px){.chat{padding:16px}}
.asta{background:radial-gradient(800px 420px at 15% 0,rgba(167,139,250,.24),transparent 60%),var(--soft);margin:12px;border-radius:clamp(28px,4vw,44px)}
.aw{display:grid;gap:16px;margin-top:20px}
@media(min-width:960px){.aw{grid-template-columns:.95fr 1.05fr;align-items:start}}
.chat{background:#0f1c33;color:#eaf0f8;border-radius:18px;padding:16px 20px;box-shadow:0 24px 60px rgba(15,28,46,.3)}
.ch-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.ch-h b{display:block;font-size:18px}
.ch-h small{color:#9fb0c6;font-size:13px}
.orb{flex:none;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#BFD9FF 25%,#A78BFA 60%,#3B82F6);box-shadow:0 0 0 6px rgba(167,139,250,.18),0 0 30px rgba(96,165,250,.5);animation:orb 4s ease-in-out infinite}
.orb.live{animation:live 1s ease-in-out infinite}
@keyframes orb{50%{transform:scale(1.06)}}
@keyframes live{50%{transform:scale(1.18);box-shadow:0 0 0 12px rgba(167,139,250,.25),0 0 44px rgba(96,165,250,.7)}}
.spk{margin-left:auto;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-size:18px;cursor:pointer}
.spk.on{background:rgba(96,165,250,.3)}
.msgs{height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px 12px;scrollbar-width:thin}
.m{max-width:88%;padding:12px 16px;border-radius:20px;font-size:15px;line-height:1.45;animation:pop .35s cubic-bezier(.32,.72,0,1)}
.m.a{background:rgba(255,255,255,.1);border-bottom-left-radius:6px;align-self:flex-start}
.m.u{background:linear-gradient(135deg,#3B82F6,#7C6CF2);border-bottom-right-radius:6px;align-self:flex-end}
.m.ty{opacity:.7;letter-spacing:.2em}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}}
.qs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.qs button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#eaf0f8;font:500 14px Inter,sans-serif;cursor:pointer}
.qs button:active{background:rgba(255,255,255,.18)}
.mic{width:100%}
.chat .note{font-size:12px;color:#9fb0c6;margin-top:12px;text-align:center}
.ac{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.ak{background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:var(--sh)}
.ak i{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#3B82F6,#A78BFA);color:#fff;margin-bottom:16px}
.ak h3{font-size:18px;margin-bottom:6px}
.ak p{color:var(--mut);font-size:15px}
.asta{background:radial-gradient(700px 380px at 12% 0,rgba(124,108,242,.4),transparent 60%),radial-gradient(600px 360px at 100% 100%,rgba(59,130,246,.3),transparent 60%),#0a0f1f;color:#eaf0f8}
.asta h2{color:#fff}
.asta .sub{color:#a9b8d2}
.lock{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.lo{position:relative;flex:none;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#BFD9FF 22%,#A78BFA 58%,#3B82F6);box-shadow:0 0 0 8px rgba(167,139,250,.14),0 0 44px rgba(96,165,250,.55);animation:orb 4s ease-in-out infinite}
.lo::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(167,139,250,.55);border-top-color:transparent;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wm{text-align:left;line-height:1}
.wm b{display:block;font-size:clamp(42px,8vw,64px);font-weight:800;letter-spacing:-.04em;background:linear-gradient(90deg,#fff,#D9CCFF 60%,#FBCFE8);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:4px}
.wm span{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;color:#a9b8d2}
.wm img{height:16px;width:auto}
.soon{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid rgba(167,139,250,.5);background:rgba(167,139,250,.14);font-size:13px;font-weight:600;color:#e4dcff}
.soon::before{content:"";width:8px;height:8px;border-radius:50%;background:#A78BFA;animation:orb 1.8s ease-in-out infinite}
.chat{background:linear-gradient(160deg,#18233f,#0e1730);border:1px solid rgba(167,139,250,.28);box-shadow:0 30px 80px rgba(70,60,190,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.ch-h b em{font-style:normal;font-weight:500;font-size:12px;color:#9fb0c6;margin-left:6px}
.m.a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.ak{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:none;transition:transform .4s cubic-bezier(.32,.72,0,1),border-color .3s}
.ak:hover{transform:translateY(-4px);border-color:rgba(167,139,250,.55)}
.ak h3{color:#fff}
.ak p{color:#a9b8d2}
.ak{position:relative;overflow:hidden;padding-top:clamp(24px,3vw,32px)}
.ak::before{content:"";position:absolute;left:0;top:0;height:3px;width:44px;background:linear-gradient(90deg,#3B82F6,#A78BFA,#FBCFE8);border-radius:0 0 3px 0;transition:width .5s cubic-bezier(.32,.72,0,1)}
.ak:hover::before{width:100%}
.no{display:block;font-size:clamp(40px,6vw,52px);font-weight:800;letter-spacing:-.05em;line-height:1;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.05));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.tg{display:inline-block;font-style:normal;font-size:13px;font-weight:600;color:#BFD9FF;padding:4px 12px;border-radius:999px;background:rgba(96,165,250,.14);margin-bottom:12px}
.spk{width:auto;padding:0 14px;border-radius:999px;font:600 13px Inter,sans-serif}
.spk.on::before{content:"On · "}
.mic::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;margin-right:10px;animation:orb 1.8s ease-in-out infinite}
.asta{--a-bg:radial-gradient(700px 380px at 10% 0,rgba(96,165,250,.38),transparent 60%),radial-gradient(600px 360px at 100% 100%,rgba(251,207,232,.75),transparent 60%),linear-gradient(160deg,#EEF3FF,#F3EEFF);--a-ink:#14204a;--a-mut:#5a6788;--a-chat:linear-gradient(180deg,#fff,#FAFAFF);--a-line:#E3E7F8;--a-chip:#F2F4FF;--a-bub:#F1F3FF;--a-sh:0 30px 70px rgba(124,108,242,.22);--a-card:#fff;--a-cs:0 10px 30px rgba(124,108,242,.1);--a-no:linear-gradient(180deg,#A78BFA,rgba(167,139,250,.12));--a-tgb:#EEF1FF;--a-tgc:#3B5BDB;--a-wm:linear-gradient(90deg,#3B82F6,#7C6CF2 55%,#E879B9);--a-soonc:#5B3FD0;--a-logo:invert(1) hue-rotate(180deg)}
.asta{background:var(--a-bg);color:var(--a-ink)}
.asta h2{color:var(--a-ink)}
.asta .sub{color:var(--a-mut)}
.wm b{background:var(--a-wm);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm span{color:var(--a-mut)}
.wm img{filter:var(--a-logo)}
.soon{color:var(--a-soonc)}
.chat{background:var(--a-chat);border:1px solid var(--a-line);box-shadow:var(--a-sh);color:var(--a-ink)}
.ch-h small,.ch-h b em,.chat .note{color:var(--a-mut)}
.m.a{background:var(--a-bub);border:1px solid var(--a-line);color:var(--a-ink)}
.m.u{color:#fff}
.qs button{background:var(--a-chip);border:1px solid var(--a-line);color:var(--a-ink)}
.qs button:active{background:var(--a-line)}
.spk{border-color:var(--a-line);color:var(--a-ink)}
.ak{background:var(--a-card);border:1px solid var(--a-line);box-shadow:var(--a-cs)}
.ak h3{color:var(--a-ink)}
.ak p{color:var(--a-mut)}
.no{background:var(--a-no);-webkit-background-clip:text;background-clip:text;color:transparent}
.tg{background:var(--a-tgb);color:var(--a-tgc)}
.m.u{background:linear-gradient(135deg,#2F6BEA,#6A58E0);color:#fff}
.asta{--a-bg:radial-gradient(700px 380px at 12% 0,rgba(124,108,242,.5),transparent 60%),radial-gradient(600px 360px at 100% 100%,rgba(59,130,246,.38),transparent 60%),#161e45;--a-ink:#f3f6ff;--a-mut:#b6c2e0;--a-chat:linear-gradient(160deg,#25316a,#1a2352);--a-line:rgba(255,255,255,.16);--a-chip:rgba(255,255,255,.08);--a-bub:rgba(255,255,255,.1);--a-sh:0 30px 80px rgba(70,60,190,.4);--a-card:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));--a-cs:none;--a-no:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.06));--a-tgb:rgba(96,165,250,.18);--a-tgc:#cfe0ff;--a-wm:linear-gradient(90deg,#fff,#D9CCFF 60%,#FBCFE8);--a-soonc:#e9e1ff;--a-logo:none}
.asta .bn{background:linear-gradient(135deg,#2F6BEA,#6A58E0);color:#fff}.asta .btn{min-height:50px;padding:0 24px;border-radius:999px;font-weight:600}
.hwt{margin:36px 0 14px;font-size:22px;color:var(--a-ink)}.hw{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.ak em{font-style:normal}
/* new cards: hub, roles, app banner */
.uw{background:linear-gradient(90deg,#79CE67,#C2DD6C) 0 100%/100% 4px no-repeat;padding-bottom:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hubc{margin-top:36px;background:radial-gradient(500px 260px at 50% 50%,rgba(48,177,85,.22),transparent 70%),#0d1a12;border:1px solid var(--line);border-radius:clamp(26px,4vw,40px);padding:clamp(16px,3vw,32px)}
.hub{display:none;position:relative}.hub svg{display:block;width:100%;height:auto}.hub svg text{font-family:Inter,sans-serif}
.hlg{position:absolute;left:50%;top:50%;width:13%;height:auto;transform:translate(-50%,-50%)}
.hubp{display:inline-block;padding:7px 14px;border-radius:999px;border:1px solid rgba(167,139,250,.5);background:rgba(167,139,250,.14);color:#e4dcff;font-size:13px;font-weight:600}.hub .hubp{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
.hubm{display:grid;gap:16px;justify-items:center}.hc{width:140px;height:140px;border-radius:50%;background:#0b1410;border:2px solid #79CE67;display:grid;place-items:center}.hc img{width:96px;height:auto}
.chs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.chs span{background:#fff;color:#0f1d15;font-weight:600;font-size:14px;padding:8px 14px;border-radius:999px}
@media(min-width:720px){.hub{display:block}.hubm{display:none}}
.tr3{display:grid;gap:28px;margin-top:36px}@media(min-width:1000px){.tr3{grid-template-columns:1.8fr .8fr;align-items:center}}
.panel{display:grid;gap:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:clamp(26px,4vw,36px);padding:clamp(14px,3vw,28px);text-align:left}@media(min-width:760px){.panel{grid-template-columns:230px 1fr;align-items:center}}
.bt{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:16px}.bt h3{font-size:17px;margin-bottom:12px}.btg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bti{display:grid;justify-items:center;gap:6px;text-align:center;font-size:13px;font-weight:600;padding:14px 6px;border-radius:16px;background:rgba(121,206,103,.08)}.bti .ic{width:26px;height:26px;color:var(--g)}
.net{display:none;position:relative;aspect-ratio:1/1;max-width:560px;margin:0 auto;width:100%}.net svg{position:absolute;inset:0;width:100%;height:100%}
.hx{position:absolute;width:max(98px,25%);aspect-ratio:1/1.12;transform:translate(-50%,-50%);display:grid;place-items:center;text-align:center;background:rgba(255,255,255,.22);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hx::before{content:"";position:absolute;inset:2px;background:var(--card);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hx span{position:relative;padding:0 10px}.hx b{display:block;font-size:12.5px;line-height:1.2;color:var(--ink)}.hx small{display:block;font-size:10.5px;line-height:1.25;color:var(--mut);margin-top:3px}
.hx.c{background:var(--g2)}.hx.c::before{background:#10261a}.hx.c{filter:drop-shadow(0 0 16px rgba(121,206,103,.5))}
.netm{display:grid;grid-template-columns:1fr 1fr;gap:10px}.netm div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px}.netm b{display:block;font-size:14px}.netm small{color:var(--mut);font-size:12.5px}.netm div:first-child{grid-column:1/-1;border-color:var(--g2);background:#10261a}
@media(min-width:620px){.net{display:block}.netm{display:none}}
.fx{display:grid;gap:22px;text-align:left}.fx h3{font-size:clamp(20px,2.4vw,26px);margin-bottom:6px}.fx h3 b{color:var(--g)}.fx p{color:var(--mut)}
.appb{position:relative;display:grid;gap:24px;align-items:center;background:linear-gradient(135deg,#0f1d15,#10261c);border:1px solid var(--line);border-radius:clamp(26px,4vw,40px);padding:clamp(24px,5vw,56px)}
@media(min-width:900px){.appb{grid-template-columns:1.1fr .9fr}.appb .dev{margin:-120px auto -60px}}
.appt h2{font-size:clamp(28px,4.4vw,46px)}.appt p{color:#b9c9bd;margin:14px 0 24px;max-width:46ch}.badges{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.gp{display:flex;align-items:center;gap:10px;background:#000;border:1px solid #a6a6a6;border-radius:10px;padding:8px 16px;min-height:50px}.gp svg{width:24px;height:26px}.gp small{display:block;font-size:10px;letter-spacing:.05em;line-height:1}.gp b{font-size:18px;line-height:1.15}

/* ==========================================================================
   Asta AI - Seamless Integrations Hub & Ecosystem Overview (Inspired by Reference Graphic)
   ========================================================================== */
.hub-wrapper {
  max-width: 1180px;
  margin: 0 auto;
  background: radial-gradient(ellipse at 50% 35%, #0e2444 0%, #061326 65%, #030a16 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: clamp(20px, 3.5vw, 28px);
  padding: clamp(24px, 4vw, 44px) clamp(16px, 3vw, 28px);
  box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.85), 0 0 50px rgba(56, 189, 248, 0.12);
  position: relative;
  overflow: hidden;
}
.hub-title-box {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}
.hub-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 999px;
  color: #38bdf8;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.hub-title-wrap {
  display: inline-block;
  position: relative;
  margin-bottom: 0.75rem;
}
.hub-title {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.hub-title .accent-bar {
  display: block;
  width: 140px;
  height: 4px;
  background: #ea384c;
  border-radius: 2px;
  margin: 8px auto 0;
}
.hub-sub {
  color: #94a3b8;
  font-size: 1.05rem;
  max-width: 740px;
  margin: 0.5rem auto 0;
  line-height: 1.55;
}
.hub-svg-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
}
.hub-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}
.app-node {
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.app-node:hover {
  transform-box: fill-box;
  transform-origin: center;
  filter: url(#node-hover-glow) !important;
}
.conn-path {
  transition: stroke 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;
}
.app-node-link {
  text-decoration: none;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app-node-link:hover .conn-path,
.app-node-link:focus-visible .conn-path {
  stroke: #38bdf8 !important;
  stroke-width: 4px !important;
  filter: drop-shadow(0 0 10px #38bdf8) !important;
}
.app-node-link:hover .app-node,
.app-node-link:focus-visible .app-node {
  transform-box: fill-box;
  transform-origin: center;
  filter: url(#node-hover-glow) !important;
}
.hub-center-node {
  animation: pulseCenter 4s ease-in-out infinite alternate;
}
@keyframes pulseCenter {
  0% { filter: drop-shadow(0 0 15px rgba(56, 189, 248, 0.4)); }
  100% { filter: drop-shadow(0 0 35px rgba(56, 189, 248, 0.8)); }
}
.hub-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  position: relative;
  z-index: 2;
}
.hub-detail-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), background 0.2s, border-color 0.2s, box-shadow 0.2s;
  backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.hub-detail-card:focus:not(:focus-visible) {
  outline: none;
}
.hub-detail-card:focus-visible {
  outline: 2.5px solid var(--g);
  outline-offset: 3px;
}
.hub-detail-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(121, 206, 103, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.5);
}
.hub-detail-card:active {
  transform: scale(0.98);
  transition: transform 0.06s ease;
}
.hub-detail-card .hd-icon {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
}
.hub-detail-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.35rem;
}
.hub-detail-card p {
  color: #94a3b8;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}
.hub-detail-card .hd-tag {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}

/* Deep-dive Integration Feature Showcase Cards */
.integ-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 2.5rem;
}
@media(min-width: 900px) {
  .integ-showcase-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.integ-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--sh);
}
.integ-card .ic-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.integ-card .ic-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}
.integ-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
  color: var(--ink);
}
.integ-card p {
  color: var(--mut);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.integ-preview {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  font-size: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #e2e8f0;
}

/* Feature card deep-link targets & pulse animations */
html {
  scroll-behavior: smooth;
}
[id^="feat-"] {
  scroll-margin-top: 110px;
}
.integ-card {
  transition: all 0.3s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.integ-card.highlight-target,
.integ-card:target {
  animation: cardTargetPulse 1.8s ease-out;
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.08) !important;
  box-shadow: 0 0 40px rgba(56, 189, 248, 0.4) !important;
}
@keyframes cardTargetPulse {
  0% { transform: scale(1.025); box-shadow: 0 0 45px rgba(56, 189, 248, 0.6); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); box-shadow: 0 0 20px rgba(56, 189, 248, 0.25); }
}

/* ==========================================================================
   Cookie Consent Banner & Interactive Preferences Modal ("What it contains")
   ========================================================================== */

/* Floating Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: clamp(12px, 2.5vw, 24px);
  left: clamp(12px, 2.5vw, 24px);
  right: clamp(12px, 2.5vw, 24px);
  max-width: 580px;
  margin-left: auto;
  z-index: 9990;
  background: rgba(14, 22, 17, 0.96);
  border: 1px solid rgba(121, 206, 103, 0.35);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 40px rgba(121, 206, 103, 0.12);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transform: translateY(120%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.4s;
}
.cookie-banner.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.cookie-banner-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.cookie-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.cookie-banner-head h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}
.cookie-banner p {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.55;
  margin: 0 0 1.25rem;
}
.cookie-banner p a {
  color: var(--g);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.cb-btn {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.cb-btn:focus:not(:focus-visible) {
  outline: none;
}
.cb-btn:focus-visible {
  outline: 2px solid var(--g);
  outline-offset: 2px;
}
.cb-btn:active {
  transform: scale(0.96);
  transition: transform 0.06s ease;
}
.cb-btn-accept {
  background: linear-gradient(135deg, #79CE67, #30B155);
  color: #051208;
  flex: 1 1 auto;
}
.cb-btn-accept:hover {
  background: linear-gradient(135deg, #C2DD6C, #79CE67);
  transform: translateY(-1px);
}
.cb-btn-reject {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
}
.cb-btn-reject:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.cb-btn-prefs {
  background: transparent;
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}
.cb-btn-prefs:hover {
  background: rgba(56, 189, 248, 0.1);
  color: #7dd3fc;
}

/* Preferences Modal Overlay */
.cookie-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(4, 9, 6, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.cookie-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.cookie-modal {
  background: #0f1812;
  border: 1px solid rgba(121, 206, 103, 0.35);
  border-radius: 24px;
  width: 100%;
  max-width: 680px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 35px 80px -15px rgba(0, 0, 0, 0.95);
  transform: scale(0.95) translateY(15px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.cookie-modal-overlay.open .cookie-modal {
  transform: scale(1) translateY(0);
}
.cookie-modal-header {
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.cookie-modal-header h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.25rem;
}
.cookie-modal-header p {
  font-size: 0.85rem;
  color: var(--mut);
  margin: 0;
  line-height: 1.45;
}
.cookie-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.cookie-close-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(90deg);
}

.cookie-modal-body {
  padding: 1.25rem 1.75rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Category Card */
.cookie-cat-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.15rem 1.25rem;
  transition: border-color 0.2s, background 0.2s;
}
.cookie-cat-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(121, 206, 103, 0.3);
}
.cookie-cat-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.cookie-cat-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.cookie-cat-title-wrap h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}
.cookie-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  text-transform: uppercase;
}
.cb-req {
  background: rgba(121, 206, 103, 0.15);
  color: var(--g);
  border: 1px solid rgba(121, 206, 103, 0.35);
}
.cb-opt {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* Toggle Switch */
.cookie-toggle-wrap {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}
.cookie-toggle-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cookie-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.18);
  transition: 0.3s;
  border-radius: 999px;
}
.cookie-toggle-slider::before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.cookie-toggle-wrap input:checked + .cookie-toggle-slider {
  background-color: var(--g);
}
.cookie-toggle-wrap input:checked + .cookie-toggle-slider::before {
  transform: translateX(22px);
}
.cookie-toggle-wrap input:disabled + .cookie-toggle-slider {
  opacity: 0.7;
  cursor: not-allowed;
  background-color: #2e7d32;
}
.cookie-toggle-wrap input:focus-visible + .cookie-toggle-slider {
  outline: 2px solid var(--g);
  outline-offset: 2px;
}

.cookie-cat-desc {
  font-size: 0.86rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin: 0 0 0.85rem;
}

/* "What it contains" disclosure box */
.cookie-contains-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.5;
}
.cookie-contains-box b {
  color: #f1f5f9;
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.cookie-contains-box ul {
  list-style: disc;
  padding-left: 1.1rem;
  margin: 0.3rem 0;
}
.cookie-contains-box li {
  margin-bottom: 0.2rem;
}
.cookie-meta-row {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 0.74rem;
  color: #718096;
}

.cookie-modal-footer {
  padding: 1.25rem 1.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  background: rgba(10, 17, 12, 0.6);
}
.cookie-modal-footer-btns {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Floating Cookie Settings Trigger (Fixed Bottom-Left) */
.cookie-settings-trigger {
  position: fixed;
  bottom: clamp(12px, 2.5vw, 24px);
  left: clamp(12px, 2.5vw, 24px);
  z-index: 9980;
  background: rgba(15, 24, 18, 0.92);
  border: 1px solid rgba(121, 206, 103, 0.35);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #e2e8f0;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: all 0.25s ease;
}
.cookie-settings-trigger:hover {
  background: rgba(121, 206, 103, 0.15);
  border-color: var(--g);
  color: #fff;
  transform: translateY(-2px);
}