/* VIANORM — Cyber Risk Intelligence
   Royal-navy institutional dark system, Tenbin-inspired premium motion
   Fonts: Space Grotesk (display), IBM Plex Mono (mono) */

/* =========================================================
   0. TOKENS
   ========================================================= */
:root{
  /* Base royal-navy palette */
  --midnight:#050814;
  --royal:#08111F;
  --slate:#101622;
  --gunmetal:#182231;
  --border:#2A3446;
  --border-soft:#1B2434;
  --border-strong:#374357;

  /* Text */
  --text:#FFFFFF;
  --text-dim:#9BA7B7;
  --text-mute:#6A7688;
  --text-faint:#3E4A5C;

  /* Accents */
  --royal-blue:#4F7CFF;
  --royal-blue-2:#6C93FF;
  --ice:#7DD3FC;
  --lavender:#CECAFB;
  --lavender-hi:#E8E5FF;
  --violet:#9B8CFF;

  /* Effective accent (used for CTA) */
  --accent:var(--lavender);
  --accent-hover:var(--lavender-hi);
  --accent-glow: rgba(79,124,255,.35);
  --lav-glow: rgba(206,202,251,.28);

  /* System */
  --radius:8px;
  --radius-lg:14px;
  --radius-xl:22px;
  --container:1400px;
  --pad-x:clamp(20px,4vw,44px);
  --font-display:"Space Grotesk","Sora",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-emph:cubic-bezier(.2,.7,0,1);

  /* Shadows / glows */
  --sh-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -20px rgba(0,0,0,.55);
  --sh-hover: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 70px -10px rgba(79,124,255,.14), 0 0 0 1px rgba(79,124,255,.22);
  --glow-blue: 0 0 40px -6px rgba(79,124,255,.55);
  --glow-lav:  0 0 32px -4px rgba(206,202,251,.45);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--midnight)}
body{
  background:var(--midnight);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
ul{list-style:none}
::selection{background:var(--royal-blue);color:#fff}

/* =========================================================
   1. BACKGROUND ATMOSPHERE (fixed, layered, cinematic)
   ========================================================= */
.bg-atmos{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(1200px 720px at 80% -10%, rgba(79,124,255,.16), transparent 60%),
    radial-gradient(900px 640px at -10% 30%, rgba(155,140,255,.10), transparent 60%),
    radial-gradient(1000px 700px at 60% 120%, rgba(125,211,252,.08), transparent 60%),
    linear-gradient(180deg, #050814 0%, #06091A 40%, #050814 100%);
}
.bg-atmos::before{
  /* Grid */
  content:"";position:absolute;inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(1200px 900px at 50% 30%, #000 50%, transparent 100%);
  -webkit-mask-image:radial-gradient(1200px 900px at 50% 30%, #000 50%, transparent 100%);
  opacity:.7;
}
.bg-atmos::after{
  /* Fine noise */
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.65  0 0 0 0 0.72  0 0 0 0 1  0 0 0 0.055 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.9;
  mix-blend-mode:overlay;
}
.bg-orb{
  position:fixed;pointer-events:none;z-index:0;
  width:56vw;height:56vw;max-width:900px;max-height:900px;
  border-radius:50%;
  filter:blur(80px);
  opacity:.55;
  transition:transform .8s var(--ease);
}
.bg-orb--a{top:-14vw;right:-12vw;background:radial-gradient(circle, rgba(79,124,255,.5) 0%, transparent 62%)}
.bg-orb--b{bottom:-20vw;left:-10vw;background:radial-gradient(circle, rgba(155,140,255,.35) 0%, transparent 62%)}
.bg-orb--c{top:40vh;left:20vw;width:38vw;height:38vw;background:radial-gradient(circle, rgba(125,211,252,.16) 0%, transparent 60%);opacity:.6}

/* =========================================================
   2. LAYOUT
   ========================================================= */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad-x);
  position:relative;
  z-index:2;
}
main{position:relative;z-index:2}
section{position:relative}
.section{padding:clamp(88px,11vw,150px) 0}
.section--tight{padding:clamp(56px,7vw,96px) 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:clamp(48px,7vw,80px)}
.section-head .eyebrow{margin-bottom:18px}
.section-head h2{max-width:900px}

/* Eyebrow */
.eyebrow{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{
  content:"";width:28px;height:1px;
  background:linear-gradient(90deg, var(--royal-blue), var(--lavender));
}

/* Typography */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--text);
  letter-spacing:-.015em;
  line-height:1.05;
}
h1{font-size:clamp(42px,7.1vw,104px);line-height:1.02;letter-spacing:-.03em}
h2{font-size:clamp(30px,4.3vw,60px);line-height:1.06;letter-spacing:-.02em}
h3{font-size:clamp(22px,2.6vw,36px);line-height:1.15}
h4{font-size:clamp(18px,1.6vw,24px);line-height:1.25}
p{max-width:64ch}
.lead{
  font-family:var(--font-display);
  font-size:clamp(16px,1.5vw,21px);
  color:#CBD3DE;line-height:1.5;max-width:64ch;font-weight:300;
}
.mono{font-family:var(--font-mono)}
.dim{color:var(--text-dim)}
.grad-text{
  background:linear-gradient(120deg,#fff 0%, #CFD7E3 55%, var(--lavender) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.grad-accent{
  background:linear-gradient(120deg, var(--ice) 0%, var(--royal-blue-2) 55%, var(--lavender) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Reveal (letter/word stagger + section fade) */
.reveal-word{display:inline-block;overflow:hidden;vertical-align:top;line-height:inherit;padding-bottom:.14em;margin-bottom:-.14em}
.reveal-word > span{
  display:inline-block;transform:translateY(110%);
  transition:transform .9s var(--ease-out-expo);
}
.is-in .reveal-word > span,.reveal-word.is-in > span{transform:none}
.reveal-word.d1 > span{transition-delay:.06s}
.reveal-word.d2 > span{transition-delay:.14s}
.reveal-word.d3 > span{transition-delay:.22s}
.reveal-word.d4 > span{transition-delay:.30s}
.reveal-word.d5 > span{transition-delay:.38s}
.reveal-word.d6 > span{transition-delay:.46s}

[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out-expo),transform 1s var(--ease-out-expo)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.18s}
[data-reveal-delay="3"]{transition-delay:.28s}
[data-reveal-delay="4"]{transition-delay:.38s}
[data-reveal-delay="5"]{transition-delay:.48s}

/* =========================================================
   3. BUTTONS
   ========================================================= */
.btn{
  --btn-bg:transparent;
  --btn-fg:#fff;
  --btn-bd:rgba(255,255,255,.35);
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;
  font-family:var(--font-display);font-size:14px;letter-spacing:.02em;
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  border-radius:100px;
  transition:transform .5s var(--ease-emph), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease);
  min-height:46px;overflow:hidden;
}
.btn svg{width:14px;height:14px;transition:transform .5s var(--ease-emph)}
.btn:hover{transform:translateY(-1px)}
.btn:hover svg{transform:translateX(4px)}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(140px 60px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), transparent 60%);
  opacity:0;transition:opacity .35s var(--ease);
}
.btn:hover::after{opacity:1}

/* Primary — lavender with soft royal glow */
.btn--primary{
  --btn-bg:linear-gradient(180deg, #EFEBFF 0%, #CECAFB 100%);
  --btn-fg:#0A0D18;
  --btn-bd:transparent;
  color:#0A0D18;
  box-shadow: 0 10px 30px -12px var(--lav-glow), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.btn--primary:hover{
  box-shadow: 0 14px 36px -12px var(--lav-glow), 0 0 0 1px rgba(255,255,255,.14) inset;
  --btn-bg:linear-gradient(180deg, #fff 0%, #E8E5FF 100%);
}
/* Secondary — subtle glass */
.btn--secondary{
  --btn-bg: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  --btn-fg:#fff;
  --btn-bd: rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
}
.btn--secondary:hover{
  --btn-bd: rgba(206,202,251,.55);
  color:#fff;
  box-shadow: 0 12px 28px -10px rgba(79,124,255,.28);
}
.btn--ghost{
  --btn-bd:rgba(206,202,251,.5); --btn-fg:var(--lavender);
}
.btn--ghost:hover{--btn-bg:rgba(206,202,251,.10)}

.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}

/* =========================================================
   4. LOADER
   ========================================================= */
.loader{
  position:fixed;inset:0;z-index:100;
  background:radial-gradient(1000px 700px at 50% 40%, #0C1428 0%, #050814 60%, #030612 100%);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:28px;
  transition:opacity 1s var(--ease), visibility 1s var(--ease);
}
.loader__radar{
  position:relative;width:180px;height:180px;
}
.loader__radar svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.loader__radar .ring{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1}
.loader__radar .ring--acc{stroke:rgba(79,124,255,.35);stroke-dasharray:2 5;animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader__radar .sweep{transform-origin:50% 50%;animation:spin 2.4s linear infinite}
.loader__radar .stroke{stroke-dasharray:160;stroke-dashoffset:160;animation:drawV 1.6s var(--ease-out-expo) forwards .2s}
@keyframes drawV{to{stroke-dashoffset:0}}
.loader__bar{width:260px;height:1px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.loader__bar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, var(--royal-blue), var(--lavender));
  transform-origin:left;transform:scaleX(0);
  animation:loadBar 1.8s var(--ease-out-expo) forwards .1s;
}
@keyframes loadBar{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.loader__text{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--text-dim);
}
.loader__text .dot{display:inline-block;width:6px;height:6px;background:var(--lavender);border-radius:50%;margin-right:10px;box-shadow:0 0 12px var(--lavender);animation:pulseDot 1.4s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.loader.is-hidden{opacity:0;visibility:hidden}
body.is-loading{overflow:hidden}

/* =========================================================
   5. HEADER / NAV
   ========================================================= */
.header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding:18px 0;
  background:linear-gradient(180deg, rgba(5,8,20,.7) 0%, rgba(5,8,20,.2) 100%);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:border-color .5s var(--ease), background .5s var(--ease), padding .5s var(--ease);
}
.header.is-scrolled{
  border-bottom-color:rgba(42,52,70,.7);
  background:rgba(6,10,22,.78);
  padding:12px 0;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:inline-flex;align-items:center;gap:10px;height:28px}
.logo svg,.logo img{height:26px;width:auto}
.nav__links{display:flex;align-items:center;gap:2px}
.nav__link{
  position:relative;
  font-family:var(--font-display);font-size:13.5px;letter-spacing:.02em;
  color:#D6DCE7;
  padding:10px 16px;border-radius:100px;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.nav__link:hover,.nav__link.is-active{color:#fff;background:rgba(255,255,255,.05)}
.nav__link.is-active::after{
  content:"";position:absolute;left:16px;right:16px;bottom:2px;height:1px;
  background:linear-gradient(90deg, var(--royal-blue), var(--lavender));
}

/* Dropdown */
.nav__item{position:relative}
.nav__toggle{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:13.5px;color:#D6DCE7;
  padding:10px 16px;border-radius:100px;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.nav__toggle .chev{width:10px;height:10px;transition:transform .35s var(--ease)}
.nav__toggle:hover,.nav__item.is-open .nav__toggle{color:#fff;background:rgba(255,255,255,.05)}
.nav__item.is-open .chev{transform:rotate(180deg)}

.dropdown{
  position:absolute;top:calc(100% + 14px);left:0;
  min-width:380px;
  background:
    linear-gradient(180deg, rgba(16,22,34,.98), rgba(8,17,31,.98));
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);
  transition:opacity .4s var(--ease-out-expo), transform .4s var(--ease-out-expo), visibility .4s var(--ease);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(79,124,255,.08) inset;
}
.nav__item.is-open .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;border-radius:10px;
  transition:background .3s var(--ease);
  position:relative;
}
.dropdown a::before{
  content:"";position:absolute;left:6px;top:22px;width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg, var(--royal-blue), var(--lavender));
  opacity:.55;transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.dropdown a:hover{background:rgba(255,255,255,.04)}
.dropdown a:hover::before{opacity:1;transform:scale(1.3)}
.dropdown a .txt{display:flex;flex-direction:column;gap:4px;padding-left:18px}
.dropdown a strong{
  font-family:var(--font-display);font-weight:400;font-size:15px;color:#fff;letter-spacing:-.01em;
}
.dropdown a span{
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-dim);letter-spacing:.14em;text-transform:uppercase;
}
.dropdown a:hover strong{color:var(--lavender)}

.nav__cta{margin-left:8px}
.nav__cta .btn{padding:10px 20px;min-height:40px}
.burger{
  display:none;width:44px;height:44px;
  align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:100px;
  background:rgba(255,255,255,.03);
}
.burger span{display:block;width:16px;height:1px;background:#fff;position:relative;transition:transform .3s var(--ease)}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:16px;height:1px;background:#fff;transition:transform .3s var(--ease), top .3s var(--ease)
}
.burger span::before{top:-5px}
.burger span::after{top:5px}
.burger.is-active span{background:transparent}
.burger.is-active span::before{top:0;transform:rotate(45deg)}
.burger.is-active span::after{top:0;transform:rotate(-45deg)}

/* Mobile nav */
.mobile-nav{
  position:fixed;inset:0;z-index:55;
  background:linear-gradient(180deg,#050814 0%, #0A101F 100%);
  padding:96px 24px 40px;
  transform:translateY(-100%);
  transition:transform .55s var(--ease-out-expo);
  overflow-y:auto;
}
.mobile-nav.is-open{transform:translateY(0)}
.mobile-nav ul{display:flex;flex-direction:column;gap:2px}
.mobile-nav a,.mobile-nav .m-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 4px;
  font-family:var(--font-display);font-size:24px;letter-spacing:-.01em;color:#fff;
  border-bottom:1px solid var(--border-soft);width:100%;text-align:left;
}
.mobile-nav .m-sub{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);border-bottom:1px solid var(--border-soft)}
.mobile-nav .m-sub.is-open{max-height:400px}
.mobile-nav .m-sub a{padding-left:20px;font-size:16px;color:var(--text-dim);border-bottom:0}
.mobile-nav .m-cta{margin-top:32px}

/* =========================================================
   6. HERO
   ========================================================= */
.hero{
  padding-top:clamp(140px,18vh,220px);
  padding-bottom:clamp(96px,12vw,160px);
  position:relative;overflow:hidden;
}
.hero__label{margin-bottom:32px}
.hero__title{
  font-size:clamp(42px,8.5vw,124px);
  line-height:1.04;
  letter-spacing:-.035em;
  max-width:18ch;
  font-weight:400;
}
.hero__title .thin{color:#B3BCC8;font-weight:300;font-style:italic}
.hero__title .accent{
  background:linear-gradient(120deg, var(--ice) 0%, var(--royal-blue-2) 45%, var(--lavender) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{margin-top:32px;color:#CBD3DE;max-width:62ch}

.hero__meta{
  margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  padding-top:32px;border-top:1px solid var(--border-soft);
}
.hero__meta .cell{
  display:flex;flex-direction:column;gap:8px;
  padding:20px 20px;border-radius:10px;
  background:linear-gradient(180deg, rgba(24,34,49,.35), rgba(8,17,31,.15));
  border:1px solid var(--border-soft);
  transition:border-color .4s var(--ease), transform .5s var(--ease);
}
.hero__meta .cell:hover{border-color:rgba(79,124,255,.4);transform:translateY(-3px)}
.hero__meta .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-mute)}
.hero__meta .v{font-family:var(--font-display);font-size:15.5px;color:#fff}

/* Hero visual — layered radar/orbit */
.hero__stage{
  position:absolute;
  right:clamp(-120px,-6vw,0px);top:8%;
  width:min(760px,58vw);
  aspect-ratio:1/1;
  pointer-events:none;
  z-index:0;
}
.hero__stage svg{width:100%;height:100%;overflow:visible}
.hero__stage .ring{fill:none;stroke:rgba(255,255,255,.10);stroke-width:1}
.hero__stage .ring--sub{stroke:rgba(79,124,255,.22)}
.hero__stage .ring--acc{stroke:rgba(206,202,251,.35);stroke-dasharray:2 5}
.hero__stage .line{stroke:rgba(255,255,255,.08);fill:none}
.hero__stage .line--acc{stroke:rgba(79,124,255,.5);fill:none;stroke-dasharray:2 4}
.hero__stage .node{fill:var(--lavender);filter:drop-shadow(0 0 6px rgba(206,202,251,.7))}
.hero__stage .node--blue{fill:var(--royal-blue-2);filter:drop-shadow(0 0 6px rgba(79,124,255,.7))}
.hero__stage .node--dim{fill:#334156}
.hero__stage .center{filter:drop-shadow(0 0 12px rgba(79,124,255,.8))}
.orb-spin{animation:orbit 24s linear infinite;transform-origin:center;transform-box:fill-box}
.orb-spin--slow{animation-duration:80s}
.orb-spin--rev{animation-direction:reverse}
@keyframes orbit{to{transform:rotate(360deg)}}
.hero__stage .sweep{
  transform-origin:center;transform-box:fill-box;
  animation:orbit 6s linear infinite;
}
.hero__stage .pulse-node{animation:pulseNode 2.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes pulseNode{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* Floating info panels */
.panel-float{
  position:absolute;z-index:3;
  background:linear-gradient(180deg, rgba(16,22,34,.9), rgba(8,17,31,.75));
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 18px;
  font-family:var(--font-mono);font-size:11px;color:#CBD3DE;letter-spacing:.06em;
  backdrop-filter:blur(10px);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(79,124,255,.06) inset;
  min-width:220px;
}
.panel-float .k{color:var(--text-mute);display:block;margin-bottom:6px;font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.panel-float .v{color:#fff;font-family:var(--font-mono);font-size:12px}
.panel-float .dot{display:inline-block;width:6px;height:6px;background:var(--lavender);border-radius:50%;margin-right:8px;box-shadow:0 0 10px var(--lavender)}
.panel-float .dot--blue{background:var(--royal-blue);box-shadow:0 0 10px var(--royal-blue)}
.panel-float .bar{margin-top:8px;height:2px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.panel-float .bar span{display:block;height:100%;background:linear-gradient(90deg, var(--royal-blue), var(--lavender));width:70%}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.float{animation:floatY 9s ease-in-out infinite}
.float--alt{animation-duration:13s;animation-delay:-4s}
.float--slow{animation-duration:16s;animation-delay:-2s}

/* Hero grid background (per-section) */
.hero__grid{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(700px 400px at 15% 30%, rgba(79,124,255,.10), transparent 60%);
  opacity:.9;
}

/* =========================================================
   7. SURFACES (cards, panels)
   ========================================================= */
.surface{
  position:relative;
  background:
    linear-gradient(180deg, rgba(24,34,49,.55) 0%, rgba(8,17,31,.35) 100%);
  border:1px solid var(--border-soft);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .5s var(--ease), transform .6s var(--ease-emph), background .5s var(--ease);
}
.surface::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%);
  opacity:.7;
}
.surface::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(400px 220px at var(--mx,50%) var(--my,0%), rgba(79,124,255,.16), transparent 60%);
  opacity:0;transition:opacity .5s var(--ease);
}
.surface:hover{border-color:rgba(79,124,255,.35);transform:translateY(-4px)}
.surface:hover::after{opacity:1}

/* Products preview */
.products-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
}
.product-card{
  padding:clamp(32px,4vw,56px);
  display:flex;flex-direction:column;gap:26px;
  min-height:540px;
  position:relative;overflow:hidden;
  color:#fff;
}
.product-card__top{display:flex;align-items:center;justify-content:space-between}
.product-card__idx{font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;color:var(--text-mute)}
.product-card__sub{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lavender);
  border:1px solid rgba(206,202,251,.3);border-radius:100px;padding:6px 12px;
}
.product-card__title{font-size:clamp(30px,3.2vw,50px);line-height:1.04;letter-spacing:-.025em}
.product-card__title .accent{
  background:linear-gradient(120deg, var(--ice) 0%, var(--royal-blue-2) 55%, var(--lavender) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.product-card__desc{color:#B9C1CD;max-width:54ch}
.product-card__caps{
  margin-top:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px;
  font-family:var(--font-mono);font-size:12px;color:#CBD3DE;
}
.product-card__caps li{display:flex;gap:10px;align-items:baseline}
.product-card__caps li::before{
  content:"";display:inline-block;width:12px;height:1px;
  background:linear-gradient(90deg, var(--royal-blue), var(--lavender));
  transform:translateY(-3px);
}
.product-card__cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:12px;
  font-family:var(--font-display);font-size:14px;color:#fff;
  padding-top:24px;border-top:1px solid var(--border-soft);
}
.product-card__cta svg{transition:transform .5s var(--ease-emph)}
.product-card:hover .product-card__cta{color:var(--lavender)}
.product-card:hover .product-card__cta svg{transform:translateX(6px)}
.product-card__viz{
  position:absolute;right:-8%;top:-14%;
  width:66%;aspect-ratio:1;opacity:.22;pointer-events:none;
  transition:opacity .6s var(--ease), transform 1s var(--ease-emph);
}
.product-card:hover .product-card__viz{opacity:.4;transform:rotate(8deg) scale(1.05)}

/* =========================================================
   8. SERVICES PREVIEW / cards
   ========================================================= */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-card{
  padding:32px 30px;min-height:250px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;overflow:hidden;
}
.svc-card__num{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;color:var(--text-mute)}
.svc-card h4{font-size:22px;line-height:1.2;letter-spacing:-.01em}
.svc-card p{color:var(--text-dim);font-size:13px}
.svc-card__line{
  margin-top:auto;height:1px;width:24px;
  background:linear-gradient(90deg, var(--royal-blue), var(--lavender));
  transition:width .5s var(--ease-emph);
}
.svc-card:hover .svc-card__line{width:64px}

/* =========================================================
   9. INTELLIGENCE MODEL (layers)
   ========================================================= */
.layers{
  display:flex;flex-direction:column;gap:12px;
}
.layer{
  display:grid;grid-template-columns:120px 1fr 2fr auto;gap:32px;
  padding:34px clamp(20px,3vw,44px);
  align-items:center;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(24,34,49,.5), rgba(8,17,31,.2));
  border:1px solid var(--border-soft);
  transition:transform .5s var(--ease-emph), border-color .4s var(--ease), background .4s var(--ease);
  position:relative;overflow:hidden;
}
.layer::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg, var(--royal-blue), var(--lavender));
  opacity:0;transition:opacity .4s var(--ease);
}
.layer:hover{transform:translateX(6px);border-color:rgba(79,124,255,.4)}
.layer:hover::before{opacity:1}
.layer__num{font-family:var(--font-mono);font-size:12px;color:var(--text-mute);letter-spacing:.24em}
.layer__title{font-family:var(--font-display);font-size:clamp(20px,2.1vw,28px);line-height:1.14;letter-spacing:-.015em}
.layer__desc{color:var(--text-dim);font-size:13.5px;max-width:56ch}
.layer__tag{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lavender);
  border:1px solid rgba(206,202,251,.35);padding:8px 14px;border-radius:100px;
  white-space:nowrap;
}

/* =========================================================
   10. USE CASES
   ========================================================= */
.usecases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.usecase{
  padding:32px;min-height:230px;
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;
  position:relative;overflow:hidden;
}
.usecase__label{font-family:var(--font-mono);font-size:10px;letter-spacing:.28em;color:var(--text-mute);text-transform:uppercase}
.usecase h4{font-size:22px;line-height:1.15;letter-spacing:-.01em}
.usecase__meta{font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);line-height:1.6}
.usecase__mark{
  position:absolute;top:24px;right:24px;
  width:8px;height:8px;border-radius:50%;
  background:var(--royal-blue);box-shadow:0 0 12px var(--royal-blue);
  opacity:.6;
}

/* =========================================================
   11. FINAL CTA
   ========================================================= */
.cta-block{
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:clamp(56px,8vw,120px) clamp(28px,5vw,80px);
  position:relative;overflow:hidden;
  background:
    radial-gradient(600px 300px at 90% 10%, rgba(79,124,255,.22), transparent 60%),
    radial-gradient(500px 260px at 10% 100%, rgba(206,202,251,.16), transparent 60%),
    linear-gradient(180deg, #0A1225 0%, #06091A 100%);
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(79,124,255,.1) inset;
}
.cta-block::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(600px 400px at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(600px 400px at 50% 50%, #000 40%, transparent 100%);
  opacity:.5;
}
.cta-block h2{max-width:22ch;position:relative}
.cta-block p{margin-top:20px;color:#B9C1CD;position:relative;max-width:52ch}
.cta-block .btn-row{position:relative}

/* =========================================================
   12. FOOTER
   ========================================================= */
.footer{
  border-top:1px solid var(--border-soft);
  padding:80px 0 40px;
  margin-top:60px;
  position:relative;z-index:2;
  background:linear-gradient(180deg, rgba(6,10,22,0) 0%, rgba(6,10,22,.6) 100%);
}
.footer__top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:56px;border-bottom:1px solid var(--border-soft)}
.footer__brand p{color:var(--text-dim);margin-top:20px;max-width:36ch;font-size:13px}
.footer__col h5{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-mute);margin-bottom:22px;font-weight:400
}
.footer__col ul{display:flex;flex-direction:column;gap:12px}
.footer__col a{font-family:var(--font-display);font-size:14.5px;color:#D6DCE7;transition:color .3s var(--ease)}
.footer__col a:hover{color:var(--lavender)}
.footer__bot{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:32px;
  font-family:var(--font-mono);font-size:11px;color:var(--text-mute);letter-spacing:.16em;
}

/* =========================================================
   13. INTERIOR HERO
   ========================================================= */
.page-hero{padding:clamp(160px,20vh,240px) 0 clamp(72px,9vw,140px);position:relative;overflow:hidden}
.page-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.page-hero h1{font-size:clamp(44px,8.2vw,120px);line-height:1.04;letter-spacing:-.035em}
.page-hero .lead{margin-top:24px}
.page-hero__meta{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;font-family:var(--font-mono);font-size:12px}
.page-hero__meta > div{
  padding:16px 18px;border:1px solid var(--border-soft);border-radius:10px;
  background:linear-gradient(180deg, rgba(24,34,49,.35), rgba(8,17,31,.1));
  transition:border-color .4s var(--ease);
}
.page-hero__meta > div:hover{border-color:rgba(79,124,255,.35)}
.page-hero__meta .k{color:var(--text-mute);letter-spacing:.24em;text-transform:uppercase;font-size:10px;margin-bottom:6px}
.page-hero__meta .v{color:#fff}

/* Capability rows */
.cap-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border-soft)}
.cap-row{
  display:grid;grid-template-columns:80px 1fr 2fr 100px;gap:32px;
  padding:28px 6px;border-bottom:1px solid var(--border-soft);
  align-items:baseline;transition:padding-left .5s var(--ease-emph), background .4s var(--ease);
  position:relative;
}
.cap-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg, var(--royal-blue), var(--lavender));
  opacity:0;transition:opacity .4s var(--ease);
}
.cap-row:hover{padding-left:20px;background:linear-gradient(90deg, rgba(79,124,255,.05), transparent 60%)}
.cap-row:hover::before{opacity:1}
.cap-row__num{font-family:var(--font-mono);font-size:12px;color:var(--text-mute);letter-spacing:.24em}
.cap-row__title{font-family:var(--font-display);font-size:clamp(19px,2.1vw,28px);letter-spacing:-.015em;line-height:1.18}
.cap-row__desc{color:var(--text-dim);font-size:13.5px;max-width:60ch}
.cap-row__tag{
  justify-self:end;font-family:var(--font-mono);font-size:10px;
  color:var(--lavender);letter-spacing:.22em;text-transform:uppercase;
}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{
  border:1px solid var(--border-soft);padding:8px 14px;border-radius:100px;
  font-family:var(--font-mono);font-size:11px;color:#CBD3DE;letter-spacing:.12em;
  background:linear-gradient(180deg, rgba(24,34,49,.4), rgba(8,17,31,.15));
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.chip:hover{border-color:rgba(206,202,251,.55);color:var(--lavender)}

/* =========================================================
   14. CONTACT PAGE
   ========================================================= */
.contact-split{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.contact-info,.contact-form-wrap{
  position:relative;overflow:hidden;
  padding:clamp(36px,4vw,64px);
  border-radius:20px;
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(79,124,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(24,34,49,.55), rgba(8,17,31,.35));
  border:1px solid var(--border-soft);
}
.contact-form-wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(500px 260px at 0% 100%, rgba(206,202,251,.10), transparent 60%);
}
.contact-info h3,.contact-form-wrap h3{font-size:26px;margin-bottom:12px;letter-spacing:-.015em}
.office{margin-top:36px;padding-top:28px;border-top:1px solid var(--border-soft)}
.office h4{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lavender);font-weight:400;margin-bottom:14px;
}
.office p{font-family:var(--font-display);font-size:16px;color:#E1E6EF;line-height:1.7;font-weight:300}
.office a{color:#B9C1CD;transition:color .3s var(--ease)}
.office a:hover{color:var(--lavender)}

/* Form */
.form{display:flex;flex-direction:column;gap:20px;position:relative}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-mute);
}
.field input,.field select,.field textarea{
  width:100%;
  background:rgba(8,14,26,.7);
  border:1px solid var(--border-soft);
  color:#fff;
  padding:14px 16px;
  border-radius:10px;
  font-family:var(--font-mono);font-size:13px;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  min-height:48px;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--royal-blue);background:rgba(10,17,32,.8);
  box-shadow: 0 0 0 3px rgba(79,124,255,.16);
}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4 L6 8 L10 4' stroke='%23CECAFB' fill='none' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;
}
.form-status{min-height:20px;font-family:var(--font-mono);font-size:12px;color:var(--lavender)}

.abstract-lines{position:absolute;inset:0;pointer-events:none;opacity:.5}
.abstract-lines svg{width:100%;height:100%}

/* =========================================================
   15. SERVICES PAGE
   ========================================================= */
.svc-group{margin-top:60px}
.svc-group__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--border-soft);margin-bottom:12px;
}
.svc-group__title{
  font-family:var(--font-display);font-size:clamp(19px,1.8vw,24px);letter-spacing:-.01em;
}
.svc-group__count{font-family:var(--font-mono);font-size:11px;color:var(--text-mute);letter-spacing:.22em;text-transform:uppercase}

.svc-rows{display:flex;flex-direction:column}
.svc-row{
  display:grid;grid-template-columns:100px 1fr 2fr 120px;gap:32px;
  padding:32px 8px;border-bottom:1px solid var(--border-soft);align-items:baseline;
  transition:padding-left .5s var(--ease-emph), background .4s var(--ease);
  position:relative;overflow:hidden;
}
.svc-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg, var(--royal-blue), var(--lavender));
  opacity:0;transition:opacity .4s var(--ease);
}
.svc-row:hover{padding-left:24px;background:linear-gradient(90deg, rgba(79,124,255,.06), transparent 60%)}
.svc-row:hover::before{opacity:1}
.svc-row__num{font-family:var(--font-mono);font-size:12px;color:var(--text-mute);letter-spacing:.24em}
.svc-row__title{font-family:var(--font-display);font-size:clamp(20px,2.1vw,27px);letter-spacing:-.015em;line-height:1.18}
.svc-row__desc{color:var(--text-dim);font-size:13.5px;max-width:66ch}
.svc-row__tag{justify-self:end;font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--lavender)}
.svc-row::after{
  content:"→";position:absolute;right:14px;top:36px;
  color:var(--lavender);opacity:0;transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.svc-row:hover::after{opacity:1;transform:translateX(4px)}

/* =========================================================
   16. MISC
   ========================================================= */
.hair{height:1px;background:var(--border-soft);width:100%;border:0}

/* =========================================================
   17. RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .products-grid{grid-template-columns:1fr}
  .svc-grid,.usecases{grid-template-columns:repeat(2,1fr)}
  .contact-split{grid-template-columns:1fr}
  .hero__meta{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
  .page-hero__grid{grid-template-columns:1fr;gap:32px}
  .hero__stage{opacity:.4;width:80vw;right:-20%;top:6%}
  .layer{grid-template-columns:80px 1fr;gap:16px}
  .layer__desc,.layer__tag{grid-column:2}
  .layer__tag{justify-self:start;margin-top:8px}
  .cap-row,.svc-row{grid-template-columns:60px 1fr;gap:14px}
  .cap-row__desc,.cap-row__tag,.svc-row__desc,.svc-row__tag{grid-column:2}
  .cap-row__tag,.svc-row__tag{justify-self:start;margin-top:6px}
}
@media (max-width:768px){
  .nav__links,.nav__cta{display:none}
  .burger{display:inline-flex}
  .svc-grid,.usecases{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .hero__meta{grid-template-columns:1fr 1fr;gap:12px}
  .hero__stage{display:none}
  .form__row{grid-template-columns:1fr}
  .product-card{min-height:auto}
  .product-card__caps{grid-template-columns:1fr}
  .header{padding:14px 0}
  .panel-float{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  .reveal-word > span{transform:none}
  html{scroll-behavior:auto}
}