:root {
  --bg: #070708;
  --panel: #101014;
  --panel-2: #15151b;
  --text: #f6f6f7;
  --muted: #9b9ba6;
  --line: #26262e;
  --red: #ff334d;
  --red-2: #b7142f;
  --blue: #8fc6ff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; background: radial-gradient(circle at 75% 10%, rgba(255,51,77,.08), transparent 25%), var(--bg); color: var(--text); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.noise { pointer-events:none; position:fixed; inset:0; opacity:.035; z-index:100; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.nav { height: 80px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid rgba(255,255,255,.05); }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.06em; }
.brand-mark { width:34px; height:34px; border:1px solid rgba(255,51,77,.65); border-radius:10px; display:grid; place-items:center; color:var(--red); box-shadow: inset 0 0 20px rgba(255,51,77,.08); }
.nav nav { display:flex; gap:28px; color:#bcbcc4; font-size:14px; }
.nav nav a:hover { color:white; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:13px; padding:14px 18px; font-weight:700; border:1px solid transparent; transition:.2s ease; }
.button:hover { transform:translateY(-1px); }
.button-small { padding:9px 14px; font-size:13px; border-radius:10px; }
.button-primary { background:linear-gradient(135deg, var(--red), #dc1738); color:white; box-shadow:0 12px 35px rgba(255,51,77,.18); }
.button-secondary, .button-ghost { border-color:#34343d; background:#121217; color:#f2f2f5; }
.button-ghost { background:transparent; }
.hero { min-height:690px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:70px; padding:68px 0 70px; }
.eyebrow, .kicker { color:#bdbdc5; font-size:12px; letter-spacing:.16em; font-weight:800; text-transform:uppercase; }
.eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:18px; }
.eyebrow span { width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 14px var(--red); }
h1 { font-size:clamp(50px, 7vw, 86px); line-height:.98; letter-spacing:-.055em; margin:0 0 24px; max-width:820px; }
h1 em { color:var(--red); font-style:normal; }
.lead { font-size:18px; color:#a9a9b2; max-width:680px; margin:0 0 30px; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; }
.trust-row { display:flex; gap:22px; flex-wrap:wrap; color:#7f7f89; font-size:12px; margin-top:20px; }
.phone-wrap { position:relative; display:grid; place-items:center; }
.glow { position:absolute; width:330px; height:430px; background:rgba(255,51,77,.13); filter:blur(85px); border-radius:50%; }
.phone { position:relative; width:315px; min-height:610px; border:1px solid #34343c; border-radius:38px; padding:18px 16px 16px; background:linear-gradient(180deg,#101014,#08080a); box-shadow:0 35px 90px #000, inset 0 0 0 4px #0a0a0d; overflow:hidden; transform:rotate(2deg); }
.phone::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.035), transparent 48%); pointer-events:none; }
.phone-bar { display:flex; justify-content:space-between; font-size:11px; color:#bbb; padding:2px 8px 18px; }
.app-head { display:flex; gap:12px; align-items:flex-start; margin-bottom:24px; }
.app-head strong { display:block; font-size:20px; letter-spacing:.04em; }
.app-head small { display:block; color:#9898a3; margin-top:3px; line-height:1.35; }
.bot-dot { width:30px; height:30px; display:grid; place-items:center; background:var(--red); border-radius:9px; box-shadow:0 0 18px rgba(255,51,77,.4); }
.prompt-card { border:1px solid #4a4a54; border-radius:16px; padding:16px; min-height:130px; background:#111116; }
.prompt-label { font-size:10px; font-weight:800; color:#8d8d98; letter-spacing:.1em; }
.prompt-card p { margin:13px 0 0; font-size:15px; line-height:1.5; }
.mock-button { width:100%; margin:12px 0 18px; padding:13px; border:0; border-radius:12px; background:#9bcfff; color:#071019; font-weight:800; }
.preview-card { background:#121218; border:1px solid #292932; border-radius:15px; padding:14px; }
.preview-card > span { color:var(--red); font-size:10px; font-weight:800; letter-spacing:.12em; }
.preview-card div { display:grid; grid-template-columns:54px 1fr; gap:8px; padding:10px 0; border-bottom:1px solid #23232b; font-size:12px; color:#c8c8cf; }
.preview-card div:last-child { border-bottom:0; }
.preview-card b { color:#85858f; font-size:10px; }
.phone-nav { position:absolute; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #292932; background:#0d0d11; padding:11px 5px 14px; }
.phone-nav span { text-align:center; font-size:16px; color:#8d8d97; }
.phone-nav small { display:block; font-size:9px; margin-top:3px; }
.phone-nav .active { color:#b9dcff; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats div { padding:27px 20px; border-right:1px solid var(--line); }
.stats div:last-child { border-right:0; }
.stats strong { display:block; font-size:22px; }
.stats span { display:block; color:#80808a; font-size:12px; margin-top:4px; }
.section { padding:105px 0; }
.section-heading { max-width:680px; margin-bottom:48px; }
.section h2, .workflow-layout h2 { font-size:clamp(34px,5vw,55px); margin:8px 0 14px; letter-spacing:-.04em; line-height:1.05; }
.section-heading p, .workflow-layout p, .privacy-card p, .source-section p { color:#92929d; margin:0; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.feature-grid article { background:linear-gradient(180deg,#121216,#0d0d10); border:1px solid #25252d; border-radius:19px; padding:25px; min-height:220px; }
.feature-grid .icon { display:grid; place-items:center; width:39px; height:39px; border-radius:11px; border:1px solid #35353e; color:var(--red); margin-bottom:32px; }
.feature-grid h3 { margin:0 0 9px; font-size:17px; }
.feature-grid p { color:#8d8d98; margin:0; font-size:14px; }
.workflow-section { padding:95px 0; background:#0b0b0e; border-top:1px solid #202027; border-bottom:1px solid #202027; }
.workflow-layout { display:grid; grid-template-columns:1fr 1fr; gap:85px; align-items:center; }
.flow { max-width:470px; margin-left:auto; width:100%; }
.flow-node { border:1px solid #303038; border-radius:16px; background:#121217; padding:18px; }
.flow-node span { display:block; font-size:10px; letter-spacing:.12em; color:#8e8e98; font-weight:800; margin-bottom:7px; }
.flow-node strong { font-size:15px; }
.flow-node.accent { border-color:rgba(255,51,77,.55); box-shadow:0 0 30px rgba(255,51,77,.06); }
.flow-node.accent span { color:var(--red); }
.flow-node.muted { opacity:.78; }
.connector { color:#5d5d67; text-align:center; padding:8px; }
.privacy-card { border:1px solid #2a2a31; border-radius:24px; padding:38px; display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; background:linear-gradient(135deg,#111116,#0c0c0f); }
.manifest { border:1px solid #292932; border-radius:16px; overflow:hidden; }
.manifest div { display:flex; justify-content:space-between; gap:20px; padding:14px 16px; border-bottom:1px solid #25252d; font-size:12px; }
.manifest div:last-child { border-bottom:0; }
.manifest span { color:#b5b5bd; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.manifest b { color:#777782; font-weight:600; text-align:right; }
.manifest .good span, .manifest .good b { color:#78d69c; }
.source-section { display:grid; grid-template-columns:1fr auto; gap:60px; align-items:end; border-top:1px solid #1e1e24; }
.source-actions { display:flex; flex-direction:column; gap:10px; min-width:260px; }
.text-link { text-align:center; color:#8d8d98; font-size:13px; padding:7px; }
.footer { min-height:110px; display:grid; grid-template-columns:1fr auto auto; gap:28px; align-items:center; border-top:1px solid #202027; color:#70707a; font-size:12px; }
.footer .brand { color:#aaaab3; font-size:12px; }
@media (max-width: 900px) {
  .nav nav { display:none; }
  .hero { grid-template-columns:1fr; text-align:left; padding-top:55px; }
  .phone-wrap { margin-top:10px; }
  .stats { grid-template-columns:1fr 1fr; }
  .stats div:nth-child(2) { border-right:0; }
  .stats div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .workflow-layout, .privacy-card, .source-section { grid-template-columns:1fr; }
  .flow { margin:0; }
  .footer { grid-template-columns:1fr; padding:30px 0; gap:8px; }
}
@media (max-width: 600px) {
  .shell { width:min(100% - 28px, 1160px); }
  .nav { height:68px; }
  .nav .button { display:none; }
  .hero { min-height:auto; gap:35px; padding:45px 0 55px; }
  h1 { font-size:48px; }
  .lead { font-size:16px; }
  .cta-row { flex-direction:column; }
  .button { width:100%; }
  .trust-row { gap:10px 16px; }
  .phone { width:285px; min-height:570px; }
  .feature-grid { grid-template-columns:1fr; }
  .section { padding:75px 0; }
  .privacy-card { padding:24px; gap:35px; }
  .manifest div { flex-direction:column; gap:4px; }
  .manifest b { text-align:left; }
  .stats { grid-template-columns:1fr 1fr; }
}
