/* ============================================================
   CONVERSION VIRGINS — Design System
   Linear / Vercel inspired dark aesthetic
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
ul[role="list"], ol[role="list"] { list-style:none; }
img, video { max-width:100%; height:auto; display:block; }
button { cursor:pointer; font:inherit; border:none; background:none; }
a { color:inherit; text-decoration:none; }

/* ── Design Tokens ── */
:root {
  /* Colours */
  --bg:          #000000;
  --bg-1:        #0a0a0a;
  --bg-2:        #111111;
  --bg-3:        #161616;
  --bg-4:        #1c1c1c;
  --surface:     rgba(255,255,255,0.04);
  --surface-2:   rgba(255,255,255,0.07);
  --border:      rgba(255,255,255,0.08);
  --border-2:    rgba(255,255,255,0.14);

  --text:        #ededed;
  --text-2:      rgba(255,255,255,0.6);
  --text-3:      rgba(255,255,255,0.38);

  /* Accents */
  --violet:      #7c3aed;
  --violet-2:    #8b5cf6;
  --violet-glow: rgba(124,58,237,0.35);
  --blue:        #3b82f6;
  --blue-glow:   rgba(59,130,246,0.25);
  --cyan:        #06b6d4;
  --green:       #10b981;
  --amber:       #f59e0b;
  --red:         #ef4444;

  /* Gradients */
  --grad-hero:   radial-gradient(ellipse 90% 70% at 50% 0%, rgba(124,58,237,0.22) 0%, transparent 65%),
                 radial-gradient(ellipse 60% 50% at 80% 60%, rgba(59,130,246,0.12) 0%, transparent 60%),
                 #000;
  --grad-violet: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
  --grad-text:   linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);

  /* Type */
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Layout */
  --max-w:       1200px;
  --max-w-text:  720px;
  --nav-h:       60px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   20px;
  --radius-xl:   28px;

  /* Motion */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:      0.15s;
  --t:           0.25s;
  --t-slow:      0.5s;
}

/* ── Base ── */
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

::selection { background:var(--violet); color:#fff; }

:focus-visible {
  outline:2px solid var(--violet-2);
  outline-offset:3px;
  border-radius:4px;
}

/* ── Layout helpers ── */
.container   { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.container-s { max-width:var(--max-w-text); margin:0 auto; padding:0 24px; }
.section     { padding:120px 0; }
.section-sm  { padding:80px 0; }

/* ── Typography ── */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.6875rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--violet-2); margin-bottom:16px;
}
.eyebrow::before {
  content:''; width:16px; height:1.5px;
  background:var(--violet-2); border-radius:2px;
}

h1,.h1 { font-size:clamp(2.8rem,7vw,5.5rem); font-weight:700; line-height:1.04; letter-spacing:-0.03em; }
h2,.h2 { font-size:clamp(2rem,4.5vw,3.5rem);  font-weight:700; line-height:1.08; letter-spacing:-0.025em; }
h3,.h3 { font-size:clamp(1.25rem,2.5vw,1.75rem); font-weight:600; line-height:1.2; letter-spacing:-0.015em; }
h4,.h4 { font-size:1.0625rem; font-weight:600; line-height:1.3; letter-spacing:-0.01em; }

.display {
  font-size:clamp(3.5rem,9vw,7rem);
  font-weight:800; line-height:0.98;
  letter-spacing:-0.04em;
  background:var(--grad-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.lead { font-size:clamp(1.0625rem,2vw,1.25rem); line-height:1.7; color:var(--text-2); }
.small { font-size:0.8125rem; color:var(--text-3); }

.text-gradient {
  background:var(--grad-violet);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:8px;
  font-size:0.9375rem; font-weight:500;
  white-space:nowrap; transition:all var(--t) var(--ease);
  position:relative; overflow:hidden;
}
.btn-primary {
  background:var(--grad-violet); color:#fff;
  box-shadow:0 0 0 1px rgba(124,58,237,0.5), 0 4px 24px var(--violet-glow);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 0 0 1px rgba(139,92,246,0.7), 0 8px 32px var(--violet-glow); color:#fff; }

.btn-secondary {
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--border-2);
}
.btn-secondary:hover { background:rgba(255,255,255,0.1); color:#fff; border-color:rgba(255,255,255,0.2); }

.btn-ghost {
  background:transparent; color:var(--text-2);
  border:1px solid var(--border);
}
.btn-ghost:hover { color:var(--text); border-color:var(--border-2); background:var(--surface); }

.btn-sm { padding:7px 14px; font-size:0.8125rem; border-radius:6px; }
.btn-lg { padding:14px 30px; font-size:1.0625rem; border-radius:10px; }

.btn svg { flex-shrink:0; }

/* ── Badges ── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:100px;
  font-size:0.6875rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
}
.badge-violet { background:rgba(124,58,237,0.15); color:var(--violet-2); border:1px solid rgba(124,58,237,0.25); }
.badge-blue   { background:rgba(59,130,246,0.12);  color:#60a5fa;         border:1px solid rgba(59,130,246,0.2); }
.badge-green  { background:rgba(16,185,129,0.12);  color:#34d399;         border:1px solid rgba(16,185,129,0.2); }
.badge-amber  { background:rgba(245,158,11,0.12);  color:#fbbf24;         border:1px solid rgba(245,158,11,0.2); }
.badge-new::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }

/* ── Cards ── */
.card {
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card:hover {
  border-color:var(--border-2);
  transform:translateY(-2px);
  box-shadow:0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(124,58,237,0.1);
}
.card-glass {
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}

/* ── Dividers ── */
.divider { width:100%; height:1px; background:var(--border); }
.divider-glow {
  width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--violet), transparent);
  opacity:0.3;
}

/* ── Navigation ── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:9000;
  height:var(--nav-h);
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.site-header.scrolled {
  background:rgba(0,0,0,0.88);
  border-color:var(--border-2);
}

.nav-inner {
  max-width:1280px; margin:0 auto; padding:0 24px;
  height:100%; display:flex; align-items:center; gap:8px;
}

.nav-brand {
  display:flex; align-items:center; gap:10px;
  margin-right:16px; flex-shrink:0; color:var(--text);
  transition:opacity var(--t);
}
.nav-brand:hover { opacity:0.8; }
.nav-brand-logo {
  width:28px; height:28px;
  background:var(--grad-violet);
  border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.nav-brand-logo svg { color:#fff; }
.nav-brand-name {
  font-size:0.9375rem; font-weight:600;
  letter-spacing:-0.01em; color:var(--text);
  white-space:nowrap;
}

.nav-links {
  display:flex; align-items:center; gap:2px;
  flex:1; list-style:none;
}
.nav-link {
  font-size:0.8125rem; font-weight:400;
  color:var(--text-2); padding:6px 12px;
  border-radius:6px; white-space:nowrap;
  transition:color var(--t), background var(--t);
}
.nav-link:hover, .nav-link.active { color:var(--text); background:var(--surface); }
.nav-link.active { color:#fff; }

.nav-end { display:flex; align-items:center; gap:8px; margin-left:auto; }

.nav-social { display:flex; align-items:center; gap:4px; }
.nav-social-link {
  color:var(--text-3); padding:7px; border-radius:6px;
  display:flex; transition:color var(--t), background var(--t);
}
.nav-social-link:hover { color:var(--text-2); background:var(--surface); }

/* Mobile hamburger */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  padding:8px; border-radius:6px;
  transition:background var(--t);
}
.nav-hamburger:hover { background:var(--surface); }
.nav-hamburger span {
  display:block; width:18px; height:1.5px;
  background:var(--text-2); border-radius:2px;
  transition:all var(--t) var(--ease);
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  display:none;
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.96);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
  z-index:8999; overflow-y:auto;
  padding:24px;
}
.nav-drawer.open { display:block; }
.nav-drawer ul { list-style:none; margin-bottom:24px; }
.nav-drawer ul li a {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; font-size:1.0625rem; font-weight:500;
  color:var(--text-2); border-bottom:1px solid var(--border);
  transition:color var(--t);
}
.nav-drawer ul li a:hover { color:var(--text); }
.nav-drawer ul li:last-child a { border-bottom:none; }
.drawer-social {
  display:flex; flex-wrap:wrap; gap:12px;
  padding-top:20px; border-top:1px solid var(--border);
}
.drawer-social a {
  font-size:0.8125rem; color:var(--text-3);
  transition:color var(--t);
}
.drawer-social a:hover { color:var(--text-2); }

/* ── Announcement bar ── */
.announce-bar {
  background:linear-gradient(90deg, var(--violet) 0%, var(--blue) 100%);
  padding:10px 24px; text-align:center;
  font-size:0.8125rem; font-weight:500; color:#fff;
  position:relative; z-index:9001;
}
.announce-bar a { color:rgba(255,255,255,0.85); text-decoration:underline; }
.announce-bar a:hover { color:#fff; }

/* ── Hero ── */
.hero {
  position:relative; min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background:var(--grad-hero);
  padding:calc(var(--nav-h) + 40px) 24px 80px;
}

.hero-glow {
  position:absolute; inset:0; pointer-events:none; z-index:0;
}
.hero-glow::before {
  content:''; position:absolute;
  top:-20%; left:50%; transform:translateX(-50%);
  width:900px; height:600px;
  background:radial-gradient(ellipse, rgba(124,58,237,0.18) 0%, transparent 70%);
  border-radius:50%;
}
.hero-glow::after {
  content:''; position:absolute;
  bottom:10%; right:-10%;
  width:500px; height:400px;
  background:radial-gradient(ellipse, rgba(59,130,246,0.12) 0%, transparent 65%);
  border-radius:50%;
}

/* Animated grid lines */
.hero-grid {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 75%);
}

.hero-content {
  position:relative; z-index:1;
  max-width:900px;
  animation:fadeUp 0.9s var(--ease) both;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:translateY(0); }
}

.hero-kicker {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px; border-radius:100px;
  background:rgba(124,58,237,0.12);
  border:1px solid rgba(124,58,237,0.25);
  font-size:0.75rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--violet-2); margin-bottom:28px;
}
.hero-kicker-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--violet-2);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(0.7); }
}

.hero h1 {
  font-size:clamp(3rem,8.5vw,7rem);
  font-weight:800; line-height:0.97;
  letter-spacing:-0.04em; margin-bottom:28px;
  background:linear-gradient(160deg, #fff 0%, rgba(255,255,255,0.65) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.hero-sub {
  font-size:clamp(1rem,2vw,1.25rem);
  color:var(--text-2); line-height:1.65;
  max-width:580px; margin:0 auto 44px;
}

.hero-actions {
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap;
}

.hero-scroll {
  position:absolute; bottom:32px; left:50%;
  transform:translateX(-50%);
  color:var(--text-3); z-index:1;
  animation:bounce 2.4s ease-in-out infinite;
}
@keyframes bounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(8px); }
}

/* ── Section intro block ── */
.section-intro { margin-bottom:64px; }
.section-intro.center { text-align:center; }
.section-intro.center .eyebrow { justify-content:center; }
.section-intro.center p { margin:16px auto 0; max-width:560px; }
.section-intro h2 { margin-top:8px; }
.section-intro p { color:var(--text-2); font-size:1.0625rem; line-height:1.75; margin-top:16px; }

/* ── Feature grid ── */
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px; border-radius:var(--radius-xl); overflow:hidden;
}
.feature-item {
  background:var(--bg-2); padding:40px 36px;
  transition:background var(--t);
  border:1px solid transparent;
}
.feature-item:hover { background:var(--bg-3); }
.feature-item-icon {
  width:48px; height:48px; border-radius:12px;
  background:rgba(124,58,237,0.1);
  border:1px solid rgba(124,58,237,0.2);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; color:var(--violet-2);
}
.feature-item h3 { margin-bottom:10px; font-size:1.0625rem; font-weight:600; }
.feature-item p  { font-size:0.9375rem; color:var(--text-2); line-height:1.65; }

/* ── Use-case cards ── */
.usecase-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.usecase-card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:36px 32px;
  transition:all var(--t) var(--ease);
  position:relative; overflow:hidden;
}
.usecase-card::before {
  content:''; position:absolute; inset:0;
  background:var(--grad-violet); opacity:0;
  transition:opacity var(--t) var(--ease);
}
.usecase-card:hover { border-color:var(--border-2); transform:translateY(-4px); box-shadow:0 24px 64px rgba(0,0,0,0.4); }
.usecase-card:hover::before { opacity:0.04; }
.usecase-card-icon {
  font-size:2.5rem; margin-bottom:20px; display:block;
  position:relative; z-index:1;
}
.usecase-card h3  { position:relative; z-index:1; margin-bottom:12px; }
.usecase-card p   { position:relative; z-index:1; font-size:0.9375rem; color:var(--text-2); line-height:1.65; }
.usecase-card-tag { position:relative; z-index:1; margin-top:24px; }

/* ── Stats strip ── */
.stats-bar {
  background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:56px 0;
}
.stats-bar-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  divide-style:solid;
  gap:0; text-align:center;
}
.stat-cell {
  padding:16px 24px;
  border-right:1px solid var(--border);
}
.stat-cell:last-child { border-right:none; }
.stat-cell-num {
  font-size:clamp(2.2rem,4vw,3.2rem);
  font-weight:800; letter-spacing:-0.04em;
  line-height:1; margin-bottom:8px;
  background:var(--grad-violet);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-cell-label { font-size:0.8125rem; color:var(--text-3); }

/* ── Bento-style showcase ── */
.bento { display:grid; gap:16px; }
.bento-2 { grid-template-columns:2fr 1fr; }
.bento-3 { grid-template-columns:1fr 1fr 1fr; }
.bento-cell {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-xl); overflow:hidden;
  transition:border-color var(--t);
}
.bento-cell:hover { border-color:var(--border-2); }
.bento-cell-tall { grid-row:span 2; }
.bento-cell-wide { grid-column:span 2; }
.bento-content { padding:32px; }
.bento-img {
  width:100%; aspect-ratio:16/9;
  object-fit:cover; background:var(--bg-3);
}
.bento-img-tall {
  width:100%; height:100%; min-height:240px;
  object-fit:cover; background:var(--bg-3);
}

/* ── Product cards (shop) ── */
.product-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px;
}
.product-card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:all var(--t) var(--ease);
}
.product-card:hover { border-color:var(--border-2); transform:translateY(-3px); box-shadow:0 16px 48px rgba(0,0,0,0.4); }
.product-thumb {
  aspect-ratio:1; background:var(--bg-3); overflow:hidden;
}
.product-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s var(--ease); }
.product-card:hover .product-thumb img { transform:scale(1.04); }
.product-info { padding:20px; }
.product-info h3 { font-size:0.9375rem; font-weight:600; margin-bottom:6px; }
.product-info p  { font-size:0.8125rem; color:var(--text-2); margin-bottom:12px; }
.product-price { font-size:1.0625rem; font-weight:700; color:var(--violet-2); }
.product-meta  { display:flex; align-items:center; justify-content:space-between; }

/* Product filter bar */
.filter-bar {
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px;
}
.filter-btn {
  padding:7px 16px; border-radius:100px; font-size:0.8125rem; font-weight:500;
  color:var(--text-2); background:var(--surface); border:1px solid var(--border);
  transition:all var(--t) var(--ease);
}
.filter-btn:hover { color:var(--text); border-color:var(--border-2); }
.filter-btn.active { background:rgba(124,58,237,0.15); color:var(--violet-2); border-color:rgba(124,58,237,0.35); }

/* ── Tutorial cards ── */
.tutorial-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
.tutorial-card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:all var(--t) var(--ease);
  display:flex; flex-direction:column;
}
.tutorial-card:hover { border-color:var(--border-2); transform:translateY(-3px); box-shadow:0 16px 48px rgba(0,0,0,0.4); }
.tutorial-thumb {
  aspect-ratio:16/9; background:var(--bg-3); position:relative; overflow:hidden;
}
.tutorial-thumb img { width:100%; height:100%; object-fit:cover; }
.tutorial-play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.3); transition:background var(--t);
}
.tutorial-card:hover .tutorial-play { background:rgba(0,0,0,0.2); }
.tutorial-play-btn {
  width:52px; height:52px; border-radius:50%;
  background:rgba(124,58,237,0.9); display:flex; align-items:center; justify-content:center;
  transition:transform var(--t) var(--ease);
}
.tutorial-card:hover .tutorial-play-btn { transform:scale(1.1); }
.tutorial-body { padding:24px; flex:1; display:flex; flex-direction:column; }
.tutorial-body h3 { font-size:1rem; margin-bottom:8px; }
.tutorial-body p  { font-size:0.875rem; color:var(--text-2); flex:1; line-height:1.6; }
.tutorial-meta { display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.tutorial-meta span { font-size:0.75rem; color:var(--text-3); }

/* ── Affiliate cards ── */
.affiliate-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.affiliate-card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px;
  display:flex; flex-direction:column; gap:12px;
  transition:all var(--t) var(--ease);
}
.affiliate-card:hover { border-color:var(--border-2); transform:translateY(-2px); }
.affiliate-card-header { display:flex; align-items:center; gap:12px; }
.affiliate-logo {
  width:44px; height:44px; border-radius:10px;
  background:var(--bg-3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:1.4rem;
}
.affiliate-card h3 { font-size:0.9375rem; font-weight:600; }
.affiliate-card p  { font-size:0.875rem; color:var(--text-2); line-height:1.6; flex:1; }
.affiliate-card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--border); }
.commission { font-size:0.75rem; color:var(--green); font-weight:600; }

/* ── Node-RED / Waitlist ── */
.waitlist-hero {
  min-height:70vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:calc(var(--nav-h) + 60px) 24px 80px;
  background:var(--bg-1); position:relative; overflow:hidden;
}
.waitlist-hero::before {
  content:''; position:absolute;
  top:-30%; left:50%; transform:translateX(-50%);
  width:700px; height:500px;
  background:radial-gradient(ellipse, rgba(124,58,237,0.15) 0%, transparent 70%);
  border-radius:50%;
}
.waitlist-form {
  display:flex; gap:8px; flex-wrap:wrap;
  justify-content:center; max-width:480px; margin:32px auto 0;
}
.waitlist-input {
  flex:1; min-width:220px; padding:11px 16px;
  background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:8px; color:var(--text); font-size:0.9375rem; font-family:var(--font);
  transition:border-color var(--t);
}
.waitlist-input::placeholder { color:var(--text-3); }
.waitlist-input:focus { outline:none; border-color:var(--violet-2); }

.nodered-features {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:80px;
}
.nodered-feat {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:32px;
}
.nodered-feat h3 { margin-bottom:10px; }
.nodered-feat p  { font-size:0.9375rem; color:var(--text-2); }

/* ── Page hero (inner pages) ── */
.page-hero {
  padding:calc(var(--nav-h) + 80px) 0 80px;
  background:var(--bg-1);
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.page-hero::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(124,58,237,0.1) 0%, transparent 60%);
  pointer-events:none;
}
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { margin-top:12px; margin-bottom:20px; }
.page-hero .lead { max-width:600px; }

/* ── Social / Follow strip ── */
.social-strip {
  background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.social-strip-inner {
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
}
.social-link-card {
  display:flex; align-items:center; gap:14px; padding:28px 24px;
  color:var(--text-2); background:var(--bg-2);
  transition:all var(--t) var(--ease);
  border-right:1px solid var(--border);
}
.social-link-card:last-child { border-right:none; }
.social-link-card:hover { background:var(--bg-3); color:var(--text); }
.social-link-card-name { flex:1; font-size:0.9375rem; font-weight:500; }
.social-link-arrow { opacity:0.3; transition:opacity var(--t), transform var(--t) var(--ease); }
.social-link-card:hover .social-link-arrow { opacity:1; transform:translateX(4px); }

/* ── Rita showcase ── */
.rita-hero {
  min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--nav-h) + 60px) 0 80px;
  background:var(--bg); position:relative; overflow:hidden;
}
.rita-hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(59,130,246,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 40%, rgba(124,58,237,0.12) 0%, transparent 55%),
    var(--bg);
}
.rita-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.rita-img-frame {
  border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 40px 120px rgba(0,0,0,0.6), 0 0 80px rgba(124,58,237,0.1);
  position:relative;
}
.rita-img-frame img { width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--bg-3); }
.rita-spec-list { list-style:none; display:flex; flex-direction:column; gap:0; margin-top:32px; }
.rita-spec { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--border); }
.rita-spec:last-child { border-bottom:none; }
.rita-spec-key { font-size:0.8125rem; color:var(--text-3); }
.rita-spec-val { font-size:0.8125rem; font-weight:600; color:var(--text); }

/* ── Footer ── */
.site-footer { background:var(--bg-1); border-top:1px solid var(--border); }
.footer-top { padding:72px 0 56px; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:48px;
}
.footer-brand { max-width:280px; }
.footer-brand-logo {
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.footer-brand-logo-mark {
  width:28px; height:28px; background:var(--grad-violet);
  border-radius:7px; display:flex; align-items:center; justify-content:center;
}
.footer-brand-name { font-size:0.9375rem; font-weight:600; }
.footer-brand p { font-size:0.875rem; color:var(--text-3); line-height:1.7; margin-bottom:20px; }
.footer-brand-social { display:flex; gap:8px; }
.footer-brand-social a {
  width:32px; height:32px; border-radius:7px;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3); transition:all var(--t);
}
.footer-brand-social a:hover { background:var(--surface-2); color:var(--text-2); border-color:var(--border-2); }

.footer-col h4 {
  font-size:0.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--text-3); margin-bottom:16px;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a { font-size:0.875rem; color:var(--text-3); transition:color var(--t); }
.footer-col ul li a:hover { color:var(--text-2); }

.footer-bottom {
  padding:20px 0; border-top:1px solid var(--border);
}
.footer-bottom-inner {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.footer-bottom-inner p { font-size:0.75rem; color:var(--text-3); }
.footer-legal { display:flex; gap:20px; }
.footer-legal a { font-size:0.75rem; color:var(--text-3); transition:color var(--t); }
.footer-legal a:hover { color:var(--text-2); }

/* ── Animations / fade-in ── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* ── Code / terminal block ── */
.code-block {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px;
  font-family:var(--font-mono); font-size:0.8125rem;
  color:var(--text-2); line-height:1.7; overflow-x:auto;
}
.code-block .kw  { color:#c678dd; }
.code-block .str { color:#98c379; }
.code-block .num { color:#d19a66; }
.code-block .cmt { color:#5c6370; font-style:italic; }
.code-block .fn  { color:#61afef; }

/* ── Responsive ── */
@media (max-width:1100px) {
  .footer-grid { grid-template-columns:1fr 1fr 1fr; }
  .footer-brand { grid-column:1/-1; max-width:100%; }
  .footer-brand p { max-width:400px; }
}

@media (max-width:900px) {
  .feature-grid, .usecase-grid, .nodered-features { grid-template-columns:1fr 1fr; }
  .bento-2 { grid-template-columns:1fr; }
  .bento-cell-wide { grid-column:span 1; }
  .stats-bar-grid { grid-template-columns:1fr 1fr; }
  .stat-cell:nth-child(2) { border-right:none; }
  .stat-cell:nth-child(3) { border-top:1px solid var(--border); }
  .stat-cell:nth-child(4) { border-top:1px solid var(--border); border-right:none; }
  .rita-grid { grid-template-columns:1fr; gap:48px; }
  .social-strip-inner { grid-template-columns:1fr 1fr; }
  .social-link-card:nth-child(2) { border-right:none; }
  .social-link-card:nth-child(3) { border-top:1px solid var(--border); }
  .social-link-card:nth-child(4) { border-top:1px solid var(--border); border-right:none; }
}

@media (max-width:768px) {
  :root { --nav-h:56px; }
  .section { padding:80px 0; }
  .section-sm { padding:56px 0; }
  .nav-links, .nav-end { display:none; }
  .nav-hamburger { display:flex; margin-left:auto; }
  .feature-grid, .usecase-grid, .nodered-features { grid-template-columns:1fr; }
  .stats-bar-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
  .social-strip-inner { grid-template-columns:1fr; }
  .social-link-card { border-right:none; border-bottom:1px solid var(--border); }
  .social-link-card:last-child { border-bottom:none; }
}

@media (max-width:480px) {
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn { text-align:center; justify-content:center; }
  .footer-grid { grid-template-columns:1fr; }
  .stats-bar-grid { grid-template-columns:1fr 1fr; }
  .product-grid { grid-template-columns:1fr 1fr; }
  .waitlist-form { flex-direction:column; }
  .waitlist-input { min-width:0; width:100%; }
}

/* ── Utilities ── */
.text-center { text-align:center; }
.mt-auto { margin-top:auto; }
.w-full { width:100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.hidden { display:none; }

/* ── Hero logo video ── */
.hero-logo-video-wrap {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 40px;
  opacity: 0;
  transition: opacity 0.5s ease;
  /* Glassmorphism card */
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 28px;
  padding: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.hero-logo-video-wrap.ready {
  opacity: 1;
}
.hero-logo-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

@media (max-width: 600px) {
  .hero-logo-video-wrap {
    max-width: 88vw;
    margin-bottom: 28px;
    padding: 14px;
    border-radius: 20px;
  }
}

/* ── Tutorial chapters ── */
.tutorial-chapter {
  margin-bottom: 72px;
}
.tutorial-chapter-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.tutorial-chapter-header h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  margin: 0;
}
.tutorial-chapter-count {
  font-size: 0.8125rem;
  color: var(--text-3);
  margin-left: auto;
}
.tutorial-thumb {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tutorial-thumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .tutorial-chapter-count { margin-left: 0; }
}