
:root {
  --ink: #08090b;
  --panel: #111317;
  --panel-2: #17191e;
  --line: rgba(255,255,255,.1);
  --muted: #9299a5;
  --paper: #f5f3ee;
  --ember: #ff5a2f;
  --ember-2: #ff8a3d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header {
  width: min(1320px, calc(100% - 48px));
  height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 19px; letter-spacing: -.03em; }
.brand-mark { width: 27px; height: 29px; display: inline-block; position: relative; background: linear-gradient(145deg,var(--ember-2),var(--ember)); clip-path: polygon(0 0,100% 0,74% 31%,100% 31%,72% 62%,41% 62%,25% 100%,0 100%); }
.brand-cut { position:absolute; background:var(--ink); height:3px; left:7px; width:16px; transform:rotate(-43deg); }
.brand-cut-a { top:10px; } .brand-cut-b { top:18px; }
.beta-pill { color: #ff936a; border: 1px solid rgba(255,117,73,.35); background: rgba(255,90,47,.08); font-size: 9px; letter-spacing: .13em; padding: 5px 7px; border-radius: 5px; margin-left: 3px; }
.desktop-nav { display:flex; align-items:center; gap:35px; color:#aeb3bc; font-size:14px; }
.desktop-nav a { transition:.2s ease; }
.desktop-nav a:hover { color:white; }
.header-cta { display:flex; align-items:center; gap:12px; background:#f6f3ed; color:#111; font-size:13px; font-weight:700; padding:11px 15px; border-radius:8px; transition:.2s ease; }
.header-cta:hover { background:white; transform:translateY(-1px); }

.hero {
  min-height: 760px;
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 94px 0 92px;
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 44px;
  align-items:center;
  position:relative;
}
.hero::before { content:""; position:absolute; inset:0 52% 0 -50vw; background:linear-gradient(90deg,rgba(255,255,255,.018),transparent); border-right:1px solid rgba(255,255,255,.035); pointer-events:none; }
.hero-glow { position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:.18; }
.hero-glow-one { width:470px; height:330px; background:#ff4e24; right:14%; top:170px; }
.hero-glow-two { width:300px; height:220px; background:#5d3fff; right:-4%; top:60px; opacity:.08; }
.hero-copy { position:relative; z-index:3; padding-left:2px; }
.eyebrow { text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:700; color:#c4c7cd; display:flex; align-items:center; gap:9px; margin-bottom:24px; }
.eyebrow span { width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 5px rgba(255,90,47,.1),0 0 20px #ff5a2f; }
h1 { margin:0; font-size:clamp(58px,6.1vw,92px); line-height:.92; letter-spacing:-.068em; font-weight:730; max-width:650px; }
h1 em { font-style:normal; color:transparent; -webkit-text-stroke:1px #8f939a; }
.hero-text { margin:30px 0 0; max-width:570px; color:#aeb3bc; font-size:18px; line-height:1.65; letter-spacing:-.01em; }
.hero-actions { display:flex; gap:12px; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:0 21px; border-radius:9px; font-weight:700; font-size:14px; transition:.2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:linear-gradient(135deg,var(--ember-2),var(--ember)); color:#130a07; box-shadow:0 10px 35px rgba(255,90,47,.18); }
.button-primary:hover { box-shadow:0 14px 40px rgba(255,90,47,.28); }
.button-secondary { border:1px solid var(--line); background:rgba(255,255,255,.035); color:#e7e7e7; }
.play-icon { font-size:9px; width:22px; height:22px; border:1px solid #656972; border-radius:50%; display:grid; place-items:center; padding-left:1px; }
.hero-note { color:#6f757f; font-size:11px; line-height:1.6; text-transform:uppercase; letter-spacing:.08em; margin:28px 0 0; max-width:500px; }

.product-stage { position:relative; min-height:520px; display:grid; place-items:center; z-index:2; perspective:1400px; }
.stage-orbit { position:absolute; border:1px solid rgba(255,255,255,.05); border-radius:50%; transform:rotate(-14deg); }
.orbit-one { width:720px; height:380px; }
.orbit-two { width:590px; height:300px; border-color:rgba(255,94,45,.09); }
.app-window { width:min(760px, 100%); height:455px; border-radius:13px; border:1px solid rgba(255,255,255,.17); background:#0d0f12; box-shadow:0 50px 100px rgba(0,0,0,.55),0 0 0 8px rgba(255,255,255,.015); overflow:hidden; transform:rotateY(-5deg) rotateX(2deg); }
.app-topbar { height:42px; background:#181a1f; border-bottom:1px solid #282b31; display:flex; align-items:center; justify-content:space-between; padding:0 14px; }
.window-title { display:flex; align-items:center; gap:7px; font-size:10px; color:#b6bac1; }
.window-title .brand-mark { width:13px; height:15px; }
.window-title .brand-cut { display:none; }
.window-controls { display:flex; gap:7px; }
.window-controls i { width:8px; height:8px; border-radius:50%; background:#3f4248; }
.app-body { height:calc(100% - 42px); display:grid; grid-template-columns:132px 1fr; }
.app-sidebar { background:#101216; border-right:1px solid #25282e; padding:21px 12px; position:relative; }
.side-brand { font-size:7px; letter-spacing:.16em; color:#555b65; padding:0 9px 11px; }
.side-item { display:flex; align-items:center; gap:10px; color:#666c76; font-size:9px; padding:10px 9px; border-radius:5px; margin-bottom:3px; }
.side-item b { font-size:7px; color:#4d525b; }
.side-item.active { background:rgba(255,90,47,.1); color:#f5c1ae; }
.side-item.active b { color:var(--ember); }
.side-progress { position:absolute; left:19px; right:19px; bottom:22px; font-size:7px; color:#666b74; }
.side-progress i { display:block; background:#292c31; height:3px; margin-top:7px; border-radius:4px; overflow:hidden; }
.side-progress b { display:block; width:84%; height:100%; background:var(--ember); }
.app-content { padding:25px 27px; background:radial-gradient(circle at 80% 0,rgba(255,90,47,.025),transparent 35%),#0d0f12; }
.content-heading { display:flex; align-items:flex-end; justify-content:space-between; }
.content-heading span,.status-card>span,.panel-top>span { color:#626873; font-size:7px; font-weight:700; letter-spacing:.14em; }
.content-heading h3 { font-size:15px; margin:7px 0 0; letter-spacing:-.02em; }
.content-heading button { color:#c3c6cc; font-size:8px; padding:7px 10px; border-radius:5px; border:1px solid #30333a; background:#17191d; }
.status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 13px; }
.status-card { min-height:78px; background:#15171b; border:1px solid #24272d; border-radius:7px; padding:12px; }
.status-card strong { display:block; font-size:19px; margin:6px 0 7px; }
.status-card small { color:#737984; font-size:7px; display:flex; align-items:center; gap:5px; }
.dot { width:5px; height:5px; border-radius:50%; display:inline-block; }
.dot.green { background:#48c982; box-shadow:0 0 8px rgba(72,201,130,.5); } .dot.amber { background:#f6a93c; }
.timeline-panel { border:1px solid #25282e; background:#121418; border-radius:8px; overflow:hidden; }
.panel-top { height:36px; border-bottom:1px solid #24272d; display:flex; align-items:center; justify-content:space-between; padding:0 13px; }
.panel-top small { color:#5d636d; font-size:7px; }
.timeline-track { height:72px; padding:12px; display:grid; grid-template-columns:repeat(6,1fr); gap:4px; position:relative; }
.timeline-track>i { display:block; border-radius:3px; background:linear-gradient(145deg,#303740,#171d23); overflow:hidden; border:1px solid #363a41; }
.timeline-track>i:nth-child(2),.timeline-track>i:nth-child(5){ background:linear-gradient(145deg,#463027,#1c1715); }
.timeline-track>i b { display:block; width:40%; height:100%; background:rgba(255,255,255,.045); transform:skewX(-10deg); }
.playhead { position:absolute; left:42%; top:7px; bottom:5px; width:1px; background:var(--ember); box-shadow:0 0 7px rgba(255,90,47,.7); }
.playhead::before { content:""; position:absolute; left:-3px; top:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--ember); }
.audio-wave { height:37px; margin:0 12px; background:rgba(255,90,47,.045); border-radius:3px; display:flex; align-items:center; gap:2px; overflow:hidden; padding:0 5px; }
.audio-wave i { width:2px; background:rgba(255,112,65,.65); border-radius:2px; }
.produce-row { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; font-size:7px; color:#747a84; }
.produce-row>div { display:flex; align-items:center; gap:5px; }
.produce-row button { background:var(--ember); border:0; color:#18100c; font-weight:700; font-size:8px; padding:8px 11px; border-radius:5px; }
.produce-row button span { margin-left:7px; }
.floating-card { position:absolute; padding:13px 15px; min-width:178px; background:rgba(24,26,31,.93); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.12); border-radius:9px; box-shadow:0 16px 40px rgba(0,0,0,.4); display:flex; align-items:center; gap:10px; }
.floating-card strong { display:block; font-size:10px; margin-bottom:4px; }
.floating-card small { display:block; color:#737984; font-size:7px; }
.floating-one { left:-8px; top:104px; animation:float 5s ease-in-out infinite; }
.floating-two { right:-12px; bottom:71px; animation:float 5s 1s ease-in-out infinite; }
.check,.resolve-icon { width:27px; height:27px; border-radius:6px; display:grid; place-items:center; }
.check { color:#77dfaa; background:rgba(72,201,130,.1); }
.resolve-icon { color:#ff8762; background:rgba(255,90,47,.1); }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

.trust-strip { min-height:72px; display:flex; align-items:center; justify-content:center; gap:27px; border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); color:#666c75; text-transform:uppercase; letter-spacing:.13em; font-size:9px; background:#0a0b0d; }
.trust-strip i { width:3px; height:3px; border-radius:50%; background:#ff673b; box-shadow:0 0 9px #ff673b; }

.section-pad { padding: 118px 0; }
.section-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.section-kicker { margin:0 0 22px; color:#ff7449; text-transform:uppercase; letter-spacing:.2em; font-size:10px; font-weight:800; }
.dark-kicker { color:#c54d2d; }
.section-kicker::before { content:""; display:inline-block; width:25px; height:1px; background:currentColor; margin:0 11px 3px 0; }
h2 { font-size:clamp(42px,5vw,72px); letter-spacing:-.055em; line-height:.98; margin:0; }
h2 em { font-style:normal; font-weight:400; color:#858b94; }

.problem-section { background:#ece9e1; color:#111216; }
.problem-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:start; }
.problem-grid h2 em { color:#777871; }
.problem-copy>p { color:#565954; font-size:18px; line-height:1.7; margin:7px 0 37px; max-width:560px; }
.time-card { border-top:1px solid #cbc8c0; border-bottom:1px solid #cbc8c0; padding:24px 0; display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; }
.time-card div>span { display:block; color:#999991; font-size:8px; letter-spacing:.14em; margin-bottom:8px; }
.time-card strong { font-size:13px; }
.time-arrow { color:#d45e39; }

.workflow-section { background:#0b0c0f; }
.section-heading-row { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:65px; }
.section-heading-row>p { color:#858b95; line-height:1.7; max-width:410px; margin:0 0 6px; }
.workflow-grid { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); }
.workflow-step { padding:28px 25px 15px 0; position:relative; min-height:300px; }
.workflow-step+.workflow-step { padding-left:25px; border-left:1px solid var(--line); }
.step-top { display:flex; justify-content:space-between; color:#5b6069; font-size:9px; letter-spacing:.12em; }
.step-top i { font-style:normal; color:#3e4248; }
.step-icon { width:76px; height:76px; border:1px solid #2d3036; border-radius:14px; margin:37px 0 30px; position:relative; background:linear-gradient(145deg,#181a1f,#0f1114); overflow:hidden; }
.step-icon b,.step-icon i { position:absolute; display:block; }
.step-icon-1 b { width:35px; height:28px; border:1px solid #ff754c; border-radius:4px; left:20px; top:24px; box-shadow:7px -7px 0 -2px #14161a,7px -7px 0 -1px #474a51; }
.step-icon-2 b { left:14px; right:14px; bottom:17px; height:28px; background:linear-gradient(135deg,#ff754c66,#26313c); clip-path:polygon(0 100%,30% 35%,52% 67%,72% 15%,100% 100%); }
.step-icon-2 i { width:8px; height:8px; border-radius:50%; background:#ff754c; top:18px; right:19px; }
.step-icon-3 b { width:46px; height:4px; background:#383d45; left:14px; top:25px; box-shadow:0 12px #383d45,0 24px #383d45; }
.step-icon-3 i { width:22px; height:4px; background:#ff754c; left:14px; top:37px; }
.step-icon-4 b { width:30px; height:30px; border:1px solid #ff754c; border-radius:50%; left:22px; top:22px; }
.step-icon-4 i { border-left:10px solid #ff754c; border-top:6px solid transparent; border-bottom:6px solid transparent; left:34px; top:31px; }
.step-icon-5 b { width:37px; height:44px; border:1px solid #4c515a; left:18px; top:15px; border-radius:3px; }
.step-icon-5 i { width:20px; height:2px; background:#ff754c; left:27px; top:37px; box-shadow:5px -5px 0 -1px #ff754c,5px 5px 0 -1px #ff754c; }
.workflow-step h3 { font-size:17px; margin:0 0 12px; }
.workflow-step p { color:#777d87; font-size:12px; line-height:1.65; margin:0; }

.features-section { background:#111318; border-top:1px solid rgba(255,255,255,.04); }
.center-heading { max-width:700px; margin:0 auto 63px; text-align:center; }
.center-heading .section-kicker::before { display:none; }
.center-heading>p:last-child { color:#858b95; line-height:1.7; max-width:530px; margin:24px auto 0; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.feature-card { min-height:292px; padding:28px; background:#17191e; border:1px solid #26292f; border-radius:13px; position:relative; overflow:hidden; transition:.25s ease; }
.feature-card:hover { transform:translateY(-4px); border-color:#3a3d44; }
.feature-card::before { content:""; position:absolute; width:150px; height:150px; border-radius:50%; filter:blur(70px); opacity:.08; right:-45px; top:-45px; background:currentColor; }
.feature-meta { display:flex; justify-content:space-between; align-items:start; color:#565c66; font-size:9px; }
.feature-glyph { width:54px; height:54px; border-radius:11px; position:relative; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); color:#ff7449; }
.feature-glyph i,.feature-glyph b,.feature-glyph em { position:absolute; display:block; font-style:normal; }
.feature-card h3 { font-size:20px; margin:44px 0 13px; letter-spacing:-.025em; }
.feature-card p { color:#858b95; font-size:13px; line-height:1.65; margin:0; max-width:310px; }
.feature-line { position:absolute; left:28px; right:28px; bottom:0; height:1px; background:linear-gradient(90deg,currentColor,transparent); opacity:.35; }
.feature-card.orange,.feature-card.orange .feature-glyph { color:#ff7449; }
.feature-card.blue,.feature-card.blue .feature-glyph { color:#5b9dff; }
.feature-card.violet,.feature-card.violet .feature-glyph { color:#ac7cff; }
.feature-card.green,.feature-card.green .feature-glyph { color:#55cc8a; }
.feature-card.pink,.feature-card.pink .feature-glyph { color:#ff638c; }
.feature-card.gold,.feature-card.gold .feature-glyph { color:#e3b45c; }
.feature-card h3,.feature-card p { color:var(--paper); }
.feature-card p { color:#858b95; }
.glyph-queue i { width:23px; height:3px; background:currentColor; top:15px; left:15px; box-shadow:0 9px currentColor,0 18px currentColor; }
.glyph-queue b { width:3px; height:3px; border-radius:50%; background:#68707c; top:15px; left:36px; box-shadow:0 9px #68707c,0 18px #68707c; }
.glyph-wave i { left:9px; right:9px; height:22px; top:16px; background:repeating-linear-gradient(90deg,transparent 0 4px,currentColor 4px 6px); clip-path:polygon(0 45%,8% 20%,16% 70%,24% 35%,32% 85%,40% 15%,48% 60%,56% 25%,64% 75%,72% 35%,80% 65%,88% 20%,100% 45%,100% 58%,88% 35%,80% 78%,72% 50%,64% 90%,56% 42%,48% 74%,40% 28%,32% 100%,24% 50%,16% 85%,8% 38%,0 58%); }
.glyph-caption i { width:33px; height:4px; left:10px; top:16px; background:#6b6478; box-shadow:0 9px currentColor,0 18px #6b6478; }
.glyph-caption b { width:17px; height:4px; left:10px; top:34px; background:currentColor; }
.glyph-motion i { width:25px; height:25px; border:1px solid currentColor; border-radius:50%; left:14px; top:14px; }
.glyph-motion b { width:8px; height:8px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(20deg); right:10px; top:13px; }
.glyph-resolve i { width:17px; height:17px; border:1px solid currentColor; transform:rotate(45deg); left:18px; top:18px; }
.glyph-resolve b { width:5px; height:5px; background:currentColor; transform:rotate(45deg); left:24px; top:24px; }
.glyph-resume i { width:28px; height:28px; border:2px solid currentColor; border-left-color:transparent; border-radius:50%; left:12px; top:12px; }
.glyph-resume b { border-right:7px solid currentColor; border-top:4px solid transparent; border-bottom:4px solid transparent; left:9px; top:16px; transform:rotate(-22deg); }

.director-section { background:#090a0c; }
.director-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:80px; align-items:center; }
.director-copy>p:not(.section-kicker) { color:#858b95; line-height:1.75; margin:28px 0; }
.director-copy ul { list-style:none; padding:0; margin:31px 0 0; display:grid; gap:14px; color:#b4b8bf; font-size:13px; }
.director-copy li span { color:#ff754c; margin-right:10px; }
.director-ui { border:1px solid #2b2e35; border-radius:13px; background:#111318; box-shadow:0 40px 90px #000; overflow:hidden; transform:rotate(1deg); }
.director-bar { height:44px; padding:0 15px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #282b31; color:#717782; font-size:8px; letter-spacing:.11em; }
.director-bar>span { display:flex; align-items:center; gap:8px; }
.director-bar .brand-mark { width:12px; height:14px; }
.director-bar .brand-cut { display:none; }
.director-body { display:grid; grid-template-columns:1fr 165px; min-height:375px; }
.director-preview { margin:15px; position:relative; min-height:345px; overflow:hidden; border-radius:6px; background:linear-gradient(#3a2630 0 44%,#17161a 44%); }
.preview-sky { position:absolute; inset:0; background:radial-gradient(circle at 65% 33%,#f17b4b 0 2%,#823d36 3%,transparent 18%),linear-gradient(160deg,#1b1b29,#593136 45%,#d0603d); opacity:.85; }
.preview-city { position:absolute; left:0; right:0; bottom:0; height:56%; background:linear-gradient(90deg,#121318 0 7%,transparent 7% 9%,#17181d 9% 19%,transparent 19% 21%,#101116 21% 35%,transparent 35% 37%,#18191d 37% 43%,transparent 43% 45%,#111216 45% 60%,transparent 60% 63%,#18191d 63% 72%,transparent 72% 75%,#121318 75% 100%); clip-path:polygon(0 35%,8% 35%,8% 18%,19% 18%,19% 50%,31% 50%,31% 8%,43% 8%,43% 41%,55% 41%,55% 23%,69% 23%,69% 52%,80% 52%,80% 0,91% 0,91% 34%,100% 34%,100% 100%,0 100%); }
.caption-preview { position:absolute; left:50%; transform:translateX(-50%); bottom:73px; width:90%; text-align:center; font-size:15px; font-weight:900; text-shadow:0 2px 5px #000; }
.caption-preview span { display:block; color:white; }
.caption-preview strong { display:inline-block; background:#ff5a2f; color:#111; padding:2px 5px; margin-top:3px; }
.preview-controls { position:absolute; left:0; right:0; bottom:0; height:45px; background:rgba(9,10,12,.92); display:flex; align-items:center; justify-content:space-between; padding:0 14px; color:#818690; font-size:8px; }
.preview-controls i { font-style:normal; color:#ff7147; }
.director-settings { border-left:1px solid #282b31; padding:20px 14px; }
.director-settings>span { color:#666c76; font-size:7px; letter-spacing:.14em; }
.director-settings label { display:block; color:#676d77; font-size:7px; margin-top:20px; }
.director-settings label b { display:block; margin-top:7px; padding:8px; background:#181a1f; color:#bbc0c8; border:1px solid #2b2e34; border-radius:4px; font-weight:500; }
.color-row { display:flex; gap:7px; margin:18px 0; }
.color-row i { width:26px; height:26px; border-radius:4px; background:white; border:3px solid #22252a; box-shadow:0 0 0 1px #363a41; }
.color-row i:nth-child(2) { background:#ff5a2f; }.color-row i:nth-child(3) { background:#0d0e11; }
.director-settings button { width:100%; border:0; border-radius:4px; background:#ff5a2f; color:#130a07; font-weight:700; padding:9px 4px; font-size:7px; }

.beta-section { background:#111318; }
.beta-panel { min-height:550px; display:grid; grid-template-columns:1fr 1fr; border-radius:18px; overflow:hidden; border:1px solid #292c32; background:radial-gradient(circle at 20% 10%,rgba(255,90,47,.13),transparent 35%),#0c0d10; }
.beta-copy { padding:70px; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; }
.beta-status { color:#fa916f; font-size:9px; text-transform:uppercase; letter-spacing:.15em; display:flex; align-items:center; gap:9px; }
.beta-status i { width:7px; height:7px; background:#ff5a2f; border-radius:50%; box-shadow:0 0 12px #ff5a2f; }
.beta-copy h2 { margin:25px 0; }
.beta-copy>p { color:#8b9099; line-height:1.7; max-width:430px; margin:0 0 30px; }
.beta-copy small { color:#5f646d; margin-top:16px; font-size:9px; letter-spacing:.07em; text-transform:uppercase; }
.requirements { background:#17191e; padding:55px 58px; border-left:1px solid #292c32; }
.requirements-top { display:flex; justify-content:space-between; color:#6a707a; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
.requirements-top p { margin:0; }
.requirements h3 { font-size:26px; margin:41px 0 7px; }
.price-line { display:flex; align-items:end; gap:12px; border-bottom:1px solid #30333a; padding-bottom:28px; }
.price-line strong { font-size:55px; line-height:1; letter-spacing:-.05em; }
.price-line span { color:#7f858e; font-size:11px; padding-bottom:7px; }
.requirements ul { list-style:none; padding:25px 0 20px; display:grid; gap:14px; border-bottom:1px solid #30333a; }
.requirements li { color:#a9adb5; font-size:12px; }.requirements li span { color:#58cf8d; margin-right:9px; }
.price-note { color:#676d76; font-size:10px; line-height:1.6; }

.docs-section { background:#ece9e1; color:#121317; }
.docs-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }
.docs-copy { position:sticky; top:100px; align-self:start; }
.docs-copy h2 em { color:#777871; }
.docs-copy>p:not(.section-kicker) { color:#656660; line-height:1.7; margin:26px 0 28px; max-width:420px; }
.docs-copy>a { color:#c95030; font-weight:700; font-size:13px; display:flex; gap:10px; }
.docs-list { border-top:1px solid #c9c6bf; }
.docs-list a { height:64px; display:grid; grid-template-columns:45px 1fr auto; align-items:center; border-bottom:1px solid #c9c6bf; transition:.2s; }
.docs-list a:hover { padding-left:8px; color:#d15634; }
.docs-list span { color:#999990; font-size:9px; }.docs-list strong { font-size:14px; }.docs-list i { font-style:normal; font-size:13px; }

.roadmap-section { background:#0a0b0d; }
.compact-heading { margin-bottom:70px; }
.roadmap-track { display:grid; grid-template-columns:repeat(3,1fr); position:relative; border-top:1px solid #30333a; }
.roadmap-track article { padding:32px 45px 0 0; position:relative; }
.roadmap-track article+article { padding-left:45px; border-left:1px solid #25282e; }
.roadmap-track span { color:#5e636d; font-size:8px; letter-spacing:.15em; }
.roadmap-track i { position:absolute; top:-5px; left:-1px; width:9px; height:9px; background:#3a3e45; border-radius:50%; box-shadow:0 0 0 6px #0a0b0d; }
.roadmap-track article+article i { left:-5px; }
.roadmap-track .done i { background:#58c98a; }.roadmap-track .active i { background:#ff5a2f; box-shadow:0 0 0 6px #0a0b0d,0 0 15px #ff5a2f; }
.roadmap-track h3 { font-size:18px; margin:27px 0 10px; }.roadmap-track p { color:#797f89; font-size:12px; line-height:1.7; margin:0; }
.changelog-line { display:grid; grid-template-columns:120px 1fr auto; gap:24px; align-items:center; border:1px solid #272a30; border-radius:10px; margin-top:70px; padding:19px 22px; background:#111318; }
.changelog-line span { color:#ff7449; font-size:8px; text-transform:uppercase; letter-spacing:.14em; }.changelog-line strong { font-size:12px; font-weight:500; }.changelog-line a { color:#aeb3bc; font-size:11px; }

.faq-section { background:#111318; }
.faq-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:100px; }
.faq-list { border-top:1px solid #30333a; }
.faq-list details { border-bottom:1px solid #30333a; }
.faq-list summary { list-style:none; min-height:74px; display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:700; cursor:pointer; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { font-weight:300; font-size:22px; color:#8b9099; transition:.2s; }
.faq-list details[open] summary span { transform:rotate(45deg); color:#ff7449; }
.faq-list details p { color:#858b95; line-height:1.7; font-size:13px; margin:-4px 40px 24px 0; }

.community-section { padding:95px 0; position:relative; overflow:hidden; background:linear-gradient(115deg,#d94825,#ff6b38 58%,#ff873f); color:#160b08; }
.community-glow { position:absolute; width:500px; height:500px; border:1px solid rgba(255,255,255,.22); border-radius:50%; right:12%; top:-240px; box-shadow:0 0 0 80px rgba(255,255,255,.035),0 0 0 160px rgba(255,255,255,.025); }
.community-inner { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:120px; align-items:end; }
.community-section .section-kicker { color:#41150c; }.community-section h2 em { color:rgba(22,11,8,.55); }
.community-inner>div:last-child p { max-width:430px; line-height:1.7; margin:0 0 25px; }
.button-light { background:#15100e; color:#f8e7df; }

footer { background:#07080a; padding:75px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.8fr repeat(3,1fr); gap:45px; padding-bottom:65px; }
.footer-brand p { color:#696f79; font-size:12px; margin:17px 0 0; }
.footer-grid>div:not(.footer-brand) { display:flex; flex-direction:column; gap:13px; }
.footer-grid>div>span { color:#555b65; font-size:8px; letter-spacing:.17em; margin-bottom:7px; }
.footer-grid>div>a { color:#9298a1; font-size:12px; }.footer-grid>div>a:hover { color:white; }
.footer-bottom { border-top:1px solid #22252a; padding-top:25px; display:flex; justify-content:space-between; color:#4f545d; font-size:8px; letter-spacing:.07em; text-transform:uppercase; }

@media (max-width: 980px) {
  .desktop-nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:70px; text-align:center; }
  .hero-copy { display:flex; align-items:center; flex-direction:column; }
  .product-stage { min-height:480px; width:100%; max-width:780px; margin:0 auto; }
  .floating-one { left:10px; } .floating-two { right:10px; }
  .section-pad { padding:90px 0; }
  .problem-grid,.director-grid,.docs-grid,.faq-grid { grid-template-columns:1fr; gap:55px; }
  .workflow-grid { grid-template-columns:repeat(3,1fr); }
  .workflow-step:nth-child(4) { border-left:0; padding-left:0; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .docs-copy { position:static; }
  .community-inner { gap:70px; }
}
@media (max-width: 640px) {
  .site-header,.hero { width:min(100% - 30px,1320px); }
  .site-header { height:68px; }
  .brand { font-size:17px; }
  .beta-pill { display:none; }
  .header-cta { padding:10px 12px; font-size:12px; }
  .hero { padding:60px 0 65px; min-height:auto; }
  h1 { font-size:57px; }
  .hero-text { font-size:16px; }
  .hero-actions { flex-direction:column; width:100%; }
  .button { width:100%; }
  .product-stage { min-height:330px; margin-top:20px; }
  .app-window { height:300px; transform:none; }
  .app-body { grid-template-columns:74px 1fr; }
  .app-sidebar { padding:15px 7px; }
  .side-item { padding:7px 4px; gap:4px; }
  .side-item span { font-size:7px; }
  .side-progress { display:none; }
  .app-content { padding:14px 12px; }
  .content-heading h3 { font-size:10px; }
  .content-heading button { display:none; }
  .status-grid { margin:14px 0 8px; gap:5px; }
  .status-card { min-height:54px; padding:7px; }
  .status-card strong { font-size:12px; margin:3px 0; }
  .timeline-track { height:50px; padding:7px; }
  .audio-wave { display:none; }
  .produce-row { height:39px; }
  .floating-card { display:none; }
  .trust-strip { padding:20px 30px; flex-wrap:wrap; gap:14px; text-align:center; line-height:1.5; }
  .section-shell { width:calc(100% - 30px); }
  .section-pad { padding:72px 0; }
  h2 { font-size:43px; }
  .problem-grid { gap:40px; }
  .problem-copy>p { font-size:16px; }
  .time-card { grid-template-columns:1fr; }.time-arrow { transform:rotate(90deg); }
  .section-heading-row { display:block; margin-bottom:45px; }
  .section-heading-row>p { margin-top:24px; }
  .workflow-grid { grid-template-columns:1fr; border-top:0; }
  .workflow-step,.workflow-step+.workflow-step,.workflow-step:nth-child(4) { padding:24px 0; border-left:0; border-top:1px solid var(--line); min-height:auto; display:grid; grid-template-columns:75px 1fr; column-gap:20px; }
  .step-top { grid-column:1/3; }.step-top i { display:none; }
  .step-icon { grid-row:2/4; margin:24px 0 0; width:65px; height:65px; }
  .workflow-step h3 { margin:25px 0 8px; }.workflow-step p { grid-column:2; }
  .step-icon-1 b { left:15px; top:20px; }.step-icon-2 b{left:10px;right:10px}.step-icon-3 b{left:9px}.step-icon-3 i{left:9px}.step-icon-4 b{left:17px;top:17px}.step-icon-4 i{left:29px;top:26px}.step-icon-5 b{left:13px;top:10px}.step-icon-5 i{left:22px;top:32px}
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:265px; }
  .director-body { grid-template-columns:1fr; }.director-settings { display:none; }.director-ui { transform:none; }.director-preview { min-height:290px; }
  .beta-panel { grid-template-columns:1fr; }.beta-copy,.requirements { padding:44px 28px; }.requirements { border-left:0; border-top:1px solid #292c32; }
  .docs-grid,.faq-grid { gap:42px; }
  .roadmap-track { grid-template-columns:1fr; border-top:0; }
  .roadmap-track article,.roadmap-track article+article { padding:25px 0 32px 27px; border-left:1px solid #30333a; border-top:0; }
  .roadmap-track i,.roadmap-track article+article i { left:-5px; top:30px; }
  .roadmap-track h3 { margin:10px 0; }
  .changelog-line { grid-template-columns:1fr; gap:10px; margin-top:35px; }
  .community-inner { grid-template-columns:1fr; gap:35px; }.community-section { padding:72px 0; }
  .footer-grid { grid-template-columns:1.3fr 1fr; row-gap:45px; }.footer-bottom { flex-direction:column; gap:10px; line-height:1.5; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .floating-card { animation:none; }
}
