/* ═══════════════════════════════════════════════════════
   RankApex AI — Depth UI Premium v3
   Cyber-Professional · Glassmorphism · 3D Transforms
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@400;500;600;700&display=swap');

/* ── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Core palette */
  --obsidian:     #0B0C10;
  --obsidian-2:   #0f1118;
  --obsidian-3:   #141720;
  --obsidian-4:   #1a1f2e;
  --violet:       #7B2CBF;
  --violet-dim:   #6320a0;
  --violet-bright:#9d4edd;
  --violet-glow:  rgba(123,44,191,.35);
  --violet-soft:  rgba(123,44,191,.12);
  --cyan:         #00F0FF;
  --cyan-dim:     #00c8d4;
  --cyan-glow:    rgba(0,240,255,.28);
  --cyan-soft:    rgba(0,240,255,.10);
  --cyan-ultra:   rgba(0,240,255,.05);
  --white:        #e8eaf6;
  --muted:        #6b7a99;
  --muted-2:      #4a5568;

  /* Gradients */
  --grad:         linear-gradient(135deg,#7B2CBF 0%,#00F0FF 100%);
  --grad-rev:     linear-gradient(135deg,#00F0FF 0%,#7B2CBF 100%);
  --grad-text:    linear-gradient(135deg,#a855f7 0%,#00F0FF 60%,#38bdf8 100%);
  --grad-violet:  linear-gradient(135deg,#7B2CBF,#9d4edd);
  --grad-subtle:  linear-gradient(180deg,rgba(123,44,191,.06) 0%,transparent 100%);

  /* Glass */
  --glass:        rgba(255,255,255,.03);
  --glass-strong: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.08);
  --glass-border-hover: rgba(0,240,255,.3);

  /* Shadows */
  --shadow-deep:  0 32px 80px -20px rgba(0,0,0,.8);
  --shadow-glow:  0 0 60px -15px var(--violet-glow);
  --shadow-cyan:  0 0 40px -12px var(--cyan-glow);
  --shadow-card:  0 8px 32px -8px rgba(0,0,0,.6), 0 0 0 1px var(--glass-border);

  /* Misc */
  --radius:       18px;
  --radius-sm:    12px;
  --radius-xs:    8px;
  --transition:   .22s cubic-bezier(.4,0,.2,1);
}

/* ── RESET & BASE ────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--obsidian);
  color:var(--white);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--cyan); text-decoration:none; transition:opacity var(--transition),color var(--transition); }
a:hover { opacity:.8; }
p { color:#8892a4; line-height:1.75; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.small { font-size:.82rem; }

/* ── ATMOSPHERIC BG ─────────────────────────────────────── */
body::before {
  content:""; position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(ellipse 1000px 700px at 90% -10%, rgba(123,44,191,.12), transparent 60%),
    radial-gradient(ellipse 800px 600px at -10% 50%,  rgba(0,240,255,.06),  transparent 60%),
    radial-gradient(ellipse 600px 500px at 50% 110%,  rgba(123,44,191,.08), transparent 55%),
    radial-gradient(ellipse 400px 300px at 15% 90%,   rgba(0,240,255,.04),  transparent 50%);
  pointer-events:none;
}
/* Animated grid */
body::after {
  content:""; position:fixed; inset:0; z-index:-2;
  background-image:
    linear-gradient(rgba(0,240,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.04) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
  mask-image:radial-gradient(ellipse at 50% 30%, black 20%, transparent 75%);
  animation:gridShift 20s linear infinite;
}
@keyframes gridShift { from{background-position:0 0} to{background-position:60px 60px} }

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
h1,h2,h3,h4 {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--white);
  line-height:1.12;
}
h1 { font-size:clamp(2.8rem,6vw,5rem); }
h2 { font-size:clamp(2rem,4vw,3.2rem); margin-bottom:.5rem; }
h3 { font-size:1.3rem; font-weight:700; }
h4 { font-size:.9rem; }

.accent {
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.gradient-border {
  background:var(--glass);
  border:1px solid transparent;
  background-clip:padding-box;
  position:relative;
}
.gradient-border::before {
  content:"";
  position:absolute; inset:-1px;
  background:var(--grad);
  border-radius:inherit;
  z-index:-1;
}

/* ── LAYOUT ──────────────────────────────────────────────── */
.container { max-width:1280px; margin:0 auto; padding:0 32px; }
.section { padding:96px 0; }
.section-sm { padding:64px 0; }

/* ── GLASS CARD ──────────────────────────────────────────── */
.glass-card {
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(20px) saturate(150%);
  transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.glass-card:hover {
  border-color:rgba(0,240,255,.2);
  box-shadow:var(--shadow-card), 0 0 40px -15px var(--cyan-glow);
}

/* ── HEADER ──────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(32px) saturate(180%);
  background:rgba(11,12,16,.75);
  border-bottom:1px solid var(--glass-border);
  transition:box-shadow .3s, background .3s;
}
.site-header.scrolled {
  background:rgba(11,12,16,.92);
  box-shadow:0 4px 40px rgba(0,0,0,.5), 0 1px 0 rgba(0,240,255,.08);
}
.nav-wrap {
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:16px 32px;
}
.brand { display:flex; align-items:center; gap:10px; color:var(--white); flex-shrink:0; }
.logo { width:36px; height:36px; flex-shrink:0; }
.brand-text {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:1.2rem; letter-spacing:-.03em;
}
.brand-accent {
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.primary-nav { display:flex; gap:28px; }
.primary-nav a {
  color:#8892a4; font-weight:500; font-size:.88rem;
  position:relative; padding:4px 0; letter-spacing:.01em;
}
.primary-nav a::after {
  content:""; position:absolute; bottom:-3px; left:0; right:0;
  height:2px; background:var(--grad); border-radius:99px;
  transform:scaleX(0); transition:transform .2s; transform-origin:left;
}
.primary-nav a:hover { color:var(--cyan); opacity:1; }
.primary-nav a:hover::after { transform:scaleX(1); }

.nav-actions { display:flex; align-items:center; gap:10px; }
.pro-badge {
  background:var(--grad); color:var(--obsidian);
  font-weight:800; font-size:.7rem; padding:4px 12px; border-radius:999px;
  letter-spacing:.06em; white-space:nowrap;
}
.usage-chip {
  font-size:.8rem; color:var(--muted);
  background:var(--cyan-ultra);
  border:1px solid rgba(0,240,255,.15);
  padding:5px 14px; border-radius:999px; white-space:nowrap;
}
.hamburger { display:none; background:none; border:none; color:var(--white); font-size:1.5rem; cursor:pointer; padding:4px; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.9rem;
  padding:11px 22px; border-radius:10px; border:1.5px solid transparent;
  cursor:pointer; transition:all var(--transition); text-decoration:none;
  white-space:nowrap; letter-spacing:.01em; position:relative; overflow:hidden;
}
.btn-primary {
  background:var(--grad); color:var(--obsidian);
  box-shadow:0 4px 20px -6px var(--violet-glow);
}
.btn-primary::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity:0; transition:opacity .2s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 32px -8px var(--violet-glow); opacity:1; }
.btn-primary:hover::before { opacity:1; }
.btn-ghost {
  background:var(--glass); color:var(--white);
  border-color:var(--glass-border);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover { background:var(--cyan-ultra); border-color:rgba(0,240,255,.25); opacity:1; }
.btn-lg { padding:15px 32px; font-size:1rem; border-radius:12px; }
.btn-sm { padding:8px 16px; font-size:.82rem; }
.btn-block { width:100%; }
.btn:active { transform:translateY(0) scale(.97); }

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  position:relative;
  padding:130px 0 110px;
  overflow:hidden;
  perspective:1000px;
}
.hero-bg {
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(123,44,191,.04) 0%, transparent 60%);
}

/* Floating orbs */
.orb {
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  will-change:transform;
}
.orb-1 {
  width:600px; height:600px;
  background:radial-gradient(circle,rgba(123,44,191,.18),transparent 70%);
  top:-150px; right:-150px;
  animation:orbFloat 12s ease-in-out infinite;
}
.orb-2 {
  width:400px; height:400px;
  background:radial-gradient(circle,rgba(0,240,255,.12),transparent 70%);
  bottom:-80px; left:-80px;
  animation:orbFloat 15s ease-in-out infinite reverse;
}
.orb-3 {
  width:300px; height:300px;
  background:radial-gradient(circle,rgba(157,78,221,.1),transparent 70%);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  animation:orbFloat 10s ease-in-out infinite .5s;
}
@keyframes orbFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-30px) scale(1.06); }
}

.hero-inner { text-align:center; max-width:960px; margin:0 auto; position:relative; }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700;
  background:rgba(123,44,191,.15); color:var(--violet-bright);
  padding:7px 18px; border-radius:999px;
  border:1px solid rgba(123,44,191,.3);
  margin-bottom:32px; letter-spacing:.05em; text-transform:uppercase;
  animation:fadeUp .6s ease both;
}
.eyebrow-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--violet-bright);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.6)} }

.hero-title {
  animation:fadeUp .6s ease .1s both;
  margin-bottom:24px;
}
.hero-title .line-2 { display:block; }

.hero-lead {
  font-size:1.18rem; max-width:680px;
  margin:0 auto 44px;
  color:#7a8fa8; line-height:1.8;
  animation:fadeUp .6s ease .2s both;
}

.hero-cta {
  display:flex; gap:14px; justify-content:center;
  flex-wrap:wrap; margin-bottom:72px;
  animation:fadeUp .6s ease .3s both;
}
.hero-cta .btn-lg .arrow { transition:transform .2s; }
.hero-cta .btn-lg:hover .arrow { transform:translateX(4px); }

/* 3D Scene */
.hero-3d-scene {
  perspective:800px;
  perspective-origin:50% 40%;
  height:200px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:60px;
  animation:fadeUp .7s ease .35s both;
}
.neural-net {
  position:relative;
  width:400px; height:160px;
  transform-style:preserve-3d;
  animation:netRotate 20s linear infinite;
}
@keyframes netRotate {
  0%   { transform:rotateY(-8deg) rotateX(6deg); }
  50%  { transform:rotateY(8deg) rotateX(-4deg); }
  100% { transform:rotateY(-8deg) rotateX(6deg); }
}
.net-node {
  position:absolute;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--grad);
  box-shadow:0 0 16px var(--cyan-glow), 0 0 4px var(--violet-glow);
  transform-style:preserve-3d;
}
.net-node::after {
  content:""; position:absolute; inset:-4px;
  border-radius:50%;
  border:1px solid rgba(0,240,255,.3);
  animation:nodePulse 2s ease-in-out infinite;
}
@keyframes nodePulse { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.5);opacity:0} }
.net-line {
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,rgba(123,44,191,.4),rgba(0,240,255,.4));
  transform-origin:left center;
  animation:linePulse 3s ease-in-out infinite;
}
@keyframes linePulse { 0%,100%{opacity:.3} 50%{opacity:.8} }

/* Stats bar */
.hero-stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:720px; margin:0 auto;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--radius); overflow:hidden;
  backdrop-filter:blur(20px);
  animation:fadeUp .6s ease .4s both;
}
.hero-stats div {
  padding:22px 20px; text-align:center;
  border-right:1px solid var(--glass-border);
  transition:background var(--transition);
}
.hero-stats div:last-child { border-right:none; }
.hero-stats div:hover { background:var(--cyan-ultra); }
.stat-val {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.8rem; font-weight:800;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block; letter-spacing:-.04em;
}
.stat-label { font-size:.75rem; color:var(--muted); margin-top:3px; letter-spacing:.04em; text-transform:uppercase; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── SECTION HEADER ──────────────────────────────────────── */
.section-header { text-align:center; max-width:740px; margin:0 auto 56px; }
.section-tag {
  display:inline-block;
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--violet-bright);
  background:var(--violet-soft);
  padding:5px 14px; border-radius:999px;
  border:1px solid rgba(123,44,191,.25);
  margin-bottom:18px;
}
.section-header p { font-size:1.05rem; color:#6b7a99; max-width:560px; margin:.8rem auto 0; }

/* ── FEATURED TOOLS ──────────────────────────────────────── */
.featured-tools {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px; margin-bottom:20px;
}
.featured-tools.row-2 {
  grid-template-columns:repeat(2,1fr);
  max-width:860px; margin:0 auto;
}
.featured-card {
  padding:28px;
  cursor:pointer;
  display:flex; flex-direction:column;
  transform-style:preserve-3d;
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.featured-card:hover {
  transform:translateY(-6px) rotateX(2deg);
  border-color:rgba(0,240,255,.25);
  box-shadow:var(--shadow-card), 0 20px 60px -20px var(--violet-glow);
}
.tool-icon {
  width:48px; height:48px; border-radius:14px;
  background:var(--violet-soft);
  border:1px solid rgba(123,44,191,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:18px;
  transition:background var(--transition), box-shadow var(--transition);
}
.featured-card:hover .tool-icon {
  background:rgba(123,44,191,.2);
  box-shadow:0 0 20px -6px var(--violet-glow);
}
.featured-card h3 { font-size:1.1rem; margin-bottom:8px; }
.featured-card p { font-size:.88rem; color:#5a6a82; flex:1; margin-bottom:18px; line-height:1.6; }
.card-cta {
  font-size:.83rem; font-weight:700; color:var(--cyan);
  display:flex; align-items:center; gap:6px;
  transition:gap .2s;
}
.featured-card:hover .card-cta { gap:10px; }
.featured-card .launch-btn { display:none; }

/* ── ALL TOOLS GRID ──────────────────────────────────────── */
.tools-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
.tool-card {
  padding:22px;
  display:flex; flex-direction:column;
  gap:12px;
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.tool-card:hover {
  transform:translateY(-4px);
  border-color:rgba(0,240,255,.2);
  box-shadow:var(--shadow-card), 0 0 30px -12px var(--cyan-glow);
}
.tool-card-icon { font-size:1.6rem; }
.tool-card h3 { font-size:1rem; font-weight:700; }
.tool-card p { font-size:.84rem; color:#5a6a82; line-height:1.6; flex:1; }
.tool-card button {
  margin-top:auto;
  background:var(--cyan-ultra);
  border:1px solid rgba(0,240,255,.18);
  color:var(--cyan);
  padding:9px 16px; border-radius:9px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.83rem;
  cursor:pointer; transition:all .2s;
  display:flex; align-items:center; gap:6px;
}
.tool-card button:hover {
  background:rgba(0,240,255,.14);
  border-color:rgba(0,240,255,.35);
  transform:none;
}

/* ── WORKSPACE ──────────────────────────────────────────── */
.workspace-section { background:var(--obsidian-2); border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); }
.workspace-panel {
  padding:36px;
  min-height:320px;
}
.workspace-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:28px; gap:16px; }
.workspace-header-left { flex:1; }
.workspace-header h2 { font-size:1.5rem; margin-bottom:4px; }
.workspace-header p { font-size:.9rem; }
.usage-pill {
  display:flex; align-items:center; gap:8px;
  background:var(--violet-soft);
  border:1px solid rgba(123,44,191,.2);
  padding:8px 16px; border-radius:999px;
  font-size:.83rem; white-space:nowrap; flex-shrink:0;
}
.usage-pill strong { color:var(--violet-bright); font-size:1rem; }

/* Tool forms */
.tool-form { display:flex; flex-direction:column; gap:14px; max-width:640px; }
.tool-form label {
  display:flex; flex-direction:column; gap:7px;
  font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#8892a4;
}
.tool-form input,
.tool-form select,
.tool-form textarea {
  background:var(--obsidian-4);
  border:1.5px solid var(--glass-border);
  color:var(--white);
  padding:12px 16px; border-radius:10px;
  font-family:'Inter',sans-serif; font-size:.95rem;
  transition:border-color .2s, box-shadow .2s;
  text-transform:none; font-weight:400;
}
.tool-form input:focus,
.tool-form select:focus,
.tool-form textarea:focus {
  outline:none;
  border-color:rgba(0,240,255,.4);
  box-shadow:0 0 0 3px rgba(0,240,255,.08);
}
.tool-form select { appearance:none; cursor:pointer; }
.tool-form textarea { min-height:120px; resize:vertical; line-height:1.6; }

/* Results */
.tool-output {
  background:var(--obsidian-4);
  border:1px solid var(--glass-border);
  border-radius:12px; padding:20px;
  font-size:.9rem; color:#a0b0c8;
  white-space:pre-wrap; line-height:1.7;
  margin-top:16px;
}
.metric-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:12px; margin-top:16px;
}
.metric {
  background:var(--obsidian-4);
  border:1px solid var(--glass-border);
  border-radius:10px; padding:14px 16px; text-align:center;
}
.metric .v {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.5rem; font-weight:800; color:var(--cyan);
  display:block;
}
.metric .l { font-size:.73rem; color:var(--muted); margin-top:3px; text-transform:uppercase; letter-spacing:.05em; }
.metric .bar {
  height:4px; background:rgba(255,255,255,.08);
  border-radius:99px; margin-top:8px; overflow:hidden;
}
.metric .bar span {
  display:block; height:100%;
  background:var(--grad); border-radius:99px;
  transition:width .8s ease;
}

/* Score ring */
.score-ring {
  width:100px; height:100px; border-radius:50%;
  border:4px solid;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  flex-shrink:0;
}
.score-ring.score-good  { border-color:var(--cyan); box-shadow:0 0 30px -8px var(--cyan-glow); }
.score-ring.score-avg   { border-color:#facc15; box-shadow:0 0 20px -8px rgba(250,204,21,.3); }
.score-ring.score-poor  { border-color:#f87171; box-shadow:0 0 20px -8px rgba(248,113,113,.3); }
.score-ring .sval {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:2rem; font-weight:800; line-height:1;
}
.score-ring.score-good .sval  { color:var(--cyan); }
.score-ring.score-avg  .sval  { color:#facc15; }
.score-ring.score-poor .sval  { color:#f87171; }
.score-ring .slabel { font-size:.7rem; color:var(--muted); }

.audit-header { display:flex; gap:24px; align-items:center; margin-bottom:24px; padding:20px; background:var(--obsidian-4); border-radius:12px; border:1px solid var(--glass-border); }
.audit-cats { flex:1; display:flex; flex-direction:column; gap:10px; }
.audit-cat { display:flex; align-items:center; gap:12px; font-size:.84rem; }
.cat-label { width:100px; color:#8892a4; flex-shrink:0; }
.cat-val { width:32px; text-align:right; color:var(--cyan); font-weight:700; font-size:.88rem; flex-shrink:0; }
.bar { height:6px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.bar span { display:block; height:100%; background:var(--grad); border-radius:99px; }

.issue-list { display:flex; flex-direction:column; gap:8px; }
.issue-item { display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:10px; border:1px solid; }
.issue-item.issue-high  { background:rgba(239,68,68,.06);  border-color:rgba(239,68,68,.25); }
.issue-item.issue-med   { background:rgba(234,179,8,.05);  border-color:rgba(234,179,8,.22); }
.issue-item.issue-low   { background:rgba(0,240,255,.04);  border-color:rgba(0,240,255,.18); }
.issue-icon { font-size:1rem; flex-shrink:0; margin-top:2px; }
.issue-body strong { display:block; font-size:.88rem; margin-bottom:3px; color:var(--white); }
.issue-body p { font-size:.81rem; color:var(--muted); margin:0; }

.roadmap-step { padding:20px 22px; border-radius:12px; border:1px solid var(--glass-border); background:rgba(0,240,255,.02); margin-bottom:12px; }
.roadmap-step .step-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.step-num { width:30px; height:30px; border-radius:50%; background:var(--grad); color:var(--obsidian); display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:800; flex-shrink:0; }
.step-title { font-weight:700; font-size:1rem; }
.roadmap-step p,.roadmap-step li { font-size:.86rem; color:#6b7a99; line-height:1.65; }
.roadmap-step ul { padding-left:18px; margin-top:8px; }
.roadmap-step ul li { margin-bottom:5px; }

.kw-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.kw-tag { background:var(--violet-soft); color:var(--violet-bright); padding:5px 14px; border-radius:999px; font-size:.8rem; font-weight:700; border:1px solid rgba(123,44,191,.25); }

.table-wrap { overflow-x:auto; margin-top:16px; border-radius:10px; border:1px solid var(--glass-border); }
table.data { width:100%; border-collapse:collapse; font-size:.86rem; }
table.data th { padding:11px 14px; text-align:left; font-size:.73rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--glass-border); background:rgba(255,255,255,.02); }
table.data td { padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.04); color:#8892a4; }
table.data tr:last-child td { border-bottom:none; }
table.data tr:hover td { background:var(--cyan-ultra); }

/* ── CONTENT SECTION ────────────────────────────────────── */
.content-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px; margin-top:40px;
}
.content-block { padding:32px; }
.content-block h3 { margin-bottom:14px; font-size:1.15rem; }
.content-block h3 .icon { margin-right:8px; }
.content-block p { font-size:.92rem; color:#5a6a82; margin-bottom:12px; line-height:1.75; }
.content-block p:last-child { margin-bottom:0; }

/* ── PRICING ─────────────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; max-width:1060px; margin:0 auto; }
.price-card { padding:40px 32px; display:flex; flex-direction:column; gap:20px; position:relative; transition:transform .3s,box-shadow .3s; }
.price-card:hover { transform:translateY(-5px); }
.price-card.featured {
  border-color:rgba(0,240,255,.3);
  box-shadow:var(--shadow-card), 0 0 80px -30px var(--violet-glow), 0 0 0 1px rgba(0,240,255,.15);
  background:linear-gradient(160deg,rgba(123,44,191,.08),rgba(0,240,255,.04));
}
.price-card .badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:var(--obsidian);
  font-size:.68rem; font-weight:800; padding:5px 16px;
  border-radius:99px; letter-spacing:.08em; white-space:nowrap;
}
.price-card h3 { font-size:1.35rem; }
.price span { font-family:'Plus Jakarta Sans',sans-serif; font-size:3rem; font-weight:800; color:var(--white); letter-spacing:-.05em; }
.price small { color:var(--muted); font-size:.88rem; }
.price-note { font-size:.82rem; color:var(--muted); margin-top:-12px; }
.price-card ul { list-style:none; display:flex; flex-direction:column; gap:11px; font-size:.91rem; color:#7a8fa8; flex:1; }
.price-card ul li::before { content:"✓ "; color:var(--cyan); font-weight:700; }
.pricing-note { text-align:center; margin-top:24px; font-size:.9rem; color:var(--muted); }

/* ── ABOUT ───────────────────────────────────────────────── */
.two-col { display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start; }
.two-col p { margin-bottom:18px; color:#5a6a82; font-size:.97rem; }
.about-card { padding:32px; }
.about-card h3 { margin-bottom:16px; }
.check-list { list-style:none; display:flex; flex-direction:column; gap:11px; font-size:.93rem; color:#7a8fa8; }
.check-list li::before { content:"→ "; color:var(--cyan); font-weight:700; }

/* ── CONTACT ─────────────────────────────────────────────── */
.contact-form { max-width:700px; margin:0 auto; padding:40px; display:flex; flex-direction:column; gap:16px; }
.contact-form label { font-size:.78rem; font-weight:700; display:flex; flex-direction:column; gap:6px; letter-spacing:.05em; text-transform:uppercase; color:#8892a4; }
.contact-form .row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form input,
.contact-form textarea {
  background:var(--obsidian-4); border:1.5px solid var(--glass-border);
  color:var(--white); padding:12px 16px; border-radius:10px;
  font-family:'Inter',sans-serif; font-size:.95rem;
  transition:border-color .2s,box-shadow .2s; font-weight:400; text-transform:none;
}
.contact-form input:focus,
.contact-form textarea:focus { outline:none; border-color:rgba(0,240,255,.4); box-shadow:0 0 0 3px rgba(0,240,255,.08); }

/* ── ADSENSE ─────────────────────────────────────────────── */
.adsense-slot {
  margin:28px 0; padding:28px;
  border:1px dashed rgba(0,240,255,.1);
  border-radius:12px; text-align:center; color:var(--muted);
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(255,255,255,.01);
}

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer {
  border-top:1px solid var(--glass-border);
  padding:60px 0 32px;
  background:rgba(11,12,16,.8);
}
.footer-grid {
  display:grid; grid-template-columns:1.6fr repeat(3,1fr);
  gap:32px; padding-bottom:40px;
}
.footer-brand-desc { font-size:.9rem; color:var(--muted); line-height:1.7; max-width:280px; }
.footer-grid h4 { font-size:.73rem; text-transform:uppercase; letter-spacing:.13em; margin-bottom:16px; color:var(--cyan); font-family:'Inter',sans-serif; font-weight:700; }
.footer-grid a { display:block; color:#4a5568; font-size:.87rem; margin-bottom:11px; font-weight:400; transition:color .2s; }
.footer-grid a:hover { color:var(--cyan); opacity:1; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid var(--glass-border); font-size:.82rem; color:var(--muted); }
.footer-bottom-links { display:flex; gap:20px; }

/* ── MODALS ──────────────────────────────────────────────── */
.modal {
  position:fixed; inset:0;
  background:rgba(11,12,16,.85);
  backdrop-filter:blur(16px);
  display:none; align-items:center; justify-content:center;
  z-index:200; padding:20px;
  animation:fade .25s ease;
}
.modal.open { display:flex; }
.modal-card { max-width:500px; width:100%; padding:44px; position:relative; animation:pop .3s ease; }
.modal-card.paywall { text-align:center; max-width:480px; }
.modal-card.legal { max-width:760px; max-height:84vh; overflow-y:auto; }
.modal-close {
  position:absolute; top:16px; right:20px; background:none; border:none;
  color:var(--white); font-size:2rem; cursor:pointer; line-height:1; opacity:.4;
  transition:opacity .2s;
}
.modal-close:hover { opacity:1; }
.modal-card h3 { margin-bottom:10px; font-size:1.45rem; }
.modal-card > p { margin-bottom:20px; font-size:.95rem; }
.modal-card label { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#8892a4; }
.modal-card input { background:var(--obsidian-4); border:1.5px solid var(--glass-border); color:var(--white); padding:12px 14px; border-radius:10px; font-family:'Inter',sans-serif; font-size:.95rem; font-weight:400; width:100%; transition:border-color .2s, box-shadow .2s; }
.modal-card input:focus { outline:none; border-color:rgba(0,240,255,.4); box-shadow:0 0 0 3px rgba(0,240,255,.08); }
.paywall-icon { font-size:3.5rem; margin-bottom:14px; display:block; }
.paywall-price {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:3.2rem; font-weight:800;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:12px 0;
}
.paywall-note { font-size:.82rem; color:var(--muted); margin-bottom:24px; }
.error { background:rgba(239,68,68,.1); color:#fca5a5; padding:10px 14px; border-radius:9px; font-size:.85rem; margin-bottom:12px; border:1px solid rgba(239,68,68,.25); }
.legal h2 { font-size:1.5rem; margin-bottom:14px; color:var(--cyan); }
.legal h3 { font-size:1rem; margin-top:22px; margin-bottom:8px; color:var(--white); }
.legal p,.legal li { font-size:.9rem; margin-bottom:9px; color:#5a6a82; }
.legal ul { padding-left:20px; margin-bottom:10px; }
.legal a { color:var(--cyan); }

/* ── TOAST ───────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(150%);
  background:var(--obsidian-4);
  border:1px solid rgba(0,240,255,.3);
  color:var(--white); padding:13px 28px;
  border-radius:12px; font-size:.9rem; z-index:300;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:var(--shadow-deep), 0 0 30px -10px var(--cyan-glow);
  max-width:90vw; text-align:center; font-weight:600;
}
.toast.show { transform:translateX(-50%) translateY(0); }

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes pop  { from{opacity:0;transform:scale(.93) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }

/* Intersection observer reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:960px){
  .primary-nav {
    display:none; position:absolute; top:100%; left:0; right:0;
    background:rgba(11,12,16,.98); flex-direction:column;
    padding:24px 32px; border-bottom:1px solid var(--glass-border);
    gap:18px; z-index:100;
  }
  .primary-nav.open { display:flex; }
  .hamburger { display:block; }
  .nav-actions .btn-ghost,.usage-chip { display:none; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .hero-stats div:nth-child(2) { border-right:none; }
  .hero-stats div:nth-child(3) { border-top:1px solid var(--glass-border); }
  .featured-tools { grid-template-columns:1fr; }
  .featured-tools.row-2 { grid-template-columns:1fr; }
  .two-col { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .contact-form .row { grid-template-columns:1fr; }
  .pricing-grid { max-width:480px; }
  .neural-net { width:280px; }
  .net-line { display:none; }
}
@media(max-width:600px){
  .container { padding:0 20px; }
  .nav-wrap { padding:14px 20px; }
  .footer-grid { grid-template-columns:1fr; }
  .hero { padding:80px 0 72px; }
  .section { padding:64px 0; }
  .hero-stats { border-radius:14px; }
  .hero-stats div:nth-child(2) { border-right:none; }
  .hero-stats div:nth-child(3) { border-top:1px solid var(--glass-border); border-right:1px solid var(--glass-border); }
  .hero-3d-scene { display:none; }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
  .footer-bottom-links { flex-wrap:wrap; justify-content:center; }
  .audit-header { flex-direction:column; }
}