/* ====================================================================
   NexEdge Studios - shared stylesheet
   One file for every page so styling cannot drift between them.
   No webfonts, no frameworks, no external requests of any kind.
   ==================================================================== */
:root{
  --bg:#0b0d12;            /* near black, faint cool cast */
  --bg-2:#10131a;
  --bg-3:#080a0e;
  --card:rgba(19,23,31,.82);
  --line:#232833;
  --line-2:#2e343f;
  --fg:#eef1f6;
  --muted:#8b93a1;
  --accent:#ee2b39;        /* NexEdge red */
  --accent-soft:rgba(238,43,57,.14);
  --accent-ink:#ffffff;
  --max:1180px;
  --gutter:30px;
}
*{box-sizing:border-box}
/* Any explicit display (flex/grid) beats the hidden attribute's default
   display:none, so hidden elements would still show. This makes [hidden]
   mean hidden, everywhere. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:860px}
a{color:inherit}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} }

/* ---------- nav ---------- */
nav.top{position:sticky;top:0;z-index:60;
  background:rgba(11,13,18,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:13px var(--gutter);
  display:flex;align-items:center;gap:16px}
.word{font-weight:900;letter-spacing:-.045em;font-size:20px;
  text-decoration:none;white-space:nowrap;margin-right:4px;
  display:inline-flex;align-items:center;gap:9px}
.word b{color:var(--accent)}
/* The logo is transparent on purpose, so it sits on whatever is behind it. */
.word img{width:26px;height:26px;display:block;flex:none}
.fbrand .word img{width:32px;height:32px}
.panel-top .word img{width:24px;height:24px}
/* On mobile: burger left, wordmark dead centre, social icons right.
   This WAS absolute centring, written when the right side of the nav was
   empty. The social icons were added later and the absolute wordmark - being
   out of normal flow - had no idea they existed and sat on top of them in
   portrait. A 3-column grid keeps it dead centre (the 1fr side columns are
   equal, so the centre column is centred in the viewport regardless of how
   wide the burger or the icons are) AND makes overlap structurally
   impossible. Do not go back to absolute positioning here. */
@media(max-width:880px){
  .nav-in{display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;gap:8px;min-height:40px}
  .burger{justify-self:start}
  nav.top .word{position:static;transform:none;margin:0;justify-self:center}
  .social{justify-self:end;margin-left:0}
}
.tabs{display:flex;gap:2px;align-items:center;flex:1}
.tabs a{color:var(--muted);text-decoration:none;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:8px 11px;border-radius:8px;white-space:nowrap;transition:color .2s,background .2s}
.tabs a:hover{color:var(--fg);background:#171b23}
.tabs a.on{color:var(--fg)}
.tabs a.soon{opacity:.5}
.tabs a.soon:after{content:" \2022";color:var(--accent)}
@media(max-width:880px){ .word{font-size:18px} .tabs{display:none} }

/* ---------- social icons, top right ---------- */
.social{display:flex;gap:6px;align-items:center;margin-left:auto;flex:none}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  color:var(--muted);background:var(--card);
  transition:color .2s,border-color .2s,transform .18s ease-out;
}
.social a:hover{color:var(--fg);border-color:var(--accent);transform:translateY(-1px)}
.social svg{width:17px;height:17px;fill:currentColor;display:block}
@media(max-width:420px){ .social a{width:30px;height:30px} .social svg{width:15px;height:15px} }

/* Narrow phones: burger + wordmark + 3 icons genuinely do not fit at 320-360px
   at full size - the icons were being clipped off the right edge. Shrink the
   nav's OWN padding and the wordmark to make the row fit.
   ⚠️ Do NOT shrink --gutter to solve this. --gutter is 30px on purpose: it is
   what stops overflow-x:hidden slicing the hero ring on the home page. This
   rule touches .nav-in's padding only, so the ring is unaffected. */
@media(max-width:400px){
  .nav-in{padding-left:10px;padding-right:10px;gap:6px}
  nav.top .word{font-size:15px;gap:6px}
  nav.top .word img{width:22px;height:22px}
  .social{gap:5px}
}

/* ---------- burger + left slide-out panel ---------- */
.burger{margin-left:-10px;margin-right:4px;display:inline-flex;flex-direction:column;
  justify-content:center;gap:5px;width:44px;height:40px;padding:0 10px;
  background:none;border:0;cursor:pointer;z-index:80;flex:none}
/* Desktop keeps the inline tabs, so the burger and slide-out are mobile only.
   The 880px breakpoint below is where .tabs hides - these two must stay in sync. */
@media(min-width:881px){ .burger{display:none} }
.burger i{display:block;height:2px;background:var(--fg);border-radius:2px;
  transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .25s}
.burger i:nth-child(1){width:100%}
.burger i:nth-child(2){width:70%;align-self:flex-end}
.burger i:nth-child(3){width:85%;align-self:flex-end}
body.panel-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg);width:100%}
body.panel-open .burger i:nth-child(2){opacity:0}
body.panel-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:100%}

.scrim{position:fixed;inset:0;background:rgba(4,5,8,.62);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;z-index:70;
  transition:opacity 400ms cubic-bezier(.4,0,.2,1),visibility 400ms}
body.panel-open .scrim{opacity:1;visibility:visible}

.panel{position:fixed;top:0;left:0;height:100dvh;width:100%;max-width:600px;
  background:var(--bg-2);border-right:1px solid var(--line);z-index:75;
  transform:translateX(-100%);
  transition:transform 600ms cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  padding:0 calc(6vw + 20px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.panel::-webkit-scrollbar{width:6px}
.panel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
body.panel-open .panel{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){ .panel,.scrim{transition:none} }
.panel-top{display:flex;align-items:center;justify-content:space-between;
  padding:22px 0 10px;margin-bottom:10px}
.panel-close{background:none;border:0;color:var(--muted);cursor:pointer;
  font-size:26px;line-height:1;padding:6px 10px;border-radius:8px}
.panel-close:hover{color:var(--fg);background:#191d26}
.panel a.pl{display:block;text-decoration:none;color:var(--fg);
  font-weight:800;letter-spacing:-.02em;font-size:clamp(1.4rem,4.4vw,1.95rem);
  padding:26px 0;border-bottom:1px solid var(--line);
  transition:color .2s,padding-left .3s cubic-bezier(.4,0,.2,1)}
.panel a.pl:hover{color:var(--accent);padding-left:10px}
.panel a.pl small{display:block;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:7px}
.panel a.pl .pdot{color:var(--accent);font-size:1rem;vertical-align:middle}
.panel-foot{margin-top:auto;padding:26px 0 40px;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.panel-foot .btn{
  width:100%;justify-content:center;text-align:center;
  /* the email is long: let it shrink and wrap rather than overflow the pill */
  padding-left:14px;padding-right:14px;font-size:.88rem;
  white-space:normal;overflow-wrap:anywhere;
}
.panel-foot p{margin:13px 0 0;color:var(--muted);font-size:.82rem;text-align:center}
.panel-mini{display:flex;gap:16px;justify-content:center;margin-top:18px}
.panel-mini a{color:var(--muted);text-decoration:none;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.panel-mini a:hover{color:var(--fg)}

/* ---------- hero ---------- */
header.hero{padding:100px 0 78px;position:relative}
header.hero:before{content:"";position:absolute;inset:-45% -20% auto -20%;height:560px;
  background:radial-gradient(56% 56% at 46% 40%, var(--accent-soft), transparent 70%);
  pointer-events:none}
.status{display:inline-flex;align-items:center;gap:11px;margin-bottom:24px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(238,43,57,.6)}
  70%{box-shadow:0 0 0 11px rgba(238,43,57,0)}
  100%{box-shadow:0 0 0 0 rgba(238,43,57,0)}
}
@media(prefers-reduced-motion:reduce){ .dot{animation:none} }
.status span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
h1{margin:0 0 26px;font-weight:900;letter-spacing:-.045em;
  font-size:clamp(2.7rem,8.8vw,5.8rem);line-height:1.02;text-transform:uppercase}
/* hand-drawn ring: dash length measured in JS so it always closes;
   small left overhang so the first letter is never clipped */
.ring{position:relative;display:inline-block;white-space:nowrap}
.ring svg{position:absolute;left:-5%;top:-36%;width:114%;height:178%;
  overflow:visible;pointer-events:none}
.ring svg path{fill:none;stroke:var(--accent);stroke-width:7;
  stroke-linecap:round;stroke-linejoin:round}
.ring.go svg path{animation:draw 1.25s cubic-bezier(.5,.05,.25,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .ring svg path{stroke-dashoffset:0 !important;animation:none !important} }
.lede{font-size:clamp(1.02rem,2.1vw,1.18rem);color:var(--muted);margin:0 0 18px;max-width:54ch}
.lede strong{color:var(--fg);font-weight:700}
.flip{font-size:clamp(1.04rem,2.2vw,1.26rem);font-weight:700;color:var(--fg);
  margin:0 0 32px;max-width:54ch}
.flip em{color:var(--accent);font-style:normal}

/* ---------- buttons ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:9px;
  padding:14px 24px;border-radius:999px;text-decoration:none;
  font-weight:700;font-size:.94rem;border:1px solid var(--line-2);
  color:var(--fg);background:var(--card);
  transition:transform .18s ease-out,border-color .2s,filter .2s}
.btn:hover{border-color:var(--accent)}
.btn.solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.solid:hover{filter:brightness(1.1)}
.microcopy{margin:15px 0 0;font-size:.86rem;color:var(--muted)}

/* ---------- sections ---------- */
section{padding:82px 0;scroll-margin-top:72px}
.head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:22px;margin-bottom:32px;flex-wrap:wrap}
.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0 0 10px}
.h2{margin:0;font-weight:900;letter-spacing:-.035em;line-height:1.05;
  font-size:clamp(1.7rem,4.4vw,2.6rem)}
.sub{margin:12px 0 0;color:var(--muted);max-width:58ch}
.note{font-size:.85rem;color:var(--muted);margin:0}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.cell{grid-column:span 12;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:30px;position:relative;
  transition:border-color .3s,box-shadow .3s}
.cell:hover{border-color:var(--accent);box-shadow:0 0 34px rgba(238,43,57,.13)}
@media(min-width:840px){
  .cell.w8{grid-column:span 8}
  .cell.w4{grid-column:span 4}
  .cell.w6{grid-column:span 6}
}
.ic{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--accent);color:var(--accent);
  margin-bottom:20px;transition:background .35s,color .35s}
.cell:hover .ic{background:var(--accent);color:var(--accent-ink)}
.ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cell h3{margin:0 0 10px;font-size:1.22rem;letter-spacing:-.02em}
.cell p{margin:0;color:var(--muted);font-size:.96rem;max-width:48ch}
.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;align-items:center;gap:10px;font-size:.85rem;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--fg)}
.ticks i{width:6px;height:6px;background:var(--accent);border-radius:2px;flex:none}

/* ---------- cards ---------- */
.grid2{display:grid;gap:14px}
@media(min-width:820px){ .grid2{grid-template-columns:repeat(2,1fr)} }
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px;position:relative;transition:border-color .3s;
  display:block;text-decoration:none}
.card:hover{border-color:var(--line-2)}
.card h3{margin:0 0 10px;font-size:1.14rem;letter-spacing:-.015em;padding-right:96px}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.tag{position:absolute;top:18px;right:18px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;font-weight:700}
.card.lead{border-color:rgba(238,43,57,.45)}
.card.lead .tag{color:var(--accent);border-color:rgba(238,43,57,.5)}
.free{color:var(--accent);font-weight:700}
.empty{border:1px dashed var(--line-2);border-radius:16px;padding:32px;
  color:var(--muted);font-size:.96rem}
.empty b{color:var(--fg)}

/* ---------- disclosure ---------- */
.disclosure{background:var(--card);border:1px solid var(--line-2);border-radius:14px;
  padding:20px 22px;margin:0 0 28px}
.disclosure p{margin:0;color:var(--muted);font-size:.92rem}
.disclosure b{color:var(--fg)}

/* ---------- final cta ---------- */
.final{border-top:1px solid var(--line);padding:92px 0;text-align:center;
  position:relative;overflow:hidden}
.final:before{content:"";position:absolute;inset:auto -20% -60% -20%;height:420px;
  background:radial-gradient(50% 50% at 50% 50%, var(--accent-soft), transparent 70%);
  pointer-events:none}
.final h2{margin:0 auto 16px;font-weight:900;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(1.9rem,5.6vw,3.4rem);text-transform:uppercase;max-width:17ch;position:relative}
.final p{margin:0 auto 30px;color:var(--muted);max-width:48ch;font-size:1.04rem;position:relative}
.final .cta-row{justify-content:center;position:relative}

/* ---------- page header (inner pages) ---------- */
.phead{padding:74px 0 8px}
.phead h1{font-size:clamp(2.1rem,6vw,3.4rem);margin-bottom:14px}
.phead p{margin:0;color:var(--muted);max-width:60ch;font-size:1.05rem}

/* ---------- comparison tool ---------- */
.filters{display:grid;gap:18px;margin-bottom:34px}
.frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.flabel{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-right:6px;min-width:78px}
.chip{background:var(--card);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:9px 16px;font-size:.86rem;font-weight:700;
  cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.chip:hover{color:var(--fg);border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink)}
.count{margin:0 0 18px;color:var(--muted);font-size:.88rem}

.plist{display:grid;gap:14px}
@media(min-width:900px){ .plist{grid-template-columns:repeat(2,1fr)} }
.prod{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:26px;display:flex;flex-direction:column;transition:border-color .3s}
.prod:hover{border-color:var(--line-2)}
.prod.pick{border-color:rgba(238,43,57,.5)}
.prod-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.prod h3{margin:0 0 6px;font-size:1.12rem;letter-spacing:-.015em}
.band{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:4px 10px;white-space:nowrap}
.prod.pick .band{color:var(--accent);border-color:rgba(238,43,57,.5)}
.verdict{margin:10px 0 18px;color:var(--fg);font-size:.98rem;line-height:1.55}
.specs{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.9rem}
.specs th,.specs td{text-align:left;padding:8px 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.specs th{color:var(--muted);font-weight:600;width:42%;
  letter-spacing:.04em;text-transform:uppercase;font-size:.74rem;padding-top:11px}
.specs td{color:var(--fg)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.prod .btn{margin-top:auto;align-self:flex-start}
.noprice{margin:12px 0 0;font-size:.8rem;color:var(--muted)}

/* ---------- comparison chart ---------- */
.view{display:flex;gap:6px;margin-left:auto}
.view button{background:var(--card);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:8px 15px;font-size:.8rem;font-weight:700;cursor:pointer;
  letter-spacing:.06em;text-transform:uppercase;transition:all .2s}
.view button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink)}
.chartwrap{margin:0 0 34px}
.chartwrap h3{margin:0 0 14px;font-size:1.05rem;letter-spacing:.02em}
.chartscroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;
  background:var(--card);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.chartscroll::-webkit-scrollbar{height:8px}
.chartscroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
table.chart{border-collapse:collapse;width:100%;min-width:760px;font-size:.9rem}
table.chart th,table.chart td{padding:14px 16px;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top}
table.chart thead th{position:sticky;top:0;background:var(--bg-2);z-index:2;
  font-size:.95rem;letter-spacing:-.01em;color:var(--fg);white-space:nowrap}
table.chart tbody th{color:var(--muted);font-weight:600;font-size:.74rem;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  position:sticky;left:0;background:var(--card);z-index:1;min-width:150px}
table.chart thead th:first-child{left:0;z-index:3;background:var(--bg-2)}
table.chart td{color:var(--fg);white-space:nowrap}
table.chart td.blank{color:var(--muted);opacity:.5}
table.chart tr:last-child th,table.chart tr:last-child td{border-bottom:0}
table.chart .colband{display:block;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:5px}
table.chart .pickcol{color:var(--accent)}
table.chart .buy{padding-top:18px;padding-bottom:18px}
table.chart .buy .btn{padding:10px 16px;font-size:.84rem}
.charthint{margin:10px 0 0;font-size:.8rem;color:var(--muted)}

/* ---------- team ---------- */
.people{display:grid;gap:16px}
@media(min-width:820px){ .people{grid-template-columns:repeat(2,1fr)} }
.person{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:30px;transition:border-color .3s}
.person:hover{border-color:var(--line-2)}
.avatar{width:104px;height:104px;border-radius:50%;overflow:hidden;margin-bottom:20px;
  border:1px solid var(--line-2);background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;position:relative}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* until a real photo is dropped in, show initials instead of a broken image */
.avatar:before{content:attr(data-initials);position:absolute;
  font-weight:900;font-size:1.8rem;letter-spacing:-.03em;color:var(--muted);opacity:0}
.avatar.noimg:before{opacity:1}
.person h3{margin:0 0 4px;font-size:1.24rem;letter-spacing:-.02em}
.person .role{margin:0 0 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:800}
.person p{margin:0 0 12px;color:var(--muted);font-size:.96rem}
.person p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg-3)}
.fgrid{display:grid;gap:34px;padding:62px 0 42px}
@media(min-width:820px){ .fgrid{grid-template-columns:1.6fr 1fr 1fr} }
.fbrand .word{font-size:22px;display:inline-block;margin-bottom:12px}
.fbrand p{margin:0;color:var(--muted);font-size:.94rem;max-width:34ch}
footer h4{margin:0 0 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:800}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer ul a{color:var(--muted);text-decoration:none;font-size:.94rem;transition:color .2s}
footer ul a:hover{color:var(--fg)}
.fbot{border-top:1px solid var(--line);padding:22px 0 40px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.84rem}
.tm{font-size:.62em;vertical-align:super;line-height:0;margin-left:1px}
.copy-link{color:var(--muted);text-decoration:none;transition:color .2s}
.copy-link:hover{color:var(--fg)}