/* ==========================================================================
   ABK Tech NG — Base Styles
   Design tokens, typography, layout, and shared components across all pages.
   ========================================================================== */

:root{
    --bg: #05070d;
    --bg-alt: #080b14;
    --surface: rgba(255,255,255,0.045);
    --surface-strong: rgba(255,255,255,0.07);
    --border: rgba(255,255,255,0.09);
    --border-strong: rgba(255,255,255,0.16);
    --text: #f4f6fa;
    --text-dim: #93a0b5;
    --text-faint: #59637a;
    --cyan: #37d8ff;
    --magenta: #ff2e9a;
    --amber: #ffc93c;
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
  }

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

a{ color:inherit; text-decoration:none; }

ul{ list-style:none; }

img{ max-width:100%; display:block; }

::selection{ background: var(--cyan); color: #05070d; }

:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ---------- Background canvas ---------- */
  #circuit-bg{
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
    opacity: 0.55;
  }

.grain{
    position: fixed; inset:0; z-index: 1; pointer-events:none;
    opacity: 0.035; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

/* ---------- Nav ---------- */
  header{
    position: fixed; top:0; left:0; right:0; z-index: 50;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    background: rgba(5,7,13,0.55);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background .3s ease;
  }

header.scrolled{ border-bottom-color: var(--border); background: rgba(5,7,13,0.78); }

nav{
    display:flex; align-items:center; justify-content:space-between;
    height: 76px;
  }

.logo{
    display:flex; align-items:center; gap:10px;
    font-family: var(--font-display); font-weight:700; font-size: 19px;
    letter-spacing: -0.01em;
  }

.logo-img{
    height: 38px; width: auto; display:block;
    filter: drop-shadow(0 0 10px rgba(55,216,255,0.35));
    transition: filter .25s ease, transform .25s ease;
  }

.logo:hover .logo-img{ filter: drop-shadow(0 0 18px rgba(55,216,255,0.55)); transform: translateY(-1px); }

.logo .ng{ color: var(--text-dim); font-weight: 500; }

.nav-links{ display:flex; align-items:center; gap: 36px; }

.nav-links a{
    font-size: 14.5px; color: var(--text-dim); font-weight: 500;
    position: relative; padding: 6px 0; transition: color .2s ease;
  }

.nav-links a:hover{ color: var(--text); }

.nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
    background: var(--cyan); transition: width .25s ease;
  }

.nav-links a:hover::after{ width:100%; }

.nav-cta-group{ display:flex; align-items:center; gap:14px; }

.btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
    padding: 11px 22px; border-radius: 999px;
    cursor: pointer; border: 1px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    white-space: nowrap;
  }

.btn-primary{
    background: linear-gradient(135deg, var(--cyan), #1fa8d1);
    color: #04141c;
    box-shadow: 0 0 0 1px rgba(55,216,255,0.25), 0 8px 24px -8px rgba(55,216,255,0.55);
  }

.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(55,216,255,0.4), 0 12px 30px -6px rgba(55,216,255,0.7); }

.btn-ghost{
    background: var(--surface); color: var(--text); border-color: var(--border);
  }

.btn-ghost:hover{ background: var(--surface-strong); border-color: var(--border-strong); transform: translateY(-2px); }

.menu-toggle{
  display:none; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  flex-direction: column; align-items:center; justify-content:center; gap: 5px;
  cursor: pointer;
}
.menu-toggle span{
  display:block; width: 18px; height: 1.5px; background: var(--text);
  transition: transform .25s ease, opacity .25s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset: 76px 0 0 0; z-index: 45;
  background: rgba(5,7,13,0.98); backdrop-filter: blur(10px);
  padding: 36px 32px; display:flex; flex-direction:column; gap: 6px;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  border-bottom: 1px solid var(--border);
}
.mobile-menu.open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-nav-links{ display:flex; flex-direction:column; gap: 4px; margin-bottom: 28px; }
.mobile-nav-links li{ border-bottom: 1px solid var(--border); }
.mobile-nav-links a{
  display:block; padding: 16px 4px; font-family: var(--font-display); font-size: 19px;
  font-weight: 600; color: var(--text);
}
.mobile-menu-cta{ display:flex; flex-direction:column; gap: 12px; }
.mobile-menu-cta .btn{ justify-content:center; width: 100%; }
body.menu-open{ overflow: hidden; }

/* ---------- Hero ---------- */
  .hero{
    position: relative; z-index: 2;
    padding: 200px 0 140px;
    min-height: 100vh;
    display:flex; flex-direction:column; justify-content:center;
  }

.eyebrow{
    display:inline-flex; align-items:center; gap:9px;
    font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em;
    color: var(--cyan); text-transform: uppercase;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid rgba(55,216,255,0.28);
    background: rgba(55,216,255,0.06);
    margin-bottom: 28px;
    opacity:0; animation: rise .8s .1s ease forwards;
  }

.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse 2s ease-in-out infinite; }

.hero h1{
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(42px, 6.4vw, 84px);
    line-height: 1.02; letter-spacing: -0.025em;
    max-width: 900px;
    opacity:0; animation: rise .8s .22s ease forwards;
  }

.hero h1 .grad{
    background: linear-gradient(100deg, var(--cyan) 5%, #8fe9ff 30%, var(--magenta) 75%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

.hero p.lede{
    margin-top: 26px; max-width: 560px;
    font-size: 18px; line-height: 1.65; color: var(--text-dim);
    opacity:0; animation: rise .8s .34s ease forwards;
  }

.hero-ctas{
    margin-top: 42px; display:flex; gap:16px; flex-wrap:wrap;
    opacity:0; animation: rise .8s .46s ease forwards;
  }

.hero-meta{
    margin-top: 88px; display:flex; gap:56px; flex-wrap:wrap;
    opacity:0; animation: rise .8s .58s ease forwards;
  }

.hero-meta div{ display:flex; flex-direction:column; gap:4px; }

.hero-meta .num{ font-family: var(--font-display); font-size: 30px; font-weight:700; }

.hero-meta .label{ font-size: 12.5px; color: var(--text-faint); font-family: var(--font-mono); letter-spacing:.03em; text-transform:uppercase; }

.hero-glow{
    position:absolute; top: -10%; right: -10%; width: 60vw; height: 60vw;
    max-width: 900px; max-height: 900px;
    background: radial-gradient(circle, rgba(55,216,255,0.16), transparent 65%);
    filter: blur(20px); z-index:-1; pointer-events:none;
  }

/* ---------- Section shared ---------- */
  section{ position: relative; z-index: 2; padding: 130px 0; }

.section-head{ max-width: 620px; margin-bottom: 64px; }

.kicker{
    display:block; font-family: var(--font-mono); font-size: 12.5px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--magenta);
    margin-bottom: 16px;
  }

.section-head h2{
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.02em; line-height:1.08;
  }

.section-head p{ margin-top: 18px; color: var(--text-dim); font-size: 16.5px; max-width: 540px; }

/* ---------- Marquee ---------- */
  .marquee-section{ padding: 60px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.marquee-label{
    text-align:center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-faint); margin-bottom: 34px;
  }

.marquee{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }

.marquee-track{ display:flex; gap: 64px; width: max-content; animation: scroll 32s linear infinite; }

.marquee-track span{
    font-family: var(--font-mono); font-size: 14px; color: var(--text-faint);
    display:flex; align-items:center; gap:10px; white-space:nowrap;
  }

.marquee-track span::before{ content:''; width:5px; height:5px; border-radius:50%; background: var(--text-faint); }

/* ---------- Services ---------- */
  .services-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--border);
    border: 1px solid var(--border); border-radius: 20px; overflow:hidden;
  }

.service-card{
    background: var(--bg-alt); padding: 38px 32px; min-height: 220px;
    display:flex; flex-direction:column; justify-content:space-between;
    transition: background .3s ease;
    position:relative;
  }

.service-card:hover{ background: #0c101c; }

.service-icon{
    width: 44px; height:44px; border-radius:12px;
    border:1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center;
    font-family: var(--font-mono); font-size:15px; color: var(--cyan);
    background: var(--surface);
    margin-bottom: 26px;
  }

.service-card h3{ font-family: var(--font-display); font-size:19px; font-weight:600; margin-bottom:10px; letter-spacing:-0.01em; }

.service-card p{ font-size: 14.5px; color: var(--text-dim); line-height:1.6; }

/* ---------- Approach ---------- */
  .approach{
    display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:start;
  }

.approach-list{ display:flex; flex-direction:column; }

.approach-item{
    display:flex; gap:24px; padding: 28px 0; border-top: 1px solid var(--border);
  }

.approach-item:last-child{ border-bottom: 1px solid var(--border); }

.approach-num{ font-family: var(--font-mono); font-size: 13px; color: var(--cyan); padding-top:3px; min-width: 28px; }

.approach-item h4{ font-family: var(--font-display); font-size: 18px; font-weight:600; margin-bottom:8px; }

.approach-item p{ color: var(--text-dim); font-size: 14.5px; line-height:1.6; max-width: 420px; }

.approach-visual{
    position: sticky; top: 120px;
    border-radius: 22px; border: 1px solid var(--border);
    background: linear-gradient(160deg, rgba(55,216,255,0.07), rgba(255,46,154,0.04) 60%, transparent);
    padding: 40px; min-height: 420px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }

.orbit-wrap{ position:relative; width: 260px; height:260px; }

.orbit-ring{
    position:absolute; border-radius:50%; border: 1px solid rgba(55,216,255,0.25);
    top:50%; left:50%; transform: translate(-50%,-50%);
  }

.orbit-ring.r1{ width: 100%; height:100%; animation: spin 18s linear infinite; }

.orbit-ring.r2{ width: 70%; height:70%; border-color: rgba(255,46,154,0.25); animation: spin 12s linear infinite reverse; }

.orbit-ring.r3{ width: 42%; height:42%; border-color: rgba(255,201,60,0.3); animation: spin 8s linear infinite; }

.orbit-core{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width: 64px; height:64px; border-radius: 16px;
    background: radial-gradient(circle at 30% 20%, rgba(55,216,255,0.35), rgba(5,7,13,0.9));
    border: 1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; padding: 10px;
    box-shadow: 0 0 40px rgba(55,216,255,0.25);
  }

.orbit-core-img{
    width:100%; height:100%; object-fit:contain;
  }

.orbit-node{
    position:absolute; width:10px; height:10px; border-radius:50%;
    background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
  }

/* ---------- Why us ---------- */
  .why-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.why-card{
    border: 1px solid var(--border); border-radius: 18px; padding: 30px 26px;
    background: var(--surface); transition: border-color .3s ease, transform .3s ease, background .3s ease;
  }

.why-card:hover{ border-color: var(--border-strong); transform: translateY(-4px); background: var(--surface-strong); }

.why-card .mark{ font-family: var(--font-mono); color: var(--amber); font-size: 13px; margin-bottom: 18px; display:block; }

.why-card h4{ font-family: var(--font-display); font-size: 17px; font-weight:600; margin-bottom: 10px; }

.why-card p{ font-size: 14px; color: var(--text-dim); line-height:1.6; }

/* ---------- CTA banner ---------- */
  .cta-banner{
    border-radius: 28px; border: 1px solid var(--border-strong);
    background: linear-gradient(135deg, rgba(55,216,255,0.09), rgba(255,46,154,0.06));
    padding: 72px 60px; text-align:center; position:relative; overflow:hidden;
  }

.cta-banner::before{
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at 50% 0%, rgba(55,216,255,0.18), transparent 60%);
  }

.cta-banner h2{
    position:relative; font-family: var(--font-display); font-size: clamp(28px,4vw,42px);
    font-weight:700; letter-spacing:-0.02em; max-width: 640px; margin: 0 auto 18px;
  }

.cta-banner p{ position:relative; color: var(--text-dim); font-size:16px; max-width: 480px; margin: 0 auto 34px; }

.cta-banner .hero-ctas{ position:relative; justify-content:center; opacity:1; animation:none; margin-top:0; }

/* ---------- Footer ---------- */
  footer{ position:relative; z-index:2; border-top: 1px solid var(--border); padding: 80px 0 34px; }

.footer-top{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; margin-bottom: 70px; }

.footer-brand p{ margin-top: 18px; color: var(--text-dim); font-size:14.5px; max-width: 300px; line-height:1.65; }

.footer-col h5{ font-family: var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color: var(--text-faint); margin-bottom: 20px; }

.footer-col ul{ display:flex; flex-direction:column; gap: 13px; }

.footer-col a{ font-size: 14.5px; color: var(--text-dim); transition: color .2s ease; }

.footer-col a:hover{ color: var(--text); }

.footer-bottom{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
    padding-top: 30px; border-top: 1px solid var(--border);
    font-size: 13px; color: var(--text-faint);
  }

.footer-social{ display:flex; gap:14px; }

.footer-social a{
    width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-size:12px; color: var(--text-dim);
    transition: border-color .2s ease, color .2s ease;
  }

.footer-social a:hover{ border-color: var(--cyan); color: var(--cyan); }

/* ---------- Mobile ---------- */
  @media (max-width: 980px){
    .services-grid{ grid-template-columns: repeat(2,1fr); }
    .why-grid{ grid-template-columns: repeat(2,1fr); }
    .approach{ grid-template-columns: 1fr; }
    .approach-visual{ position:static; }
    .footer-top{ grid-template-columns: 1fr 1fr; }
  }

#circuit-bg{ position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.55; }

header{
    position: fixed; top:0; left:0; right:0; z-index: 50;
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    background: rgba(5,7,13,0.55); border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background .3s ease;
  }

.nav-links a:hover, .nav-links a.active{ color: var(--text); }

.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

section{ position: relative; z-index: 2; padding: 130px 0; }

/* Page hero */
  .page-hero{ padding: 190px 0 90px; position:relative; z-index:2; }

.eyebrow{
    display:inline-flex; align-items:center; gap:9px; font-family: var(--font-mono); font-size: 12.5px;
    letter-spacing: 0.06em; color: var(--cyan); text-transform: uppercase; padding: 7px 14px; border-radius: 999px;
    border: 1px solid rgba(55,216,255,0.28); background: rgba(55,216,255,0.06); margin-bottom: 26px;
  }

.page-hero h1{
    font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 5.6vw, 68px);
    line-height: 1.05; letter-spacing: -0.025em; max-width: 760px;
  }

.page-hero h1 .grad{
    background: linear-gradient(100deg, var(--cyan) 5%, #8fe9ff 30%, var(--magenta) 75%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

.page-hero p.lede{ margin-top: 22px; max-width: 560px; font-size: 17.5px; line-height: 1.65; color: var(--text-dim); }

/* Service category rows */
  .service-row{
    display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items:center;
    padding: 72px 0; border-top: 1px solid var(--border);
  }

.service-row:last-child{ border-bottom: 1px solid var(--border); }

.service-row.reverse{ direction: rtl; }

.service-row.reverse > *{ direction: ltr; }

.service-index{ font-family: var(--font-mono); color: var(--text-faint); font-size: 13px; margin-bottom: 18px; display:block; }

.service-row h3{ font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); font-weight:700; letter-spacing:-0.015em; margin-bottom: 16px; }

.service-row > div:first-child > p{ color: var(--text-dim); font-size: 15.5px; line-height:1.7; max-width: 460px; margin-bottom: 26px; }

.tag-list{ display:flex; flex-wrap:wrap; gap: 10px; }

.tag-list span{
    font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim);
    border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px;
    background: var(--surface);
  }

.service-visual{
    border-radius: 22px; border: 1px solid var(--border); min-height: 280px;
    display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
    background: linear-gradient(160deg, rgba(255,255,255,0.03), transparent 70%);
  }

.service-visual .glow{
    position:absolute; width: 220px; height:220px; border-radius:50%; filter: blur(50px); opacity:0.35;
  }

.service-visual .glyph{
    position:relative; font-family: var(--font-mono); font-size: 15px; color: var(--text);
    width: 96px; height:96px; border-radius: 22px; border: 1px solid var(--border-strong);
    background: rgba(5,7,13,0.6); display:flex; align-items:center; justify-content:center;
    box-shadow: 0 0 40px rgba(55,216,255,0.12);
  }

.service-visual .grid-lines{
    position:absolute; inset:0; opacity:0.5;
    background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 34px 34px;
  }

/* Support strip */
  .support-strip{
    display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border);
    border: 1px solid var(--border); border-radius: 20px; overflow:hidden;
  }

.support-item{ background: var(--bg-alt); padding: 32px 26px; }

.support-item h4{ font-family: var(--font-display); font-size: 16px; font-weight:600; margin-bottom:8px; }

.support-item p{ font-size: 13.5px; color: var(--text-dim); line-height:1.6; }

.section-head{ max-width: 620px; margin-bottom: 56px; }

.section-head h2{ font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.02em; line-height:1.08; }

.section-head p{ margin-top: 18px; color: var(--text-dim); font-size: 16px; max-width: 520px; }

.cta-banner{
    border-radius: 28px; border: 1px solid var(--border-strong);
    background: linear-gradient(135deg, rgba(55,216,255,0.09), rgba(255,46,154,0.06));
    padding: 72px 60px; text-align:center; position:relative; overflow:hidden;
  }

.cta-banner h2{ position:relative; font-family: var(--font-display); font-size: clamp(26px,3.6vw,40px); font-weight:700; letter-spacing:-0.02em; max-width: 620px; margin: 0 auto 18px; }

.cta-banner p{ position:relative; color: var(--text-dim); font-size:15.5px; max-width: 460px; margin: 0 auto 32px; }

.cta-ctas{ position:relative; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

footer{ position:relative; z-index:2; border-top: 1px solid var(--border); padding: 80px 0 34px; }

.page-hero{ padding: 190px 0 70px; position:relative; z-index:2; }

.page-hero h1{ font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 5.6vw, 68px); line-height: 1.05; letter-spacing: -0.025em; max-width: 780px; }

.page-hero p.lede{ margin-top: 22px; max-width: 580px; font-size: 17.5px; line-height: 1.65; color: var(--text-dim); }

/* Story */
  .story{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; align-items:start; }

.story-visual{
    position: sticky; top: 120px; border-radius: 22px; border: 1px solid var(--border);
    background: linear-gradient(160deg, rgba(55,216,255,0.07), rgba(255,46,154,0.04) 60%, transparent);
    min-height: 380px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding: 40px;
  }

.story-visual .mono-tag{
    font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); position:absolute; top:28px; left:28px;
  }

.story-mark{
    font-family: var(--font-display); font-weight:700; font-size: 96px; color: transparent;
    -webkit-text-stroke: 1px var(--border-strong); letter-spacing: -0.02em;
  }

.story-copy p{ color: var(--text-dim); font-size: 16px; line-height: 1.8; margin-bottom: 22px; max-width: 580px; }

.story-copy p strong{ color: var(--text); font-weight: 600; }

/* Mission / Vision */
  .mv-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.mv-card{
    border: 1px solid var(--border); border-radius: 20px; padding: 40px; background: var(--surface);
    transition: border-color .3s ease, background .3s ease;
  }

.mv-card:hover{ border-color: var(--border-strong); background: var(--surface-strong); }

.mv-card .mark{ font-family: var(--font-mono); font-size: 13px; color: var(--cyan); text-transform: uppercase; letter-spacing:.06em; margin-bottom: 20px; display:block; }

.mv-card h3{ font-family: var(--font-display); font-size: 24px; font-weight:700; margin-bottom: 16px; letter-spacing:-0.01em; }

.mv-card p{ color: var(--text-dim); font-size: 15.5px; line-height: 1.75; }

/* Values */
  .values-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.value-card{ border: 1px solid var(--border); border-radius: 18px; padding: 32px 28px; background: var(--bg-alt); transition: transform .3s ease, border-color .3s ease; }

.value-card:hover{ transform: translateY(-4px); border-color: var(--border-strong); }

.value-num{ font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint); margin-bottom: 20px; display:block; }

.value-card h4{ font-family: var(--font-display); font-size: 18px; font-weight:600; margin-bottom: 10px; }

.value-card p{ font-size: 14.5px; color: var(--text-dim); line-height: 1.65; }

/* Horizon / future goals */
  .horizon{
    border-radius: 24px; border: 1px solid var(--border); padding: 56px; position:relative; overflow:hidden;
    background: radial-gradient(circle at 15% 20%, rgba(255,201,60,0.08), transparent 55%), radial-gradient(circle at 85% 80%, rgba(255,46,154,0.08), transparent 55%);
  }

.horizon-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 40px; position:relative; }

.horizon-item .goal-tag{ font-family: var(--font-mono); font-size: 12px; color: var(--amber); text-transform: uppercase; letter-spacing:.05em; margin-bottom: 14px; display:block; }

.horizon-item h4{ font-family: var(--font-display); font-size: 18px; font-weight:600; margin-bottom: 10px; }

.horizon-item p{ font-size: 14px; color: var(--text-dim); line-height: 1.65; }

.btn-primary:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.page-hero{ padding: 190px 0 60px; position:relative; z-index:2; }

.page-hero h1{ font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 5.6vw, 66px); line-height: 1.05; letter-spacing: -0.025em; max-width: 720px; }

/* Contact grid */
  .contact-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items:start; }

.contact-info{ display:flex; flex-direction:column; gap: 14px; }

.info-card{
    border: 1px solid var(--border); border-radius: 16px; padding: 24px 26px;
    background: var(--surface); display:flex; align-items:center; gap: 18px;
    transition: border-color .25s ease, background .25s ease;
  }

.info-card:hover{ border-color: var(--border-strong); background: var(--surface-strong); }

.info-icon{
    width: 44px; height:44px; min-width:44px; border-radius:12px; border:1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size:15px; color: var(--cyan);
    background: rgba(5,7,13,0.5);
  }

.info-card h4{ font-family: var(--font-display); font-size: 15.5px; font-weight:600; margin-bottom: 3px; }

.info-card p{ font-size: 14px; color: var(--text-dim); }

.info-card a.info-link{ font-size:14px; color: var(--text-dim); transition: color .2s ease; }

.info-card a.info-link:hover{ color: var(--cyan); }

.hours-card{
    border: 1px solid var(--border); border-radius: 16px; padding: 26px; background: var(--bg-alt); margin-top: 6px;
  }

.hours-card h4{ font-family: var(--font-mono); font-size: 12px; letter-spacing:.06em; text-transform:uppercase; color: var(--text-faint); margin-bottom: 16px; }

.hours-row{ display:flex; justify-content:space-between; font-size: 14px; padding: 9px 0; border-top: 1px solid var(--border); }

.hours-row:first-of-type{ border-top:none; }

.hours-row span:first-child{ color: var(--text-dim); }

.hours-row span:last-child{ font-family: var(--font-mono); font-size: 13px; }

.social-row{ display:flex; gap: 12px; margin-top: 6px; }

.social-row a{
    width:42px; height:42px; border-radius:12px; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-size:13px; font-family: var(--font-mono); color: var(--text-dim);
    transition: border-color .2s ease, color .2s ease;
  }

.social-row a:hover{ border-color: var(--cyan); color: var(--cyan); }

/* Form */
  .form-panel{
    border: 1px solid var(--border); border-radius: 22px; padding: 44px;
    background: linear-gradient(160deg, rgba(255,255,255,0.03), transparent 60%);
    position: relative;
  }

.form-panel h3{ font-family: var(--font-display); font-size: 22px; font-weight:700; margin-bottom: 8px; letter-spacing:-0.01em; }

.form-panel > p{ color: var(--text-dim); font-size: 14.5px; margin-bottom: 32px; }

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.field{ margin-bottom: 22px; }

.field label{
    display:block; font-family: var(--font-mono); font-size: 12px; letter-spacing:.04em; text-transform: uppercase;
    color: var(--text-faint); margin-bottom: 9px;
  }

.field input, .field select, .field textarea{
    width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    border-radius: 10px; padding: 13px 15px; color: var(--text); font-family: var(--font-body); font-size: 14.5px;
    transition: border-color .2s ease, background .2s ease;
  }

.field input::placeholder, .field textarea::placeholder{ color: var(--text-faint); }

.field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color: var(--cyan); background: rgba(55,216,255,0.04);
  }

.field textarea{ resize: vertical; min-height: 120px; }

.field select{ cursor:pointer; appearance:none; -webkit-appearance:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2393a0b5' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center;
  }

.field-error{ font-size: 12.5px; color: var(--magenta); margin-top: 7px; display:none; }

.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color: var(--magenta); }

.field.invalid .field-error{ display:block; }

.form-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top: 8px; }

.form-note{ font-size: 12.5px; color: var(--text-faint); max-width: 260px; }

.success-state{
    display:none; text-align:center; padding: 50px 20px;
  }

.success-state.show{ display:block; }

.success-icon{
    width: 56px; height:56px; border-radius:50%; margin: 0 auto 22px; border: 1px solid rgba(55,216,255,0.4);
    display:flex; align-items:center; justify-content:center; color: var(--cyan); font-size: 20px;
    background: rgba(55,216,255,0.08); box-shadow: 0 0 30px rgba(55,216,255,0.2);
  }

.success-state h3{ font-family: var(--font-display); font-size: 22px; margin-bottom: 10px; }

.success-state p{ color: var(--text-dim); font-size: 14.5px; max-width: 360px; margin: 0 auto; }

/* Map placeholder */
  .map-block{
    margin-top: 90px; border-radius: 22px; border: 1px solid var(--border); overflow:hidden;
    position:relative; min-height: 320px; display:flex; align-items:center; justify-content:center;
    background: var(--bg-alt);
  }

.map-block .grid-lines{
    position:absolute; inset:0; opacity:0.6;
    background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
  }

.map-pin{
    position: relative; display:flex; flex-direction:column; align-items:center; gap: 14px;
  }

.map-pin .pin-dot{
    width: 18px; height:18px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 0 6px rgba(55,216,255,0.12), 0 0 24px rgba(55,216,255,0.5);
    position:relative;
  }

.map-pin .pin-dot::after{
    content:''; position:absolute; inset:-14px; border-radius:50%; border:1px solid rgba(55,216,255,0.3);
    animation: ripple 2.4s ease-out infinite;
  }

.map-pin p{ font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); text-align:center; }

/* Portfolio */
  .filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 50px; }

.filter-btn{
    font-family: var(--font-mono); font-size: 13px; padding: 9px 18px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor:pointer;
    transition: all .2s ease;
  }

.filter-btn:hover{ border-color: var(--border-strong); color: var(--text); }

.filter-btn.active{ background: var(--cyan); color:#04141c; border-color: var(--cyan); font-weight:600; }

.portfolio-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.case-card{
    border: 1px solid var(--border); border-radius: 20px; overflow:hidden; background: var(--bg-alt);
    transition: border-color .3s ease, transform .3s ease; display:flex; flex-direction:column;
  }

.case-card:hover{ border-color: var(--border-strong); transform: translateY(-4px); }

.case-card.hidden{ display:none; }

.case-visual{
    height: 200px; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(160deg, rgba(255,255,255,0.04), transparent 70%);
  }

.case-visual .grid-lines{
    position:absolute; inset:0; opacity:0.5;
    background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 30px 30px;
  }

.device-mock{
    position:relative; width: 220px; height:140px; border-radius: 10px; border: 1px solid var(--border-strong);
    background: rgba(5,7,13,0.7); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
  }

.device-mock::before{
    content:''; position:absolute; top:10px; left:10px; right:10px; bottom:10px; border-radius:4px;
    background: linear-gradient(135deg, rgba(55,216,255,0.18), rgba(255,46,154,0.1));
  }

.device-mock .bar{ position:absolute; top:0; left:0; right:0; height:8px; background: rgba(255,255,255,0.06); border-radius: 10px 10px 0 0; }

.case-body{ padding: 28px 26px 30px; flex:1; display:flex; flex-direction:column; }

.case-tag{ font-family: var(--font-mono); font-size: 11.5px; color: var(--cyan); text-transform:uppercase; letter-spacing:.05em; margin-bottom: 12px; }

.case-body h3{ font-family: var(--font-display); font-size: 20px; font-weight:700; margin-bottom: 10px; letter-spacing:-0.01em; }

.case-body p{ font-size: 14px; color: var(--text-dim); line-height:1.65; margin-bottom: 20px; flex:1; }

.case-meta{ display:flex; flex-wrap:wrap; gap:8px; }

.case-meta span{ font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); border:1px solid var(--border); border-radius:999px; padding: 5px 11px; }

.note-banner{
    margin-top: 60px; border: 1px dashed var(--border-strong); border-radius: 16px; padding: 22px 26px;
    font-size: 13.5px; color: var(--text-faint); display:flex; gap:12px; align-items:flex-start;
  }

.note-banner .icon{ color: var(--amber); font-family: var(--font-mono); }

/* Blog */
  .featured-post{
    display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center;
    border: 1px solid var(--border); border-radius: 24px; padding: 12px; margin-bottom: 60px;
    background: var(--surface);
  }

.featured-visual{
    border-radius: 18px; min-height: 300px; position:relative; overflow:hidden;
    background: linear-gradient(150deg, rgba(55,216,255,0.14), rgba(255,46,154,0.08) 70%);
    display:flex; align-items:center; justify-content:center;
  }

.featured-visual .grid-lines{
    position:absolute; inset:0; opacity:0.5;
    background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 32px 32px;
  }

.featured-body{ padding: 20px 30px 20px 0; }

.post-cat{ font-family: var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color: var(--magenta); margin-bottom:14px; display:block; }

.featured-body h2{ font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); font-weight:700; letter-spacing:-0.015em; margin-bottom: 16px; line-height:1.15; }

.featured-body p{ color: var(--text-dim); font-size: 15px; line-height:1.7; margin-bottom: 22px; }

.post-meta{ display:flex; gap:14px; align-items:center; font-family: var(--font-mono); font-size:12.5px; color: var(--text-faint); }

.post-meta .sep{ width:3px; height:3px; border-radius:50%; background: var(--text-faint); }

.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.post-card{
    border: 1px solid var(--border); border-radius: 18px; overflow:hidden; background: var(--bg-alt);
    transition: border-color .3s ease, transform .3s ease; display:flex; flex-direction:column;
  }

.post-card:hover{ border-color: var(--border-strong); transform: translateY(-4px); }

.post-visual{
    height: 150px; position:relative; overflow:hidden;
    background: linear-gradient(150deg, rgba(255,255,255,0.04), transparent 70%);
  }

.post-visual .grid-lines{
    position:absolute; inset:0; opacity:0.45;
    background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 26px 26px;
  }

.post-card-body{ padding: 24px 22px 26px; flex:1; display:flex; flex-direction:column; }

.post-card-body h3{ font-family: var(--font-display); font-size:17px; font-weight:600; margin-bottom:10px; line-height:1.35; }

.post-card-body p{ font-size:13.5px; color: var(--text-dim); line-height:1.6; margin-bottom:18px; flex:1; }

.newsletter-block{
    margin-top: 90px; border-radius: 24px; border: 1px solid var(--border-strong); padding: 56px;
    background: linear-gradient(135deg, rgba(55,216,255,0.08), rgba(255,201,60,0.05));
    display:flex; align-items:center; justify-content:space-between; gap: 40px; flex-wrap:wrap;
  }

.newsletter-block h3{ font-family: var(--font-display); font-size: 24px; font-weight:700; margin-bottom:8px; }

.newsletter-block p{ color: var(--text-dim); font-size:14.5px; max-width:360px; }

.newsletter-form{ display:flex; gap:10px; flex-wrap:wrap; }

.newsletter-form input{
    background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 999px;
    padding: 12px 20px; color: var(--text); font-size:14px; min-width: 240px;
  }

.newsletter-form input:focus{ outline:none; border-color: var(--cyan); }

/* Careers */
  .culture-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }

.culture-card{ border: 1px solid var(--border); border-radius: 18px; padding: 30px 26px; background: var(--surface); transition: border-color .3s ease, transform .3s ease; }

.culture-card:hover{ transform: translateY(-4px); border-color: var(--border-strong); }

.culture-card .mark{ font-family: var(--font-mono); color: var(--amber); font-size:13px; margin-bottom:16px; display:block; }

.culture-card h4{ font-family: var(--font-display); font-size:17px; font-weight:600; margin-bottom:10px; }

.culture-card p{ font-size:14px; color: var(--text-dim); line-height:1.65; }

.roles-list{ display:flex; flex-direction:column; }

.role-row{
    display:flex; align-items:center; justify-content:space-between; gap: 24px;
    padding: 26px 28px; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 14px;
    transition: border-color .25s ease, background .25s ease;
  }

.role-row:hover{ border-color: var(--border-strong); background: var(--surface); }

.role-info h4{ font-family: var(--font-display); font-size:17px; font-weight:600; margin-bottom:8px; }

.role-tags{ display:flex; gap:10px; flex-wrap:wrap; }

.role-tags span{ font-family: var(--font-mono); font-size:11.5px; color: var(--text-dim); border:1px solid var(--border); border-radius:999px; padding:5px 12px; }

.role-row .btn{ white-space:nowrap; }

.benefits-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border:1px solid var(--border); border-radius: 20px; overflow:hidden; }

.benefit-item{ background: var(--bg-alt); padding: 30px 24px; text-align:center; }

.benefit-item .num{ font-family: var(--font-mono); font-size: 12.5px; color: var(--cyan); margin-bottom:14px; display:block; }

.benefit-item h4{ font-family: var(--font-display); font-size:15.5px; font-weight:600; margin-bottom:8px; }

.benefit-item p{ font-size:13px; color: var(--text-dim); line-height:1.6; }

/* Legal pages */
  .legal-wrap{ max-width: 760px; margin: 0 auto; }

.legal-updated{ font-family: var(--font-mono); font-size:12.5px; color: var(--text-faint); margin-bottom: 50px; }

.legal-wrap h2{ font-family: var(--font-display); font-size: 22px; font-weight:700; margin: 44px 0 16px; letter-spacing:-0.01em; }

.legal-wrap h2:first-of-type{ margin-top:0; }

.legal-wrap p{ color: var(--text-dim); font-size: 15px; line-height: 1.8; margin-bottom: 16px; }

.legal-wrap ul{ margin: 0 0 16px 0; display:flex; flex-direction:column; gap:10px; }

.legal-wrap li{ color: var(--text-dim); font-size: 15px; line-height:1.7; padding-left: 20px; position:relative; }

.legal-wrap li::before{ content:'—'; position:absolute; left:0; color: var(--cyan); }

.legal-wrap a.inline-link{ color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

.legal-toc{ border:1px solid var(--border); border-radius:16px; padding: 26px 28px; margin-bottom: 50px; background: var(--surface); }

.legal-toc h5{ font-family: var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); margin-bottom:16px; }

.legal-toc ol{ display:flex; flex-direction:column; gap:9px; padding-left: 18px; }

.legal-toc a{ font-size:14px; color: var(--text-dim); transition: color .2s ease; }

.legal-toc a:hover{ color: var(--cyan); }

/* 404 */
  .error-section{
    min-height: 100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding: 160px 32px 100px; position:relative; z-index:2;
  }

.error-code{
    font-family: var(--font-display); font-weight:700; font-size: clamp(90px, 18vw, 220px);
    line-height:1; letter-spacing:-0.03em;
    background: linear-gradient(100deg, var(--cyan) 5%, #8fe9ff 30%, var(--magenta) 75%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    position: relative;
  }

.error-ring{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width: 340px; height:340px; border-radius:50%; border: 1px solid rgba(55,216,255,0.2);
    z-index:-1; animation: spin 24s linear infinite;
  }

.error-ring::before{
    content:''; position:absolute; top:-1px; left:50%; width:8px; height:8px; margin-left:-4px;
    background: var(--cyan); border-radius:50%; box-shadow: 0 0 12px var(--cyan);
  }

.error-section h1{
    font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight:700;
    margin-top: 28px; letter-spacing:-0.015em;
  }

.error-section p{ color: var(--text-dim); font-size:16px; max-width:420px; margin: 16px 0 38px; line-height:1.6; }

.error-ctas{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }