:root {
  --ink: #10253f;
  --navy: #0c2340;
  --navy-2: #132f50;
  --paper: #f7f7f2;
  --white: #fff;
  --muted: #69798a;
  --line: #dce3e7;
  --sky: #0b78ad;
  --cyan: #4ac0d6;
  --orange: #f2a23a;
  --coral: #ee725c;
  --green: #66b995;
  --lavender: #7e79c8;
  --shadow: 0 24px 60px rgba(10, 34, 62, .12);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; line-height: 1.55; }
button, a { font: inherit; }
a { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; background: var(--white); padding: .8rem 1rem; border-radius: 8px; }
.skip-link:focus { top: 1rem; }
.topbar { height: 80px; padding: 0 clamp(24px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; background: rgba(247,247,242,.9); border-bottom: 1px solid rgba(16,37,63,.08); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 50; }
.brand { display: flex; align-items: center; text-decoration: none; gap: 14px; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.brand img { width: 108px; height: 50px; object-fit: contain; }
.brand-divider { width: 1px; height: 28px; background: var(--line); }
.desktop-nav { display: flex; gap: clamp(18px, 3vw, 42px); }
.desktop-nav a { text-decoration: none; font-size: 14px; font-weight: 600; color: #526477; }
.desktop-nav a:hover, .desktop-nav a:focus { color: var(--sky); }
.print-button { border: 0; color: white; background: var(--navy); padding: 11px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.print-button span { color: var(--cyan); margin-right: 5px; }
.hero { min-height: calc(100vh - 80px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr); align-items: center; gap: 5vw; padding: 72px clamp(24px, 6vw, 92px) 80px; overflow: hidden; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--sky); font-weight: 800; }
.eyebrow span { width: 28px; height: 2px; background: currentColor; }
h1, h2, h3, .decision-box strong { font-family: Manrope, sans-serif; }
h1 { margin: 0; max-width: 720px; font-size: clamp(48px, 5.4vw, 84px); line-height: 1.03; letter-spacing: -.055em; }
h1 em, h2 em { color: var(--sky); font-style: normal; }
.hero-lead { max-width: 640px; color: #596b7d; font-size: clamp(17px, 1.35vw, 21px); margin: 28px 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; gap: 16px; align-items: center; justify-content: center; padding: 14px 19px; border-radius: 11px; text-decoration: none; font-weight: 700; font-size: 14px; }
.button-primary { color: white; background: var(--sky); box-shadow: 0 10px 25px rgba(45,155,211,.25); }
.button-ghost { border: 1px solid #cdd7de; }
.hero-note { display: flex; gap: 12px; align-items: flex-start; max-width: 570px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); color: #647487; font-size: 13px; }
.hero-note p { margin: 0; }
.hero-note strong { color: var(--ink); }
.pulse-dot { margin-top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(102,185,149,.14); flex: 0 0 auto; }
.hero-visual { position: relative; min-height: 610px; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid rgba(45,155,211,.16); border-radius: 50%; }
.orbit-one { width: 650px; height: 650px; }
.orbit-two { width: 500px; height: 500px; border-style: dashed; transform: rotate(-18deg); }
.mock-window { position: relative; z-index: 2; width: min(720px, 100%); border-radius: 20px; background: #fff; box-shadow: 0 38px 90px rgba(13,42,70,.22); overflow: hidden; border: 1px solid rgba(18,48,81,.1); transform: perspective(1200px) rotateY(-3deg) rotateX(1deg); }
.window-bar { height: 42px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; color: #778594; background: #f4f7f9; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d0d9df; }
.live-pill { color: #388e70; padding: 3px 8px; background: #e3f4ec; border-radius: 20px; }
.discord-shell { height: 440px; display: grid; grid-template-columns: 58px 190px 1fr; }
.server-rail { padding: 14px 9px; background: #10263f; display: flex; gap: 11px; align-items: center; flex-direction: column; }
.server-icon { width: 35px; height: 35px; display: grid; place-items: center; color: #bfd3e4; background: #25415e; border-radius: 50%; font-size: 11px; font-weight: 700; }
.server-icon.active { color: white; background: var(--sky); border-radius: 12px; }
.server-icon.add { color: #79caa8; font-size: 18px; }
.rail-line { height: 1px; width: 25px; background: #38516b; }
.channel-list { padding: 16px 12px; background: #edf1f4; color: #687887; }
.channel-list > strong { color: var(--ink); font-size: 10px; display: flex; justify-content: space-between; margin: 0 7px 25px; letter-spacing: .05em; }
.channel-list > small { display: block; margin: 17px 7px 6px; font-size: 8px; font-weight: 800; letter-spacing: .1em; color: #8b98a4; }
.channel { display: flex; gap: 7px; padding: 6px 8px; margin: 2px 0; border-radius: 5px; font-size: 10px; font-weight: 600; }
.channel span { color: #94a2ae; }
.channel.active { color: var(--ink); background: white; box-shadow: 0 2px 5px rgba(20,44,69,.08); }
.chat-area { background: white; }
.chat-head { height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-bottom: 1px solid #e9eef1; font-size: 12px; font-weight: 700; }
.chat-head > span { color: #8ca0af; font-size: 18px; }
.chat-head i { width: 1px; height: 18px; background: #dae2e7; }
.chat-head small { color: #9aa6b0; font-weight: 500; }
.welcome-card { display: flex; align-items: center; gap: 12px; margin: 20px 22px 12px; padding: 13px 14px; border: 1px solid #dcebf2; background: #f3fafc; border-radius: 10px; }
.wave { display: grid; place-items: center; width: 38px; height: 38px; background: #fff; border-radius: 10px; font-size: 18px; }
.welcome-card span, .welcome-card strong { display: block; }
.welcome-card span { color: var(--sky); font-size: 9px; font-weight: 700; }
.welcome-card strong { font-size: 12px; }
.choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0 22px 20px; }
.choice-grid div { min-height: 98px; padding: 12px; border: 1px solid #e3e8eb; border-radius: 9px; display: flex; flex-direction: column; }
.choice-grid .selected { border-color: var(--sky); box-shadow: inset 0 0 0 1px var(--sky); background: #f5fbfe; }
.choice-grid b { color: var(--sky); font-size: 18px; }
.choice-grid span { font-size: 9px; line-height: 1.3; font-weight: 700; margin-top: auto; }
.choice-grid small { color: #8997a2; font-size: 8px; }
.bot-message { display: flex; gap: 10px; margin: 0 22px; padding-top: 15px; border-top: 1px solid #e8edef; }
.bot-avatar, .mini-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--sky); color: white; font-weight: 800; font-size: 9px; }
.bot-message strong { font-size: 10px; }
.bot-message strong small, .tag-message strong small { color: white; background: var(--sky); border-radius: 3px; padding: 1px 3px; font-size: 6px; }
.bot-message p { margin: 2px 0; color: #788794; font-size: 9px; }
.floating-card { z-index: 3; position: absolute; background: white; box-shadow: var(--shadow); border: 1px solid #e5ebee; border-radius: 12px; padding: 11px 14px; display: flex; align-items: center; gap: 10px; }
.floating-card > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #e5f5ed; color: #3c9f79; font-weight: 800; }
.floating-card b, .floating-card small { display: block; }
.floating-card b { font-size: 10px; }.floating-card small { color: #8996a1; font-size: 8px; }
.floating-one { left: 0; bottom: 85px; }.floating-two { right: 8px; top: 82px; }
.floating-two > span { background: #eaf5fb; color: var(--sky); }
.trust-strip { padding: 30px clamp(24px, 6vw, 92px); color: white; background: var(--navy); display: grid; grid-template-columns: .8fr 1.7fr; align-items: center; gap: 30px; }
.trust-strip > p { margin: 0; color: #9fb2c4; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.trust-items { display: flex; justify-content: space-between; gap: 30px; }
.trust-items span { color: #b3c2d0; font-size: 12px; }.trust-items b { display: block; color: white; font: 800 21px Manrope; }
.trust-strip .source-caption { grid-column: 1 / -1; font-size: 9px; letter-spacing: .03em; text-transform: none; opacity: .75; margin-top: -14px; }
.section { padding: 110px clamp(24px, 7vw, 110px); }
.section-heading { max-width: 800px; margin-bottom: 55px; }
.section-heading h2, .rh-copy h2, .ai-copy h2 { margin: 0; font-size: clamp(36px, 4vw, 61px); line-height: 1.08; letter-spacing: -.045em; }
.section-heading > p:last-child { max-width: 680px; color: var(--muted); font-size: 17px; }
.problem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1400px; margin: auto; }
.problem-card { min-height: 385px; padding: 34px; position: relative; background: white; border: 1px solid #e2e7e9; border-radius: var(--radius); transition: transform .25s, box-shadow .25s; }
.problem-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card-index { position: absolute; top: 25px; right: 28px; color: #d3dbe0; font: 700 13px Manrope; }
.problem-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; font-size: 23px; }
.problem-icon.coral { background: #fff0eb; color: var(--coral); }.problem-icon.blue { background: #eaf6fb; color: var(--sky); }.problem-icon.green { background: #eaf6f0; color: var(--green); }
.problem-card h3 { margin: 30px 0 10px; font-size: 21px; }.problem-card > p { color: var(--muted); font-size: 15px; }
.before-after { position: absolute; bottom: 32px; left: 34px; right: 34px; display: flex; align-items: center; gap: 10px; padding-top: 20px; border-top: 1px solid #edf0f2; }
.before-after span { color: #95a2ad; font-size: 10px; text-transform: uppercase; font-weight: 700; }.before-after i { width: 5px; height: 5px; border-radius: 50%; background: var(--sky); }.before-after b { font-size: 11px; }
.architecture-section { background: var(--navy); color: white; overflow: hidden; }
.section-heading.light > p:last-child { color: #9fb0c1; }
.role-demo { display: grid; grid-template-columns: 300px 1fr; background: white; color: var(--ink); max-width: 1200px; margin: auto; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.25); }
.role-controls { padding: 30px 24px; background: #eaf0f4; }
.role-controls > p { margin: 0 8px 18px; color: #80909e; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.role-button { width: 100%; display: flex; align-items: center; gap: 11px; border: 0; background: transparent; padding: 12px; margin: 5px 0; border-radius: 9px; color: #657586; font-weight: 700; font-size: 13px; text-align: left; cursor: pointer; }
.role-button span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: white; font-size: 12px; }
.role-button.active { color: white; background: var(--sky); box-shadow: 0 8px 20px rgba(45,155,211,.22); }.role-button.active span { background: rgba(255,255,255,.18); }
.role-explanation { margin-top: 25px; padding: 18px; border: 1px solid #d5dfe5; background: white; border-radius: 12px; }.role-explanation strong { font-size: 13px; }.role-explanation p { color: #748393; font-size: 11px; margin: 6px 0 0; }
.access-map { padding: 26px 35px 38px; min-height: 590px; background: #fbfcfc; }
.access-head { display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #e2e7ea; font-size: 12px; }.access-head small { color: #8896a2; }.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 8px; box-shadow: 0 0 0 4px rgba(102,185,149,.13); }
.category { margin-top: 24px; transition: opacity .25s, filter .25s; }.category.is-hidden { opacity: .22; filter: grayscale(1); }.category.is-hidden .map-channel { display: none; }
.category-title { color: #8a98a5; font-size: 9px; letter-spacing: .1em; font-weight: 800; display: flex; align-items: center; gap: 7px; }.category-title b { margin-left: auto; color: var(--sky); background: #eaf6fb; border-radius: 20px; padding: 3px 7px; font-size: 7px; letter-spacing: .03em; }
.map-channel { min-height: 54px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 7px; border-bottom: 1px solid #edf0f2; }.map-channel > span { color: #8fa0ad; font-size: 17px; }.map-channel strong, .map-channel small { display: block; }.map-channel strong { font-size: 11px; }.map-channel small { color: #8c99a4; font-size: 9px; }.map-channel i { font-style: normal; color: #6c7e8e; background: #eef2f4; border-radius: 20px; padding: 3px 7px; font-size: 8px; }
.principle-row { max-width: 1200px; margin: 28px auto 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }.principle-row > div { display: flex; gap: 14px; padding: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; }.principle-row span { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; color: var(--cyan); border: 1px solid rgba(74,192,214,.5); font-size: 10px; font-weight: 800; }.principle-row p { margin: 0; color: #aebdca; font-size: 11px; }.principle-row strong { display: block; color: white; font-size: 12px; }
.flow-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; max-width: 1200px; margin: auto; }.flow-card { min-height: 500px; border-radius: var(--radius); border: 1px solid var(--line); background: white; padding: 35px; }.flow-label { display: inline-flex; padding: 6px 10px; color: var(--sky); background: #ebf7fb; border-radius: 20px; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 800; }
.vertical-flow { display: flex; align-items: center; flex-direction: column; }.flow-node { min-width: 215px; margin-top: 25px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid #dce5ea; border-radius: 12px; box-shadow: 0 7px 20px rgba(16,37,63,.06); }.flow-node > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--navy); }.flow-node b,.flow-node small { display: block; }.flow-node b { font-size: 12px; }.flow-node small { color: #8a98a4; font-size: 9px; }.flow-node.referents > span { background: var(--sky); }.flow-arrow { height: 48px; display: flex; flex-direction: column; align-items: center; color: var(--sky); font-size: 15px; }.flow-arrow small { color: #8c9aa5; font-size: 8px; }.flow-groups { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.flow-groups div { min-height: 75px; display: grid; place-items: center; align-content: center; color: var(--sky); border: 1px solid #dfe6ea; background: #f9fbfb; border-radius: 11px; }.flow-groups small { color: var(--ink); margin-top: 6px; font-size: 9px; font-weight: 700; }
.horizontal-flow { display: flex; flex-direction: column; align-items: center; }.horizontal-flow .flow-label { align-self: flex-start; }.cross-project { position: relative; margin-top: 32px; width: 320px; height: 310px; }.ring { position: absolute; width: 175px; height: 175px; border-radius: 50%; border: 28px solid; opacity: .45; }.ring-a { left: 72px; top: 0; border-color: var(--coral); }.ring-b { left: 18px; top: 92px; border-color: var(--sky); }.ring-c { right: 18px; top: 92px; border-color: var(--green); }.center-topic { width: 140px; height: 100px; position: absolute; left: 90px; top: 105px; z-index: 2; display: grid; place-items: center; align-content: center; text-align: center; border-radius: 15px; background: var(--navy); color: white; box-shadow: 0 14px 30px rgba(12,35,64,.2); }.center-topic small { color: var(--cyan); font-size: 7px; letter-spacing: .1em; font-weight: 800; }.center-topic strong { font-size: 13px; }.center-topic span { color: #9fb2c3; font-size: 8px; }.cross-caption { max-width: 410px; text-align: center; color: var(--muted); font-size: 12px; }
.info-rule { max-width: 1200px; margin: 24px auto 0; display: flex; gap: 15px; align-items: center; border: 1px solid #cfe2ea; background: #edf8fb; border-radius: 13px; padding: 18px 22px; }.info-rule > span { color: var(--sky); font-size: 22px; }.info-rule p { margin: 0; font-size: 13px; }.info-rule strong { color: var(--sky); }
.automation-section { background: white; }.bot-workflow { position: relative; max-width: 1100px; min-height: 580px; margin: auto; }.bot-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 190px; height: 190px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #dce9ef; border-radius: 50%; background: white; box-shadow: 0 20px 50px rgba(23,70,105,.14); }.bot-center b { font-size: 12px; }.bot-center small { color: #8997a3; font-size: 9px; }.bot-face { position: relative; z-index: 2; display: grid; place-items: center; width: 70px; height: 70px; margin-bottom: 10px; border-radius: 22px; color: white; background: linear-gradient(145deg,var(--sky),var(--cyan)); font: 800 20px Manrope; box-shadow: 0 10px 25px rgba(45,155,211,.35); }.bot-face span { position: absolute; bottom: 7px; font-size: 5px; letter-spacing: .1em; }.bot-glow { position: absolute; width: 300px; height: 300px; border: 1px dashed #c9e5ee; border-radius: 50%; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bot-task { position: absolute; width: 315px; display: flex; gap: 16px; padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: #fbfcfc; }.bot-task > span { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 10px; color: var(--sky); background: #e7f5fa; font: 800 10px Manrope; }.bot-task h3 { margin: 0 0 5px; font-size: 15px; }.bot-task p { margin: 0; color: var(--muted); font-size: 11px; }.task-one { left: 0; top: 30px; }.task-two { right: 0; top: 30px; }.task-three { left: 0; bottom: 35px; }.task-four { right: 0; bottom: 35px; }
.tag-example { max-width: 1100px; margin: 10px auto 0; display: grid; grid-template-columns: 1.2fr .8fr; gap: 25px; padding: 25px; border-radius: 18px; background: var(--navy); color: white; }.tag-message { display: flex; gap: 13px; align-items: flex-start; padding: 15px; border-radius: 11px; background: rgba(255,255,255,.07); }.tag-message strong { font-size: 11px; }.tag-message p { margin: 6px 0 0; color: #aebdcc; font-size: 11px; }.tag-message p b { color: white; }.tag-message mark { background: rgba(74,192,214,.18); color: #84d8e8; border-radius: 4px; padding: 2px 4px; }.tag-contrast { display: grid; gap: 8px; }.tag-contrast > div { display: flex; gap: 10px; align-items: center; }.tag-contrast span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; }.tag-contrast .bad span { background: rgba(238,114,92,.2); color: #ff9e8a; }.tag-contrast .good span { background: rgba(102,185,149,.2); color: #8ed9b7; }.tag-contrast p { margin: 0; }.tag-contrast b,.tag-contrast small { display: block; font-size: 10px; }.tag-contrast small { color: #93a6b8; font-size: 8px; }
.rh-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(45px,7vw,110px); align-items: center; }.rh-copy > p:not(.eyebrow):not(.privacy-note) { color: var(--muted); font-size: 16px; max-width: 600px; }.check-list { list-style: none; padding: 0; margin: 25px 0; display: grid; gap: 11px; }.check-list li { display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 600; }.check-list span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: #e4f4ed; font-size: 10px; }.privacy-note { display: flex; gap: 10px; padding: 14px; max-width: 600px; border-radius: 10px; background: #eef6f8; color: #617486; font-size: 11px; }.privacy-note span { color: var(--sky); }.privacy-note strong { color: var(--ink); }
.dashboard-card { background: white; border-radius: 20px; border: 1px solid #dfe6ea; box-shadow: var(--shadow); padding: 28px; }.dashboard-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #e5eaed; }.dashboard-head small,.dashboard-head strong { display: block; }.dashboard-head small { color: var(--sky); font-size: 8px; font-weight: 800; letter-spacing: .1em; }.dashboard-head strong { font: 800 20px Manrope; }.dashboard-head > span { color: #788896; border: 1px solid #dce3e7; border-radius: 7px; padding: 7px 9px; font-size: 9px; }.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 22px 0; }.stat-row > div { padding: 15px; border: 1px solid #e2e8eb; border-radius: 10px; }.stat-row span,.stat-row strong,.stat-row small { display: block; }.stat-row span { color: #82909b; font-size: 8px; }.stat-row strong { margin: 3px 0; font: 800 24px Manrope; }.stat-row small { color: var(--green); font-size: 8px; }.stat-row small.orange { color: var(--orange); }.chart-block { padding: 20px; background: #f6f8f9; border-radius: 12px; }.chart-title { display: flex; justify-content: space-between; margin-bottom: 18px; font-size: 10px; }.chart-title span { color: #8997a2; font-size: 8px; }.bar-row { display: grid; grid-template-columns: 75px 1fr 20px; align-items: center; gap: 10px; margin: 13px 0; font-size: 9px; }.bar-row i { height: 7px; overflow: hidden; background: #e0e7ea; border-radius: 10px; }.bar-row b { display: block; width: var(--size); height: 100%; background: linear-gradient(90deg,var(--sky),var(--cyan)); border-radius: 10px; }.bar-row em { font-style: normal; font-weight: 800; }.need-block { margin-top: 14px; padding: 13px; display: flex; align-items: center; gap: 10px; border: 1px solid #f1dbbd; border-radius: 10px; background: #fff9f0; }.need-icon { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; color: var(--orange); background: white; border-radius: 8px; font-weight: 800; }.need-block strong { font-size: 10px; }.need-block p { margin: 1px 0; color: #788693; font-size: 8px; }.need-block button { margin-left: auto; color: var(--ink); background: white; border: 1px solid #e2d2b9; border-radius: 6px; padding: 5px 9px; font-size: 8px; }.demo-label { margin: 10px 0 -10px; text-align: right; color: #a1adb6; font-size: 7px; }
.ai-section { background: #eaf3f3; }.ai-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; align-items: center; max-width: 1250px; margin: auto; }.ai-visual { position: relative; height: 500px; display: grid; place-items: center; }.local-core { z-index: 2; width: 190px; height: 190px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: white; background: var(--navy); border-radius: 50%; box-shadow: 0 20px 45px rgba(12,35,64,.2); }.local-core > span { color: var(--cyan); font-size: 29px; }.local-core strong { font: 800 20px Manrope; }.local-core small { color: #9eb0c1; font-size: 9px; }.boundary { position: absolute; width: 390px; height: 390px; border-radius: 50%; border: 1px dashed #91bdc9; animation: spin 45s linear infinite; }.boundary span { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); color: #6b909c; background: #eaf3f3; padding: 0 8px; text-transform: uppercase; letter-spacing: .1em; font-size: 7px; }.data-chip { position: absolute; z-index: 3; padding: 10px 12px; background: white; border: 1px solid #d0e0e3; border-radius: 9px; box-shadow: 0 8px 20px rgba(19,64,79,.08); font-size: 9px; font-weight: 700; }.data-chip span { color: var(--sky); margin-left: 8px; }.chip-one { left: 0; top: 115px; }.chip-two { left: 20px; bottom: 100px; }.chip-three { right: -5px; top: 220px; }.chip-three span { margin: 0 8px 0 0; }.ai-copy > p:not(.eyebrow) { color: var(--muted); }.ai-use { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #ccdcdf; }.ai-use > span { display: grid; place-items: center; width: 34px; height: 34px; color: var(--sky); background: white; border-radius: 9px; font-size: 9px; font-weight: 800; }.ai-use strong,.ai-use small { display: block; }.ai-use strong { font-size: 12px; }.ai-use small { color: #758892; font-size: 10px; }.guardrail { margin-top: 22px; display: flex; gap: 12px; padding: 15px; color: #6c7e88; border: 1px solid #ccdadd; background: rgba(255,255,255,.55); border-radius: 11px; font-size: 10px; }.guardrail p { margin: 0; }.guardrail strong { color: var(--ink); }
.sovereignty-section { position: relative; overflow: hidden; background: #f6f2e9; }
.sovereignty-section::before { content: ""; position: absolute; top: 190px; right: -160px; width: 520px; height: 520px; border: 1px solid rgba(11,120,173,.12); border-radius: 50%; }
.chapter-banner { position: relative; z-index: 1; margin: -45px 0 90px; padding: 14px 18px; display: flex; align-items: center; gap: 18px; border: 1px solid #d9d5ca; background: rgba(255,255,255,.55); border-radius: 10px; }
.chapter-banner span { flex: 0 0 auto; padding: 5px 8px; color: white; background: var(--navy); border-radius: 5px; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.chapter-banner p { margin: 0; color: #6f7779; font-size: 11px; }
.sovereignty-heading { position: relative; z-index: 1; max-width: 920px; }
.truth-card { position: relative; z-index: 1; max-width: 1200px; margin: -20px auto 42px; display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 25px; padding: 24px 28px; color: #dce8f0; background: var(--navy); border-radius: 16px; }
.truth-card > span { color: var(--cyan); text-transform: uppercase; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.truth-card p { margin: 0; font-size: 12px; }.truth-card strong { color: white; }
.experiment-path { position: relative; z-index: 1; max-width: 1200px; margin: auto; display: grid; grid-template-columns: 1fr 90px 1fr 90px 1fr; align-items: center; }
.experiment-path article { min-height: 255px; padding: 28px; background: white; border: 1px solid #dddcd7; border-radius: 18px; box-shadow: 0 12px 35px rgba(39,50,54,.07); }
.path-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 25px; color: white; background: var(--sky); border-radius: 12px; font-size: 18px; }
.experiment-path article small { color: var(--sky); font-size: 8px; letter-spacing: .12em; font-weight: 800; }
.experiment-path h3 { margin: 5px 0 8px; font-size: 18px; }.experiment-path p { min-height: 58px; color: var(--muted); font-size: 11px; }.experiment-path b { display: block; padding-top: 14px; border-top: 1px solid #ecebe7; font-size: 9px; }
.path-arrow { display: flex; align-items: center; flex-direction: column; color: var(--sky); }.path-arrow span { font-size: 25px; }.path-arrow small { color: #8e9797; font-size: 7px; }
.vps-benefits { position: relative; z-index: 1; max-width: 1200px; margin: 25px auto 80px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.vps-benefits article { padding: 22px; border-top: 2px solid var(--sky); background: rgba(255,255,255,.58); }
.vps-benefits span { color: var(--sky); font: 800 9px Manrope; }.vps-benefits h3 { margin: 13px 0 6px; font-size: 14px; }.vps-benefits p { margin: 0; color: var(--muted); font-size: 10px; }
.sovereignty-grid { position: relative; z-index: 1; max-width: 1200px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.sovereignty-copy > h3 { margin: 0; max-width: 590px; font-size: clamp(28px,3vw,43px); line-height: 1.12; letter-spacing: -.035em; }.sovereignty-copy > p:not(.eyebrow) { color: var(--muted); }
.sovereignty-rules { margin-top: 22px; display: grid; gap: 9px; }.sovereignty-rules > div { display: flex; gap: 10px; align-items: flex-start; }.sovereignty-rules span { flex: 0 0 auto; width: 23px; height: 23px; display: grid; place-items: center; color: #317d62; background: #dfefe7; border-radius: 50%; font-size: 9px; }.sovereignty-rules p { margin: 2px 0; color: #657374; font-size: 11px; }.sovereignty-rules strong { color: var(--ink); }
.data-map { padding: 28px; background: white; border: 1px solid #dcddd8; border-radius: 18px; box-shadow: var(--shadow); }.data-map-head { padding-bottom: 18px; border-bottom: 1px solid #e8e8e4; }.data-map-head span,.data-map-head strong { display: block; }.data-map-head span { color: var(--sky); font-size: 8px; font-weight: 800; letter-spacing: .12em; }.data-map-head strong { margin-top: 4px; font: 800 16px Manrope; }.data-row { min-height: 55px; display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid #efefec; font-size: 10px; }.data-row > span { color: #6f7c7f; }.data-row b { color: var(--ink); }.data-row i { padding: 3px 7px; color: #67818a; background: #edf4f5; border-radius: 20px; font-style: normal; font-size: 7px; }.data-map > p { margin: 17px 0 0; color: #8a9698; font-size: 8px; }
.vps-guardrails { position: relative; z-index: 1; max-width: 1200px; margin: 45px auto 0; padding: 23px; background: #ece5d7; border: 1px solid #d9ceba; border-radius: 14px; }.vps-guardrails > div:first-child { display: flex; gap: 12px; align-items: flex-start; }.vps-guardrails p { margin: 0; color: #687070; font-size: 11px; }.vps-guardrails strong { color: var(--ink); }.guardrail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0 30px; }.guardrail-tags span { padding: 5px 8px; color: #5f6d6c; background: rgba(255,255,255,.7); border-radius: 20px; font-size: 8px; font-weight: 700; }
.deployment-section { color: white; background: var(--navy); }.timeline { position: relative; max-width: 1250px; margin: auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.1); }.timeline::before { content: ""; position: absolute; top: 75px; left: 11%; right: 11%; height: 1px; background: #3c5873; }.timeline article { position: relative; min-height: 330px; padding: 28px; background: var(--navy); }.week { color: var(--cyan); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.timeline i { position: relative; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; margin: 25px 0 28px; border-radius: 50%; color: var(--navy); background: var(--cyan); border: 6px solid var(--navy); box-shadow: 0 0 0 1px var(--cyan); font-style: normal; font-size: 8px; font-weight: 800; }.timeline h3 { margin: 0 0 10px; font-size: 20px; }.timeline p { color: #9fb0c1; font-size: 12px; }.timeline b { position: absolute; bottom: 30px; color: #d4dfe7; font-size: 9px; }.success-metrics { max-width: 1250px; margin: 45px auto 0; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.12); display: grid; grid-template-columns: .7fr repeat(4,1fr); gap: 25px; }.success-metrics > p { color: var(--cyan); text-transform: uppercase; letter-spacing: .1em; font-size: 9px; font-weight: 800; }.success-metrics strong,.success-metrics span { display: block; }.success-metrics strong { font: 800 17px Manrope; }.success-metrics span { color: #91a6b8; font-size: 9px; }
.decision-section { background: var(--paper); }.decision-card { max-width: 1200px; margin: auto; display: grid; grid-template-columns: 1.4fr .6fr; overflow: hidden; border-radius: 27px; background: var(--sky); color: white; box-shadow: 0 25px 60px rgba(45,155,211,.22); }.decision-copy { padding: 60px; }.decision-copy .eyebrow { color: #d2f1f8; }.decision-copy h2 { margin: 0; font-size: clamp(38px,4vw,58px); line-height: 1.06; letter-spacing: -.045em; }.decision-copy h2 em { color: #b9eff6; }.decision-copy > p:not(.eyebrow) { max-width: 650px; color: #e1f5f9; }.decision-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }.decision-points span { padding: 7px 10px; background: rgba(255,255,255,.14); border-radius: 20px; font-size: 10px; font-weight: 700; }.decision-box { padding: 45px 35px; display: flex; flex-direction: column; justify-content: center; background: rgba(5,39,66,.25); }.decision-box small { color: #b6eaf4; letter-spacing: .12em; font-size: 8px; font-weight: 800; }.decision-box strong { margin: 13px 0; font-size: 22px; line-height: 1.2; }.decision-box p { color: #d4edf2; font-size: 11px; }.decision-box a { margin-top: 25px; display: flex; justify-content: space-between; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.25); text-decoration: none; font-size: 10px; font-weight: 700; }
.feedback-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px,8vw,120px); align-items: start; background: #eef5f5; }
.feedback-intro h2 { margin: 0; font-size: clamp(37px,4vw,58px); line-height: 1.08; letter-spacing: -.045em; }.feedback-intro h2 em { color: var(--sky); font-style: normal; }.feedback-intro > p:not(.eyebrow) { color: var(--muted); }
.feedback-route { margin-top: 30px; display: grid; gap: 12px; }.feedback-route > div { display: flex; align-items: center; gap: 13px; padding: 13px; background: rgba(255,255,255,.65); border: 1px solid #d7e3e4; border-radius: 11px; }.feedback-route > div > span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; color: var(--sky); background: white; border-radius: 8px; font-size: 9px; font-weight: 800; }.feedback-route p { margin: 0; }.feedback-route strong,.feedback-route small { display: block; }.feedback-route strong { font-size: 11px; }.feedback-route small { color: #7c8c8f; font-size: 9px; }
.feedback-form { padding: 32px; background: white; border: 1px solid #d8e2e3; border-radius: 20px; box-shadow: var(--shadow); }.form-head { padding-bottom: 21px; border-bottom: 1px solid #e4eaeb; }.form-head span,.form-head strong { display: block; }.form-head span { color: var(--sky); font-size: 8px; font-weight: 800; letter-spacing: .12em; }.form-head strong { margin-top: 5px; font: 700 16px Manrope; }.feedback-form fieldset { margin: 22px 0; padding: 0; border: 0; }.feedback-form legend,.feedback-form > label:not(.consent) { color: var(--ink); font-size: 10px; font-weight: 700; }.feedback-form legend small,.feedback-form > label small { color: #899698; font-weight: 400; }.feedback-types { display: flex; gap: 8px; }.feedback-types legend { width: 100%; margin-bottom: 9px; }.feedback-types label { position: relative; flex: 1; }.feedback-types input { position: absolute; opacity: 0; }.feedback-types label > span { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 5px; color: var(--sky); background: #eaf5f8; border-radius: 6px; }.feedback-types label { padding: 10px; color: #637578; border: 1px solid #dce5e6; border-radius: 9px; font-size: 9px; cursor: pointer; }.feedback-types label:has(input:checked) { color: var(--ink); border-color: var(--sky); box-shadow: inset 0 0 0 1px var(--sky); background: #f4fafb; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.form-row label,.message-field { display: flex; flex-direction: column; gap: 5px; }.feedback-form input[type="text"],.feedback-form input[type="email"],.feedback-form textarea { width: 100%; padding: 11px 12px; color: var(--ink); background: #f8fafa; border: 1px solid #dce4e5; border-radius: 8px; font: 400 11px "DM Sans"; }.feedback-form input:focus,.feedback-form textarea:focus { outline: 2px solid var(--sky); outline-offset: 1px; background: white; }.feedback-form textarea { min-height: 120px; resize: vertical; }.message-field { position: relative; margin-top: 18px; }.message-field > small { position: absolute; bottom: 8px; right: 10px; padding: 2px 4px; background: #f8fafa; font-size: 7px; }.rating-field legend { margin-bottom: 10px; }.rating-options { display: flex; gap: 6px; }.rating-options label { position: relative; flex: 1; text-align: center; cursor: pointer; }.rating-options input { position: absolute; opacity: 0; }.rating-options span { display: grid; place-items: center; height: 34px; color: #6e8083; border: 1px solid #dbe4e5; border-radius: 7px; font-size: 10px; font-weight: 700; }.rating-options input:checked + span { color: white; background: var(--sky); border-color: var(--sky); }.rating-options small { display: block; margin-top: 3px; color: #8a989a; font-size: 6px; }.consent { display: flex; gap: 9px; align-items: flex-start; color: #66777a; font-size: 9px; }.consent input { margin-top: 3px; accent-color: var(--sky); }.honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }.form-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #e2e8e9; }.form-footer p { max-width: 330px; margin: 0; color: #8b9799; font-size: 7px; }.form-footer button { display: flex; align-items: center; gap: 14px; padding: 11px 13px; color: white; background: var(--sky); border: 0; border-radius: 9px; font-size: 10px; font-weight: 700; cursor: pointer; }.form-footer button:disabled { opacity: .55; cursor: wait; }.form-footer button b { font-size: 15px; }.form-status { display: none; margin-top: 14px; padding: 12px; border-radius: 9px; font-size: 10px; }.form-status.success { display: block; color: #285d49; background: #e3f3eb; border: 1px solid #c8e6d8; }.form-status.error { display: block; color: #843b30; background: #fceae6; border: 1px solid #f1ccc4; }
.sources-section { padding-top: 20px; }.sources-head h2 { margin: 0 0 40px; font-size: clamp(32px,3vw,46px); }.sources-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 35px; background: white; border: 1px solid var(--line); border-radius: 18px; }.sources-grid h3 { margin-top: 0; font-size: 15px; }.sources-grid ul { padding-left: 18px; color: var(--muted); font-size: 12px; }.sources-grid li { margin: 9px 0; }.source-links { list-style: none; padding: 0 !important; }.source-links a { display: flex; justify-content: space-between; text-decoration: none; padding-bottom: 8px; border-bottom: 1px solid #e9edef; color: var(--ink); }.source-links a:hover { color: var(--sky); }.source-note { color: #8c98a3; font-size: 9px; margin: 17px 4px; }
footer { min-height: 180px; padding: 40px clamp(24px, 7vw, 110px); display: flex; align-items: center; justify-content: space-between; color: #aab8c5; background: #081b30; }.footer img, footer img { width: 125px; filter: brightness(0) invert(1); opacity: .9; }.footer p, footer p { font-size: 11px; }.footer a, footer a { color: var(--cyan); font-size: 11px; text-decoration: none; font-weight: 700; }
.reveal { opacity: 1; transform: none; }.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; }.reveal { opacity: 1; transform: none; } }
@media (max-width: 1050px) { .desktop-nav { display: none; }.hero { grid-template-columns: 1fr; padding-top: 60px; }.hero-copy { max-width: 760px; }.hero-visual { min-height: 570px; }.problem-grid { grid-template-columns: 1fr 1fr; }.problem-card:last-child { grid-column: span 2; }.bot-workflow { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; min-height: 0; }.bot-center { position: relative; left: auto; top: auto; transform: none; grid-column: span 2; margin: 70px auto; }.bot-task { position: static; width: auto; }.rh-section,.ai-layout { grid-template-columns: 1fr; }.ai-visual { order: 2; }.experiment-path { grid-template-columns: 1fr; gap: 12px; }.path-arrow { transform: rotate(90deg); height: 35px; }.vps-benefits { grid-template-columns: 1fr 1fr; }.sovereignty-grid,.feedback-section { grid-template-columns: 1fr; }.timeline { grid-template-columns: 1fr 1fr; }.timeline::before { display: none; }.success-metrics { grid-template-columns: 1fr 1fr; }.success-metrics > p { grid-column: span 2; }.decision-card { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .topbar { height: 66px; padding: 0 16px; }.brand img { width: 85px; }.brand > span:last-child,.brand-divider { display: none; }.print-button { padding: 9px 11px; font-size: 11px; }.hero { min-height: auto; padding: 55px 20px 50px; }.hero h1 { font-size: 44px; }.hero-visual { min-height: 440px; margin: 15px -10px 0; }.mock-window { transform: none; }.window-bar { display: none; }.discord-shell { height: 375px; grid-template-columns: 43px 125px 1fr; }.server-rail { padding: 10px 5px; }.server-icon { width: 30px; height: 30px; }.channel-list { padding: 12px 6px; }.channel-list > strong { margin-bottom: 16px; }.channel-list > small { margin-top: 13px; }.channel { padding: 5px 4px; font-size: 8px; }.chat-head small { display: none; }.welcome-card { margin: 12px; }.choice-grid { grid-template-columns: 1fr; margin: 0 12px 10px; }.choice-grid div { min-height: 53px; }.choice-grid div:nth-child(n+2) { display: none; }.bot-message { margin: 0 12px; }.floating-card { display: none; }.trust-strip { grid-template-columns: 1fr; }.trust-items { display: grid; grid-template-columns: 1fr 1fr; }.section { padding: 75px 20px; }.section-heading { margin-bottom: 35px; }.section-heading h2,.rh-copy h2,.ai-copy h2 { font-size: 38px; }.problem-grid,.flow-layout,.sources-grid { grid-template-columns: 1fr; }.problem-card:last-child { grid-column: auto; }.role-demo { grid-template-columns: 1fr; }.role-controls { padding: 22px 16px; }.role-button { width: auto; display: inline-flex; font-size: 0; padding: 8px; }.role-button span { font-size: 12px; }.role-explanation { margin-top: 10px; }.access-map { min-height: 0; padding: 22px 17px; }.access-head { gap: 15px; }.principle-row { grid-template-columns: 1fr; }.flow-card { min-height: 470px; padding: 25px 18px; }.bot-workflow { grid-template-columns: 1fr; }.bot-center { grid-column: auto; margin: 55px auto; }.tag-example { grid-template-columns: 1fr; }.stat-row { grid-template-columns: 1fr; }.ai-visual { height: 410px; transform: scale(.82); margin: -30px; }.chapter-banner { align-items: flex-start; flex-direction: column; margin-bottom: 55px; }.truth-card { grid-template-columns: 1fr; gap: 8px; }.vps-benefits { grid-template-columns: 1fr; }.sovereignty-grid { gap: 35px; }.data-row { grid-template-columns: 1fr auto; padding: 10px 0; }.data-row i { grid-column: 1 / -1; justify-self: start; }.guardrail-tags { margin-left: 0; }.feedback-form { padding: 23px 18px; }.feedback-types { flex-wrap: wrap; }.feedback-types label { flex-basis: calc(50% - 8px); }.form-row { grid-template-columns: 1fr; }.form-footer { align-items: stretch; flex-direction: column; }.form-footer button { justify-content: space-between; }.timeline { grid-template-columns: 1fr; }.timeline article { min-height: 280px; }.success-metrics { grid-template-columns: 1fr 1fr; }.decision-copy { padding: 40px 25px; }.decision-box { padding: 35px 25px; }.sources-grid { padding: 25px; gap: 25px; } footer { align-items: flex-start; flex-direction: column; gap: 18px; } }
@media print { @page { margin: 12mm; } body { background: white; font-size: 10pt; }.topbar,.hero-actions,.print-button { display: none !important; }.hero { min-height: 0; padding: 20mm 10mm; grid-template-columns: 1fr; }.hero-visual { display: none; }.section { padding: 15mm 8mm; break-inside: avoid; }.trust-strip { print-color-adjust: exact; -webkit-print-color-adjust: exact; }.architecture-section,.deployment-section,.decision-card,footer { print-color-adjust: exact; -webkit-print-color-adjust: exact; }.role-demo { box-shadow: none; }.problem-grid { grid-template-columns: repeat(3,1fr); }.problem-card { min-height: 310px; }.flow-card { min-height: 420px; }.bot-workflow { min-height: 520px; }.rh-section,.ai-layout { grid-template-columns: 1fr 1fr; }.timeline { grid-template-columns: repeat(4,1fr); }.reveal { opacity: 1; transform: none; } }