/* ============================================================
   DIGIRANKING — GLOBAL STYLESHEET
   Structure:
   01. Design tokens (CSS variables)
   02. Reset & base
   03. Utilities (container, buttons, headings, badges)
   04. Top bar + header/nav
   05. Hero (3D orbit, particles, typed text)
   06. Cards (3D tilt, glass, service, case-study)
   07. Sections (stats, process, testimonials, FAQ, pricing)
   08. Forms
   09. CTA band + footer
   10. Floating buttons + scroll progress
   11. Animations & reveal-on-scroll
   12. Responsive breakpoints
   ============================================================ */

/* ---------- 01. DESIGN TOKENS ---------- */
:root {
  /* Brand palette — deep space navy + energetic orange (conversion color) */
  --bg-dark:      #0b1026;
  --bg-darker:    #070a1c;
  --bg-card:      rgba(255, 255, 255, 0.045);
  --border-glass: rgba(255, 255, 255, 0.10);
  --primary:      #ff6b2b;           /* CTA orange — high contrast on dark */
  --primary-dark: #e5551a;
  --accent:       #22d3ee;           /* cyan accent for gradients/highlights */
  --violet:       #8b5cf6;
  --text:         #e8ecf8;
  --text-dim:     #9aa3c0;
  --white:        #ffffff;

  /* Gradients reused everywhere */
  --grad-brand: linear-gradient(120deg, var(--primary), var(--violet) 55%, var(--accent));
  --grad-cta:   linear-gradient(120deg, #ff6b2b, #ff9345);

  /* Typography */
  --font-head: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Rhythm */
  --radius: 18px;
  --section-pad: clamp(64px, 9vw, 120px);
  --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* ---------- 02. RESET & BASE ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--primary); color: #fff; }

/* ---------- 03. UTILITIES ---------- */
.container { width: min(1180px, 92%); margin-inline: auto; }
section { padding-block: var(--section-pad); position: relative; }

/* Headings */
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.18; color: var(--white); }
h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }

/* Gradient text highlight */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Section intro block (kicker + title + sub) */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.kicker {
  display: inline-block; font-size: .8rem; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(34, 211, 238, .35); border-radius: 999px;
  padding: 6px 18px; margin-bottom: 18px;
  background: rgba(34, 211, 238, .07);
}
.section-head p { color: var(--text-dim); margin-top: 14px; }

/* Buttons */
.btn {
  display: inline-block; font-family: var(--font-head); font-weight: 600;
  font-size: .95rem; padding: 14px 30px; border-radius: 999px;
  border: 0; cursor: pointer; transition: transform .25s, box-shadow .25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); }
.btn-primary {
  background: var(--grad-cta); color: #fff;
  box-shadow: 0 10px 28px rgba(255, 107, 43, .38);
}
.btn-primary:hover { box-shadow: 0 16px 38px rgba(255, 107, 43, .55); }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1.5px solid var(--border-glass);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-light { background: #fff; color: var(--bg-dark); }
.btn-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }

/* ---------- 04. TOP BAR + HEADER ---------- */
.topbar {
  background: var(--bg-darker); font-size: .82rem;
  border-bottom: 1px solid var(--border-glass); padding-block: 8px;
}
.topbar-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.topbar-contacts { display: flex; gap: 22px; }
.topbar a:hover { color: var(--primary); }
.topbar-note { color: var(--text-dim); }

.site-header {
  position: sticky; top: 0; z-index: 900;
  padding-block: 14px; transition: background .3s, box-shadow .3s;
}
/* Glass effect applied by JS after scrolling */
.site-header.scrolled {
  background: rgba(11, 16, 38, .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo img { height: 40px; width: auto; }

/* Brand lockup: SVG icon + wordmark ("local" light / "GURUJI" gradient) */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-text {
  font-family: var(--font-head); font-weight: 800; font-size: 1.4rem;
  color: var(--white); letter-spacing: -0.5px;
}
.brand-text b {
  background: var(--grad-cta);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link { font-weight: 500; font-size: .95rem; position: relative; padding-block: 6px; }
/* Animated underline on hover/active */
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--grad-cta); border-radius: 2px; transition: width .3s;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-cta { padding: 11px 24px; font-size: .88rem; }

/* Hamburger (mobile) */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }
.nav-toggle span {
  display: block; width: 26px; height: 2.5px; background: var(--white);
  margin: 6px 0; border-radius: 2px; transition: .3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ---------- 05. HERO ---------- */
.hero {
  min-height: 88vh; display: flex; align-items: center;
  padding-block: 70px; overflow: hidden;
}
/* Particle canvas fills hero background */
#particles {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
/* Soft glow blobs */
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(120px); opacity: .35; z-index: 0;
}
.hero::before { width: 480px; height: 480px; background: var(--violet); top: -140px; right: -120px; }
.hero::after  { width: 420px; height: 420px; background: var(--primary); bottom: -160px; left: -140px; opacity: .22; }

.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border-glass);
  border-radius: 999px; padding: 8px 18px; font-size: .85rem; margin-bottom: 22px;
}
.hero-badge .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399;
  animation: pulse-dot 1.6s infinite;
}
.hero p.lead { color: var(--text-dim); font-size: 1.12rem; margin: 22px 0 34px; max-width: 560px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
/* Typed rotating keyword */
.typed-wrap { color: var(--primary); border-right: 3px solid var(--accent); padding-right: 4px; }

/* Trust strip under hero CTAs */
.hero-trust { display: flex; gap: 28px; margin-top: 42px; flex-wrap: wrap; }
.hero-trust .item strong { display: block; font-family: var(--font-head); font-size: 1.35rem; color: var(--white); }
.hero-trust .item span { font-size: .82rem; color: var(--text-dim); }

/* --- 3D ORBIT VISUAL (pure CSS 3D) --- */
.orbit-scene { perspective: 900px; display: grid; place-items: center; }
.orbit-core {
  width: 190px; height: 190px; border-radius: 50%;
  background: var(--grad-brand); display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: #fff;
  box-shadow: 0 0 90px rgba(139, 92, 246, .55), inset 0 0 40px rgba(255,255,255,.18);
  animation: float 5s ease-in-out infinite;
  text-align: center; line-height: 1.2; padding: 18px;
}
.orbit-ring {
  position: absolute; border: 1.5px dashed rgba(255,255,255,.22); border-radius: 50%;
  transform-style: preserve-3d;
}
.orbit-ring.r1 { width: 320px; height: 320px; animation: spin3d-1 14s linear infinite; }
.orbit-ring.r2 { width: 430px; height: 430px; animation: spin3d-2 22s linear infinite; }
/* Chips orbiting the core */
.orbit-chip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(11, 16, 38, .9); border: 1px solid var(--border-glass);
  border-radius: 999px; padding: 8px 16px; font-size: .8rem; font-weight: 600;
  white-space: nowrap; backdrop-filter: blur(8px);
}
.orbit-chip.c1 { top: 0%;   left: 50%; border-color: var(--primary); }
.orbit-chip.c2 { top: 100%; left: 50%; border-color: var(--accent); }
.orbit-chip.c3 { top: 50%;  left: 0%;  border-color: var(--violet); }
.orbit-chip.c4 { top: 50%;  left: 100%; border-color: #34d399; }

/* ---------- 06. CARDS ---------- */
/* Base glass card */
.card {
  background: var(--bg-card); border: 1px solid var(--border-glass);
  border-radius: var(--radius); padding: 34px 28px;
  backdrop-filter: blur(10px);
  transition: transform .35s, border-color .35s, box-shadow .35s;
}
.card:hover { border-color: rgba(255, 107, 43, .45); box-shadow: var(--shadow-card); }

/* 3D tilt cards — JS sets --rx / --ry from mouse position */
.tilt {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.tilt > * { transform: translateZ(28px); } /* content pops toward viewer */

/* Service card specifics */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.service-card .icon {
  font-size: 2rem; width: 64px; height: 64px; display: grid; place-items: center;
  background: var(--grad-brand); border-radius: 16px; margin-bottom: 20px;
  box-shadow: 0 10px 26px rgba(139, 92, 246, .35);
}
.service-card h3 { margin-bottom: 10px; }
.service-card p { color: var(--text-dim); font-size: .95rem; }
.service-card ul { margin-top: 16px; }
.service-card li {
  font-size: .88rem; color: var(--text-dim); padding: 5px 0 5px 24px; position: relative;
}
.service-card li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.service-card .card-link { display: inline-block; margin-top: 18px; color: var(--primary); font-weight: 600; font-size: .9rem; }
.service-card .card-link:hover { color: var(--accent); }

/* Case study card */
.case-card .case-metric {
  font-family: var(--font-head); font-size: 2.4rem; font-weight: 800;
  background: var(--grad-cta); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.case-card .case-industry {
  font-size: .78rem; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--accent); margin-bottom: 12px; display: block;
}
.case-card p { color: var(--text-dim); font-size: .93rem; margin-top: 10px; }

/* ---------- 07. SECTIONS ---------- */
/* Stats band with animated counters */
.stats-band { background: var(--bg-darker); border-block: 1px solid var(--border-glass); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; }
.stat-num {
  font-family: var(--font-head); font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800; color: var(--white);
}
.stat-num .suffix { color: var(--primary); }
.stat-label { color: var(--text-dim); font-size: .92rem; }

/* Process timeline (Analysis → Planning → A/B Testing → Execution) */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.process-step { text-align: center; position: relative; padding: 30px 18px; }
.process-step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-head); font-size: 2.6rem; font-weight: 800;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; display: block; margin-bottom: 10px;
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.process-step p { font-size: .88rem; color: var(--text-dim); }
/* Connector line between steps (desktop) */
.process-step:not(:last-child)::after {
  content: '→'; position: absolute; right: -16px; top: 42px;
  color: var(--primary); font-size: 1.4rem;
}

/* Marquee logo/keyword strip — infinite scroll */
.marquee { overflow: hidden; border-block: 1px solid var(--border-glass); padding-block: 18px; background: var(--bg-darker); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 26s linear infinite; }
.marquee-track span { font-family: var(--font-head); font-weight: 700; color: var(--text-dim); white-space: nowrap; opacity: .75; }
.marquee-track span b { color: var(--primary); }

/* Testimonials slider */
.testi-slider { position: relative; max-width: 780px; margin-inline: auto; }
.testi-slide { display: none; text-align: center; padding: 44px 36px; }
.testi-slide.active { display: block; animation: fadeUp .55s ease; }
.testi-slide blockquote { font-size: 1.15rem; color: var(--text); font-style: italic; margin-bottom: 22px; }
.testi-slide .who { color: var(--primary); font-weight: 700; font-family: var(--font-head); }
.testi-slide .role { color: var(--text-dim); font-size: .85rem; }
.testi-slide .stars { color: #fbbf24; letter-spacing: 3px; margin-bottom: 16px; }
.testi-dots { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }
.testi-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--border-glass); transition: .3s;
}
.testi-dots button.active { background: var(--primary); transform: scale(1.35); }

/* FAQ accordion */
.faq-list { max-width: 780px; margin-inline: auto; display: grid; gap: 14px; }
.faq-item { border: 1px solid var(--border-glass); border-radius: 14px; background: var(--bg-card); overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 20px 24px; color: var(--white); font-family: var(--font-head);
  font-size: 1rem; font-weight: 600; display: flex; justify-content: space-between; gap: 16px;
}
.faq-q::after { content: '+'; font-size: 1.4rem; color: var(--primary); transition: transform .3s; }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-a p { padding: 0 24px 20px; color: var(--text-dim); font-size: .94rem; }

/* Pricing / packages */
.price-card { text-align: center; position: relative; }
.price-card.featured { border-color: var(--primary); box-shadow: 0 0 60px rgba(255, 107, 43, .18); }
.price-card .plan-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--grad-cta); color: #fff; font-size: .72rem; font-weight: 700;
  padding: 5px 16px; border-radius: 999px; letter-spacing: 1px; text-transform: uppercase;
}
.price-card .price { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; color: var(--white); margin: 14px 0 4px; }
.price-card .per { color: var(--text-dim); font-size: .85rem; }
.price-card ul { margin: 24px 0; text-align: left; }
.price-card li { padding: 7px 0 7px 26px; position: relative; font-size: .9rem; color: var(--text-dim); }
.price-card li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* Why-us checklist rows */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.why-item { display: flex; gap: 18px; align-items: flex-start; padding: 22px; }
.why-item .tick {
  flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(34, 211, 238, .12); color: var(--accent); font-size: 1.2rem; font-weight: 800;
}
.why-item h3 { font-size: 1.02rem; margin-bottom: 6px; }
.why-item p { color: var(--text-dim); font-size: .9rem; }

/* ---------- 08. FORMS ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--border-glass);
  color: var(--text); font-family: var(--font-body); font-size: .95rem;
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 43, .18);
}
.field select option { background: var(--bg-dark); }
/* Form status messages (from send-mail.php) */
.form-msg { padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; font-size: .93rem; }
.form-msg.ok  { background: rgba(52, 211, 153, .12); border: 1px solid #34d399; color: #34d399; }
.form-msg.err { background: rgba(248, 113, 113, .12); border: 1px solid #f87171; color: #f87171; }

/* ---------- 09. CTA BAND + FOOTER ---------- */
.cta-band {
  background: var(--grad-brand); padding-block: 60px; margin-top: var(--section-pad);
}
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: rgba(255, 255, 255, .85); }
.cta-band-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.site-footer { background: var(--bg-darker); padding-top: 70px; border-top: 1px solid var(--border-glass); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 50px; }
.footer-col h4 { margin-bottom: 18px; font-size: 1rem; }
.footer-col p, .footer-col li { color: var(--text-dim); font-size: .9rem; }
.footer-col ul li { padding-block: 5px; }
.footer-col ul a:hover { color: var(--primary); }
.footer-brand { margin-bottom: 14px; }
.footer-tagline { font-style: italic; color: var(--accent) !important; margin-bottom: 10px; }
.footer-socials { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.footer-socials a {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--bg-card); border: 1px solid var(--border-glass);
  font-size: .72rem; font-weight: 700; transition: .3s;
}
.footer-socials a:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-3px); }
.footer-contact li { padding-block: 7px; }
.footer-contact a:hover { color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--border-glass); padding-block: 20px; text-align: center; }
.footer-bottom p { font-size: .82rem; color: var(--text-dim); }

/* ---------- 10. FLOATING BUTTONS + SCROLL PROGRESS ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--grad-cta); z-index: 1000; transition: width .1s linear;
}
.fab {
  position: fixed; right: 22px; z-index: 950;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; border: 0;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4); transition: transform .3s, opacity .3s;
}
.fab:hover { transform: scale(1.1); }
.fab-whatsapp { bottom: 24px; background: #25d366; color: #fff; animation: pulse-ring 2.2s infinite; }
.fab-top {
  bottom: 92px; background: var(--bg-card); border: 1px solid var(--border-glass);
  color: var(--text); font-size: 1.2rem; backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
}
.fab-top.show { opacity: 1; pointer-events: auto; }

/* ---------- 11. ANIMATIONS ---------- */
@keyframes float      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes spin3d-1   { from { transform: rotateX(68deg) rotateZ(0); }   to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes spin3d-2   { from { transform: rotateX(-62deg) rotateZ(360deg); } to { transform: rotateX(-62deg) rotateZ(0); } }
@keyframes marquee    { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fadeUp     { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pulse-dot  { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 60% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 80% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

/* Reveal-on-scroll: elements start hidden, JS adds .visible */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
/* Stagger children inside a revealed grid */
.reveal.visible > *:nth-child(2) { transition-delay: .1s; }
.reveal.visible > *:nth-child(3) { transition-delay: .2s; }
.reveal.visible > *:nth-child(4) { transition-delay: .3s; }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 11b. 3D SCROLL RAIL (homepage journey timeline) ----------
   Fixed vertical timeline that fills as you scroll; the active section's
   node glows, labels light up, and the whole rail tilts in 3D space
   as scroll progresses. Nodes are clickable shortcuts. */
.rail-wrap {
  position: fixed; right: 30px; top: 50%; transform: translateY(-50%);
  z-index: 600; perspective: 700px; pointer-events: none;
}
.rail3d {
  display: flex; gap: 0; transform-style: preserve-3d;
  transition: transform .35s ease-out; pointer-events: auto;
}
.rail3d-line {
  width: 3px; border-radius: 3px; background: rgba(255, 255, 255, .12);
  position: relative; overflow: hidden;
}
.rail3d-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  background: var(--grad-brand); box-shadow: 0 0 14px rgba(139, 92, 246, .8);
  transition: height .15s linear;
}
.rail3d-nodes { display: flex; flex-direction: column; justify-content: space-between; margin-left: -8px; }
.rail3d-nodes li {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding-block: 9px;
}
.rail3d-dot {
  width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto;
  background: var(--bg-darker); border: 2px solid rgba(255, 255, 255, .3);
  transition: .35s; transform: translateZ(0);
}
.rail3d-label {
  font-family: var(--font-head); font-size: .66rem; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim);
  opacity: .55; transition: .35s; white-space: nowrap;
}
.rail3d-nodes li:hover .rail3d-label { opacity: 1; color: var(--white); }
/* Active section node: glowing gradient dot + popped-forward label */
.rail3d-nodes li.active .rail3d-dot {
  background: var(--grad-cta); border-color: transparent;
  box-shadow: 0 0 16px rgba(255, 107, 43, .9); transform: translateZ(26px) scale(1.3);
}
.rail3d-nodes li.active .rail3d-label {
  opacity: 1; color: var(--primary); transform: translateZ(26px);
}

/* Aurora background layer: fixed gradient glow whose hue shifts per active section
   (JS sets --rail-hue) — the page atmosphere follows the visitor's journey */
.bg-aurora {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px circle at 82% 18%, rgba(255, 107, 43, .13), transparent 62%),
    radial-gradient(720px circle at 12% 72%, rgba(139, 92, 246, .16), transparent 62%),
    radial-gradient(520px circle at 55% 105%, rgba(34, 211, 238, .10), transparent 60%);
  filter: hue-rotate(var(--rail-hue, 0deg));
  transition: filter 1.2s ease;
}

/* ---------- 11b-2. 3D BACKGROUND TIMELINE (homepage) ----------
   A full-viewport fixed scene BEHIND the content: a tilted 3D spine
   with one milestone node per section. As the user scrolls, the spine
   slides so the active node glides through the viewport center, the
   whole scene rotates in 3D with scroll progress, and a giant ghost
   number + label cross-fades to the section being visited.        */
.bg-scene {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  perspective: 1100px; overflow: hidden;
}
/* The tilted spine (vertical gradient line, 3D-rotated by JS) */
.bg-track3d {
  position: absolute; left: 60%; top: 50%; width: 3px;
  transform-style: preserve-3d;
  background: linear-gradient(180deg,
    transparent, rgba(139, 92, 246, .4) 10%, rgba(34, 211, 238, .4) 90%, transparent);
}
/* Milestone node: ring + numbered label, placed along the spine by JS */
.bg-node {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 20px;
}
.bg-node .ring {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .16); background: rgba(11, 16, 38, .6);
  transition: transform .5s, border-color .5s, box-shadow .5s, background .5s;
}
.bg-node .tag {
  font-family: var(--font-head); font-size: .8rem; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255, 255, 255, .13); white-space: nowrap; transition: color .5s;
}
/* Node of the section currently in view: big glow, gradient fill */
.bg-node.active .ring {
  transform: scale(1.8); border-color: transparent; background: var(--grad-cta);
  box-shadow: 0 0 28px rgba(255, 107, 43, .8), 0 0 70px rgba(139, 92, 246, .45);
}
.bg-node.active .tag { color: rgba(255, 255, 255, .55); }
/* Sections already scrolled past: cool cyan trace */
.bg-node.passed .ring { border-color: rgba(34, 211, 238, .45); }

/* Giant ghost indicator (bottom-right): outlined number + section name */
.bg-ghost {
  position: absolute; right: 5vw; bottom: 7vh;
  display: flex; flex-direction: column; align-items: flex-end;
}
.bg-ghost-num {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(8rem, 19vw, 16rem); line-height: .85;
  color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .08);
}
.bg-ghost-label {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.6rem); letter-spacing: 7px;
  text-transform: uppercase; color: rgba(255, 255, 255, .12); margin-top: 8px;
}
/* Re-triggered on every section change for a fade-up entrance */
.bg-ghost.swap { animation: ghostIn .6s ease; }
@keyframes ghostIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (max-width: 992px) { .bg-scene { display: none; } }

/* ---------- 11c. NEW HOMEPAGE CONTENT BLOCKS ---------- */
/* AI Search spotlight (SEO vs AEO vs GEO explainer) */
.ai-spotlight { border-block: 1px solid var(--border-glass); background: var(--bg-darker); }
.ai-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 20px; }
.ai-compare .card h3 { display: flex; align-items: center; gap: 10px; }
.ai-compare .tagchip {
  font-size: .68rem; font-weight: 700; letter-spacing: 1.2px; padding: 4px 12px;
  border-radius: 999px; text-transform: uppercase;
}
.tagchip.classic { background: rgba(34, 211, 238, .12);  color: var(--accent); }
.tagchip.answer  { background: rgba(255, 107, 43, .14);  color: var(--primary); }
.tagchip.gen     { background: rgba(139, 92, 246, .16);  color: #b79bff; }
.ai-compare dl { margin-top: 14px; font-size: .88rem; }
.ai-compare dt { color: var(--white); font-weight: 600; margin-top: 12px; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; }
.ai-compare dd { color: var(--text-dim); margin-top: 3px; }

/* Industries grid: compact chips with hover lift */
.industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.industry-item {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  background: var(--bg-card); border: 1px solid var(--border-glass);
  border-radius: 14px; transition: .3s; font-size: .92rem; font-weight: 500;
}
.industry-item:hover { border-color: var(--accent); transform: translateY(-4px); }
.industry-item .em { font-size: 1.3rem; }

/* Growth insights: mini-guide cards with readable body text */
.insight-card h3 { margin: 14px 0 10px; font-size: 1.08rem; }
.insight-card .insight-tag {
  font-size: .7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent);
}
.insight-card p { color: var(--text-dim); font-size: .9rem; margin-bottom: 10px; }
.insight-card p strong { color: var(--text); }

/* Two-column rich text intro */
.intro-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: start; }
.intro-cols p { color: var(--text-dim); margin-bottom: 16px; }
.intro-cols p strong { color: var(--white); }
.checklist li {
  padding: 10px 0 10px 32px; position: relative; color: var(--text-dim); font-size: .95rem;
  border-bottom: 1px dashed var(--border-glass);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: '✓'; position: absolute; left: 0; top: 9px;
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(52, 211, 153, .13); color: #34d399; font-size: .8rem; font-weight: 800;
}

/* ---------- 12. RESPONSIVE ---------- */
/* Rail + wide grids need room: hide/stack on smaller screens */
@media (max-width: 1199px) {
  .rail-wrap { display: none; }
  .industry-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .ai-compare { grid-template-columns: 1fr; }
  .intro-cols { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .hero p.lead, .hero-ctas, .hero-trust { margin-inline: auto; justify-content: center; }
  .orbit-scene { margin-top: 30px; transform: scale(.82); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid, .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step:not(:last-child)::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .grid-3, .grid-2, .why-grid, .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .topbar-note { display: none; }

  /* Mobile nav: slide-down panel */
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 0 0 auto 0; top: 0; flex-direction: column;
    background: var(--bg-darker); padding: 96px 8% 40px; gap: 20px;
    transform: translateY(-100%); transition: transform .4s ease; z-index: -1;
  }
  .nav-links.open { transform: none; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .orbit-scene { transform: scale(.62); }
  .industry-grid { grid-template-columns: 1fr 1fr; }
}