/* Netra — netraapp.com — shared stylesheet */
:root{
  --primary:#1F4ED8; --accent:#2050E0; --bright:#3070F0; --soft:#8090F0;
  --bg:#F0F0F0; --surface:#FFFFFF; --card:#E0E8F0; --tint:#F5F7FC; --deep:#0E1630;
  --dark:#1A1D26; --grey1:#4A4A4A; --grey2:#777777;
  --danger:#D8341F; --warn:#C98A1B; --ok:#1F8A4C;
  --cardBorder:#E0E8F0; --divider:#F0F0F0; --hairline:#E4E9F2;
  --r-sm:8px; --r-md:14px; --r-lg:24px; --r-pill:999px;
  --shadow-card:0 2px 8px rgba(31,78,216,.06), 0 12px 32px rgba(26,29,38,.06);
  --shadow-hover:0 4px 12px rgba(31,78,216,.10), 0 20px 48px rgba(26,29,38,.10);
  --shadow-hero:0 40px 90px rgba(14,22,48,.18);
  --pad:clamp(56px,8vw,112px);
}
html[data-theme="dark"]{
  --primary:#5B86FF; --accent:#6C90FF; --bright:#7CA0FF; --soft:#4A5CA8;
  --bg:#0E1630; --surface:#17204A; --card:#17204A; --tint:#131C3D; --deep:#080D1F;
  --dark:#E9EDFB; --grey1:#C7D0F0; --grey2:#8B96C4;
  --danger:#FF6E62; --warn:#F0B93F; --ok:#3FCB8A;
  --cardBorder:#28336B; --divider:#1D2650; --hairline:#232E60;
  --shadow-card:none; --shadow-hover:none; --shadow-hero:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--grey1);font-family:Outfit,system-ui,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--dark)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--accent)}
button{font-family:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--bright) 40%,transparent);outline-offset:2px;border-radius:4px}

/* ---------- type ---------- */
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--primary)}
.eyebrow--mute{color:var(--grey2)}
.h1{font-size:clamp(36px,5vw,60px);font-weight:600;line-height:1.06;letter-spacing:-.025em}
.h2{font-size:clamp(28px,3.6vw,42px);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.h3{font-size:clamp(20px,1.8vw,24px);font-weight:600;line-height:1.3;letter-spacing:-.01em}
.h4{font-size:19px;font-weight:600;line-height:1.35}
.lead{font-size:clamp(17px,1.35vw,19px);line-height:1.65;color:var(--grey1);max-width:58ch}
.body{font-size:16px;line-height:1.7;color:var(--grey1);max-width:68ch}
.small{font-size:14px;font-weight:500;line-height:1.55;color:var(--grey2)}
.hl{color:var(--primary)}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}
.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}.mt48{margin-top:48px}
.tabnum{font-variant-numeric:tabular-nums}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- layout ---------- */
.wrap{max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
.wrap--narrow{max-width:820px}
.sec{padding-top:var(--pad);padding-bottom:var(--pad)}
.sec--surface{background:var(--surface)}
.sec--bg{background:var(--bg)}
.sec--tint{background:var(--tint)}
.sec--deep{background:var(--deep);--dark:#E9EDFB;--grey1:#A9B4DC;--grey2:#8B96C4;--surface:#17204A;--tint:#17204A;--card:#28336B;--cardBorder:#28336B;--hairline:#28336B;--divider:#28336B;--primary:#5B86FF;--accent:#7CA0FF;--bright:#7CA0FF;--warn:#F0B93F;--ok:#3FCB8A;--danger:#FF6E62;--shadow-card:none;--shadow-hover:none}
.sec--grad{background:linear-gradient(135deg,var(--primary) 0%,var(--bright) 100%);--dark:#fff;--grey1:rgba(255,255,255,.85);--grey2:rgba(255,255,255,.75)}
.sec--grad .btn--primary{background:#fff;color:var(--primary)}
.sec--grad .btn--primary:hover{background:#fff;opacity:.9;color:var(--primary)}
.sec--grad .btn--secondary{color:#fff;border-color:rgba(255,255,255,.6)}
.sec--grad .btn--secondary:hover{color:#fff;border-color:#fff}
.sec--deep .btn--primary{color:#0E1630}
.sec--deep .btn--primary:hover{color:#0E1630}
.grid{display:grid;gap:24px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.split{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,4.5vw,64px)}
.split>*{flex:1 1 380px;min-width:0}
.split--rev{flex-wrap:wrap-reverse}
.stack{display:flex;flex-direction:column;gap:clamp(48px,7vw,96px)}
.rowbtns{display:flex;flex-wrap:wrap;gap:12px}
.center .rowbtns{justify-content:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 28px;border-radius:var(--r-pill);font-size:16px;font-weight:600;letter-spacing:.01em;border:0;cursor:pointer;white-space:nowrap}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--accent);color:#fff}
.btn--secondary{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn--secondary:hover{color:var(--accent);border-color:var(--accent)}
.btn--quiet{background:var(--surface);color:var(--dark);border:1.5px solid var(--cardBorder)}
.btn--quiet:hover{color:var(--primary);border-color:var(--primary)}
.btn--store{background:var(--dark);color:var(--surface);flex-direction:row}
.btn--store:hover{opacity:.88;color:var(--surface)}
.btn--store span{display:flex;flex-direction:column;line-height:1.1;align-items:flex-start}
.btn--store small{font-size:11px;opacity:.75;font-weight:500}
.btn--store b{font-size:15px;font-weight:600}
.btn--full{width:100%}
.link{font-size:15px;font-weight:600;color:var(--primary)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;line-height:1.6;border-radius:var(--r-pill);padding:3px 10px;border:1px solid transparent;white-space:nowrap}
.chip--tier{color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,transparent)}
.chip--dep{color:var(--grey2);border-color:var(--hairline)}
.chip--warn{color:var(--warn);border-color:var(--warn)}
.chip--ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.chip--risk{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.chip--mute{color:var(--grey2);background:var(--divider)}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--cardBorder);border-radius:var(--r-md);padding:26px;box-shadow:var(--shadow-card)}
.card--flat{box-shadow:none;background:var(--tint)}
.card--link{display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.card--link:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.card .body{flex:1}
.icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--primary) 8%,transparent);color:var(--primary)}
.num{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-pill);background:var(--primary);color:#fff;font-size:17px;font-weight:700}
.ticks{display:flex;flex-direction:column;gap:11px}
.ticks li{display:flex;gap:10px;font-size:16px;line-height:1.6;color:var(--grey1)}
.ticks svg{flex:none;margin-top:4px}
.note{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 22px;background:var(--tint);border:1px solid var(--cardBorder);border-radius:var(--r-md)}
.note p{flex:1 1 320px;font-size:15px;line-height:1.6;color:var(--grey1)}
.note strong{color:var(--dark);font-weight:600}

/* ---------- device / placeholder frames ---------- */
.frame{background:var(--surface);border:1px solid var(--cardBorder);border-radius:var(--r-lg);box-shadow:var(--shadow-hero);padding:20px}
.frame--phone{width:100%;max-width:300px;margin:0 auto}
.frame__bar{display:flex;justify-content:space-between;font-size:10px;font-weight:600;color:var(--grey2)}
.ph{display:block;height:7px;border-radius:4px;background:var(--card)}
.ph--thin{height:6px;background:var(--divider)}
.caption{font-size:13px;color:var(--grey2);margin-top:12px}
.listrow{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--tint);border-radius:var(--r-sm)}
.listrow__ico{width:24px;height:24px;border-radius:7px;background:var(--card);flex:none}
.listrow__txt{flex:1}
.dashbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--tint);border:1px dashed var(--soft);border-radius:var(--r-lg);padding:40px 24px;text-align:center}

/* ---------- matrix ---------- */
.matrix{display:grid;grid-template-columns:120px repeat(4,1fr);gap:6px;min-width:420px}
.matrix__head{font-size:11.5px;font-weight:600;color:var(--dark);text-align:center;line-height:1.25}
.matrix__head span{display:block;font-size:10px;font-weight:500;color:var(--grey2)}
.matrix__dev{display:flex;align-items:center;font-size:12.5px;font-weight:500;color:var(--grey1);padding-right:6px}
.matrix__cell{display:flex;gap:4px;justify-content:center;padding:7px 0;background:var(--tint);border-radius:6px}
.tog{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;border-radius:5px;background:var(--divider);color:var(--grey2)}
.tog--on{background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.scroll-x{overflow-x:auto}

/* ---------- table ---------- */
.table{width:100%;min-width:760px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.table th{text-align:center;padding:18px 12px;font-size:14px;font-weight:600;color:var(--dark);border-bottom:1px solid var(--hairline)}
.table th:first-child,.table th:last-child{text-align:left;padding:18px 20px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey2)}
.table td{padding:15px 12px;text-align:center;font-size:14px;font-weight:600;color:var(--primary);border-bottom:1px solid var(--divider)}
.table td:first-child,.table td:last-child{text-align:left;padding:15px 20px;font-size:15px;font-weight:400;color:var(--dark)}
.table td.no{color:var(--grey2)}
.table .prem{background:color-mix(in srgb,var(--primary) 4%,transparent)}
.table small{display:block;font-size:13px;line-height:1.5;color:var(--grey2);margin-top:2px}
.tablebox{background:var(--surface);border:1px solid var(--cardBorder);border-radius:var(--r-md);overflow-x:auto}

/* ---------- pricing ---------- */
.tier{background:var(--surface);border:1px solid var(--cardBorder);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-card)}
.tier--hi{position:relative;border:2px solid var(--primary);box-shadow:var(--shadow-hover)}
.tier--soft{background:var(--tint);box-shadow:none}
.tier__badge{position:absolute;top:-13px;left:32px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--primary);border-radius:var(--r-pill);padding:5px 14px}
.tier__desc{font-size:15px;line-height:1.6;color:var(--grey2);margin-top:6px;min-height:46px}
.tier__price{display:flex;align-items:baseline;gap:6px;margin-top:20px;font-variant-numeric:tabular-nums}
.tier__price b{font-size:44px;font-weight:700;letter-spacing:-.03em;color:var(--dark)}
.tier__price span{font-size:15px;color:var(--grey2)}
.tier .ticks li{font-size:15px;line-height:1.55}
.toggle{display:inline-flex;align-items:center;gap:4px;padding:5px;background:var(--tint);border:1px solid var(--cardBorder);border-radius:var(--r-pill)}
.toggle button{height:42px;padding:0 22px;border:0;border-radius:var(--r-pill);font-size:15px;font-weight:600;cursor:pointer;background:transparent;color:var(--grey2);display:flex;align-items:center;gap:8px}
.toggle button[aria-pressed="true"]{background:var(--surface);color:var(--dark)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--hairline)}
.faq__item{border-bottom:1px solid var(--hairline)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:22px 0;background:none;border:0;text-align:left;font-size:18px;font-weight:600;color:var(--dark);cursor:pointer}
.faq__q svg{flex:none;transition:transform .2s ease}
.faq__item.open .faq__q svg{transform:rotate(180deg)}
.faq__a{overflow:hidden;max-height:0;transition:max-height .26s cubic-bezier(.22,1,.36,1)}
.faq__a p{font-size:16px;line-height:1.7;color:var(--grey1);padding:0 40px 24px 0;max-width:68ch}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{height:38px;padding:0 16px;border-radius:var(--r-pill);font-size:14px;font-weight:600;cursor:pointer;background:var(--surface);color:var(--grey1);border:1px solid var(--hairline)}
.filters button[aria-pressed="true"]{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field span{font-size:14px;font-weight:600;color:var(--dark)}
.field input,.field select{height:52px;padding:0 14px;background:var(--bg);border:1px solid var(--cardBorder);border-radius:var(--r-sm);font-size:16px;font-family:inherit;color:var(--dark)}
.form{display:flex;flex-direction:column;gap:16px;background:var(--surface);border:1px solid var(--cardBorder);border-radius:var(--r-lg);padding:28px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid transparent;transition:border-color .18s ease}
.hdr.scrolled{border-bottom-color:var(--hairline)}
.hdr__in{max-width:1200px;margin:0 auto;padding:0 20px;height:72px;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:10px;flex:1 1 0;white-space:nowrap}
.logo span{font-size:22px;font-weight:600;letter-spacing:-.025em;color:var(--dark)}
.nav{display:flex;align-items:center;justify-content:center;gap:4px;flex:0 0 auto}
.nav a,.nav button{display:flex;align-items:center;gap:5px;background:none;border:0;padding:9px 12px;border-radius:var(--r-sm);font-size:15px;font-weight:500;color:var(--dark);cursor:pointer}
.nav a:hover,.nav button:hover{background:var(--tint);color:var(--dark)}
.nav a.on{color:var(--primary)}
.hdr__cta{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1 1 0}
.hdr__cta .btn{height:44px;padding:0 22px;font-size:15px}
.ghost{display:flex;align-items:center;height:44px;padding:0 16px;font-size:15px;font-weight:500;color:var(--grey1);border-radius:var(--r-pill)}
.ghost:hover{background:var(--tint);color:var(--dark)}
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:1px solid var(--hairline);border-radius:var(--r-sm);color:var(--dark);cursor:pointer}
.mega{display:none;position:absolute;left:0;right:0;top:72px;background:var(--surface);border-bottom:1px solid var(--hairline);box-shadow:var(--shadow-card)}
.mega.open{display:block}
.mega__in{max-width:1200px;margin:0 auto;padding:32px 20px 36px;display:grid;grid-template-columns:1fr 1fr 300px;gap:40px}
.mega h4{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grey2);margin-bottom:8px}
.mega a.item{display:block;padding:9px 10px;margin-left:-10px;border-radius:var(--r-sm)}
.mega a.item:hover{background:var(--tint)}
.mega a.item b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--dark)}
.mega a.item i{display:block;font-size:13.5px;line-height:1.45;color:var(--grey2);font-style:normal;margin-top:1px}
.mega__promo{background:var(--tint);border:1px solid var(--cardBorder);border-radius:var(--r-md);padding:22px}
.mobile{display:none;position:fixed;inset:72px 0 0;z-index:70;background:var(--surface);overflow-y:auto;flex-direction:column}
.mobile.open{display:flex}
.mobile__body{flex:1;padding:24px 20px 12px;display:flex;flex-direction:column;gap:26px}
.mobile a{display:flex;align-items:center;gap:8px;padding:11px 0;font-size:17px;font-weight:500;color:var(--dark);border-bottom:1px solid var(--divider)}
.mobile__foot{position:sticky;bottom:0;padding:16px 20px 24px;background:var(--surface);border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:10px}

/* ---------- footer ---------- */
.ftr{background:var(--surface);border-top:1px solid var(--hairline)}
.ftr__in{max-width:1200px;margin:0 auto;padding:64px 20px 32px}
.ftr__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-bottom:36px;border-bottom:1px solid var(--divider)}
.ftr__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:32px;padding:40px 0}
.ftr__cols h4{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--dark)}
.ftr__cols ul{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.ftr__cols a{font-size:15px;color:var(--grey1)}
.ftr__cols a:hover{color:var(--primary)}
.ftr__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:24px 0;border-top:1px solid var(--divider)}
.ftr__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:20px;border-top:1px solid var(--divider)}
.ftr__legal a{font-size:14px;color:var(--grey2)}
.ftr__legal a:hover{color:var(--primary)}
.langtog{display:flex;border:1px solid var(--hairline);border-radius:var(--r-pill);overflow:hidden}
.langtog span{padding:9px 15px;font-size:14px;font-weight:500;color:var(--grey2)}
.langtog span.on{background:var(--tint);color:var(--dark);font-weight:600}
.themebtn{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;background:none;border:1px solid var(--hairline);border-radius:var(--r-pill);font-size:14px;font-weight:500;color:var(--grey1);cursor:pointer}
.themebtn:hover{border-color:var(--primary);color:var(--primary)}
.social{display:flex;align-items:center;gap:14px}
.social a{color:var(--grey2)}
.social a:hover{color:var(--primary)}

/* ---------- misc ---------- */
.hero{position:relative;overflow:hidden;background:var(--surface)}
.hero__bg{position:absolute;inset:0;opacity:.1;pointer-events:none}
.hero__in{position:relative;padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(56px,8vw,104px)}
.graph circle{opacity:0}
.graph .edges{stroke-dasharray:100;animation:edge .9s cubic-bezier(.22,1,.36,1) .2s both}
.graph .n{animation:node .38s cubic-bezier(.22,1,.36,1) both}
.graph .ring{animation:pulse 2.4s ease-in-out 1.6s infinite}
@keyframes node{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes edge{from{stroke-dashoffset:100;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes pulse{0%,100%{opacity:.9}50%{opacity:.35}}
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .48s cubic-bezier(.22,1,.36,1),transform .48s cubic-bezier(.22,1,.36,1)}
.archive a{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid var(--hairline)}
.archive a:hover{background:var(--tint)}
.archive .date{font-size:14px;font-weight:500;color:var(--grey2);width:120px;flex:none;font-variant-numeric:tabular-nums}
.archive .ttl{flex:1 1 260px;font-size:17px;font-weight:600;color:var(--dark)}
.prose h2{margin-top:44px}
.prose h3{margin-top:32px}
.prose p{margin-top:14px;font-size:16px;line-height:1.75;color:var(--grey1);max-width:68ch}
.prose ul{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.prose li{font-size:16px;line-height:1.7;color:var(--grey1);max-width:68ch;padding-left:18px;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--soft)}

@media (max-width:1023px){
  .nav{display:none}
  .hdr__cta .ghost{display:none}
  .burger{display:flex}
  .mega{display:none!important}
  .mega__in{grid-template-columns:1fr}
}
@media (max-width:600px){
  .btn{height:48px;padding:0 22px}
  .faq__q{font-size:17px}
  .tier{padding:26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}
@media print{.hdr,.ftr,.mobile,.mega{display:none!important}}