@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root {
  --bg: #090c0b;
  --bg-soft: #101412;
  --panel: #151a17;
  --line: rgba(255,255,255,.12);
  --text: #f1f4ef;
  --muted: #9da69f;
  --green: #a7ff35;
  --green-dark: #6cc900;
  --blue: #367ff5;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: Inter, "Noto Sans JP", sans-serif; line-height: 1.8; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 999; top: 8px; left: 8px; padding: 8px 14px; color: #000; background: var(--green); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid transparent; transition: .3s; }
.site-header.scrolled { background: rgba(9,12,11,.88); border-color: var(--line); backdrop-filter: blur(18px); }
.header-inner { height: 82px; display: flex; align-items: center; gap: 34px; }
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; width: auto; height: 34px; }
.desktop-nav { display: flex; gap: 30px; margin-left: auto; color: #c2c8c3; font-size: 11pt; }
.desktop-nav a { transition: color .2s; }
.desktop-nav a:hover { color: var(--green); }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 40px; padding: 0 24px; background: var(--green); color: #0a0d0b; border: 1px solid var(--green); font-weight: 700; line-height: 1; transition: .25s; }
.button:hover { background: #c2ff77; transform: translateY(-2px); }
.button-small { min-height: 44px; gap: 20px; padding: 0 18px; font-size: 11pt; }
.menu-button, .mobile-nav { display: none; }

.hero { min-height: 790px; height: 100svh; max-height: 980px; position: relative; display: grid; align-items: center; overflow: hidden; background: radial-gradient(circle at 80% 38%, #1d291d 0, transparent 35%); }
.hero:before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(to right, transparent 0, #000 60%, transparent); }
.hero-glow { position: absolute; width: 430px; aspect-ratio: 1; right: 7%; top: 26%; background: var(--green); opacity: .07; filter: blur(90px); border-radius: 50%; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 42% 58%; align-items: center; padding-top: 70px; }
.eyebrow, .section-number { margin: 0 0 26px; color: var(--green); font-size: 11pt; font-weight: 700; letter-spacing: .2em; }
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow span { width: 30px; height: 1px; background: var(--green); }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 25px; font-size: clamp(60px,5vw,82px); line-height: .98; letter-spacing: -.07em; font-weight: 600; }
h1 em, h2 em { color: var(--green); font-style: normal; }
.hero-line { display: inline-block; white-space: nowrap; }
.hero-lead { max-width: 500px; margin-bottom: 15px; font-size: 20px; font-weight: 600; line-height: 1.7; }
.hero-description { max-width: 530px; color: var(--muted); font-size: 11pt; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.text-link { padding: 10px 0; border-bottom: 1px solid #687069; font-size: 11pt; }
.text-link span { margin-left: 14px; color: var(--green); }
.compatibility { display: flex; gap: 10px; margin-top: 30px; }
.compatibility span { padding: 5px 10px; border: 1px solid var(--line); color: #b8c0ba; font-size: 11pt; letter-spacing: .08em; }
.hero-visual { position: relative; min-height: 530px; perspective: 1200px; }
.product-shot { overflow: hidden; border: 1px solid #4a524c; border-radius: 7px; background: #1a1a1a; box-shadow: 0 45px 90px rgba(0,0,0,.58); }
.product-shot img { display: block; width: 100%; height: auto; }
.hero-product-shot { position: absolute; width: 112%; left: 3%; top: 55px; transform: rotateY(-7deg) rotateX(2deg); transform-origin: center; }
.hero-mini-shot { position: absolute; z-index: 2; width: 190px; right: -5%; bottom: 0; transform: rotateY(-4deg); }
.app-window { position: absolute; width: 104%; left: 5%; top: 48px; background: #111411; border: 1px solid #4a524c; border-radius: 5px; overflow: hidden; box-shadow: 0 50px 90px rgba(0,0,0,.55); transform: rotateY(-7deg) rotateX(2deg); transform-origin: center; }
.app-titlebar, .app-toolbar, .app-status, .mini-top { display: flex; align-items: center; justify-content: space-between; }
.app-titlebar { height: 36px; padding: 0 12px; background: #232723; color: #aeb4af; font-size: 11pt; }
.app-brand b, .interface-top b { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; background: var(--green); color: #111; }
.window-controls { letter-spacing: .5em; }
.app-toolbar { height: 65px; padding: 10px; border-bottom: 1px solid #343934; gap: 8px; }
.app-toolbar button { width: 76px; align-self: stretch; border: 1px solid #535b54; background: #202420; color: #ccd1cc; font-size: 11pt; }
.app-toolbar .go-button { width: 105px; color: var(--green); border-color: #75994b; font-size: 21px; }
.lock-label { margin-left: auto; color: var(--green); font-size: 11pt; }
.app-body { display: grid; grid-template-columns: 2fr .8fr; min-height: 320px; }
.cue-panel { border-right: 1px solid #363b36; }
.workspace-name { padding: 12px; color: #e6eae6; font-size: 11pt; font-weight: 700; }
.cue-head, .cue-row { display: grid; grid-template-columns: 36px 1fr 58px 55px; align-items: center; position: relative; padding: 7px 10px 7px 22px; font-size: 11pt; }
.cue-head { background: #242824; color: #949b95; }
.cue-row { border-bottom: 1px solid #252925; color: #9ba19c; }
.cue-row strong { color: #d8ddd8; font-weight: 500; }
.cue-row.active { background: #285fac; color: white; }
.cue-color { position: absolute; left: 5px; width: 4px; height: 70%; border-radius: 3px; }
.blue { background: #3c88ff!important; }.green { background: #5ade47!important; }.amber { background: #ffb536!important; }.violet { background: #a66eff!important; }.red { background:#ff4e4e!important; }.gray { background: #858b86!important; }
.cue-row.muted { opacity: .6; }
.now-panel { padding: 22px 16px; }
.now-label { display: block; color: var(--green); font-size: 11pt; font-weight: 700; }
.now-panel strong { display: block; margin-top: 5px; font-size: 15px; }
.time { margin: 30px 0 12px; color: var(--green); font-size: 31px; font-weight: 500; letter-spacing: -.05em; }
.progress, .mini-progress { height: 3px; background: #3e453f; }
.progress span, .mini-progress span { display: block; width: 41%; height: 100%; background: var(--green); }
.time-detail { display: flex; justify-content: space-between; margin-top: 5px; color: #707871; font-size: 11pt; }
.continue { margin-top: 45px; padding-top: 12px; border-top: 1px solid #343a35; color: #aeb5af; font-size: 11pt; }
.app-status { height: 30px; padding: 0 12px; border-top: 1px solid #333a34; color: #737b74; font-size: 11pt; }
.mini-window { position: absolute; width: 215px; right: -5%; bottom: 6px; padding: 0 16px 16px; background: #171b18; border: 1px solid #5c665e; box-shadow: 0 20px 45px rgba(0,0,0,.55); transform: rotateY(-4deg); }
.mini-top { height: 32px; margin-inline: -16px; padding-inline: 12px; background: #292e2a; color: #aab1ab; font-size: 11pt; }
.mini-window small { display: block; margin-top: 13px; color: var(--green); font-size: 11pt; }
.mini-window strong { display: block; font-size: 11pt; }
.mini-time { margin: 10px 0; color: var(--green); font-size: 23px; }
.signal { position: absolute; z-index: -1; border: 1px solid rgba(167,255,53,.25); border-radius: 50%; }
.signal-a { width: 520px; height: 520px; left: 2%; top: 0; }
.signal-b { width: 670px; height: 670px; left: -10%; top: -75px; }
.hero-scroll { position: absolute; bottom: 24px; left: 50%; display: flex; align-items: center; gap: 14px; color: #768078; font-size: 11pt; letter-spacing: .2em; writing-mode: vertical-rl; }
.hero-scroll span { width: 1px; height: 35px; background: linear-gradient(var(--green),transparent); }

.section { padding: 130px 0; }
.section-dark { background: #0e1210; border-block: 1px solid rgba(255,255,255,.06); }
.statement-grid { display: grid; grid-template-columns: 25% 75%; }
h2 { margin-bottom: 28px; font-size: clamp(38px,4.5vw,66px); line-height: 1.28; letter-spacing: -.055em; font-weight: 600; }
.statement-grid > div { max-width: 760px; }
.statement-grid > div > p { max-width: 650px; color: var(--muted); font-size: 16px; }
.network-flow { display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: center; margin-top: 90px; padding: 35px 45px; border: 1px solid var(--line); background: var(--bg-soft); }
.device { display: flex; align-items: center; gap: 15px; }
.device-icon { width: 54px; height: 40px; display: grid; place-items: center; border: 1px solid #606961; color: var(--green); font-size: 24px; }
.mac-icon:before { content:""; width: 18px; height: 22px; border: 2px solid #9ba49d; border-radius: 2px; }
.device small { display: block; color: #69726b; font-size: 11pt; letter-spacing: .15em; }
.device strong { font-size: 11pt; }
.network-line { display: flex; align-items: center; gap: 10px; color: #6e776f; font-size: 11pt; letter-spacing: .14em; white-space: nowrap; }
.network-line span { position: relative; width: 100%; height: 1px; background: #3d453e; }
.network-line span:after { content:""; position:absolute; width:5px; height:5px; top:-2px; right:0; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.network-line span:last-child:after { left:0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 70px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { max-width: 360px; color: var(--muted); font-size: 11pt; }
.feature-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature-card { position: relative; min-height: 360px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: .3s; }
.feature-card:hover { background: #151b17; transform: translateY(-4px); }
.feature-card-image { grid-column: span 2; }
.feature-screenshot { display:block; width:100%; height:auto; margin:28px 0 24px; border:1px solid #3d443e; border-radius:4px; }
.feature-screenshot-frame { min-height:275px; display:flex; align-items:center; margin:28px 0 24px; }
.feature-screenshot-frame .feature-screenshot { margin:0; }
.now-playing-screenshot { width:auto; max-width:100%; max-height:275px; margin-inline:auto!important; }
.card-index { color: #535c54; font-size: 11pt; }
.feature-icon { height: 85px; margin: 50px 0 28px; display: flex; align-items: center; color: var(--green); font-size: 36px; }
.rows-icon { flex-direction: column; align-items: stretch; justify-content: center; gap: 9px; }
.rows-icon i { display:block; height: 2px; background:#647064; }
.rows-icon i:nth-child(2) { width:75%; background:var(--green); }
.play-icon { width: 64px; height:64px; justify-content:center; border:1px solid #60705f; border-radius:50%; font-size:18px; }
.control-icon { width:70px; height:55px; justify-content:center; border:1px solid var(--green); font-size:18px; }
.feature-card h3 { margin-bottom: 13px; font-size: 18px; }
.feature-card p { color: var(--muted); font-size: 11pt; }

.screen-section { overflow:hidden; }
.interface-demo { position:relative; width:92%; margin:110px auto 30px; border:1px solid #505952; background:#111411; box-shadow:0 45px 90px #000; }
.interface-screenshot { overflow: visible; border-radius: 8px; background: transparent; }
.interface-screenshot > img { display: block; width: 100%; height: auto; border-radius: 7px; }
.interface-top { height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:#282d29; color:#aeb5af; font-size: 11pt; }
.connected-dot { color:var(--green); font-size: 11pt; }
.interface-controls { height:85px; display:flex; align-items:center; gap:10px; padding:12px; border-bottom:1px solid #3b423c; }
.interface-controls > b,.interface-controls > span { height:100%; min-width:90px; display:grid; place-items:center; border:1px solid #505852; color:#aeb4af; font-size: 11pt; }
.interface-controls > b { min-width:135px; color:var(--green); border-color:#759b48; font-size:25px; }
.interface-controls small { margin-left:auto; color:#717971; }
.interface-main { display:grid; grid-template-columns:2fr .72fr; min-height:410px; }
.interface-main > div { border-right:1px solid #3a413b; }
.demo-head,.demo-row { display:grid; grid-template-columns:34px 1.6fr .7fr .7fr .6fr; align-items:center; position:relative; min-height:42px; padding:0 20px 0 32px; }
.demo-head { min-height:36px; background:#252a26; color:#8c948d; font-size: 11pt; }
.demo-row { border-bottom:1px solid #272d28; color:#919a92; font-size: 11pt; }
.demo-row i { position:absolute; left:10px; width:5px; height:60%; border-radius:3px; }
.demo-row strong { color:#dce1dc; font-weight:500; }
.demo-row.selected { background:#2762ae; color:#fff; }
.interface-main aside { padding:32px 22px; }
.interface-main aside small { display:block; color:var(--green); font-size: 11pt; letter-spacing:.1em; }
.interface-main aside > strong { display:block; margin-top:7px; font-size:18px; }
.big-time { display:block; margin-top:45px; color:var(--green); font-size:44px; letter-spacing:-.05em; }
.demo-progress { height:4px; margin-top:14px; background:#3c443d; }
.demo-progress i { display:block; width:41%; height:100%; background:var(--green); }
.demo-times { display:flex; justify-content:space-between; margin-top:7px; color:#777f78; font-size: 11pt; }
.interface-main aside hr { margin:55px 0 20px; border:0; border-top:1px solid #343b35; }
.interface-main aside b { color:#b6bdb7; font-size: 11pt; }
.interface-footer { height:34px; display:flex; justify-content:space-between; align-items:center; padding:0 15px; border-top:1px solid #343b35; color:#6f7870; font-size: 11pt; }
.callout { position:absolute; padding:7px 12px; background:var(--green); color:#101310; font-size: 11pt; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,.3); }
.callout:after { content:""; position:absolute; height:1px; width:70px; background:var(--green); }
.callout-cues { left:-75px; top:48%; }.callout-cues:after { left:100%; top:50%; }
.callout-now { right:-85px; top:38%; }.callout-now:after { right:100%; top:50%; }
.callout-go { top:-56px; left:50px; }.callout-go:after { top:100%; left:50%; width:1px; height:35px; }
.callout-lock { right:25px; bottom:-50px; }.callout-lock:after { bottom:100%; left:50%; width:1px; height:30px; }

.safety-section { background:#f0f2ed; color:#111511; }
.safety-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.safety-section .section-number { color:#518b0f; }
.large-copy { max-width:530px; color:#5c655e; font-size:15px; }
.safety-list article { display:grid; grid-template-columns:55px 1fr; gap:20px; padding:32px 0; border-top:1px solid #c5cac3; }
.safety-list article:last-child { border-bottom:1px solid #c5cac3; }
.safety-list article > span { color:#7aae37; font-size: 11pt; }
.safety-list h3 { margin-bottom:8px; font-size:19px; }
.safety-list p { margin:0; color:#677068; font-size: 11pt; }

.mini-section { background:#0e1210; }
.mini-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:110px; align-items:center; }
.mini-stage { position:relative; min-height:480px; background:#151a17; border:1px solid #303732; overflow:hidden; }
.work-screen { position:absolute; inset:45px 35px; background:#101310; border:1px solid #343b35; }
.work-top { height:55px; background:#252a26; border-bottom:1px solid #3b423c; }
.work-tracks { padding:50px 40px; }
.work-tracks span { display:block; height:35px; margin-bottom:20px; background:linear-gradient(90deg,#243d2c,#1a271e); border-left:3px solid #4eac62; }
.mini-product { position:absolute; right:18px; top:90px; width:245px; padding:0 20px 18px; background:#171b18; border:1px solid #687269; box-shadow:0 30px 50px #000; }
.current-mini-product { width:300px; padding:0; overflow:hidden; border-radius:10px; }
.current-mini-product img { display:block; width:100%; height:auto; }
.mini-product > div { display:flex; justify-content:space-between; margin:0 -20px 17px; padding:9px 15px; background:#292e2a; color:#aeb5af; font-size: 11pt; }
.mini-product small { display:block; color:var(--green); font-size: 11pt; }
.mini-product strong { display:block; }
.mini-product em { display:block; margin:16px 0 10px; color:var(--green); font-size:36px; font-style:normal; }
.mini-product > i { display:block; height:3px; background:#3c443d; }
.mini-product > i span { display:block; width:41%; height:100%; background:var(--green); }
.mini-product p { margin:6px 0 0; color:#717a72; font-size: 11pt; }
.check-list { margin:35px 0 0; padding:0; list-style:none; }
.check-list li { padding:13px 0; border-bottom:1px solid var(--line); color:#c0c7c1; font-size: 11pt; }
.check-list li:before { content:"✓"; margin-right:13px; color:var(--green); }

.scenes-section { background:#0b0e0c; }
.scene-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.scene-card { min-height:320px; padding:35px 28px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; background:linear-gradient(145deg,#1d241f,#111512); }
.scene-card:before { content:""; position:absolute; width:160px; height:160px; right:-60px; top:-60px; border:1px solid rgba(167,255,53,.2); border-radius:50%; transition:.4s; }
.scene-card:hover:before { transform:scale(1.8); background:rgba(167,255,53,.04); }
.scene-card > span { position:absolute; top:25px; left:28px; color:var(--green); font-size: 11pt; letter-spacing:.2em; }
.scene-card h3 { margin-bottom:12px; font-size:18px; }
.scene-card p { margin:0; color:var(--muted); font-size: 11pt; }

.setup-section { background:#f0f2ed; color:#111511; }
.setup-heading { text-align:center; }
.setup-heading .section-number { color:#518b0f; }
.setup-heading p:last-child { color:#697169; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); margin:70px 0 0; padding:0; list-style:none; border-top:1px solid #c7ccc5; border-left:1px solid #c7ccc5; }
.steps li { min-height:320px; position:relative; padding:30px; border-right:1px solid #c7ccc5; border-bottom:1px solid #c7ccc5; }
.steps li > span { color:#7a837b; font-size: 11pt; }
.steps li:not(:last-child):after { content:"→"; position:absolute; z-index:2; right:-13px; top:50%; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#111511; color:var(--green); font-size: 11pt; }
.step-icon { height:95px; display:flex; align-items:center; color:#518b0f; font-size:50px; }
.steps h3 { margin-bottom:12px; font-size:19px; }
.steps p { color:#687068; font-size: 11pt; }
.manual-note { margin:25px 0 0; text-align:center; color:#657065; font-size: 11pt; }
.manual-note:before { content:"✓"; color:#518b0f; margin-right:8px; }

.division-section { background:#111512; }
.division-heading { max-width:760px; margin-bottom:65px; }
.division-heading > p:last-child { color:var(--muted); }
.division-table { display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; }
.division-column { border:1px solid var(--line); background:#151a17; }
.division-title { padding:28px 35px; border-bottom:1px solid var(--line); }
.division-title span { color:#707971; font-size: 11pt; letter-spacing:.2em; }
.division-title h3 { margin:5px 0 0; }
.division-column ul { list-style:none; margin:0; padding:12px 35px 22px; }
.division-column li { padding:13px 0; border-bottom:1px solid rgba(255,255,255,.07); color:#aeb5af; font-size: 11pt; }
.division-arrow { text-align:center; color:var(--green); }
.stageq-column { border-color:rgba(167,255,53,.45); background:#172018; }
.stageq-column .division-title span { color:var(--green); }
.stageq-column li:before { content:"✓"; color:var(--green); margin-right:12px; }

.requirements-section { background:#0b0e0c; }
.requirements-grid { display:grid; grid-template-columns:30% 70%; }
.requirements-cards { display:grid; grid-template-columns:1fr 1fr; }
.requirements-cards article { min-height:300px; display:flex; gap:25px; padding:40px; border:1px solid var(--line); }
.requirements-cards article + article { border-left:0; }
.os-mark { width:48px; height:48px; display:grid; place-items:center; flex:none; border:1px solid #5d685f; color:var(--green); font-size:24px; }
.os-mark.apple { font-size: 11pt; }
.requirements-cards small { color:var(--green); font-size: 11pt; letter-spacing:.15em; }
.requirements-cards h3 { margin:3px 0 20px; font-size:23px; }
.requirements-cards ul { margin:0; padding:0; list-style:none; color:var(--muted); font-size: 11pt; }
.requirements-cards li { padding:4px 0; }
.requirements-cards li:before { content:"—"; margin-right:10px; color:#606a62; }
.legal-note { grid-column:2; margin:20px 0 0; color:#69726b; font-size: 11pt; }

.buy-section { position:relative; overflow:hidden; padding:140px 0; background:#111711; border-block:1px solid rgba(167,255,53,.18); }
.buy-section:before { content:"STAGEQ"; position:absolute; right:-20px; bottom:-130px; color:rgba(167,255,53,.03); font-size:300px; font-weight:700; letter-spacing:-.08em; }
.buy-glow { position:absolute; width:500px; height:500px; right:12%; top:0; background:var(--green); opacity:.05; filter:blur(100px); }
.buy-grid { position:relative; display:grid; grid-template-columns:1fr 480px; align-items:center; gap:100px; }
.buy-grid > div:first-of-type > p:last-child { max-width:470px; color:var(--muted); }
.price-card { padding:38px; border:1px solid rgba(167,255,53,.4); background:rgba(13,18,14,.75); box-shadow:0 30px 80px rgba(0,0,0,.35); }
.price-top { display:flex; justify-content:space-between; margin-bottom:50px; color:var(--green); font-size: 11pt; letter-spacing:.14em; }
.price-card > small { color:#89928a; font-size: 11pt; }
.price { display:flex; align-items:baseline; margin-top:-5px; }
.price b { font-size:68px; line-height:1.2; letter-spacing:-.07em; }
.price span { margin-left:8px; font-size:16px; }
.price-card > p { color:#909991; font-size: 11pt; }
.store-button { width:100%; margin-top:25px; }
.store-button.is-disabled { cursor:default; background:#687366; border-color:#687366; color:#dbe0d9; pointer-events:none; }
.coming-soon { display:block; margin-top:10px; text-align:center; }

.faq-section { background:#f0f2ed; color:#111511; }
.faq-grid { display:grid; grid-template-columns:32% 68%; gap:60px; }
.faq-section .section-number { color:#518b0f; }
.accordion { border-top:1px solid #bdc3bc; }
.accordion details { border-bottom:1px solid #bdc3bc; }
.accordion summary { display:grid; grid-template-columns:38px 1fr 25px; align-items:center; gap:5px; padding:26px 0; cursor:pointer; list-style:none; font-weight:600; font-size:15px; }
.accordion summary::-webkit-details-marker { display:none; }
.accordion summary span { color:#518b0f; font-size:18px; }
.accordion summary i { color:#6f786f; font-style:normal; font-size:20px; transition:.3s; }
.accordion details[open] summary i { transform:rotate(45deg); }
.accordion details p { margin:0 40px 25px; color:#606861; font-size: 11pt; }

.final-cta { padding:160px 0; text-align:center; background:radial-gradient(circle at 50% 55%,#1d2b1c,transparent 45%),#090c0b; }
.final-cta p { color:var(--green); font-size: 11pt; letter-spacing:.25em; }
.final-cta h2 { font-size:clamp(45px,6vw,82px); }
.final-cta .button { min-width:260px; }
footer { padding:60px 0 35px; background:#070908; border-top:1px solid var(--line); }
.footer-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:45px; }
.footer-top nav { display:flex; gap:30px; color:#969f98; font-size: 11pt; }
.footer-bottom { display:flex; justify-content:space-between; padding-top:25px; border-top:1px solid var(--line); color:#586159; font-size: 11pt; }
.footer-bottom div { display:flex; gap:20px; }
.footer-pending-links span { color:#586159; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.1s; }.delay-2 { transition-delay:.2s; }.delay-3 { transition-delay:.3s; }

@media (max-width: 980px) {
  .desktop-nav { display:none; }
  .header-cta { margin-left:auto; }
  .hero { height:auto; max-height:none; padding:140px 0 100px; }
  .hero-grid { grid-template-columns:1fr; gap:45px; padding-top:0; }
  .hero-copy { max-width:650px; }
  .hero-visual { min-height:500px; }
  .hero-product-shot { width: 95%; left: 2%; }
  .hero-mini-shot { right: 0; }
  .app-window { width:95%; left:2%; }
  .mini-window { right:0; }
  .statement-grid,.requirements-grid { grid-template-columns:1fr; gap:30px; }
  .network-flow { grid-template-columns:1fr; gap:25px; }
  .network-line { min-height:45px; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .feature-card-image { grid-column:span 2; }
  .safety-grid,.mini-grid { grid-template-columns:1fr; gap:70px; }
  .scene-grid { grid-template-columns:1fr 1fr; }
  .requirements-cards,.legal-note { grid-column:1; }
  .buy-grid { grid-template-columns:1fr 430px; gap:50px; }
  .faq-grid { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
  .container { width:min(calc(100% - 32px),var(--max)); }
  .header-inner { height:68px; }
  .header-cta,.desktop-nav { display:none; }
  .menu-button { width:42px; height:42px; display:flex; flex-direction:column; justify-content:center; gap:7px; margin-left:auto; border:0; background:transparent; }
  .menu-button span { display:block; width:24px; height:1px; margin-left:auto; background:#fff; transition:.3s; }
  .menu-button[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform:translateY(-4px) rotate(-45deg); }
  .mobile-nav { position:fixed; inset:68px 0 0; display:flex; flex-direction:column; padding:30px 24px; background:#0b0e0c; transform:translateX(100%); transition:.3s; }
  .mobile-nav.open { transform:none; }
  .mobile-nav a { padding:18px 0; border-bottom:1px solid var(--line); font-size:18px; }
  .section { padding:90px 0; }
  .hero { min-height:0; padding:115px 0 80px; }
  h1 { font-size:46px; }
  .hero-lead { font-size:17px; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .compatibility { flex-wrap:wrap; }
  .hero-visual { min-height:315px; margin-top:15px; }
  .hero-product-shot { top:0; width:115%; left:-7%; transform:scale(.84); transform-origin:left top; }
  .hero-mini-shot { width:135px; right:-3%; bottom:0; }
  .app-window { top:0; width:115%; left:-7%; transform:scale(.84); transform-origin:left top; }
  .mini-window { width:170px; right:-5%; bottom:-2px; }
  .signal { display:none; }
  .hero-scroll { display:none; }
  .statement-grid { display:block; }
  .network-flow { padding:25px; margin-top:55px; }
  .section-heading { display:block; margin-bottom:45px; }
  .section-heading > p { margin-top:20px; }
  .feature-grid,.scene-grid,.steps,.requirements-cards { grid-template-columns:1fr; }
  .feature-card-image { grid-column:auto; }
  .feature-card { min-height:300px; }
  .feature-icon { margin-top:30px; }
  .interface-demo { width:130%; margin-left:-15%; transform:scale(.78); transform-origin:center top; margin-bottom:-90px; }
  .interface-screenshot { margin-bottom:-50px; }
  .callout { display:none; }
  .safety-grid { gap:45px; }
  .mini-stage { min-height:390px; }
  .work-screen { inset:30px 20px; }
  .mini-product { right:10px; width:210px; }
  .current-mini-product { width:220px; }
  .steps { border:0; }
  .steps li { min-height:260px; border:1px solid #c7ccc5; border-bottom:0; }
  .steps li:last-child { border-bottom:1px solid #c7ccc5; }
  .steps li:not(:last-child):after { content:"↓"; top:auto; right:50%; bottom:-13px; }
  .division-table { grid-template-columns:1fr; gap:12px; }
  .division-arrow { transform:rotate(90deg); }
  .requirements-cards article + article { border-left:1px solid var(--line); border-top:0; }
  .buy-grid { grid-template-columns:1fr; gap:40px; }
  .price-card { padding:28px; }
  .price b { font-size:56px; }
  .faq-grid { gap:25px; }
  .accordion summary { font-size: 11pt; }
  .footer-top,.footer-bottom { align-items:flex-start; flex-direction:column; gap:30px; }
  .footer-top nav { flex-wrap:wrap; gap:15px 25px; }
  .footer-bottom div { flex-wrap:wrap; gap:10px 18px; }
}

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