/* ==========================================================
   NNAM Technologies — Design Tokens (v2 palette)
   Client-specified futuristic-blue system. Existing components
   (.card, .panel, .stat-card, buttons, nav) are untouched in markup —
   remapping these variables alone turns the whole site glassmorphic,
   since --surface is now a translucent white rather than a solid.
   ========================================================== */
:root{
  --bg:             #050816;                    /* spec: Background */
  --surface:        rgba(255,255,255,0.08);      /* spec: Cards */
  --surface-2:      rgba(255,255,255,0.05);
  --border:         rgba(255,255,255,0.18);      /* spec: Borders */
  --text:           #FFFFFF;                    /* High-contrast pure white */
  --text-muted:     #A5B4FC;                    /* Light blue-slate for readability */
  --node:           #0066FF;   /* spec: Primary */
  --link:           #00E5FF;   /* spec: Accent */
  --signal:         #4F8BFF;   /* spec: Secondary — CTA buttons */
  --glow:           #6C63FF;   /* spec: Glow */
  --success:        #34D399;
  --danger:         #F87171;
  /* Always-dark text for use on medium-brightness colored buttons —
     intentionally NOT theme-relative (see .btn-signal): the button
     background stays the same medium blue in both themes, so its text
     must stay dark in both themes too. */
  --ink:            #04070F;

  --font-display: 'Space Grotesk', 'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Manrope', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --radius: 14px;
  --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
}

[data-theme="light"]{
  --bg:             #F7F8FC;
  --surface:        rgba(0,20,60,0.04);
  --surface-2:      rgba(0,20,60,0.03);
  --border:         rgba(0,20,60,0.16);
  --text:           #090D16;                    /* Deep slate black for high contrast */
  --text-muted:     #475569;                    /* Darker slate grey for subtext */
  /* Dark-mode's bright cyan (--link: #00E5FF) is a light, high-luminance
     color — on a light background it fails contrast almost completely.
     These are darkened, on-brand equivalents of the same hues, computed
     to comfortably pass WCAG AA. */
  --link:           #006B80;
  --node:           #0052CC;
  --glow:           #4338CA;
  --success:        #065F46;
  --danger:         #991B1B;
}

/* .hero and .media-section always sit over a photo + a hardcoded dark
   overlay (rgba(5,8,22,...) below) regardless of site theme — that's
   deliberate, it's what keeps the background photos legible under text
   in both themes. But it means that in light mode, this content still
   needs the DARK theme's light-colored text, not light mode's own
   near-black --text/--text-muted/--link — otherwise every page's top
   section (which is literally all of this content on Services/Team/
   Careers/Blog/Contact/Portfolio, not just a small hero strip) renders
   near-black text on a near-black background. Scoped to just these two
   selectors so the rest of a light-mode page is unaffected. */
[data-theme="light"] .hero,
[data-theme="light"] .media-section,
/* .nav always sits directly on top of one of the two sections above --
   every page's top section is a .hero or .media-section (see the
   comment below) -- so in light mode it was rendering as a light/white
   bar sitting right above an always-dark photo section, a jarring seam
   right at the boundary. Same override, same reasoning, so nav now
   matches whatever's immediately underneath it on every page. */
[data-theme="light"] .nav{
  --text:       #FFFFFF;
  --text-muted: #A5B4FC;
  --link:       #00E5FF;
  /* Same reasoning for surface/border: light mode's versions are a
     barely-there white tint, meant to read as "glass" against a light
     page background. Over this section's dark overlay they'd be almost
     fully see-through, leaving card/input boundaries and backgrounds
     nearly invisible — so cards and form fields here (e.g. the Contact
     page form) use dark mode's own frosted-dark glass treatment instead. */
  --surface:    rgba(255,255,255,0.08);
  --surface-2:  rgba(255,255,255,0.05);
  --border:     rgba(255,255,255,0.18);
  /* .hero-inner's own background is color-mix(in srgb, var(--bg) X%,
     transparent) — a scrim tinted toward whatever --bg currently is.
     Left alone, light mode's --bg (near-white) makes that scrim a light
     hazy box exactly where this rule just forced light-colored text,
     which is how the lead paragraph ended up nearly invisible (the bold
     white h1 read fine against it; the lighter-weight --text-muted
     paragraph didn't). Overriding --bg here too makes that scrim pick
     up the dark tint instead, matching the section's actual backdrop. */
  --bg:         #050816;
}

/* Glass cards need a blur to actually read as "glass" rather than a
   flat translucent tint — added once here rather than per-component. */
.card, .panel, .stat-card{
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  max-width:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:-0.02em; margin:0 0 .5rem; color:var(--text); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }
.mono{ font-family:var(--font-mono); letter-spacing:.02em; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- Nav ---------- */
/* backdrop-filter (and transform/filter/will-change/perspective) on an
   element makes it BOTH a new stacking context AND the containing block
   for any position:fixed descendant — and #primary-nav (a descendant,
   since the same <ul> is reused as the mobile drawer via a media query)
   is exactly that. Trapped like this, it stops being positioned against
   the real viewport, and its z-index:100 only gets compared against
   other elements inside .nav's own stacking context — not against
   .nav-scrim, which sits outside .nav in the DOM. That let the scrim
   render above the drawer instead of below it: reported live as the
   drawer opening but with broken layout, wrong z-index, and a "see-
   through" look. Moving the blur/tint to ::before keeps the same glass
   look for the visible top bar without .nav itself carrying the
   trap-causing property. */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
  border-bottom:1px solid var(--border);
}
.nav::before{
  /* .nav carries the .container class directly (see main.php) so its
     own box is capped at max-width:1180px and centered -- meaning a
     plain inset:0 background here would only ever fill that same
     centered 1180px box, leaving the real viewport edges showing the
     page background on either side instead of a full-width bar. This
     is the standard "full-bleed from inside a centered container"
     trick: since .container's margin:0 auto already guarantees nav's
     own horizontal center matches the viewport's center, positioning
     from left:50% and pulling back by half the full 100vw width lands
     exactly on the viewport edges regardless of how narrow .nav's own
     (content-constrained) box is. */
  content:"";
  position:absolute; top:0; bottom:0; left:50%; width:100vw;
  transform:translateX(-50%);
  z-index:-1;
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.nav .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--text); }
.nav .brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--link); box-shadow:0 0 12px var(--link); }
.nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; font-size:.95rem; color:var(--text-muted); }
.nav ul a[aria-current="page"]{ color:var(--text); position:relative; }
.nav ul a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--link);
}
main:focus{ outline:none; }
.nav-actions{ display:flex; align-items:center; gap:14px; }
.theme-toggle{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.theme-toggle .icon-sun{ display:none; color:#FFB100; }
.theme-toggle .icon-moon{ display:block; color:var(--text); }
[data-theme="light"] .theme-toggle .icon-sun{ display:block; color:#B36F00; }
[data-theme="light"] .theme-toggle .icon-moon{ display:none; }
.theme-toggle:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--link); outline-offset:2px;
}

/* Screen-reader-only content */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Skip-to-content link */
.skip-link{
  position:absolute; top:-60px; left:12px; z-index:200;
  background:var(--node); color:#fff; padding:12px 20px; border-radius:10px;
  font-weight:600; text-decoration:none; transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px;
  border-radius:999px; font-weight:600; font-size:.95rem; border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--node); color:#ffffff; }
.btn-primary:hover{ background:#0052cc; }
.btn-signal{ background:var(--signal); color:var(--ink); }
.btn-signal:hover{ filter:brightness(1.08); }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--link); color:var(--link); }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:150px 0 110px; min-height:88vh; display:flex; align-items:center; }
.hero .section-bg{
  position:absolute; inset:-8% -4%; z-index:-3;
  background-size:cover; background-position:center;
  will-change:transform;
}
.hero .section-overlay{
  position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg, rgba(5,8,22,0.55) 0%, rgba(5,8,22,0.72) 55%, rgba(5,8,22,0.88) 100%);
}

.hero::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; bottom:-180px; width:640px; height:640px; transform:translateX(-50%);
  border-radius:50%;
  background:repeating-radial-gradient(circle, rgba(0,229,255,0.14) 0 2px, transparent 2px 28px);
  -webkit-mask-image:radial-gradient(circle, black 0%, transparent 70%);
  mask-image:radial-gradient(circle, black 0%, transparent 70%);
}
.hero-inner{ position:relative; z-index:2; text-align:center; max-width:780px; margin:0 auto; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.78rem;
  color:var(--link); border:1px solid var(--border); padding:6px 14px; border-radius:999px; margin-bottom:22px;
}
.hero h1{ font-size:clamp(2.2rem, 5vw, 3.6rem); color:var(--text); }
.hero p.lead{ color:var(--text-muted); font-size:1.15rem; margin:18px 0 34px; }
.hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Stats strip ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:70px; }
.stats div{ background:var(--surface); padding:26px 18px; text-align:center; }
.stats .num{ font-family:var(--font-mono); font-size:2rem; font-weight:700; color:var(--link); }
.stats .label{ color:var(--text-muted); font-size:.85rem; margin-top:6px; }

/* ---------- Section shell ---------- */
.section{ padding:90px 0; }
.section-head{ max-width:600px; margin:0 auto 50px; text-align:center; position:relative; padding:18px 26px; }
.section-head .eyebrow{ margin-bottom:14px; }
.section-head p{ color:var(--text-muted); }

/* ---------- Cards (services / projects) ---------- */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; position:relative; transition:transform .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-4px); border-color:var(--node); }
.card .icon{
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background:linear-gradient(160deg, rgba(0,102,255,0.22), rgba(0,229,255,0.08));
  border:1px solid rgba(0,229,255,0.55);
  box-shadow:0 0 22px -4px rgba(0,229,255,0.55), inset 0 0 12px rgba(0,229,255,0.18);
  margin-bottom:18px; font-size:1.2rem; color:var(--link);
}
.card h3{ font-size:1.15rem; color:var(--text); }
.card p{ color:var(--text-muted); font-size:.95rem; }

/* HUD corner brackets */
.section-head::before, .section-head::after{
  content:""; position:absolute; width:22px; height:22px; opacity:.55;
  border-color:var(--link); border-style:solid; border-width:0;
}
.section-head::before{ top:0; left:0; border-top-width:2px; border-left-width:2px; }
.section-head::after{ bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; }

.project-card{ overflow:hidden; padding:0; }
.project-card img{ height:190px; width:100%; object-fit:cover; }
.project-card .body{ padding:22px; }
.badge{ font-family:var(--font-mono); font-size:.7rem; padding:4px 10px; border-radius:999px; border:1px solid var(--border); color:var(--text-muted); display:inline-block; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--border); padding:60px 0 30px; color:var(--text-muted); font-size:.9rem; }
footer .cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr; gap:32px; margin-bottom:40px; }
footer h4{ color:var(--text); font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; }
footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }

/* ---------- Alerts ---------- */
.alert{ padding:14px 18px; border-radius:10px; margin-bottom:20px; font-size:.92rem; font-weight:500; }
.alert-success{ background:rgba(52,211,153,.15); color:var(--success); border:1px solid var(--success); }
.alert-error{ background:rgba(248,113,113,.15); color:var(--danger); border:1px solid var(--danger); }

[data-theme="light"] .alert-success{ background:rgba(6,95,70,.1); }
[data-theme="light"] .alert-error{ background:rgba(153,27,27,.1); }

/* ---------- Toasts (see assets/js/toast.js) ---------- */
.toast-container{
  position:fixed; top:20px; right:20px; z-index:1000;
  display:flex; flex-direction:column; gap:10px; max-width:360px; width:calc(100% - 40px);
}
.alert.toast{
  margin-bottom:0; box-shadow:0 10px 30px rgba(0,0,0,.25);
  position:relative; padding-right:40px;
  animation:toast-in .25s ease-out;
}
.alert.toast.toast-leaving{ animation:toast-out .2s ease-in forwards; }
.toast-close{
  position:absolute; top:8px; right:10px; background:none; border:0; cursor:pointer;
  font-size:1.1rem; line-height:1; color:inherit; opacity:.6; padding:4px;
}
.toast-close:hover{ opacity:1; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
@keyframes toast-out{ from{ opacity:1; } to{ opacity:0; transform:translateX(20px); } }
@media (prefers-reduced-motion: reduce){
  .alert.toast{ animation:none; }
  .alert.toast.toast-leaving{ animation:none; opacity:0; }
}

/* ---------- Forms ---------- */
.field{ margin-bottom:18px; text-align:left; }
.field label{ display:block; font-size:.85rem; color:var(--text-muted); margin-bottom:6px; font-weight:500; }
.field input, .field textarea, .field select{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-family:var(--font-body); font-size:.95rem;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--link); }
.field input::placeholder, .field textarea::placeholder{ color:var(--text-muted); opacity:0.75; }

/* ---------- Mobile navigation ---------- */
.nav-drawer-checkbox{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:44px; height:44px; border:1px solid var(--border); border-radius:10px;
  background:var(--surface); cursor:pointer; padding:0; flex-shrink:0;
  position:relative; z-index:2;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--text); transition:transform .2s ease, opacity .2s ease; }
.nav-drawer-checkbox:checked ~ .nav .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-drawer-checkbox:checked ~ .nav .nav-toggle span:nth-child(2){ opacity:0; }
.nav-drawer-checkbox:checked ~ .nav .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-scrim{
  display:none; position:fixed; inset:0;
  /* Must stay BELOW .nav's own z-index (50), not above it. .nav has both
     position:sticky and an explicit z-index, which alone (regardless of
     the backdrop-filter already fixed) makes it a stacking context of
     its own — so #primary-nav's z-index:100 only ever gets compared
     against other things *inside* .nav, never against this scrim, which
     sits outside .nav in the root context. At z-index:90 (above .nav's
     50), the scrim rendered over .nav's *entire* subtree, drawer
     included, no matter what z-index the drawer itself declared — the
     dark 50%-opacity overlay sitting on top of it read as "transparency".
     Below 50, it still correctly dims real page content (z-index:1) but
     no longer covers the nav bar or the drawer inside it. */
  z-index:40;
  background:rgba(0,0,0,0.5);
}
.nav-drawer-checkbox:checked ~ .nav-scrim{ display:block; }

/* ---------- Responsive tables (admin) ---------- */
.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width: 960px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 860px){
  .stats{ grid-template-columns:repeat(2,1fr); margin-top:36px; }
  .grid-3, .grid-2{ grid-template-columns:1fr; }
  footer .cols{ grid-template-columns:1fr 1fr; }

  .nav-toggle{ display:flex; }
  .nav-contact-btn{ padding:10px 16px; font-size:.85rem; }

  #primary-nav{
    display:flex; flex-direction:column; gap:2px;
    position:fixed; top:0; right:0; height:100vh; width:min(300px, 82vw);
    background:var(--bg); border-left:1px solid var(--border);
    margin:0; list-style:none; padding:100px 26px 26px;
    transform:translateX(100%); visibility:hidden;
    transition:transform .3s ease, visibility 0s linear .3s;
    z-index:100; overflow-y:auto;
    box-shadow:-20px 0 60px -20px rgba(0,0,0,0.5);
  }
  .nav-drawer-checkbox:checked ~ .nav #primary-nav{
    transform:translateX(0); visibility:visible; transition-delay:0s;
  }
  #primary-nav a{ display:block; padding:14px 4px; font-size:1.05rem; border-bottom:1px solid var(--border); min-height:44px; color:var(--text); }
}

@media (max-width: 480px){
  .hero{ padding:120px 0 80px; min-height:auto; }
  .hero-inner{ padding:26px 18px; }
  .hero-ctas{ gap:10px; }
  .hero-ctas .btn{ padding:10px 18px; font-size:.85rem; flex:0 1 auto; }
  .section{ padding:60px 0; }
  .nav .brand{ font-size:.95rem; }
  .nav-contact-btn{ padding:9px 12px; font-size:.8rem; }
  footer{ padding:44px 0 24px; }
  footer .cols{ grid-template-columns:1fr; gap:28px; margin-bottom:28px; }
  footer .cols > div{ padding-bottom:20px; border-bottom:1px solid var(--border); }
  footer .cols > div:last-child{ border-bottom:none; padding-bottom:0; }
  footer h4{ margin-bottom:12px; }
  footer ul{ gap:14px; }
  footer ul a{ display:inline-block; padding:2px 0; }
}

/* Base background wash */
body{
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(108,92,231,0.16), transparent 60%),
    radial-gradient(1000px 700px at 90% 10%, rgba(34,211,238,0.10), transparent 55%),
    var(--bg);
}
/* .nav deliberately excluded here — it already has its own
   position:sticky + z-index:50 from its dedicated rule above. This rule
   and that one have IDENTICAL specificity (both plain class selectors),
   so whichever comes later in the file wins — this one, being later,
   was silently resetting .nav's z-index from 50 back down to 1. Once
   equal to main's z-index (also 1), document order decided the winner:
   <main> comes after <nav> in the markup, so it painted its entire
   stacking context — the whole visible page — on top of .nav's entire
   stacking context, drawer included, regardless of the drawer's own
   z-index:100 (meaningless once confined to a losing parent context).
   That's what "the menu shows behind the background" actually was. */
main, footer{ position:relative; z-index:1; }

.hero-inner{
  background:color-mix(in srgb, var(--bg) 50%, transparent);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:28px;
  border:1px solid var(--border);
  padding:36px 28px;
}
[data-theme="light"] .hero-inner{
  background:color-mix(in srgb, var(--bg) 75%, transparent);
}

/* Scroll reveals */
[data-reveal]{ opacity:1; }
.reveal-fallback-visible{ opacity:1 !important; transform:none !important; filter:none !important; }

/* 3D tilt cards */
.tilt-card{
  --glow-x:50%; --glow-y:50%;
  transition:transform .18s ease-out, box-shadow .25s ease;
  will-change:transform;
  position:relative;
}
.tilt-card::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(320px circle at var(--glow-x) var(--glow-y), rgba(34,211,238,0.16), transparent 60%);
  opacity:0; transition:opacity .25s ease;
  pointer-events:none;
}
.tilt-card:hover{
  box-shadow:0 26px 70px -24px rgba(108,92,231,0.55), var(--shadow);
}
.tilt-card:hover::before{ opacity:1; }

[data-counter]{ font-variant-numeric:tabular-nums; }

/* Media sections */
.media-section{ position:relative; overflow:hidden; isolation:isolate; }
.media-section .section-bg{
  position:absolute; inset:-8% -4%; z-index:-2;
  background-size:cover; background-position:center;
  will-change:transform;
}
.media-section .section-overlay{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(5,8,22,0.55) 0%, rgba(5,8,22,0.7) 55%, rgba(5,8,22,0.85) 100%);
}
.media-section::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:50%; width:520px; height:520px; transform:translate(-50%,-50%);
  border-radius:50%;
  background:repeating-radial-gradient(circle, rgba(0,229,255,0.08) 0 2px, transparent 2px 30px);
  -webkit-mask-image:radial-gradient(circle, black 0%, transparent 65%);
  mask-image:radial-gradient(circle, black 0%, transparent 65%);
}
.media-section .section-head, .media-section .grid{ position:relative; z-index:1; }

.glow-border{
  border-color:var(--border);
  box-shadow:0 0 0 1px var(--border), 0 0 30px -6px rgba(0,102,255,0.35);
}
.glow-border:hover{
  box-shadow:0 0 0 1px rgba(0,229,255,0.4), 0 0 40px -4px rgba(0,229,255,0.4);
}

.float{ animation:nnamFloat 6s ease-in-out infinite; }
.float-delay-1{ animation-delay:.8s; }
.float-delay-2{ animation-delay:1.6s; }
@keyframes nnamFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

.light-rays{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.light-rays::after{
  content:""; position:absolute; inset:-50%;
  background:repeating-linear-gradient(
    100deg,
    rgba(0,229,255,0.05) 0px, rgba(0,229,255,0.05) 2px,
    transparent 2px, transparent 140px
  );
  animation:nnamRays 22s linear infinite;
}
@keyframes nnamRays{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(140px, 80px); }
}

/* Technology Showcase FX */
.tech-fx{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.tech-fx .cube{
  position:absolute; width:34px; height:34px;
  border:1px solid rgba(0,229,255,0.35);
  background:rgba(0,102,255,0.06);
  transform:rotate(45deg);
  animation:nnamCubeDrift 14s ease-in-out infinite;
}
@keyframes nnamCubeDrift{
  0%, 100%{ transform:translateY(0) rotate(45deg); opacity:.5; }
  50%{ transform:translateY(-26px) rotate(60deg); opacity:.9; }
}
.tech-fx .binary-col{
  position:absolute; top:-20%; writing-mode:vertical-rl;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:4px;
  color:rgba(0,229,255,0.22); white-space:nowrap;
  animation:nnamBinaryScroll 9s linear infinite;
}
@keyframes nnamBinaryScroll{
  0%{ transform:translateY(-10%); }
  100%{ transform:translateY(30%); }
}

/* Partners strip */
.partners-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:44px; opacity:.85;
}
.partners-strip img{ height:34px; width:auto; filter:grayscale(1) brightness(1.6); opacity:.75; transition:opacity .2s ease, filter .2s ease; }
.partners-strip img:hover{ filter:none; opacity:1; }

/* Testimonials */
.testimonial-card{ display:flex; flex-direction:column; gap:14px; }
.testimonial-card .stars{ color:var(--link); letter-spacing:2px; font-size:.9rem; }
.testimonial-card .who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.testimonial-card .who img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.testimonial-card .who .name{ font-weight:600; font-size:.92rem; color:var(--text); }
.testimonial-card .who .role{ color:var(--text-muted); font-size:.8rem; }

@media (max-width: 860px){
  .light-rays::after{ animation-duration:32s; }
}