/* filename: styles.css */
/* Base color tokens */
:root{
  --bg:#080e1a; --bg-2:#0b1220; --text:#e6e9ef; --muted:#b8c1d6; --acc:#2f7de1; --acc-2:#7bc0ff;
  --panel: rgba(10,16,28,0.55); --panel-strong: rgba(10,16,28,0.7); --border: rgba(120,140,180,0.18);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);

  --header-h: 60px; /* updated at runtime to exact height */
  /* wider gutters on larger screens */
  --container-pad: clamp(20px, 6vw, 36px);

  /* vertical spacing scale (mobile-first) */
  --space-1: clamp(10px, 1.6vh, 14px);
  --space-2: clamp(14px, 2.2vh, 18px);
  --space-3: clamp(18px, 3vh, 24px);

  /* background idle drift knobs */
  --bg-pan-x: 1.6%;
  --bg-pan-y: 0.9%;
  --bg-pan-duration: 26s;

  /* runtime knobs (JS-controlled) */
  --neuro-bright: 1;
  --neuro-contrast: 1;
  --bg-scrub-x: 0%;
  --bg-scrub-y: 0%;
  --cta-ring-size: 6px;
  --neuron-link: 47,125,225;
  --neuron-node: 123,192,255;
  --neuro-bg-start:#0e1a33;
  --neuro-bg-end: var(--bg);
}

/* Light (Day) theme overrides */
[data-theme="light"]{
  --bg:#ffffff;          /* light page background */
  --bg-2:#f5f8ff;        /* underlying surface */
  --text:#0b1220;        /* primary text */
  --muted:#2c3e50;       /* secondary text */
  --acc:#2f7de1;         /* keep brand blues */
  --acc-2:#1a66d8;
  --panel: rgba(255,255,255,0.72);
  --panel-strong: rgba(255,255,255,0.86);
  --border: rgba(20,42,78,0.22);
  --shadow: 0 10px 26px rgba(10,29,61,0.12);

  /* neuron canvas tuning for light backdrop */
  --neuro-bright:1;
  --neuro-contrast:1;
  --neuron-link: 47,125,225;
  --neuron-node: 123,192,255;
  --neuro-bg-start:#eaf2ff;
  --neuro-bg-end: var(--bg);
}
[data-theme="light"] body{
  background:
    radial-gradient(1200px 800px at 80% -10%, #eaf2ff 0%, var(--bg) 60%),
    var(--bg-2);
  background-repeat:no-repeat,no-repeat;
  background-size:1200px 800px,auto;
  background-position:
    calc(50% + var(--bg-scrub-x)) calc(0% + var(--bg-scrub-y)),
    50% 50%;
  color: var(--text);
}

/* Light theme: sticky header & footer look glassy over light surfaces */
[data-theme="light"] .site-header,
[data-theme="light"] footer{
  background:linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.80));
  border-color: rgba(20,42,78,0.16);
  box-shadow: 0 1px 0 rgba(20,42,78,0.06) inset;
}
@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0)){
  [data-theme="light"] .site-header,
  [data-theme="light"] footer{-webkit-backdrop-filter:saturate(150%) blur(10px);backdrop-filter:saturate(150%) blur(10px)}
}

/* Light theme: cards and CTA */
[data-theme="light"] .card{
  background:linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.80));
  border-color: rgba(20,42,78,0.14);
  box-shadow: var(--shadow);
}
[data-theme="light"] .cta{
  color: var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.80));
  border:1px solid rgba(47,125,225,.45);
}
[data-theme="light"] .cta:hover,
[data-theme="light"] .cta:focus-visible{
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(47,125,225,.10) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.80));
  border-color: rgba(47,125,225,.75);
  box-shadow:
    inset 0 0 0 1px rgba(47,125,225,.16),
    0 12px 26px rgba(47,125,225,.22),
    0 0 0 var(--cta-ring-size) rgba(47,125,225,.10);
}

/* Light theme: feature accent */
[data-theme="light"] .feature{
  background:linear-gradient(135deg,rgba(47,125,225,.06),rgba(123,192,255,.025));
}
[data-theme="light"] .feature:hover{
  background:linear-gradient(135deg,rgba(47,125,225,.1),rgba(123,192,255,.04));
  box-shadow:0 2px 12px rgba(47,125,225,.1);
}

/* Light theme: static backdrop image (keeps style, flips to light ink) */
[data-theme="light"] .static-bg{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900' viewBox='0 0 1400 900'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='0%25' r='100%25'%3E%3Cstop offset='0%25' stop-color='%23eaf2ff'/%3E%3Cstop offset='70%25' stop-color='%23f5f8ff'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3Cg stroke='%232f7de1' stroke-opacity='0.25'%3E%3Ccircle cx='100' cy='120' r='2' fill='%231a66d8'/%3E%3Ccircle cx='300' cy='420' r='2' fill='%231a66d8'/%3E%3Ccircle cx='680' cy='200' r='2' fill='%231a66d8'/%3E%3Ccircle cx='1100' cy='160' r='2' fill='%231a66d8'/%3E%3Cline x1='100' y1='120' x2='300' y2='420'/%3E%3Cline x1='300' y1='420' x2='680' y2='200'/%3E%3Cline x1='680' y1='200' x2='1100' y2='160'/%3E%3C/g%3E%3C/svg%3E");
}

html{scroll-behavior:smooth}
html.scrollfx-active{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, #0e1a33 0%, var(--bg) 60%),
    var(--bg-2);
  background-repeat:no-repeat,no-repeat;
  background-size:1200px 800px,auto;
  background-position:
    calc(50% + var(--bg-scrub-x)) calc(0% + var(--bg-scrub-y)),
    50% 50%;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%; /* avoid iOS zoom jumps */
}

/* Make media responsive by default */
img, svg, video, canvas{max-width:100%;height:auto;display:block}

/* Improve small-screen text behavior */
p, li{overflow-wrap:break-word;}

/* Turn on idle background animation when JS adds .bg-anim */
.bg-anim{animation:bgPan var(--bg-pan-duration) ease-in-out infinite alternate}
@keyframes bgPan{
  0%{background-position:calc(50% + var(--bg-scrub-x)) calc(0% + var(--bg-scrub-y)),50% 50%}
  50%{background-position:calc(50% + var(--bg-scrub-x) + var(--bg-pan-x)) calc(0% + var(--bg-scrub-y) + var(--bg-pan-y)),50% 50%}
  100%{background-position:calc(50% + var(--bg-scrub-x) - var(--bg-pan-x)) calc(0% + var(--bg-scrub-y)),50% 50%}
}

/* Respect comfort/battery */
@media (prefers-reduced-motion: reduce), (pointer: coarse), (hover: none){
  .bg-anim{animation:none!important}
}

/* Preloader */
#preloader{position:fixed;inset:0;background:var(--bg);z-index:2000;transition:opacity .5s ease;opacity:1}
body.loaded #preloader{opacity:0;pointer-events:none}

/* Theme transition overlay */
body.theme-fade::after{
  content:"";
  position:fixed; inset:0;
  background:var(--bg);
  pointer-events:none;
  animation:themeFade .4s ease-out forwards;
  z-index:1999;
}
@keyframes themeFade{from{opacity:1}to{opacity:0}}

/* Layout helpers */
.container{
  max-width:1080px;margin:0 auto;
  padding-left: calc(var(--container-pad) + env(safe-area-inset-left));
  padding-right: calc(var(--container-pad) + env(safe-area-inset-right));
}

/* Canvas (fixed, below content) */
#neurons{
  position:fixed; inset:0;
  width:100vw; width:100dvw;
  height:100vh; height:100dvh;
  z-index:0; display:block;
  filter:brightness(var(--neuro-bright)) contrast(var(--neuro-contrast));
  transition:opacity .45s ease;
  will-change:filter;
}
body.no-js #neurons{display:none}
.static-bg{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900' viewBox='0 0 1400 900'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='0%25' r='100%25'%3E%3Cstop offset='0%25' stop-color='%230e1a33'/%3E%3Cstop offset='70%25' stop-color='%23080e1a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3Cg stroke='%232f7de1' stroke-opacity='0.25'%3E%3Ccircle cx='100' cy='120' r='2' fill='%237bc0ff'/%3E%3Ccircle cx='300' cy='420' r='2' fill='%237bc0ff'/%3E%3Ccircle cx='680' cy='200' r='2' fill='%237bc0ff'/%3E%3Ccircle cx='1100' cy='160' r='2' fill='%237bc0ff'/%3E%3Cline x1='100' y1='120' x2='300' y2='420'/%3E%3Cline x1='300' y1='420' x2='680' y2='200'/%3E%3Cline x1='680' y1='200' x2='1100' y2='160'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;
  background-attachment:fixed;
}

/* Mobile/GPU friendliness */
@media (pointer: coarse), (hover: none){
  .static-bg{ background-attachment:scroll }
  #neurons{ will-change: transform; transform: translateZ(0) }
}
@media (prefers-reduced-motion: reduce){
  #neurons{ transition:none }
}

/* Header (sticky top bar) */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:linear-gradient(to bottom, rgba(8,14,26,0.85), rgba(8,14,26,0.35));
  border-bottom:1px solid var(--border);
}
@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0)){
  .site-header{-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px)}
}
/* mobile-safe horizontal padding in header */
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:var(--header-h);
  /* rely on .container for horizontal gutters; keep only vertical */
  padding-block: var(--space-2);
}
.brand{font-weight:700;letter-spacing:.3px;font-size:1.05rem;display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}

.header-contact{
  font-size:.85rem;font-weight:500;letter-spacing:.02em;
  color:var(--acc-2);text-decoration:none;
  padding:.45rem 1.1rem;
  border:1px solid var(--border);
  border-radius:999px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.header-contact:hover,.header-contact:focus-visible{
  background:rgba(123,192,255,.1);border-color:var(--acc-2);color:var(--text);
}
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.4rem;
  min-width:40px; min-height:40px; padding:.4rem .6rem;
  border-radius:999px;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  cursor:pointer;
}
.theme-toggle .icon{ display:block }
.theme-toggle:hover, .theme-toggle:focus-visible{
  background:rgba(123,192,255,.08);
}
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* Hero */
.hero{
  position:relative;z-index:1;
  /* a touch more vertical room */
  padding-top: clamp(2.5rem, 8vh, 6.5rem);
  padding-bottom: clamp(1.75rem, 6vh, 4.5rem);
  text-align:center;
  /* horizontal gutters come from .container */
}
.hero h1{font-size:clamp(1.7rem,4.5vw + .5rem,3.2rem);line-height:1.15;margin:0 0 var(--space-2)}
.hero p{color:var(--muted);font-size:clamp(1rem,1.2vw + .6rem,1.2rem);margin:0 auto var(--space-2);max-width:820px}
.cta{
  display:inline-block;
  text-decoration:none;
  font-weight:600;
  min-height:44px; /* touch target */
  border-radius:.8rem;
  position: relative;
  isolation: isolate; /* keeps sheen behind text */
  padding: .95rem 1.2rem; /* slightly firmer */
  background:
    linear-gradient(180deg, rgba(10,16,28,.92), rgba(10,16,28,.62));
  border: 1px solid rgb(123 192 255 / .50); /* was var(--border) */
  color: var(--text);
  box-shadow:
    inset 0 0 0 1px rgb(47 125 225 / .14),
    0 10px 30px rgb(0 0 0 / .35); /* keep your base shadow */
  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .06s ease;
}

/* subtle accent sheen that fades in on hover */
.cta::after{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(135deg,
      rgb(123 192 255 / .55),
      rgb(47 125 225 / .18) 28%,
      transparent 58%);
  mix-blend-mode:screen;
  opacity:0;
  transform: translateY(6%);
  transition: opacity .25s ease, transform .25s ease;
}

/* Hover/Focus: add blue lift + ring without gaudy glow */
.cta:hover,
.cta:focus-visible{
  background:
    radial-gradient(120% 160% at 50% 0%,
      rgb(123 192 255 / .16) 0%,
      rgb(47 125 225 / .10) 42%,
      transparent 70%) ,
    linear-gradient(180deg, rgba(10,16,28,.92), rgba(10,16,28,.62));
  border-color: rgb(123 192 255 / .85);
  box-shadow:
    inset 0 0 0 1px rgb(47 125 225 / .20),
    0 14px 34px rgb(47 125 225 / .32),
    0 0 0 var(--cta-ring-size) rgb(123 192 255 / .10);
}

.cta:hover::after,
.cta:focus-visible::after{
  opacity:.9;
  transform: translateY(0);
}

/* Pressed */
.cta:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 0 0 1px rgb(47 125 225 / .22),
    0 7px 18px rgb(47 125 225 / .26),
    0 0 0 calc(var(--cta-ring-size) - 2px) rgb(123 192 255 / .08);
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .cta, .cta::after{ transition:none }
}

/* Sections */
main{position:relative;z-index:1}
/* leave room for sticky header on anchor jumps */
section{scroll-margin-top:calc(var(--header-h) + 16px)}

/* Cards */
.card{
  max-width:1100px;
  margin: clamp(1.25rem, 3.5vh, 2.5rem) auto;
  padding: clamp(1.1rem, 3vw, 2rem);
  background:linear-gradient(to bottom, rgba(8,14,26,0.85), rgba(8,14,26,0.35));
  border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr;gap: clamp(1rem, 3vw, 1.25rem);
}
@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0)){
  .card{-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px)}
}
/* add outer gutters on small screens so cards don't kiss the edge */
@media (max-width: 720px){
  .card{ margin-left: var(--container-pad);
         margin-right: var(--container-pad); }
}

.card h2{margin:0 0 .25rem;font-size:clamp(1.3rem,1.8vw + .6rem,2rem)}
.card h2::after{
  content:'';display:block;width:48px;height:2px;margin-top:10px;
  background:linear-gradient(90deg,var(--acc),var(--acc-2));border-radius:2px;opacity:.55;
}
.card p,.card li{color:var(--muted)}
.card .media{justify-self:center;width:100%}
.media svg{width:100%;max-width:340px;height:auto;display:block;margin:0 auto;opacity:.88;filter:drop-shadow(0 8px 24px rgba(47,125,225,.28))}

/* Full-width card variant (no media column, centered text) */
.card-full{grid-template-columns:1fr!important;max-width:720px;text-align:center}
.card-full h2::after{margin-inline:auto}
.card-full p{max-width:60ch;margin-inline:auto}
.card-full p:last-child{margin-bottom:0}

/* Closing section — hero-centered, no card chrome */
.closing{
  background:none;border:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:clamp(3rem,8vh,6rem) var(--container-pad) clamp(2rem,5vh,4rem);
  max-width:760px;margin:0 auto;
}
.closing .media{order:-1;width:auto;margin-bottom:clamp(1.5rem,3vh,2.5rem)}
.closing .media svg{max-width:450px;opacity:.9;filter:drop-shadow(0 6px 28px rgba(47,125,225,.32))}
.closing .content{order:1;text-align:center}
.closing h2{
  font-size:clamp(1.8rem,3vw + .8rem,2.6rem);
  margin:0 0 .5rem;letter-spacing:-.015em;line-height:1.15;
}
.closing h2::after{
  content:'';display:block;width:48px;height:2px;
  margin:14px auto 0;
  background:linear-gradient(90deg,var(--acc),var(--acc-2));
  border-radius:2px;opacity:.55;
}
.closing p{
  color:var(--muted);
  font-size:clamp(1rem,1.1vw + .5rem,1.15rem);
  max-width:58ch;margin:var(--space-2) auto 0;
  line-height:1.72;
}
.closing p:last-child{margin-bottom:0}

/* Disable SVG SMIL animations when user prefers reduced motion */
@media (prefers-reduced-motion:reduce){
  svg animate,svg animateMotion{display:none}
}

@media (min-width:860px){
  .card{grid-template-columns:1.2fr .8fr;align-items:center;padding:2.25rem;margin:clamp(2rem,5vh,3.5rem) auto;gap:1.5rem}
  .card:nth-child(even){grid-template-columns:.8fr 1.2fr}
  .card:nth-child(even) .content{order:2}
  .card:nth-child(even) .media{order:1}
  .media svg{max-width:380px}
}

/* Hide h2 bar when followed by feature list */
h2:has(+ .features)::after{display:none}

/* Feature list */
.features{margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(.5rem,1.2vw,.7rem)}
.feature{
  position:relative;
  padding:.85rem 1.1rem;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(47,125,225,.05),rgba(123,192,255,.015));
  transform:translateX(0);
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
}
.feature:hover{
  background:linear-gradient(135deg,rgba(47,125,225,.09),rgba(123,192,255,.03));
  transform:translateX(2px);
  box-shadow:0 2px 12px rgba(47,125,225,.08);
}
.feature dt{font-weight:600;color:var(--text);margin-bottom:.2rem;font-size:.95rem;letter-spacing:.015em}
.feature dd{margin:0;color:var(--muted);line-height:1.55}

/* Staggered slide-in on reveal */
.reveal .feature{transform:translateX(-10px)}
.reveal.visible .feature{transform:translateX(0)}
.reveal.visible .feature:nth-child(2){transition-delay:.08s}
.reveal.visible .feature:nth-child(3){transition-delay:.16s}
.reveal.visible .feature:nth-child(4){transition-delay:.24s}
.reveal.visible .feature:hover{transform:translateX(2px);transition-delay:0s}
@media(prefers-reduced-motion:reduce){
  .feature{transition:none!important}
  .reveal .feature{transform:none}
}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease;will-change:opacity,transform;content-visibility:auto;contain-intrinsic-size:800px 1200px}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* Footer */
footer{
  position:relative;
  z-index:1;
  border-top:1px solid var(--border);
  background:linear-gradient(to bottom, rgba(8,14,26,0.85), rgba(8,14,26,0.35));
  margin-top:clamp(1.5rem, 4vh, 2.5rem);
}
@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0)){
  footer{-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px)}
}
.footer-inner{
  display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;justify-content:center;
  padding-block: var(--space-3);
  padding-inline: 0;
  color:rgba(184,193,214,.45);
  font-size:.75rem;
  letter-spacing:.02em;
}

/* Focus ring */
:focus-visible{outline:2px solid var(--acc-2);outline-offset:2px;border-radius:6px}

/* Extra small devices: tighten/normalize paddings */
@media (max-width:380px){
  :root{
    /* tiny devices get slightly tighter gutters without collapsing */
    --container-pad: max(16px, 5vw);
  }
  .hero{padding-top: clamp(1.75rem, 6vh, 3rem); padding-bottom: clamp(1.25rem, 4vh, 2.5rem)}
}