/* Tech Matrix — v2 theme (bold editorial dark) */
:root{
  --ink:#0d0c12; --ink2:#16141d; --ink3:#211e2b;
  --paper:#f6f2ea; --muted:#a19cb0; --line:rgba(246,242,234,.10);
  --lime:#d2f74a; --coral:#ff6b4a; --pink:#ff7ac3; --violet:#9d7bff; --sky:#4cc9ff; --sun:#ffc23d;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.23,1,.32,1);
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--display);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
::selection{background:var(--lime);color:var(--ink)}

/* background: grid + glows */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(246,242,234,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(246,242,234,.035) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%)}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.g-violet{width:520px;height:520px;background:rgba(157,123,255,.28);left:-160px;top:-140px}
.g-coral{width:480px;height:480px;background:rgba(255,107,74,.20);right:-120px;top:160px}
.g-sky{width:420px;height:420px;background:rgba(76,201,255,.10);left:35%;top:520px}
main,header,footer{position:relative;z-index:1}

/* nav pill */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:6px;padding:6px;border:1px solid var(--line);border-radius:999px;background:rgba(13,12,18,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav .logo{width:38px;height:38px;border-radius:50%;background:var(--ink3);border:1px solid rgba(246,242,234,.18);display:grid;place-items:center;overflow:hidden}
.nav .logo img{width:26px;height:auto}
.nav .sep{width:1px;height:22px;background:var(--line);margin:0 6px}
.nav a.item{white-space:nowrap;padding:7px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:#cfcad9;transition:.25s var(--ease)}
.nav a.item:hover{color:var(--paper)}
.nav a.item.active{background:var(--paper);color:var(--ink)}
.nav .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#cfcad9}
.nav .ic:hover{color:var(--paper)}
.nav .ic svg{width:18px;height:18px}

/* labels & headings */
.label{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);margin-bottom:18px}
.label i{font-family:var(--serif);font-style:italic;color:var(--lime);font-size:17px}
.label span.l{width:46px;height:1px;background:var(--line)}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.02em}
h2{font-size:clamp(40px,6vw,72px);line-height:1;font-weight:700}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.c-lime{color:var(--lime)}.c-coral{color:var(--coral)}.c-sky{color:var(--sky)}.c-violet{color:var(--violet)}.c-pink{color:var(--pink)}
section{padding:110px 0 40px}
.lead{color:var(--muted);font-size:18px;max-width:560px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:600;font-size:15.5px;border:1px solid var(--line);transition:.3s var(--ease);cursor:pointer;font-family:var(--display)}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-paper{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-paper:hover{background:#fff}
.btn-line{color:var(--paper)}
.btn-line:hover{background:var(--ink3)}
.btn-lime{background:var(--lime);color:var(--ink);border-color:var(--lime)}

/* hero */
.hero{min-height:100vh;padding:150px 0 80px;position:relative}
.chip{white-space:nowrap;display:inline-flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border-radius:999px;border:1px solid var(--line);background:rgba(22,20,29,.7);font-size:14.5px}
.chip .av{width:34px;height:34px;border-radius:50%;background:var(--ink3);display:grid;place-items:center;border:1px solid rgba(246,242,234,.18)}
.chip .av img{width:22px}
.chip b{font-weight:600}.chip .bar{width:1px;height:16px;background:var(--line)}.chip span.m{color:var(--muted)}
.hero h1{font-size:clamp(52px,9.2vw,124px);line-height:.92;font-weight:700;letter-spacing:-.045em;margin:34px 0 34px}
.hl{background:var(--lime);color:var(--ink);border-radius:22px;padding:0 .14em .04em;display:inline-block;transform:rotate(-1deg)}
.grad{background:linear-gradient(90deg,var(--violet),var(--pink) 55%,var(--sun));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .it{color:var(--coral)}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.stats{display:flex;gap:44px}
.stats b{display:block;font-size:44px;font-weight:700;line-height:1;letter-spacing:-.03em}
.stats span{color:var(--muted);font-size:14px}
.sticker{position:absolute;pointer-events:none;z-index:2}
.st-star{right:12%;top:150px;width:96px;animation:float 6s ease-in-out infinite}
.st-ring{left:7%;top:47%;width:58px;height:58px;border-radius:50%;border:9px solid var(--sky);animation:float 7s ease-in-out infinite reverse}
.st-code{right:6%;top:350px;background:var(--violet);color:var(--ink);font-family:var(--mono);font-size:17px;font-weight:600;padding:9px 20px;border-radius:999px;transform:rotate(-7deg);box-shadow:0 10px 30px -10px rgba(157,123,255,.7)}
.badge-rot{position:absolute;right:9%;top:440px;width:130px;height:130px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;z-index:2}
.badge-rot svg.txt{position:absolute;inset:0;animation:spin 16s linear infinite}
.badge-rot img{width:46px;filter:brightness(.15)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(6deg)}}

/* tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:34px 0 30px}
.tab{font:inherit;font-size:14.5px;font-weight:500;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:#cfcad9;cursor:pointer;transition:.25s var(--ease)}
.tab:hover{color:var(--paper);background:var(--ink2)}
.tab.active{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* product cards */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--ink2);border:1px solid var(--line);border-radius:26px;padding:26px;position:relative;transition:transform .4s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);border-color:rgba(246,242,234,.2)}
.p-top{display:flex;justify-content:space-between;align-items:flex-start}
.tile{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:var(--ink3)}
.tile i{width:26px;height:26px;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;background:var(--c,#fff)}
.tile.emoji{font-size:24px}
.num{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:20px}
.product h3{font-size:23px;font-weight:700;margin:22px 0 4px}
.product .sub{color:var(--muted);font-size:14.5px;margin:0 0 16px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:13px;padding:5px 11px;border-radius:999px;background:var(--ink3);color:#d9d4e3}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--d,var(--lime))}
.price{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.price b{font-size:22px;font-weight:700}
.price small{display:block;color:var(--muted);font-size:12.5px;font-weight:400}
.price .go{width:44px;height:44px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;flex:none;transition:.3s var(--ease)}
.price .go:hover{background:var(--lime);transform:rotate(-45deg)}
.price .go svg{width:18px;height:18px}

/* step / feature cards */
.step h3{font-size:23px;font-weight:700;margin:30px 0 10px}
.step p{color:var(--muted);margin:0 0 24px;font-size:15.5px}
.dash{list-style:none;padding:0;margin:0}
.dash li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:#d9d4e3;margin:7px 0}
.dash li::before{content:"";width:12px;height:2px;background:var(--d,var(--lime))}

/* why / brand card */
.why{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:70px;align-items:center}
.brandcard{position:relative;max-width:420px}
.brandcard::before{content:"";position:absolute;inset:18px -18px -18px 18px;border-radius:28px;background:linear-gradient(160deg,var(--violet),var(--pink) 50%,var(--coral));z-index:0;transform:rotate(3deg)}
.brandcard .in{position:relative;z-index:1;padding-bottom:84px;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:var(--ink2);transform:rotate(-2deg)}
.brandcard .in img{width:100%}
.brandcard .tagline{position:absolute;top:16px;left:16px;z-index:2;font-size:13px;padding:6px 12px;border-radius:999px;background:rgba(13,12,18,.75);backdrop-filter:blur(8px);display:flex;gap:8px;align-items:center}
.brandcard .tagline em{color:var(--lime);font-style:normal;font-family:var(--mono)}
.brandcard .foot{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:18px;background:rgba(13,12,18,.82);backdrop-filter:blur(10px);border:1px solid var(--line)}
.brandcard .foot .who{display:flex;gap:12px;align-items:center}
.brandcard .foot .dot{width:40px;height:40px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-family:var(--serif);font-style:italic;color:var(--ink);font-size:20px}
.brandcard .foot b{display:block;font-size:15px}.brandcard .foot span{font-size:13px;color:var(--muted)}
.brandcard .foot .time{text-align:right;font-size:13px;color:var(--muted)}.brandcard .foot .time b{color:var(--paper)}
.vs{list-style:none;padding:0;margin:28px 0 30px}
.vs li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:15.5px}
.vs li span{color:var(--muted)}
.vs li b{font-weight:500}
.vs li b::before{content:"✓  ";color:var(--lime)}

/* faq */
.faq{max-width:820px}
details{border-top:1px solid var(--line);padding:4px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-size:20px;font-weight:600}
summary::-webkit-details-marker{display:none}
summary .pm{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:.3s var(--ease);font-weight:400}
details[open] summary .pm{transform:rotate(45deg);background:var(--lime);color:var(--ink);border-color:var(--lime)}
details p{color:var(--muted);margin:0 0 22px;max-width:680px}

/* cta */
.cta{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:34px;background:var(--ink2);padding:90px 30px;text-align:center}
.cta .glow{filter:blur(70px)}
.cta h2{font-size:clamp(36px,5vw,60px);position:relative}
.cta p{color:var(--muted);max-width:520px;margin:18px auto 30px;position:relative}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative}

/* footer */
footer{padding:40px 0 50px}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.foot-row b{color:var(--paper);font-weight:600}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a:hover{color:var(--paper)}
.top-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);color:var(--paper)}
.top-btn:hover{background:var(--ink3)}
.disclaimer{font-size:12.5px;color:#6f6a7d;margin-top:22px}

/* floating action */
.fab{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(210,247,74,.6);transition:.3s var(--ease)}
.fab:hover{transform:scale(1.08) rotate(-8deg)}
.fab svg{width:24px;height:24px}

/* doc pages */
.doc{max-width:820px;margin:0 auto;padding:150px 24px 60px}
.doc h1{font-size:clamp(44px,7vw,80px);line-height:.95;font-weight:700;letter-spacing:-.04em;margin:0 0 14px}
.doc h2{font-size:24px;line-height:1.2;margin:40px 0 10px;letter-spacing:-.01em}
.doc p,.doc li{color:#c9c4d4}
.doc a{color:var(--lime)}
.doc table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.doc th,.doc td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.doc th{color:var(--muted);font-weight:500}
.note{border:1px solid rgba(255,194,61,.3);background:rgba(255,194,61,.06);color:#f1d9a1;padding:12px 16px;border-radius:14px;font-size:14px}

/* reveal */
.rv{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}

/* responsive */
@media (max-width:1000px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why{grid-template-columns:minmax(0,1fr);gap:60px}
  .brandcard{margin:0 auto}
  .st-code{display:none}
  .badge-rot{top:auto;bottom:40px;right:5%}
}
@media (max-width:680px){
  .nav a.item.hide-sm{display:none}
  .nav a.item{padding:7px 10px;font-size:13.5px}
  .nav .sep{margin:0 2px}
  .chip{font-size:12.5px;gap:9px}
  .hero{padding:120px 0 60px;min-height:auto}
  .hero h1{font-size:clamp(44px,13vw,64px)}
  .hl{border-radius:14px}
  .st-star{width:54px;right:6%;top:96px}
  .st-ring,.st-code{display:none}
  .badge-rot{position:relative;right:auto;bottom:auto;margin:30px 0 0 auto;width:110px;height:110px}
  .stats{gap:26px}.stats b{font-size:34px}
  .g3,.g4{grid-template-columns:minmax(0,1fr)}
  section{padding:80px 0 20px}
  .vs li{grid-template-columns:1fr;gap:4px}
  summary{font-size:17px}
  .cta{padding:60px 20px}
  .wrap{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none;filter:none}html{scroll-behavior:auto}}