:root{
  --bg:#0B0C0E; --bg-alt:#0E1015; --card:#13161B; --card-hover:#181C24;
  --text:#EAEAEA; --muted:#A6AAB2; --dim:#6B7280;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --accent:#C73A3A; --accent-hover:#E15656; --accent-soft:rgba(199,58,58,.12);
  --accent-glow:rgba(199,58,58,.35); --ring:rgba(199,58,58,.40);
  --accent-finance:#0D4D4F; --accent-labs:#4A3F8F; --accent-systems:#C73A3A;
  --radius:16px; --radius-sm:10px; --container:1200px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --glow:0 0 22px rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.35), 0 0 42px rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.20);
  --text-glow:0 0 12px rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.35);
  --btn-glow:0 0 22px rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.45);
  --transition-fast:.15s ease; --transition:.3s ease; --transition-slow:.6s ease;
  /* Dynamic particle color — updated every frame by JS */
  --dyn-r:224; --dyn-g:82; --dyn-b:52;
}

/* ======== RESET ======== */
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  color:var(--text); background:var(--bg);
  font:400 16px/1.65 'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
.container{width:min(var(--container),90%); margin-inline:auto}

/* ======== SCROLL ANIMATIONS ======== */
.reveal{opacity:0; transform:translateY(40px); transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1; transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* ======== NAVIGATION ======== */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  background:rgba(11,12,14,.82); border-bottom:1px solid var(--line);
  transition:background var(--transition), box-shadow var(--transition);
}
nav.scrolled{background:rgba(11,12,14,.96); box-shadow:0 4px 30px rgba(0,0,0,.4)}
nav .inner{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:flex; align-items:center; gap:.7rem}
.brand img{width:38px; height:38px; border-radius:8px}
.brand span{font-weight:700; font-size:1.05rem; letter-spacing:.3px}
#menu{display:flex; gap:.5rem; align-items:center}
.nav-link{
  padding:.45rem .8rem; border-radius:8px; font-weight:500; font-size:.9rem;
  color:var(--muted); transition:color var(--transition-fast), background var(--transition-fast);
}
.nav-link:hover{color:var(--text); background:rgba(255,255,255,.05)}

/* ======== NAV DROPDOWN ======== */
.nav-dropdown{position:relative}
.nav-dropdown__header{
  display:inline-flex; align-items:center; gap:.15rem;
}
.nav-dropdown__toggle{
  cursor:pointer; background:none; border:none; font-family:inherit;
  padding:.3rem .4rem; border-radius:6px; color:var(--muted);
  transition:color .2s ease, background .2s ease;
}
.nav-dropdown__toggle:hover{color:var(--text); background:rgba(255,255,255,.05)}
.nav-dropdown__arrow{font-size:.75rem; display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; transition:transform .2s ease}
.nav-dropdown:hover .nav-dropdown__arrow{transform:rotate(180deg)}
.nav-dropdown__panel{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  min-width:300px; background:rgba(14,16,21,.98);
  border:1px solid var(--line); border-radius:var(--radius);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 16px 48px rgba(0,0,0,.5);
  padding:.5rem; opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
  transform:translateX(-50%) translateY(4px);
  z-index:110;
}
.nav-dropdown:hover .nav-dropdown__panel{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.nav-dropdown__item{
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem .9rem; border-radius:var(--radius-sm);
  transition:background var(--transition-fast);
  text-decoration:none; color:var(--text);
}
.nav-dropdown__item:hover{background:rgba(255,255,255,.05)}
.nav-dropdown__item strong{display:block; font-size:.88rem; font-weight:600; margin-bottom:.1rem}
.nav-dropdown__item span{font-size:.78rem; color:var(--muted); line-height:1.3}
.nav-dropdown__dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  box-shadow:0 0 8px currentColor;
}

.ghost{
  padding:.5rem .85rem; border-radius:999px; border:1px solid var(--line);
  transition:background .2s ease, border-color .2s ease; font-weight:600;
}
.ghost:hover{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14)}
.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 1.2rem; border-radius:999px; font-weight:700; font-size:.9rem;
  background:var(--accent); color:#fff; border:none;
  transition:background var(--transition-fast), transform .05s ease, box-shadow var(--transition);
  box-shadow:var(--btn-glow); cursor:pointer;
}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.btn-outline{
  background:transparent; border:1px solid var(--accent); color:var(--accent);
  box-shadow:none;
}
.btn-outline:hover{background:var(--accent-soft); color:var(--accent-hover)}
.btn-lg{padding:.8rem 2rem; font-size:1rem}
#menuBtn{display:none; background:none; border:1px solid var(--line); color:var(--text); cursor:pointer}

/* ======== HERO ======== */
.hero{
  position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center;
  padding:120px 0 80px;
}
.hero::before{
  content:"";
  position:absolute; inset:-8% -4%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 16% 24%, rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.18), transparent 32%),
    radial-gradient(circle at 78% 18%, rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.08), transparent 28%),
    radial-gradient(circle at 54% 70%, rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.07), transparent 34%);
  filter:blur(10px);
  opacity:.95;
}
#networkCanvas{
  position:fixed; top:0; left:0; width:100%; height:100%; z-index:0;
  opacity:.98; pointer-events:none;
}
/* All page layers float above the canvas */
header.hero, main, section, footer{ position:relative; z-index:1; }
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(180deg, rgba(11,12,14,.18) 0%, rgba(11,12,14,.04) 32%, rgba(11,12,14,.2) 68%, rgba(11,12,14,.48) 100%),
    radial-gradient(ellipse at 30% 20%, rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.16), transparent 58%),
    radial-gradient(ellipse at 78% 18%, rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.08), transparent 40%);
}
.hero-content{position:relative; z-index:3; max-width:780px}
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .9rem; border-radius:999px;
  background:rgba(199,58,58,.1); border:1px solid rgba(199,58,58,.25);
  font-size:.82rem; font-weight:600; color:var(--accent-hover);
  margin-bottom:1.5rem;
}
.hero-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
h1{font-size:clamp(2.2rem,5.5vw,4rem); line-height:1.08; letter-spacing:-.02em; font-weight:800}
h1 .accent{
  color:var(--accent); text-shadow:var(--text-glow);
  background:linear-gradient(135deg, #E15656, #C73A3A, #A02E2E);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-lead{color:var(--muted); font-size:1.2rem; line-height:1.6; margin:1.2rem 0 2rem; max-width:600px}
.hero-actions{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center}

/* ======== METRICS STRIP ======== */
.metrics{
  position:relative; z-index:2; padding:3rem 0;
  background: transparent;
}
.metrics-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; position:relative; z-index:1}
.metric-item{display:flex; flex-direction:column; align-items:center; gap:.3rem}
.metric-icon{
  width:40px; height:40px; margin-bottom:.3rem; opacity:.7;
  display:flex; align-items:center; justify-content:center;
}
.metric-icon svg{width:32px; height:32px; stroke:var(--accent); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.metric-item h3{font-size:clamp(2rem,4vw,3rem); font-weight:800; color:var(--accent); text-shadow:var(--text-glow)}
.metric-item p{color:var(--muted); font-size:.9rem; margin-top:.25rem}

/* ======== SECTIONS ======== */
section{padding:5rem 0}
/* Ensure all direct .container children of sections/footer sit above ambient pseudo-elements */
section > .container, footer > .container{position:relative; z-index:1}
.section-header{text-align:center; max-width:700px; margin:0 auto 3.5rem}
.kicker{
  display:inline-block; color:var(--accent); font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; font-size:.78rem; margin-bottom:.6rem;
}
h2{font-size:clamp(1.6rem,3.5vw,2.6rem); font-weight:700; line-height:1.15; margin-bottom:.6rem}
.section-desc{color:var(--muted); font-size:1.05rem; line-height:1.6}

/* ======== ABOUT ======== */
#about::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 70% at 15% 60%,
      rgba(var(--dyn-r),var(--dyn-g),var(--dyn-b),.042), transparent 65%),
    radial-gradient(ellipse 40% 50% at 85% 30%,
      rgba(var(--dyn-r),var(--dyn-g),var(--dyn-b),.028), transparent 60%);
}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem}
.card{
  background:rgba(19,22,27,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:none; border-radius:var(--radius);
  padding:1.5rem;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.card:hover{
  background:rgba(24,28,36,.82);
  transform:translateY(-3px); box-shadow:var(--glow)
}
.card h3{font-size:1.15rem; margin-bottom:.5rem}
.muted{color:var(--muted)}
.slider-dots{display:none}

/* ======== NETWORK SHOWCASE (capabilities) — Wolfram style ======== */
.capabilities{
  position:relative; z-index:1;
  background: transparent;
  overflow:hidden; padding:5rem 0;
}
/* Subtle ambient tint that breathes with the particle color */
.capabilities::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 55% at 50% 40%,
      rgba(var(--dyn-r),var(--dyn-g),var(--dyn-b),.055), transparent 68%),
    radial-gradient(ellipse 40% 40% at 80% 80%,
      rgba(var(--dyn-r),var(--dyn-g),var(--dyn-b),.03), transparent 60%);
}
.capabilities::after{
  content:'';
  position:absolute;
  inset:0;
  background:url('assets/atrium_intelia_logo_transparent.png') no-repeat center var(--wm-pos,34%) / 60% auto;
  opacity:.09;
  pointer-events:none;
  z-index:0;
}
.cap-layout{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2.5rem}
.cap-statement{max-width:900px; position:relative; z-index:1}
.cap-statement h2{
  font-size:clamp(1.5rem,3.2vw,2.4rem); font-weight:700; line-height:1.2;
  margin-bottom:1rem;
}
.cap-statement h2 .accent{
  color:var(--accent); text-shadow:var(--text-glow);
  background:linear-gradient(135deg, #E15656, #C73A3A, #A02E2E);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.cap-statement .cap-philosophy{
  color:var(--muted); font-size:1.05rem; line-height:1.7; margin-bottom:1.5rem;
}
.cap-statement .cap-tagline{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .9rem; border-radius:999px;
  background:rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.08); border:1px solid rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.2);
  font-size:.82rem; font-weight:600; color:var(--muted);
  cursor:pointer; transition:all var(--transition);
}
.cap-statement .cap-tagline:hover{background:rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.18); border-color:rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.4)}
.cap-grid{
  display:none; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:.6rem; width:100%; position:relative; z-index:1; justify-content:center;
}
.cap-grid.expanded{display:grid; animation:capGridReveal .5s ease forwards}
@keyframes capGridReveal{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}
.cap-grid .cap-node{opacity:0; transform:translateY(12px)}
.cap-grid.expanded .cap-node{animation:capNodeReveal .35s ease forwards}
@keyframes capNodeReveal{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}
.cap-node{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .75rem; border-radius:var(--radius-sm);
  background:rgba(19,22,27,.55); border:none;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:.82rem; font-weight:500; color:var(--muted);
  transition:all var(--transition);
  cursor:pointer; position:relative; z-index:1;
}
.cap-node:hover{
  background:rgba(var(--line-accent-rgb, var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58)),.10);
  color:var(--text); transform:translateY(-2px);
}
.u-accent-systems .cap-node:hover,
.cap-node.u-accent-systems:hover{background:rgba(199,58,58,.12)}
.u-accent-finance .cap-node:hover,
.cap-node.u-accent-finance:hover{background:rgba(13,77,79,.15)}
.u-accent-labs .cap-node:hover,
.cap-node.u-accent-labs:hover{background:rgba(74,63,143,.15)}
.cap-node .cap-dot{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--line-accent, var(--accent)); box-shadow:0 0 6px var(--line-accent, var(--accent-glow));
}

/* ======== LINES ENTRY CARDS (hub home) ======== */
.lines-entry-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem;
}
.line-entry-card{
  display:flex; flex-direction:column; gap:.5rem;
  padding:1.8rem 1.5rem; border-radius:var(--radius);
  background:rgba(19,22,27,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  text-decoration:none; color:var(--text);
  position:relative; overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.line-entry-card::before{
  content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background:linear-gradient(135deg, var(--line-accent, var(--accent)) 0%, transparent 50%);
  transition:opacity .3s ease;
}
.line-entry-card:hover{
  transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,.4);
  border-color:var(--line-strong);
}
.line-entry-card:hover::before{opacity:.14}
.line-entry__dot{
  width:10px; height:10px; border-radius:50%;
  box-shadow:0 0 10px currentColor;
}
.line-entry__pill{
  font-weight:800; font-size:.88rem; letter-spacing:.3px;
  margin-top:.3rem;
}
.line-entry-card h3{
  font-size:1.15rem; font-weight:700; line-height:1.3; margin:0;
}
.line-entry__cta{
  color:var(--line-accent, var(--accent)); font-weight:600; font-size:.88rem;
  margin-top:auto; padding-top:.5rem;
  transition:color var(--transition-fast);
}
.line-entry-card:hover .line-entry__cta{color:var(--accent-hover)}

/* ======== METHOD ======== */
.method-grid{
  display:flex; align-items:flex-start; justify-content:center;
  gap:0; flex-wrap:wrap;
}
.method-step{
  flex:1; min-width:180px; max-width:240px; text-align:center;
  padding:1.2rem 1rem;
}
.method-step__number{
  font-size:2rem; font-weight:800; color:var(--accent);
  text-shadow:var(--text-glow); margin-bottom:.5rem;
  font-variant-numeric:tabular-nums;
}
.method-step h3{font-size:1rem; font-weight:700; margin-bottom:.4rem}
.method-step p{font-size:.88rem; line-height:1.5}
.method-step__connector{
  width:40px; height:1px; background:var(--line); margin-top:2.8rem;
  position:relative; flex-shrink:0;
}
.method-step__connector::after{
  content:''; position:absolute; right:-2px; top:-3px;
  border:3px solid transparent; border-left:5px solid var(--accent); opacity:.5;
}

/* ======== LEADERSHIP ======== */
.leadership-card{
  max-width:680px; margin:0 auto; text-align:center;
  padding:2rem; border-radius:var(--radius);
  background:rgba(19,22,27,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
}
.leadership-card h3{font-size:1.3rem; margin-bottom:.2rem}

/* ======== LINES (tabbed — used on subpages) ======== */
#lines::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 65% 60% at 80% 40%,
      rgba(var(--dyn-r),var(--dyn-g),var(--dyn-b),.038), transparent 65%),
    radial-gradient(ellipse 45% 55% at 20% 70%,
      rgba(var(--dyn-r),var(--dyn-g),var(--dyn-b),.025), transparent 60%);
}
.lines-tabs{display:flex; gap:.5rem; justify-content:center; margin-bottom:2rem; flex-wrap:wrap}
.line-tab{
  padding:.6rem 1.4rem; border-radius:999px; font-weight:700; font-size:.9rem;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  cursor:pointer; transition:all var(--transition);
  position:relative; overflow:hidden;
}
.line-tab::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:linear-gradient(135deg, var(--tab-accent, var(--accent)) 0%, transparent 80%);
  transition:opacity .3s ease;
}
.line-tab:hover{color:var(--text); border-color:var(--line-strong)}
.line-tab.active{
  border-color:var(--tab-accent, var(--accent)); color:#fff;
  background:rgba(255,255,255,.04);
}
.line-tab.active::before{opacity:.18}
.line-tab[data-line="systems"]{--tab-accent:var(--accent-systems)}
.line-tab[data-line="quant"]{--tab-accent:var(--accent-finance)}
.line-tab[data-line="labs"]{--tab-accent:var(--accent-labs)}

.line-panels{position:relative; min-height:380px}
.line-panel{
  opacity:0; transform:translateY(16px);
  transition:opacity .45s ease, transform .45s ease;
  position:absolute; top:0; left:0; right:0;
  pointer-events:none;
}
.line-panel.active{
  opacity:1; transform:translateY(0);
  position:relative; pointer-events:auto;
}
.line-card{
  background:rgba(19,22,27,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:none; border-radius:var(--radius);
  padding:2rem; position:relative; overflow:hidden;
  max-width:880px; margin:0 auto;
}
.line-card::before{
  content:""; position:absolute; inset:0; opacity:.08; pointer-events:none;
  background:linear-gradient(135deg, var(--line-accent, var(--accent)) 0%, transparent 50%);
}
.line-pill{
  display:inline-block; font-weight:800; letter-spacing:.3px;
  padding:.3rem .7rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.04); margin-bottom:.5rem;
}
.line-list{margin:.6rem 0 0; padding-left:1.1rem}
.line-list li{margin:.28rem 0; color:var(--muted); font-size:.92rem}

.u-accent-systems{--line-accent:var(--accent-systems)}
.u-accent-finance{--line-accent:var(--accent-finance)}
.u-accent-labs{--line-accent:var(--accent-labs)}
.u-accent-systems .line-pill{border-color:rgba(199,58,58,.35); color:var(--accent-systems)}
.u-accent-finance .line-pill{border-color:rgba(13,77,79,.35); color:var(--accent-finance)}
.u-accent-labs .line-pill{border-color:rgba(74,63,143,.45); color:var(--accent-labs)}

/* Line Hero */
.line-hero{margin-bottom:1.5rem}
.line-stat{display:inline-block; font-size:.78rem; color:var(--dim); margin-top:.6rem; letter-spacing:.05em; text-transform:uppercase}

/* Line Feature Cards Grid */
.line-card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.75rem; margin-bottom:1.5rem}
.line-feature{
  display:flex; align-items:flex-start; gap:.75rem; padding:.85rem 1rem;
  border-radius:var(--radius-sm); border:none;
  background:rgba(19,22,27,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  transition:all var(--transition); position:relative;
}
.line-feature:hover{
  background:rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.06);
  transform:translateY(-2px); box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.line-feature svg{width:20px; height:20px; flex-shrink:0; margin-top:2px; stroke:var(--line-accent, var(--accent)); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.line-feature strong{display:block; font-size:.88rem; color:var(--text); font-weight:600; margin-bottom:.15rem}
.line-feature span{font-size:.8rem; color:var(--muted); line-height:1.4}
.line-feature .feat-arrow{position:absolute; right:.75rem; top:50%; transform:translateY(-50%); opacity:0; transition:opacity var(--transition-fast); color:var(--line-accent, var(--accent)); font-size:.75rem}
.line-feature:hover .feat-arrow{opacity:1}

/* Line Process Flow */
.line-flow{display:flex; align-items:center; justify-content:center; gap:0; padding:1rem 0 .5rem; flex-wrap:wrap}
.line-flow__step{
  padding:.4rem .9rem; border-radius:999px; font-size:.75rem; font-weight:600;
  color:var(--muted); border:1px solid var(--line); background:rgba(255,255,255,.02);
  white-space:nowrap; transition:all .5s ease; opacity:0; transform:translateY(8px);
}
.line-flow.animated .line-flow__step{opacity:1; transform:translateY(0)}
.line-flow__connector{width:28px; height:1px; background:var(--line); position:relative; opacity:0; transition:opacity .5s ease}
.line-flow.animated .line-flow__connector{opacity:1}
.line-flow__connector::after{
  content:''; position:absolute; right:-2px; top:-3px;
  border:3px solid transparent; border-left:4px solid var(--line-accent, var(--accent));
  opacity:.6;
}



/* ======== CTA BAND ======== */
.cta-section{
  position:relative; z-index:1; padding:5rem 0; overflow:hidden;
  background: transparent;
}
.cta-section::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%,
      rgba(var(--dyn-r),var(--dyn-g),var(--dyn-b),.07), transparent 65%);
}
.cta-inner{
  text-align:center; max-width:650px; margin:0 auto;
}
.cta-inner h2{margin-bottom:.8rem}
.cta-inner p{color:var(--muted); margin-bottom:2rem; font-size:1.05rem}

/* ======== CONTACT ======== */
#contact::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 60% at 50% 50%,
      rgba(var(--dyn-r),var(--dyn-g),var(--dyn-b),.04), transparent 65%);
}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem}

/* ======== FOOTER ======== */
footer{
  position:relative; z-index:1;
  padding:3rem 0;
  background: rgba(11,12,14,0.88);
}
footer::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 70% at 20% 50%,
      rgba(var(--dyn-r),var(--dyn-g),var(--dyn-b),.04), transparent 65%);
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem;
  padding-bottom:2rem; border-bottom:1px solid var(--line); margin-bottom:1.5rem;
}
.footer-brand p{color:var(--muted); font-size:.88rem; margin-top:.5rem; max-width:280px}
.footer-col h4{font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; color:var(--dim); margin-bottom:.8rem}
.footer-col a{display:block; color:var(--muted); font-size:.9rem; padding:.2rem 0; transition:color var(--transition-fast)}
.footer-col a:hover{color:var(--text)}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem}
.footer-bottom span{color:var(--dim); font-size:.85rem}

/* ======== CAPABILITY MODAL ======== */
.cap-modal{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.cap-modal.open{opacity:1; visibility:visible}
.cap-modal__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.cap-modal__panel{
  position:relative; max-width:720px; width:90%; max-height:85vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:0;
  transform:translateY(24px) scale(.97); opacity:0;
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.cap-modal.open .cap-modal__panel{transform:translateY(0) scale(1); opacity:1}
.cap-modal__close{
  position:absolute; top:16px; right:16px; z-index:10;
  background:none; border:none; color:var(--line-accent, var(--accent)); font-size:1.6rem;
  cursor:pointer; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background var(--transition), color var(--transition);
}
.cap-modal__close:hover{background:rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.15); color:var(--line-accent, var(--accent-hover))}
.cap-modal__header{
  display:flex; align-items:center; gap:.6rem;
  padding:1.8rem 2rem 0; margin-bottom:.3rem;
}
.cap-modal__dot{
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  background:var(--line-accent, var(--accent)); box-shadow:0 0 8px var(--line-accent, var(--accent-glow));
}
.cap-modal__title{font-size:1.25rem; font-weight:700; color:var(--text); margin:0}
.cap-modal__desc{
  padding:0 2rem; margin:.4rem 0 1.2rem; color:var(--muted); font-size:.92rem; line-height:1.55;
}
.cap-modal__body{padding:0 2rem 1.5rem; min-height:180px}
.cap-modal__footer{
  border-top:1px solid var(--line); padding:1rem 2rem; text-align:center;
}
.cap-modal__cta{
  color:var(--line-accent, var(--accent)); font-size:.9rem; font-weight:600; text-decoration:none;
  transition:color var(--transition);
}
.cap-modal__cta:hover{color:var(--accent-hover)}

/* Demo-specific styles */
.demo-slider-group{display:flex; flex-direction:column; gap:.9rem; margin-bottom:1rem}
.demo-slider-group label{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  color:var(--muted); font-size:.85rem; font-weight:500;
}
.demo-slider-group input[type=range]{
  flex:1; max-width:260px; accent-color:var(--accent); height:4px; cursor:pointer;
}
.demo-slider-group .slider-val{
  min-width:44px; text-align:right; color:var(--text); font-weight:600; font-size:.85rem;
  font-variant-numeric:tabular-nums;
}
.demo-canvas{
  width:100%; border-radius:var(--radius-sm);
  background:rgba(0,0,0,.25); border:1px solid var(--line);
}
.demo-gauge{display:flex; flex-direction:column; align-items:center; gap:.5rem; margin:1rem 0}
.demo-gauge svg{max-width:220px}
.demo-gauge .gauge-label{
  font-size:1.4rem; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.demo-gauge .gauge-risk{font-size:.9rem; font-weight:600; padding:.25rem .75rem; border-radius:6px}
.demo-code{
  background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:1rem 1.2rem; font-family:'Courier New',monospace; font-size:.82rem;
  color:#8be9fd; line-height:1.7; overflow-x:auto; white-space:pre; min-height:120px;
}
.demo-code .hl-key{color:#ff79c6}
.demo-code .hl-str{color:#f1fa8c}
.demo-code .hl-num{color:#bd93f9}
.demo-code .hl-comment{color:var(--dim); font-style:italic}
.demo-pipeline{display:flex; align-items:center; gap:0; margin:1rem 0; flex-wrap:wrap; justify-content:center}
.demo-pipeline .pipe-stage{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:.6rem .9rem; background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:var(--radius-sm); font-size:.78rem; color:var(--muted); min-width:80px;
  transition:all .4s ease; position:relative;
}
.demo-pipeline .pipe-stage.active{border-color:var(--accent); color:var(--text); background:rgba(199,58,58,.08)}
.demo-pipeline .pipe-stage.done{border-color:#22c55e; color:#22c55e}
.demo-pipeline .pipe-stage.fail{border-color:#ef4444; color:#ef4444}
.demo-pipeline .pipe-arrow{color:var(--dim); font-size:.9rem; padding:0 .3rem}
.demo-pipeline .pipe-icon{font-size:1.1rem}
.demo-kpi{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-bottom:1rem;
}
.demo-kpi .kpi-card{
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.8rem; text-align:center;
}
.demo-kpi .kpi-card h4{font-size:1.3rem; color:var(--text); margin:0; font-variant-numeric:tabular-nums}
.demo-kpi .kpi-card p{font-size:.75rem; color:var(--dim); margin:.2rem 0 0}
.demo-table{width:100%; border-collapse:collapse; font-size:.82rem; margin:.5rem 0}
.demo-table th,.demo-table td{
  padding:.55rem .7rem; text-align:left; border-bottom:1px solid var(--line);
}
.demo-table th{color:var(--dim); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em}
.demo-table td{color:var(--muted)}
.demo-table tr:hover td{color:var(--text); background:rgba(255,255,255,.02)}
.demo-table .expand-row td{padding:.6rem .7rem; border-bottom:none}
.demo-table .feat-hist{display:flex; align-items:flex-end; gap:2px; height:32px}
.demo-table .feat-hist span{
  display:block; width:6px; background:var(--accent); border-radius:2px 2px 0 0;
  transition:height .3s ease;
}
.demo-toggle-group{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem}
.demo-toggle-group button{
  padding:.4rem .9rem; border-radius:6px; font-size:.8rem; font-weight:600;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  cursor:pointer; transition:all var(--transition);
}
.demo-toggle-group button.active{background:rgba(199,58,58,.15); border-color:var(--accent); color:var(--accent-hover)}
.demo-toggle-group button:hover{border-color:rgba(199,58,58,.4); color:var(--text)}
.demo-radar{display:flex; justify-content:center; margin:1rem 0}
.demo-radar svg{max-width:300px; width:100%}
.demo-radar polygon{transition:all .5s ease}
.demo-bars{display:flex; flex-direction:column; gap:.5rem; margin:.8rem 0}
.demo-bars .bar-row{display:flex; align-items:center; gap:.6rem}
.demo-bars .bar-label{min-width:80px; font-size:.78rem; color:var(--dim); text-align:right}
.demo-bars .bar-track{flex:1; height:18px; background:rgba(255,255,255,.04); border-radius:4px; overflow:hidden}
.demo-bars .bar-fill{height:100%; border-radius:4px; transition:width .8s cubic-bezier(.4,0,.2,1)}
.demo-donut{display:flex; justify-content:center; margin:.8rem 0}
.demo-donut svg{max-width:160px}
.demo-donut circle{transition:stroke-dasharray .8s ease}
.demo-timeline{display:flex; gap:0; margin:1rem 0; overflow-x:auto; padding-bottom:.5rem}
.demo-timeline .tl-phase{
  flex:1; min-width:130px; padding:.7rem; border:1px solid var(--line);
  border-radius:var(--radius-sm); margin-right:-1px; position:relative;
}
.demo-timeline .tl-phase h5{font-size:.78rem; color:var(--text); margin:0 0 .3rem}
.demo-timeline .tl-phase p{font-size:.72rem; color:var(--dim); margin:0}
.demo-timeline .tl-bar{
  height:3px; background:var(--accent); border-radius:2px; margin-top:.4rem;
  width:0; transition:width 1s ease;
}
.demo-timeline .tl-phase.filled .tl-bar{width:100%}
.demo-timeline .tl-deliverables{
  margin-top:.5rem; display:none; font-size:.72rem; color:var(--muted);
  border-top:1px solid var(--line); padding-top:.4rem;
}
.demo-timeline .tl-phase.show-del .tl-deliverables{display:block}
.demo-cloud-tabs{display:flex; gap:.4rem; margin-bottom:.8rem}
.demo-cloud-tabs button{
  padding:.35rem .8rem; border-radius:6px; font-size:.78rem; font-weight:600;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  cursor:pointer; transition:all var(--transition);
}
.demo-cloud-tabs button.active{background:rgba(199,58,58,.12); border-color:var(--accent); color:var(--accent-hover)}
.demo-arch{
  min-height:180px; position:relative; padding:1rem;
  background:rgba(0,0,0,.2); border-radius:var(--radius-sm); border:1px solid var(--line);
}
.demo-arch .arch-node{
  display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .65rem;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:6px;
  font-size:.75rem; color:var(--muted); position:absolute; transition:all .3s ease;
}
.demo-arch .arch-node.highlight{border-color:var(--accent); color:var(--text); background:rgba(199,58,58,.1)}
.demo-arch svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.demo-arch svg line{stroke:var(--line); stroke-width:1; transition:stroke .3s ease}
.demo-arch svg line.highlight{stroke:var(--accent); stroke-width:1.5}
.demo-paper{padding:1.2rem; background:rgba(255,255,255,.02); border-radius:var(--radius-sm); border:1px solid var(--line)}
.demo-paper h4{font-size:.95rem; color:var(--text); margin:0 0 .5rem; font-weight:700}
.demo-paper .paper-meta{font-size:.75rem; color:var(--dim); margin-bottom:.8rem}
.demo-paper .paper-abstract{font-size:.84rem; color:var(--muted); line-height:1.6; margin-bottom:1rem}
.demo-paper .paper-finding{
  background:rgba(199,58,58,.06); border:1px solid rgba(199,58,58,.15); border-radius:8px;
  padding:.7rem .9rem; margin-bottom:.5rem; cursor:pointer; transition:all var(--transition);
}
.demo-paper .paper-finding:hover{background:rgba(199,58,58,.1)}
.demo-paper .paper-finding h5{font-size:.82rem; color:var(--text); margin:0 0 .2rem}
.demo-paper .paper-finding p{font-size:.78rem; color:var(--muted); margin:0; display:none; margin-top:.3rem}
.demo-paper .paper-finding.open p{display:block}
.demo-text-area{
  width:100%; min-height:80px; background:rgba(0,0,0,.3); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:.8rem; color:var(--text); font-size:.85rem;
  font-family:inherit; resize:vertical; line-height:1.6;
}
.demo-text-area:focus{outline:none; border-color:rgba(199,58,58,.4)}
.demo-entities{margin:.7rem 0; font-size:.84rem; line-height:1.8}
.demo-entities .ent{border-bottom:2px solid; padding-bottom:1px}
.demo-entities .ent-per{border-color:#60a5fa; color:#60a5fa}
.demo-entities .ent-org{border-color:#34d399; color:#34d399}
.demo-entities .ent-loc{border-color:#fbbf24; color:#fbbf24}
.demo-entities .ent-date{border-color:#c084fc; color:#c084fc}
.demo-results-bar{
  display:flex; gap:1.2rem; flex-wrap:wrap; margin:.8rem 0;
  padding:.6rem .8rem; background:rgba(255,255,255,.03); border-radius:8px; border:1px solid var(--line);
}
.demo-results-bar .result-item{font-size:.8rem; color:var(--muted)}
.demo-results-bar .result-item strong{color:var(--text)}
.demo-flowchart{display:flex; align-items:center; gap:0; justify-content:center; flex-wrap:wrap; margin:1rem 0}
.demo-flowchart .flow-node{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:.7rem 1rem; background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:var(--radius-sm); font-size:.8rem; color:var(--muted);
  min-width:85px; transition:all .4s ease;
}
.demo-flowchart .flow-node.active{border-color:var(--accent); color:var(--accent-hover); background:rgba(199,58,58,.08)}
.demo-flowchart .flow-node .flow-icon{font-size:1.2rem}
.demo-flowchart .flow-arrow{color:var(--dim); padding:0 .2rem; font-size:.85rem}
.demo-app-mockup{
  border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
  background:rgba(0,0,0,.25); min-height:200px;
}
.demo-app-mockup .mockup-header{
  height:36px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:0 .8rem; gap:.4rem;
}
.demo-app-mockup .mockup-dot{width:8px; height:8px; border-radius:50%; background:var(--dim)}
.demo-app-mockup .mockup-body{display:flex; min-height:164px}
.demo-app-mockup .mockup-sidebar{
  width:120px; border-right:1px solid var(--line); padding:.6rem;
  background:rgba(255,255,255,.02);
}
.demo-app-mockup .mockup-sidebar .sb-item{
  padding:.3rem .5rem; font-size:.7rem; color:var(--dim); border-radius:4px;
  margin-bottom:.2rem; transition:all .3s ease;
}
.demo-app-mockup .mockup-sidebar .sb-item.active{background:rgba(199,58,58,.1); color:var(--accent-hover)}
.demo-app-mockup .mockup-main{flex:1; padding:.8rem}
.demo-app-mockup .mockup-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem}
.demo-app-mockup .mockup-card{
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:6px;
  padding:.5rem; height:50px; transition:all .5s ease; opacity:0; transform:translateY(8px);
}
.demo-app-mockup .mockup-card.show{opacity:1; transform:translateY(0)}
.demo-app-mockup .mockup-card .card-line{
  height:4px; background:rgba(255,255,255,.06); border-radius:2px; margin-bottom:.3rem;
}
.demo-app-mockup.mobile .mockup-sidebar{display:none}
.demo-app-mockup.mobile .mockup-cards{grid-template-columns:1fr}

/* ======== RESPONSIVE ======== */
@media (max-width:1024px){
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .cap-layout{grid-template-columns:1fr}
  .cap-statement{position:static; text-align:center; margin-bottom:1rem}
  .cap-statement .cap-tagline{margin:0 auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .lines-entry-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .lines-entry-grid{grid-template-columns:1fr}
  .method-grid{flex-direction:column; align-items:center}
  .method-step__connector{width:1px; height:24px; margin:0 auto}
  .method-step__connector::after{
    right:auto; top:auto; bottom:-2px; left:-3px;
    border:3px solid transparent; border-top:5px solid var(--accent); border-left:3px solid transparent;
  }
  .hero{min-height:90vh; min-height:90svh; padding:80px 0 40px}
  h1{font-size:clamp(1.7rem,6.5vw,2.6rem)}
  .hero-lead{font-size:1rem; margin:1rem 0 1.5rem}
  .hero-badge{font-size:.75rem; margin-bottom:1rem}
  .hero-actions{gap:.6rem}
  .btn-lg{padding:.7rem 1.5rem; font-size:.9rem}
  section{padding:3rem 0}
  .section-header{margin-bottom:2rem}
  .section-desc{font-size:.95rem}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  /* Outcome cards → horizontal swipeable slider on mobile */
  .about-grid[style*="repeat(3"]{
    grid-template-columns:none; display:flex;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; gap:1rem;
    padding-bottom:.75rem; scrollbar-width:none;
  }
  .about-grid[style*="repeat(3"]::-webkit-scrollbar{display:none}
  .about-grid[style*="repeat(3"] > .card{
    min-width:70vw; max-width:75vw; flex-shrink:0;
    scroll-snap-align:center; padding:1.2rem;
  }
  .about-grid[style*="repeat(3"] > .card:hover{
    box-shadow:0 0 12px rgba(var(--dyn-r,199),var(--dyn-g,58),var(--dyn-b,58),.15);
    transform:none;
  }
  .slider-dots{
    display:flex; justify-content:center; gap:.5rem; margin-top:.75rem;
  }
  .slider-dot{
    width:8px; height:8px; border-radius:50%;
    background:rgba(255,255,255,.2); transition:background .2s ease, transform .2s ease;
  }
  .slider-dot.active{background:rgba(255,255,255,.6); transform:scale(1.3)}
  .metrics{padding:2rem 0}
  .metrics-grid{grid-template-columns:repeat(2,1fr); gap:1.2rem}
  .metric-item h3{font-size:clamp(1.4rem,5vw,2rem)}
  .metric-icon svg{width:26px; height:26px}
  .cap-grid{grid-template-columns:repeat(2,1fr); gap:.5rem}
  .cap-node{padding:.5rem .65rem; font-size:.78rem; gap:.4rem}
  .cap-node .cap-dot{width:5px; height:5px}
  .capabilities{padding:3rem 0}
  .capabilities::after{background-size:95% auto; opacity:.06}
  .line-card-grid{grid-template-columns:1fr 1fr}
  .line-card{max-width:100%}
  .lines-tabs{gap:.3rem}
  .line-tab{padding:.5rem 1rem; font-size:.82rem}
  .footer-grid{grid-template-columns:1fr}
  .cta-section{padding:3rem 0}
  .cta-inner p{font-size:.95rem}
  .cap-modal__header{padding:1.4rem 1.2rem 0}
  .cap-modal__desc{padding:0 1.2rem}
  .cap-modal__body{padding:0 1.2rem 1rem}
  .cap-modal__footer{padding:.8rem 1.2rem}
  .cap-modal__panel{width:95%; max-height:90vh}
  .demo-kpi{grid-template-columns:1fr}
  .demo-pipeline{flex-direction:column; gap:.4rem}
  .demo-pipeline .pipe-arrow{transform:rotate(90deg)}
  .demo-flowchart{flex-direction:column; gap:.4rem}
  .demo-flowchart .flow-arrow{transform:rotate(90deg)}
  .demo-timeline{flex-direction:column}
  #menu{
    display:none; position:absolute; right:4%; top:62px;
    background:rgba(14,16,21,.98); border:1px solid var(--line);
    border-radius:14px; padding:12px; flex-direction:column; min-width:220px;
    box-shadow:0 10px 40px rgba(0,0,0,.5);
    align-items:center;
  }
  #menu.open{display:flex}
  #menuBtn{display:block}
  /* Dropdown in mobile: collapsible on click */
  .nav-dropdown{width:100%}
  .nav-dropdown{text-align:center}
  .nav-dropdown__header{
    display:inline-flex; align-items:center; gap:.15rem; padding-left:1.25rem;
  }
  .nav-dropdown__toggle{padding:.45rem .6rem; min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center}
  .nav-dropdown__arrow{font-size:.85rem}
  .nav-dropdown__panel,
  .nav-dropdown:hover .nav-dropdown__panel{
    position:static; transform:none; translate:0 0; left:auto;
    min-width:auto; width:100%;
    background:rgba(255,255,255,.03); border:1px solid var(--line);
    box-shadow:none; padding:.6rem; backdrop-filter:none;
    -webkit-backdrop-filter:none;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .3s ease, opacity .2s ease, visibility .2s ease;
    margin-top:.3rem;
  }
  .nav-dropdown.open .nav-dropdown__panel,
  .nav-dropdown.open:hover .nav-dropdown__panel{
    max-height:300px; opacity:1; visibility:visible; transform:none;
  }
  .nav-dropdown__arrow{transition:transform .2s ease}
  .nav-dropdown.open .nav-dropdown__arrow{transform:rotate(180deg)}
  .nav-dropdown__item{padding:.5rem .6rem}
  /* Disable hover-based open on mobile */
  .nav-dropdown:hover .nav-dropdown__arrow{transform:none}
  .nav-dropdown.open:hover .nav-dropdown__arrow{transform:rotate(180deg)}
}
@media (max-width:480px){
  .hero{padding:70px 0 30px}
  h1{font-size:clamp(1.5rem,6vw,2.2rem)}
  .hero-actions{flex-direction:column; width:100%}
  .hero-actions .btn{width:100%; justify-content:center; text-align:center}
  section{padding:2.5rem 0}
  .metrics{padding:1.5rem 0}
  .metrics-grid{gap:.8rem}
  .metric-item h3{font-size:1.2rem}
  .metric-item p{font-size:.8rem}
  .cap-grid{grid-template-columns:repeat(2,1fr); gap:.4rem}
  .cap-node{padding:.45rem .5rem; font-size:.72rem; border-radius:8px}
  .line-card-grid{grid-template-columns:1fr}
  .line-flow__connector{width:16px}
  .line-flow__step{font-size:.7rem; padding:.3rem .6rem}
  .card{padding:1.2rem}
  .line-card{padding:1.2rem}
  .footer-grid{gap:1.5rem}
  .footer-brand p{font-size:.82rem}
}