/* ============ ONEDOOR MARKETING SITE ============ */

:root{
  --bg-0:#0B0714;
  --bg-1:#120A22;
  --bg-2:#1A0F2E;
  --bg-3:#241640;
  --ink-1:#F5F1FF;
  --ink-2:#C9C0E0;
  --ink-3:#8B80A8;
  --ink-4:#554B75;
  --brand:#7C6CF0;
  --brand-hi:#A79AFF;
  --ok:#4BD6A8;
  --warn:#F3C46B;
  --danger:#F17A8A;
  --info:#7FB0FF;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --font-sans:'Inter', system-ui, sans-serif;
  --font-display:'Sora', 'Inter', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--bg-0);
  color:var(--ink-1);
  font-size:17px;  /* larger base for 35-85 audience */
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
button{font-family:inherit}
a{color:var(--ink-1); text-decoration:none}

/* ============ LAYOUT ============ */
.od-container{max-width:1200px; margin:0 auto; padding:0 28px}
.od-root{position:relative; overflow-x:hidden}

/* ============ NAV ============ */
.od-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,7,20,.75); backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.od-nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; max-width:1200px; margin:0 auto;
}
.od-nav-links{display:flex; gap:28px; font-size:15px; color:var(--ink-2)}
.od-nav-links a:hover{color:var(--ink-1)}
@media(max-width:720px){ .od-nav-links{display:none} }

/* ============ AURORA + GRAIN ============ */
.od-aurora{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  filter: saturate(1.05);
}
.od-aurora-grain{
  position:absolute; inset:0; opacity:.2; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============ HERO ============ */
.od-hero{
  position:relative;
  padding:120px 0 80px;
  overflow:hidden;
  isolation:isolate;
}
.od-hero-bg{
  position:absolute; inset:-10% -10% 0 -10%; z-index:-1;
  background:
    radial-gradient(45% 60% at 15% 20%, rgba(240,122,60,.55), transparent 65%),
    radial-gradient(40% 55% at 45% 10%, rgba(226,74,92,.50), transparent 70%),
    radial-gradient(55% 75% at 85% 65%, rgba(107,75,199,.55), transparent 70%),
    linear-gradient(180deg, #0B0714 0%, #1A0F2E 60%, #0B0714 100%);
  filter: saturate(1.1);
}
.od-hero-bg::after{
  content:""; position:absolute; inset:0; opacity:.18; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Hero — Split variant */
.od-hero-split{
  display:grid; grid-template-columns: 1.05fr 1fr; gap:56px; align-items:center;
}
@media(max-width:960px){ .od-hero-split{grid-template-columns:1fr; gap:48px} }

.od-hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  color:var(--ink-2); background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); padding:8px 14px; border-radius:var(--r-pill);
  margin-bottom:28px;
}
.od-hero-eyebrow-dot{
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg, #F5B84A, #E24A5C, #6B4BC7);
  box-shadow:0 0 12px rgba(226,74,92,.6);
}
.od-hero-h1{
  font-family:var(--font-display); font-weight:800;
  font-size: clamp(48px, 6.4vw, 84px);
  line-height:0.98; letter-spacing:-0.035em;
  margin:0 0 24px; text-wrap:balance;
}
.od-hero-h1 em{
  font-style:normal;
  background: linear-gradient(95deg, #F5B84A 0%, #F07A3C 25%, #E24A5C 50%, #C0418E 70%, #7C6CF0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.od-hero-sub{
  font-size:21px; color:var(--ink-2); max-width:560px; margin:0 0 36px;
  line-height:1.5; text-wrap:pretty;
}
.od-hero-cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px}

.od-hero-trust{
  display:flex; gap:22px; color:var(--ink-3); font-size:14px; flex-wrap:wrap;
}
.od-hero-trust span{display:inline-flex; align-items:center; gap:8px}
.od-hero-trust span::before{content:"✓"; color:var(--ok); font-weight:700}

/* Hero right — showcase phone */
.od-hero-stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:600px;
}
.od-hero-stage::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(124,108,240,.25), transparent 70%);
  z-index:0; filter: blur(40px);
}
.od-hero-stage > *{position:relative; z-index:1}

/* Hero — Centered variant */
.od-hero-centered{text-align:center; max-width:900px; margin:0 auto}
.od-hero-centered .od-hero-cta-row{justify-content:center}
.od-hero-centered .od-hero-trust{justify-content:center}
.od-hero-centered .od-hero-sub{margin-left:auto; margin-right:auto}
.od-hero-centered-art{
  margin-top:56px;
  position:relative;
  border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio: 16/6;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(60% 80% at 15% 30%, #F5B84A 0%, #F07A3C 22%, #E24A5C 42%, #6B4BC7 70%, #1A0F2E 100%);
  box-shadow: 0 40px 120px rgba(107,75,199,.35), 0 2px 0 rgba(255,255,255,.05) inset;
}
.od-hero-centered-art::after{
  content:""; position:absolute; inset:0; opacity:.25;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
.od-hero-centered-art img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; mix-blend-mode:screen;
}

/* Hero — Showcase variant (image-led, brand-artwork-first) */
.od-hero-showcase{
  position:relative; text-align:center;
}
.od-hero-showcase-art{
  position:relative; margin:0 auto 40px; max-width:900px;
  border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio: 16/9;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 120px rgba(107,75,199,.4);
}
.od-hero-showcase-art img{
  width:100%; height:100%; object-fit:cover;
}
.od-hero-showcase .od-hero-cta-row{justify-content:center}
.od-hero-showcase .od-hero-trust{justify-content:center}

/* ============ BUTTONS ============ */
.od-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; border-radius:var(--r-pill);
  font-weight:600; font-size:16px; cursor:pointer;
  border:1px solid transparent; transition:transform .15s, background .15s, box-shadow .15s;
  white-space:nowrap;
}
.od-btn:active{transform:translateY(1px)}
.od-btn-lg{padding:16px 28px; font-size:17px; width:100%}
.od-btn-primary{background:var(--brand); color:#fff}
.od-btn-primary:hover{background:var(--brand-hi)}
.od-btn-gradient{
  background:linear-gradient(92deg, #F07A3C 0%, #E24A5C 45%, #7C6CF0 100%);
  color:#fff; box-shadow: 0 8px 32px rgba(226,74,92,.35);
}
.od-btn-gradient:hover{box-shadow: 0 8px 40px rgba(226,74,92,.55)}
.od-btn-gradient:disabled{opacity:.4; cursor:not-allowed; box-shadow:none}
.od-btn-ghost{background:transparent; color:var(--ink-1); border-color:rgba(255,255,255,.15)}
.od-btn-ghost:hover{background:rgba(255,255,255,.05)}
.od-btn-secondary{background:rgba(255,255,255,.06); color:var(--ink-1); border-color:rgba(255,255,255,.08)}

/* ============ PILLS ============ */
.od-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:var(--r-pill);
  font-size:12px; font-weight:500; border:1px solid transparent;
  white-space:nowrap;
}
.od-pill-dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.od-pill-ok{background:rgba(75,214,168,.12); color:var(--ok); border-color:rgba(75,214,168,.25)}
.od-pill-warn{background:rgba(243,196,107,.12); color:var(--warn); border-color:rgba(243,196,107,.25)}
.od-pill-danger{background:rgba(241,122,138,.12); color:var(--danger); border-color:rgba(241,122,138,.25)}
.od-pill-info{background:rgba(127,176,255,.12); color:var(--info); border-color:rgba(127,176,255,.25)}
.od-pill-muted{background:rgba(255,255,255,.06); color:var(--ink-2); border-color:rgba(255,255,255,.1)}

/* ============ SECTIONS ============ */
.od-section{padding:100px 0}
.od-section-head{max-width:720px; margin-bottom:48px}
.od-align-center .od-section-head{margin-left:auto; margin-right:auto; text-align:center}
.od-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.15em;
  color:var(--ink-3); text-transform:uppercase; margin-bottom:14px;
}
.od-h2{
  font-family:var(--font-display); font-weight:700;
  font-size: clamp(32px, 4vw, 48px);
  line-height:1.05; letter-spacing:-0.025em;
  margin:0 0 18px; text-wrap:balance;
}
.od-subtitle{
  font-size:19px; color:var(--ink-2); margin:0; line-height:1.55; text-wrap:pretty;
}

/* ============ PROBLEM SECTION ============ */
.od-problem-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
@media(max-width:860px){ .od-problem-grid{grid-template-columns:1fr} }
.od-problem-card{
  background:var(--bg-2);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-lg);
  padding:32px;
  position:relative;
}
.od-problem-card-num{
  font-family:var(--font-mono); font-size:12px; color:var(--ink-3);
  letter-spacing:.12em; margin-bottom:14px;
}
.od-problem-card h3{
  font-family:var(--font-display); font-weight:700; font-size:22px;
  margin:0 0 10px; letter-spacing:-0.01em;
}
.od-problem-card p{color:var(--ink-2); font-size:16px; margin:0; line-height:1.55}
.od-problem-old{color:var(--ink-3); font-size:14px; margin-top:14px; font-style:italic}
.od-problem-old::before{content:"Before: "; color:var(--ink-4); font-style:normal}

/* ============ HOW IT WORKS ============ */
.od-how-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
}
@media(max-width:960px){ .od-how-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .od-how-grid{grid-template-columns:1fr} }
.od-how-step{
  position:relative;
  padding:28px 24px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-lg);
}
.od-how-step-n{
  font-family:var(--font-display); font-weight:800;
  font-size:48px; line-height:1; letter-spacing:-0.03em;
  background:linear-gradient(135deg, #F5B84A, #E24A5C, #7C6CF0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:20px;
}
.od-how-step h3{
  font-family:var(--font-display); font-weight:700; font-size:20px;
  margin:0 0 10px;
}
.od-how-step p{color:var(--ink-2); font-size:15px; margin:0; line-height:1.5}

/* ============ SCREENS SECTION ============ */
.od-screens{
  position:relative;
  padding:120px 0;
  background:linear-gradient(180deg, #0B0714, #120A22 40%, #0B0714);
}
.od-screens-stage{
  display:flex; justify-content:center; align-items:flex-start;
  gap:32px; margin-top:40px; position:relative;
  padding:20px 0;
}
@media(max-width:960px){
  .od-screens-stage{flex-wrap:wrap}
}
.od-screens-glow{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(107,75,199,.25), transparent 70%);
  filter:blur(40px);
}

/* ============ PHONE FRAME ============ */
.od-phone-wrap{
  flex-shrink:0; position:relative;
  transition: transform .4s;
}
.od-phone{
  width:300px;
  aspect-ratio: 9/19.5;
  background:#000;
  border-radius:42px;
  padding:6px;
  box-shadow:
    0 40px 80px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.1),
    0 0 0 8px rgba(20,10,40,.9);
  position:relative;
  overflow:hidden;
}
.od-phone-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:100px; height:24px; background:#000; border-radius:16px; z-index:5;
}
.od-phone-screen{
  width:100%; height:100%;
  background:#0B0714;
  border-radius:36px;
  overflow:hidden;
  position:relative;
  padding:14px 12px 10px;
}
.od-status-bar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 0 16px 10px;
  font-size:13px; font-weight:600; color:var(--ink-1);
}
.od-status-icons{display:flex; gap:6px; align-items:center}

/* ============ APP MOCK INTERNALS ============ */
.od-app{padding:4px 6px; font-size:12px}
.od-app-eyebrow{
  font-family:var(--font-mono); font-size:9px; color:var(--ink-3);
  letter-spacing:.12em; margin-bottom:4px;
}
.od-app-greet{
  font-family:var(--font-display); font-weight:700;
  font-size:24px; line-height:1.05; letter-spacing:-0.02em;
  margin-bottom:4px;
}
.od-app-meta{font-size:11px; color:var(--ink-3); margin-bottom:12px}
.od-app-label{
  font-family:var(--font-mono); font-size:9px; color:var(--ink-3);
  letter-spacing:.12em;
}

.od-hero-card{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(224,72,100,.55), transparent 60%),
    radial-gradient(90% 120% at 100% 100%, rgba(107,75,199,.55), transparent 60%),
    linear-gradient(180deg, #2A1450, #1A0F2E);
  padding:14px; margin-bottom:12px;
}
.od-hero-card::after{
  content:""; position:absolute; inset:0; opacity:.18;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay; pointer-events:none;
}
.od-hero-card-inner{position:relative; z-index:2}
.od-hero-headline{
  font-family:var(--font-display); font-weight:700;
  font-size:28px; letter-spacing:-0.02em; color:var(--ok);
  margin:4px 0 10px;
}
.od-big-amount{
  font-family:var(--font-display); font-weight:800;
  font-size:36px; letter-spacing:-0.03em; margin:4px 0 10px;
}
.od-ring-row{display:flex; gap:12px; align-items:center; margin-bottom:10px}
.od-ring{
  --sz:58px; width:var(--sz); height:var(--sz);
  border-radius:50%;
  background: conic-gradient(var(--ok) 0 92%, rgba(255,255,255,.1) 92%);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.od-ring::before{content:""; position:absolute; inset:5px; background:#1A0F2E; border-radius:50%}
.od-ring span{position:relative; font-family:var(--font-display); font-weight:700; font-size:17px}
.od-ring-meta{font-size:10px; color:var(--ink-2); line-height:1.45}

.od-pill-row{display:flex; gap:5px; flex-wrap:wrap}
.od-pill-row .od-pill{font-size:9px; padding:3px 7px}

.od-tile-grid{display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px}
.od-tile{
  background:var(--bg-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:10px 10px;
}
.od-tile-ico{font-size:14px; margin-bottom:3px}
.od-tile-lab{font-weight:600; font-size:12px; color:var(--ink-1)}
.od-tile-sub{font-size:9px; color:var(--ink-3); margin-top:1px}

.od-list-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 10px; background:var(--bg-2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px; margin-top:5px;
}
.od-list-t{font-weight:600; font-size:11px}
.od-list-s{font-size:9px; color:var(--ink-3); margin-top:1px}

.od-needs-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 10px; background:var(--bg-2);
  border:1px solid rgba(243,196,107,.25);
  border-radius:10px; margin-top:5px;
}

.od-vote-title{font-weight:600; font-size:14px; margin:6px 0 10px; line-height:1.3}
.od-vote-bar{
  display:flex; height:20px; border-radius:var(--r-pill); overflow:hidden;
  background:rgba(255,255,255,.06); margin-bottom:6px;
}
.od-vote-yes{background:linear-gradient(90deg, #4BD6A8, #3AA887); display:flex; align-items:center; padding:0 8px; font-size:10px; font-weight:600; color:#0B0714}
.od-vote-no{background:rgba(241,122,138,.4); display:flex; align-items:center; padding:0 8px; font-size:10px; font-weight:600; color:#F5F1FF}
.od-vote-meta{font-size:9px; color:var(--ink-3)}

.od-app-tabbar{
  display:flex; justify-content:space-around; align-items:center;
  padding-top:10px; margin-top:12px;
  border-top:1px solid rgba(255,255,255,.06);
}
.od-tab{
  font-size:10px; color:var(--ink-3);
  padding:4px 8px; border-radius:var(--r-pill);
}
.od-tab-active{background:rgba(124,108,240,.2); color:var(--brand-hi); font-weight:600}

/* ============ FOUNDER SECTION ============ */
.od-founder{
  background:linear-gradient(180deg, #0B0714, #120A22);
  padding:100px 0;
}
.od-founder-card{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(224,72,100,.4), transparent 60%),
    radial-gradient(90% 120% at 100% 100%, rgba(107,75,199,.45), transparent 60%),
    linear-gradient(180deg, #2A1450, #1A0F2E);
  padding:56px 56px;
  display:grid; grid-template-columns: 140px 1fr; gap:40px; align-items:center;
  border:1px solid rgba(255,255,255,.08);
}
.od-founder-card::after{
  content:""; position:absolute; inset:0; opacity:.15; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
@media(max-width:720px){
  .od-founder-card{grid-template-columns:1fr; padding:40px 32px}
}
.od-founder-avatar{
  width:120px; height:120px; border-radius:50%;
  background: linear-gradient(135deg, #F07A3C, #E24A5C, #7C6CF0);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:48px; color:#fff;
  border:2px solid rgba(255,255,255,.15);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  position:relative; z-index:2;
}
.od-founder-text{position:relative; z-index:2}
.od-founder-quote{
  font-family:var(--font-display); font-weight:600;
  font-size:24px; line-height:1.4; letter-spacing:-0.015em;
  margin:0 0 20px; text-wrap:pretty;
}
.od-founder-name{font-weight:600; font-size:15px; color:var(--ink-1)}
.od-founder-role{font-size:14px; color:var(--ink-3); margin-top:2px}

/* ============ SOCIAL / TESTIMONIALS ============ */
.od-social-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
@media(max-width:860px){ .od-social-grid{grid-template-columns:1fr} }
.od-quote{
  background:var(--bg-2);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-lg);
  padding:28px;
}
.od-quote-stars{color:var(--warn); margin-bottom:14px; font-size:15px; letter-spacing:2px}
.od-quote-body{font-size:17px; line-height:1.5; color:var(--ink-1); margin:0 0 20px; text-wrap:pretty}
.od-quote-who{display:flex; align-items:center; gap:12px}
.od-quote-avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, #F07A3C, #7C6CF0);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:#fff;
}
.od-quote-name{font-weight:600; font-size:14px}
.od-quote-role{font-size:12px; color:var(--ink-3)}
.od-social-note{
  font-family:var(--font-mono); font-size:12px; color:var(--ink-3);
  letter-spacing:.1em; text-align:center; margin-top:32px; text-transform:uppercase;
}

/* ============ WAITLIST (main CTA) ============ */
.od-waitlist{
  position:relative;
  padding:120px 0;
  background:linear-gradient(180deg, #0B0714, #120A22 50%, #0B0714);
  overflow:hidden;
}
.od-waitlist-bg{
  position:absolute; inset:-20% -20% auto -20%; height:70%;
  background:
    radial-gradient(45% 80% at 20% 20%, rgba(240,122,60,.35), transparent 60%),
    radial-gradient(45% 80% at 80% 30%, rgba(107,75,199,.45), transparent 65%);
  filter: blur(30px);
  pointer-events:none;
}
.od-waitlist-inner{
  position:relative; z-index:2;
  max-width:720px; margin:0 auto; text-align:center;
}
.od-waitlist-inner .od-h2{font-size:clamp(36px, 5vw, 56px)}

.od-form{
  margin-top:40px;
  background:rgba(20,12,40,.55);
  backdrop-filter: blur(20px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);
  padding:36px;
  text-align:left;
  box-shadow: 0 40px 100px rgba(0,0,0,.4);
}
.od-form-ltv{
  background: linear-gradient(95deg, rgba(240,122,60,.18), rgba(124,108,240,.18));
  border:1px solid rgba(240,122,60,.3);
  border-radius:var(--r-md);
  padding:14px 18px;
  font-size:15px; color:var(--ink-1);
  margin-bottom:24px; line-height:1.5;
}
.od-form-ltv strong{
  background:linear-gradient(95deg, #F5B84A, #E24A5C, #7C6CF0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:700;
}
.od-form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px}
@media(max-width:560px){ .od-form-row{grid-template-columns:1fr} }
.od-field{display:block; margin-bottom:16px}
.od-field-label{
  display:block; font-size:13px; color:var(--ink-2);
  margin-bottom:6px; font-weight:500;
}
.od-field-input{
  width:100%; padding:14px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);
  color:var(--ink-1); font-family:inherit; font-size:16px;
  transition:border-color .15s, box-shadow .15s;
}
.od-field-input::placeholder{color:var(--ink-4)}
.od-field-input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(124,108,240,.25);
}

.od-role-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
@media(max-width:560px){ .od-role-row{grid-template-columns:1fr} }
.od-role{
  text-align:left; padding:14px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);
  cursor:pointer; transition:.15s;
  color:var(--ink-1);
}
.od-role:hover{background:rgba(255,255,255,.06)}
.od-role-active{
  background:rgba(124,108,240,.15) !important;
  border-color:var(--brand) !important;
  box-shadow:0 0 0 3px rgba(124,108,240,.2);
}
.od-role-l{font-weight:600; font-size:14px; margin-bottom:2px}
.od-role-s{font-size:12px; color:var(--ink-3)}

.od-form-fine{
  font-size:13px; color:var(--ink-3); text-align:center;
  margin:16px 0 0;
}

.od-form-done{
  margin-top:40px;
  background:rgba(75,214,168,.08);
  border:1px solid rgba(75,214,168,.3);
  border-radius:var(--r-xl);
  padding:48px; text-align:center;
}
.od-form-done-icon{
  width:56px; height:56px; border-radius:50%;
  background:var(--ok); color:#0B0714;
  font-size:28px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
}
.od-form-done-title{
  font-family:var(--font-display); font-weight:700; font-size:28px;
  margin-bottom:10px; letter-spacing:-0.02em;
}
.od-form-done-body{color:var(--ink-2); font-size:17px; margin:0; max-width:460px; margin:0 auto}

/* ============ FAQ ============ */
.od-faq-list{max-width:760px; margin:0 auto}
.od-faq{
  border-bottom:1px solid rgba(255,255,255,.08);
}
.od-faq-q{
  display:flex; justify-content:space-between; align-items:center;
  width:100%; text-align:left;
  padding:22px 0;
  background:transparent; border:none;
  color:var(--ink-1); font-size:18px; font-weight:600;
  cursor:pointer;
}
.od-faq-chev{
  font-size:22px; color:var(--ink-3); font-weight:300;
  transition:transform .2s;
}
.od-faq-open .od-faq-chev{transform:rotate(45deg); color:var(--brand-hi)}
.od-faq-a{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  color:var(--ink-2); font-size:16px; line-height:1.6;
}
.od-faq-open .od-faq-a{max-height:300px; padding-bottom:22px}

/* ============ FOOTER ============ */
.od-footer{
  padding:60px 0 40px; border-top:1px solid rgba(255,255,255,.07);
  background:var(--bg-0);
}
.od-footer-inner{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.od-footer-links{display:flex; gap:24px; font-size:14px; color:var(--ink-3)}
.od-footer-links a:hover{color:var(--ink-1)}
.od-footer-copy{font-size:13px; color:var(--ink-4); font-family:var(--font-mono); letter-spacing:.1em}

/* ============ TWEAKS PANEL ============ */
.od-tweaks{
  position:fixed; right:20px; bottom:20px; z-index:100;
  width:300px;
  background:rgba(20,12,40,.95); backdrop-filter: blur(20px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  color:var(--ink-1);
  font-size:13px;
}
.od-tweaks-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.od-tweaks-body{padding:16px 18px; max-height:70vh; overflow-y:auto}
.od-tweak{margin-bottom:16px}
.od-tweak-lab{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em;
  color:var(--ink-3); text-transform:uppercase; margin-bottom:8px;
}
.od-tweak-segs{display:flex; gap:4px; flex-wrap:wrap}
.od-tweak-segs-stack{flex-direction:column}
.od-seg{
  padding:6px 10px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); border-radius:8px;
  color:var(--ink-2); font-size:12px; cursor:pointer; text-align:left;
  text-transform:capitalize;
}
.od-seg:hover{background:rgba(255,255,255,.08)}
.od-seg-on{background:rgba(124,108,240,.25); border-color:var(--brand); color:var(--ink-1)}
.od-tweak-check{
  display:flex; align-items:center; gap:8px; padding:5px 0;
  font-size:13px; color:var(--ink-2); cursor:pointer;
}
.od-tweak-check input{accent-color:var(--brand)}