/* 01 — Orbit Light: quiet premium SaaS, generous white space, cobalt + mint. */
.design-orbit {
  --bg: #f7f9fc;
  --surface: #ffffff;
  --surface-2: #eff3f8;
  --text: #111827;
  --muted: #647084;
  --line: #dce3ed;
  --accent: #4b68ed;
  --accent-2: #27b78b;
  --accent-soft: #ebefff;
  --dark: #121925;
  --radius: 25px;
}
.design-orbit .hero { background: radial-gradient(circle at 72% 34%, #edf1ff 0, transparent 35%); }
.design-orbit .connection-visual { transform: perspective(1100px) rotateY(-2deg) rotateX(1deg); }
.design-orbit .problem-strip { box-shadow: 0 20px 50px rgba(30, 44, 74, .035); }
.design-orbit .download-card.featured::before { content: 'Recommended for mobile'; position: absolute; top: 16px; right: 16px; padding: 6px 9px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); font-size: 8px; font-weight: 700; }
.design-orbit .download-card { position: relative; }

/* 02 — Midnight Signal: cinematic dark infrastructure with electric cyan. */
.design-midnight {
  --bg: #080c12;
  --surface: #0e141d;
  --surface-2: #0b1119;
  --text: #f0f4f8;
  --muted: #8b98a9;
  --line: #202b38;
  --accent: #20d5f6;
  --accent-2: #55e1a7;
  --accent-soft: #112a33;
  --dark: #05080c;
  --shadow: 0 30px 100px rgba(0,0,0,.45);
  --radius: 10px;
  --display-font: "Arial Narrow", "Segoe UI", sans-serif;
}
.design-midnight .site-header { background: rgba(8,12,18,.78); }
.design-midnight .brand img, .design-midnight .footer-brand .brand img { filter: invert(1); }
.design-midnight .hero { min-height: 860px; background: radial-gradient(circle at 74% 46%, rgba(20,167,213,.14), transparent 35%), linear-gradient(180deg, #080c12, #0a1018); }
.design-midnight .hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(40,58,75,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(40,58,75,.18) 1px, transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(to bottom, black, transparent 90%); pointer-events: none; }
.design-midnight h1 { text-transform: uppercase; font-size: clamp(55px, 6.2vw, 92px); letter-spacing: -.045em; }
.design-midnight .hero-copy, .design-midnight .hero-art { z-index: 1; }
.design-midnight .connection-visual { background: rgba(12,19,28,.86); border-color: #263749; }
.design-midnight .connection-visual::before { opacity: .8; }
.design-midnight .source, .design-midnight .destination span { background: #101923; }
.design-midnight .button-secondary { background: transparent; }
.design-midnight .problem-strip { background: #0c121a; }
.design-midnight .benefits-section { background: #05080c; }
.design-midnight .downloads-section { background: #0c121a; }
.design-midnight .download-card { box-shadow: none; }
.design-midnight .hosting-card, .design-midnight .use-grid article { background: #0d141d; }
.design-midnight .hosting-diagram i { background: #0d141d; }
.design-midnight .faq-section { background: #080c12; }
.design-midnight .ecosystem-section { background: #05080c; }
.design-midnight .final-cta { background: #13b9d8; color: #051016; }
.design-midnight .final-cta .button-primary { color: #071219; }

/* 03 — Field Guide: warm European industrial editorial, no “console” cosplay. */
.design-field {
  --bg: #f1efe8;
  --surface: #f8f6f0;
  --surface-2: #e7e4da;
  --text: #20231e;
  --muted: #696d62;
  --line: #cac8bc;
  --accent: #d45f38;
  --accent-2: #647d55;
  --accent-soft: #f1dfd7;
  --dark: #252821;
  --radius: 2px;
  --shadow: 12px 14px 0 rgba(54, 59, 48, .1);
  --display-font: Georgia, "Times New Roman", serif;
}
.design-field .family-bar, .design-field .site-header { background: #f1efe8; }
.design-field .brand, .design-field .button, .design-field .main-nav, .design-field .download-title h3 { font-family: var(--body-font); }
.design-field .hero { min-height: 810px; padding-top: 102px; }
.design-field .hero::before { width: 520px; height: 520px; right: 4%; top: 12%; border: 1px solid #d1cec2; background: repeating-radial-gradient(circle, transparent 0 36px, rgba(100,125,85,.13) 37px 38px); }
.design-field h1 { font-weight: 500; letter-spacing: -.055em; }
.design-field h1 em { color: var(--text); border-bottom: 4px solid var(--accent); }
.design-field .connection-visual { border: 1px solid var(--text); box-shadow: 12px 14px 0 #d9d6cb; }
.design-field .connection-visual::before { background-image: linear-gradient(rgba(100,109,91,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(100,109,91,.14) 1px, transparent 1px); background-size: 26px 26px; }
.design-field .button { border-radius: 0; text-transform: uppercase; letter-spacing: .07em; font-size: 10px; }
.design-field .button-primary { box-shadow: none; }
.design-field .problem-grid article { border-color: #aaa99e; }
.design-field .problem-grid article > span, .design-field .step-number, .design-field .use-index { color: var(--accent); }
.design-field .benefits-section { background: #252821; }
.design-field .benefit-orbit { border-radius: 0; transform: rotate(4deg); }
.design-field .benefit-orbit::before { border-radius: 0; }
.design-field .benefit-orbit b { border-radius: 0; transform: translate(-50%,-50%) rotate(-4deg); }
.design-field .download-card, .design-field .hosting-card, .design-field .use-grid article { box-shadow: 5px 6px 0 #cac7bb; }
.design-field .ecosystem-card.current, .design-field .final-cta { background: var(--accent); }

/* 04 — Spectrum Glass: polished spatial gradients and translucent layers. */
.design-spectrum {
  --bg: #0c0b19;
  --surface: rgba(24, 23, 45, .72);
  --surface-2: #111024;
  --text: #f5f3ff;
  --muted: #aaa6c4;
  --line: rgba(192, 186, 255, .16);
  --accent: #9c74ff;
  --accent-2: #36dbcf;
  --accent-soft: rgba(156,116,255,.15);
  --dark: #080713;
  --shadow: 0 34px 90px rgba(0,0,0,.42);
  --radius: 30px;
}
.design-spectrum .family-bar, .design-spectrum .site-header { background: rgba(12,11,25,.66); }
.design-spectrum .brand img, .design-spectrum .footer-brand .brand img { filter: invert(1); }
.design-spectrum .hero { min-height: 880px; background: radial-gradient(circle at 78% 28%, rgba(58,219,207,.18), transparent 26%), radial-gradient(circle at 60% 64%, rgba(156,116,255,.22), transparent 34%), #0c0b19; }
.design-spectrum .hero::after { content: ''; width: 330px; height: 330px; position: absolute; left: -170px; bottom: -120px; border-radius: 50%; background: #7047db; filter: blur(100px); opacity: .18; }
.design-spectrum h1 { font-weight: 600; }
.design-spectrum .connection-visual { border-color: rgba(255,255,255,.16); background: rgba(21,21,40,.55); backdrop-filter: blur(25px); box-shadow: inset 0 1px rgba(255,255,255,.11), var(--shadow); }
.design-spectrum .connection-visual::after { content: ''; position: absolute; width: 240px; height: 240px; top: -110px; right: -70px; border-radius: 50%; background: linear-gradient(135deg, rgba(156,116,255,.65), rgba(54,219,207,.3)); filter: blur(8px); opacity: .5; }
.design-spectrum .source, .design-spectrum .destination span { background: rgba(24,23,45,.88); backdrop-filter: blur(10px); }
.design-spectrum .button { border-radius: 28px; }
.design-spectrum .button-secondary { background: rgba(255,255,255,.05); }
.design-spectrum .problem-strip, .design-spectrum .downloads-section, .design-spectrum .faq-section { background: #111024; }
.design-spectrum .benefits-section, .design-spectrum .ecosystem-section { background: #080713; }
.design-spectrum .download-card, .design-spectrum .hosting-card, .design-spectrum .use-grid article { border-color: rgba(255,255,255,.13); background: rgba(24,23,45,.64); backdrop-filter: blur(18px); }
.design-spectrum .hosting-diagram i { background: #18172d; }
.design-spectrum .ecosystem-card.current, .design-spectrum .final-cta { background: linear-gradient(135deg, #8157eb, #6c56e8 45%, #25b8b0); }

/* 05 — Native Product: the closest visual bridge to the Android app itself. */
.design-native {
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #e9edf2;
  --text: #161b22;
  --muted: #687281;
  --line: #d8dee7;
  --accent: #5c71ff;
  --accent-2: #26b982;
  --accent-soft: #e7ebff;
  --dark: #151b24;
  --radius: 18px;
  --shadow: 0 18px 48px rgba(23, 32, 51, .11);
}
.design-native .family-bar { display: none; }
.design-native .site-header { width: min(calc(100% - 48px), 1120px); height: 66px; position: absolute; top: 56px; right: 0; left: 0; margin: auto; border: 1px solid rgba(216,222,231,.8); border-radius: 20px; background: rgba(255,255,255,.78); box-shadow: 0 12px 40px rgba(29,39,58,.08); }
.design-native .header-inner { width: 100%; padding: 0 14px 0 18px; }
.design-native .hero { min-height: 900px; padding-top: 162px; background: linear-gradient(135deg, #f6f8fb 0 56%, #edf0f6 56%); }
.design-native .hero-layout { grid-template-columns: .88fr 1.12fr; }
.design-native h1 { font-size: clamp(54px, 5.8vw, 80px); }
.design-native .connection-visual { height: 590px; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.design-native .connection-visual::before { border-radius: 32px; background-color: #fff; box-shadow: var(--shadow); }
.design-native .phone-shell { width: 226px; height: 475px; top: 55px; left: 52%; border-width: 5px; border-radius: 39px; }
.design-native .phone-screen { padding: 31px 18px 18px; border-radius: 29px; }
.design-native .source { left: 2px; }
.design-native .destination { right: -4px; }
.design-native .button { border-radius: 12px; }
.design-native .problem-strip { width: min(calc(100% - 48px), 1180px); position: relative; z-index: 2; margin: -55px auto 0; border: 0; border-radius: 22px; box-shadow: var(--shadow); }
.design-native .problem-grid { width: 100%; padding: 0 34px; }
.design-native .benefits-section { background: #151b24; }
.design-native .download-card { border-radius: 26px; }
.design-native .download-card.featured { transform: translateY(-14px); }
.design-native .hosting-card { border-radius: 26px; }
.design-native .ecosystem-card.current, .design-native .final-cta { background: #5c71ff; }

/* 06 — Editorial Grid: high-authority publication layout, stark and spacious. */
.design-editorial {
  --bg: #fbfaf7;
  --surface: #fbfaf7;
  --surface-2: #f0eee8;
  --text: #121212;
  --muted: #5e5d59;
  --line: #bdbbb4;
  --accent: #e63b2e;
  --accent-2: #1b8071;
  --accent-soft: #f8ded9;
  --dark: #111111;
  --radius: 0;
  --shadow: none;
  --display-font: Georgia, "Times New Roman", serif;
  --wrap: 1260px;
}
.design-editorial .family-bar, .design-editorial .site-header { background: #fbfaf7; }
.design-editorial .site-header { height: 90px; border-bottom: 2px solid var(--text); }
.design-editorial .brand, .design-editorial .main-nav, .design-editorial .button { font-family: var(--body-font); }
.design-editorial .hero { min-height: 840px; align-items: stretch; padding: 0; }
.design-editorial .hero-layout { width: min(100%, var(--wrap)); grid-template-columns: 1.25fr .75fr; gap: 0; }
.design-editorial .hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 80px 70px 80px 24px; border-right: 1px solid var(--line); }
.design-editorial h1 { max-width: 840px; font-weight: 500; font-size: clamp(66px, 7.5vw, 110px); letter-spacing: -.065em; line-height: .9; }
.design-editorial h1 em { display: block; color: var(--text); }
.design-editorial .hero-lede { max-width: 720px; padding-top: 26px; border-top: 1px solid var(--text); }
.design-editorial .hero-art { display: flex; align-items: center; padding: 40px 24px 40px 55px; }
.design-editorial .connection-visual { width: 100%; height: 620px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: #f0eee8; }
.design-editorial .connection-visual::before { opacity: .25; }
.design-editorial .source { border-color: var(--text); box-shadow: none; }
.design-editorial .button { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.design-editorial .problem-strip { border-top: 2px solid var(--text); border-bottom: 2px solid var(--text); }
.design-editorial .problem-grid { gap: 0; }
.design-editorial .problem-intro, .design-editorial .problem-grid article { padding: 10px 32px; }
.design-editorial .benefits-section { background: #111; }
.design-editorial .download-card, .design-editorial .hosting-card, .design-editorial .use-grid article { border-color: var(--text); }
.design-editorial .download-card.featured { border-width: 2px; }
.design-editorial .ecosystem-card.current, .design-editorial .final-cta { background: var(--accent); }

/* 07 — Atlas Technical: visual continuity with the deep .io engineering site. */
.design-technical {
  --bg: #080a12;
  --surface: #0d111b;
  --surface-2: #0a0e17;
  --text: #f4f5f8;
  --muted: #9099a8;
  --line: #222a39;
  --accent: #8a63f5;
  --accent-2: #11cfa0;
  --accent-soft: #1b1732;
  --dark: #05070c;
  --shadow: 0 28px 90px rgba(0,0,0,.5);
  --radius: 14px;
  --display-font: "Segoe UI", ui-sans-serif, sans-serif;
}
.design-technical .family-bar, .design-technical .site-header { background: rgba(8,10,18,.83); }
.design-technical .brand img, .design-technical .footer-brand .brand img { filter: invert(1); }
.design-technical .hero { min-height: 900px; background: radial-gradient(circle at 70% 45%, rgba(124,58,237,.16), transparent 30%), radial-gradient(circle at 90% 20%, rgba(0,212,255,.08), transparent 20%); }
.design-technical .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.9%, rgba(124,99,245,.13) 50%, transparent 50.1%); pointer-events: none; }
.design-technical h1 { font-size: clamp(58px, 6.4vw, 95px); font-weight: 650; }
.design-technical h1 em { background: linear-gradient(90deg, #a78bfa, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.design-technical .connection-visual { background: #0b1019; border-color: #293449; }
.design-technical .connection-visual::before { background-size: 22px 22px; opacity: .72; }
.design-technical .source, .design-technical .destination span { border-color: #32405a; background: #0e1521; }
.design-technical .button { border-radius: 7px; }
.design-technical .button-secondary { background: #0d111b; }
.design-technical .problem-strip { background: #0b0f18; }
.design-technical .steps { counter-reset: tech; }
.design-technical .step-symbol { filter: drop-shadow(0 0 12px rgba(138,99,245,.18)); }
.design-technical .benefits-section, .design-technical .ecosystem-section { background: #05070c; }
.design-technical .downloads-section, .design-technical .faq-section { background: #0a0e17; }
.design-technical .download-card, .design-technical .hosting-card, .design-technical .use-grid article { background: #0d111b; box-shadow: none; }
.design-technical .hosting-diagram i { background: #0d111b; }
.design-technical .ecosystem-card.current, .design-technical .final-cta { background: linear-gradient(135deg, #7c3aed, #635be9); }

/* 08 — Relay Continuum: closest family resemblance to the refined .net site. */
.design-continuum {
  --bg: #0c111a;
  --surface: #111925;
  --surface-2: #0f1621;
  --text: #f4f7fa;
  --muted: #9aa6b5;
  --line: #263344;
  --accent: #24c7ee;
  --accent-2: #4be0ac;
  --accent-soft: #102b36;
  --dark: #080c13;
  --shadow: 0 30px 90px rgba(0,0,0,.35);
  --radius: 12px;
  --wrap: 1200px;
}
.design-continuum .family-bar { background: #080d14; }
.design-continuum .site-header { height: 86px; background: rgba(12,17,26,.88); }
.design-continuum .brand img, .design-continuum .footer-brand .brand img { filter: none; }
.design-continuum .hero { min-height: 850px; background: linear-gradient(115deg, #0c111a 0 54%, #101b29 54%); }
.design-continuum .hero::before { width: 680px; height: 680px; right: -240px; top: -170px; border: 1px solid rgba(36,199,238,.13); background: repeating-radial-gradient(circle, transparent 0 54px, rgba(36,199,238,.08) 55px 56px); }
.design-continuum h1 { font-size: clamp(56px, 5.9vw, 88px); font-weight: 650; }
.design-continuum .connection-visual { background: #0e1722; border-color: #2a3a4e; }
.design-continuum .source, .design-continuum .destination span { background: #111c29; }
.design-continuum .button { border-radius: 5px; }
.design-continuum .button-secondary { background: transparent; }
.design-continuum .problem-strip { background: #0a1018; }
.design-continuum .benefits-section, .design-continuum .ecosystem-section { background: #080c13; }
.design-continuum .downloads-section, .design-continuum .faq-section { background: #0f1621; }
.design-continuum .download-card, .design-continuum .hosting-card, .design-continuum .use-grid article { background: #111925; box-shadow: none; }
.design-continuum .hosting-diagram i { background: #111925; }
.design-continuum .hosting-card.managed { border-color: rgba(36,199,238,.45); }
.design-continuum .ecosystem-card.current, .design-continuum .final-cta { background: #159fc0; }

/* Theme 08 compact closing sections. */
.design-continuum .uses-section { padding: 76px 0 80px; }
.design-continuum .uses-section .section-heading { max-width: none; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: end; column-gap: 90px; margin-bottom: 34px; }
.design-continuum .uses-section .section-heading .eyebrow { grid-column: 1 / -1; }
.design-continuum .uses-section .section-heading h2 { max-width: 720px; margin-bottom: 0; font-size: clamp(38px, 4vw, 54px); }
.design-continuum .uses-section .section-heading > p:last-child { margin: 0 0 5px; color: #98a6b8; font-size: 13px; line-height: 1.65; }
.design-continuum .use-grid { gap: 12px; }
.design-continuum .use-grid article { min-height: 245px; padding: 23px 24px 21px; transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, background .28s ease; }
.design-continuum .use-grid article:hover { z-index: 1; transform: translateY(-4px); border-color: rgba(36,199,238,.48); background: #14202d; }
.design-continuum .use-grid h3 { max-width: 290px; margin: 47px 0 8px; font-size: 19px; }
.design-continuum .use-grid p { font-size: 11px; line-height: 1.55; }
.design-continuum .use-line { width: 160px; height: 160px; top: -112px; right: -43px; opacity: .72; transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.design-continuum .use-grid article:hover .use-line { opacity: 1; transform: translate(-5px, 5px); }
.design-continuum .ecosystem-section { padding: 72px 0 76px; }
.design-continuum .ecosystem-section .section-heading { max-width: 760px; margin-bottom: 34px; }
.design-continuum .ecosystem-section .section-heading h2 { margin-bottom: 0; font-size: clamp(38px, 4vw, 54px); }
.design-continuum .ecosystem-card { min-height: 160px; padding: 22px; }
.design-continuum .ecosystem-card strong { margin-top: 43px; margin-bottom: 8px; font-size: 17px; }
.design-continuum .ecosystem-card p { font-size: 10px; line-height: 1.5; }
.design-continuum .final-cta { padding: 42px 0; }
.design-continuum .final-cta .eyebrow { margin-bottom: 10px; }
.design-continuum .final-cta h2 { font-size: clamp(32px, 3.4vw, 46px); }

/* Production light mode: Relay Continuum translated into a bright technical palette. */
html[data-theme="light"] .design-continuum {
  --bg: #f4f7f9;
  --surface: #ffffff;
  --surface-2: #edf3f6;
  --text: #10202c;
  --muted: #617180;
  --line: #d5e0e6;
  --accent: #0786a5;
  --accent-2: #138462;
  --accent-soft: #def2f6;
  --dark: #e7f0f3;
  --dark-text: #10202c;
  --shadow: 0 28px 80px rgba(35,65,82,.12);
}
html.theme-transition body,
html.theme-transition .family-bar,
html.theme-transition .site-header,
html.theme-transition .hero,
html.theme-transition .problem-strip,
html.theme-transition .section,
html.theme-transition .download-card,
html.theme-transition .hosting-card,
html.theme-transition .use-grid article,
html.theme-transition .ecosystem-card,
html.theme-transition .access-dialog-shell,
html.theme-transition .access-dialog-aside,
html.theme-transition .access-dialog-main { transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
html[data-theme="light"] .design-continuum .family-bar { background: #eef3f7; }
html[data-theme="light"] .design-continuum .site-header { background: rgba(255,255,255,.88); }
html[data-theme="light"] .design-continuum .header-inner > .brand img { filter: none; }
html[data-theme="light"] .design-continuum .hero { background: linear-gradient(115deg, #f7fafb 0 54%, #e9f3f6 54%); }
html[data-theme="light"] .design-continuum .hero::before { border-color: rgba(7,134,165,.15); background: repeating-radial-gradient(circle, transparent 0 54px, rgba(7,134,165,.075) 55px 56px); }
html[data-theme="light"] .design-continuum .connection-visual { border-color: #cbdbe3; background: #fdfefe; }
html[data-theme="light"] .design-continuum .source,
html[data-theme="light"] .design-continuum .destination span { background: rgba(255,255,255,.94); }
html[data-theme="light"] .design-continuum .problem-strip { background: #eaf2f5; }
html[data-theme="light"] .design-continuum .benefits-section { background: #e4eef1; color: var(--text); }
html[data-theme="light"] .design-continuum .benefits-section p { color: #5c6d79; }
html[data-theme="light"] .design-continuum .benefit-list article,
html[data-theme="light"] .design-continuum .benefit-list article:first-child { border-color: #c7d6dd; }
html[data-theme="light"] .design-continuum .benefit-list article > span { color: #758793; }
html[data-theme="light"] .design-continuum .benefit-list h3 { color: var(--text); }
html[data-theme="light"] .design-continuum .benefit-orbit,
html[data-theme="light"] .design-continuum .benefit-orbit::before { border-color: #b9cdd6; }
html[data-theme="light"] .design-continuum .benefit-orbit span { border-color: #b9cdd6; background: #f4f8f9; color: #526775; }
html[data-theme="light"] .design-continuum .benefit-orbit b { color: #fff; }
html[data-theme="light"] .design-continuum .downloads-section,
html[data-theme="light"] .design-continuum .faq-section { background: #edf3f6; }
html[data-theme="light"] .design-continuum .download-card,
html[data-theme="light"] .design-continuum .hosting-card,
html[data-theme="light"] .design-continuum .use-grid article { background: #fff; box-shadow: 0 12px 38px rgba(35,65,82,.055); }
html[data-theme="light"] .design-continuum .hosting-card.managed { border-color: rgba(7,134,165,.44); }
html[data-theme="light"] .design-continuum .uses-section { background: #f8fafb; }
html[data-theme="light"] .design-continuum .uses-section .section-heading > p:last-child { color: #617180; }
html[data-theme="light"] .design-continuum .use-grid article:hover { border-color: rgba(7,134,165,.46); background: #f7fbfc; }
html[data-theme="light"] .design-continuum .ecosystem-section { background: #e2edf1; color: var(--text); }
html[data-theme="light"] .design-continuum .ecosystem-section .section-heading p { color: #617180; }
html[data-theme="light"] .design-continuum .ecosystem-grid { border-color: #c5d5dc; }
html[data-theme="light"] .design-continuum .ecosystem-card { border-color: #c5d5dc; background: rgba(255,255,255,.5); }
html[data-theme="light"] .design-continuum .ecosystem-card:hover { background: #fff; }
html[data-theme="light"] .design-continuum .ecosystem-card > span,
html[data-theme="light"] .design-continuum .ecosystem-card p { color: #637582; }
html[data-theme="light"] .design-continuum .ecosystem-card.current { border-color: var(--accent); background: var(--accent); color: #fff; }
html[data-theme="light"] .design-continuum .ecosystem-card.current > span,
html[data-theme="light"] .design-continuum .ecosystem-card.current p { color: rgba(255,255,255,.78); }
html[data-theme="light"] .design-continuum .final-cta { background: #0786a5; }

html[data-theme="light"] .access-dialog-shell { border-color: #cbd9e0; background: #fff; box-shadow: 0 38px 110px rgba(23,48,62,.28); }
html[data-theme="light"] .access-dialog-close { border-color: #cbd9e0; background: rgba(255,255,255,.8); color: #667987; }
html[data-theme="light"] .access-dialog-close:hover { border-color: #9eb8c4; background: #fff; color: #10202c; }
html[data-theme="light"] .access-dialog-aside { border-color: #cbd9e0; background: linear-gradient(155deg, #e2f2f5, #f5f9fa 64%); }
html[data-theme="light"] .access-dialog-aside > p:not(.eyebrow),
html[data-theme="light"] .access-dialog-points { color: #617482; }
html[data-theme="light"] .access-dialog-main { background: #fff; }
html[data-theme="light"] .access-platforms legend,
html[data-theme="light"] .access-fields label > span { color: #5c6d79; }
html[data-theme="light"] .access-platforms button { border-color: #cfdae0; background: #f6f9fa; color: #627481; }
html[data-theme="light"] .access-platforms button:hover { border-color: #9db6c1; color: #10202c; }
html[data-theme="light"] .access-platforms button.active { border-color: rgba(7,134,165,.7); background: #e9f6f8; color: #075c72; }
html[data-theme="light"] .access-fields input,
html[data-theme="light"] .access-fields textarea { border-color: #cfdae0; background: #f8fafb; color: #10202c; }
html[data-theme="light"] .access-fields input::placeholder,
html[data-theme="light"] .access-fields textarea::placeholder { color: #91a0aa; }
html[data-theme="light"] .access-fields input:focus,
html[data-theme="light"] .access-fields textarea:focus { border-color: rgba(7,134,165,.72); background: #fff; box-shadow: 0 0 0 3px rgba(7,134,165,.1); }
html[data-theme="light"] .access-consent { color: #657783; }
html[data-theme="light"] .access-form-note { color: #758793; }

/* Theme 08 early-access dialog. */
body.modal-open { overflow: hidden; }
.access-dialog { width: min(940px, calc(100% - 40px)); max-width: none; max-height: min(760px, calc(100dvh - 40px)); margin: auto; padding: 0; border: 0; border-radius: 18px; background: transparent; color: var(--text); overflow: visible; opacity: 0; transform: translateY(24px) scale(.975); }
.access-dialog[open] { animation: access-dialog-in .34s cubic-bezier(.2,.8,.2,1) forwards; }
.access-dialog.closing { animation: access-dialog-out .24s ease forwards; }
.access-dialog::backdrop { background: rgba(2, 7, 13, .78); backdrop-filter: blur(8px); animation: access-backdrop-in .3s ease forwards; }
.access-dialog.closing::backdrop { animation: access-backdrop-out .24s ease forwards; }
@keyframes access-dialog-in { to { opacity: 1; transform: none; } }
@keyframes access-dialog-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes access-backdrop-in { from { background: rgba(2,7,13,0); backdrop-filter: blur(0); } to { background: rgba(2,7,13,.78); backdrop-filter: blur(8px); } }
@keyframes access-backdrop-out { from { background: rgba(2,7,13,.78); backdrop-filter: blur(8px); } to { background: rgba(2,7,13,0); backdrop-filter: blur(0); } }
.access-dialog-shell { min-height: 610px; display: grid; grid-template-columns: .86fr 1.14fr; position: relative; border: 1px solid #2a3a4e; border-radius: 18px; background: #0d141e; box-shadow: 0 40px 120px rgba(0,0,0,.62); overflow: hidden; }
.access-dialog-shell::before { content: ''; width: 460px; height: 460px; position: absolute; top: -330px; left: -230px; border: 1px solid rgba(36,199,238,.18); border-radius: 50%; box-shadow: 0 0 0 70px rgba(36,199,238,.025), 0 0 0 140px rgba(36,199,238,.018); pointer-events: none; }
.access-dialog-close { width: 38px; height: 38px; position: absolute; z-index: 5; top: 18px; right: 18px; display: grid; place-items: center; border: 1px solid #324257; border-radius: 50%; background: rgba(13,20,30,.72); color: #9da9b9; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.access-dialog-close:hover { color: #fff; border-color: #4a627d; background: #172331; transform: rotate(3deg); }
.access-dialog-close svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.access-dialog-aside { min-width: 0; position: relative; padding: 54px 44px 44px; border-right: 1px solid #283649; background: linear-gradient(155deg, rgba(21,48,65,.75), rgba(12,18,28,.96) 62%); }
.access-dialog-aside::after { content: ''; width: 270px; height: 270px; position: absolute; right: -160px; bottom: -150px; border: 1px solid rgba(75,224,172,.14); border-radius: 50%; box-shadow: 0 0 0 45px rgba(75,224,172,.025), 0 0 0 90px rgba(75,224,172,.015); pointer-events: none; }
.access-dialog-mark { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 54px; border: 1px solid rgba(36,199,238,.4); border-radius: 13px; background: rgba(36,199,238,.09); color: var(--accent); box-shadow: 0 14px 32px rgba(8,15,24,.24); }
.access-dialog-mark svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.access-dialog-aside .eyebrow { margin-bottom: 15px; }
.access-dialog-aside h2 { max-width: 330px; margin-bottom: 18px; font-size: 38px; font-weight: 630; line-height: 1.02; }
.access-dialog-aside > p:not(.eyebrow) { max-width: 325px; font-size: 13px; line-height: 1.65; }
.access-dialog-points { display: grid; gap: 10px; margin-top: 32px; color: #9ca9ba; font-size: 10px; }
.access-dialog-points span { display: flex; align-items: center; gap: 8px; }
.access-dialog-points svg { width: 15px; fill: none; stroke: var(--accent-2); stroke-width: 2; }
.access-dialog-main { min-width: 0; position: relative; padding: 50px 48px 38px; background: #111925; }
.access-dialog-main form { transition: opacity .22s ease, transform .22s ease; }
.access-dialog-main form.submitted { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.access-platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 29px; padding: 0; border: 0; }
.access-platforms legend { grid-column: 1 / -1; margin-bottom: 9px; color: #8f9aaa; font-size: 10px; }
.access-platforms button { height: 45px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #2d3c50; border-radius: 7px; background: #0e1621; color: #98a4b4; cursor: pointer; font-size: 11px; font-weight: 600; transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.access-platforms button:hover { border-color: #40536b; color: #fff; }
.access-platforms button.active { border-color: rgba(36,199,238,.7); background: rgba(36,199,238,.08); color: #edfaff; box-shadow: inset 0 0 0 1px rgba(36,199,238,.08); }
.access-platforms svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.access-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 14px; }
.access-fields label { display: grid; gap: 8px; }
.access-fields label.wide { grid-column: 1 / -1; }
.access-fields label[hidden] { display: none; }
.access-fields label > span { color: #aeb8c6; font-size: 10px; }
.access-fields label em { float: right; color: #697789; font-size: 9px; font-style: normal; }
.access-fields input, .access-fields textarea { width: 100%; border: 1px solid #2c3a4d; border-radius: 7px; outline: none; background: #0d151f; color: #f1f5f8; font-size: 12px; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.access-fields input { height: 44px; padding: 0 13px; }
.access-fields textarea { min-height: 78px; padding: 12px 13px; resize: vertical; line-height: 1.5; }
.access-fields input::placeholder, .access-fields textarea::placeholder { color: #586677; }
.access-fields input:focus, .access-fields textarea:focus { border-color: rgba(36,199,238,.72); background: #101a26; box-shadow: 0 0 0 3px rgba(36,199,238,.08); }
.access-consent { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; color: #8491a2; font-size: 9px; line-height: 1.45; cursor: pointer; }
.access-consent input { width: 15px; height: 15px; flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.access-submit { width: 100%; border-radius: 7px; box-shadow: 0 12px 28px rgba(36,199,238,.12); }
.access-form-note { margin: 11px 8px 0; color: #687587; font-size: 8px; line-height: 1.45; text-align: center; }
.access-success { position: absolute; inset: 48px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s ease .08s, transform .25s ease .08s; }
.access-success.visible { opacity: 1; transform: none; pointer-events: auto; }
.access-success > span { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 34px; border: 1px solid rgba(75,224,172,.42); border-radius: 50%; background: rgba(75,224,172,.08); color: var(--accent-2); }
.access-success > span svg { width: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.access-success h3 { margin-bottom: 12px; font-size: 32px; }
.access-success p { max-width: 370px; margin-bottom: 14px; font-size: 13px; }
.access-success a { margin-bottom: 30px; color: var(--accent); font-size: 11px; }
.access-success .button { min-width: 120px; background: transparent; }

@media (max-width: 850px) {
  .design-native .site-header { width: calc(100% - 36px); top: 50px; }
  .design-native .hero { padding-top: 150px; }
  .design-native .hero-layout { grid-template-columns: 1fr; }
  .design-native .hero-art { margin-top: 24px; }
  .design-native .problem-strip { width: calc(100% - 36px); }
  .design-native .problem-grid { padding: 0 24px; }
  .design-editorial .hero-layout { width: 100%; grid-template-columns: 1fr; }
  .design-editorial .hero-copy { padding: 80px 24px; border-right: 0; }
  .design-editorial .hero-art { padding: 40px 24px 80px; }
  .design-editorial .connection-visual { max-width: 620px; margin-inline: auto; }
  .access-dialog { width: min(660px, calc(100% - 30px)); max-height: calc(100dvh - 30px); overflow-y: auto; }
  .access-dialog-shell { grid-template-columns: 1fr; }
  .access-dialog-aside { padding: 36px 38px 30px; border-right: 0; border-bottom: 1px solid #283649; }
  .access-dialog-mark { width: 45px; height: 45px; margin-bottom: 28px; }
  .access-dialog-aside h2 { max-width: 500px; font-size: 31px; }
  .access-dialog-aside > p:not(.eyebrow) { max-width: 500px; }
  .access-dialog-points { display: none; }
  .access-dialog-main { padding: 35px 38px 32px; }
  .design-continuum .uses-section .section-heading { grid-template-columns: 1fr; gap: 15px; }
  .design-continuum .uses-section .section-heading .eyebrow { grid-column: auto; }
  .design-continuum .use-grid article { min-height: 210px; }
  .design-continuum .use-grid h3 { margin-top: 32px; }
}

@media (max-width: 580px) {
  .design-midnight h1, .design-technical h1 { font-size: 48px; }
  .design-native .site-header { top: 46px; }
  .design-native .hero { padding-top: 132px; }
  .design-native .phone-shell { width: 174px; height: 370px; }
  .design-native .connection-visual { height: 450px; }
  .design-editorial h1 { font-size: 54px; }
  .design-editorial .hero-copy { padding: 60px 18px; }
  .design-continuum .hero { background: #0c111a; }
  .access-dialog { width: calc(100% - 18px); max-height: calc(100dvh - 18px); border-radius: 13px; }
  .access-dialog-shell { border-radius: 13px; }
  .access-dialog-aside { padding: 29px 24px 23px; }
  .access-dialog-close { top: 12px; right: 12px; }
  .access-dialog-mark { width: 40px; height: 40px; margin-bottom: 22px; }
  .access-dialog-mark svg { width: 21px; height: 21px; }
  .access-dialog-aside .eyebrow { margin-bottom: 10px; }
  .access-dialog-aside h2 { margin: 0 45px 10px 0; font-size: 26px; }
  .access-dialog-aside > p:not(.eyebrow) { margin: 0; font-size: 11px; }
  .access-dialog-main { padding: 25px 22px 22px; }
  .access-platforms { margin-bottom: 22px; }
  .access-fields { grid-template-columns: 1fr; gap: 13px; }
  .access-fields label.wide { grid-column: auto; }
  .access-success { inset: 32px 25px; }
  .design-continuum .uses-section, .design-continuum .ecosystem-section { padding: 58px 0 62px; }
  .design-continuum .uses-section .section-heading, .design-continuum .ecosystem-section .section-heading { margin-bottom: 28px; }
  .design-continuum .use-grid article { min-height: 220px; }
  .design-continuum .ecosystem-card { min-height: 128px; padding: 18px; }
  .design-continuum .ecosystem-card strong { margin-top: 24px; }
  .design-continuum .final-cta { padding: 38px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .design-continuum .use-grid article,
  .design-continuum .use-line { transition: none; }
  .design-continuum .use-grid article:hover,
  .design-continuum .use-grid article:hover .use-line { transform: none; }
  .access-dialog[open],
  .access-dialog.closing,
  .access-dialog::backdrop,
  .access-dialog.closing::backdrop { animation-duration: .01ms; }
}