/* ══════════════════════════════════════════
   JUNGLE TECHNOLOGY — DESIGN SYSTEM
   Brand Blue #2246E0 · Cyan #00D4C8
   Obsidian bg · Neural Green accent
══════════════════════════════════════════ */
:root {
  --bg:        #f7f4ee;
  --bg2:       #faf8f5;
  --bg3:       #f5f2ea;
  --glass:     rgba(0,0,0,0.04);
  --glass2:    rgba(0,0,0,0.06);
  --green:     #2246E0;
  --green-d:   #1835c0;
  --green-glow:rgba(34,70,224,0.12);
  --blue:      #1a84e0;
  --blue-l:    #3da8f5;
  --cyan:      #00D4C8;
  --steel:     #666666;
  --white:     #1a1a1a;
  --off:       #555555;
  --dim:       rgba(0,0,0,0.12);
  --dimmer:    rgba(0,0,0,0.06);
  --line:      rgba(0,0,0,0.08);
  --line-g:    rgba(34,70,224,0.15);
  --f-head:    'Inter Tight', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;
  --f-body:    'Inter', sans-serif;
  --f-ser:     'Instrument Serif', serif;

  /* ══ DARK ACCENT COLORS ══ */
  --obsidian:      #0c0c0c;     /* deepest dark — stats, footer */
  --dark-surface:  #141414;     /* slightly lifted dark — cards, widget */
  --dark-border:   rgba(255,255,255,0.07);  /* subtle border on dark bg */

  /* ══ STANDARDIZED FONT SIZES ══ */
  --fs-xs:     0.62rem;  /* Tiny: version numbers, small labels */
  --fs-sm:     0.67rem;  /* Small: labels, tags, small text */
  --fs-sm-md:  0.78rem;  /* Small-medium: nav docs, small mono */
  --fs-nav:    0.95rem;  /* Navigation: nav links */
  --fs-base:   0.92rem;  /* Base: buttons, standard mono, small body */
  --fs-md:     1rem;     /* Medium: default body, feature items */
  --fs-lg:     1.08rem;  /* Large: h4, large text, introductions */
  --fs-xl:     1.4rem;   /* Extra-large: large mono numbers */
  --fs-2xl:    1.8rem;   /* 2X-large: demand card numbers */
  --fs-5xl:    1.6rem;   /* 5X-large: docs section h3 */
  --fs-3xl:    2.4rem;   /* 3X-large: step numbers, quad numbers */
  --fs-4xl:    2.6rem;   /* 4X-large: stats numbers, sc-num */
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--white);
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
}

/* GRAIN OVERLAY */
body::before {
  content:'';
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px;
}

/* CURSOR */
#cur {
  position:fixed; width:5px; height:5px;
  background:var(--green); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px var(--green);
  transition:width .2s,height .2s;
}
#cur-r {
  position:fixed; width:30px; height:30px;
  border:1px solid rgba(34,70,224,0.35);
  border-radius:50%; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:all .14s ease;
}

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 72px;
  transition:all .4s;
  background:#f7f4ee;
}
nav.scrolled {
  background:rgba(247,244,238,0.96);
  backdrop-filter:blur(24px);
  padding:10px 72px;
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.nav-logo img { height:54px; display:block; }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a {
  font-family:var(--f-body); font-size:var(--fs-sm-md); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel); text-decoration:none; transition:color .2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--white); }
.nav-docs {
  font-family:var(--f-mono); font-size:var(--fs-sm-md); font-weight:500;
  letter-spacing:.05em; color:var(--steel); text-decoration:none;
  border:1px solid var(--line); padding:6px 14px; border-radius:2px;
  transition:all .25s;
}
.nav-docs:hover { border-color:var(--green-glow); color:var(--green); }
.nav-cta {
  font-family:var(--f-mono); font-size:var(--fs-base); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  background:var(--green); color:#fff;
  padding:9px 22px; border-radius:2px;
  text-decoration:none; transition:all .25s;
  box-shadow:0 0 20px rgba(34,70,224,0.2);
}
.nav-cta:hover { box-shadow:0 0 36px rgba(34,70,224,0.45); transform:translateY(-1px); }

/* HAMBURGER */
.nav-ham { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.nav-ham span { width:22px; height:1.5px; background:var(--steel); display:block; transition:all .3s; }
.nav-ham:hover span { background:var(--white); }

/* SECTION SHELL */
.sec { padding:70px 72px; position:relative; overflow:hidden; }
.sec-sm { padding:50px 72px; position:relative; overflow:hidden; }

/* EYEBROW */
.eyebrow {
  font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.eyebrow::before { content:'//'; color:var(--green); font-weight:400; }

/* HEADINGS */
h1 {
  font-family:var(--f-head);
  font-size:clamp(2.2rem,4.5vw,4.5rem);
  font-weight:900; line-height:.95;
  letter-spacing:-.025em; margin-bottom:20px;
}
h2 {
  font-family:var(--f-head); font-size:clamp(1.8rem,3.5vw,3.2rem);
  font-weight:900; line-height:.95; letter-spacing:-.025em;
}
h3 {
  font-family:var(--f-head); font-size:clamp(1.2rem,2.2vw,1.8rem);
  font-weight:800; line-height:1.05; letter-spacing:-.02em;
}
h2 .g { color:var(--green); text-shadow:0 0 30px rgba(34,70,224,0.3); }
h2 .b { color:var(--blue-l); }
h2 .s { color:var(--steel); }
h1 span { color:#ffffff; display:block; }
.pulse-dot { animation:pulse 1s ease-in-out infinite; }

.body-t { font-family:var(--f-body); font-size:var(--fs-md); color:var(--steel); line-height:1.85; font-weight:400; }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:var(--fs-base); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:13px 30px; border-radius:2px;
  cursor:pointer; text-decoration:none; transition:all .28s; border:none;
}
.btn-green { background:var(--green); color:#fff; box-shadow:0 0 24px rgba(34,70,224,0.25); }
.btn-green:hover { box-shadow:0 0 44px rgba(34,70,224,0.5); transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--white); border:2px solid var(--white); }
.btn-outline:hover { border-color:var(--green); color:var(--green); background:rgba(34,70,224,0.08); }
.btn-blue { background:var(--blue); color:#fff; }
.btn-blue:hover { background:var(--blue-l); transform:translateY(-2px); box-shadow:0 8px 32px rgba(34,70,224,.4); }
.btn-cyan { background:var(--cyan); color:#000; }
.btn-cyan:hover { opacity:.88; transform:translateY(-2px); }

/* STATS BAR */
.stats {
  display:grid; grid-template-columns:repeat(2,1fr);
  background:var(--obsidian); border-bottom:1px solid var(--dark-border);
}
.sc {
  padding:44px; border-right:1px solid var(--dark-border);
  transition:background .3s; position:relative; overflow:hidden;
}
.sc:last-child { border-right:none; }
.sc:hover { background:rgba(34,70,224,0.08); }
.sc::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1.5px;
  background:var(--green); transform:scaleX(0); transition:transform .4s;
  box-shadow:0 0 8px var(--green);
}
.sc:hover::after { transform:scaleX(1); }
.sc-num {
  font-family:var(--f-mono); font-size:var(--fs-4xl); font-weight:600;
  color:#ffffff; line-height:1; margin-bottom:8px; letter-spacing:-.02em;
}
.sc-num em { color:var(--green); font-style:normal; }
.sc-lbl { font-family:var(--f-mono); font-size:var(--fs-sm); color:rgba(255,255,255,0.4); letter-spacing:.1em; text-transform:uppercase; }

/* TRUST BAR */
.trust {
  background:var(--obsidian); border-bottom:1px solid var(--dark-border);
  padding:20px 72px; display:flex; align-items:center; gap:36px; overflow:hidden;
}
.t-lbl {
  font-family:var(--f-mono); font-size:var(--fs-sm); color:rgba(255,255,255,.35);
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
}
.t-scroll { overflow:hidden; flex:1; }
.t-logos { display:flex; gap:52px; width:max-content; animation:scrollL 32s linear infinite; }
@keyframes scrollL { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.t-logo { font-family:var(--f-mono); font-size:var(--fs-sm); color:#ffffff; font-weight:600; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }

/* GLASS CARDS */
.quad {
  background:var(--glass); border:1px solid var(--line);
  padding:32px 28px; transition:all .3s; position:relative;
  backdrop-filter:blur(8px);
}
.quad:hover { background:rgba(34,70,224,0.04); border-color:var(--line-g); }
.q-n {
  font-family:var(--f-mono); font-size:var(--fs-3xl); font-weight:600;
  color:var(--green); line-height:1; margin-bottom:6px;
  text-shadow:0 0 20px rgba(34,70,224,0.3);
}
.q-l { font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--steel); letter-spacing:.08em; text-transform:uppercase; }

/* FEATURE LIST ITEMS */
.feat-list { display:flex; flex-direction:column; gap:1px; }
.fi {
  padding:18px 22px; background:var(--glass); border:1px solid var(--line);
  display:flex; gap:18px; align-items:flex-start; transition:all .25s;
  backdrop-filter:blur(8px);
}
.fi:hover { background:rgba(34,70,224,0.04); border-color:var(--line-g); transform:translateX(4px); }
.fi-n { font-family:var(--f-mono); font-size:var(--fs-md); color:var(--green); min-width:28px; margin-top:2px; font-size:0; }
.fi-n::before { font-size:1.6rem; display:block; }
.fi:nth-child(1) .fi-n::before { content:'⊞'; }
.fi:nth-child(2) .fi-n::before { content:'⚡'; }
.fi:nth-child(3) .fi-n::before { content:'▶'; }
.fi:nth-child(4) .fi-n::before { content:'⚙'; }
.fi-h { font-family:var(--f-head); font-size:var(--fs-md); font-weight:700; margin-bottom:4px; letter-spacing:-.01em; }
.fi-p { font-family:var(--f-body); font-size:var(--fs-base); color:var(--steel); line-height:1.62; }

/* DEMAND CARDS */
.demand-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:56px; background:var(--line); border-radius:4px; overflow:hidden; }
.dc {
  background:var(--bg3); padding:40px 32px;
  transition:background .3s; position:relative; overflow:hidden;
}
.dc::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1.5px;
  background:linear-gradient(90deg,var(--green),var(--blue),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .4s;
}
.dc:hover { background:rgba(34,70,224,0.03); }
.dc:hover::before { transform:scaleX(1); }
.dc-n { font-family:var(--f-mono); font-size:var(--fs-2xl); font-weight:600; color:rgba(34,70,224,0.12); margin-bottom:18px; }
.dc h4 { font-family:var(--f-head); font-size:var(--fs-md); font-weight:700; margin-bottom:10px; letter-spacing:-.01em; }
.dc p { font-family:var(--f-body); font-size:var(--fs-base); color:var(--steel); line-height:1.7; }

/* TESTIMONIALS */
.proof-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:56px; background:var(--dark-border); border-radius:4px; overflow:hidden; }
.tc {
  background:var(--dark-surface); padding:44px 40px; transition:all .3s;
  position:relative; overflow:hidden; backdrop-filter:blur(12px);
}
.tc::before {
  content:'"';
  position:absolute; top:4px; right:20px;
  font-family:var(--f-ser); font-style:italic;
  font-size:8rem; color:rgba(34,70,224,0.15); line-height:1;
  pointer-events:none;
}
.tc:hover { background:#ffffff; color:#1a1a1a; }
.tc:hover .tc-q { color:#1a1a1a; }
.tc:hover .tc-auth { color:#1a1a1a; }
.tc:hover .tc-role { color:rgba(0,0,0,0.6); }
.tc-q {
  font-family:var(--f-ser); font-style:italic; font-size:var(--fs-lg);
  font-weight:400; line-height:1.78; color:rgba(255,255,255,0.82); margin-bottom:26px;
}
.tc-bar {
  width:24px; height:1.5px;
  background:linear-gradient(90deg,var(--green),var(--blue));
  margin-bottom:14px; box-shadow:0 0 6px rgba(34,70,224,0.4);
}
.tc-auth { font-family:var(--f-mono); font-size:var(--fs-md); font-weight:600; color:#ffffff; letter-spacing:.04em; }
.tc-role { font-family:var(--f-body); font-size:var(--fs-sm-md); color:rgba(255,255,255,0.38); margin-top:3px; }

/* LIVE WIDGET */
.live-widget {
  background:var(--dark-surface);
  border:1px solid var(--dark-border);
  backdrop-filter:blur(20px);
  border-radius:8px; padding:28px 28px 24px;
  position:relative; overflow:hidden;
}
.live-widget::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  animation:scan 3s ease-in-out infinite;
}
@keyframes scan { 0%,100%{opacity:.4} 50%{opacity:1} }
.lw-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.lw-title { font-family:var(--f-mono); font-size:var(--fs-sm-md); font-weight:600; color:rgba(255,255,255,0.85); letter-spacing:.12em; text-transform:uppercase; }
.lw-live { display:flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--green); }
.lw-dot { width:6px; height:6px; background:var(--green); border-radius:50%; box-shadow:0 0 6px var(--green); animation:pulse-g 1.4s ease-in-out infinite; }
@keyframes pulse-g { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }
.lw-rows { display:flex; flex-direction:column; gap:14px; }
.lw-row { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--dark-border); }
.lw-row:last-child { border-bottom:none; padding-bottom:0; }
.lw-key { font-family:var(--f-mono); font-size:var(--fs-sm-md); color:rgba(255,255,255,0.75); letter-spacing:.06em; }
.lw-val { font-family:var(--f-mono); font-size:var(--fs-md); font-weight:600; color:#ffffff; text-shadow:0 0 12px rgba(34,70,224,0.4); }
.lw-val.blue { color:#ffffff; text-shadow:0 0 12px rgba(77,114,255,0.4); }
.lw-val.white { color:#ffffff; text-shadow:none; }

/* STACK DIAGRAM */
.stack-diagram { max-width:640px; margin:56px auto 0; display:flex; flex-direction:column; gap:3px; }
.stack-layer {
  padding:28px 36px; position:relative; overflow:hidden;
  border:1px solid var(--line); transition:all .3s;
  display:flex; align-items:center; justify-content:space-between;
}
.stack-layer:hover { border-color:var(--line-g); background:rgba(34,70,224,0.03); }
.stack-layer-1 { background:rgba(34,70,224,0.06); border-color:rgba(34,70,224,0.2); border-radius:4px 4px 0 0; }
.stack-layer-2 { background:rgba(0,212,200,0.12); border-color:rgba(0,212,200,0.3); border-left-width:3px; border-left-color:var(--cyan); }
.stack-layer-3 { background:rgba(61,168,245,0.12); border-color:rgba(61,168,245,0.3); border-left-width:3px; border-left-color:#3da8f5; border-radius:0 0 4px 4px; }
.sl-label { font-family:var(--f-mono); font-size:var(--fs-sm-md); font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.sl-label-1 { color:var(--green); }
.sl-label-2 { color:var(--blue-l); }
.sl-label-3 { color:#3da8f5; }
.sl-desc { font-family:var(--f-body); font-size:var(--fs-base); color:var(--steel); text-align:right; max-width:280px; line-height:1.5; }
.sl-connector { display:flex; justify-content:center; align-items:center; height:32px; position:relative; }
.sl-connector::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:linear-gradient(180deg,var(--line),transparent); }
.sl-connector-dot { width:8px; height:8px; border-radius:50%; z-index:1; box-shadow:0 0 8px currentColor; }

/* FOOTER */
footer { background:var(--obsidian); border-top:1px solid var(--dark-border); padding:72px 72px 40px; }
.f-stripe {
  height:2px; margin-bottom:56px; border-radius:2px;
  background:linear-gradient(90deg, var(--green) 0%, var(--blue) 35%, var(--cyan) 55%, #8B3FBF 80%, var(--green) 100%);
  box-shadow:0 0 16px rgba(34,70,224,0.3);
}
.fg { display:grid; grid-template-columns:2.2fr 1fr 1fr 1.2fr; gap:56px; margin-bottom:60px; }
.fb img { height:48px; margin-bottom:18px; display:block; }
.fb p { font-family:var(--f-body); font-size:var(--fs-base); color:rgba(255,255,255,0.45); line-height:1.8; max-width:260px; }
.fcol h5 {
  font-family:var(--f-mono); font-size:var(--fs-sm); font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; color:rgba(255,255,255,.25);
  margin-bottom:20px;
}
.fcol ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.fcol a { font-family:var(--f-body); color:rgba(255,255,255,0.45); text-decoration:none; font-size:var(--fs-base); transition:color .2s; }
.fcol a:hover { color:var(--green); }
.trust-link {
  font-family:var(--f-mono); font-size:var(--fs-sm-md); color:rgba(255,255,255,.3);
  text-decoration:none; letter-spacing:.1em;
  border:1px solid var(--dark-border); padding:5px 12px; border-radius:2px;
  display:inline-block; margin-top:8px; transition:all .25s;
}
.trust-link:hover { color:var(--green); border-color:rgba(34,70,224,0.4); }
.fb-bottom {
  border-top:1px solid var(--dark-border); padding-top:26px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.fb-bottom p { font-family:var(--f-mono); font-size:var(--fs-sm-md); color:rgba(255,255,255,.2); }

/* PAGE HERO (interior pages) */
.page-hero {
  position:relative; min-height:60vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; padding:140px 72px 80px;
}
.page-hero-bg {
  position:absolute; inset:0; z-index:0;
  background:var(--bg);
}
.page-hero-glow {
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.page-hero-content { position:relative; z-index:2; max-width:820px; }

/* ANIMATIONS */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.reveal {
  opacity:0; transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
.reveal.d1{transition-delay:.1s;} .reveal.d2{transition-delay:.2s;}
.reveal.d3{transition-delay:.3s;} .reveal.d4{transition-delay:.4s;}
.reveal.on{ opacity:1; transform:translateY(0); }

/* BLOG CARDS */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-radius:4px; overflow:hidden; margin-top:56px; }
.blog-card {
  background:var(--bg3); padding:36px 32px; transition:all .3s;
  position:relative; overflow:hidden; text-decoration:none; display:block;
}
.blog-card:hover { background:rgba(34,70,224,0.04); }
.blog-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1.5px;
  background:linear-gradient(90deg,var(--green),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .4s;
}
.blog-card:hover::before { transform:scaleX(1); }
.bc-tag { font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--green); letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; }
.bc-title { font-family:var(--f-head); font-size:var(--fs-lg); font-weight:700; color:var(--white); line-height:1.35; margin-bottom:12px; letter-spacing:-.01em; }
.bc-excerpt { font-family:var(--f-body); font-size:var(--fs-sm-md); color:var(--steel); line-height:1.7; margin-bottom:20px; }
.bc-meta { font-family:var(--f-mono); font-size:var(--fs-sm); color:rgba(255,255,255,.2); letter-spacing:.06em; }

/* CAREER CARDS */
.job-list { display:flex; flex-direction:column; gap:1px; margin-top:56px; }
.job-item {
  background:var(--glass); border:1px solid var(--line);
  padding:28px 36px; display:flex; align-items:center; justify-content:space-between;
  transition:all .25s; text-decoration:none;
}
.job-item:hover { background:rgba(34,70,224,0.04); border-color:var(--line-g); transform:translateX(4px); }
.job-title { font-family:var(--f-head); font-size:var(--fs-lg); font-weight:700; color:var(--white); margin-bottom:6px; }
.job-meta { font-family:var(--f-mono); font-size:var(--fs-sm-md); color:var(--steel); letter-spacing:.06em; }
.job-tag {
  font-family:var(--f-mono); font-size:var(--fs-sm); font-weight:600;
  padding:5px 12px; border-radius:2px; letter-spacing:.08em; text-transform:uppercase;
}
.job-tag-eng { background:rgba(34,70,224,0.12); color:var(--green); border:1px solid rgba(34,70,224,0.2); }
.job-tag-biz { background:rgba(61,168,245,0.1); color:var(--blue-l); border:1px solid rgba(61,168,245,0.2); }
.job-tag-des { background:rgba(0,212,200,0.1); color:var(--cyan); border:1px solid rgba(0,212,200,0.2); }

/* CONTACT FORM */
.form-group { margin-bottom:20px; }
.form-group label { font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--steel); letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:8px; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; background:var(--glass); border:1px solid var(--line);
  color:var(--white); font-family:var(--f-body); font-size:var(--fs-md);
  padding:13px 16px; border-radius:2px; outline:none; transition:border-color .25s;
  -webkit-appearance:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:rgba(34,70,224,0.4); }
.form-group input::placeholder, .form-group textarea::placeholder { color:rgba(255,255,255,.2); }
.form-group select option { background:var(--bg3); }
.form-group textarea { resize:vertical; min-height:120px; }

/* DOCS */
.docs-layout { display:grid; grid-template-columns:240px 1fr; gap:60px; align-items:start; }
.docs-sidebar { position:sticky; top:100px; }
.docs-nav { list-style:none; display:flex; flex-direction:column; gap:2px; }
.docs-nav-section { font-family:var(--f-mono); font-size:var(--fs-sm); color:rgba(255,255,255,.2); letter-spacing:.16em; text-transform:uppercase; padding:16px 0 8px; }
.docs-nav a {
  font-family:var(--f-body); font-size:var(--fs-base); color:var(--steel); text-decoration:none;
  padding:7px 14px; display:block; border-radius:2px; transition:all .2s;
  border-left:2px solid transparent;
}
.docs-nav a:hover, .docs-nav a.active { color:var(--white); border-left-color:var(--green); background:rgba(34,70,224,0.05); }
.docs-content h3 { margin-bottom:16px; font-size:var(--fs-lg); }
.docs-content p { font-family:var(--f-body); font-size:var(--fs-lg); color:var(--steel); line-height:1.85; margin-bottom:20px; }
.docs-content .code-block {
  background:#0d1117; border:1px solid rgba(255,255,255,0.08); border-radius:4px;
  padding:24px; margin-bottom:24px; overflow-x:auto;
}
.docs-content .code-block pre { font-family:var(--f-mono); font-size:var(--fs-sm-md); color:#c9d1d9; line-height:1.7; white-space:pre; }
.docs-content .code-block pre .k { color:var(--green); }
.docs-content .code-block pre .s { color:var(--cyan); }
.docs-content .code-block pre .c { color:rgba(255,255,255,.3); }
.docs-content h4 { font-family:var(--f-head); font-size:var(--fs-md); font-weight:700; color:var(--white); margin-bottom:10px; margin-top:32px; }

/* PROCESS STEPS */
.steps { display:flex; flex-direction:column; gap:1px; }
.step {
  display:flex; gap:36px; align-items:flex-start;
  padding:32px 0; border-bottom:1px solid var(--line);
}
.step:last-child { border-bottom:none; }
.step-n {
  font-family:var(--f-mono); font-size:var(--fs-3xl); font-weight:600;
  color:rgba(34,70,224,0.15); line-height:1; min-width:60px;
}
.step-body h4 { font-family:var(--f-head); font-size:var(--fs-lg); font-weight:700; margin-bottom:8px; }
.step-body p { font-family:var(--f-body); font-size:var(--fs-md); color:var(--steel); line-height:1.75; }

/* DOCS PAGE STYLES */
.docs-layout { display:grid; grid-template-columns:240px 1fr; gap:72px; align-items:start; }
.docs-sidebar { position:sticky; top:100px; }
.docs-nav-list { list-style:none; display:flex; flex-direction:column; gap:2px; }
.docs-nav-section { font-family:var(--f-mono); font-size:var(--fs-xs); color:rgba(255,255,255,.2); letter-spacing:.18em; text-transform:uppercase; padding:20px 0 8px; }
.docs-nav-list a { font-family:var(--f-body); font-size:var(--fs-sm-md); color:var(--steel); text-decoration:none; padding:7px 14px; display:block; border-radius:2px; transition:all .2s; border-left:2px solid transparent; }
.docs-nav-list a:hover { color:var(--white); border-left-color:var(--green); background:rgba(34,70,224,0.05); }
.docs-section { margin-bottom:80px; scroll-margin-top:100px; }
.docs-section h3 { font-family:var(--f-head); font-size:var(--fs-5xl); font-weight:800; margin-bottom:20px; color:var(--white); letter-spacing:-.01em; }
.docs-section h4 { font-family:var(--f-head); font-size:var(--fs-md); font-weight:700; color:var(--white); margin-bottom:10px; margin-top:32px; }
.docs-section p { font-family:var(--f-body); font-size:var(--fs-base); color:var(--steel); line-height:1.85; margin-bottom:18px; }
.docs-section ul { list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.docs-section li { font-family:var(--f-body); font-size:var(--fs-base); color:var(--steel); padding-left:20px; position:relative; line-height:1.7; }
.docs-section li::before { content:"→"; position:absolute; left:0; color:var(--green); font-family:var(--f-mono); }
.code-block { background:#0d1117; border:1px solid rgba(255,255,255,0.08); border-radius:4px; padding:24px; margin:20px 0; overflow-x:auto; position:relative; }
.code-block::before { content:attr(data-lang); position:absolute; top:10px; right:14px; font-family:var(--f-mono); font-size:var(--fs-xs); color:rgba(255,255,255,.25); letter-spacing:.1em; text-transform:uppercase; }
.code-block pre { font-family:var(--f-mono); font-size:var(--fs-sm-md); color:#c9d1d9; line-height:1.75; white-space:pre; }
.code-block .kw { color:#2246E0; } .code-block .str { color:#00D4C8; } .code-block .cm { color:rgba(255,255,255,.3); }
.code-block .fn { color:#3da8f5; } .code-block .nb { color:#e0a060; }
.param-table { width:100%; border-collapse:collapse; margin:20px 0; }
.param-table th { font-family:var(--f-mono); font-size:var(--fs-xs); color:rgba(255,255,255,.2); letter-spacing:.14em; text-transform:uppercase; padding:10px 16px; text-align:left; border-bottom:1px solid var(--line); }
.param-table td { font-family:var(--f-mono); font-size:var(--fs-sm-md); padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:top; }
.param-table td:first-child { color:var(--green); }
.param-table td:nth-child(2) { color:var(--cyan); }
.param-table td:last-child { font-family:var(--f-body); font-size:var(--fs-sm-md); color:var(--steel); }
.badge { display:inline-block; font-family:var(--f-mono); font-size:var(--fs-xs); padding:3px 8px; border-radius:2px; letter-spacing:.06em; vertical-align:middle; }
.badge-get { background:rgba(34,70,224,0.15); color:var(--green); border:1px solid rgba(34,70,224,0.25); }
.badge-post { background:rgba(0,212,200,0.12); color:var(--cyan); border:1px solid rgba(0,212,200,0.2); }
.endpoint { background:var(--glass); border:1px solid var(--line); border-radius:4px; padding:16px 20px; margin:12px 0; display:flex; align-items:center; gap:14px; }
.endpoint-url { font-family:var(--f-mono); font-size:var(--fs-sm-md); color:var(--white); }

/* RESPONSIVE */

/* UTILITY CLASSES FOR TYPOGRAPHY */
.text-xs { font-size:var(--fs-xs); }
.text-sm { font-size:var(--fs-sm); }
.text-sm-md { font-size:var(--fs-sm-md); }
.text-base { font-size:var(--fs-base); }
.text-md { font-size:var(--fs-md); }
.text-lg { font-size:var(--fs-lg); }
.text-xl { font-size:var(--fs-xl); }
.text-2xl { font-size:var(--fs-2xl); }
.text-3xl { font-size:var(--fs-3xl); }
.text-4xl { font-size:var(--fs-4xl); }

/* HERO SECTION THEMES */
/* Index hero — VIDEO ONLY */
#hero {
  background: #0B0B0B;
  color: #ffffff;
  min-height: 70vh;
}
#hero .hero-bg {
  display: none; /* Hide animated blobs — video only */
}
#particles {
  display: none; /* Hide particle canvas */
}
#hero > div:nth-child(2) {
  max-height: 60vh;
  overflow: hidden;
}
#hero .hero-inner {
  padding: 40px 72px 40px;
  position: relative;
  z-index: 10;
}
.hero-inner > div:first-child {
  background: transparent;
  padding: 0;
}
#hero h1, #hero h2, #hero h3 {
  color: #ffffff;
}
#hero .body-t, #hero p {
  color: rgba(255,255,255,0.72);
}
#hero .eyebrow {
  color: var(--green);
}

/* Inner page heroes — LIGHT THEME */
.page-hero {
  background: #f7f4ee;
  color: #1a1a1a;
}
.page-hero .hero-bg-overlay {
  background: linear-gradient(0deg, rgba(247,244,238,0.95) 0%, rgba(247,244,238,0.4) 50%, rgba(247,244,238,0.55) 100%);
}
.page-hero h1 {
  font-size: clamp(1.3rem, 2.5vw, 2rem);
}
.page-hero h1, .page-hero h2, .page-hero h3 {
  color: #1a1a1a;
}
.page-hero .body-t, .page-hero p {
  color: #666666;
}


@media(max-width:1024px) {
  .docs-layout { grid-template-columns:1fr; }
  .docs-sidebar { position:static; }
  .docs-nav { flex-direction:row; flex-wrap:wrap; gap:4px; }
}

@media(max-width:960px) {
  nav { padding:16px 24px; }
  nav.scrolled { padding:10px 24px; }
  .nav-links, .nav-docs { display:none; }
  .nav-ham { display:flex; }
  .sec { padding:80px 24px; }
  .sec-sm { padding:60px 24px; }
  .page-hero { padding:120px 24px 60px; }
  .stats { grid-template-columns:1fr 1fr; }
  .trust { padding:18px 24px; }
  .demand-cards { grid-template-columns:1fr; }
  .proof-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .fg { grid-template-columns:1fr; gap:36px; }
  .fb-bottom { flex-direction:column; text-align:center; }
  footer { padding:48px 24px 32px; }
}

@media(max-width:640px) {
  .stats { grid-template-columns:1fr; }
  .sc { padding:32px 24px; }
}

/* ══ ANIMATED HERO BACKGROUNDS ══ */
/* Floating glow blobs — replaces or supplements video backgrounds */
.hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--bg); }
.hero-bg-overlay {
  position:absolute; inset:0; z-index:5;
  background:linear-gradient(0deg,rgba(247,244,238,0.95) 0%,rgba(247,244,238,0.4) 50%,rgba(247,244,238,0.55) 100%);
  pointer-events:none;
}
.blob {
  position:absolute; border-radius:50%; filter:blur(72px);
  pointer-events:none; will-change:transform,opacity;
}
/* Blue blob — primary brand */
.blob-blue {
  width:65vw; height:65vw; max-width:820px; max-height:820px;
  background:radial-gradient(circle, rgba(34,70,224,0.35) 0%, transparent 65%);
  animation:blobFloat1 14s ease-in-out infinite;
}
/* Cyan blob — secondary */
.blob-cyan {
  width:50vw; height:50vw; max-width:640px; max-height:640px;
  background:radial-gradient(circle, rgba(0,212,200,0.28) 0%, transparent 65%);
  animation:blobFloat2 18s ease-in-out infinite;
}
/* Deep blue/indigo blob */
.blob-indigo {
  width:40vw; height:40vw; max-width:500px; max-height:500px;
  background:radial-gradient(circle, rgba(100,60,255,0.24) 0%, transparent 65%);
  animation:blobFloat3 22s ease-in-out infinite;
}
/* Sky blue blob — for advertiser pages */
.blob-sky {
  width:55vw; height:55vw; max-width:700px; max-height:700px;
  background:radial-gradient(circle, rgba(26,132,224,0.32) 0%, transparent 65%);
  animation:blobFloat1 16s ease-in-out infinite reverse;
}
/* Green blob — for publisher pages */
.blob-green {
  width:45vw; height:45vw; max-width:580px; max-height:580px;
  background:radial-gradient(circle, rgba(34,70,224,0.30) 0%, transparent 65%);
  animation:blobFloat3 20s ease-in-out infinite;
}

@keyframes blobFloat1 {
  0%,100% { transform:translate(0,0) scale(1); }
  25%      { transform:translate(4%,-6%) scale(1.08); }
  50%      { transform:translate(-3%,4%) scale(0.94); }
  75%      { transform:translate(6%,2%) scale(1.04); }
}
@keyframes blobFloat2 {
  0%,100% { transform:translate(0,0) scale(1); }
  30%     { transform:translate(-6%,5%) scale(1.1); }
  60%     { transform:translate(4%,-3%) scale(0.92); }
  80%     { transform:translate(-2%,6%) scale(1.06); }
}
@keyframes blobFloat3 {
  0%,100% { transform:translate(0,0) scale(1); }
  20%     { transform:translate(5%,3%) scale(0.96); }
  50%     { transform:translate(-4%,-5%) scale(1.12); }
  80%     { transform:translate(3%,4%) scale(0.98); }
}

/* Grid dot pattern overlay */
.hero-grid {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(34,70,224,0.12) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 100%);
  animation:gridFade 6s ease-in-out infinite alternate;
}
@keyframes gridFade { from{opacity:.35} to{opacity:.7} }

/* Horizontal scan line */
.hero-scan {
  position:absolute; left:0; right:0; height:1px; z-index:4;
  background:linear-gradient(90deg,transparent 0%,rgba(34,70,224,0.6) 30%,rgba(0,212,200,0.5) 60%,transparent 100%);
  animation:scanMove 8s linear infinite;
  pointer-events:none;
}
@keyframes scanMove { from{top:-2px;opacity:0} 5%{opacity:1} 95%{opacity:1} to{top:100%;opacity:0} }

/* Noise texture overlay (subtle) */
.hero-noise {
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ══════════════════════════════════════════
   RESPONSIVE SYSTEM — 4-point breakpoints
   Desktop: 960px+ (nav/sec/hero collapse)
   Tablet:  768px  (grid reflows)
   Mobile:  640px  (single column)
   XS:      400px  (edge cases)
══════════════════════════════════════════ */

/* --- HERO INNER (index.html) --- */
.hero-inner {
  padding: 0 72px 96px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: flex-end;
}
#hero .hero-inner {
  padding: 40px 72px 40px;
  position: relative;
  z-index: 10;
}

/* --- SUPPLY / STACK LAYOUTS (index.html P9) --- */
.supply-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 96px;
  align-items: center;
}
.stack-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 96px;
  align-items: flex-start;
}

/* --- PUBLISHERS STAT BAR (P3) --- */
.pub-stats { padding: 20px 72px; }
.pub-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  text-align: center;
}
.pub-stats-grid > div {
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pub-stats-grid > div:last-child { border-right: none; }

/* --- SUPPLY VERTICALS GRID (P6) --- */
.verticals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
  justify-items: center;
}
.verticals-grid > div {
  text-align: center;
  align-items: center;
}
.verticals-grid > div svg {
  margin-left: auto;
  margin-right: auto;
}
.verticals-grid > div ul {
  text-align: center;
}

/* --- ADVERTISER GRIDS (P8) --- */
.adv-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
}
.quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.data-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}

/* --- COMPLIANCE GRID (P4) --- */
.compliance-row { display: grid; gap: 24px; margin-bottom: 24px; }
.compliance-row-4 { grid-template-columns: repeat(4, 1fr); }
.compliance-row-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* --- CTA SECTIONS (P5) --- */
.cta-section { padding: 80px 72px; }
.cta-section-lg { padding: 120px 72px; }

/* --- PAGE HERO H1 (P7) --- */
.page-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }

/* ══ TABLET: 768px ══ */
@media(max-width:768px) {
  .compliance-row-4 { grid-template-columns: repeat(2, 1fr); }
  .compliance-row-3 { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
  .verticals-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .data-panel-grid { grid-template-columns: 1fr; }
  .pub-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .pub-stats { padding: 20px 24px; }
}

/* ══ MOBILE: 640px ══ */
@media(max-width:640px) {
  .sec { padding: 56px 16px; }
  .sec-sm { padding: 40px 16px; }
  .page-hero { padding: 100px 16px 48px; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px 48px;
  }
  #hero .hero-inner { padding: 80px 16px 40px; }
  #hero .live-widget { display: none; }
  .supply-layout,
  .stack-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pub-stats { padding: 16px; }
  .pub-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .verticals-grid { grid-template-columns: 1fr; gap: 16px; }
  .adv-split { grid-template-columns: 1fr; gap: 32px; }
  .data-panel-grid { grid-template-columns: 1fr; gap: 1px; }
  .compliance-row-4,
  .compliance-row-3 { grid-template-columns: 1fr; }
  .cta-section { padding: 48px 16px; }
  .cta-section-lg { padding: 64px 16px; }
  .stack-layer { flex-direction: column; gap: 12px; }
  .sl-desc { text-align: left; max-width: 100%; }
}

/* ══ 960px ══ */
@media(max-width:960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 24px 64px;
  }
  #hero .hero-inner { padding: 60px 24px 40px; }
  #hero .live-widget { display: none; }
  .supply-layout,
  .stack-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .adv-split { grid-template-columns: 1fr; gap: 48px; }
  .cta-section { padding: 60px 24px; }
  .cta-section-lg { padding: 80px 24px; }
}

/* ══ XS: 400px ══ */
@media(max-width:400px) {
  .step { flex-direction: column; gap: 8px; }
  .step-n { font-size: 1.6rem; }
  .hero-inner { padding: 80px 12px 36px; }
  .job-item { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ══════════════════════════════════════════
   RESPONSIVE FIXES — Overrides inline styles
══════════════════════════════════════════ */

/* Touch devices: hide custom cursor, restore default */
@media (pointer: coarse) {
  #cur, #cur-r { display: none; }
  body { cursor: auto; }
}

/* Publishers hero — single column (visual removed) */
.pub-hero-grid {
  position: relative;
  z-index: 10;
  display: block;
  max-width: 760px;
  width: 100%;
  box-sizing: border-box;
}

/* (pub-stats-inner replaced by existing .pub-stats-grid) */

/* Intelligence featured articles (wide + narrow) */
.intel-featured-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 32px;
}

/* Contact page two-column layout */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}

/* Two-column form row (first/last name) */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ══ TABLET 960px — collapse inline grids ══ */
@media(max-width:960px) {
  .intel-featured-grid { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
}

/* ══ MOBILE 640px ══ */
@media(max-width:640px) {
  .pub-hero-grid { gap: 24px; }
  .pub-hero-visual { display: none; }
  .form-grid-2 { grid-template-columns: 1fr; }
}

/* ══ PAGE HERO padding fix (overrides inline style via !important) ══ */
@media(max-width:960px) {
  .page-hero { padding: 120px 24px 60px !important; }
}
@media(max-width:640px) {
  .page-hero { padding: 100px 16px 48px !important; }
}