/* Netsera Technology — shared stylesheet (WCAG 2.2 AA baseline) */
:root{
  --bg:#070b12;
  --bg2:#0b1320;
  --panel:#0f1a2b;
  --panel2:#122238;
  --ink:#e8eef6;
  --muted:#93a4ba;
  --faint:#7b8ba0; /* adjusted for 4.5:1 on bg and panel */
  --accent:#33b1ff;
  --accent2:#22d3a5;
  --line:rgba(120,160,210,.14);
  --glow:rgba(51,177,255,.25);
  --mono:'JetBrains Mono',monospace;
  --sans:'Inter',system-ui,sans-serif;
  --disp:'Space Grotesk',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.65;overflow-x:hidden;}
a{color:var(--accent);text-decoration:none;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;}
:focus:not(:focus-visible){outline:none;}
::selection{background:var(--accent);color:#04101c;}
/* Preview draft banner — internal-review only */
.preview-banner{max-width:1160px;margin:0 auto;background:var(--panel2);color:var(--muted);font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;text-align:center;padding:10px 16px;border:1px solid var(--accent);}
.preview-banner::before{content:"△ ";color:var(--accent);}
.big-cta{font-family:var(--disp);font-size:clamp(1.2rem,2.5vw,1.6rem);font-weight:600;color:var(--accent);border-bottom:2px solid transparent;transition:border-color .15s;}
.big-cta a{color:var(--accent);}
.big-cta a:hover{border-bottom-color:var(--accent);}
/* Skip link — first focusable element, visually hidden until focused */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#04101c;padding:12px 18px;border-radius:6px;z-index:100;}
.skip-link:focus{left:16px;top:8px;}
.anim-bg{position:fixed;inset:0;z-index:-2;}
.anim-bg canvas{width:100%;height:100%;display:block;}
.grid-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(40,60,90,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(40,60,90,.05) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 0%,black 0%,transparent 75%);}

/* NAV */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(7,11,18,.72);border-bottom:1px solid var(--line);}
.nav-inner{max-width:1160px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;}
.logo{font-family:var(--disp);font-weight:700;font-size:1.15rem;letter-spacing:.01em;color:var(--ink);}
.logo .mark{color:var(--accent);}
.nav-links{display:flex;gap:22px;list-style:none;}
.nav-links a{color:var(--muted);font-weight:500;font-size:.92rem;transition:color .15s;}
.nav-links a:hover{color:var(--ink);}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--accent);}
.nav-cta{border:1px solid var(--accent);color:var(--accent);padding:8px 16px;border-radius:8px;font-weight:600;font-size:.9rem;transition:all .15s;}
.nav-cta:hover{background:var(--accent);color:#04101c;}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px;}
.burger span{width:22px;height:2px;background:var(--ink);}
.mobile-menu{display:none;}

/* HERO */
header.hero{max-width:1160px;margin:0 auto;padding:64px 24px 56px;position:relative;}
.eyebrow{font-family:var(--mono);color:var(--accent);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--accent);}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1;margin:22px 0 18px;letter-spacing:-.02em;}
h1 .grad{background:linear-gradient(92deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-sub{font-size:clamp(1.02rem,1.9vw,1.25rem);color:var(--muted);max-width:680px;margin-bottom:30px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.btn{display:inline-block;padding:13px 26px;border-radius:10px;font-weight:600;font-size:.98rem;transition:all .15s;}
.btn-primary{background:var(--accent);color:#04101c;box-shadow:0 6px 24px var(--glow);}
.btn-primary:hover{background:var(--accent2);transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.hero-meta{margin-top:40px;display:flex;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:.84rem;color:var(--faint);}
.hero-meta span{display:inline-flex;align-items:center;gap:8px;}
.hero-meta i{width:6px;height:6px;border-radius:50%;background:var(--accent2);}

/* SECTION */
main section{max-width:1160px;margin:0 auto;padding:72px 24px;}
.sec-head{margin-bottom:40px;}
.sec-kicker{font-family:var(--mono);color:var(--accent);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.12;letter-spacing:-.01em;}
.sec-sub{color:var(--muted);max-width:680px;margin-top:14px;}

/* CARDS */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
.svc{border:1px solid var(--line);border-radius:14px;padding:26px;background:linear-gradient(180deg,var(--panel),var(--bg2));position:relative;}
.svc h3{font-family:var(--disp);font-size:1.16rem;font-weight:600;margin-bottom:10px;color:var(--ink);}
.svc p{color:var(--muted);font-size:.95rem;}
.svc .tier{font-family:var(--mono);font-size:.74rem;color:var(--accent2);letter-spacing:.06em;text-transform:uppercase;margin-top:16px;}
.svc .ico{width:46px;height:46px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;margin-bottom:16px;background:var(--panel2);color:var(--accent);}
.svc .ico svg{width:22px;height:22px;}

/* PROCESS / STEPS */
.proc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;counter-reset:proc;}
.proc{position:relative;padding-top:48px;}
.proc::before{counter-increment:proc;content:"0" counter(proc);font-family:var(--mono);font-size:2rem;font-weight:500;color:var(--accent);position:absolute;top:0;left:0;}
.proc h3{font-family:var(--disp);font-size:1.1rem;margin-bottom:8px;color:var(--ink);}
.proc p{color:var(--muted);font-size:.92rem;border-top:1px solid var(--line);padding-top:14px;}

/* CAPABILITY LIST */
.cap-list{list-style:none;display:grid;gap:14px;max-width:860px;}
.cap-list li{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:rgba(15,26,43,.5);}
.cap-list .n{font-family:var(--mono);color:var(--accent);font-size:.82rem;margin-top:3px;min-width:24px;}
.cap-list b{display:block;font-size:1rem;margin-bottom:3px;color:var(--ink);}
.cap-list span:not(.n){color:var(--muted);font-size:.9rem;}
.svc p b{color:var(--ink);}

/* CONTACT */
.page-hero{max-width:1160px;margin:0 auto;padding:72px 24px;}
.page-hero h1{font-size:clamp(1.9rem,4.2vw,3rem);}
.page-hero p{color:var(--muted);max-width:680px;font-size:clamp(1rem,1.8vw,1.2rem);margin-top:14px;}

/* FORMS */
.field{display:grid;gap:6px;margin-bottom:18px;}
.field label{color:var(--muted);font-size:.9rem;font-weight:600;}
.field input,.field textarea,.field select{background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:12px 14px;font-family:var(--sans);font-size:1rem;}
.field textarea{min-height:140px;resize:vertical;}
.field input:focus,.field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px rgba(51,177,255,.25);}
form .btn-primary{border:none;cursor:pointer;}
.err{color:#ff7b7b;font-size:.86rem;margin:0;display:none;}
.err.show{display:block;}
.ok{color:#22d3a5;}

/* FOOTER */
footer{max-width:1160px;margin:0 auto;padding:40px 24px 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;color:var(--faint);font-family:var(--mono);font-size:.8rem;}
footer .nav-brief{display:block;color:var(--faint);font-size:.74rem;line-height:1.5;margin-bottom:14px;}
footer .links{display:flex;gap:20px;}
footer a{color:var(--faint);}
footer a:hover{color:var(--accent);}

/* DRAFT marker — clearly visible, non-destructive */
.draft{display:inline-block;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--accent);border:1px solid var(--line);border-radius:6px;padding:3px 10px;text-transform:uppercase;margin-bottom:14px;}
.draft::before{content:"[draft] ";}

/* Tables (handoff sample) */
table.sample{width:100%;border-collapse:collapse;font-size:.92rem;color:var(--ink);}
table.sample th,table.sample td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
table.sample th{background:var(--panel2);color:var(--muted);font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;}

/* Reduced motion — pause heavy animation */
@media (prefers-reduced-motion: reduce){
  .anim-bg{display:none;}
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}

/* RESPONSIVE */
@media(max-width:820px){
  .nav-links,.nav-cta{display:none;}
  .burger{display:flex;}
  .mobile-menu{display:none;flex-direction:column;gap:2px;padding:6px 24px 20px;border-top:1px solid var(--line);background:rgba(7,11,18,.96);}
  .mobile-menu.open{display:flex;}
  .mobile-menu a{color:var(--muted);font-weight:500;font-size:1rem;padding:14px 0;border-bottom:1px solid var(--line);}
  .mobile-menu .m-cta{margin-top:12px;border:1px solid var(--accent);color:var(--accent);text-align:center;border-radius:8px;font-weight:600;}
  main section{padding:56px 20px;}
  header.hero{padding-top:40px;}
  .svc-grid{grid-template-columns:1fr;}
  .cap-wrap,.how{grid-template-columns:1fr;}
  /* Reflow multi-column sample tables to stacked rows on phones so each entry stays readable */
  table.sample,table.sample tbody,table.sample tr,table.sample td{display:block;width:100%;}
  table.sample,table.sample tbody{width:100%;}
  table.sample tr{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;padding:4px;}
  table.sample td{display:block;}
  table.sample td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px;}
}

/* Mobile approach < 480: tighten even phone-width tables */
@media(max-width:480px){
  table.sample thead{display:none;}
  table.sample td::before{content:attr(data-label);}
}