:root {
  --bg: #0a101a;
  --bg-deep: #080e15;
  --panel: #171d25;
  --panel-2: #111821;
  --panel-3: #0d141d;
  --text: #f7f3f0;
  --muted: #a7a9b1;
  --muted-2: #747984;
  --accent: #ff7b32;
  --accent-soft: #f57630;
  --accent-red: #c94334;
  --teal: #47d6c5;
  --amber: #d29a54;
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.14);
  --shadow: 0 28px 80px rgba(0,0,0,.38);
  --radius: 22px;
  --radius-sm: 14px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(900px 460px at 65% 0%, rgba(132,36,33,.24), transparent 65%),
    radial-gradient(720px 480px at 15% 38%, rgba(20,51,72,.15), transparent 70%),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.01) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, black, transparent 60%);
  opacity: .28;
  z-index: -1;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { max-width: 100%; display: block; }

.container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, backdrop-filter .2s ease;
}
.site-header.scrolled {
  background: rgba(8,14,21,.72);
  border-color: var(--border);
  backdrop-filter: blur(18px);
}
.nav {
  height: 76px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 28px;
}
.nav-simple { grid-template-columns: 1fr auto; }
.brand { display:flex; align-items:center; gap:12px; min-width: 132px; }
.brand img { width: 130px; height: auto; }
.nav-links {
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d8d9dd;
  font-size:14px;
  white-space:nowrap;
}
.nav-links a {
  display:inline-flex;
  align-items:center;
  padding:10px 15px;
  border-radius:10px;
  transition: color .18s ease, background .18s ease;
}
.nav-links a + a { margin-left: 4px; }
.nav-links a:hover { color:#fff; background:rgba(255,255,255,.035); }
.nav-actions { display:flex; align-items:center; gap:12px; margin-left:8px; white-space:nowrap; }

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height: 46px;
  padding: 0 19px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color:#fff;
  font-weight: 650;
  font-size: 14px;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.button:hover { transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: var(--border-strong); }
.button.primary {
  background: linear-gradient(135deg, #ff7b32, #e65032);
  border-color: rgba(255,139,75,.45);
  box-shadow: 0 12px 34px rgba(234,82,47,.22);
}
.button.primary:hover { box-shadow: 0 16px 42px rgba(234,82,47,.33); }
.button.ghost { background: rgba(255,255,255,.035); }
.button[aria-disabled="true"] { opacity:.58; cursor:not-allowed; transform:none; }
.button svg { width:17px; height:17px; }

.mobile-toggle { display:none; width:44px; height:44px; padding:0; }

.hero {
  min-height: 900px;
  padding: 156px 0 110px;
  display:flex;
  align-items:center;
  position: relative;
}
.hero::after {
  content:"";
  position:absolute;
  width:540px;
  height:540px;
  top:120px;
  right:-160px;
  border-radius:50%;
  background: rgba(147,34,35,.17);
  filter: blur(80px);
  pointer-events:none;
}
.hero-grid {
  display:grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 64px;
  align-items:center;
}
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#f4b08b;
  border:1px solid rgba(255,123,50,.18);
  background:rgba(255,123,50,.07);
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:20px;
}
.eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent); }
.hero h1 {
  margin:0;
  font-size: clamp(58px, 6.7vw, 104px);
  line-height:.92;
  letter-spacing:-.065em;
  max-width: 700px;
}
.hero h1 span {
  background: linear-gradient(115deg, #fff 12%, #ffcfb4 48%, #ff7b32 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-copy {
  margin:26px 0 0;
  color:#b7b8be;
  max-width: 610px;
  font-size:18px;
  line-height:1.72;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero-note { margin-top:15px; color:var(--muted-2); font-size:12.5px; }

.app-stage { position:relative; perspective: 1600px; }
.app-stage::before {
  content:"";
  position:absolute;
  inset: 7% 0 3% 8%;
  background: radial-gradient(circle at 70% 25%, rgba(226,61,48,.55), transparent 38%), radial-gradient(circle at 30% 82%, rgba(255,123,50,.22), transparent 34%);
  filter: blur(48px);
  opacity:.65;
}
.app-window {
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  background:#0b1018;
  box-shadow: 0 45px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02) inset;
  transform: rotateY(-4deg) rotateX(1.3deg);
  transform-origin: center;
  transition: transform .18s ease-out;
}
.app-window img { width:100%; }
.window-bar {
  height:34px;
  position:absolute;
  top:0; left:0; right:0;
  background:linear-gradient(to bottom, rgba(5,8,12,.65), transparent);
  pointer-events:none;
}
.app-badge {
  position:absolute;
  right:-16px;
  bottom:28px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(17,24,33,.86);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow);
  font-size:13px;
}
.app-badge strong { display:block; margin-top:2px; }
.badge-status { display:flex; align-items:center; gap:7px; color:var(--muted); }
.badge-status::before { content:""; width:7px; height:7px; border-radius:50%; background:#50d8bd; box-shadow:0 0 12px rgba(80,216,189,.6); }

.trust-strip {
  padding: 0 0 96px;
}
.trust-inner {
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:22px 0;
  display:flex;
  justify-content:center;
  gap:64px;
  flex-wrap:wrap;
  color:#8f949e;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:11px;
  font-weight:700;
}

.section { padding: 112px 0; position:relative; }
.section-header { max-width:760px; margin-bottom: 50px; }
.kicker { color:#f7a374; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px; }
.section h2 { margin:0; font-size:clamp(40px,4.5vw,68px); line-height:1.02; letter-spacing:-.052em; }
.section-lead { margin:18px 0 0; color:var(--muted); font-size:17px; line-height:1.7; max-width:660px; }

.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tool-card {
  position:relative;
  min-height: 440px;
  overflow:hidden;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(23,29,37,.98), rgba(15,22,31,.98));
  border:1px solid var(--border);
  box-shadow:0 20px 55px rgba(0,0,0,.18);
  transition:transform .2s ease, border-color .2s ease;
}
.tool-card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.15); }
.tool-art { height:235px; position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06); }
.tool-card.chat .tool-art { background:radial-gradient(circle at 72% 28%, rgba(200,62,48,.38), transparent 34%), linear-gradient(140deg,#131923,#24151a); }
.tool-card.voice .tool-art { background:radial-gradient(circle at 68% 35%, rgba(55,197,182,.28), transparent 35%), linear-gradient(140deg,#111a22,#11211f); }
.tool-card.images .tool-art { background:radial-gradient(circle at 70% 34%, rgba(202,135,73,.32), transparent 38%), linear-gradient(140deg,#171b22,#261b15); }
.tool-body { padding:24px; }
.tool-body h3 { margin:0; font-size:24px; letter-spacing:-.025em; }
.tool-body p { margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }
.tool-meta { display:flex; align-items:center; justify-content:space-between; margin-top:22px; color:#c5c8ce; font-size:12px; }
.tool-status { display:flex; align-items:center; gap:7px; }
.tool-status::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }

.chat-visual { position:absolute; inset:25px; }
.chat-node { position:absolute; border:1px solid rgba(255,255,255,.08); background:rgba(9,13,20,.7); padding:12px 14px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,.2); width:58%; font-size:11px; color:#aeb2b9; }
.chat-node strong { color:#fff; display:block; margin-bottom:3px; font-size:10px; }
.chat-node.one { top:20px; left:0; }
.chat-node.two { top:88px; right:0; width:52%; }
.chat-node.ai { bottom:8px; left:14%; width:72%; background:linear-gradient(110deg,rgba(172,55,42,.88),rgba(86,28,35,.88)); }
.chat-node.ai strong { color:#ffd9c5; }
.chat-line { position:absolute; height:1px; background:linear-gradient(90deg,transparent,rgba(255,123,50,.5),transparent); transform-origin:left; }
.chat-line.a { width:170px; top:89px; left:34%; transform:rotate(13deg); }
.chat-line.b { width:140px; top:145px; left:42%; transform:rotate(-9deg); }

.wave { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:5px; }
.wave i { display:block; width:4px; border-radius:10px; background:linear-gradient(#60eed9,#278e88); box-shadow:0 0 13px rgba(71,214,197,.25); animation:wave 1.5s ease-in-out infinite; }
.wave i:nth-child(2n){ animation-delay:.13s; } .wave i:nth-child(3n){ animation-delay:.26s; }
@keyframes wave { 0%,100%{height:34px; opacity:.65} 50%{height:92px; opacity:1} }
.voice-command { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:10px 13px; border:1px solid rgba(255,255,255,.1); border-radius:11px; background:rgba(9,16,22,.78); backdrop-filter:blur(10px); color:#e8fffb; font-size:11px; box-shadow:0 10px 28px rgba(0,0,0,.24); }
.voice-chip { position:absolute; bottom:28px; right:24px; color:#65e5d0; font-size:10px; border:1px solid rgba(71,214,197,.2); padding:7px 10px; border-radius:999px; background:rgba(12,42,38,.55); }

.frames { position:absolute; inset:0; }
.frame { position:absolute; width:155px; height:100px; border-radius:12px; border:1px solid rgba(255,255,255,.13); background:linear-gradient(145deg,rgba(208,143,77,.22),rgba(255,255,255,.035)); box-shadow:0 18px 35px rgba(0,0,0,.22); }
.frame.a { left:42px; top:42px; transform:rotate(-7deg); }
.frame.b { left:104px; top:82px; transform:rotate(4deg); }
.frame.c { right:34px; top:55px; transform:rotate(9deg); background:linear-gradient(145deg,rgba(235,157,78,.35),rgba(255,255,255,.045)); }
.reticle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:82px; height:56px; border:1px solid rgba(255,200,145,.45); border-radius:10px; }
.reticle::before,.reticle::after { content:""; position:absolute; background:rgba(255,200,145,.55); }
.reticle::before { width:16px; height:1px; left:50%; top:50%; transform:translate(-50%,-50%); }
.reticle::after { height:16px; width:1px; left:50%; top:50%; transform:translate(-50%,-50%); }

.feature-stack { display:grid; gap:26px; }
.feature-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
}
.feature-row.reverse .feature-copy { order:2; }
.feature-row.reverse .feature-showcase { order:1; }
.feature-copy, .feature-showcase {
  min-height:520px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  overflow:hidden;
}
.feature-copy {
  background:linear-gradient(180deg,rgba(23,29,37,.85),rgba(11,17,25,.85));
  padding:58px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.feature-copy h3 { margin:0; font-size:clamp(34px,3vw,50px); line-height:1.05; letter-spacing:-.045em; }
.feature-copy p { color:var(--muted); font-size:16px; line-height:1.75; margin:18px 0 0; max-width:520px; }
.feature-list { display:grid; gap:13px; margin-top:28px; }
.feature-list div { display:flex; align-items:center; gap:10px; color:#d7d8dd; font-size:14px; }
.check { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:rgba(255,123,50,.1); color:#ff9a61; border:1px solid rgba(255,123,50,.18); flex:0 0 auto; }
.feature-showcase { position:relative; background:#0f151e; }
.feature-showcase.chat { background:radial-gradient(circle at 75% 20%, rgba(205,61,46,.36),transparent 33%), linear-gradient(145deg,#121823,#1f1218); }
.feature-showcase.voice { background:radial-gradient(circle at 70% 25%, rgba(53,208,189,.28),transparent 34%),linear-gradient(145deg,#111820,#11221f); }
.feature-showcase.images { background:radial-gradient(circle at 72% 24%, rgba(213,144,73,.3),transparent 35%),linear-gradient(145deg,#151a21,#271b14); }
.large-chat { position:absolute; inset:70px 55px; }
.large-chat .chat-node { font-size:13px; padding:16px 18px; }
.large-chat .chat-node strong { font-size:11px; }
.large-chat .chat-node.one { width:62%; }
.large-chat .chat-node.two { width:58%; top:125px; }
.large-chat .chat-node.ai { width:76%; bottom:20px; }
.large-wave .wave i { width:6px; }
.voice-caption { position:absolute; left:50%; bottom:70px; transform:translateX(-50%); width:max-content; max-width:80%; border:1px solid rgba(255,255,255,.1); background:rgba(8,16,22,.72); backdrop-filter:blur(12px); border-radius:14px; padding:14px 18px; text-align:center; box-shadow:0 20px 40px rgba(0,0,0,.3); }
.voice-caption strong { display:block; color:#68e4d3; font-size:11px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:3px; }
.voice-caption span { font-size:13px; }
.large-frames .frame { width:240px; height:155px; }
.large-frames .frame.a { left:90px; top:100px; }
.large-frames .frame.b { left:190px; top:180px; }
.large-frames .frame.c { right:75px; top:120px; }
.large-frames .reticle { width:126px; height:82px; }

.value-section { padding:110px 0; }
.value-panel {
  overflow:hidden;
  position:relative;
  padding:82px 60px;
  border:1px solid var(--border);
  border-radius:28px;
  background:linear-gradient(125deg,#121922 10%,#1b1519 55%,#2b1717 100%);
  box-shadow:var(--shadow);
}
.value-panel::after { content:""; position:absolute; width:460px; height:460px; border-radius:50%; right:-150px; top:-160px; background:rgba(225,59,43,.26); filter:blur(60px); }
.value-panel h2 { position:relative; z-index:1; max-width:770px; }
.value-panel p { position:relative; z-index:1; color:#b8b9bf; font-size:17px; max-width:650px; }
.value-pills { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.value-pills span { padding:9px 12px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#d6d8dc; font-size:12px; }

.pricing { padding:120px 0; }
.pricing-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:42px; align-items:center; }
.price-card {
  border-radius:26px;
  border:1px solid rgba(255,123,50,.22);
  background:radial-gradient(circle at 80% 5%,rgba(209,56,46,.27),transparent 34%),linear-gradient(180deg,#171d26,#101720);
  padding:42px;
  box-shadow:0 35px 90px rgba(0,0,0,.28);
}
.price-badge { display:inline-flex; padding:7px 10px; border-radius:999px; color:#ffd0b6; background:rgba(255,123,50,.09); border:1px solid rgba(255,123,50,.18); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.price-line { display:flex; align-items:flex-end; gap:8px; margin:24px 0; }
.price { font-size:70px; line-height:.85; letter-spacing:-.06em; font-weight:800; }
.period { color:var(--muted); padding-bottom:6px; }
.price-card .button { width:100%; margin-top:26px; }
.price-points { display:grid; gap:13px; margin-top:26px; color:#dadce1; font-size:14px; }
.price-points div { display:flex; align-items:center; gap:10px; }
.price-disclaimer { margin-top:20px; color:#7f858f; font-size:11.5px; line-height:1.6; }

.faq { padding:110px 0 130px; }
.faq-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:70px; }
.faq-list { border-top:1px solid var(--border); }
.faq-item { border-bottom:1px solid var(--border); }
.faq-question { width:100%; background:none; border:0; padding:22px 0; display:flex; align-items:center; justify-content:space-between; text-align:left; cursor:pointer; font-weight:650; font-size:15px; }
.faq-question span:last-child { font-size:22px; color:#818791; transition:transform .2s ease; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--muted); }
.faq-answer p { margin:0; padding:0 36px 22px 0; font-size:14px; line-height:1.7; }
.faq-item.open .faq-answer { max-height:220px; }
.faq-item.open .faq-question span:last-child { transform:rotate(45deg); }

.final-cta { padding:0 0 120px; }
.final-card { text-align:center; padding:88px 30px; border-radius:28px; border:1px solid var(--border); background:radial-gradient(circle at 50% 30%,rgba(169,48,43,.24),transparent 42%),#0f151e; }
.final-card h2 { margin:0; font-size:clamp(46px,5vw,74px); letter-spacing:-.055em; line-height:1; }
.final-card p { color:var(--muted); margin:18px auto 28px; max-width:620px; font-size:16px; }

.footer { border-top:1px solid var(--border); padding:32px 0 44px; color:#7f858f; font-size:12px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer-links { display:flex; gap:20px; flex-wrap:wrap; }
.footer-brand img { width:105px; opacity:.82; }

/* Reveal content is visible by default. JavaScript opts into animation only after it confirms the observer is available. */
.reveal { opacity: 1; transform: none; filter: none; }
.reveal-enabled .reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(4px);
  transition:
    opacity .68s cubic-bezier(.22,1,.36,1),
    transform .68s cubic-bezier(.22,1,.36,1),
    filter .68s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
.reveal-enabled .reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Account / legal / support */
.subpage { min-height:100vh; padding:132px 0 90px; }
.subpage-head { max-width:760px; margin-bottom:38px; }
.subpage h1 { font-size:clamp(46px,5vw,72px); line-height:1; letter-spacing:-.055em; margin:0; }
.subpage-lead { color:var(--muted); font-size:17px; }
.account-shell { max-width:1050px; margin:0 auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:20px; }
.account-info, .account-auth, .support-card, .legal-card { border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(180deg,rgba(23,29,37,.9),rgba(13,20,29,.9)); }
.account-info { padding:38px; }
.account-info h2, .account-auth h2 { margin:0 0 12px; font-size:27px; letter-spacing:-.03em; }
.account-info p { color:var(--muted); }
.account-auth { padding:26px; min-height:560px; display:grid; place-items:center; }
.clerk-mount { width:100%; display:grid; place-items:center; }
.setup-message { max-width:440px; text-align:center; color:var(--muted); }
.setup-message strong { color:#fff; display:block; font-size:20px; margin-bottom:7px; }
.account-feature { display:flex; gap:12px; align-items:flex-start; margin-top:22px; }
.account-feature svg { width:20px; color:#ff965c; flex:0 0 auto; }
.account-feature strong { display:block; font-size:14px; }
.account-feature span { color:var(--muted); font-size:12px; }
.support-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.support-card { padding:28px; min-height:210px; }
.support-card h3 { margin:0 0 8px; }
.support-card p { color:var(--muted); font-size:14px; }
.legal-card { padding:42px; max-width:860px; }
.legal-card h2 { margin-top:36px; }
.legal-card p, .legal-card li { color:#aeb2ba; line-height:1.75; font-size:14px; }

@media (max-width: 1000px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links { display:none; }
  .mobile-toggle { display:inline-flex; }
  .nav-actions .button.ghost { display:none; }
  .mobile-menu { display:none; position:absolute; top:68px; left:24px; right:24px; padding:12px; background:rgba(12,18,26,.97); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); }
  .mobile-menu.open { display:grid; }
  .mobile-menu a { padding:13px 12px; border-radius:10px; color:#d7d8dd; }
  .mobile-menu a:hover { background:rgba(255,255,255,.05); }
  .hero { min-height:auto; padding-top:140px; }
  .hero-grid, .pricing-grid, .faq-grid, .feature-row, .account-shell { grid-template-columns:1fr; }
  .app-stage { margin-top:20px; }
  .app-window { transform:none; }
  .feature-row.reverse .feature-copy, .feature-row.reverse .feature-showcase { order:initial; }
  .tool-grid { grid-template-columns:1fr; }
  .tool-card { min-height:360px; }
  .tool-art { height:200px; }
  .support-grid { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
  .container { width:min(100% - 28px,var(--max)); }
  .nav { height:68px; }
  .brand img { width:110px; }
  .nav-actions .button.primary { display:none; }
  .hero { padding:116px 0 74px; }
  .hero-grid { gap:42px; }
  .hero h1 { font-size:56px; }
  .hero-copy { font-size:16px; }
  .app-badge { display:none; }
  .trust-strip { padding-bottom:64px; }
  .trust-inner { justify-content:flex-start; gap:20px 32px; }
  .section, .pricing, .faq { padding:80px 0; }
  .section-header { margin-bottom:32px; }
  .feature-copy { min-height:auto; padding:34px 26px; }
  .feature-showcase { min-height:360px; }
  .large-chat { inset:50px 25px; }
  .large-frames .frame { width:150px; height:100px; }
  .large-frames .frame.a { left:30px; top:80px; }
  .large-frames .frame.b { left:90px; top:150px; }
  .large-frames .frame.c { right:22px; top:110px; }
  .value-panel { padding:54px 28px; }
  .price-card { padding:30px 24px; }
  .price { font-size:58px; }
  .faq-grid { gap:24px; }
  .final-card { padding:64px 22px; }
  .footer-inner { align-items:flex-start; flex-direction:column; }
  .subpage { padding-top:110px; }
  .account-info, .account-auth, .legal-card { padding:26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Final production polish */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  transform: translateY(-150%);
  background: #fff;
  color: #0a101a;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
}
.skip-link:focus { transform: none; }

:focus-visible {
  outline: 2px solid rgba(255, 143, 82, .9);
  outline-offset: 3px;
}

.brand img,
.footer-brand img {
  background: transparent !important;
  filter: none;
}

.button.compact { min-height: 42px; padding-inline: 17px; }
.button[aria-disabled="true"] { pointer-events: none; }

.hero { min-height: 820px; padding-top: 138px; }
.hero-grid { gap: 58px; }
.hero h1 { font-size: clamp(58px, 6.2vw, 96px); }
.hero-copy { max-width: 590px; }
.app-window { transform: rotateY(-2.5deg) rotateX(.8deg); }
.app-stage::before { opacity: .5; }
.app-badge { right: -8px; }

.tool-status.teal::before { background: var(--teal); }
.tool-status.amber::before { background: var(--amber); }

.product-detail { padding-top: 82px; }

.requirements-section { padding: 110px 0; position: relative; }
.requirements-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items: start;
}
.requirements-grid .section-header { margin: 0; }
.requirements-grid h2 {
  margin: 0;
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -.05em;
}
.requirements-list {
  border-top: 1px solid var(--border);
}
.requirement {
  display: grid;
  grid-template-columns: minmax(170px, .7fr) 1.3fr;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.requirement strong { font-size: 14px; color: #f1f1f3; }
.requirement span { color: var(--muted); font-size: 14px; line-height: 1.6; }

.price-disclaimer strong { color: #bfc2c8; font-weight: 650; }
.centered { justify-content: center; }

.footer { padding-bottom: 30px; }
.footer-note {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.055);
  color: #626874;
  font-size: 10.5px;
  line-height: 1.55;
  text-align: center;
}

/* Keep supporting pages intentionally simpler than the marketing page. */
.subpage-head { max-width: 700px; }
.subpage-lead { line-height: 1.7; }
.support-card,
.account-info,
.account-auth,
.legal-card {
  box-shadow: 0 18px 55px rgba(0,0,0,.14);
}
.support-card h3 { font-size: 18px; letter-spacing: -.02em; }
.legal-card h2 { font-size: 22px; letter-spacing: -.02em; }
.legal-card a { color: #f6a06f; }

@media (max-width: 1000px) {
  .requirements-grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 680px) {
  .hero { min-height: auto; }
  .requirement { grid-template-columns: 1fr; gap: 6px; }
  .requirements-section { padding: 80px 0; }
  .footer-note { text-align: left; }
}


/* Production header: all desktop navigation items are explicitly present and spaced. */
.site-header .nav {
  position: relative;
  grid-template-columns: 140px minmax(420px, 1fr) auto;
  column-gap: 24px;
}
.site-header .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.site-header .nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 13px;
  border-radius: 10px;
  color: #cfd2d8;
  font-size: 13px;
  font-weight: 560;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.site-header .nav-links a + a { margin-left: 0; }
.site-header .nav-links a:hover,
.site-header .nav-links a:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.045);
}
.site-header .nav-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 0;
}
.site-header .nav-actions .button { display: inline-flex; }
.site-header .button.compact { min-height: 40px; padding-inline: 15px; }
.site-header .mobile-toggle { display: none; width: 40px; min-width: 40px; padding: 0; }
.mobile-menu { display: none; }

@media (max-width: 1000px) {
  .site-header .nav { grid-template-columns: 1fr auto; column-gap: 14px; }
  .site-header .nav-links { display: none; }
  .site-header .mobile-toggle { display: inline-flex; }
  .site-header .nav-actions .button.ghost,
  .site-header .nav-actions .button.primary { display: inline-flex; }
  .mobile-menu {
    position: absolute;
    top: 68px;
    right: 0;
    left: auto;
    width: min(310px, calc(100vw - 48px));
    padding: 10px;
    background: rgba(10,16,24,.97);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: 0 24px 70px rgba(0,0,0,.48);
    backdrop-filter: blur(20px);
  }
  .mobile-menu.open { display: grid; gap: 2px; }
  .mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    color: #d7d9df;
    font-size: 14px;
    font-weight: 560;
  }
  .mobile-menu a:hover { background: rgba(255,255,255,.05); color: #fff; }
}

@media (max-width: 600px) {
  .site-header .brand img { width: 102px; }
  .site-header .nav-actions { gap: 6px; }
  .site-header .button.compact { min-height: 38px; padding-inline: 10px; font-size: 12px; }
  .site-header .mobile-toggle { width: 38px; min-width: 38px; min-height: 38px; }
}

@media (max-width: 410px) {
  .site-header .brand img { width: 90px; }
  .site-header .nav-actions .button.ghost { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-enabled .reveal,
  .reveal-enabled .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Ensure the mobile menu trigger never appears alongside the full desktop navigation. */
.site-header .nav-actions .mobile-toggle { display: none; }
@media (max-width: 1000px) {
  .site-header .nav-actions .mobile-toggle { display: inline-flex; }
}