/* =========================================================================
   SentrixShield — Design System
   Spatial intelligence for everyday business
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  /* surface */
  --ink-0:#04060A; --ink-1:#070B11; --ink-2:#0B111A; --ink-3:#111926; --ink-4:#18232F;
  --line:rgba(148,180,200,.13); --line-2:rgba(148,180,200,.24); --line-3:rgba(148,180,200,.34);
  /* text */
  --tx-0:#EDF4F7; --tx-1:#A9BCC8; --tx-2:#6E8493; --tx-3:#4C5F6D;
  /* brand */
  --aqua:#34E0C8; --aqua-2:#19B9A3; --aqua-3:#0C6E62;
  --violet:#7B6CFF; --violet-2:#5B4CDB;
  --amber:#FFB020; --rose:#FF5C7A; --lime:#9BE86B;
  /* effects */
  --glow-aqua:0 0 0 1px rgba(52,224,200,.28), 0 8px 40px -12px rgba(52,224,200,.35);
  --glow-violet:0 0 0 1px rgba(123,108,255,.3), 0 8px 40px -12px rgba(123,108,255,.4);
  --shadow-lg:0 32px 80px -24px rgba(0,0,0,.85);
  --shadow-md:0 16px 40px -18px rgba(0,0,0,.8);
  /* type */
  --f-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* metrics */
  --wrap:1240px; --wrap-narrow:880px; --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px;
  --nav-h:68px;
  --sect:clamp(76px,9vw,148px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  margin:0;background:var(--ink-0);color:var(--tx-1);
  font-family:var(--f-body);font-size:16.5px;line-height:1.65;
  font-feature-settings:"cv02","cv03","cv04","ss01";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--f-display);color:var(--tx-0);margin:0;line-height:1.08;letter-spacing:-.025em;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:rgba(52,224,200,.28);color:#fff}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:4px}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 44px,var(--wrap-narrow));margin-inline:auto}
.section{padding-block:var(--sect);position:relative}
.section--tight{padding-block:clamp(56px,6vw,92px)}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.center{text-align:center}
.mx-auto{margin-inline:auto}

/* ---------- Type ---------- */
.h-hero{font-size:clamp(2.6rem,6.4vw,5.1rem);line-height:.97;letter-spacing:-.04em;font-weight:600}
.h1{font-size:clamp(2.2rem,4.6vw,3.5rem);letter-spacing:-.035em}
.h2{font-size:clamp(1.85rem,3.5vw,2.85rem);letter-spacing:-.032em}
.h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.024em}
.h4{font-size:1.09rem;letter-spacing:-.015em;font-weight:600}
.lede{font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.6;color:var(--tx-1)}
.muted{color:var(--tx-2)}
.dim{color:var(--tx-3)}
.small{font-size:.875rem;line-height:1.6}
.xsmall{font-size:.79rem;line-height:1.55}
.mono{font-family:var(--f-mono);font-size:.83em;letter-spacing:-.02em}
.balance{text-wrap:balance}
.measure{max-width:62ch}
.measure-sm{max-width:50ch}
.grad-text{
  background:linear-gradient(104deg,var(--aqua) 0%,#8FF3E4 32%,var(--violet) 82%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);
  font-size:.715rem;letter-spacing:.17em;text-transform:uppercase;color:var(--aqua);
  margin-bottom:20px;font-weight:500;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--aqua);
  box-shadow:0 0 0 3px rgba(52,224,200,.18),0 0 14px rgba(52,224,200,.9);flex:none;
}
.eyebrow--violet{color:var(--violet)}
.eyebrow--violet::before{background:var(--violet);box-shadow:0 0 0 3px rgba(123,108,255,.18),0 0 14px rgba(123,108,255,.9)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--aqua); --fg:#03110E;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--r-sm);border:1px solid transparent;
  background:var(--bg);color:var(--fg);font-weight:600;font-size:.925rem;letter-spacing:-.008em;
  cursor:pointer;transition:transform .18s cubic-bezier(.3,1,.4,1),box-shadow .22s,background .22s,border-color .22s,color .22s;
  white-space:nowrap;text-align:center;position:relative;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{box-shadow:0 6px 26px -8px rgba(52,224,200,.6)}
.btn--primary:hover{background:#4CEBD5;box-shadow:0 12px 36px -8px rgba(52,224,200,.75)}
.btn--ghost{background:transparent;color:var(--tx-0);border-color:var(--line-2)}
.btn--ghost:hover{background:rgba(148,180,200,.07);border-color:var(--line-3)}
.btn--violet{background:var(--violet);color:#fff;box-shadow:0 6px 26px -8px rgba(123,108,255,.6)}
.btn--violet:hover{background:#8E80FF}
.btn--lg{padding:16px 30px;font-size:1rem}
.btn--sm{padding:9px 15px;font-size:.84rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn svg{flex:none}
.link-arrow{
  display:inline-flex;align-items:center;gap:7px;color:var(--aqua);font-weight:550;font-size:.92rem;
  transition:gap .2s,color .2s;
}
.link-arrow:hover{gap:12px;color:#5FEBD8}
.link-arrow svg{transition:transform .2s}

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(168deg,var(--ink-2),var(--ink-1));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  position:relative;overflow:hidden;
  transition:border-color .28s,transform .28s cubic-bezier(.3,1,.4,1),box-shadow .28s,background .28s;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(520px 260px at var(--mx,50%) var(--my,0%),rgba(52,224,200,.09),transparent 62%);
  transition:opacity .35s;
}
.card--hover:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow-md)}
.card--hover:hover::after{opacity:1}
.card--flush{padding:0}
.card--glow{border-color:rgba(52,224,200,.24);box-shadow:0 0 60px -30px rgba(52,224,200,.5)}
.card__ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(150deg,rgba(52,224,200,.16),rgba(123,108,255,.1));
  border:1px solid rgba(52,224,200,.22);color:var(--aqua);flex:none;
}
.card__ico--violet{background:linear-gradient(150deg,rgba(123,108,255,.18),rgba(52,224,200,.08));border-color:rgba(123,108,255,.26);color:var(--violet)}
.card__ico--amber{background:linear-gradient(150deg,rgba(255,176,32,.16),rgba(255,92,122,.08));border-color:rgba(255,176,32,.26);color:var(--amber)}
.card h3,.card h4{margin-bottom:10px}
.card p{color:var(--tx-2);font-size:.945rem}

/* ---------- Pills / chips / tags ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:100px;
  border:1px solid var(--line);background:rgba(148,180,200,.05);
  font-size:.79rem;color:var(--tx-1);font-weight:500;
}
.pill--aqua{border-color:rgba(52,224,200,.3);background:rgba(52,224,200,.08);color:#7CEEDD}
.pill--violet{border-color:rgba(123,108,255,.32);background:rgba(123,108,255,.1);color:#B0A6FF}
.pill--amber{border-color:rgba(255,176,32,.32);background:rgba(255,176,32,.1);color:#FFCC70}
.pill--rose{border-color:rgba(255,92,122,.32);background:rgba(255,92,122,.1);color:#FF93A8}
.pill__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill--live .pill__dot{animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.tag{
  display:inline-block;padding:4px 10px;border-radius:6px;font-family:var(--f-mono);
  font-size:.71rem;letter-spacing:.02em;border:1px solid var(--line);color:var(--tx-2);
  background:rgba(148,180,200,.04);
}

/* ---------- Prompt chip (signature element) ---------- */
.prompt{
  display:block;width:100%;text-align:left;position:relative;
  padding:15px 17px 15px 44px;border-radius:12px;
  border:1px solid var(--line);background:rgba(11,17,26,.72);
  font-family:var(--f-mono);font-size:.845rem;line-height:1.55;color:var(--tx-1);
  transition:border-color .22s,background .22s,color .22s,transform .22s;cursor:pointer;
}
.prompt::before{
  content:"";position:absolute;left:17px;top:19px;width:13px;height:13px;border-radius:3px;
  border:1.5px solid var(--violet);box-shadow:0 0 10px rgba(123,108,255,.5);
}
.prompt:hover{border-color:rgba(52,224,200,.35);background:rgba(52,224,200,.055);color:var(--tx-0);transform:translateX(3px)}
.prompt em{font-style:normal;color:var(--aqua)}

/* ---------- Surfaces & decoration ---------- */
.hairline{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent)}
.glow-orb{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0}
.noise::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.028;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mesh-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mesh-bg::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(148,180,200,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,180,200,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 62% at 50% 34%,#000 12%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 90% 62% at 50% 34%,#000 12%,transparent 76%);
}
.rel{position:relative;z-index:2}

/* ---------- Header / Nav ---------- */
.hdr{
  position:sticky;top:0;z-index:200;height:var(--nav-h);
  background:rgba(4,6,10,.7);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.hdr.is-stuck{border-bottom-color:var(--line);background:rgba(4,6,10,.9)}
.hdr__in{height:100%;display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;gap:10px;flex:none;font-family:var(--f-display);font-weight:600;font-size:1.06rem;color:var(--tx-0);letter-spacing:-.03em}
.brand svg{flex:none}
.brand span b{font-weight:600;color:var(--aqua)}
.nav{display:flex;align-items:center;gap:3px;margin-left:auto}
.nav a{
  padding:8px 13px;border-radius:8px;font-size:.905rem;color:var(--tx-1);font-weight:500;
  transition:color .2s,background .2s;position:relative;
}
.nav a:hover{color:var(--tx-0);background:rgba(148,180,200,.06)}
.nav a.is-active{color:var(--aqua)}
.nav a.is-active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1.5px;border-radius:2px;
  background:var(--aqua);box-shadow:0 0 10px var(--aqua);
}
.hdr__cta{display:flex;align-items:center;gap:10px;flex:none}
.burger{display:none;width:40px;height:40px;border-radius:9px;border:1px solid var(--line);background:transparent;cursor:pointer;place-items:center}
.burger span{display:block;width:17px;height:1.5px;background:var(--tx-0);border-radius:2px;transition:transform .25s,opacity .2s}
.burger span+span{margin-top:4.5px}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1024px){
  .nav,.hdr__cta .btn--ghost{display:none}
  .burger{display:grid}
  .hdr__in{gap:16px}
  .hdr__cta{margin-left:auto}
}
.drawer{
  position:fixed;inset:var(--nav-h) 0 0;z-index:190;background:rgba(4,6,10,.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:28px 22px 40px;overflow-y:auto;
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}
.drawer.is-open{opacity:1;transform:none;pointer-events:auto}
.drawer a{display:block;padding:15px 4px;font-family:var(--f-display);font-size:1.5rem;color:var(--tx-0);border-bottom:1px solid var(--line);letter-spacing:-.03em}
.drawer a:last-of-type{border-bottom:0}
.drawer .btn{margin-top:22px}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,7vw,96px);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
@media(max-width:1024px){.hero__grid{grid-template-columns:1fr;gap:40px}}
.hero__badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}

/* ---------- Twin demo (signature interactive) ---------- */
.twin{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line-2);background:radial-gradient(120% 100% at 50% 0%,#0B141F,#04060A 72%);
  box-shadow:var(--shadow-lg),0 0 90px -50px rgba(52,224,200,.55);
}
.twin__stage{position:relative;aspect-ratio:16/11;touch-action:none;cursor:crosshair;background:transparent}
.twin{position:relative}
.twin__stage canvas{position:absolute;inset:0;width:100%;height:100%}
.twin__chrome{
  position:absolute;inset-inline:0;top:0;display:flex;align-items:center;gap:10px;
  padding:12px 14px;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,6,10,.88),rgba(4,6,10,.4) 62%,transparent);
}
.twin__chrome .pill{pointer-events:auto;backdrop-filter:blur(8px);flex:none}
.twin__ctrls{margin-left:auto;display:flex;gap:6px;pointer-events:auto;align-items:center;flex:none}
.twin__seg{display:flex;gap:0;border:1px solid var(--line-2);border-radius:100px;overflow:hidden;background:rgba(4,6,10,.7);flex:none}
.twin__hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:5;
  font-family:var(--f-mono);font-size:.735rem;color:var(--tx-2);letter-spacing:.02em;
  background:rgba(4,6,10,.75);padding:6px 13px;border-radius:100px;border:1px solid var(--line);
  backdrop-filter:blur(8px);white-space:nowrap;pointer-events:none;transition:opacity .3s;
}
.twin__sel{
  position:absolute;border:1.5px solid var(--violet);background:rgba(123,108,255,.12);
  border-radius:6px;pointer-events:none;z-index:4;box-shadow:0 0 26px rgba(123,108,255,.42),inset 0 0 26px rgba(123,108,255,.16);
}
.twin__sel::before,.twin__sel::after{content:"";position:absolute;background:var(--violet);border-radius:2px}
.twin__sel::before{left:-3px;top:-3px;width:7px;height:7px;box-shadow:0 0 8px var(--violet)}
.twin__sel::after{right:-3px;bottom:-3px;width:7px;height:7px;box-shadow:0 0 8px var(--violet)}
.twin__label{
  position:absolute;z-index:6;transform:translate(-50%,-140%);
  font-family:var(--f-mono);font-size:.7rem;padding:4px 9px;border-radius:6px;white-space:nowrap;
  background:rgba(6,9,15,.82);border:1px solid rgba(123,108,255,.45);color:#C4BBFF;
  backdrop-filter:blur(8px);pointer-events:none;box-shadow:0 2px 12px rgba(0,0,0,.7);
}
.twin__bar{
  display:flex;gap:10px;align-items:center;padding:13px;border-top:1px solid var(--line);
  background:rgba(7,11,17,.9);flex-wrap:wrap;
}
.twin__input{
  flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:10px;
  background:var(--ink-0);border:1px solid var(--line-2);border-radius:10px;padding:10px 13px;
  transition:border-color .22s,box-shadow .22s;
}
.twin__input:focus-within{border-color:rgba(52,224,200,.5);box-shadow:0 0 0 3px rgba(52,224,200,.1)}
.twin__input span{color:var(--aqua);font-family:var(--f-mono);font-size:.85rem;flex:none}
.twin__input input{
  flex:1;min-width:0;background:transparent;border:0;outline:0;
  font-family:var(--f-mono);font-size:.85rem;color:var(--tx-0);
}
.twin__input input::placeholder{color:var(--tx-3)}
.twin__out{
  border-top:1px solid var(--line);background:var(--ink-1);
  max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.4,0,.2,1);
}
.twin__out.is-open{max-height:900px;overflow-y:auto}
.twin__out-in{padding:22px}
.twin__suggest{display:flex;gap:8px;padding:0 13px 13px;flex-wrap:wrap;background:rgba(7,11,17,.9)}
.chipbtn{
  padding:6px 12px;border-radius:100px;border:1px dashed var(--line-2);background:transparent;
  font-family:var(--f-mono);font-size:.74rem;color:var(--tx-2);cursor:pointer;
  transition:all .2s;white-space:nowrap;
}
.chipbtn:hover{border-style:solid;border-color:rgba(52,224,200,.45);color:var(--aqua);background:rgba(52,224,200,.06)}

/* thinking dots */
.think{display:inline-flex;gap:5px;align-items:center}
.think i{width:6px;height:6px;border-radius:50%;background:var(--aqua);animation:think 1.3s ease-in-out infinite}
.think i:nth-child(2){animation-delay:.18s}.think i:nth-child(3){animation-delay:.36s}
@keyframes think{0%,60%,100%{opacity:.22;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* result blocks */
.metric-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:18px 0}
.metric{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:rgba(148,180,200,.03)}
.metric b{display:block;font-family:var(--f-display);font-size:1.5rem;color:var(--tx-0);letter-spacing:-.03em;line-height:1.1}
.metric small{display:block;font-size:.72rem;color:var(--tx-2);margin-top:4px;letter-spacing:.03em}
.metric i{font-style:normal;font-size:.72rem;font-family:var(--f-mono)}
.up{color:var(--lime)}.down{color:var(--rose)}
.spark{width:100%;height:64px;margin-top:6px}
.barchart{display:flex;align-items:flex-end;gap:5px;height:96px;margin:16px 0 6px}
.barchart div{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--aqua),rgba(52,224,200,.16));min-height:3px;transition:height .7s cubic-bezier(.3,1,.4,1),background .2s;position:relative}
.barchart div:hover{background:linear-gradient(180deg,#6FF0DE,rgba(52,224,200,.3))}
.barchart div[data-peak]{background:linear-gradient(180deg,var(--violet),rgba(123,108,255,.2))}
.axis{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.66rem;color:var(--tx-3);letter-spacing:.02em}

/* ---------- Stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--ink-1);padding:30px 26px;position:relative;transition:background .3s}
.stat:hover{background:var(--ink-2)}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(2rem,3.4vw,2.9rem);color:var(--tx-0);letter-spacing:-.045em;line-height:1;margin-bottom:9px}
.stat b em{font-style:normal;color:var(--aqua);font-size:.62em;vertical-align:.1em;margin-left:1px}
.stat span{font-size:.855rem;color:var(--tx-2);display:block;line-height:1.5}

/* ---------- Steps ---------- */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;grid-template-columns:repeat(5,1fr)}
@media(max-width:1024px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--ink-1);padding:28px 24px 30px;counter-increment:s;position:relative;transition:background .3s}
.step:hover{background:var(--ink-2)}
.step::before{
  content:"0" counter(s);font-family:var(--f-mono);font-size:.76rem;color:var(--aqua);
  letter-spacing:.12em;display:block;margin-bottom:16px;
}
.step h4{margin-bottom:8px}
.step p{font-size:.895rem;color:var(--tx-2)}
.step__t{font-family:var(--f-mono);font-size:.7rem;color:var(--tx-3);margin-top:14px;display:block;letter-spacing:.04em}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:0;margin-bottom:34px}
.tab{
  padding:11px 17px;border:0;background:transparent;color:var(--tx-2);cursor:pointer;
  font-size:.925rem;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .2s,border-color .2s;white-space:nowrap;
}
.tab:hover{color:var(--tx-1)}
.tab.is-active{color:var(--aqua);border-bottom-color:var(--aqua)}
.tabpanel{display:none;animation:fade .4s ease}
.tabpanel.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:var(--f-display);font-size:1.05rem;color:var(--tx-0);font-weight:550;letter-spacing:-.018em;
  transition:color .2s;
}
.acc__q:hover{color:var(--aqua)}
.acc__q i{flex:none;width:22px;height:22px;position:relative;transition:transform .3s}
.acc__q i::before,.acc__q i::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:opacity .25s,transform .25s}
.acc__q i::before{left:4px;right:4px;top:10.5px;height:1.5px}
.acc__q i::after{top:4px;bottom:4px;left:10.5px;width:1.5px}
.acc__item.is-open .acc__q i::after{opacity:0;transform:rotate(90deg)}
.acc__item.is-open .acc__q{color:var(--aqua)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.acc__a>div{padding:0 4px 24px;color:var(--tx-2);font-size:.95rem;max-width:74ch}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__t{display:flex;gap:14px;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee__t{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Media frames ---------- */
.frame{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--ink-2)}
.frame img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.8) contrast(1.06)}
.frame--sq img{aspect-ratio:1}
.frame--tall img{aspect-ratio:4/5}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(4,6,10,.86));pointer-events:none}
.frame__cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2}
.frame__cap h4{margin-bottom:5px}
.frame__cap p{font-size:.85rem;color:var(--tx-1)}
.frame--plain::after{display:none}

/* ---------- Solution cards ---------- */
.sol{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.sol{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.sol{grid-template-columns:1fr}}
.sol__c{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-1);transition:transform .3s cubic-bezier(.3,1,.4,1),border-color .3s,box-shadow .3s;display:flex;flex-direction:column}
.sol__c:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--shadow-md)}
.sol__c img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.72) brightness(.78) contrast(1.08);transition:filter .4s,transform .5s}
.sol__c:hover img{filter:saturate(.95) brightness(.92) contrast(1.05);transform:scale(1.03)}
.sol__im{overflow:hidden;position:relative;background:var(--ink-3)}
.sol__im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,10,.1),rgba(4,6,10,.9)),radial-gradient(60% 80% at 80% 10%,rgba(52,224,200,.16),transparent 60%)}
.sol__b{padding:24px;flex:1;display:flex;flex-direction:column}
.sol__b p{font-size:.91rem;color:var(--tx-2);margin-bottom:16px}
.sol__b h3{margin-bottom:9px}
.sol__l{margin-top:auto;display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding-top:16px}
.sol__l li{font-size:.845rem;color:var(--tx-1);display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.sol__l li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--aqua);margin-top:8px;flex:none;box-shadow:0 0 8px rgba(52,224,200,.7)}

/* ---------- Pricing ---------- */
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media(max-width:1000px){.price{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.plan{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;background:var(--ink-1);display:flex;flex-direction:column;position:relative;transition:border-color .3s,transform .3s,box-shadow .3s}
.plan:hover{border-color:var(--line-2);transform:translateY(-4px)}
.plan--feature{border-color:rgba(52,224,200,.36);background:linear-gradient(170deg,rgba(52,224,200,.06),var(--ink-1) 46%);box-shadow:0 0 70px -34px rgba(52,224,200,.65)}
.plan__flag{position:absolute;top:-1px;right:24px;transform:translateY(-50%);padding:5px 13px;border-radius:100px;background:var(--aqua);color:#03110E;font-size:.71rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.plan h3{margin-bottom:6px}
.plan__d{font-size:.885rem;color:var(--tx-2);min-height:44px;margin-bottom:22px}
.plan__p{display:flex;align-items:flex-end;gap:5px;margin-bottom:6px}
.plan__p b{font-family:var(--f-display);font-size:2.5rem;color:var(--tx-0);letter-spacing:-.04em;line-height:1}
.plan__p span{font-size:.85rem;color:var(--tx-2);padding-bottom:6px}
.plan__sub{font-size:.79rem;color:var(--tx-3);margin-bottom:24px;font-family:var(--f-mono)}
.plan ul{display:flex;flex-direction:column;gap:11px;margin-bottom:28px;flex:1}
.plan li{display:flex;gap:11px;font-size:.895rem;color:var(--tx-1);line-height:1.5;align-items:flex-start}
.plan li svg{flex:none;margin-top:3px;color:var(--aqua)}
.plan li.off{color:var(--tx-3)}
.plan li.off svg{color:var(--tx-3)}

/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-1)}
table{width:100%;border-collapse:collapse;min-width:660px}
th,td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem}
th{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-2);font-weight:500;background:rgba(148,180,200,.03)}
td{color:var(--tx-1)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(148,180,200,.025)}
td b,th b{color:var(--tx-0);font-weight:600}
.tick{color:var(--aqua)}.cross{color:var(--tx-3)}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.815rem;color:var(--tx-1);font-weight:550;letter-spacing:.01em}
.field label span{color:var(--rose)}
.input,textarea.input,select.input{
  background:var(--ink-0);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;
  font-size:.925rem;color:var(--tx-0);outline:0;width:100%;
  transition:border-color .2s,box-shadow .2s,background .2s;font-family:inherit;
}
.input::placeholder{color:var(--tx-3)}
.input:focus{border-color:rgba(52,224,200,.55);box-shadow:0 0 0 3px rgba(52,224,200,.1);background:var(--ink-1)}
textarea.input{resize:vertical;min-height:118px;line-height:1.6}
select.input{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236E8493' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.checkline{display:flex;gap:11px;align-items:flex-start;font-size:.85rem;color:var(--tx-2);line-height:1.55;cursor:pointer}
.checkline input{margin-top:3px;accent-color:var(--aqua);width:15px;height:15px;flex:none;cursor:pointer}
.form-note{font-size:.79rem;color:var(--tx-3);line-height:1.55}
.form-msg{padding:14px 16px;border-radius:10px;font-size:.885rem;display:none}
.form-msg.ok{display:block;background:rgba(52,224,200,.1);border:1px solid rgba(52,224,200,.3);color:#7CEEDD}
.form-msg.err{display:block;background:rgba(255,92,122,.1);border:1px solid rgba(255,92,122,.3);color:#FF93A8}

/* ---------- Footer ---------- */
.ftr{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--ink-0),#02040700);padding-top:70px;position:relative;overflow:hidden}
.ftr__grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:38px;padding-bottom:52px}
@media(max-width:1000px){.ftr__grid{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr h5{font-family:var(--f-mono);font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2);margin:0 0 17px;font-weight:500}
.ftr li{margin-bottom:10px}
.ftr li a{font-size:.895rem;color:var(--tx-1);transition:color .2s}
.ftr li a:hover{color:var(--aqua)}
.ftr__bot{border-top:1px solid var(--line);padding:22px 0 30px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.ftr__bot p{font-size:.8rem;color:var(--tx-3)}
.social{display:flex;gap:9px}
.social a{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;color:var(--tx-2);transition:all .2s}
.social a:hover{color:var(--aqua);border-color:rgba(52,224,200,.4);background:rgba(52,224,200,.06)}
.office{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:rgba(148,180,200,.025);margin-bottom:12px}
.office b{display:flex;align-items:center;gap:8px;color:var(--tx-0);font-size:.9rem;margin-bottom:6px;font-weight:600}
.office b i{width:5px;height:5px;border-radius:50%;background:var(--aqua);box-shadow:0 0 8px var(--aqua);font-style:normal}
.office p{font-size:.815rem;color:var(--tx-2);line-height:1.55}

/* ---------- CTA band ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(42px,6vw,76px);
  border:1px solid var(--line-2);text-align:center;
  background:radial-gradient(120% 130% at 50% -10%,rgba(52,224,200,.13),transparent 58%),
             radial-gradient(90% 110% at 84% 100%,rgba(123,108,255,.16),transparent 62%),
             linear-gradient(170deg,var(--ink-2),var(--ink-0));
}

/* ---------- Chat widget ---------- */
.sentri-fab{
  position:fixed;right:22px;bottom:22px;z-index:300;width:56px;height:56px;border-radius:18px;
  border:1px solid rgba(52,224,200,.4);cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(150deg,#0D1B22,#06110F);color:var(--aqua);
  box-shadow:0 12px 40px -10px rgba(0,0,0,.9),0 0 0 0 rgba(52,224,200,.4);
  transition:transform .25s cubic-bezier(.3,1.3,.5,1),box-shadow .3s;
}
.sentri-fab:hover{transform:scale(1.07) translateY(-2px);box-shadow:0 16px 46px -10px rgba(0,0,0,.9),0 0 28px -6px rgba(52,224,200,.5)}
.sentri-fab::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(52,224,200,.45);
  animation:ring 2.6s ease-out infinite;
}
@keyframes ring{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.4);opacity:0}}
.sentri-fab.is-open::after{display:none}
.sentri{
  position:fixed;right:22px;bottom:90px;z-index:300;width:min(calc(100vw - 44px),392px);
  height:min(calc(100vh - 140px),580px);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--ink-2),var(--ink-0));border:1px solid var(--line-2);
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;
  transition:opacity .26s,transform .26s cubic-bezier(.3,1.2,.5,1);
}
.sentri.is-open{opacity:1;transform:none;pointer-events:auto}
.sentri__h{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--line);background:rgba(11,17,26,.9);flex:none}
.sentri__h b{font-family:var(--f-display);font-size:.98rem;color:var(--tx-0);display:block;letter-spacing:-.02em}
.sentri__h small{font-size:.72rem;color:var(--tx-2);display:flex;align-items:center;gap:5px}
.sentri__h small i{width:5px;height:5px;border-radius:50%;background:var(--lime);font-style:normal;box-shadow:0 0 7px var(--lime)}
.sentri__x{margin-left:auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--tx-2);cursor:pointer;display:grid;place-items:center;transition:all .2s;flex:none}
.sentri__x:hover{color:var(--tx-0);border-color:var(--line-2)}
.sentri__body{flex:1;overflow-y:auto;padding:17px;display:flex;flex-direction:column;gap:13px;scrollbar-width:thin}
.msg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:.885rem;line-height:1.58;white-space:pre-wrap;word-wrap:break-word}
.msg.bot{background:var(--ink-3);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start;color:var(--tx-1)}
.msg.me{background:linear-gradient(150deg,rgba(52,224,200,.2),rgba(52,224,200,.1));border:1px solid rgba(52,224,200,.3);border-bottom-right-radius:5px;align-self:flex-end;color:#D9FBF5}
.msg strong{color:var(--tx-0);font-weight:600}
.msg a{color:var(--aqua);text-decoration:underline;text-underline-offset:2px}
.sentri__q{display:flex;gap:7px;padding:0 17px 12px;flex-wrap:wrap;flex:none}
.sentri__f{display:flex;gap:9px;padding:13px 17px;border-top:1px solid var(--line);background:rgba(11,17,26,.9);flex:none}
.sentri__f input{flex:1;min-width:0;background:var(--ink-0);border:1px solid var(--line-2);border-radius:10px;padding:10px 13px;font-size:.885rem;outline:0;transition:border-color .2s}
.sentri__f input:focus{border-color:rgba(52,224,200,.5)}
.sentri__f button{width:40px;height:40px;border-radius:10px;border:0;background:var(--aqua);color:#03110E;cursor:pointer;display:grid;place-items:center;flex:none;transition:background .2s,transform .2s}
.sentri__f button:hover{background:#4CEBD5;transform:scale(1.05)}
.sentri__f button[disabled]{opacity:.4;pointer-events:none}
@media(max-width:520px){
  .sentri{right:12px;left:12px;width:auto;bottom:82px;height:min(calc(100vh - 120px),540px)}
  .sentri-fab{right:14px;bottom:14px}
}

/* ---------- Reveal ---------- */
[data-rv]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
[data-rv].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none}}

/* ---------- Page header ---------- */
.phead{padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(36px,4vw,54px);position:relative;overflow:hidden}
.crumb{display:flex;gap:9px;align-items:center;font-family:var(--f-mono);font-size:.74rem;color:var(--tx-3);margin-bottom:22px}
.crumb a:hover{color:var(--aqua)}
.crumb i{font-style:normal;opacity:.5}

/* ---------- Misc ---------- */
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:.945rem;color:var(--tx-1);line-height:1.6;margin-bottom:13px}
.checklist svg{flex:none;margin-top:4px;color:var(--aqua)}
.numlist{counter-reset:n}
.numlist li{counter-increment:n;display:flex;gap:15px;align-items:flex-start;margin-bottom:20px}
.numlist li::before{
  content:counter(n,decimal-leading-zero);font-family:var(--f-mono);font-size:.72rem;color:var(--aqua);
  border:1px solid rgba(52,224,200,.3);border-radius:7px;width:27px;height:27px;display:grid;place-items:center;flex:none;margin-top:1px;
  background:rgba(52,224,200,.06);
}
.kvs{display:flex;flex-direction:column;gap:0}
.kv{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.kv:last-child{border-bottom:0}
.kv span{color:var(--tx-2)}
.kv b{color:var(--tx-0);font-weight:550;text-align:right}
.scrim{position:fixed;inset:0;background:rgba(4,6,10,.6);z-index:180;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.is-on{opacity:1;pointer-events:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 18px;background:var(--aqua);color:#03110E;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}
.hide{display:none!important}
.nowrap{white-space:nowrap}

/* twin mode toggle (segmented) */
.modebtn{border:0;border-radius:0;padding:6px 13px;background:transparent;color:var(--tx-2);font-family:var(--f-mono);font-size:.74rem;cursor:pointer;transition:all .2s}
.modebtn+.modebtn{border-left:1px solid var(--line)}
.modebtn:hover{color:var(--tx-0)}
.modebtn.is-active{background:rgba(123,108,255,.16);color:#B7ADFF}
.twin__stage.is-orbit{cursor:grab}
.twin__stage.is-orbit:active{cursor:grabbing}
@media(max-width:760px){
  .twin__chrome{
    position:static;background:var(--ink-2);border-bottom:1px solid var(--line);
    pointer-events:auto;flex-wrap:wrap;padding:11px 12px;gap:8px;
  }
  /* controls drop to their own row and scroll there if the phone is very narrow */
  .twin__ctrls{
    margin-left:0;width:100%;justify-content:flex-start;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;padding-bottom:1px;
  }
  .twin__ctrls::-webkit-scrollbar{display:none}
  .twin__chrome .pill{font-size:.68rem;padding:5px 10px;white-space:nowrap;flex:none}
  .modebtn,.twin__chrome .chipbtn{font-size:.665rem;padding:5px 8px;white-space:nowrap;flex:none}
  .twin__ctrls{gap:5px}
  .twin__stage{aspect-ratio:1/1}
  .twin__bar{flex-direction:column;align-items:stretch;gap:9px}
  .twin__bar>.pill{align-self:flex-start}
  .twin__input{flex:0 0 auto}
  .twin__bar .btn{width:100%}
  .twin__hint{font-size:.66rem;max-width:calc(100% - 26px);white-space:nowrap;text-align:center;bottom:10px}
  .twin__label{font-size:.63rem;padding:3px 7px}
}