/* ==========================================================================
   OxNeural, Phase 2
   Tokens, layout, components, motion. No framework, no build step.
   Human first, technology second: accents are punctuation, never surface.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:         #05070d;
  --surface:    #0a0e1a;
  --surface-2:  #0f1524;
  --surface-3:  #141c2e;
  --border:     #1b2438;
  --border-lit: #26344e;

  /* Type */
  --text:      #e8edf5;
  --text-soft: #b6c2d4;
  --muted:     #8a97ac;
  --faint:     #78869c;

  /* Brand */
  --cyan:   #22d3ee;
  --blue:   #3b82f6;
  --violet: #a855f7;
  --amber:  #f0b429;
  --green:  #22c55e;

  --font:      "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --max: 1200px;
  --gut: 24px;
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 24px;  --r-pill: 30px;

  /* Motion */
  --t1: 150ms; --t2: 200ms; --t3: 250ms; --t4: 300ms; --t5: 500ms; --t-amb: 1500ms;
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-in:   cubic-bezier(.16, .84, .3, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.nav-open, body.modal-open { overflow: hidden; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.14; margin: 0; letter-spacing: -.02em; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
::selection { background: rgba(34,211,238,.25); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: var(--r-sm); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--cyan); color: #04121a; padding: 12px 20px;
  font-weight: 600; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.page-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(148,180,220,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,180,220,.028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.3) 45%, rgba(0,0,0,.14));
  mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.3) 45%, rgba(0,0,0,.14));
  opacity: 0; transition: opacity var(--t-amb) var(--ease);
}
body.ready .page-grid { opacity: 1; }

/* --- layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
section { position: relative; z-index: 1; padding: 96px 0; }
section + section { border-top: 1px solid var(--border); }

.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cyan); margin: 0 0 18px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }

.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 16px; text-wrap: balance; }
.section-head p { color: var(--muted); font-size: 17px; margin: 0; max-width: 62ch; text-wrap: pretty; }
.lede { font-size: 18px; color: var(--text-soft); text-wrap: pretty; }
.strip-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: var(--faint); margin: 0 0 16px; }

.ext svg, .work-cta svg { width: 14px; height: 14px; }

/* --- header -------------------------------------------------------------- */
.site-header {
  position: fixed; left: 0; right: 0; z-index: 200; top: env(safe-area-inset-top, 0px);
  background: rgba(5,7,13,.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t4) var(--ease), background var(--t4) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border); background: rgba(5,7,13,.94); }
.scroll-rail { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.scroll-rail span { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), var(--blue) 55%, var(--violet)); }

.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { width: 34px; height: 34px; object-fit: contain; transition: transform var(--t5) var(--ease-out); }
.brand:hover .brand-mark { transform: rotate(-5deg) scale(1.04); }
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: .06em; }

.nav-links { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
/* The primary CTA lives outside the list on desktop, so the drawer carries its
   own copy. Without it there is no route to Contact on a phone. */
.nav-cta-m { display: none; }
.nav-links a {
  position: relative; display: block; padding: 8px 14px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; color: var(--muted);
  transition: color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1px;
  background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t4) var(--ease-out);
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a.is-active { color: var(--cyan); }
.nav-links a.is-active::after { transform: scaleX(1); }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--border);
  background: var(--surface-2); border-radius: var(--r-sm); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 17px; height: 1.5px; background: var(--text); position: relative; transition: background var(--t1); }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--text);
  transition: transform var(--t4) var(--ease-out);
}
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--r-md); font-weight: 600; font-size: 15.5px;
  font-family: inherit; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--t4) var(--ease-out), box-shadow var(--t4) var(--ease-out),
              background var(--t2) var(--ease), border-color var(--t2) var(--ease),
              background-position var(--t5) var(--ease-out);
}
.btn svg { width: 16px; height: 16px; transition: transform var(--t4) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn-primary {
  color: #04121a;
  background: linear-gradient(110deg, var(--cyan) 0%, #38bdf8 46%, var(--blue) 100%);
  background-size: 190% 100%; background-position: 0% 50%;
  box-shadow: 0 8px 24px -16px rgba(34,211,238,.9);
}
.btn-primary:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(34,211,238,.6); }
.btn-ghost { border-color: var(--border-lit); color: var(--text); }
.btn-ghost:hover { border-color: var(--cyan); background: rgba(34,211,238,.07); transform: translateY(-2px); }
.btn-wa { border-color: rgba(37,211,102,.4); color: #7ee6a6; background: rgba(37,211,102,.08); }
.btn-wa:hover { border-color: #25d366; background: rgba(37,211,102,.15); transform: translateY(-2px); }
.btn-wa svg { width: 18px; height: 18px; }
.btn-wa:hover svg { transform: none; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 20px;
  font-size: 14.5px; font-weight: 600; color: var(--cyan);
  transition: gap var(--t4) var(--ease-out), color var(--t2) var(--ease);
}
.arrow-link svg { width: 15px; height: 15px; }
.arrow-link:hover { gap: 14px; color: #5fe6fb; }

.ext::after {
  content: ""; display: inline-block; width: .6em; height: .6em; margin-left: .36em;
  background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 10.8 10.8 5.2M6.4 5.2h4.4v4.4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 10.8 10.8 5.2M6.4 5.2h4.4v4.4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: opacity var(--t2) var(--ease), transform var(--t4) var(--ease-out);
}
.ext:hover::after { opacity: 1; transform: translate(1px, -1px); }

/* --- hero ---------------------------------------------------------------- */
.hero { min-height: min(94svh, 860px); display: flex; align-items: center; padding: 128px 0 72px; border-top: 0; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,21,36,.55) 0%, transparent 45%, var(--bg) 100%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-inner { display: grid; grid-template-columns: 1.12fr .88fr; gap: 48px; align-items: center; }

.hero-eyebrow {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 22px;
}
.hero h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.035em; margin-bottom: 22px; text-wrap: balance; }
.grad { background: linear-gradient(100deg, var(--cyan) 0%, var(--blue) 52%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: clamp(17px, 1.9vw, 20px); color: var(--text-soft); max-width: 50ch; margin-bottom: 34px; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; list-style: none; margin: 0; padding: 26px 0 0;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.hero-meta li { display: inline-flex; align-items: center; }
.hero-meta li:not(:last-child)::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--border-lit); margin: 0 16px; }

.hero-art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero-mark { order: -1; width: 72px; height: 72px; opacity: .95; }

.console {
  width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border-lit);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(0,0,0,.9);
}
.console-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-lit); }
.console-bar p { margin: 0 0 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.console-body { padding: 16px; }
.crow {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: 8px; background: #070a12;
  font-family: var(--font-mono); font-size: 11.5px;
  opacity: .35; transform: translateY(5px);
  transition: opacity var(--t5) var(--ease-out), transform var(--t5) var(--ease-out), border-color var(--t5) var(--ease);
}
.crow.is-on { opacity: 1; transform: none; border-color: var(--border-lit); }
.ck { color: var(--cyan); }
.cv { color: var(--text-soft); }
.cs { padding: 2px 8px; border-radius: 5px; font-size: 10.5px; }
.cs.ok { color: #7dd3a0; background: rgba(34,197,94,.12); }
.cs.hold { color: var(--amber); background: rgba(240,180,41,.12); }
.cbar { height: 2px; border-radius: 2px; background: var(--border); overflow: hidden; margin: 14px 0 10px; }
.cbar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.console.is-done .cbar i { transform: scaleX(1); transition: transform var(--t-amb) var(--ease); }
.cnote { margin: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); letter-spacing: .06em; }

/* --- process ------------------------------------------------------------- */
.track { position: relative; margin-bottom: 36px; }
.track-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border); overflow: hidden; }
.track-line i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.js .track.running .track-line i { transform: scaleX(1); transition: transform var(--t-amb) var(--ease) 180ms; }
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; background: var(--border); }
.step { position: relative; padding: 28px 22px; background: var(--surface); transition: background var(--t4) var(--ease); }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%; }
.js .step.is-on::before { transform: scaleX(1); transition: transform var(--t5) var(--ease-out); }
.js .step { opacity: .42; transition: opacity var(--t5) var(--ease), background var(--t4) var(--ease); }
.js .step.is-on { opacity: 1; }
.step:hover { background: var(--surface-2); }
.step-n { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--cyan); letter-spacing: .14em; margin-bottom: 12px; }
.step h3 { font-size: 17px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--muted); margin: 0; }
.principle { padding: 24px 28px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border);
  border-left: 2px solid var(--cyan); color: var(--text-soft); font-size: 16px; margin: 0; max-width: 820px; text-wrap: pretty; }
.principle a { color: var(--cyan); border-bottom: 1px solid rgba(34,211,238,.3); }

/* --- contact ------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr .72fr; gap: 48px; align-items: start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 500; color: var(--text-soft); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; font-family: inherit; font-size: 15px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text);
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.field textarea { resize: vertical; min-height: 124px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--cyan); background: var(--surface-3); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field .err { display: none; font-size: 13px; color: #f87171; margin-top: 6px; }
.field.invalid input, .field.invalid textarea { border-color: #f87171; }
.field.invalid .err { display: block; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.form-note { font-size: 13px; color: var(--faint); margin-top: 14px; line-height: 1.55; }
.form-status { margin-top: 14px; font-size: 14px; color: var(--cyan); display: none; }
.form-status.show { display: block; }
html:not(.js) #enquiry .form-actions { display: none; }
.facts { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin: 0; }
.fact { background: var(--surface); padding: 20px 24px; }
.fact dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.fact dd { margin: 0; font-size: 15px; color: var(--text); }
.fact dd a { color: var(--cyan); border-bottom: 1px solid rgba(34,211,238,.3); }

/* --- email chooser ------------------------------------------------------- */
/* A class selector beats the UA rule for [hidden], so display:none must be
   restated. Without this the overlay stays in the layer above the page and
   silently swallows every click on the site. */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; }
.modal-overlay { position: absolute; inset: 0; background: rgba(3,5,10,.78); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--t4) var(--ease); }
.modal.is-open .modal-overlay { opacity: 1; }
.modal-card {
  position: relative; width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-lit); border-radius: var(--r-xl);
  padding: 34px 34px 28px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.95);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity var(--t4) var(--ease-out), transform var(--t4) var(--ease-out);
}
.modal.is-open .modal-card { opacity: 1; transform: none; }
.modal-card h2 { font-size: 25px; margin-bottom: 10px; }
.modal-card > p { color: var(--muted); font-size: 14.5px; margin: 0 0 22px; text-wrap: pretty; }
.modal-x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--r-sm); color: var(--muted); cursor: pointer;
  transition: color var(--t2) var(--ease), border-color var(--t2) var(--ease); }
.modal-x svg { width: 15px; height: 15px; }
.modal-x:hover { color: var(--text); border-color: var(--border-lit); }

.mail-grid { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.mail-btn {
  width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center;
  gap: 4px 14px; padding: 13px 16px; cursor: pointer; text-align: left;
  font-family: inherit; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease), transform var(--t3) var(--ease-out);
}
.mail-btn:hover { border-color: var(--cyan); background: var(--surface-3); transform: translateX(3px); }
.mail-ic { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; color: var(--text-soft); }
.mail-ic svg { width: 24px; height: 24px; }
.mail-name { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 600; color: var(--text); }
.mail-hint { grid-column: 2; grid-row: 2; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.mail-go { grid-column: 3; grid-row: 1 / 3; color: var(--faint); transition: transform var(--t3) var(--ease-out), color var(--t2) var(--ease); }
.mail-go svg { width: 16px; height: 16px; }
.mail-btn:hover .mail-go { transform: translateX(3px); color: var(--cyan); }
.mail-foot { margin: 0; font-size: 13px; color: var(--faint); text-align: center; padding-top: 16px; border-top: 1px solid var(--border); }
.mail-foot strong { color: var(--text-soft); font-weight: 500; }

/* --- footer -------------------------------------------------------------- */
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: 56px 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; }
.footer-brand .brand-mark { width: 40px; height: 40px; }
.footer-brand p { grid-column: 1 / -1; color: var(--muted); font-size: 14.5px; max-width: 300px; margin: 8px 0 0; }
.footer-col h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: 15px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { font-size: 14.5px; color: var(--muted); transition: color var(--t2) var(--ease); }
.footer-col a:hover { color: var(--cyan); }

.connect { padding: 28px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.soc { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  transition: color var(--t2) var(--ease), border-color var(--t2) var(--ease), transform var(--t3) var(--ease-out), background var(--t2) var(--ease); }
.soc svg { width: 19px; height: 19px; }
.soc:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(34,211,238,.08); transform: translateY(-3px); }
.soc::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(3px);
  padding: 4px 9px; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--border-lit);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--t2) var(--ease), transform var(--t3) var(--ease-out);
}
.soc:hover::after, .soc:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.footer-bottom p { margin: 0; font-size: 13px; color: var(--faint); }
.footer-slogan { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; }

/* ==========================================================================
   MOTION
   Four entrance behaviours, gated on .js so the page renders fully without it.
   ========================================================================== */
.js .intro { opacity: 0; transform: translateY(18px); }
.js body.ready .intro { opacity: 1; transform: none;
  transition: opacity var(--t5) var(--ease-in) var(--d, 0ms), transform var(--t5) var(--ease-in) var(--d, 0ms); }
.dly-60 { --d: 60ms; } .dly-100 { --d: 100ms; } .dly-180 { --d: 180ms; } .dly-300 { --d: 300ms; }
.dly-400 { --d: 400ms; } .dly-520 { --d: 520ms; }

.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity var(--t5) var(--ease-out), transform var(--t5) var(--ease-out); }

.js .reveal-blur { opacity: 0; filter: blur(9px); transform: translateY(6px); }
.js .reveal-blur.in { opacity: 1; filter: blur(0); transform: none;
  transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out), transform 900ms var(--ease-out); }

/* Work cards wipe open, then settle. */
.js .mask-in { clip-path: inset(0 0 100% 0); opacity: 0; transform: scale(.985); }
.js .mask-in.in { clip-path: inset(0 0 0 0); opacity: 1; transform: none;
  transition: clip-path 780ms var(--ease-out), opacity 420ms var(--ease), transform 780ms var(--ease-out); }

.js .reveal .stagger-item { opacity: 0; transform: translateY(10px); }
.js .reveal.in .stagger-item { opacity: 1; transform: none;
  transition: opacity 480ms var(--ease-out) var(--d, 0ms), transform 480ms var(--ease-out) var(--d, 0ms); }

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .intro, .js .reveal, .js .reveal-blur, .js .reveal .stagger-item, .js .stage, .js .step, .crow {
    opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .mask-in { clip-path: none !important; opacity: 1 !important; transform: none !important; }
  .js .reveal-line > span { transform: none !important; }
  .js .seam::before { transform: scaleY(1) !important; }
  .js .seam-node { transform: rotate(45deg) scale(1) !important; }
  .js .track-line i, .js .pathway::after, .console .cbar i { transform: scaleX(1) !important; }
  .path-dot { background: var(--cyan) !important; border-color: var(--cyan) !important; }
  .page-grid { opacity: 1 !important; }
  .modal-card, .modal-overlay { opacity: 1 !important; transform: none !important; }
}

/* --- print --------------------------------------------------------------- */
@media print {
  .site-header, .hero-actions, .nav-toggle, .scroll-rail, .page-grid, .modal, .connect { display: none; }
  body { background: #fff; color: #000; }
}

/* --- nav: services dropdown ---------------------------------------------- */
.has-sub { position: relative; }
.caret { width: 12px; height: 12px; margin-left: 5px; transition: transform var(--t3) var(--ease-out); }
.has-sub > a { display: inline-flex; align-items: center; }
.has-sub:hover .caret, .has-sub:focus-within .caret { transform: rotate(180deg); }
.sub {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 210;
  min-width: 290px; list-style: none; margin: 0; padding: 8px;
  background: var(--surface); border: 1px solid var(--border-lit); border-radius: var(--r-md);
  box-shadow: 0 30px 60px -36px rgba(0,0,0,.95);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease-out), visibility var(--t3);
}
.has-sub:hover .sub, .has-sub:focus-within .sub, .sub.open { opacity: 1; visibility: visible; transform: none; }
.sub a { display: block; padding: 10px 13px; border-radius: var(--r-sm); font-size: 14px; color: var(--muted); }
.sub a:hover, .sub a.is-active { color: var(--text); background: var(--surface-2); }
.sub a::after { display: none; }

/* --- page head (inner pages) --------------------------------------------- */
.page-head { padding: 136px 0 56px; border-top: 0; }
.page-head h1 { font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -.03em; margin-bottom: 20px; text-wrap: balance; }
.page-lede { font-size: clamp(16.5px, 1.7vw, 19px); color: var(--text-soft); max-width: 62ch; margin: 0; text-wrap: pretty; }
.page-head-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.page-art { display: flex; justify-content: center; }
.crumbs { font-size: 13px; color: var(--faint); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--cyan); }

/* --- technical widgets ---------------------------------------------------- */
.wpanel { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border-lit);
  border-radius: var(--r-md); overflow: hidden; }
.wbar { display: flex; align-items: center; gap: 6px; padding: 10px 13px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.wbar span { width: 7px; height: 7px; border-radius: 50%; background: var(--border-lit); }
.wbar p { margin: 0 0 0 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.wpanel .code { border: 0; border-radius: 0; background: #070a12; font-size: 11.5px; }
.wnodes, .wrows { padding: 12px; display: grid; gap: 8px; }
.wnode, .wrow { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 12px; background: #070a12;
  font-family: var(--font-mono); font-size: 11.5px; }
.wnode p { margin: 0; color: var(--text-soft); }
.wnode span { color: var(--faint); font-size: 11px; }
.wrow { display: flex; justify-content: space-between; gap: 12px; }
.wrow b { color: var(--cyan); font-weight: 400; }
.wrow span { color: var(--faint); }
.wchart { display: flex; align-items: flex-end; gap: 7px; height: 108px; padding: 14px 14px 0; }
.wchart i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--cyan), rgba(59,130,246,.35)); }
.wfoot { display: flex; justify-content: space-between; padding: 10px 14px 12px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); }

/* --- service cards -------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.svc-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden; position: relative;
  transition: border-color var(--t4) var(--ease), background var(--t4) var(--ease), transform var(--t5) var(--ease-out); }
.svc-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; z-index: 2;
  background: linear-gradient(180deg, var(--cyan), var(--violet)); opacity: 0; transform: scaleY(.3);
  transition: opacity var(--t4) var(--ease), transform var(--t5) var(--ease-out); }
.svc-card:hover, .svc-card:focus-within { border-color: var(--border-lit); background: var(--surface-2); transform: translateY(-3px); }
.svc-card:hover::before, .svc-card:focus-within::before { opacity: 1; transform: scaleY(1); }
.svc-art { padding: 24px 24px 0; height: 210px; display: flex; align-items: stretch; justify-content: center;
  background: linear-gradient(150deg, rgba(34,211,238,.05), transparent 60%); }
.svc-card:nth-child(even) .svc-art { background: linear-gradient(150deg, rgba(168,85,247,.05), transparent 60%); }
.svc-art .wpanel { height: 100%; display: flex; flex-direction: column; transition: transform var(--t5) var(--ease-out); }
.svc-art .wrows, .svc-art .code, .svc-art .wchart { flex: 1; }
.svc-card:hover .svc-art .wpanel { transform: translateY(-3px); }
.svc-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.svc-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--cyan); margin-bottom: 12px; }
.svc-body h2, .svc-body h3 { font-size: clamp(19px, 1.9vw, 23px); margin-bottom: 12px; text-wrap: balance;
  transition: transform var(--t4) var(--ease-out); }
.svc-card:hover .svc-body h2, .svc-card:hover .svc-body h3 { transform: translateX(3px); }
.svc-body p { color: var(--muted); font-size: 15px; margin-bottom: 22px; text-wrap: pretty; }
.svc-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: auto; padding: 10px 18px;
  border-radius: var(--r-sm); border: 1px solid var(--border-lit); font-size: 14px; font-weight: 600; color: var(--text);
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease), gap var(--t4) var(--ease-out); }
.svc-cta svg { width: 14px; height: 14px; }
.svc-cta:hover { border-color: var(--cyan); background: rgba(34,211,238,.08); gap: 13px; }

/* --- capabilities grid ---------------------------------------------------- */
.cap-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cap-grid li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px;
  transition: border-color var(--t4) var(--ease), background var(--t4) var(--ease); }
.cap-grid li:hover { border-color: var(--border-lit); background: var(--surface-2); }
.cap-grid h3 { font-size: 16px; margin-bottom: 8px; }
.cap-grid p { font-size: 14px; color: var(--muted); margin: 0; }

/* --- market trends -------------------------------------------------------- */
.trend-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.trend { background: var(--surface); padding: 28px 26px; }
.trend-n { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--cyan); margin-bottom: 14px; }
.trend h3 { font-size: 17px; margin-bottom: 10px; text-wrap: balance; }
.trend p { font-size: 14.5px; color: var(--muted); margin: 0; text-wrap: pretty; }

/* --- service detail: offer + stack --------------------------------------- */
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.offer-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; }
.offer-block h3 { font-size: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.offer-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.offer-block li { display: flex; gap: 11px; align-items: baseline; color: var(--text-soft); font-size: 14.5px; }
.offer-block li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; transform: translateY(-2px); }

.stack-grid { display: grid; gap: 24px; }
.stack-block h3 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); font-weight: 500; margin-bottom: 14px; }

.cap-note { padding: 30px 34px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border);
  border-left: 2px solid var(--cyan); max-width: 860px; margin-bottom: 40px; }
.cap-note h2 { font-size: 21px; margin-bottom: 12px; }
.cap-note p { color: var(--text-soft); font-size: 16px; margin: 0; text-wrap: pretty; }

.other-services { padding-top: 30px; border-top: 1px solid var(--border); }
.other-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.other-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: 14.5px; font-weight: 500;
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease); }
.other-list svg { width: 15px; height: 15px; color: var(--faint); transition: transform var(--t4) var(--ease-out), color var(--t2) var(--ease); }
.other-list a:hover { border-color: var(--cyan); background: var(--surface-2); }
.other-list a:hover svg { transform: translateX(3px); color: var(--cyan); }

/* --- about ---------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
.about-col h2 { font-size: 22px; margin-bottom: 16px; }
.about-col p { color: var(--muted); font-size: 16px; text-wrap: pretty; }

/* --- CTA band ------------------------------------------------------------- */
.band { border-top: 1px solid var(--border); }
.band-inner { display: grid; grid-template-columns: 1.3fr auto; gap: 36px; align-items: center;
  padding: 40px 42px; border-radius: var(--r-xl); border: 1px solid var(--border-lit);
  background: linear-gradient(130deg, rgba(34,211,238,.07), rgba(168,85,247,.05) 60%, transparent), var(--surface); }
.band-inner h2 { font-size: clamp(22px, 2.6vw, 31px); margin-bottom: 10px; text-wrap: balance; }
.band-inner p { color: var(--muted); font-size: 16px; margin: 0; max-width: 58ch; text-wrap: pretty; }
.band-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.contact-note { margin-top: 24px; padding: 24px 26px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.contact-note h2 { font-size: 17px; margin-bottom: 10px; }
.contact-note p { font-size: 14.5px; color: var(--muted); margin: 0; }
.opt { color: var(--faint); font-weight: 400; }
.footer-loc { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.footer-col h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: 15px; }
.social { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.soc { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  transition: color var(--t2) var(--ease), border-color var(--t2) var(--ease), transform var(--t3) var(--ease-out); }
.soc svg { width: 17px; height: 17px; }
.soc:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-2px); }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-inner, .page-head-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-art, .page-art { align-items: flex-start; justify-content: flex-start; }
  .offer-grid, .other-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .contact-grid, .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .process, .trend-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 28px; }
}
@media (max-width: 820px) {
  .nav-links { position: fixed; inset: 76px 0 auto 0; flex-direction: column; gap: 0; max-height: calc(100dvh - 76px); overflow-y: auto;
    background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px var(--gut) 22px; display: none; }
  .nav-links.open { display: flex; }
  .nav-links > li > a { padding: 14px 4px; font-size: 16px; border-radius: 0; }
  .nav-links a::after { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .caret { display: none; }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
    box-shadow: none; background: none; border: 0; border-left: 1px solid var(--border); border-radius: 0;
    margin: 0 0 6px 6px; padding: 0 0 0 12px; }
  .sub a { padding: 11px 4px; font-size: 14.5px; }
  .nav-cta-m { display: block; margin-top: 14px; }
  .nav-cta-m a { display: flex; align-items: center; justify-content: center; padding: 14px 20px;
    border-radius: var(--r-md); font-weight: 600; color: #04121a;
    background: linear-gradient(110deg, var(--cyan) 0%, #38bdf8 46%, var(--blue) 100%); }
  section { padding: 72px 0; }
  .hero { padding: 112px 0 56px; min-height: auto; }
  .page-head { padding: 108px 0 44px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .svc-grid, .offer-grid, .other-list, .cap-grid, .trend-grid, .process { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .modal-card { padding: 28px 22px 22px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  :root { --gut: 18px; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
  .hero-meta li:not(:last-child)::after { margin: 0 10px; }
  .form-actions .btn { flex: 1 1 100%; }
  .band-actions .btn { flex: 1 1 100%; }
}


/* --- Global reach cards -------------------------------------------------- */
.reach-section .section-head { max-width: 820px; }
.reach-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; perspective:1200px; }
.reach-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-xl); background:linear-gradient(145deg,rgba(15,21,36,.96),rgba(8,12,23,.98)); transform-style:preserve-3d; transition:transform 420ms var(--ease-out),border-color 300ms var(--ease),box-shadow 420ms var(--ease-out); }
.reach-card:hover,.reach-card:focus-visible { transform:translateY(-5px) rotateX(1deg) rotateY(-1deg); border-color:rgba(34,211,238,.55); box-shadow:0 22px 55px rgba(0,0,0,.26),0 0 0 1px rgba(34,211,238,.08); }
.reach-art { overflow:hidden; background:#0b1121; border-bottom:1px solid var(--border); }
.reach-art img { display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; transition:transform 700ms var(--ease-out); }
.reach-card:hover .reach-art img,.reach-card:focus-visible .reach-art img { transform:scale(1.035); }
.reach-copy { padding:22px 24px 25px; }
.reach-kicker { margin:0 0 9px; color:var(--cyan); font:11px/1.4 var(--font-mono); letter-spacing:.16em; }
.reach-copy h3 { font-size:clamp(21px,2.3vw,27px); margin-bottom:10px; }
.reach-cities { color:var(--text-soft); margin:0 0 8px; font-size:14px; }
.reach-desc { color:var(--muted); margin:0; font-size:13px; }
@media(max-width:700px) { .reach-grid { grid-template-columns:1fr; gap:16px; } .reach-copy { padding:19px 20px 22px; } }
@media(prefers-reduced-motion:reduce) { .reach-card,.reach-art img { transition:none!important; } .reach-card:hover,.reach-card:focus-visible { transform:none; } }


/* --- Lead development feature ------------------------------------------- */
.lead-feature { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:42px; align-items:center; }
.lead-feature-copy h2 { font-size:clamp(30px,4vw,46px); max-width:14ch; margin:0 0 18px; }
.lead-feature-copy>p:not(.eyebrow) { color:var(--text-soft); max-width:62ch; }
.lead-feature-points { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 28px; }
.lead-feature-points span { padding:7px 11px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); color:var(--text-soft); font-size:12px; }
.lead-feature-panel { border:1px solid var(--border-lit); border-radius:var(--r-xl); padding:22px; background:linear-gradient(145deg,rgba(15,21,36,.96),rgba(8,12,23,.98)); box-shadow:0 22px 70px rgba(0,0,0,.2); }
.lead-panel-top { display:flex; align-items:center; gap:9px; padding-bottom:18px; border-bottom:1px solid var(--border); font:10px/1.4 var(--font-mono); letter-spacing:.12em; color:var(--muted); }
.lead-dot { width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px rgba(34,211,238,.7); }
.lead-live { margin-left:auto;color:var(--cyan);font-size:9px; }
.lead-pipeline-step { display:flex; align-items:flex-start; gap:15px; padding:20px 0; border-bottom:1px solid var(--border); }
.lead-pipeline-step:last-child { border-bottom:0; padding-bottom:0; }
.lead-pipeline-step>b { color:var(--violet); font:12px/1.5 var(--font-mono); }
.lead-pipeline-step strong,.lead-pipeline-step small { display:block; }
.lead-pipeline-step strong { font-size:14px; }
.lead-pipeline-step small { color:var(--muted); margin-top:4px; font-size:12px; }
@media(max-width:760px) { .lead-feature { grid-template-columns:1fr; gap:26px; } }


/* --- Lead development page ---------------------------------------------- */
.package-card { border:1px solid var(--border-lit); border-radius:var(--r-xl); overflow:hidden; background:linear-gradient(140deg,rgba(15,21,36,.96),rgba(7,11,20,.98)); }
.package-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 18px; padding:26px 30px; border-bottom:1px solid var(--border); background:linear-gradient(100deg,rgba(34,211,238,.08),rgba(168,85,247,.07)); }
.package-label { color:var(--cyan); font:11px/1.4 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; width:100%; }
.package-price strong { font-size:clamp(34px,5vw,52px); line-height:1; letter-spacing:-.04em; }
.package-duration { color:var(--muted); font-size:14px; }
.package-details { padding:8px 30px; }
.package-stage { display:flex; gap:18px; padding:23px 0; border-bottom:1px solid var(--border); }
.package-stage:last-child { border-bottom:0; }
.package-count { color:var(--cyan); font:13px/1.6 var(--font-mono); }
.package-stage h3 { font-size:18px; margin-bottom:7px; }
.package-stage p { color:var(--text-soft); margin:0; }
.package-note { margin:0; padding:18px 30px; color:var(--muted); background:rgba(0,0,0,.14); font-size:12px; border-top:1px solid var(--border); }
.package-card>.btn { margin:0 30px 28px; }
.sample-links { border-top:1px solid var(--border); }
.sample-links>a { display:flex; align-items:center; gap:18px; padding:20px 4px; border-bottom:1px solid var(--border); transition:padding var(--t3) var(--ease-out),color var(--t2) var(--ease); }
.sample-links>a:hover { padding-left:12px; color:var(--cyan); }
.sample-links>a>span { color:var(--violet); font:12px/1.4 var(--font-mono); }
.sample-links>a>div { flex:1; min-width:0; }
.sample-links strong,.sample-links small { display:block; }
.sample-links strong { font-size:15px; }
.sample-links small { color:var(--muted); font-size:12px; margin-top:3px; }
.sample-links>a>b { color:var(--cyan); font-size:20px; font-weight:400; }
@media(max-width:600px) { .package-price,.package-details { padding-left:20px;padding-right:20px; } .package-note { padding:16px 20px; } .package-card>.btn { margin-left:20px; margin-right:20px; } .package-stage { gap:12px; } }

/* Quote heading is text, not a numeric price. */
.package-price .quote-title { font-size:clamp(24px,3.2vw,34px); letter-spacing:-.02em; line-height:1.15; }

/* --- technology stack chips: UI/UX refinement ---------------------------- */
.stack-grid {
  min-width: 0;
}

.stack-block {
  min-width: 0;
}

.stack-block .chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.stack-block .chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--border-lit);
  border-radius: var(--r-pill);
  background: linear-gradient(
    135deg,
    rgba(20, 28, 46, 0.88),
    rgba(10, 14, 26, 0.94)
  );
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
  transition:
    color var(--t2) var(--ease),
    border-color var(--t2) var(--ease),
    background var(--t2) var(--ease),
    transform var(--t2) var(--ease-out);
}

.stack-block .chip:hover {
  color: var(--text);
  border-color: rgba(34, 211, 238, 0.55);
  background: rgba(34, 211, 238, 0.07);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .stack-block .chips {
    gap: 8px;
  }

  .stack-block .chip {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-block .chip {
    transition: none;
  }

  .stack-block .chip:hover {
    transform: none;
  }
}


/* --- mobile touch-target usability refinement ------------------------- */
@media (max-width: 820px) {
  .nav-links > li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .nav-cta-m a {
    min-height: 48px;
  }

  .svc-cta {
    min-height: 44px;
    align-items: center;
  }

  .field input,
  .field select {
    min-height: 48px;
  }

  .form-actions .btn,
  .hero-actions .btn,
  .band-actions .btn {
    min-height: 48px;
  }
}

@media (max-width: 480px) {
  .nav-links > li > a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}


/* --- global reach ambient motion -------------------------------------- */
.reach-card {
  position: relative;
  isolation: isolate;
}

.reach-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent,
    var(--cyan) 35%,
    var(--violet) 70%,
    transparent
  );
  opacity: 0;
  transform: scaleY(.35);
  transform-origin: center;
  transition: opacity 360ms ease, transform 520ms ease;
}

.reach-card:hover::after,
.reach-card:focus-visible::after {
  opacity: .85;
  transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  .reach-card::after {
    transition: none;
  }
}


/* --- capability highlights strip ------------------------------------- */
.highlights-section {
  padding: 26px 0;
  background: linear-gradient(100deg, rgba(34,211,238,.035), rgba(168,85,247,.045));
}
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.highlight-item {
  position: relative;
  min-width: 0;
  padding: 16px 22px;
  border-left: 1px solid var(--border);
}
.highlight-item:first-child { border-left: 0; }
.highlight-index {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--cyan);
  font: 11px/1.4 var(--font-mono);
  letter-spacing: .12em;
}
.highlight-item h2 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 650;
  color: var(--text);
}
.highlight-item p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.65;
}
@media (max-width: 900px) {
  .highlights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .highlight-item:nth-child(3) { border-left: 0; }
  .highlight-item:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 520px) {
  .highlights-section { padding: 14px 0; }
  .highlight-item { padding: 16px 12px; }
  .highlight-item h2 { font-size: 15px; }
  .highlight-item p { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .highlight-item { scroll-behavior: auto; }
}


/* --- animation polish: staging refinement ---------------------------- */
.js .highlights-grid .highlight-item:nth-child(2) { transition-delay: 60ms; }
.js .highlights-grid .highlight-item:nth-child(3) { transition-delay: 120ms; }
.js .highlights-grid .highlight-item:nth-child(4) { transition-delay: 180ms; }

@media (hover: none) {
  .reach-card:hover {
    transform: none;
    box-shadow: none;
  }
  .reach-card:hover .reach-art img {
    transform: none;
  }
  .reach-card:hover::after {
    opacity: 0;
    transform: scaleY(.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .highlights-grid .highlight-item {
    transition-delay: 0ms !important;
  }
}

/* --- staging hero console: premium depth refinement ------------------- */
.hero-art .console {
  position: relative;
  isolation: isolate;
  border-color: rgba(34, 211, 238, .28);
  background:
    radial-gradient(ellipse at 8% 0%, rgba(34, 211, 238, .09), transparent 48%),
    radial-gradient(ellipse at 100% 100%, rgba(139, 92, 246, .10), transparent 46%),
    var(--surface);
  box-shadow:
    0 30px 70px -38px rgba(0, 0, 0, .92),
    0 0 0 1px rgba(34, 211, 238, .035),
    0 0 42px -28px rgba(34, 211, 238, .30);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.hero-art .console-bar {
  background: linear-gradient(
    105deg,
    rgba(34, 211, 238, .055),
    var(--surface-2) 55%,
    rgba(139, 92, 246, .07)
  );
}

@media (hover: hover) and (pointer: fine) {
  .hero-art .console:hover {
    border-color: rgba(34, 211, 238, .42);
    box-shadow:
      0 34px 76px -38px rgba(0, 0, 0, .95),
      0 0 0 1px rgba(34, 211, 238, .06),
      0 0 52px -26px rgba(34, 211, 238, .38);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art .console {
    transition: none;
  }
}
/* --- end staging hero console refinement ------------------------------ */

/* --- staging hero console: animated light sweep ----------------------- */
.hero-art .console {
  border-color: rgba(34, 211, 238, .38);
}

.hero-art .console::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent);
  opacity: 0;
  transform: translateX(-110%);
  animation: oxnConsoleLightSweep 5s ease-in-out infinite;
}

@keyframes oxnConsoleLightSweep {
  0%, 15% { transform: translateX(-110%); opacity: 0; }
  25%, 70% { opacity: .9; }
  85%, 100% { transform: translateX(250%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art .console::before {
    animation: none;
    transform: none;
    opacity: .65;
  }
}
/* --- end staging hero console light sweep ----------------------------- */

/* --- OxNeural staging: lightweight neural sphere visual --------------- */
.hero-art {
  perspective: 1000px;
}

.oxn-neural-sphere {
  position: relative;
  width: clamp(210px, 25vw, 310px);
  aspect-ratio: 1;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  isolation: isolate;
  pointer-events: none;
}

.oxn-neural-sphere::before,
.oxn-neural-sphere::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(34, 211, 238, .30);
  border-radius: 50%;
  box-shadow: 0 0 34px -18px rgba(34, 211, 238, .65);
}

.oxn-neural-sphere::before {
  transform: rotateX(68deg) rotateZ(-22deg);
  animation: oxnSphereOrbit 12s linear infinite;
}

.oxn-neural-sphere::after {
  inset: 16%;
  border-color: rgba(168, 85, 247, .38);
  transform: rotateY(68deg) rotateZ(25deg);
  animation: oxnSphereOrbitReverse 16s linear infinite;
}

.oxn-neural-sphere .sphere-core {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    rgba(232, 237, 245, .95) 0%,
    rgba(34, 211, 238, .72) 12%,
    rgba(59, 130, 246, .34) 42%,
    rgba(168, 85, 247, .12) 68%,
    transparent 74%);
  filter: drop-shadow(0 0 24px rgba(34, 211, 238, .32));
}

.oxn-neural-sphere .sphere-node {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(34, 211, 238, .85);
}

.oxn-neural-sphere .sphere-node:nth-child(2) { top: 18%; left: 34%; }
.oxn-neural-sphere .sphere-node:nth-child(3) { top: 31%; right: 15%; background: var(--violet); }
.oxn-neural-sphere .sphere-node:nth-child(4) { bottom: 19%; right: 28%; }
.oxn-neural-sphere .sphere-node:nth-child(5) { bottom: 31%; left: 14%; background: var(--violet); }
.oxn-neural-sphere .sphere-node:nth-child(6) { top: 49%; left: 49%; width: 5px; height: 5px; }

@keyframes oxnSphereOrbit {
  from { transform: rotateX(68deg) rotateZ(-22deg); }
  to { transform: rotateX(68deg) rotateZ(338deg); }
}

@keyframes oxnSphereOrbitReverse {
  from { transform: rotateY(68deg) rotateZ(25deg); }
  to { transform: rotateY(68deg) rotateZ(-335deg); }
}

@media (max-width: 820px) {
  .oxn-neural-sphere {
    width: clamp(190px, 54vw, 250px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .oxn-neural-sphere::before,
  .oxn-neural-sphere::after {
    animation: none;
  }
}
/* --- end OxNeural neural sphere --------------------------------------- */

/* === OXN FULL-PAGE CINEMATIC LAYER ================================ */

/* Shared atmospheric depth */
body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(34, 211, 238, .045), transparent 36rem),
    var(--bg);
}

main {
  position: relative;
  isolation: isolate;
}

main > section {
  position: relative;
  scroll-margin-top: 90px;
}

main > section:not(.hero)::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(5%, calc((100% - 1180px) / 2));
  right: max(5%, calc((100% - 1180px) / 2));
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(34, 211, 238, .19) 24%,
    rgba(168, 85, 247, .18) 76%,
    transparent
  );
  opacity: .7;
}

/* Signature hero atmosphere */
.hero {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 77% 43%, rgba(34, 211, 238, .075), transparent 29rem),
    radial-gradient(ellipse at 91% 65%, rgba(168, 85, 247, .065), transparent 25rem),
    transparent;
}

.hero-art {
  transform-style: preserve-3d;
}

.hero-art .console {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Distinctive section headings */
main > section h2 {
  text-wrap: balance;
}

main > section p {
  text-wrap: pretty;
}

/* Existing cards: restrained depth, not excessive neon */
.reach-card,
.highlight-item,
#services .card,
#services article {
  transition:
    border-color 260ms ease,
    box-shadow 300ms ease,
    background-color 260ms ease;
}

.reach-card:hover,
.reach-card:focus-visible {
  border-color: rgba(34, 211, 238, .34);
  box-shadow: 0 18px 48px -34px rgba(34, 211, 238, .30);
}

/* Consistent interaction feedback */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

/* Motion stays optional */
@media (prefers-reduced-motion: reduce) {
  main > section *,
  main > section *::before,
  main > section *::after {
    scroll-behavior: auto;
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }

  .hero-art {
    transform: none;
  }
}

/* Touch devices: no hover-dependent visual information */
@media (hover: none) {
  .reach-card:hover,
  .highlight-item:hover {
    box-shadow: none;
  }
}

/* Smaller screens: keep atmosphere restrained */
@media (max-width: 820px) {
  .hero {
    background:
      radial-gradient(ellipse at 70% 30%, rgba(34, 211, 238, .055), transparent 22rem),
      transparent;
  }

  main > section:not(.hero)::before {
    left: 20px;
    right: 20px;
  }
}

/* === END OXN FULL-PAGE CINEMATIC LAYER ============================ */

/* OXN 3D SPHERE ENHANCEMENT — STAGING */
.oxn-neural-sphere {
  transform-style: preserve-3d;
  animation: oxnSphereFloat 7s ease-in-out infinite;
}
.oxn-neural-sphere .sphere-core {
  animation: oxnCorePulse 4s ease-in-out infinite;
}
.oxn-neural-sphere .sphere-node {
  animation: oxnNodeGlow 3s ease-in-out infinite alternate;
}
.oxn-neural-sphere .sphere-node:nth-child(3),
.oxn-neural-sphere .sphere-node:nth-child(5) {
  animation-delay: -1.5s;
}
@keyframes oxnSphereFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@keyframes oxnCorePulse {
  0%, 100% { scale: 1; opacity: .85; }
  50% { scale: 1.09; opacity: 1; }
}
@keyframes oxnNodeGlow {
  from { opacity: .65; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .oxn-neural-sphere,
  .oxn-neural-sphere .sphere-core,
  .oxn-neural-sphere .sphere-node {
    animation: none !important;
  }
}
/* END OXN 3D SPHERE ENHANCEMENT */


/* OXN_WEBGL_NEURAL_SCENE */
.oxn-neural-sphere.webgl-ready { position:relative; isolation:isolate; }
.oxn-neural-sphere .oxn-webgl-canvas {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  z-index:2; pointer-events:none;
}
.oxn-neural-sphere.webgl-ready::before,
.oxn-neural-sphere.webgl-ready::after { opacity:0; }
.oxn-neural-sphere.webgl-ready > .sphere-core,
.oxn-neural-sphere.webgl-ready > .sphere-node { opacity:0; }
@media (prefers-reduced-motion: reduce) {
  .oxn-neural-sphere.webgl-ready { animation:none !important; }
}
/* END OXN_WEBGL_NEURAL_SCENE */



/* OXN_CINEMATIC_V2 — cinematic brand system */
.oxn-metrics {
  position:relative; padding:28px 0 34px; overflow:hidden;
  border-top:1px solid rgba(125,211,252,.10);
  border-bottom:1px solid rgba(125,211,252,.10);
  background:linear-gradient(105deg,rgba(34,211,238,.045),rgba(8,12,25,.3) 48%,rgba(168,85,247,.05));
}
.oxn-metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.oxn-metric { position:relative; padding:10px 18px; border-left:1px solid rgba(125,211,252,.18); }
.oxn-metric strong { display:block; color:#e8edf5; font-size:clamp(28px,3.1vw,43px); line-height:1.1; letter-spacing:-.045em; font-weight:750; text-shadow:0 0 28px rgba(34,211,238,.13); }
.oxn-metric span { display:block; margin-top:9px; color:#8a97ac; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.oxn-lead-card .oxn-lead-visual { min-height:170px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid rgba(34,211,238,.18); border-radius:14px; background:radial-gradient(circle at 50% 42%,rgba(34,211,238,.16),transparent 48%),linear-gradient(145deg,#0d1930,#080b15); }
.oxn-lead-visual:before,.oxn-lead-visual:after { content:""; position:absolute; width:130px;height:130px;border:1px solid rgba(34,211,238,.26);border-radius:50%; transform:rotateX(66deg) rotateZ(25deg); }
.oxn-lead-visual:after { width:170px;height:170px;border-color:rgba(168,85,247,.28);transform:rotateY(64deg) rotateZ(-20deg); }
.oxn-lead-visual>span { font-size:30px;font-weight:800;letter-spacing:.1em;color:#e8edf5;text-shadow:0 0 22px rgba(34,211,238,.55); }
.oxn-lead-visual>b { position:absolute;bottom:18px;font:10px monospace;letter-spacing:.22em;color:#8a97ac; }
.oxn-lead-visual>i { position:absolute;width:7px;height:7px;border-radius:50%;background:#22d3ee;box-shadow:0 0 15px #22d3ee; }
.oxn-lead-visual>i:nth-of-type(1){top:22%;left:27%}.oxn-lead-visual>i:nth-of-type(2){top:40%;right:20%;background:#a855f7;box-shadow:0 0 15px #a855f7}.oxn-lead-visual>i:nth-of-type(3){bottom:25%;left:34%}
.oxn-products { position:relative; padding:100px 0; overflow:hidden; background:radial-gradient(ellipse at 15% 40%,rgba(34,211,238,.065),transparent 35%),#070a13; }
.oxn-section-intro { max-width:680px; margin:0 0 42px; }
.oxn-section-intro h2,.oxn-global-copy h2 { font-size:clamp(32px,4.4vw,58px);line-height:1.07;letter-spacing:-.045em;margin:12px 0 18px; }
.oxn-section-intro>p:last-child,.oxn-global-copy>p:not(.eyebrow) { color:#9aa7bb;max-width:600px;line-height:1.8; }
.oxn-product-grid { display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:stretch; }
.oxn-product-card,.oxn-roadmap-card { min-width:0;border:1px solid rgba(125,211,252,.15);border-radius:22px;background:linear-gradient(145deg,rgba(17,27,46,.88),rgba(8,11,21,.96));overflow:hidden; }
.oxn-product-featured { display:grid;grid-template-columns:.85fr 1.15fr; }
.oxn-product-art { position:relative;min-height:330px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle,rgba(34,211,238,.15),transparent 56%); }
.oxn-product-core { width:104px;height:104px;display:grid;place-content:center;text-align:center;border:1px solid rgba(34,211,238,.7);border-radius:30px;background:linear-gradient(145deg,rgba(34,211,238,.19),rgba(59,130,246,.08));box-shadow:0 0 65px rgba(34,211,238,.14),inset 0 0 25px rgba(34,211,238,.1);font-size:22px;font-weight:800;letter-spacing:.1em;z-index:2;transform:rotate(-8deg); }
.oxn-product-core small {font-size:10px;color:#22d3ee;letter-spacing:.3em;}
.oxn-product-orbit { position:absolute;width:230px;height:230px;border:1px solid rgba(34,211,238,.26);border-radius:50%;transform:rotateX(65deg) rotateZ(25deg); }
.oxn-product-orbit.orbit-b {width:270px;height:180px;border-color:rgba(168,85,247,.32);transform:rotateY(65deg) rotateZ(-20deg);}
.oxn-product-chip {position:absolute;padding:7px 10px;border:1px solid rgba(125,211,252,.2);border-radius:8px;background:#0b1221;color:#a9dff0;font:9px monospace;letter-spacing:.08em;}
.oxn-product-chip.chip-a{top:20%;left:8%}.oxn-product-chip.chip-b{right:5%;top:35%}.oxn-product-chip.chip-c{bottom:17%;left:19%}
.oxn-product-copy {padding:34px 28px;align-self:center;}
.oxn-product-status {font:10px monospace;letter-spacing:.17em;color:#22d3ee;}
.oxn-product-copy h3,.oxn-roadmap-card h3 {font-size:25px;letter-spacing:-.025em;margin:14px 0;}
.oxn-product-copy p,.oxn-roadmap-card>p:not(.eyebrow) {font-size:14px;line-height:1.8;color:#98a5b9;}
.oxn-tags {display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 25px;}
.oxn-tags span {padding:6px 9px;border:1px solid rgba(125,211,252,.14);border-radius:20px;font-size:10px;color:#a7b6ca;}
.oxn-roadmap-card {padding:30px 26px;}
.oxn-roadmap-item {display:flex;align-items:center;gap:13px;padding:17px 0;border-bottom:1px solid rgba(125,211,252,.1);}
.oxn-roadmap-item:last-child {border:0;}
.oxn-roadmap-item>span:first-child {font:11px monospace;color:#22d3ee;}
.oxn-roadmap-item>div {flex:1;display:grid;gap:5px;}
.oxn-roadmap-item b {font-size:13px;font-weight:600;}
.oxn-roadmap-item small {font-size:11px;color:#8290a5;}
.oxn-roadmap-item>span:last-child {color:#7dd3fc;}
.oxn-global {position:relative;padding:100px 0;overflow:hidden;background:radial-gradient(ellipse at 78% 48%,rgba(59,130,246,.09),transparent 40%),#05070d;}
.oxn-global-layout {display:grid;grid-template-columns:.85fr 1.15fr;gap:30px;align-items:center;}
.oxn-global-copy {position:relative;z-index:2;}
.oxn-country-list {margin-top:28px;display:grid;gap:5px;}
.oxn-country-list>div {display:flex;align-items:center;gap:13px;padding:12px 13px;border:1px solid transparent;border-radius:12px;transition:background .25s,border-color .25s,transform .25s;}
.oxn-country-list>div:hover {background:rgba(34,211,238,.045);border-color:rgba(34,211,238,.17);transform:translateX(4px);}
.oxn-country-code {width:39px;height:35px;display:grid;place-items:center;border:1px solid rgba(34,211,238,.24);border-radius:8px;color:#22d3ee;font:11px monospace;background:rgba(34,211,238,.045);}
.oxn-country-list>div>span:nth-child(2) {flex:1;display:grid;gap:4px;}
.oxn-country-list b {font-size:13px;font-weight:600;}
.oxn-country-list small {font-size:11px;color:#8290a5;}
.oxn-country-list i {font-style:normal;color:#60718b;}
.oxn-global-note {font-size:10px!important;color:#64738a!important;line-height:1.6!important;margin-top:16px;}
.oxn-globe-stage {min-width:0;position:relative;min-height:460px;display:grid;place-items:center;isolation:isolate;}
.oxn-global-globe {position:relative;z-index:2;width:100%;height:440px;max-width:540px;}
.oxn-global-globe canvas {display:block;width:100%;height:100%;}
.oxn-globe-halo {position:absolute;width:76%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.1),rgba(59,130,246,.045) 40%,transparent 70%);filter:blur(15px);z-index:0;}
.oxn-globe-caption {position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:3;width:max-content;max-width:100%;display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid rgba(125,211,252,.15);border-radius:9px;background:rgba(5,9,19,.8);font:9px monospace;letter-spacing:.1em;color:#b8c5d8;}
.oxn-globe-caption>span:last-child {color:#22d3ee;}
.oxn-live-dot {width:6px;height:6px;border-radius:50%;background:#22d3ee;box-shadow:0 0 10px #22d3ee;}
@media(max-width:900px) {
  .oxn-product-grid,.oxn-global-layout {grid-template-columns:1fr;}
  .oxn-product-featured {grid-template-columns:.8fr 1.2fr;}
  .oxn-global-layout {gap:8px;}
  .oxn-globe-stage {min-height:390px;}
  .oxn-global-globe {height:390px;}
}
@media(max-width:600px) {
  .oxn-metrics {padding:20px 0;}
  .oxn-metrics-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .oxn-metric {padding:12px 10px;}
  .oxn-metric strong {font-size:30px;}
  .oxn-metric span {font-size:9px;letter-spacing:.06em;line-height:1.5;}
  .oxn-products,.oxn-global {padding:65px 0;}
  .oxn-product-featured {grid-template-columns:1fr;}
  .oxn-product-art {min-height:230px;}
  .oxn-product-copy {padding:25px 20px;}
  .oxn-roadmap-card {padding:24px 20px;}
  .oxn-global-globe {height:320px;}
  .oxn-globe-stage {min-height:340px;}
  .oxn-globe-caption {font-size:8px;gap:6px;letter-spacing:.04em;}
}
@media(prefers-reduced-motion:reduce) {
  .oxn-country-list>div {transition:none;}
}



/* OXN_CINEMATIC_V3 — balanced lead cards + industry product worlds */
.oxn-lead-card .svc-art {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:220px !important;
  min-height:220px !important;
  aspect-ratio:auto !important;
  padding:18px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
.oxn-lead-card .oxn-lead-visual {
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  box-sizing:border-box;
  border-radius:14px;
  transform:translateZ(0);
}
.oxn-lead-card .oxn-lead-visual:before { width:180px;height:180px; }
.oxn-lead-card .oxn-lead-visual:after { width:240px;height:160px; }
.oxn-lead-card .svc-body { min-width:0; }
.oxn-lead-card .svc-body p { max-width:56ch; }
.oxn-suite-experiences {
  position:relative; overflow:hidden; padding:100px 0;
  background:radial-gradient(ellipse at 50% 0%,rgba(34,211,238,.065),transparent 50%),#05070d;
}
.oxn-v3-heading { max-width:760px; margin-bottom:40px; }
.oxn-v3-heading h2 { font-size:clamp(34px,4.5vw,58px);line-height:1.08;letter-spacing:-.045em;margin-top:12px; }
.oxn-suite-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch; }
.oxn-suite {
  min-width:0;position:relative;overflow:hidden;border:1px solid rgba(125,211,252,.16);
  border-radius:20px;background:linear-gradient(155deg,#101a2b,#080b14 78%);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.oxn-suite:hover { transform:translateY(-6px);border-color:rgba(34,211,238,.42);box-shadow:0 24px 70px rgba(0,0,0,.3),0 0 35px rgba(34,211,238,.05); }
.oxn-suite-visual {
  height:255px;position:relative;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 55%,rgba(34,211,238,.13),transparent 58%);
  border-bottom:1px solid rgba(125,211,252,.1);
}
.oxn-suite-visual:after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(5,7,13,.42));}
.oxn-suite-copy {padding:25px 24px 28px;}
.oxn-roadmap-label {font:10px monospace;letter-spacing:.17em;color:#22d3ee;}
.oxn-suite-copy h3 {font-size:23px;line-height:1.2;letter-spacing:-.035em;margin:12px 0;}
.oxn-suite-copy p {font-size:13px;line-height:1.75;color:#96a5bb;margin:0;}
.oxn-suite-tags {display:flex;flex-wrap:wrap;gap:7px;margin-top:19px;}
.oxn-suite-tags span {font-size:10px;color:#aabbd0;border:1px solid rgba(125,211,252,.14);padding:6px 8px;border-radius:20px;}
/* Healthcare visual */
.health-cross {position:absolute;z-index:1;font-size:54px;font-weight:300;color:#67e8f9;text-shadow:0 0 32px rgba(34,211,238,.8);animation:oxnPulse 3.5s ease-in-out infinite;}
.health-ring {position:absolute;width:190px;height:190px;border:1px solid rgba(34,211,238,.35);border-radius:50%;transform:rotateX(66deg) rotateZ(25deg);animation:oxnRingSpin 18s linear infinite;}
.health-orbit {position:absolute;width:220px;height:150px;border:1px solid rgba(168,85,247,.32);border-radius:50%;transform:rotateY(67deg) rotateZ(-22deg);animation:oxnRingSpin 24s linear infinite reverse;}
.health-panel {position:absolute;z-index:2;right:7%;top:22%;width:48%;padding:13px;border:1px solid rgba(125,211,252,.24);border-radius:10px;background:rgba(7,13,26,.88);box-shadow:0 12px 40px rgba(0,0,0,.3);backdrop-filter:blur(10px);}
.health-panel small {display:block;font:8px monospace;letter-spacing:.1em;color:#67e8f9;margin-bottom:10px;}
.health-panel>b {display:block;font-size:13px;margin-bottom:10px;}
.health-panel>i {display:flex;justify-content:space-between;gap:6px;padding:6px 0;border-top:1px solid rgba(125,211,252,.1);font-size:8px;font-style:normal;color:#a6b4c7;}
.health-panel>i span {width:5px;height:5px;border-radius:50%;background:#22d3ee;box-shadow:0 0 8px #22d3ee;flex-shrink:0;}
/* ERP module constellation */
.erp-hub {position:relative;z-index:2;width:78px;height:78px;display:grid;place-items:center;border:1px solid rgba(34,211,238,.7);border-radius:22px;background:linear-gradient(145deg,rgba(34,211,238,.19),rgba(59,130,246,.08));box-shadow:0 0 45px rgba(34,211,238,.17);font-weight:800;letter-spacing:.13em;transform:rotate(-8deg);}
.erp-module {position:absolute;z-index:2;padding:9px 10px;border:1px solid rgba(125,211,252,.23);border-radius:8px;background:rgba(9,17,33,.93);font:8px monospace;letter-spacing:.08em;color:#bdeefa;box-shadow:0 8px 24px rgba(0,0,0,.24);animation:oxnModuleFloat 5s ease-in-out infinite;}
.em-one{top:17%;left:13%}.em-two{top:24%;right:9%;animation-delay:-1.2s}.em-three{bottom:19%;left:10%;animation-delay:-2.4s}.em-four{bottom:17%;right:10%;animation-delay:-.7s}
.erp-connect {position:absolute;width:190px;height:150px;border:1px solid rgba(168,85,247,.36);border-radius:50%;transform:rotateX(65deg) rotateZ(30deg);}
/* CRM sales pipeline */
.crm-pipeline {position:absolute;top:28%;left:7%;right:7%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;}
.crm-pipeline span {padding:9px 3px;text-align:center;font:7px monospace;letter-spacing:.02em;color:#a8bed3;border:1px solid rgba(125,211,252,.18);border-radius:5px;background:rgba(9,17,32,.9);}
.crm-pipeline span:last-child {color:#67e8f9;border-color:rgba(34,211,238,.4);}
.crm-flow {position:absolute;top:53%;left:12%;right:12%;height:2px;background:linear-gradient(90deg,#3b82f6,#22d3ee,#a855f7);}
.crm-flow i {position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;background:#22d3ee;box-shadow:0 0 14px #22d3ee;animation:oxnFlowDot 4s linear infinite;}
.crm-flow i:nth-child(2){animation-delay:-1s}.crm-flow i:nth-child(3){animation-delay:-2s}.crm-flow i:nth-child(4){animation-delay:-3s}.crm-flow i:nth-child(5){animation-delay:-1.8s}
.crm-customer {position:absolute;bottom:20%;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:10px 13px;border:1px solid rgba(168,85,247,.3);border-radius:8px;background:rgba(10,14,27,.88);font:9px monospace;letter-spacing:.08em;color:#b7c8dc;}
.crm-customer b {margin-left:14px;color:#22d3ee;}
@keyframes oxnPulse {0%,100%{transform:scale(.94);opacity:.8}50%{transform:scale(1.08);opacity:1}}
@keyframes oxnRingSpin {from{rotate:0deg}to{rotate:360deg}}
@keyframes oxnModuleFloat {0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes oxnFlowDot {0%{left:0;opacity:.2}20%{opacity:1}90%{opacity:1}100%{left:100%;opacity:.1}}
/* Consistent scroll reveal on major sections, without hiding content when JS is unavailable */
.js .oxn-suite,.js .oxn-metric,.js .oxn-product-card,.js .oxn-roadmap-card {animation:oxnReveal .75s both;animation-timeline:view();animation-range:entry 0% entry 24%;}
@keyframes oxnReveal {from{opacity:.35;translate:0 22px}to{opacity:1;translate:0 0}}
@media(max-width:950px) {.oxn-suite-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.oxn-suite:last-child{grid-column:1/-1}}
@media(max-width:600px) {
 .oxn-suite-experiences{padding:65px 0}
 .oxn-suite-grid{grid-template-columns:1fr}
 .oxn-suite:last-child{grid-column:auto}
 .oxn-suite-visual{height:225px}
 .oxn-suite-copy{padding:22px 19px}
 .oxn-lead-card .svc-art{height:200px!important;min-height:200px!important;padding:12px!important}
 .oxn-lead-card .oxn-lead-visual{height:100%!important}
}
@media(prefers-reduced-motion:reduce) {
 .oxn-suite,.health-cross,.health-ring,.health-orbit,.erp-module,.crm-flow i {animation:none!important;transition:none!important}
}

/* OXN_CINEMATIC_V3 */

/* OXN staging cleanup: original healthcare artwork */
.oxn-suite-visual { isolation:isolate; }
.oxn-healthcare-photo {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 32%; opacity:.82;
}
.suite-health .oxn-suite-visual:before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(5,7,13,.08),rgba(5,7,13,.58)),
             linear-gradient(0deg,rgba(5,7,13,.55),transparent 55%);
}
.suite-health .health-cross,.suite-health .health-ring,.suite-health .health-orbit,
.suite-health .health-panel { z-index:2; }
@media(max-width:600px) {
  .oxn-healthcare-photo { object-position:center 25%; }
}


/* OXN staging: separate cinematic B2B / B2C lead showcase */
.oxn-lead-showcase { padding:54px 0 48px; }
.oxn-lead-showcase-head { max-width:760px; margin:0 auto 30px; text-align:center; }
.oxn-lead-showcase-head h2 { font-size:clamp(32px,4.5vw,56px); line-height:1.08; letter-spacing:-.045em; margin:12px 0; }
.oxn-lead-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.oxn-lead-panel { min-width:0; overflow:hidden; border:1px solid rgba(125,211,252,.18); border-radius:22px; background:linear-gradient(145deg,rgba(15,24,42,.97),rgba(6,10,20,.99)); box-shadow:0 22px 70px rgba(0,0,0,.2); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.oxn-lead-panel:hover { transform:translateY(-5px); border-color:rgba(34,211,238,.45); box-shadow:0 26px 80px rgba(0,0,0,.32),0 0 35px rgba(34,211,238,.06); }
.oxn-lead-panel-art { height:225px; position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(ellipse at 50% 50%,rgba(34,211,238,.14),transparent 55%),linear-gradient(135deg,#0b1930,#080b15); border-bottom:1px solid rgba(125,211,252,.12); }
.oxn-b2c-panel .oxn-lead-panel-art { background:radial-gradient(ellipse at 50% 50%,rgba(168,85,247,.18),transparent 56%),linear-gradient(135deg,#15102d,#080b15); }
.oxn-lead-center { z-index:2; display:grid; place-items:center; width:88px; height:88px; border:1px solid rgba(103,232,249,.65); border-radius:24px; background:rgba(7,15,29,.84); color:#e8edf5; font-size:25px; font-weight:800; letter-spacing:.12em; box-shadow:0 0 55px rgba(34,211,238,.18); transform:rotate(-8deg); }
.oxn-b2c-panel .oxn-lead-center { border-color:rgba(192,132,252,.7); box-shadow:0 0 55px rgba(168,85,247,.2); }
.oxn-lead-orbit,.oxn-lead-radar { position:absolute; width:235px; height:145px; border:1px solid rgba(34,211,238,.32); border-radius:50%; transform:rotateX(62deg) rotateZ(25deg); animation:oxnLeadOrbit 18s linear infinite; }
.oxn-lead-orbit:after,.oxn-lead-radar:after { content:""; position:absolute; inset:18px -16px; border:1px solid rgba(168,85,247,.35); border-radius:50%; transform:rotate(55deg); }
.oxn-lead-radar { width:210px; height:210px; border-color:rgba(192,132,252,.38); transform:none; }
.oxn-lead-node,.oxn-lead-radar-dot { position:absolute; z-index:2; width:8px; height:8px; border-radius:50%; background:#67e8f9; box-shadow:0 0 18px #22d3ee; }
.oxn-lead-node.node-a { top:27%; left:27%; }.oxn-lead-node.node-b { right:23%; top:34%; }.oxn-lead-node.node-c { bottom:22%; left:39%; }
.oxn-lead-radar-dot { background:#c084fc; box-shadow:0 0 18px #a855f7; }.oxn-lead-radar-dot.dot-a { top:22%; left:50%; }.oxn-lead-radar-dot.dot-b { right:21%; bottom:34%; }.oxn-lead-radar-dot.dot-c { left:24%; bottom:29%; }
.oxn-lead-art-label { position:absolute; bottom:15px; left:18px; color:#8ea5bf; font:9px monospace; letter-spacing:.17em; }
.oxn-lead-panel-copy { padding:27px 28px 30px; }
.oxn-lead-kicker { color:#67e8f9; font:10px monospace; letter-spacing:.12em; }
.oxn-b2c-panel .oxn-lead-kicker { color:#c4b5fd; }
.oxn-lead-panel-copy h3 { font-size:clamp(22px,2.5vw,30px); line-height:1.18; letter-spacing:-.035em; margin:13px 0; }
.oxn-lead-panel-copy p { color:#9aa7bb; font-size:14px; line-height:1.75; }
.oxn-lead-tags { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 24px; }
.oxn-lead-tags span { padding:6px 9px; border:1px solid rgba(125,211,252,.15); border-radius:20px; color:#aebed2; font-size:10px; }
@keyframes oxnLeadOrbit { from { rotate:0deg; } to { rotate:360deg; } }
@media(max-width:760px) { .oxn-lead-panels { grid-template-columns:1fr; } .oxn-lead-panel-art { height:200px; } .oxn-lead-panel-copy { padding:23px 20px 25px; } }
@media(prefers-reduced-motion:reduce) { .oxn-lead-panel,.oxn-lead-orbit,.oxn-lead-radar { animation:none!important; transition:none!important; } }


/* OXN STAGING: cinematic illustrative concept portfolio */
.oxn-portfolio {
  position:relative;
  overflow:hidden;
  padding:clamp(64px,8vw,112px) 0;
  background:radial-gradient(ellipse at 12% 18%,rgba(34,211,238,.075),transparent 38%),
             radial-gradient(ellipse at 90% 75%,rgba(168,85,247,.07),transparent 36%),#060912;
}
.oxn-portfolio:before {
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.17;
  background-image:linear-gradient(rgba(125,211,252,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(125,211,252,.08) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
.oxn-portfolio .wrap {position:relative;z-index:1}
.oxn-portfolio-heading {
  display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:36px;
}
.oxn-portfolio-heading>div {max-width:700px}
.oxn-portfolio-heading h2 {
  font-size:clamp(32px,4.5vw,58px);line-height:1.06;letter-spacing:-.045em;margin:12px 0 0;
}
.oxn-portfolio-note {max-width:350px;margin:0;color:#91a0b6;font-size:13px;line-height:1.75}
.oxn-portfolio-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.oxn-portfolio-card {
  min-width:0;overflow:hidden;border:1px solid rgba(125,211,252,.15);border-radius:20px;
  background:linear-gradient(150deg,rgba(16,25,43,.94),rgba(7,10,19,.98));
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.oxn-portfolio-card:hover {
  transform:translateY(-5px);border-color:rgba(34,211,238,.42);
  box-shadow:0 24px 65px rgba(0,0,0,.3),0 0 35px rgba(34,211,238,.055);
}
.oxn-portfolio-art {
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,rgba(34,211,238,.12),transparent 60%),#0a1020;
  border-bottom:1px solid rgba(125,211,252,.12);
}
.oxn-portfolio-art:after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,13,.05) 55%,rgba(5,7,13,.45));
}
.oxn-portfolio-art img {
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .4s ease;
}
.oxn-portfolio-card:hover .oxn-portfolio-art img {transform:scale(1.035);filter:saturate(1.08)}
.oxn-concept-label,.oxn-portfolio-index {
  position:absolute;z-index:2;top:14px;padding:8px 10px;border-radius:6px;
  border:1px solid rgba(125,211,252,.25);background:rgba(5,10,21,.84);
  backdrop-filter:blur(10px);font:9px/1.2 monospace;letter-spacing:.09em;color:#b8f2ff;
}
.oxn-concept-label {left:14px}
.oxn-portfolio-index {right:14px;color:#d3d8e8}
.oxn-portfolio-copy {padding:22px 24px 24px}
.oxn-portfolio-meta {display:flex;justify-content:space-between;gap:12px;color:#7dd3fc;font:10px monospace;letter-spacing:.1em;text-transform:uppercase}
.oxn-portfolio-meta span:last-child {color:#69788f}
.oxn-portfolio-copy h3 {margin:12px 0 8px;font-size:clamp(22px,2.3vw,29px);letter-spacing:-.035em}
.oxn-portfolio-copy p {margin:0 0 17px;max-width:55ch;color:#9aa8bd;font-size:13px;line-height:1.75}
.oxn-concept-disclaimer {display:inline-block;color:#78879e;font-size:10px;letter-spacing:.025em}
@media(max-width:680px) {
  .oxn-portfolio-heading {display:block}
  .oxn-portfolio-note {margin-top:16px}
  .oxn-portfolio-grid {grid-template-columns:1fr;gap:16px}
  .oxn-portfolio-copy {padding:19px}
  .oxn-concept-label,.oxn-portfolio-index {top:10px;font-size:8px}
  .oxn-concept-label {left:10px}
  .oxn-portfolio-index {right:10px}
}
@media(prefers-reduced-motion:reduce) {
  .oxn-portfolio-card,.oxn-portfolio-art img {transition:none!important}
  .oxn-portfolio-card:hover {transform:none}
}

/* OXN STAGING: balanced three-card product showcase */
@media (min-width: 901px) {
  .oxn-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .oxn-product-grid > .oxn-product-featured {
    grid-column: 1 / -1;
    grid-template-columns: 0.85fr 1.15fr;
  }

  .oxn-product-grid > .oxn-roadmap-card,
  .oxn-product-grid > .suite-health {
    grid-column: auto;
    min-width: 0;
    height: 100%;
  }

  .oxn-product-grid > .suite-health {
    display: flex;
    flex-direction: column;
  }

  .oxn-product-grid > .suite-health .oxn-suite-visual {
    flex: 0 0 255px;
    height: 255px;
  }
}

@media (max-width: 900px) {
  .oxn-product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .oxn-product-grid > .oxn-product-featured {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .oxn-product-grid > .suite-health {
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .oxn-product-grid > .oxn-product-featured {
    grid-template-columns: minmax(0, 1fr);
  }

  .oxn-product-grid > .oxn-product-featured .oxn-product-art {
    min-height: 240px;
  }

  .oxn-product-grid > .suite-health .oxn-suite-visual {
    height: 225px;
    flex-basis: 225px;
  }
}


/* OXN STAGING: portfolio live-project links */
.oxn-portfolio-live-link {
  display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  padding:11px 15px;border:1px solid rgba(34,211,238,.4);
  border-radius:9px;color:#e8edf5;text-decoration:none;
  font-size:12px;font-weight:600;
  background:linear-gradient(110deg,rgba(34,211,238,.12),rgba(59,130,246,.10));
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.oxn-portfolio-live-link:hover {
  transform:translateY(-2px);border-color:#22d3ee;
  background:linear-gradient(110deg,rgba(34,211,238,.2),rgba(59,130,246,.16));
}
.oxn-portfolio-live-link:focus-visible {
  outline:2px solid #22d3ee;outline-offset:4px;
}
@media(prefers-reduced-motion:reduce) {
  .oxn-portfolio-live-link {transition:none}
  .oxn-portfolio-live-link:hover {transform:none}
}


/* OXN STAGING FIX: portfolio page navigation and responsive safeguards */
@media (max-width: 760px) {
  .header-inner { min-width: 0; flex-wrap: wrap; }
  .nav-links { max-width: 100%; }
  .oxn-portfolio-grid { grid-template-columns: minmax(0, 1fr); }
  .oxn-portfolio-card { min-width: 0; }
  .oxn-portfolio-copy { overflow-wrap: anywhere; }
  .oxn-portfolio-live-link { max-width: 100%; white-space: normal; }
}
.oxn-featured-project-grid { grid-template-columns: minmax(0, 1fr); }
.oxn-featured-project { width: 100%; }
html, body { max-width: 100%; }


/* OXN STAGING: structured single featured portfolio */
.oxn-featured-home {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  border:1px solid rgba(125,211,252,.18);
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(16,25,43,.96),rgba(7,10,19,.98));
}
.oxn-featured-home-copy { padding:clamp(24px,4vw,48px); min-width:0; }
.oxn-featured-home-copy h3 {
  margin:12px 0;
  font-size:clamp(25px,3vw,38px);
  line-height:1.15;
  letter-spacing:-.035em;
}
.oxn-featured-home-copy p { max-width:680px; }
.oxn-featured-home-copy .oxn-portfolio-live-link { margin-top:16px; }
.oxn-suite.suite-health .oxn-suite-visual { display:none; }
.oxn-suite.suite-health .oxn-suite-copy { min-width:0; }
@media(max-width:680px) {
  .oxn-featured-home-copy { padding:22px 18px; }
  .oxn-featured-home-copy h3 { overflow-wrap:anywhere; }
  .oxn-featured-home-copy .oxn-portfolio-live-link {
    max-width:100%; white-space:normal;
  }
}


/* OXN STAGING: Zoho-inspired navigation refinement */
@media (min-width: 821px) {
  .site-header .nav,
  .site-header .header-inner {
    min-height: 76px;
  }

  .site-header .nav-links {
    align-items: center;
    min-width: 0;
  }

  .site-header .nav-links > li {
    position: relative;
  }

  .site-header .nav-links > li > a {
    white-space: nowrap;
  }

  .site-header .has-sub > .sub {
    min-width: 300px;
    max-width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-header .has-sub:focus-within > .sub {
    outline: 1px solid var(--border-lit);
  }
}

@media (max-width: 820px) {
  .site-header {
    z-index: 500;
  }

  .site-header .nav,
  .site-header .header-inner {
    min-height: 68px;
    height: auto;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .site-header .brand {
    min-width: 0;
  }

  .site-header .brand-name {
    font-size: 16px;
  }

  .site-header .nav-toggle {
    flex: 0 0 44px;
    position: relative;
    z-index: 510;
  }

  .site-header .nav-links {
    inset: calc(env(safe-area-inset-top, 0px) + 68px) 0 0 0;
    width: 100%;
    max-height: none;
    height: auto;
    padding: 14px var(--gut) calc(28px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .site-header .nav-links > li {
    width: 100%;
    min-width: 0;
  }

  .site-header .nav-links > li > a {
    width: 100%;
    min-height: 48px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .site-header .has-sub > .sub {
    width: auto;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    padding-left: 12px;
  }

  .site-header .nav-cta-m a {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .nav-links,
  .site-header .nav-links a,
  .site-header .has-sub > .sub {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
  }
}


/* OXN STAGING: mobile dropdown accordion */
@media (max-width: 820px) {
  .site-header .has-sub > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .site-header .has-sub > a::before {
    content: "";
    display: none;
  }

  .site-header .has-sub > a[aria-expanded="false"] .caret {
    display: block;
    transform: none;
  }

  .site-header .has-sub > a[aria-expanded="true"] .caret {
    display: block;
    transform: rotate(180deg);
  }

  .site-header .has-sub > .sub {
    display: none;
  }

  .site-header .has-sub > .sub.open {
    display: block;
  }
}

@media (min-width: 821px) {
  .site-header .has-sub > a[aria-expanded] .caret {
    display: inline-block;
  }
}

/* OXN STAGING: mobile readability refinement */
@media (max-width: 600px) {
  .oxn-product-copy p,
  .oxn-roadmap-card > p:not(.eyebrow),
  .oxn-suite-copy p,
  .oxn-portfolio-copy p,
  .oxn-lead-panel-copy p {
    font-size: 15px;
    line-height: 1.8;
  }

  .oxn-tags span,
  .oxn-suite-tags span,
  .oxn-lead-tags span {
    font-size: 11px;
    line-height: 1.5;
  }

  .oxn-roadmap-item small,
  .oxn-country-list small {
    font-size: 12px;
    line-height: 1.6;
  }

  .oxn-roadmap-card {
    padding: 22px 18px;
  }

  .oxn-product-core {
    max-width: 100%;
  }

  .oxn-portfolio-live-link {
    min-height: 44px;
    align-items: center;
  }

  .oxn-product-grid,
  .oxn-portfolio-grid,
  .oxn-featured-project-grid {
    min-width: 0;
    max-width: 100%;
  }
}