/* ================================================================
   Blockly — Global Stylesheet
   Fonts: Outfit (headings) · Inter (body) — loaded per-page
   ================================================================ */

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
button { font-family: inherit; }

/* ── Design Tokens — Light ────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:           #F8FAFC;
  --bg-alt:       #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #F1F5F9;
  --surface-3:    #E2E8F0;

  /* Text */
  --text:         #0F172A;
  --text-2:       #475569;
  --text-3:       #94A3B8;

  /* Borders */
  --border:       #E2E8F0;
  --border-2:     #CBD5E1;

  /* Brand blue (Blockly Platform) */
  --blue:         #2563EB;
  --blue-dark:    #1D4ED8;
  --blue-light:   #DBEAFE;
  --blue-glow:    rgba(37,99,235,0.18);

  /* Product colors */
  --cyan:         #0284C7;
  --cyan-dark:    #0369A1;
  --cyan-light:   #E0F2FE;

  --green:        #059669;
  --green-dark:   #047857;
  --green-light:  #D1FAE5;

  --violet:       #7C3AED;
  --violet-dark:  #6D28D9;
  --violet-light: #EDE9FE;

  --purple:       #9333EA;
  --purple-dark:  #7E22CE;
  --purple-light: #F3E8FF;

  --slate:        #475569;
  --slate-dark:   #334155;

  /* Semantic */
  --success:      #10B981;
  --warning:      #F59E0B;
  --error:        #EF4444;

  /* Layout */
  --nav-h:        64px;
  --max-w:        1160px;
  --pad-x:        24px;
  --section-y:    96px;

  /* Radius */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.07), 0 2px 6px rgba(15,23,42,0.04);
  --shadow-lg: 0 16px 48px rgba(15,23,42,0.1);
  --shadow-xl: 0 28px 64px rgba(15,23,42,0.13);

  /* Motion */
  --ease:   cubic-bezier(0.4,0,0.2,1);
  --spring: cubic-bezier(0.34,1.56,0.64,1);
  --fast:   0.18s;
  --base:   0.24s;
  --slow:   0.4s;
}

/* ── Dark Mode Tokens ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #060D1A;
  --bg-alt:    #0B1326;
  --surface:   #101C34;
  --surface-2: #162240;
  --surface-3: #1E2D4E;

  --text:      #F1F5F9;
  --text-2:    #94A3B8;
  --text-3:    #475569;

  --border:    #1E2D4E;
  --border-2:  #263554;

  --blue-light:   rgba(37,99,235,0.15);
  --cyan-light:   rgba(2,132,199,0.12);
  --green-light:  rgba(5,150,105,0.12);
  --violet-light: rgba(124,58,237,0.14);
  --purple-light: rgba(147,51,234,0.12);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.4);
  --shadow-xl: 0 28px 64px rgba(0,0,0,0.5);
}

/* Smooth transitions when theme changes */
body,
.nav,
.product-card,
.feature-box,
.team-card,
.contact-card,
.form-card {
  transition:
    background-color var(--slow) var(--ease),
    border-color var(--slow) var(--ease),
    color var(--slow) var(--ease);
}

/* ── Base ─────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 28%),
    radial-gradient(circle at 100% 8%, color-mix(in srgb, var(--violet) 6%, transparent), transparent 24%),
    var(--bg);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Outfit', system-ui, sans-serif;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}

p { color: var(--text-2); line-height: 1.72; }

.page-body { padding-top: var(--nav-h); }

/* ── Layout ───────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.section { padding: var(--section-y) 0; }
.section-sm { padding: 56px 0; }

/* Section header block */
.sh {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
}
.sh h2 { font-size: clamp(26px,4vw,38px); font-weight: 700; margin-bottom: 12px; }
.sh p  { font-size: 17px; }
.sh::after {
  content: '';
  display: block;
  width: 84px;
  height: 3px;
  margin: 24px auto 0;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 55%, var(--cyan)), color-mix(in srgb, var(--blue) 70%, var(--violet)));
  opacity: 0.8;
}

/* ── Pill / Badge ─────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--blue-light);
  color: var(--blue);
  margin-bottom: 16px;
}
.pill-cyan   { background: var(--cyan-light);   color: var(--cyan); }
.pill-green  { background: var(--green-light);  color: var(--green); }
.pill-violet { background: var(--violet-light); color: var(--violet); }
.pill-purple { background: var(--purple-light); color: var(--purple); }
.pill-slate  { background: rgba(71,85,105,0.1); color: var(--slate); }
.pill-white  { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.18); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--fast) var(--ease),
    color var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    transform var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 8px var(--blue-glow);
}
.btn-primary:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 5px 18px var(--blue-glow);
}

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border-2);
}
.btn-outline:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
}
.btn-ghost:hover {
  color: var(--blue);
  background: var(--blue-light);
}

/* Size variants */
.btn-lg   { padding: 12px 26px; font-size: 15px; border-radius: var(--r-lg); }
.btn-sm   { padding: 6px 14px;  font-size: 13px; border-radius: var(--r-sm); }
.btn-full { width: 100%; }

/* On dark backgrounds */
.btn-white {
  background: #fff;
  color: var(--blue-dark);
  font-weight: 600;
  box-shadow: 0 3px 16px rgba(0,0,0,0.14);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(0,0,0,0.18); }

.btn-ghost-white {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.2);
}
.btn-ghost-white:hover {
  color: #fff;
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.4);
}

/* Product-colored buttons */
.btn-cyan   { background: var(--cyan);   color: #fff; box-shadow: 0 2px 8px rgba(2,132,199,0.25); }
.btn-cyan:hover   { background: var(--cyan-dark);   transform: translateY(-1px); }
.btn-green  { background: var(--green);  color: #fff; box-shadow: 0 2px 8px rgba(5,150,105,0.25); }
.btn-green:hover  { background: var(--green-dark);  transform: translateY(-1px); }
.btn-violet { background: var(--violet); color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,0.25); }
.btn-violet:hover { background: var(--violet-dark); transform: translateY(-1px); }

/* ── Shadcn-style primitives ──────────────────────────────────── */
.ui-card {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: calc(var(--r-xl) + 2px);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 12px 32px rgba(15,23,42,0.05);
}
.ui-card:hover {
  border-color: color-mix(in srgb, var(--border-2) 80%, var(--blue));
  box-shadow: 0 2px 4px rgba(15,23,42,0.04), 0 16px 40px rgba(37,99,235,0.08);
}
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ui-badge--blue {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--border));
  background: color-mix(in srgb, var(--blue-light) 50%, var(--surface));
  color: var(--blue-dark);
}
.ui-badge--slate {
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}
.ui-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border) 80%, var(--blue)), transparent);
}
.ui-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 0 8px;
  height: 24px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: 'Courier New', monospace;
  font-size: 12px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.4);
}
.ui-focus {
  outline: none;
  transition: box-shadow var(--fast), border-color var(--fast), transform var(--fast);
}
.ui-focus:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 60%, var(--border));
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

.ui-tabs {
  display: grid;
  gap: 14px;
}
.ui-tablist {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: calc(var(--r-xl) - 2px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-sm);
  width: fit-content;
  flex-wrap: wrap;
}
.ui-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-2);
  border-radius: var(--r-md);
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fast), color var(--fast), box-shadow var(--fast);
}
.ui-tab:hover { color: var(--text); background: var(--surface-2); }
.ui-tab[aria-selected="true"] {
  background: #fff;
  color: var(--blue-dark);
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
[data-theme="dark"] .ui-tab[aria-selected="true"] {
  background: var(--surface-3);
  color: #fff;
}
.ui-tabpanels {
  position: relative;
}
.ui-tabpanel[hidden] { display: none !important; }
.ui-tabpanel {
  animation: tabFade 160ms var(--ease);
}
@keyframes tabFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.ui-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1200;
}
.ui-dialog-backdrop[open] { display: flex; }
.ui-dialog {
  width: min(680px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--r-xl) + 4px);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.ui-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.ui-dialog-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.ui-dialog-close {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
}
.ui-dialog-close:hover { color: var(--text); background: var(--surface-3); }
.ui-dialog-body { padding: 20px; }

/* ── Navigation ───────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  transition:
    background var(--base) var(--ease),
    border-color var(--base) var(--ease),
    box-shadow var(--base) var(--ease);
}
.nav.scrolled {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-tabs-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.nav-workspace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--border));
  background: color-mix(in srgb, var(--blue-light) 45%, var(--surface));
  color: var(--blue-dark);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Brand */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  transition: opacity var(--fast);
}
.nav-brand:hover { opacity: 0.8; }
.nav-brand-icon  { width: 28px; height: 28px; border-radius: 8px; }
.nav-brand-name  {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
}

/* Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  transition: color var(--fast), background var(--fast), box-shadow var(--fast);
}
.nav-link:hover,
.nav-link.active {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue-light) 70%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--blue) 40%, transparent);
}

/* Right side actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Theme toggle */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all var(--fast) var(--ease);
}
.theme-toggle:hover { color: var(--blue); border-color: var(--blue); }

.theme-switching,
.theme-switching * {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, fill 180ms ease !important;
}

.oss-status {
  background: rgba(255,255,255,0.07);
  border-color: rgba(196,181,253,0.25);
  color: rgba(196,181,253,0.9);
}
.oss-status-dot {
  background: #C4B5FD;
  box-shadow: 0 0 0 3px rgba(196,181,253,0.15);
}
.oss-hero-h1 { color: #fff; }
.oss-hero-accent {
  background: linear-gradient(135deg,#C4B5FD,#7C3AED);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.oss-hero-p { color: rgba(255,255,255,0.58); }
.oss-accent {
  justify-content: center;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  margin-top: 14px;
}
.oss-code-body { color: rgba(255,255,255,0.78); }
.oss-code-ln { color: rgba(255,255,255,0.35); }

.sun-icon  { display: none; }
.moon-icon { display: block; }
[data-theme="dark"] .sun-icon  { display: block; }
[data-theme="dark"] .moon-icon { display: none;  }

/* Mobile hamburger */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--fast) var(--ease), opacity var(--fast);
}
.mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  display: none;
  position: absolute;
  top: var(--nav-h);
  inset-inline: 0;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  box-shadow: var(--shadow-md);
}
.nav-drawer ul { display: flex; flex-direction: column; gap: 4px; }
.nav-drawer .nav-link { display: block; padding: 11px 12px; }
.nav-drawer.open { display: block; }

.nav-cta       { display: flex; }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 28%),
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--blue) 7%, transparent), transparent 24%),
    var(--bg);
  padding: 80px 0 100px;
}

/* Subtle grid bg */
.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb,var(--blue) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--blue) 5%, transparent) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 65% 70% at 50% 40%, black, transparent);
}

/* Ambient glow orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: orbDrift 12s ease-in-out infinite;
}
.orb-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle,
    color-mix(in srgb,var(--blue) 20%, transparent),
    transparent 70%);
  top: -100px; right: -80px;
}
.orb-2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle,
    color-mix(in srgb,var(--blue) 14%, transparent),
    transparent 70%);
  bottom: -60px; left: -40px;
  animation-delay: -4s;
  animation-direction: reverse;
}

@keyframes orbDrift {
  0%,100% { transform: translate(0,0); }
  40%     { transform: translate(18px,-22px); }
  70%     { transform: translate(-12px,16px); }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 840px;
  text-wrap: balance;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: center;
}

.hero-visual {
  position: relative;
}

.hero-screen {
  padding: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--bg) 90%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: calc(var(--r-xl) + 4px);
  box-shadow: 0 24px 60px rgba(15,23,42,0.10);
  overflow: hidden;
}

.code-editor {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--bg) 88%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: calc(var(--r-xl) + 4px);
  box-shadow: 0 24px 60px rgba(15,23,42,0.10);
  overflow: hidden;
}
.code-editor-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
}
.code-editor-path {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--text-2);
}
.code-editor-body {
  padding: 18px 18px 16px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-2);
}
.code-editor-lines {
  display: grid;
  gap: 4px;
}
.code-editor-line {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
}
.code-editor-ln {
  color: var(--text-3);
  text-align: right;
  user-select: none;
}
.code-editor-code { white-space: pre-wrap; }
.code-keyword { color: var(--blue-dark); font-weight: 700; }
.code-fn { color: var(--violet-dark); font-weight: 700; }
.code-str { color: var(--green-dark); }
.code-comment { color: var(--text-3); }
.code-accent {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  font-size: 12px;
  color: var(--text-2);
}
.code-accent strong { color: var(--blue-dark); }

.hero-screen-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.hero-screen-title {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.hero-screen-sub {
  font-size: 13px;
  color: var(--text-2);
}

.hero-screen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hero-screen-card {
  padding: 14px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.hero-screen-card h3 {
  font-size: 13px;
  margin-bottom: 6px;
}

.hero-screen-card p {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.hero-screen-bar {
  height: 8px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
  margin-top: 10px;
}

.hero-screen-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 60%, var(--cyan)));
}

.hero-float {
  position: absolute;
  right: -10px;
  bottom: -20px;
  width: 220px;
}

.split-pane {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.split-pane.reverse > :first-child { order: 2; }
.split-pane.reverse > :last-child { order: 1; }

.code-panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--bg) 88%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: calc(var(--r-xl) + 4px);
  box-shadow: 0 20px 44px rgba(15,23,42,0.06);
  overflow: hidden;
}

.code-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.code-panel-title {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--text-2);
}

.code-panel-body {
  padding: 18px 18px 20px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-2);
}

.code-panel-line {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
}

.code-panel-ln {
  color: var(--text-3);
  text-align: right;
  user-select: none;
}

.preview-panel {
  display: grid;
  gap: 14px;
}

.preview-shell {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: calc(var(--r-xl) + 4px);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15,23,42,0.06);
}

/* Status badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb,var(--surface) 80%,transparent);
  border: 1px solid var(--border);
  padding: 5px 14px 5px 8px;
  border-radius: var(--r-full);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(5,150,105,0.2);
  animation: dotPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(5,150,105,0.2); }
  50%     { box-shadow: 0 0 0 6px rgba(5,150,105,0.08); }
}

/* Hero typography */
.hero-h1 {
  font-size: clamp(42px,6.8vw,76px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin-bottom: 22px;
  color: var(--text);
}
.hero-h1 .gradient {
  background: linear-gradient(135deg, var(--blue) 0%, color-mix(in srgb,var(--blue) 55%,var(--blue-dark)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-p {
  font-size: 18.5px;
  line-height: 1.7;
  max-width: 580px;
  color: var(--text-2);
  margin-bottom: 38px;
}

.code-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--border);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.04em;
}
.code-chip::before {
  content: '{}';
  font-family: 'Courier New', monospace;
  color: var(--blue);
  font-size: 11px;
}

.hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-btns .btn-primary {
  box-shadow: 0 10px 24px rgba(37,99,235,0.14);
}
.hero-btns .btn-outline {
  border-color: color-mix(in srgb, var(--border-2) 70%, var(--blue));
}
.hero-btns .btn-outline:hover {
  box-shadow: 0 8px 20px rgba(37,99,235,0.08);
}

/* Stat row */
.stat-row {
  display: flex;
  gap: 0;
  margin-top: 52px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  width: fit-content;
  box-shadow: var(--shadow-sm);
}
.stat-item {
  padding: 16px 28px;
  border-right: 1px solid var(--border);
}
.stat-item:last-child { border-right: none; }
.stat-val {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
}
.stat-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  margin-top: 3px;
}

/* ── Product Cards ────────────────────────────────────────────── */
.cards-grid {
  display: grid;
  gap: 20px;
}
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }

.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}
.product-card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 55%, var(--cyan)));
  opacity: 0.8;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}
.product-card:hover::before { opacity: 1; }
.product-card:hover.card-edu  { border-color: rgba(2,132,199,0.3); }
.product-card:hover.card-sub  { border-color: rgba(5,150,105,0.3); }
.product-card:hover.card-oss  { border-color: rgba(124,58,237,0.3); }

.card-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.card-icon img { width: 100%; height: 100%; object-fit: cover; }

.card-name {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.card-tagline {
  font-size: 13px;
  font-style: italic;
  color: var(--text-3);
  margin-bottom: 14px;
}
.card-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 24px;
  flex: 1;
}

/* Feature bullets */
.feat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}
.feat-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
}
.feat-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

/* Card footer divider */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

/* ── Two-col layout ───────────────────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.two-col.flip > :first-child { order: 2; }
.two-col.flip > :last-child  { order: 1; }

.two-col h2 { font-size: clamp(26px,3.5vw,36px); margin-bottom: 16px; }
.two-col p  { margin-bottom: 20px; }

/* ── Feature boxes (About / Products) ────────────────────────── */
.feat-boxes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.feature-box::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-light), color-mix(in srgb, var(--blue-light) 45%, var(--violet-light)));
  opacity: 0.65;
}
.feature-box:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-sm);
}
.feat-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.feature-box h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--text);
}
.feature-box p  { font-size: 14px; margin: 0; line-height: 1.55; }

/* ── Visual panel (product mockup) ───────────────────────────── */
.visual-panel {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.panel-header img {
  width: 24px; height: 24px;
  border-radius: 6px;
}
.panel-header span {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.panel-body { padding: 18px; }

/* Schedule row */
.sched-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.sched-rows { display: flex; flex-direction: column; gap: 8px; }
.sched-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}
.sched-row.active {
  background: var(--blue-light);
  border-color: rgba(37,99,235,0.25);
}
.sched-row.accent {
  background: var(--cyan-light);
  border-color: rgba(2,132,199,0.25);
}
.sched-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.sched-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}

/* Subscription row */
.sub-rows { display: flex; flex-direction: column; gap: 8px; }
.sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}
.sub-row.warn {
  background: rgba(245,158,11,0.07);
  border-color: rgba(245,158,11,0.3);
}
.sub-name {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.sub-when { font-size: 12px; color: var(--text-3); }
.sub-when.urgent { color: var(--warning); }
.sub-price {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
}

/* Mini stats below panel */
.panel-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.panel-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  text-align: center;
}
.panel-stat-val {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 2px;
}
.panel-stat-lbl { font-size: 12px; color: var(--text-3); }

.terminal-panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}
.terminal-dots { display: flex; gap: 6px; }
.terminal-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-3);
}
.terminal-dots span:first-child { background: var(--error); }
.terminal-dots span:nth-child(2) { background: var(--warning); }
.terminal-dots span:nth-child(3) { background: var(--success); }
.terminal-title {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.terminal-body {
  padding: 18px 20px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
}
.terminal-line { display: block; }
.terminal-line strong { color: var(--blue); font-weight: 700; }

/* ── OSS / Dark band ──────────────────────────────────────────── */
.dark-band {
  background: linear-gradient(145deg, #0B1326 0%, #160D30 55%, #0B1326 100%);
  position: relative;
  overflow: hidden;
}
.dark-band .grid-bg {
  background-image:
    linear-gradient(rgba(124,58,237,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,0.07) 1px, transparent 1px);
}
.dark-band .orb-1 {
  background: radial-gradient(circle, rgba(124,58,237,0.2), transparent 70%);
}
.dark-band .orb-2 {
  background: radial-gradient(circle, rgba(147,51,234,0.14), transparent 70%);
  left: unset; right: -50px; top: 0; bottom: unset;
}

.oss-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-xl);
  padding: 36px;
  position: relative;
  overflow: hidden;
  transition: background var(--base), border-color var(--base), transform var(--base);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.oss-card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, rgba(196,181,253,0.95), rgba(37,99,235,0.95));
  opacity: 0.9;
}
.oss-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(196,181,253,0.24);
  transform: translateY(-4px);
}
.oss-card .card-name { color: #fff; }
.oss-card .card-tagline { color: rgba(196,181,253,0.65); }
.oss-card .card-desc  { color: rgba(255,255,255,0.5); flex: 1; }
.oss-card .feat-list li { color: rgba(255,255,255,0.75); }

.oss-gh-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(196,181,253,0.9);
  padding: 9px 16px;
  border-radius: var(--r-md);
  border: 1px solid rgba(196,181,253,0.18);
  background: rgba(196,181,253,0.06);
  transition: all var(--fast);
  margin-top: auto;
  width: fit-content;
}
.oss-gh-link:hover {
  color: #fff;
  border-color: rgba(196,181,253,0.45);
  background: rgba(196,181,253,0.12);
}

/* ── Info banner ──────────────────────────────────────────────── */
.info-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.info-banner p {
  font-size: 14px;
  color: var(--text);
  margin: 0;
}
.info-banner a { color: var(--violet); text-underline-offset: 3px; text-decoration: underline; }

/* ── Team ─────────────────────────────────────────────────────── */
.group-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 22px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 60px;
}
.team-grid:last-child { margin-bottom: 0; }

.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 22px 22px;
  text-align: center;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  margin: 0 auto 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-letters {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  border-radius: 50%;
}

.member-name {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.member-role {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 10px;
}
.member-bio {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 16px;
}
.social-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  transition: background var(--fast), transform var(--fast);
}
.social-icon:hover {
  background: var(--blue-light);
  transform: scale(1.1);
}
.social-icon img { width: 14px; height: 14px; }

/* ── About ────────────────────────────────────────────────────── */
.value-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.value-card {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--fast), border-color var(--fast);
}
.value-card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 60%, var(--violet)));
  opacity: 0.55;
}
.value-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-2);
}
.value-emoji {
  font-size: 20px;
  width: 38px; height: 38px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.value-card h4 { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.value-card p  { font-size: 14px; margin: 0; line-height: 1.55; }

/* Product mosaic */
.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mosaic-tile {
  border-radius: var(--r-xl);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--slow) var(--spring);
}
.mosaic-tile:hover { transform: scale(1.04) rotate(-0.5deg); }
.mosaic-tile img { width: 40px; height: 40px; border-radius: 10px; }
.mosaic-tile span {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.mt-blue   { background: var(--blue-light);   border: 1px solid color-mix(in srgb,var(--blue) 15%,transparent); }
.mt-blue span   { color: var(--blue); }
.mt-cyan   { background: var(--cyan-light);   border: 1px solid color-mix(in srgb,var(--cyan) 15%,transparent); }
.mt-cyan span   { color: var(--cyan); }
.mt-green  { background: var(--green-light);  border: 1px solid color-mix(in srgb,var(--green) 15%,transparent); }
.mt-green span  { color: var(--green); }
.mt-violet { background: var(--violet-light); border: 1px solid color-mix(in srgb,var(--violet) 15%,transparent); }
.mt-violet span { color: var(--violet); }

/* Blockquote */
blockquote.styled {
  margin-top: 24px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}
blockquote.styled p {
  font-size: 16px;
  font-style: italic;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.65;
}
blockquote.styled cite {
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  color: var(--text-2);
}

/* ── Contact ──────────────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 56px;
  align-items: start;
}
.contact-info { position: sticky; top: calc(var(--nav-h) + 20px); }
.contact-info h2 { margin-bottom: 12px; }

.contact-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--r-lg);
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--fast), transform var(--fast), box-shadow var(--fast);
  cursor: pointer;
}
.contact-method::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 55%, var(--cyan)));
  opacity: 0;
  transition: opacity var(--fast);
}
.contact-method:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-sm);
  transform: translateX(3px);
}
.contact-method:hover::before { opacity: 1; }
.contact-method-ico {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--blue-light);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.contact-method h4 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 1px; }
.contact-method span { font-size: 13px; color: var(--text-2); }

/* Form */
.form-card {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }

label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

input[type="text"],
input[type="email"],
textarea,
select {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 13px;
  width: 100%;
  outline: none;
  transition: border-color var(--fast), box-shadow var(--fast);
  resize: vertical;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
textarea { min-height: 130px; }

.form-success {
  display: none;
  text-align: center;
  padding: 28px;
  color: var(--success);
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
}

/* ── CTA Band ─────────────────────────────────────────────────── */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 55%, #0c1a40 100%);
  text-align: center;
  padding: 100px 0;
}
.cta-band .grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: none;
}
.cta-band h2 {
  font-size: clamp(32px,5.5vw,56px);
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.cta-band p {
  font-size: 18px;
  color: rgba(255,255,255,0.62);
  max-width: 460px;
  margin: 0 auto 40px;
}
.cta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Footer ───────────────────────────────────────────────────── */
.footer { background: #070F1E; padding: 64px 0 0; }
[data-theme="dark"] .footer { background: #03080F; }

.footer-inner {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 52px;
}

.footer-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.footer-logo-name {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.footer-tagline {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.38);
}

.footer-col h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,0.35);
  transition: color var(--fast);
}
.footer-col a:hover { color: rgba(255,255,255,0.8); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 22px 0;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.2); }

.footer-dots { display: flex; gap: 5px; }
.footer-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  opacity: 0.45;
  transition: opacity var(--fast), transform var(--slow) var(--spring);
}
.footer-dots span:hover { opacity: 1; transform: scale(1.5); }

/* ── Tip box ──────────────────────────────────────────────────── */
.tip-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
}
.tip-box p { font-size: 14px; margin: 0; }
.tip-box code {
  font-family: 'Inter', monospace;
  font-size: 13px;
  background: var(--surface-2);
  padding: 1px 7px;
  border-radius: var(--r-xs);
  border: 1px solid var(--border);
}

/* ── Scroll Reveal ────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* ── Helpers ──────────────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-white    { color: #fff; }
.text-white-soft { color: rgba(255,255,255,0.58); }
.text-cyan     { color: var(--cyan); }
.text-green    { color: var(--green); }
.text-violet   { color: var(--violet); }
.text-warning  { color: var(--warning); }
.section-alt   { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-compact { padding-top: 0; }
.content-layer { position: relative; z-index: 1; }
.hero-tight    { padding: 68px 0 80px; min-height: auto; }
.hero-sm       { font-size: clamp(36px,5.5vw,60px); }
.hero-p-sm     { font-size: 17px; }
.hero-orb-muted { background: radial-gradient(circle, rgba(71,85,105,0.15), transparent 70%); }
.hero-orb-sm   { width: 340px; height: 340px; }
.content-lead  { font-size: 17px; font-weight: 500; color: var(--text); line-height: 1.65; margin-bottom: 16px; }
.content-note  { font-size: 17px; font-style: italic; color: var(--text-3); margin-bottom: 18px; }
.content-title { font-size: 22px; margin-bottom: 10px; }
.content-subtle { font-size: 15px; margin-bottom: 24px; }
.request-label { font-size: 13px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.stack-10     { display: flex; flex-direction: column; gap: 10px; }
.stack-12     { display: flex; flex-direction: column; gap: 12px; }
.actions      { display: flex; gap: 12px; flex-wrap: wrap; }
.actions .btn { width: fit-content; }
.card-icon-lg { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 20px; }
.icon-surface { background: var(--surface-2); }
.pill-xs      { font-size: 11px; }
.panel-header-cyan  { background: var(--cyan-dark); }
.panel-header-green { background: var(--green-dark); }
.panel-header-title  { color: #fff; }
.card-mini    { gap: 12px; }
.card-feature  { gap: 20px; padding: 36px; }
.card-feature .card-icon { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 0; }
.card-feature .card-name { margin-bottom: 6px; }
.card-feature .card-desc { margin-bottom: 0; }
.tip-box-spaced { margin-top: 56px; }
.w-fit        { width: fit-content; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.gap-12 { gap: 12px; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .two-col { gap: 44px; }
  .tech-stack-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 16px; }
}

@media (max-width: 768px) {
  :root { --section-y: 68px; --pad-x: 18px; }

  /* Nav */
  .mobile-toggle { display: flex; }
  .nav-links, .nav-cta { display: none; }

  /* Layouts */
  .two-col { grid-template-columns: 1fr; gap: 36px; }
  .two-col.flip > :first-child { order: unset; }
  .two-col.flip > :last-child  { order: unset; }
  .cards-2, .cards-3 { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-info { position: static; }
  .form-row { grid-template-columns: 1fr; }
  .stat-row { width: 100%; }
  .stat-item { flex: 1; }

  /* Hero */
  .hero { padding: 60px 0 80px; }
  .hero-h1 { font-size: clamp(34px,9vw,54px); }
  .hero-p  { font-size: 16px; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn { width: 100%; }

  /* CTA */
  .cta-band  { padding: 72px 0; }
  .cta-btns  { flex-direction: column; align-items: center; }
  .cta-btns .btn { width: 100%; max-width: 280px; }

  /* Tech Stack */
  .tech-stack-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .tech-stack-item { padding: 16px 12px; }
  .tech-stack-item img { width: 36px; height: 36px; }
}

@media (max-width: 480px) {
  :root { --pad-x: 14px; }
}

/* ── Tech Stack Section ───────────────────────────────────────── */
.tech-stack-section {
  position: relative;
  overflow: hidden;
}

.tech-stack-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb,var(--blue) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--blue) 3%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 70%);
  pointer-events: none;
}

.tech-stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
  position: relative;
  z-index: 1;
}

.tech-stack-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: all var(--base) var(--ease);
  position: relative;
  overflow: hidden;
}

.tech-stack-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, color-mix(in srgb, var(--blue) 8%, transparent) 100%);
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}

.tech-stack-item:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--blue) 30%, var(--border));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--blue) 10%, transparent);
}

.tech-stack-item:hover::before {
  opacity: 1;
}

.tech-stack-item img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  transition: transform var(--base) var(--ease);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
}

.tech-stack-item:hover img {
  transform: scale(1.1);
}

.tech-stack-item span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  font-family: 'Inter', sans-serif;
  position: relative;
  z-index: 1;
}

/* Tech logos - auto invert in dark mode for light variants */
.tech-logo {
  transition: filter var(--fast) var(--ease);
}

[data-theme="dark"] .tech-logo[src*="_light"] {
  filter: invert(1) brightness(1.2);
}

/* ── Enhanced Code Panels ─────────────────────────────────────── */
.code-panel-glow {
  position: relative;
}

.code-panel-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--r-xl) + 5px);
  padding: 1px;
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--blue) 40%, transparent),
    color-mix(in srgb, var(--violet) 20%, transparent),
    color-mix(in srgb, var(--cyan) 30%, transparent)
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  pointer-events: none;
}

.code-panel-body .code-keyword { color: #2563EB; font-weight: 700; }
.code-panel-body .code-fn { color: #7C3AED; font-weight: 700; }
.code-panel-body .code-str { color: #059669; }
.code-panel-body .code-comment { color: #94A3B8; font-style: italic; }

[data-theme="dark"] .code-panel-body .code-keyword { color: #93C5FD; }
[data-theme="dark"] .code-panel-body .code-fn { color: #C4B5FD; }
[data-theme="dark"] .code-panel-body .code-str { color: #6EE7B7; }
[data-theme="dark"] .code-panel-body .code-comment { color: #64748B; }

/* ── Terminal Effects ────────────────────────────────────────── */
.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: var(--green);
  margin-left: 4px;
  animation: cursorBlink 1s step-end infinite;
  vertical-align: middle;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.terminal-line {
  position: relative;
  padding-left: 16px;
}

.terminal-line::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* ── Animated Grid Background ───────────────────────────────── */
.animated-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.animated-grid::before {
  content: '';
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(color-mix(in srgb,var(--blue) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--blue) 6%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridMove 20s linear infinite;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
}

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

/* ── Glow Effects ────────────────────────────────────────────── */
.glow-blue {
  box-shadow: 
    0 0 20px color-mix(in srgb, var(--blue) 15%, transparent),
    0 0 40px color-mix(in srgb, var(--blue) 8%, transparent),
    0 0 60px color-mix(in srgb, var(--blue) 4%, transparent);
}

.glow-cyan {
  box-shadow: 
    0 0 20px color-mix(in srgb, var(--cyan) 15%, transparent),
    0 0 40px color-mix(in srgb, var(--cyan) 8%, transparent);
}

.glow-green {
  box-shadow: 
    0 0 20px color-mix(in srgb, var(--green) 15%, transparent),
    0 0 40px color-mix(in srgb, var(--green) 8%, transparent);
}

.glow-violet {
  box-shadow: 
    0 0 20px color-mix(in srgb, var(--violet) 15%, transparent),
    0 0 40px color-mix(in srgb, var(--violet) 8%, transparent);
}

/* ── Floating Animation ───────────────────────────────────────── */
.float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.float-delayed {
  animation-delay: -3s;
}

/* ── Pulse Ring Effect ───────────────────────────────────────── */
.pulse-ring {
  position: relative;
}

.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  animation: pulseRing 2s ease-out infinite;
  pointer-events: none;
}

@keyframes pulseRing {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.1); opacity: 0; }
}

/* ── Status Badge Variants ───────────────────────────────────── */
.status-badge-tech {
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--surface) 90%, transparent),
    color-mix(in srgb, var(--blue) 5%, transparent)
  );
  border-color: color-mix(in srgb, var(--blue) 20%, var(--border));
}

.status-badge-tech .status-dot {
  background: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent);
  animation: dotPulseBlue 2.4s ease-in-out infinite;
}

@keyframes dotPulseBlue {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 10%, transparent); }
}

/* ── Enhanced Reveal Animations ───────────────────────────────── */
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Code Syntax Highlighting Enhancement ───────────────────── */
.syntax-keyword { color: #C792EA; font-weight: 700; }
.syntax-string { color: #C3E88D; }
.syntax-function { color: #82AAFF; font-weight: 700; }
.syntax-comment { color: #676E95; font-style: italic; }
.syntax-number { color: #F78C6C; }
.syntax-operator { color: #89DDFF; }

[data-theme="dark"] .syntax-keyword { color: #C792EA; }
[data-theme="dark"] .syntax-string { color: #C3E88D; }
[data-theme="dark"] .syntax-function { color: #82AAFF; }
[data-theme="dark"] .syntax-comment { color: #676E95; }
[data-theme="dark"] .syntax-number { color: #F78C6C; }
[data-theme="dark"] .syntax-operator { color: #89DDFF; }

/* ── Product Color Glows ─────────────────────────────────────── */
.card-edu:hover {
  box-shadow: 
    0 16px 48px rgba(2, 132, 199, 0.15),
    0 0 0 1px rgba(2, 132, 199, 0.2);
}

.card-sub:hover {
  box-shadow: 
    0 16px 48px rgba(5, 150, 105, 0.15),
    0 0 0 1px rgba(5, 150, 105, 0.2);
}

.card-oss:hover {
  box-shadow: 
    0 16px 48px rgba(124, 58, 237, 0.15),
    0 0 0 1px rgba(124, 58, 237, 0.2);
}

/* ── Social Icons with SVGL ──────────────────────────────────── */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: all var(--fast) var(--ease);
  overflow: hidden;
}

.social-icon:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
  background: var(--surface);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--blue) 15%, transparent);
}

.social-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: grayscale(30%);
  transition: filter var(--fast);
}

.social-icon:hover img {
  filter: grayscale(0%);
}

/* Social icons - auto invert in dark mode for light variants */
.social-icon-img[src*="_light"] {
  filter: grayscale(30%);
}

[data-theme="dark"] .social-icon-img[src*="_light"] {
  filter: invert(1) brightness(1.2) grayscale(0%);
}

[data-theme="dark"] .social-icon:hover .social-icon-img[src*="_light"] {
  filter: invert(1) brightness(1.5) grayscale(0%);
}

/* ── Enhanced Hero Code Editor ───────────────────────────────── */
.code-editor-enhanced {
  position: relative;
  background: linear-gradient(180deg, 
    color-mix(in srgb, var(--surface) 96%, transparent), 
    color-mix(in srgb, var(--bg) 92%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: calc(var(--r-xl) + 4px);
  box-shadow: 
    0 24px 60px rgba(15,23,42,0.08),
    0 0 0 1px color-mix(in srgb, var(--blue) 5%, transparent);
  overflow: hidden;
}

.code-editor-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent,
    color-mix(in srgb, var(--blue) 30%, transparent),
    transparent
  );
}

/* ── Scan Line Effect ─────────────────────────────────────────── */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent,
    color-mix(in srgb, var(--blue) 40%, transparent),
    color-mix(in srgb, var(--cyan) 60%, transparent),
    transparent
  );
  animation: scanLine 4s linear infinite;
  pointer-events: none;
  opacity: 0.6;
}

@keyframes scanLine {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(300px); opacity: 0; }
}

/* ── Data Flow Animation ─────────────────────────────────────── */
.data-flow {
  position: relative;
  overflow: hidden;
}

.data-flow::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent,
    color-mix(in srgb, var(--blue) 8%, transparent),
    transparent
  );
  animation: dataFlow 3s ease-in-out infinite;
}

@keyframes dataFlow {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* ── Tech Badge ───────────────────────────────────────────────── */
.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.02em;
}

.tech-badge::before {
  content: '◆';
  color: var(--blue);
  font-size: 8px;
}

/* ── Shadcn/UI Inspired Components ───────────────────────────── */

/* Card variants */
.card-shadcn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  transition: all var(--base) var(--ease);
  position: relative;
  overflow: hidden;
}

.card-shadcn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--border) 80%, transparent),
    color-mix(in srgb, var(--blue) 15%, transparent)
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--base) var(--ease);
}

.card-shadcn:hover::before {
  opacity: 1;
}

.card-shadcn:hover {
  box-shadow: 0 4px 20px color-mix(in srgb, var(--blue) 8%, transparent);
  transform: translateY(-2px);
}

.card-shadcn-ghost {
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  transition: all var(--base) var(--ease);
}

.card-shadcn-ghost:hover {
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  border-style: solid;
}

/* Button variants */
.btn-shadcn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--fast) var(--ease);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.btn-shadcn:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.btn-shadcn-primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.btn-shadcn-primary:hover {
  background: var(--text-2);
  border-color: var(--text-2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.btn-shadcn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}

.btn-shadcn-ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* Separator */
.separator {
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--border), 
    transparent
  );
  margin: 32px 0;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, 
    var(--surface-2) 25%, 
    color-mix(in srgb, var(--surface-2) 80%, var(--surface-3)) 50%, 
    var(--surface-2) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Accordion/FAQ styles */
.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--fast);
}

.faq-question:hover {
  color: var(--blue);
}

.faq-question::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  color: var(--text-3);
  transition: transform var(--fast);
}

.faq-item.open .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--base) var(--ease), padding var(--base);
}

.faq-item.open .faq-answer {
  max-height: 500px;
  padding-bottom: 20px;
}

.faq-answer p {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.7;
}

/* Changelog/Timeline */
.changelog-item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.changelog-date {
  flex-shrink: 0;
  width: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  font-family: 'Courier New', monospace;
}

.changelog-content h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.changelog-content p {
  font-size: 14px;
  color: var(--text-2);
  margin: 0;
}

.changelog-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-left: 8px;
}

.changelog-badge.new {
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green);
}

.changelog-badge.fix {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
}

.changelog-badge.update {
  background: color-mix(in srgb, var(--blue) 15%, transparent);
  color: var(--blue);
}

/* Newsletter form */
.newsletter-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.newsletter-input {
  flex: 1;
  min-width: 240px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  transition: border-color var(--fast), box-shadow var(--fast);
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}

.newsletter-input::placeholder {
  color: var(--text-3);
}

/* Toast/Notification */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
  animation: toast-in 0.3s var(--ease);
}

.toast.success {
  border-left: 3px solid var(--success);
}

.toast.error {
  border-left: 3px solid var(--error);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}