:root {
  --ink: #101722;
  --ink-2: #182231;
  --paper: #080d15;
  --white: #fff;
  --line: #283445;
  --muted: #9ba9bb;
  --blue: #5a8ff2;
  --blue-bright: #76a4fa;
  --blue-pale: rgba(90,143,242,.13);
  --green: #22a462;
  --shell: 1240px;
  --header: 78px;
  --radius: 24px;
  --shadow: 0 30px 90px rgba(18, 35, 64, .14);
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --app-frame: url("../brand/fo_frame_dark.png");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: #070b11;
  background-image: linear-gradient(rgba(7,11,17,.58),rgba(7,11,17,.72)),var(--app-frame);
  background-position: center,center top;
  background-size: auto,280px auto;
  background-repeat: no-repeat,repeat;
  background-attachment: fixed;
  color: #eef3fb;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.menu-open, body.sheet-open, body.image-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.055em; }
.shell { width: min(var(--shell), calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 10px 14px; border-radius: 8px; background: #fff; color: #101722; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; top: 0; z-index: 100; height: var(--header); border-bottom: 1px solid rgba(219,226,235,.8); background: rgba(244,247,251,.88); backdrop-filter: blur(20px); transition: box-shadow .2s, background .2s; }
.site-header.is-scrolled { background: rgba(255,255,255,.94); box-shadow: 0 14px 40px rgba(15,31,52,.07); }
.header-inner { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 30px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; }
.wordmark img { width: 43px; height: 43px; border-radius: 50%; }
.wordmark span { display: grid; line-height: 1.08; }
.wordmark strong { font-size: .98rem; letter-spacing: .015em; }
.wordmark small { margin-top: 5px; color: var(--muted); font-size: .59rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.desktop-nav { display: flex; align-items: center; gap: 28px; color: #465468; font-size: .83rem; font-weight: 700; }
.desktop-nav a { transition: color .16s; }
.desktop-nav a:hover, .desktop-nav .is-active { color: var(--blue); }
.desktop-nav .header-cta { padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; }
.desktop-nav .header-cta:hover { background: var(--blue); color: #fff; }
.menu-button, .mobile-nav { display: none; }

.hero-home { position: relative; overflow: hidden; padding: clamp(68px, 8vw, 106px) 0 0; background: radial-gradient(circle at 50% 48%, rgba(47,111,228,.12), transparent 38%), linear-gradient(180deg,#f9fbff 0%,#eef3f9 100%); }
.hero-home::before { content: ""; position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(58,87,126,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(58,87,126,.045) 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom,#000,transparent 70%); pointer-events: none; }
.hero-home-copy { position: relative; z-index: 2; max-width: 920px; text-align: center; }
.kicker, .section-number { margin: 0 0 23px; color: var(--blue); font-size: .69rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.kicker { display: flex; align-items: center; justify-content: center; gap: 11px; }
.kicker span { width: 30px; height: 2px; background: var(--blue); }
.hero-home h1, .modules-hero h1 { margin-bottom: 27px; font-size: clamp(3.8rem, 7.7vw, 7.25rem); font-weight: 780; line-height: .9; }
h1 em, h2 em { color: var(--blue); font-style: normal; }
.hero-lead { max-width: 780px; margin: 0 auto 32px; color: #536174; font-size: clamp(1.04rem, 1.5vw, 1.25rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 13px; padding: 0 24px; border: 0; border-radius: 12px; font-size: .88rem; font-weight: 780; transition: transform .18s, background .18s, box-shadow .18s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue); color: #fff; box-shadow: 0 15px 38px rgba(47,111,228,.24); }
.button-primary:hover { background: #225dc5; }
.button-quiet { border: 1px solid var(--line); background: rgba(255,255,255,.76); color: var(--ink); }
.proof-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 27px; margin: 30px 0 0; padding: 0; color: var(--muted); font-size: .77rem; font-weight: 700; list-style: none; }
.proof-list li { display: flex; align-items: center; gap: 8px; }
.proof-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.hero-showcase { position: relative; z-index: 1; margin-top: clamp(54px,7vw,86px); }
.hero-image-wrap { overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 28px 28px 0 0; background: #fff; box-shadow: 0 -12px 70px rgba(25,50,88,.14); }
.hero-image-wrap img { width: 100%; aspect-ratio: 1.776; object-fit: cover; }
.hero-stat { position: absolute; display: flex; align-items: center; gap: 11px; padding: 13px 17px; border: 1px solid rgba(219,226,235,.9); border-radius: 13px; background: rgba(255,255,255,.93); box-shadow: 0 16px 40px rgba(14,31,56,.11); backdrop-filter: blur(16px); }
.hero-stat-left { left: -18px; top: 20%; }
.hero-stat-right { right: -18px; bottom: 17%; }
.hero-stat strong { color: var(--blue); font-size: 1.5rem; line-height: 1; }
.hero-stat span { font-size: .75rem; font-weight: 750; }
.hero-stat i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(34,164,98,.13); }

.signal-bar { padding: 28px 0; background: var(--ink); color: #fff; }
.signal-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.signal-grid p { display: grid; grid-template-columns: 34px auto; margin: 0; padding: 0 36px; border-right: 1px solid rgba(255,255,255,.12); }
.signal-grid p:first-child { padding-left: 0; }
.signal-grid p:last-child { border: 0; }
.signal-grid span { grid-row: 1/3; color: #6e91c9; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.signal-grid strong { font-size: .88rem; }
.signal-grid small { color: #9ca9ba; font-size: .75rem; }

.section { padding: clamp(86px,10vw,138px) 0; }
.section-intro { max-width: 780px; }
.section-intro h2, .download-section h2, .closing h2, .module-final h2 { margin-bottom: 25px; font-size: clamp(2.65rem,5.2vw,4.9rem); font-weight: 760; line-height: .99; }
.section-intro-row { display: grid; max-width: none; grid-template-columns: minmax(0,1.15fr) minmax(330px,.55fr); align-items: end; gap: clamp(45px,8vw,100px); margin-bottom: 56px; }
.section-intro-row > p, .section-intro-row > div:last-child > p { margin-bottom: 19px; color: var(--muted); }
.text-link { color: var(--blue); font-size: .86rem; font-weight: 800; }
.text-link span { margin-left: 7px; }

.story-section { background: #fff; }
.story-grid { display: grid; grid-template-columns: minmax(320px,.85fr) minmax(450px,1fr); gap: clamp(55px,9vw,125px); align-items: start; }
.sticky-intro { position: sticky; top: calc(var(--header) + 55px); }
.story-copy { color: var(--muted); font-size: 1.03rem; }
.story-lead { color: var(--ink); font-size: clamp(1.45rem,2.4vw,2rem); font-weight: 570; line-height: 1.42; letter-spacing: -.025em; }
.story-copy blockquote { margin: 48px 0; padding: 28px 0 28px 30px; border-left: 3px solid var(--blue); color: var(--ink); font-size: 1.28rem; font-weight: 650; line-height: 1.55; }
.reason-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin-top: 50px; border: 1px solid var(--line); background: var(--line); }
.reason-grid article { min-height: 210px; padding: 26px; background: var(--paper); }
.reason-grid span { color: var(--blue); font-size: .68rem; font-weight: 850; }
.reason-grid h3 { margin: 54px 0 9px; color: var(--ink); font-size: 1rem; }
.reason-grid p { margin: 0; font-size: .85rem; }

.how-section { background: var(--ink); color: #fff; }
.section-number.light { color: #82abef; }
.how-section .section-intro-row > p { color: #a8b4c4; }
.process-list { margin: 0; padding: 0; list-style: none; }
.process-list li { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 28px; min-height: 135px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.13); }
.process-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
.process-number { color: #6d8fc6; font-size: .74rem; font-weight: 850; }
.process-list h3 { margin-bottom: 6px; font-size: 1.08rem; }
.process-list p { max-width: 720px; margin: 0; color: #9facbd; font-size: .87rem; }
.process-tag { padding: 7px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 99px; color: #afc2df; font-size: .69rem; font-weight: 750; }

.module-teaser { background: var(--paper); }
.teaser-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 16px; }
.teaser-card { position: relative; display: flex; min-height: 500px; overflow: hidden; flex-direction: column; justify-content: space-between; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .2s, box-shadow .2s; }
.teaser-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.teaser-card::after { content: ""; position: absolute; inset: 40% 0 0; z-index: 1; background: linear-gradient(transparent,rgba(10,17,27,.82)); pointer-events: none; }
.teaser-index { position: relative; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--blue); font-size: .67rem; font-weight: 850; }
.teaser-card > div { position: relative; z-index: 3; color: #fff; }
.teaser-card small { color: #b9cee9; font-weight: 750; }
.teaser-card h3 { margin: 9px 0 0; font-size: clamp(1.35rem,2vw,2rem); line-height: 1.2; letter-spacing: -.035em; }
.teaser-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .45s; }
.teaser-card:hover img { transform: scale(1.025); }

.download-section { position: relative; overflow: hidden; padding: clamp(90px,11vw,150px) 0 0; background: linear-gradient(135deg,#265fca,#173d86); color: #fff; }
.download-section::after { content: ""; position: absolute; right: -8%; top: -45%; width: 650px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 100px rgba(255,255,255,.025),0 0 0 200px rgba(255,255,255,.02); }
.download-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(380px,.9fr); align-items: end; gap: clamp(45px,6vw,80px); }
.download-grid > div:first-child { padding-bottom: 110px; }
.download-section p:not(.section-number) { max-width: 620px; color: #c4d4ed; }
.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.store-button { display: flex; min-width: 190px; align-items: center; gap: 13px; padding: 10px 17px; border: 1px solid rgba(255,255,255,.24); border-radius: 11px; background: #0a101a; color: #fff; transition: transform .18s; }
.store-button:hover { transform: translateY(-2px); }
.store-button > span:last-child { display: grid; line-height: 1.2; }
.store-button small { font-size: .61rem; }
.store-button strong { font-size: 1.02rem; }
.store-icon { width: 28px; text-align: center; font-size: 1.35rem; }
.download-phone { justify-self: center; width: min(500px,100%); overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-bottom: 0; border-radius: 30px 30px 0 0; background: #080c12; box-shadow: 0 -30px 70px rgba(4,16,40,.35); }
.download-phone img { width: 100%; height: auto; }

.closing, .module-final { padding: clamp(88px,11vw,145px) 0; background: #e9eef5; text-align: center; }
.closing-inner, .module-final .shell { max-width: 900px; }
.closing p:not(.section-number), .module-final p:not(.section-number) { max-width: 650px; margin: 0 auto 32px; color: var(--muted); }
.button-light { background: #fff; color: var(--ink); box-shadow: 0 15px 40px rgba(23,42,72,.12); }
.site-footer { padding: 60px 0 24px; background: #0b111a; color: #fff; }
.footer-main { display: grid; grid-template-columns: .7fr 1fr 1fr; align-items: start; gap: 45px; padding-bottom: 44px; }
.wordmark-footer small { color: #768396; }
.footer-main > p { max-width: 340px; margin: 4px 0 0; color: #8f9bab; font-size: .82rem; }
.footer-main nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px 24px; color: #aab4c2; font-size: .78rem; }
.footer-main nav a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); color: #687587; font-size: .69rem; }

/* Dark Facility Core theme */
.site-header {
  border-bottom-color: rgba(255,255,255,.08);
  background: rgba(8,13,21,.86);
}
.site-header.is-scrolled {
  background: rgba(10,16,25,.95);
  box-shadow: 0 16px 45px rgba(0,0,0,.28);
}
.wordmark strong { color: #f4f7fc; }
.wordmark small { color: #7f8da0; }
.desktop-nav { color: #a7b3c3; }
.desktop-nav .header-cta { background: #f2f5fa; color: #101722; }
.desktop-nav .header-cta:hover { background: var(--blue); color: #fff; }

.hero-home {
  background:
    radial-gradient(circle at 50% 58%, rgba(67,118,214,.21), transparent 36%),
    radial-gradient(circle at 85% 0%, rgba(90,143,242,.09), transparent 24%),
    linear-gradient(180deg,#0c121d 0%,#080d15 100%);
}
.hero-home::before {
  opacity: .8;
  background-image: linear-gradient(rgba(135,166,214,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(135,166,214,.045) 1px,transparent 1px);
}
.hero-lead { color: #a8b5c6; }
.button-quiet { border-color: #2b3748; background: rgba(18,27,40,.76); color: #e9eef7; }
.button-quiet:hover { border-color: #4c6488; background: #151f2e; }
.proof-list { color: #8493a7; }
.hero-image-wrap {
  border-color: rgba(133,163,207,.2);
  background: #0e1520;
  box-shadow: 0 -15px 90px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.025) inset;
}
.hero-stat { border-color: #2a3647; background: rgba(15,23,35,.92); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.signal-bar { border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); background: #060a10; }

.story-section { background: #0c121b; }
.section-intro h2, .download-section h2, .closing h2, .module-final h2 { color: #f3f6fb; }
.story-copy { color: #97a5b7; }
.story-lead, .story-copy blockquote { color: #eef3fa; }
.reason-grid { border-color: #263243; background: #263243; }
.reason-grid article { background: #111925; }
.reason-grid h3 { color: #f1f5fb; }

.how-section { background: #05090f; }
.process-list li { border-color: rgba(255,255,255,.1); }
.process-tag { background: rgba(90,143,242,.08); }

.module-teaser { background: #080d15; }
.section-intro-row > p, .section-intro-row > div:last-child > p { color: #99a7b9; }
.teaser-card { border-color: #253143; background: #111925; box-shadow: 0 20px 55px rgba(0,0,0,.15); }
.teaser-card:hover { border-color: #3b4d67; box-shadow: 0 35px 90px rgba(0,0,0,.4); }

.download-section { border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(135deg,#173a79,#0b1a36 72%,#08101c); }
.closing { border-top: 1px solid #202b3a; background: #0d141e; }
.closing p:not(.section-number) { color: #9ba8b9; }
.button-light { background: #f4f7fb; color: #101722; }
.site-footer { border-top: 1px solid rgba(255,255,255,.06); background: #04070c; }

/* Shared app frame */
body > main, body > .site-footer { width: calc(100% - clamp(28px,7vw,96px)); margin-inline: auto; border-right: 1px solid rgba(255,255,255,.08); border-left: 1px solid rgba(255,255,255,.08); }
body > main { display: flex; overflow: hidden; flex-direction: column; gap: clamp(10px,1vw,16px); border-top: 1px solid rgba(255,255,255,.08); border-radius: 18px 18px 0 0; box-shadow: 0 24px 90px rgba(0,0,0,.38); }
body > main > section { flex: 0 0 auto; overflow: hidden; border-radius: 16px; }
body > .site-footer { margin-bottom: clamp(8px,2vw,28px); border-radius: 0 0 18px 18px; }

/* Editorial high-impact homepage */
.impact-hero { position: relative; overflow: hidden; padding: clamp(62px,8vw,110px) 0 0; background: radial-gradient(circle at 82% 5%,rgba(72,126,228,.12),transparent 23%),#070b11; }
.impact-hero::before { content: ""; position: absolute; inset: 0; opacity: .6; background-image: linear-gradient(rgba(146,174,214,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(146,174,214,.035) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom,#000,transparent 68%); pointer-events: none; }
.impact-hero-top { position: relative; z-index: 2; }
.impact-overline { display: flex; justify-content: space-between; margin-bottom: clamp(45px,7vw,86px); color: #74849a; font-size: .65rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.impact-overline span:first-child { color: var(--blue); }
.impact-hero h1 { max-width: 1180px; margin: 0; color: #f3f6fb; font-size: clamp(4.5rem,10.8vw,10.4rem); font-weight: 780; line-height: .79; letter-spacing: -.075em; }
.impact-hero h1 em { display: inline-block; margin-left: clamp(0px,10vw,130px); color: #7ea7f4; }
.impact-hero-bottom { display: grid; grid-template-columns: minmax(350px,.65fr) minmax(360px,.55fr); justify-content: end; gap: clamp(45px,8vw,115px); margin: clamp(42px,6vw,75px) 0 clamp(60px,8vw,100px) auto; max-width: 950px; }
.impact-hero-bottom > p { margin: 0; color: #a4b0c1; font-size: clamp(1.08rem,1.55vw,1.28rem); line-height: 1.72; }
.impact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.impact-link { display: inline-flex; align-items: center; gap: 12px; color: #c3cfdf; font-size: .79rem; font-weight: 800; }
.impact-link span { color: var(--blue); font-size: 1rem; }
.impact-product { position: relative; z-index: 2; width: min(1460px,calc(100% - 48px)); padding-top: 52px; border-top: 1px solid rgba(255,255,255,.1); }
.impact-product > picture { display: block; }
.impact-product > picture img { width: 100%; border: 1px solid #27354a; border-radius: 25px 25px 0 0; box-shadow: 0 -25px 100px rgba(0,0,0,.56); }
.impact-product-label { position: absolute; top: 0; left: 0; display: flex; gap: 28px; align-items: center; }
.impact-product-label span { color: var(--blue); font-size: .65rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.impact-product-label strong { font-size: .78rem; }
.impact-metric { position: absolute; z-index: 3; border: 1px solid #34445b; border-radius: 14px; background: rgba(10,16,25,.91); box-shadow: 0 22px 60px rgba(0,0,0,.44); backdrop-filter: blur(16px); }
.metric-one { top: 24%; left: -18px; display: grid; width: 180px; padding: 20px; }
.metric-one small { color: #718096; font-size: .61rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.metric-one strong { margin: 9px 0 3px; color: #fff; font-size: 2.9rem; line-height: 1; }
.metric-one span { color: #8fa0b6; font-size: .68rem; }
.metric-two { right: -16px; bottom: 20%; display: flex; align-items: center; gap: 11px; padding: 14px 17px; font-size: .7rem; font-weight: 800; }
.metric-two i { width: 8px; height: 8px; border-radius: 50%; background: #2cd175; box-shadow: 0 0 0 5px rgba(44,209,117,.12); }

.expertise-strip { overflow: hidden; padding: 22px 0; border-top: 1px solid #202a38; border-bottom: 1px solid #202a38; background: #0c121b; }
.expertise-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; white-space: nowrap; color: #8b99ab; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.expertise-row i { width: 4px; height: 4px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); }

.thesis-section { padding: clamp(100px,13vw,180px) 0; background: #f0f2f5; color: #111823; }
.thesis-grid { display: grid; grid-template-columns: 190px 1fr; gap: clamp(35px,7vw,95px); }
.thesis-index { padding-top: 12px; border-top: 1px solid #bfc6cf; }
.thesis-index span { color: #2964ca; font-size: .7rem; font-weight: 850; }
.thesis-index p { margin-top: 10px; color: #6a7481; font-size: .72rem; font-weight: 750; }
.thesis-main h2 { max-width: 980px; margin-bottom: 52px; color: #111823; font-size: clamp(3rem,6.3vw,6.2rem); font-weight: 760; line-height: .98; }
.thesis-main h2 em { color: #2d6cd8; }
.thesis-copy { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(30px,6vw,80px); max-width: 920px; margin-left: auto; color: #616d7c; }
.thesis-copy p:first-child { color: #222e3c; font-size: 1.08rem; font-weight: 570; }
.fragmented-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.1fr; align-items: stretch; gap: 12px; margin-top: clamp(75px,10vw,130px); }
.fragmented-flow article { min-height: 190px; padding: 24px; border: 1px solid #cbd1d8; background: rgba(255,255,255,.52); }
.fragmented-flow article span { color: #8b95a2; font-size: .65rem; font-weight: 850; }
.fragmented-flow article strong { display: block; margin-top: 64px; font-size: .95rem; }
.fragmented-flow article small { display: block; margin-top: 5px; color: #737e8b; font-size: .68rem; }
.fragmented-flow .flow-result { border-color: #1d4e9f; background: #1d4e9f; color: #fff; }
.fragmented-flow .flow-result span, .fragmented-flow .flow-result small { color: #afc9f2; }
.flow-arrow { display: grid; place-items: center; color: #8f99a5; }

.connection-stage { position: relative; display: grid; min-height: 680px; overflow: hidden; grid-template-columns: minmax(310px,.9fr) 220px minmax(390px,1.08fr); align-items: stretch; gap: 0; margin-top: clamp(75px,10vw,130px); padding: 18px; border: 1px solid #273448; border-radius: 30px; background: radial-gradient(circle at 50% 50%,rgba(65,119,218,.22),transparent 24%),linear-gradient(145deg,#0e1622,#070b11 72%); box-shadow: 0 35px 90px rgba(15,31,52,.2); color: #edf3fb; }
.connection-stage::before { content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none; background-image: linear-gradient(rgba(132,164,211,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(132,164,211,.045) 1px,transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at center,#000,transparent 82%); }
.fragment-panel, .context-panel { position: relative; z-index: 2; overflow: hidden; border: 1px solid #2a3749; border-radius: 20px; background: rgba(12,19,29,.82); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.connection-panel-head { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 18px; border-bottom: 1px solid #283547; color: #f0f4fa; font-size: .65rem; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.connection-panel-head > i { color: #68788f; font-size: .55rem; font-style: normal; }
.connection-panel-head .is-live { display: flex; align-items: center; gap: 7px; color: #7f91aa; }
.connection-panel-head .is-live b { width: 6px; height: 6px; border-radius: 50%; background: #2cd175; box-shadow: 0 0 0 4px rgba(44,209,117,.12); }
.fragment-field { position: relative; min-height: 585px; }
.fragment-field::before { content: ""; position: absolute; inset: 12% 8%; opacity: .6; background: radial-gradient(circle at center,rgba(70,103,151,.12),transparent 65%); }
.fragment-card { position: absolute; display: grid; width: min(82%,285px); grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid #344257; border-radius: 13px; background: rgba(19,29,43,.96); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.fragment-card::after { content: ""; position: absolute; width: 34px; border-top: 1px dashed #45556d; opacity: .6; }
.fragment-card:nth-of-type(odd)::after { right: -35px; }
.fragment-card:nth-of-type(even)::after { left: -35px; }
.fragment-icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #3a4a62; border-radius: 9px; background: #0d1520; color: #79a3ef; font-size: .85rem; font-weight: 800; }
.fragment-card > div { display: grid; min-width: 0; }
.fragment-card small { color: #718198; font-size: .54rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fragment-card strong { overflow: hidden; margin-top: 2px; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.fragment-card > i { padding: 4px 7px; border: 1px solid #36465c; border-radius: 99px; color: #7f90a7; font-size: .5rem; font-style: normal; font-weight: 750; }
.fragment-calendar { top: 11%; left: 9%; transform: rotate(-2deg); }
.fragment-chat { top: 31%; right: 7%; transform: rotate(1.5deg); }
.fragment-paper { top: 51%; left: 7%; transform: rotate(-1deg); }
.fragment-sheet { top: 71%; right: 8%; transform: rotate(2deg); }
.fragment-loss { position: absolute; right: 0; bottom: 15px; left: 0; display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; color: #68778b; font-size: .58rem; font-weight: 700; }
.fragment-loss span { width: 6px; height: 6px; border-radius: 50%; background: #d55c67; box-shadow: 0 0 0 4px rgba(213,92,103,.1); }

.connection-core { position: relative; z-index: 3; display: grid; place-items: center; }
.core-disc { position: relative; z-index: 3; display: grid; width: 138px; aspect-ratio: 1; place-content: center; border: 1px solid rgba(126,167,244,.46); border-radius: 50%; background: radial-gradient(circle at 40% 30%,#18366b,#0b1526 67%); text-align: center; box-shadow: 0 0 0 12px rgba(90,143,242,.045),0 0 70px rgba(54,112,218,.32),inset 0 1px rgba(255,255,255,.09); }
.core-disc small { color: #91a3bd; font-size: .5rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.core-disc strong { margin: 4px 0; font-size: 1.65rem; line-height: 1; letter-spacing: -.05em; }
.core-disc i { color: #7da7f4; font-size: .5rem; font-style: normal; font-weight: 800; }
.core-pulse { position: absolute; z-index: 1; border: 1px solid rgba(99,147,232,.15); border-radius: 50%; animation: contextPulse 4.8s ease-in-out infinite; }
.pulse-one { width: 190px; aspect-ratio: 1; }
.pulse-two { width: 245px; aspect-ratio: 1; animation-delay: -2.4s; }
.core-line { position: absolute; z-index: 1; width: 72px; height: 1px; background: linear-gradient(90deg,transparent,#5684d4); }
.core-line::after { content: ""; position: absolute; top: -2px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: #76a4fa; box-shadow: 0 0 10px #76a4fa; animation: lineSignal 2.6s ease-in-out infinite; }
.line-one { left: -1px; top: 28%; transform: rotate(14deg); }
.line-two { left: -1px; bottom: 28%; transform: rotate(-14deg); }
.line-three { right: -1px; top: 31%; transform: rotate(166deg); }
.line-four { right: -1px; bottom: 31%; transform: rotate(194deg); }
.connection-core > p { position: absolute; bottom: 24%; margin: 0; color: #6882aa; font-size: .55rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.context-panel { padding-bottom: 18px; }
.context-object { margin: 18px 18px 0; padding: 22px; border: 1px solid #31425a; border-radius: 15px; background: radial-gradient(circle at 90% 0%,rgba(80,137,239,.14),transparent 35%),#111b29; }
.context-object-top { display: flex; justify-content: space-between; color: #6f83a1; font-size: .55rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.context-object h3 { margin: 29px 0 16px; font-size: clamp(1.25rem,2vw,1.65rem); line-height: 1.05; letter-spacing: -.04em; }
.context-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.context-tags span { padding: 5px 8px; border: 1px solid rgba(90,143,242,.2); border-radius: 6px; background: rgba(90,143,242,.1); color: #a8c3f5; font-size: .52rem; font-weight: 750; }
.context-tags span:first-child { border-color: rgba(228,105,115,.2); background: rgba(228,105,115,.09); color: #e8a1a7; }
.context-timeline { margin: 19px 18px 0; padding: 0; list-style: none; }
.context-timeline li { position: relative; display: grid; min-height: 65px; grid-template-columns: 24px 12px 1fr 20px; align-items: center; gap: 9px; border-top: 1px solid #28364a; }
.context-timeline li:last-child { border-bottom: 1px solid #28364a; }
.context-timeline li > span { color: #667995; font-size: .55rem; font-weight: 800; }
.context-timeline li > i { position: relative; z-index: 2; width: 7px; height: 7px; border: 2px solid #0d151f; border-radius: 50%; background: #5a8ff2; box-shadow: 0 0 0 1px #5a8ff2; }
.context-timeline li:not(:last-child) > i::after { content: ""; position: absolute; top: 8px; left: 2px; width: 1px; height: 55px; background: #354761; }
.context-timeline li > div { display: grid; }
.context-timeline strong { font-size: .7rem; }
.context-timeline small { margin-top: 2px; color: #718198; font-size: .56rem; }
.context-timeline li > b { color: #72a1f5; font-size: .66rem; text-align: right; }
.connection-caption { position: absolute; right: 0; bottom: 0; left: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 10px 18px; background: linear-gradient(transparent,rgba(5,9,15,.92)); color: #718198; font-size: .58rem; }
.connection-caption i { width: 30px; height: 1px; background: #3d6dbb; }
.connection-caption strong { color: #9dbcf2; font-weight: 750; }

@keyframes contextPulse { 0%,100% { opacity: .22; transform: scale(.92); } 50% { opacity: .75; transform: scale(1.05); } }
@keyframes lineSignal { 0%,100% { opacity: .25; transform: translateX(-20px); } 50% { opacity: 1; transform: translateX(18px); } }

.operating-system { position: relative; overflow: hidden; padding: clamp(105px,13vw,180px) 0; background: radial-gradient(circle at 50% 48%,rgba(61,112,208,.19),transparent 25%),#060a10; }
.operating-head { display: grid; grid-template-columns: 1fr .58fr; align-items: end; gap: clamp(55px,9vw,130px); }
.operating-head h2 { margin: 0; font-size: clamp(3.2rem,7vw,6.8rem); line-height: .9; }
.operating-head > p { margin: 0 0 7px; color: #9aa8ba; }
.system-stage { position: relative; display: grid; grid-template-columns: .7fr 1.4fr .7fr; align-items: center; gap: 30px; min-height: 800px; margin-top: 40px; }
.system-copy span { color: var(--blue); font-size: .65rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.system-copy h3 { margin: 21px 0 13px; font-size: 1.45rem; line-height: 1.22; letter-spacing: -.035em; }
.system-copy p { margin: 0; color: #8f9eb1; font-size: .84rem; }
.system-memory-visual { position: relative; display: grid; height: 780px; place-items: center; isolation: isolate; }
.system-memory-visual::before { content: ""; position: absolute; z-index: -1; width: min(90%,620px); aspect-ratio: 1; border: 1px solid rgba(104,149,231,.13); border-radius: 50%; box-shadow: 0 0 0 80px rgba(77,125,214,.025),0 0 120px rgba(62,113,209,.17); }
.system-memory-visual img { position: relative; z-index: 2; width: min(100%,610px); max-height: 760px; object-fit: contain; filter: drop-shadow(0 40px 70px rgba(0,0,0,.5)); }
.memory-glow { position: absolute; z-index: 1; width: 72%; height: 62%; border-radius: 50%; background: rgba(73,126,224,.17); filter: blur(80px); }
.memory-status { position: absolute; right: -6px; bottom: 14%; z-index: 4; display: grid; grid-template-columns: 13px auto; gap: 1px 10px; padding: 15px 18px; border: 1px solid #35465d; border-radius: 14px; background: rgba(8,14,23,.9); box-shadow: 0 22px 60px rgba(0,0,0,.45); backdrop-filter: blur(16px); }
.memory-status i { grid-row: 1/3; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: #2cd175; box-shadow: 0 0 0 5px rgba(44,209,117,.12); }
.memory-status span { color: #6e91c9; font-size: .56rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.memory-status strong { font-size: .69rem; }
.system-facts { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #263143; border-bottom: 1px solid #263143; }
.system-facts div { min-height: 170px; padding: 30px; border-right: 1px solid #263143; }
.system-facts div:first-child { padding-left: 0; }
.system-facts div:last-child { border: 0; }
.system-facts strong { font-size: .88rem; }
.system-facts p { margin: 15px 0 0; color: #8897aa; font-size: .78rem; }

.knowhow-section { position: relative; overflow: hidden; padding: clamp(100px,13vw,180px) 0; background: radial-gradient(circle at 18% 16%,rgba(71,125,224,.1),transparent 24%),#0d141e; }
.knowhow-section::before { content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none; background-image: linear-gradient(rgba(132,164,211,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(132,164,211,.035) 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom,#000,transparent 72%); }
.knowhow-head { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr .52fr; align-items: end; gap: clamp(55px,9vw,130px); }
.knowhow-title h2 { margin: 0; font-size: clamp(3rem,6.2vw,6rem); line-height: .92; }
.knowhow-intro { padding-bottom: 8px; }
.knowhow-intro > span { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; color: #6f8fbe; font-size: .62rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.knowhow-intro > span i { width: 7px; height: 7px; border-radius: 50%; background: #2cd175; box-shadow: 0 0 0 5px rgba(44,209,117,.11); }
.knowhow-intro p { margin: 0; color: #98a6b8; font-size: 1rem; line-height: 1.75; }

.detail-lab { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: clamp(70px,9vw,115px); }
.detail-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid #2a3749; border-radius: 22px; background: linear-gradient(155deg,rgba(18,27,40,.98),rgba(10,16,25,.98)); box-shadow: 0 24px 65px rgba(0,0,0,.2); transition: transform .25s,border-color .25s,box-shadow .25s; }
.detail-card:hover { border-color: #3c506b; transform: translateY(-5px); box-shadow: 0 34px 85px rgba(0,0,0,.35); }
.detail-card::before { content: ""; position: absolute; top: -130px; right: -100px; width: 300px; aspect-ratio: 1; border: 1px solid rgba(90,143,242,.09); border-radius: 50%; box-shadow: 0 0 0 55px rgba(90,143,242,.018),0 0 0 110px rgba(90,143,242,.012); pointer-events: none; }
.detail-meta { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 22px; border-bottom: 1px solid #293648; }
.detail-meta span { color: #7097d7; font-size: .62rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.detail-meta small { color: #68788e; font-size: .55rem; font-weight: 750; }
.detail-visual { position: relative; height: 285px; overflow: hidden; margin: 14px; border: 1px solid #26364b; border-radius: 16px; background: radial-gradient(circle at 50% 50%,rgba(61,112,208,.12),transparent 42%),#080e16; }
.detail-visual::after { content: ""; position: absolute; inset: 0; opacity: .32; pointer-events: none; background-image: linear-gradient(rgba(124,157,205,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(124,157,205,.055) 1px,transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at center,#000,transparent 80%); }
.detail-copy { position: relative; z-index: 3; padding: 17px 24px 28px; }
.detail-copy h3 { margin-bottom: 10px; font-size: clamp(1.18rem,2vw,1.5rem); letter-spacing: -.035em; }
.detail-copy p { max-width: 500px; margin: 0; color: #8f9daf; font-size: .82rem; }

.structure-node { position: absolute; z-index: 3; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #35465e; border-radius: 11px; background: rgba(15,24,36,.95); box-shadow: 0 15px 35px rgba(0,0,0,.25); }
.structure-node > i { grid-row: 1/3; width: 23px; height: 23px; border-radius: 7px; background: rgba(90,143,242,.14); }
.structure-node > i::after { content: ""; display: block; width: 7px; height: 7px; margin: 8px; border-radius: 50%; background: #6e9ff5; box-shadow: 0 0 8px rgba(110,159,245,.6); }
.structure-node span { font-size: .63rem; font-weight: 750; white-space: nowrap; }
.structure-node small { color: #6e7f96; font-size: .48rem; text-transform: uppercase; }
.node-root { top: 30px; left: 50%; width: 210px; transform: translateX(-50%); }
.node-child { bottom: 38px; grid-template-columns: 18px 1fr; padding: 9px 10px; }
.node-child > i { width: 18px; height: 18px; }
.node-child > i::after { width: 5px; height: 5px; margin: 6px; }
.child-one { left: 5%; }
.child-two { left: 50%; transform: translateX(-50%); }
.child-three { right: 5%; }
.structure-branch { position: absolute; z-index: 2; top: 105px; width: 1px; height: 93px; background: linear-gradient(#4a6fae,#33435a); transform-origin: top; }
.structure-branch::after { content: ""; position: absolute; bottom: -1px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: #5a8ff2; }
.branch-one { left: 50%; transform: rotate(56deg); }
.branch-two { left: 50%; }
.branch-three { left: 50%; transform: rotate(-56deg); }

.workflow-head { position: relative; z-index: 2; display: flex; justify-content: space-between; padding: 20px 22px; color: #8494aa; font-size: .57rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.workflow-head i { padding: 5px 8px; border: 1px solid rgba(90,143,242,.18); border-radius: 99px; background: rgba(90,143,242,.09); color: #9bbbf2; font-style: normal; }
.workflow-track { position: relative; z-index: 2; display: flex; align-items: start; justify-content: center; padding: 35px 22px 27px; }
.workflow-track > span { display: grid; width: 72px; justify-items: center; gap: 9px; color: #64748a; }
.workflow-track > span b { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #36465c; border-radius: 50%; background: #0d1622; font-size: .58rem; }
.workflow-track > span small { font-size: .53rem; font-weight: 750; }
.workflow-track > i { width: clamp(30px,6vw,80px); height: 1px; margin-top: 17px; background: #33445b; }
.workflow-track .is-done b { border-color: #337657; background: rgba(44,209,117,.1); color: #63d998; }
.workflow-track .is-active { color: #adc8f7; }
.workflow-track .is-active b { border-color: #5a8ff2; background: #2559b5; color: #fff; box-shadow: 0 0 0 7px rgba(90,143,242,.08),0 0 30px rgba(90,143,242,.25); }
.workflow-owner { position: relative; z-index: 2; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; margin: 5px 22px 0; padding: 11px 13px; border: 1px solid #304158; border-radius: 11px; background: rgba(16,25,38,.9); }
.workflow-owner > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #244f9d; color: #fff; font-size: .55rem; font-weight: 850; }
.workflow-owner p { display: grid; margin: 0; }
.workflow-owner p small { color: #697a91; font-size: .48rem; }
.workflow-owner p strong { font-size: .6rem; }
.workflow-owner > i { color: #7595c8; font-size: .52rem; font-style: normal; }

.evidence-sheet { position: absolute; z-index: 2; top: 18px; left: 50%; width: min(68%,310px); height: 225px; padding: 19px; border: 1px solid #3b4c63; border-radius: 12px; background: #e8edf4; color: #182231; box-shadow: 0 25px 50px rgba(0,0,0,.36); transform: translateX(-50%) rotate(-1.5deg); }
.evidence-sheet-head { display: flex; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid #c7cfd9; color: #647184; font-size: .45rem; font-weight: 850; letter-spacing: .1em; }
.evidence-sheet > strong { display: block; margin-top: 22px; font-size: .9rem; }
.evidence-sheet > p { margin: 3px 0 17px; color: #657183; font-size: .55rem; }
.evidence-lines { display: grid; gap: 8px; }
.evidence-lines i { height: 4px; border-radius: 5px; background: #c9d0d9; }
.evidence-lines i:nth-child(2) { width: 84%; }
.evidence-lines i:nth-child(3) { width: 64%; }
.evidence-footer { position: absolute; right: 19px; bottom: 17px; left: 19px; display: flex; justify-content: space-between; color: #728095; font-size: .45rem; }
.evidence-footer b { color: #268555; }
.evidence-ready { position: absolute; right: 7%; bottom: 14px; z-index: 4; display: grid; grid-template-columns: 29px 1fr 18px; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #3b4e68; border-radius: 10px; background: rgba(10,17,27,.94); box-shadow: 0 15px 35px rgba(0,0,0,.32); }
.evidence-ready span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; background: #2357ac; color: #fff; font-size: .48rem; font-weight: 850; }
.evidence-ready strong { font-size: .55rem; }
.evidence-ready i { color: #76a4fa; font-style: normal; }

.technical-score { position: relative; z-index: 2; display: flex; align-items: end; gap: 14px; padding: 21px 22px 16px; }
.technical-score > span { color: #f1f5fb; font-size: 2.6rem; font-weight: 740; line-height: .85; letter-spacing: -.06em; }
.technical-score > span small { color: #6e91c9; font-size: .75rem; }
.technical-score p { margin: 0; color: #718198; font-size: .54rem; font-weight: 750; }
.technical-modules { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 0 19px; }
.technical-modules span { display: grid; min-height: 87px; align-content: space-between; padding: 12px; border: 1px solid #2e4057; border-radius: 10px; color: #8291a5; font-size: .51rem; }
.technical-modules span i { width: 7px; height: 7px; border-radius: 50%; background: #5a8ff2; box-shadow: 0 0 0 4px rgba(90,143,242,.09); }
.technical-modules span:nth-child(2) i { background: #d49b4b; }
.technical-modules span:nth-child(3) i { background: #d46672; }
.technical-modules span b { color: #eef3fb; font-size: 1rem; }
.technical-sync { position: relative; z-index: 2; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 9px; margin: 14px 19px 0; padding: 10px 12px; border: 1px solid #304158; border-radius: 9px; background: #0d1621; }
.technical-sync i { width: 6px; height: 6px; border-radius: 50%; background: #2cd175; box-shadow: 0 0 0 4px rgba(44,209,117,.1); }
.technical-sync span, .technical-sync b { font-size: .48rem; }
.technical-sync span { color: #8292a7; }
.technical-sync b { color: #72d79d; }

.system-features { position: relative; overflow: hidden; padding: clamp(100px,13vw,180px) 0; background: radial-gradient(circle at 82% 10%,rgba(61,111,204,.1),transparent 25%),#eef1f5; color: #111823; }
.system-features::before { content: ""; position: absolute; inset: 0; opacity: .48; pointer-events: none; background-image: linear-gradient(rgba(30,58,95,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(30,58,95,.035) 1px,transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(to bottom,#000,transparent 72%); }
.system-features-head { position: relative; display: grid; grid-template-columns: 1fr .58fr; align-items: end; gap: clamp(50px,9vw,130px); }
.system-features-head h2 { margin: 0; font-size: clamp(3rem,6.2vw,6rem); line-height: .94; letter-spacing: -.065em; }
.system-features-head h2 em { color: #2d6cd8; }
.system-features-head > p { margin: 0 0 8px; color: #667180; font-size: 1rem; }
.system-feature-grid { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: clamp(65px,8vw,105px); }
.system-feature-card { display: grid; min-width: 0; overflow: hidden; grid-template-rows: 310px 1fr; border: 1px solid #cbd2db; border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: 0 24px 60px rgba(24,42,66,.08); transition: border-color .22s,transform .22s,box-shadow .22s; }
.system-feature-card:hover { border-color: #9aadd0; transform: translateY(-4px); box-shadow: 0 30px 75px rgba(24,42,66,.13); }
.system-feature-visual { position: relative; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid #2a3749; background: radial-gradient(circle at 50% 22%,rgba(82,137,237,.22),transparent 34%),linear-gradient(145deg,#111b29,#080d15); }
.system-feature-visual::before { content: ""; position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(139,168,211,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(139,168,211,.05) 1px,transparent 1px); background-size: 36px 36px; }
.feature-status { position: absolute; right: 16px; bottom: 15px; left: 16px; z-index: 3; display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; padding: 12px 13px; border: 1px solid #34465d; border-radius: 11px; background: rgba(8,14,23,.88); box-shadow: 0 16px 35px rgba(0,0,0,.3); backdrop-filter: blur(12px); }
.feature-status i { width: 6px; height: 6px; border-radius: 50%; background: #2cd175; box-shadow: 0 0 0 4px rgba(44,209,117,.1); }
.feature-status span { color: #72839a; font-size: .52rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.feature-status strong { color: #dfe8f6; font-size: .56rem; }
.system-feature-copy { display: flex; min-height: 330px; flex-direction: column; padding: 25px; }
.system-feature-meta { display: flex; justify-content: space-between; gap: 12px; color: #2d65c7; font-size: .57rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.system-feature-meta small { color: #87919e; font-size: inherit; text-align: right; }
.system-feature-copy h3 { margin: 42px 0 13px; font-size: clamp(1.55rem,2.4vw,2.15rem); line-height: 1.05; letter-spacing: -.045em; }
.system-feature-copy > p { margin: 0; color: #667180; font-size: .82rem; }
.system-feature-open { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding: 19px 0 0; border: 0; border-top: 1px solid #d3d8df; background: none; color: #174b9f; font-size: .73rem; font-weight: 820; cursor: pointer; }
.system-feature-open span { font-size: 1rem; transition: transform .18s; }
.system-feature-open:hover span { transform: translate(2px,-2px); }
.contextbar-demo { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid #3a4d66; border-radius: 16px; background: rgba(15,24,37,.94); box-shadow: 0 24px 55px rgba(0,0,0,.4); }
.contextbar-handle { width: 3px; height: 52px; border-radius: 4px; background: #416fbf; }
.contextbar-action { display: grid; width: 58px; height: 62px; place-items: center; align-content: center; gap: 5px; border: 1px solid #2c3c52; border-radius: 11px; color: #7f90a7; }
.contextbar-action b { font-size: 1rem; }
.contextbar-action small { font-size: .48rem; font-weight: 780; }
.contextbar-action.is-active { border-color: rgba(90,143,242,.5); background: rgba(64,115,211,.2); color: #bcd1f7; }
.backup-demo { position: relative; z-index: 2; width: min(78%,270px); padding: 20px; border: 1px solid #354860; border-radius: 16px; background: rgba(15,24,37,.94); box-shadow: 0 24px 55px rgba(0,0,0,.4); }
.backup-demo-top,.backup-demo-bottom { display: flex; align-items: center; justify-content: space-between; }
.backup-demo-top span { display: flex; align-items: center; gap: 8px; color: #aebdd1; font-size: .58rem; font-weight: 750; }
.backup-demo-top span i { width: 7px; height: 7px; border-radius: 50%; background: #2cd175; box-shadow: 0 0 0 4px rgba(44,209,117,.1); }
.backup-demo-top strong { color: #edf3fb; font-size: 1.2rem; }
.backup-track { height: 7px; margin: 25px 0 16px; overflow: hidden; border-radius: 99px; background: #27364a; }
.backup-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2d69d3,#70a2f5); }
.backup-demo-bottom span { padding: 5px 8px; border: 1px solid rgba(90,143,242,.22); border-radius: 6px; background: rgba(90,143,242,.1); color: #a8c3f5; font-size: .49rem; font-weight: 800; text-transform: uppercase; }
.backup-demo-bottom small { color: #72839a; font-size: .51rem; }
.health-demo { position: relative; z-index: 2; display: grid; width: min(82%,285px); grid-template-columns: 110px 1fr; align-items: center; gap: 16px; padding: 17px; border: 1px solid #354860; border-radius: 16px; background: rgba(15,24,37,.94); box-shadow: 0 24px 55px rgba(0,0,0,.4); }
.health-score { display: grid; width: 102px; aspect-ratio: 1; place-content: center; border: 7px solid #2d69d3; border-left-color: #23344c; border-radius: 50%; text-align: center; transform: rotate(-20deg); }
.health-score span,.health-score small { transform: rotate(20deg); }
.health-score span { color: #eef4fc; font-size: 2rem; font-weight: 780; line-height: 1; }
.health-score small { margin-top: 4px; color: #75dba1; font-size: .48rem; font-weight: 800; text-transform: uppercase; }
.health-values { display: grid; }
.health-values > span { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #2b3a4f; }
.health-values > span:last-child { border: 0; }
.health-values small { color: #75869d; font-size: .48rem; }
.health-values strong { color: #d9e2ef; font-size: .52rem; }

.module-portal { overflow: hidden; scroll-margin-top: var(--header); padding: clamp(95px,12vw,160px) 0 0; background: linear-gradient(135deg,#2e68cf,#173b80 68%,#0b1d3e); }
.module-portal-grid { display: grid; grid-template-columns: minmax(140px,.42fr) minmax(320px,.82fr) minmax(380px,1fr); align-items: end; gap: clamp(28px,4vw,60px); }
.module-portal-count { align-self: center; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 20px; padding-bottom: 100px; }
.module-portal-count span { font-size: clamp(6rem,11vw,11rem); font-weight: 780; line-height: .7; letter-spacing: -.08em; }
.module-portal-count small { color: #b9cff3; font-size: .76rem; font-weight: 800; line-height: 1.35; }
.module-portal-copy { align-self: center; padding-bottom: 100px; }
.module-portal-copy h2 { margin-bottom: 22px; font-size: clamp(2.4rem,4.5vw,4.2rem); line-height: 1; }
.module-portal-copy > p:not(.section-number) { color: #c0d1ed; }
.module-portal-image { position: relative; justify-self: end; width: min(500px,100%); overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-bottom: 0; border-radius: 30px 30px 0 0; background: #070b11; box-shadow: 0 -25px 70px rgba(7,20,45,.35); }
.module-portal-image img { width: 100%; height: auto; }
.portal-image-top { position: absolute; top: 24px; right: 24px; left: 24px; z-index: 3; display: flex; justify-content: space-between; padding: 10px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(7,13,23,.82); backdrop-filter: blur(12px); }
.portal-image-top span { display: flex; align-items: center; gap: 7px; color: #fff; font-size: .52rem; font-weight: 820; text-transform: uppercase; }
.portal-image-top i { width: 6px; height: 6px; border-radius: 50%; background: #2cd175; box-shadow: 0 0 0 4px rgba(44,209,117,.12); }
.portal-image-top small { color: #94acd0; font-size: .5rem; font-weight: 750; }
.portal-image-note { position: absolute; right: 17px; bottom: 25px; left: 17px; z-index: 3; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.17); border-radius: 12px; background: rgba(7,13,23,.88); box-shadow: 0 18px 35px rgba(0,0,0,.3); backdrop-filter: blur(14px); }
.portal-image-note > span { color: #fff; font-size: 2rem; font-weight: 760; line-height: 1; letter-spacing: -.06em; }
.portal-image-note > div { display: grid; }
.portal-image-note small { color: #8ca9d5; font-size: .48rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portal-image-note strong { margin-top: 2px; font-size: .58rem; }

.founder-section { padding: clamp(100px,13vw,180px) 0; background: #eef1f5; color: #111823; }
.founder-grid { display: grid; grid-template-columns: 1.15fr .65fr; gap: clamp(70px,11vw,150px); align-items: end; }
.founder-quote { margin: 0; font-size: clamp(2.4rem,4.8vw,4.7rem); font-weight: 670; line-height: 1.08; letter-spacing: -.055em; }
.founder-copy h2 { margin-bottom: 20px; font-size: 2rem; line-height: 1.1; letter-spacing: -.04em; }
.founder-copy > p:not(.section-number) { color: #667180; }
.founder-copy .impact-link { color: #174b9f; }
.impact-download { padding-top: clamp(95px,12vw,155px); }

@media (max-width: 1040px) {
  .impact-hero h1 em { margin-left: 5vw; }
  .fragmented-flow { grid-template-columns: repeat(4,1fr); }
  .flow-arrow { display: none; }
  .system-stage { grid-template-columns: 1fr; padding-top: 70px; }
  .system-copy { max-width: 520px; }
  .right-system-copy { justify-self: end; text-align: right; }
  .system-memory-visual { grid-row: 2; }
  .system-feature-grid { grid-template-columns: repeat(2,1fr); }
  .system-feature-card:last-child { grid-column: 1/-1; }
  .module-portal-grid { grid-template-columns: .55fr 1fr; }
  .module-portal-image { grid-column: 1/-1; display: block; justify-self: center; width: min(520px,78vw); margin-top: -10px; }
}

@media (max-width: 760px) {
  .impact-hero { padding-top: 52px; }
  .impact-overline { margin-bottom: 46px; }
  .impact-overline span:last-child { display: none; }
  .impact-hero h1 { font-size: clamp(4rem,19vw,6.2rem); line-height: .84; }
  .impact-hero h1 em { margin-left: 0; }
  .impact-hero-bottom { grid-template-columns: 1fr; margin-top: 40px; }
  .impact-actions .button { width: auto; }
  .impact-product { width: 100%; padding-top: 48px; }
  .impact-product > picture img { min-height: 320px; object-fit: cover; object-position: center; border-radius: 18px 18px 0 0; }
  .impact-metric { display: none; }
  .impact-product-label { left: 15px; }
  .impact-product-label strong { display: none; }
  .expertise-row { justify-content: flex-start; overflow-x: auto; }
  .thesis-grid { grid-template-columns: 1fr; }
  .thesis-index { max-width: 160px; }
  .thesis-copy { grid-template-columns: 1fr; }
  .fragmented-flow { grid-template-columns: 1fr; }
  .fragmented-flow article { min-height: 160px; }
  .fragmented-flow article strong { margin-top: 40px; }
  .operating-head { grid-template-columns: 1fr; gap: 22px; }
  .operating-head h2 { font-size: 2.7rem; letter-spacing: -.065em; }
  .system-stage { display: block; min-height: auto; margin-top: 70px; }
  .system-copy { margin-bottom: 55px; }
  .right-system-copy { margin: 55px 0 0 auto; text-align: left; }
  .system-memory-visual { height: 620px; margin-inline: -10px; }
  .system-memory-visual img { max-height: 600px; }
  .memory-status { right: 8px; bottom: 9%; }
  .system-facts { grid-template-columns: 1fr; }
  .system-facts div { min-height: 145px; padding: 25px 0; border-right: 0; border-bottom: 1px solid #263143; }
  .knowhow-head { grid-template-columns: 1fr; gap: 30px; }
  .detail-lab { grid-template-columns: 1fr; }
  .detail-visual { height: 270px; }
  .detail-copy { padding-inline: 20px; }
  .system-features-head { grid-template-columns: 1fr; gap: 25px; }
  .system-features-head h2 { font-size: 2.8rem; }
  .system-feature-grid { grid-template-columns: 1fr; }
  .system-feature-card:last-child { grid-column: auto; }
  .system-feature-card { grid-template-rows: 280px 1fr; }
  .system-feature-copy { min-height: 305px; }
  .structure-node span { font-size: .55rem; }
  .node-root { width: 190px; }
  .node-child { padding-inline: 7px; }
  .child-one { left: 2%; }
  .child-three { right: 2%; }
  .module-portal { padding-bottom: 0; }
  .module-portal-grid { grid-template-columns: 1fr; }
  .module-portal-count, .module-portal-copy { padding-bottom: 0; }
  .module-portal-count { justify-content: start; }
  .module-portal-image { grid-column: auto; width: min(480px,100%); margin-top: 60px; }
  .founder-grid { grid-template-columns: 1fr; gap: 60px; }
}

@media (max-width: 420px) {
  .impact-hero h1 { font-size: 3.75rem; }
  .impact-actions { align-items: flex-start; flex-direction: column; }
  .system-memory-visual { height: 530px; }
  .system-memory-visual img { max-height: 515px; }
  .memory-status { display: none; }
  .module-portal-count span { font-size: 7rem; }
}

/* Neuigkeiten */
.news-page { background-color: #070b11; }
.news-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px,9vw,128px) 0 clamp(76px,9vw,118px);
  background:
    radial-gradient(circle at 77% 42%,rgba(72,126,229,.18),transparent 30%),
    linear-gradient(180deg,#0b121d 0%,#070b11 100%);
}
.news-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image: linear-gradient(rgba(135,166,214,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(135,166,214,.045) 1px,transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom,#000,transparent 88%);
  pointer-events: none;
}
.news-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,.92fr) minmax(460px,1.08fr); align-items: center; gap: clamp(46px,7vw,96px); }
.news-hero-copy .impact-overline { margin-bottom: 34px; }
.news-hero-copy h1 { max-width: 780px; margin-bottom: 28px; font-size: clamp(3.8rem,7vw,6.8rem); font-weight: 780; line-height: .91; }
.news-hero-copy > p:not(.impact-overline) { max-width: 660px; margin-bottom: 0; color: #a6b3c5; font-size: clamp(1rem,1.35vw,1.17rem); line-height: 1.78; }
.news-jump-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 35px; }
.news-hero-visual { position: relative; overflow: visible; border: 1px solid #2a374a; border-radius: 28px; background: #0e1622; box-shadow: 0 40px 100px rgba(0,0,0,.42); }
.news-hero-visual img { width: 100%; aspect-ratio: 1.35; border-radius: inherit; object-fit: cover; object-position: center; }
.news-hero-status { position: absolute; right: -20px; bottom: -24px; display: grid; grid-template-columns: 12px 1fr; align-items: center; min-width: 245px; padding: 17px 19px; border: 1px solid #34445b; border-radius: 15px; background: rgba(14,22,34,.96); box-shadow: 0 20px 55px rgba(0,0,0,.38); backdrop-filter: blur(18px); }
.news-hero-status i { grid-row: 1/3; width: 8px; height: 8px; border-radius: 50%; background: #42c780; box-shadow: 0 0 0 5px rgba(66,199,128,.12); }
.news-hero-status span { color: #7f90a8; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.news-hero-status strong { font-size: .83rem; }

.news-section-nav { position: sticky; top: var(--header); z-index: 20; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(6,10,16,.9); backdrop-filter: blur(18px); }
.news-section-nav .shell { display: flex; gap: 38px; }
.news-section-nav a { display: inline-flex; align-items: center; gap: 10px; padding: 18px 0; color: #a8b5c7; font-size: .8rem; font-weight: 780; }
.news-section-nav a:hover { color: #fff; }
.news-section-nav span { color: var(--blue-bright); font-size: .67rem; letter-spacing: .12em; }

.news-current { padding: clamp(88px,10vw,142px) 0; background: #f3f6fa; color: #101722; }
.news-section-head { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(330px,.55fr); align-items: end; gap: clamp(45px,8vw,110px); margin-bottom: 55px; }
.news-section-head h2 { margin: 0; font-size: clamp(2.8rem,5.6vw,5.25rem); font-weight: 760; line-height: .98; }
.news-section-head > p { margin: 0 0 7px; color: #66758a; font-size: 1rem; line-height: 1.75; }
.news-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.news-card { position: relative; min-height: 390px; overflow: hidden; padding: clamp(27px,3vw,38px); border: 1px solid #dbe3ed; border-radius: 22px; background: #fff; box-shadow: 0 20px 58px rgba(18,35,64,.07); }
.news-card-featured { grid-row: span 2; min-height: 796px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(155deg,#142033 0%,#0a1019 100%); color: #fff; }
.news-card-featured::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 18%,rgba(90,143,242,.34),transparent 26%),linear-gradient(rgba(112,151,214,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(112,151,214,.055) 1px,transparent 1px); background-size: auto,54px 54px,54px 54px; }
.news-card > * { position: relative; z-index: 1; }
.news-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.news-card:not(.news-card-featured) .news-card-meta { margin-bottom: 52px; }
.news-card-featured .news-card-meta { position: absolute; top: clamp(27px,3vw,38px); right: clamp(27px,3vw,38px); left: clamp(27px,3vw,38px); }
.news-card time { color: #8090a4; font-size: .69rem; font-weight: 720; }
.news-status { display: inline-flex; width: max-content; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; font-size: .65rem; font-weight: 830; letter-spacing: .06em; text-transform: uppercase; }
.news-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.news-status.is-live { background: rgba(34,164,98,.11); color: #248456; }
.news-card-featured .news-status.is-live { background: rgba(66,199,128,.13); color: #6cdda3; }
.news-card-index { display: block; margin-bottom: 22px; color: var(--blue); font-size: .73rem; font-weight: 850; letter-spacing: .15em; }
.news-card h3 { max-width: 620px; margin-bottom: 17px; font-size: clamp(1.55rem,2.4vw,2.35rem); line-height: 1.13; letter-spacing: -.035em; }
.news-card p { max-width: 680px; margin-bottom: 0; color: #66758a; font-size: .91rem; line-height: 1.72; }
.news-card-featured h3 { font-size: clamp(2.2rem,4vw,4rem); }
.news-card-featured p { color: #a9b7c9; font-size: 1rem; }
.news-card-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 27px; color: var(--blue); font-size: .78rem; font-weight: 820; }
.news-card-featured .news-card-link { color: #8eb3fb; }

.news-future { padding: clamp(90px,10vw,145px) 0; background: #080d15; }
.news-section-head-light > p { color: #9ba9bb; }
.outlook-list { border-top: 1px solid #2a3545; }
.outlook-item { display: grid; grid-template-columns: 70px minmax(0,1fr) 170px; align-items: center; gap: 32px; min-height: 245px; padding: 34px 0; border-bottom: 1px solid #2a3545; }
.outlook-number { align-self: start; padding-top: 5px; color: #6687bb; font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.outlook-copy h3 { margin: 20px 0 11px; font-size: clamp(1.45rem,2.4vw,2.3rem); line-height: 1.15; letter-spacing: -.035em; }
.outlook-copy p { max-width: 780px; margin: 0; color: #98a6b8; font-size: .93rem; line-height: 1.72; }
.news-status.is-planned { background: rgba(90,143,242,.13); color: #8fb5fb; }
.news-status.is-review { background: rgba(215,204,179,.11); color: #d7ccb3; }
.news-status.is-continuous { background: rgba(144,111,224,.13); color: #b9a1f1; }
.news-status.is-next { background: rgba(66,199,128,.13); color: #6cdda3; }
.news-status.is-concept { background: rgba(90,143,242,.13); color: #8fb5fb; }
.outlook-flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.outlook-flow span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #2d3b4e; border-radius: 9px; background: #0d1520; color: #a8b5c7; font-size: .7rem; font-weight: 720; }
.outlook-flow b { color: #6cdda3; font-size: .62rem; letter-spacing: .08em; }
.outlook-theme { justify-self: end; padding: 8px 12px; border: 1px solid #2e3b4d; border-radius: 999px; color: #8291a5; font-size: .67rem; font-weight: 780; }
.outlook-note { display: grid; grid-template-columns: 180px 1fr; gap: 32px; margin-top: 38px; padding: 23px 25px; border: 1px solid #293548; border-radius: 15px; background: #0e1621; }
.outlook-note span { color: #d7ccb3; font-size: .68rem; font-weight: 830; letter-spacing: .08em; text-transform: uppercase; }
.outlook-note p { margin: 0; color: #8e9caf; font-size: .8rem; }

.news-closing { padding: clamp(88px,10vw,138px) 0; background: #e9eef5; color: #101722; text-align: center; }
.news-closing .shell { max-width: 900px; }
.news-closing h2 { margin-bottom: 22px; font-size: clamp(2.8rem,5.6vw,5.2rem); font-weight: 760; line-height: .98; }
.news-closing p:not(.section-number) { max-width: 650px; margin: 0 auto 31px; color: #66758a; }

@media (max-width: 1040px) {
  .news-hero-grid { grid-template-columns: 1fr; }
  .news-hero-copy { max-width: 840px; }
  .news-hero-visual { width: min(820px,100%); }
  .news-grid { grid-template-columns: 1fr; }
  .news-card-featured { grid-row: auto; min-height: 620px; }
}

@media (max-width: 760px) {
  .news-hero { padding-top: 56px; }
  .news-hero-grid { gap: 45px; }
  .news-hero-copy h1 { font-size: clamp(3.15rem,14vw,5rem); }
  .news-jump-links { flex-direction: column; }
  .news-jump-links .button { width: 100%; }
  .news-hero-visual { width: calc(100% - 8px); }
  .news-hero-visual img { min-height: 310px; object-position: center; }
  .news-hero-status { right: -8px; bottom: -25px; min-width: 225px; }
  .news-section-nav .shell { gap: 26px; }
  .news-section-head { grid-template-columns: 1fr; gap: 25px; }
  .news-card, .news-card-featured { min-height: auto; padding: 27px 24px; }
  .news-card-featured { padding-top: 215px; }
  .news-card-featured .news-card-meta { top: 24px; right: 24px; left: 24px; }
  .news-card:not(.news-card-featured) .news-card-meta { margin-bottom: 45px; }
  .outlook-item { grid-template-columns: 42px 1fr; gap: 18px; padding: 35px 0; }
  .outlook-theme { grid-column: 2; justify-self: start; }
  .outlook-note { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 420px) {
  .news-card-meta { align-items: flex-start; flex-direction: column; gap: 9px; }
  .news-card-featured .news-card-meta { right: 22px; left: 22px; }
  .news-card-featured { padding-top: 245px; }
  .news-section-nav a { font-size: .74rem; }
}

/* Module page */
.modules-hero { padding: clamp(72px,9vw,120px) 0 40px; border-bottom: 1px solid #202b3a; background: radial-gradient(circle at 74% 18%,rgba(75,132,235,.14),transparent 25%),linear-gradient(180deg,#0d141f,#080d15); }
.modules-hero-grid { display: grid; grid-template-columns: 1.25fr .55fr; align-items: end; gap: clamp(50px,9vw,120px); }
.modules-hero .kicker { justify-content: flex-start; }
.modules-hero h1 { margin: 0; font-size: clamp(3.8rem,7.3vw,7rem); }
.modules-hero-grid > div:last-child { padding-bottom: 12px; color: #a0adbe; }
.module-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 70px; padding-top: 24px; border-top: 1px solid var(--line); }
.module-nav button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; background: #0e1621; color: #9aa8ba; font-size: .72rem; font-weight: 750; cursor: pointer; }
.module-nav button:hover, .module-nav button.is-active { border-color: var(--blue); background: var(--blue); color: #fff; }
.module-gallery { padding: 36px 0 120px; background: #080d15; }
.modules-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.full-module-card { position: relative; min-height: 430px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 100% 0,rgba(90,143,242,.1),transparent 33%),#111925; transition: border-color .2s, box-shadow .2s, transform .2s, opacity .2s; }
.full-module-card:hover, .full-module-card:focus-visible { outline: none; border-color: #3b4b64; box-shadow: 0 32px 90px rgba(0,0,0,.42); }
.full-module-card:hover { transform: translateY(-3px); }
.full-module-card.is-hidden { display: none; }
.module-live { display: none; }
.module-content { display: flex; min-height: 430px; flex-direction: column; padding: 30px; }
.module-meta { display: flex; justify-content: space-between; color: #93a0b1; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.module-meta span { color: var(--blue); }
.module-content h2 { margin: 54px 0 14px; font-size: clamp(1.65rem,2.5vw,2.35rem); line-height: 1.05; letter-spacing: -.045em; }
.module-content > p { margin-bottom: 20px; color: #99a7b9; font-size: .87rem; line-height: 1.7; }
.module-content ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 25px; padding: 0; list-style: none; }
.module-content li { padding: 5px 9px; border: 1px solid rgba(90,143,242,.12); border-radius: 7px; background: var(--blue-pale); color: #a9c5fa; font-size: .63rem; font-weight: 740; }
.module-actions { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.module-actions button { border: 0; background: none; font-size: .76rem; font-weight: 800; cursor: pointer; }
.module-open { display: flex; flex: 1; align-items: center; justify-content: space-between; padding: 0; text-align: left; }
.module-open span { color: var(--blue); font-size: 1.1rem; }
.module-image-open { padding: 4px 0 4px 18px !important; border-left: 1px solid var(--line) !important; color: #a9c5fa; white-space: nowrap; }
.module-image-open:hover, .module-image-open:focus-visible { color: #fff; }
.module-final { background: linear-gradient(135deg,#2f67ca,#173a7d); color: #fff; }
.module-final h2 em { color: var(--ink); }
.module-final p:not(.section-number) { color: rgba(255,255,255,.75); }
.module-final .section-number { color: rgba(255,255,255,.65); }

.sheet-backdrop { position: fixed; inset: 0; z-index: 199; background: rgba(0,3,8,.72); backdrop-filter: blur(5px); opacity: 0; transition: opacity .28s; }
.sheet-backdrop.is-open { opacity: 1; }
.module-sheet { position: fixed; top: 0; right: 0; z-index: 200; width: min(600px,100%); height: 100dvh; border-left: 1px solid var(--line); background: #0d141e; box-shadow: -35px 0 100px rgba(0,0,0,.5); transform: translateX(105%); transition: transform .35s cubic-bezier(.22,.8,.25,1); }
.module-sheet.is-open { transform: translateX(0); }
.sheet-close { position: absolute; top: 20px; right: 22px; z-index: 2; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #151e2b; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.sheet-scroll { height: 100%; overflow-y: auto; padding: 82px clamp(28px,7vw,66px) 55px; }
.sheet-eyebrow { margin-bottom: 18px; color: var(--blue); font-size: .68rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.module-sheet h2 { margin-bottom: 20px; font-size: clamp(2.3rem,5vw,3.8rem); line-height: .98; letter-spacing: -.055em; }
.sheet-intro { margin-bottom: 35px; color: #9eabbd; font-size: 1rem; }
.sheet-intro p { margin: 0; }
.sheet-intro p + p { margin-top: 14px; }
.sheet-intro .sheet-tagline { color: #dce7f8; font-weight: 750; }
.sheet-intro .sheet-notice { padding: 12px 14px; border-left: 2px solid var(--blue); background: var(--blue-pale); color: #bfd2f6; font-size: .84rem; font-weight: 700; }
.sheet-capabilities { margin-bottom: 32px; border-top: 1px solid var(--line); }
.sheet-capability { padding: 20px 0; border-bottom: 1px solid var(--line); }
.sheet-capability h3 { margin-bottom: 5px; font-size: .93rem; }
.sheet-capability p { margin: 0; color: #98a6b8; font-size: .82rem; }
.sheet-capability .sheet-capability-tagline { margin-bottom: 12px; color: #c6d8f7; font-weight: 750; }
.sheet-capability p + p { margin-top: 12px; }
.sheet-capability ul { display: grid; gap: 7px; margin: 14px 0 0; padding-left: 18px; color: #98a6b8; font-size: .82rem; }
.sheet-capability ul + p { margin-top: 14px; }
.sheet-subsection { margin-top: 15px; padding-left: 12px; border-left: 1px solid #31415a; }
.sheet-subsection h4 { margin-bottom: 4px; color: #c6d8f7; font-size: .78rem; }
.sheet-benefit { margin: 0 0 30px; padding: 22px; border: 1px solid rgba(90,143,242,.18); border-radius: 15px; background: var(--blue-pale); }
.sheet-benefit small { color: var(--blue); font-size: .64rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.sheet-benefit p { margin: 9px 0 0; color: #bfd2f6; font-size: .86rem; font-weight: 600; }

.image-lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 72px 24px 28px; background: rgba(3,7,12,.92); backdrop-filter: blur(12px); opacity: 0; transition: opacity .25s; }
.image-lightbox[hidden] { display: none; }
.image-lightbox.is-open { opacity: 1; }
.image-lightbox figure { display: grid; max-width: min(520px,100%); max-height: 100%; justify-items: center; gap: 14px; margin: 0; }
.image-lightbox img { max-width: 100%; max-height: calc(100dvh - 135px); border: 1px solid #34435a; border-radius: 18px; background: #0b111a; box-shadow: 0 35px 100px rgba(0,0,0,.6); object-fit: contain; }
.image-lightbox figcaption { color: #bac6d7; font-size: .76rem; font-weight: 720; text-align: center; }
.image-lightbox-close { position: fixed; top: 20px; right: 22px; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #3a4658; border-radius: 50%; background: #151e2b; color: #fff; font-size: 1.55rem; line-height: 1; cursor: pointer; }

/* Existing contact/legal page support */
.contact-hero { position: relative; padding: clamp(75px,9vw,120px) 0; background: radial-gradient(circle at 80% 30%,rgba(90,143,242,.19),transparent 30%),linear-gradient(180deg,#0d141f,#080d15); }
.contact-hero::after { content: ""; position: absolute; right: clamp(30px,8vw,120px); bottom: -70px; width: clamp(180px,24vw,340px); aspect-ratio: 1; border: 1px solid rgba(126,167,244,.12); border-radius: 50%; box-shadow: 0 0 0 55px rgba(90,143,242,.025),0 0 0 110px rgba(90,143,242,.018); pointer-events: none; }
.contact-hero .shell { position: relative; z-index: 1; }
.contact-hero h1 { margin-bottom: 28px; font-size: clamp(3rem,7vw,6rem); line-height: .94; }
.contact-hero .shell > p:last-child { max-width: 680px; margin: 0; color: var(--muted); font-size: 1.06rem; }
.contact-section { padding: clamp(16px,2vw,28px) 0 clamp(80px,9vw,120px); background: #080d15; }
.contact-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(14px,1.5vw,22px); }
.contact-aside, .contact-form-wrap { padding: clamp(50px,7vw,85px); }
.contact-aside { border: 1px solid #273447; border-radius: 20px; background: radial-gradient(circle at 0 0,rgba(90,143,242,.14),transparent 32%),#0d1520; color: #fff; box-shadow: 0 24px 65px rgba(0,0,0,.22); }
.contact-aside h2, .contact-form-wrap h2 { margin-bottom: 22px; font-size: clamp(1.8rem,3vw,2.7rem); line-height: 1.15; letter-spacing: -.04em; }
.contact-aside > p:not(.section-number) { color: #a8b4c4; }
.contact-aside ul { margin: 30px 0 50px; padding: 0; list-style: none; }
.contact-aside li { display: flex; align-items: flex-start; gap: 11px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.12); color: #c1cad6; font-size: .82rem; }
.contact-aside li::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; margin-top: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(90,143,242,.1); }
.direct-contact { display: grid; gap: 5px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.12); }
.direct-contact span { margin-bottom: 9px; color: #77879b; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.direct-contact a { width: fit-content; color: #fff; font-size: .9rem; font-weight: 700; transition: color .18s; }
.direct-contact a:hover { color: var(--blue-bright); }
.contact-form-wrap { border: 1px solid #2a374a; border-radius: 20px; background: linear-gradient(145deg,#121c29,#0e1621); box-shadow: 0 24px 65px rgba(0,0,0,.22); }
.field-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.form-field { display: grid; gap: 7px; margin-bottom: 16px; }
.form-field label { font-size: .72rem; font-weight: 780; }
.form-field input, .form-field textarea { width: 100%; padding: 14px 15px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: #0a1019; color: #eef3fb; font: inherit; font-size: .86rem; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,111,228,.11); }
.privacy-note { color: var(--muted); font-size: .7rem; }
.privacy-note a { color: var(--blue); text-decoration: underline; }
.form-feedback { padding: 10px 12px; border-radius: 8px; font-size: .78rem; }
.form-error { background: #fff0f0; color: #a72d2d; }
.form-success { background: #e9f8ef; color: #207a49; }
.contact-layout, .legal-layout { width: min(var(--shell),calc(100% - 48px)); margin: auto; }

@media (max-width: 1040px) {
  .desktop-nav { gap: 18px; }
  .desktop-nav a:not(.header-cta) { display: none; }
  .story-grid { gap: 55px; }
  .teaser-grid { grid-template-columns: repeat(2,1fr); }
  .teaser-large { grid-column: 1/-1; }
  .teaser-large { min-height: 560px; }
  .modules-grid { grid-template-columns: 1fr; }
  .full-module-card, .module-content { min-height: 410px; }
}

@media (max-width: 760px) {
  :root { --header: 70px; }
  .shell { width: min(100% - 30px,var(--shell)); }
  .desktop-nav { display: none; }
  .menu-button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(18,27,40,.9); }
  .menu-button span { grid-area: 1/1; width: 17px; height: 2px; background: #f2f5fa; transition: transform .2s; }
  .menu-button span:first-child { transform: translateY(-4px); }
  .menu-button span:last-child { transform: translateY(4px); }
  .menu-button[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
  .mobile-nav { position: fixed; inset: var(--header) 0 auto; display: grid; visibility: hidden; gap: 0; padding: 12px 20px 24px; border-bottom: 1px solid var(--line); background: #0c131d; opacity: 0; transform: translateY(-10px); transition: opacity .18s, transform .18s, visibility .18s; }
  .mobile-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .mobile-nav a { padding: 15px 3px; border-bottom: 1px solid var(--line); font-size: .88rem; font-weight: 700; }
  .hero-home { padding-top: 58px; }
  .hero-home h1, .modules-hero h1 { font-size: clamp(3.25rem,15vw,5.3rem); }
  .hero-actions .button { width: 100%; }
  .hero-showcase { width: 100%; }
  .hero-image-wrap { border-radius: 20px 20px 0 0; }
  .hero-image-wrap img { min-height: 310px; object-fit: cover; object-position: center; }
  .hero-stat { display: none; }
  .signal-grid { grid-template-columns: 1fr; }
  .signal-grid p { padding: 14px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .signal-grid p:first-child { padding-top: 0; }
  .signal-grid p:last-child { padding-bottom: 0; }
  .story-grid { grid-template-columns: 1fr; }
  .sticky-intro { position: static; }
  .reason-grid { grid-template-columns: 1fr; }
  .reason-grid article { min-height: 180px; }
  .section-intro-row { grid-template-columns: 1fr; gap: 18px; }
  .process-list li { grid-template-columns: 38px 1fr; align-items: start; gap: 12px; }
  .process-tag { grid-column: 2; width: fit-content; }
  .teaser-grid { grid-template-columns: 1fr; }
  .teaser-large { grid-column: auto; }
  .teaser-card, .teaser-large { min-height: 470px; }
  .download-grid { grid-template-columns: 1fr; gap: 0; }
  .download-grid > div:first-child { padding-bottom: 70px; }
  .footer-main { grid-template-columns: 1fr; gap: 28px; }
  .footer-main nav { justify-content: flex-start; }
  .modules-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .module-nav { margin-top: 45px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .module-nav button { flex: none; }
  .module-gallery { padding-top: 20px; }
  .full-module-card { min-height: auto; }
  .module-content { min-height: 390px; }
  .module-content h2 { margin-top: 42px; }
  .contact-section { padding-top: 15px; background: #080d15; }
  .contact-grid { width: 100%; grid-template-columns: 1fr; }
  .contact-aside, .contact-form-wrap { border-radius: 16px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 420px) {
  .wordmark small { display: none; }
  .hero-home h1, .modules-hero h1 { font-size: 3.15rem; }
  .proof-list { gap: 7px 16px; }
  .store-button { width: 100%; }
  .module-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .module-image-open { padding: 0 !important; border-left: 0 !important; text-align: left; }
  .footer-bottom { display: grid; gap: 6px; }
}

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

/* Product / Vorlage 01 — editorial product experience */
.product-v2 main { gap: clamp(10px,1vw,16px); }
.product-impact-hero { position: relative; padding: clamp(62px,8vw,108px) 0 0; background: radial-gradient(circle at 78% 9%,rgba(73,127,230,.14),transparent 25%),linear-gradient(180deg,#070b11 0%,#090f18 100%); }
.product-impact-hero::before { content: ""; position: absolute; inset: 0; opacity: .58; pointer-events: none; background-image: linear-gradient(rgba(146,174,214,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(146,174,214,.035) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom,#000,transparent 58%); }
.product-impact-copy { position: relative; z-index: 3; }
.product-impact-copy h1 { margin: 0; color: #f4f7fb; font-size: clamp(4.8rem,11.2vw,10.8rem); font-weight: 780; line-height: .77; letter-spacing: -.078em; }
.product-impact-copy h1 em { display: inline-block; margin-left: clamp(0px,12vw,150px); color: #7ea7f4; }
.product-hero-intro { display: grid; grid-template-columns: minmax(340px,.7fr) minmax(360px,.52fr); justify-content: end; gap: clamp(45px,8vw,110px); max-width: 970px; margin: clamp(45px,6vw,76px) 0 clamp(60px,8vw,100px) auto; }
.product-hero-intro > p { margin: 0; color: #a4b0c1; font-size: clamp(1.08rem,1.55vw,1.28rem); line-height: 1.72; }

.product-stage { --stage-x: 0px; --stage-y: 0px; position: relative; z-index: 2; width: min(1460px,calc(100% - 48px)); height: clamp(620px,65vw,820px); overflow: hidden; border: 1px solid #27354a; border-bottom: 0; border-radius: 28px 28px 0 0; background: radial-gradient(circle at 50% 48%,rgba(73,127,230,.2),transparent 24%),linear-gradient(145deg,#0d1521,#070b11 70%); box-shadow: 0 -25px 100px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.04); perspective: 1200px; }
.product-stage::after { content: ""; position: absolute; inset: auto 0 0; z-index: 10; height: 25%; background: linear-gradient(transparent,#070b11); pointer-events: none; }
.product-stage-grid { position: absolute; inset: -20%; opacity: .34; background-image: linear-gradient(rgba(124,160,214,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(124,160,214,.11) 1px,transparent 1px); background-size: 68px 68px; transform: perspective(600px) rotateX(62deg) translateY(18%); mask-image: radial-gradient(circle at center,#000,transparent 67%); }
.product-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(109,154,231,.2); border-radius: 50%; transform: translate(-50%,-50%); }
.orbit-one { width: min(62vw,780px); aspect-ratio: 1; box-shadow: 0 0 90px rgba(65,116,211,.06),inset 0 0 90px rgba(65,116,211,.05); animation: productPulse 5s ease-in-out infinite; }
.orbit-two { width: min(42vw,530px); aspect-ratio: 1; border-color: rgba(109,154,231,.11); }
.product-phone { position: absolute; z-index: 4; width: clamp(190px,22vw,300px); height: auto; aspect-ratio: .53; overflow: hidden; padding: 8px; border: 1px solid #42536b; border-radius: clamp(28px,3vw,44px); background: #060a10; box-shadow: 0 35px 90px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,255,255,.04); transition: transform .25s ease-out; }
.product-phone img { width: 100%; height: 100%; border-radius: clamp(22px,2.6vw,36px); object-fit: cover; object-position: top; }
.product-phone-center { left: 50%; top: 7%; z-index: 6; transform: translateX(calc(-50% + var(--stage-x))) translateY(var(--stage-y)); }
.product-phone-left { left: 15%; top: 18%; transform: translateX(calc(var(--stage-x) * -.65)) translateY(calc(var(--stage-y) * -.4)) rotate(-8deg) scale(.87); opacity: .76; }
.product-phone-right { right: 15%; top: 18%; transform: translateX(calc(var(--stage-x) * -.65)) translateY(calc(var(--stage-y) * -.4)) rotate(8deg) scale(.87); opacity: .76; }
.product-core-mark { position: absolute; left: 50%; top: 50%; z-index: 5; display: grid; width: 170px; aspect-ratio: 1; place-content: center; border: 1px solid rgba(126,167,244,.35); border-radius: 50%; background: rgba(7,12,19,.83); text-align: center; box-shadow: 0 0 0 14px rgba(90,143,242,.035),0 0 80px rgba(90,143,242,.19); backdrop-filter: blur(18px); transform: translate(-50%,-50%); }
.product-core-mark span { color: #8090a5; font-size: .58rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.product-core-mark strong { margin: 5px 0; color: #fff; font-size: 2.3rem; line-height: 1; letter-spacing: -.06em; }
.product-core-mark small { color: #79a3ef; font-size: .56rem; font-weight: 750; }
.product-signal { position: absolute; z-index: 8; border: 1px solid #33435a; border-radius: 14px; background: rgba(9,15,24,.88); box-shadow: 0 22px 55px rgba(0,0,0,.42); backdrop-filter: blur(16px); }
.product-signal-top { top: 7%; left: 5%; display: grid; grid-template-columns: 14px auto; align-items: center; gap: 1px 10px; padding: 15px 18px; }
.product-signal-top i { grid-row: 1/3; width: 8px; height: 8px; border-radius: 50%; background: #2cd175; box-shadow: 0 0 0 5px rgba(44,209,117,.12); }
.product-signal-top span { color: #74849a; font-size: .57rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.product-signal-top strong { font-size: .73rem; }
.product-signal-side { right: 5%; bottom: 22%; display: flex; align-items: end; gap: 11px; padding: 16px 18px; }
.product-signal-side span { color: #fff; font-size: 2.35rem; font-weight: 740; line-height: .9; }
.product-signal-side small { color: #8292a7; font-size: .58rem; font-weight: 750; line-height: 1.3; text-transform: uppercase; }
.product-stage-caption { position: absolute; left: 4%; bottom: 5%; z-index: 12; display: grid; }
.product-stage-caption span { color: #678dcc; font-size: .58rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.product-stage-caption strong { margin-top: 5px; font-size: .78rem; }

.product-manifesto { padding: clamp(90px,11vw,150px) 0; background: #0c121b; }
.product-manifesto-grid { display: grid; grid-template-columns: 190px 1fr; gap: clamp(35px,7vw,95px); }
.product-index { color: #708098; }
.product-index span { color: var(--blue); font-size: 4.8rem; font-weight: 730; line-height: 1; letter-spacing: -.08em; }
.product-index p { margin: 10px 0 0; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.product-manifesto h2, .product-logic h2, .product-detail h2 { margin: 0; font-size: clamp(3rem,6vw,5.8rem); line-height: .92; }
.product-manifesto-lead { max-width: 780px; margin: 50px 0 0 auto; color: #9ba9ba; font-size: clamp(1.2rem,2vw,1.65rem); line-height: 1.55; }
.product-principles { display: grid; grid-template-columns: repeat(3,1fr); margin-top: clamp(75px,9vw,120px); border-top: 1px solid #293547; border-bottom: 1px solid #293547; }
.product-principles article { min-height: 300px; padding: 28px clamp(22px,3vw,40px); border-right: 1px solid #293547; }
.product-principles article:last-child { border-right: 0; }
.product-principles span { color: #6f94d3; font-size: .63rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.product-principles h3 { margin: 105px 0 12px; font-size: clamp(1.2rem,2vw,1.65rem); letter-spacing: -.035em; }
.product-principles p { margin: 0; color: #8f9daf; font-size: .84rem; }

.product-logic { padding: clamp(90px,11vw,150px) 0; background: #05090f; }
.product-logic-head { display: grid; grid-template-columns: 1fr .55fr; align-items: end; gap: clamp(50px,9vw,130px); }
.product-logic-head > p { margin: 0 0 8px; color: #9ca9ba; }
.product-flow { display: grid; grid-template-columns: repeat(4,1fr); margin-top: clamp(70px,9vw,115px); border: 1px solid #263244; }
.product-flow article { position: relative; min-height: 375px; padding: 24px; border-right: 1px solid #263244; background: linear-gradient(180deg,#101824,#0b111a); }
.product-flow article:last-child { border-right: 0; }
.product-flow article::after { content: "→"; position: absolute; z-index: 2; top: 48%; right: -15px; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #34445a; border-radius: 50%; background: #08101a; color: #7087aa; font-size: .7rem; }
.product-flow article:last-child::after { display: none; }
.product-flow article > span { color: #6e7e93; font-size: .65rem; font-weight: 850; }
.flow-node { display: grid; width: 62px; height: 62px; place-items: center; margin-top: 64px; border: 1px solid #33435a; border-radius: 50%; background: rgba(90,143,242,.06); color: #76a4fa; font-size: 1.35rem; box-shadow: 0 0 0 8px rgba(90,143,242,.025); }
.product-flow h3 { margin: 43px 0 10px; font-size: 1.15rem; }
.product-flow p { margin: 0; color: #8b99aa; font-size: .8rem; }
.product-flow .is-result { background: linear-gradient(155deg,#265fca,#15366f); }
.product-flow .is-result > span, .product-flow .is-result p { color: #c1d0e8; }
.product-flow .is-result .flow-node { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; }

.product-detail { padding: clamp(90px,11vw,150px) 0; background: radial-gradient(circle at 78% 42%,rgba(65,115,209,.14),transparent 26%),#0c121b; }
.product-detail-grid { display: grid; grid-template-columns: .78fr 1.1fr; align-items: center; gap: clamp(55px,9vw,130px); }
.product-detail-copy > p:not(.section-number) { max-width: 560px; margin: 30px 0 35px; color: #98a6b8; }
.product-detail-copy ul { margin: 0 0 30px; padding: 0; border-top: 1px solid #293547; list-style: none; }
.product-detail-copy li { display: grid; grid-template-columns: 45px 1fr; gap: 15px; padding: 20px 0; border-bottom: 1px solid #293547; }
.product-detail-copy li > span { color: #668dcc; font-size: .65rem; font-weight: 850; }
.product-detail-copy li div { display: grid; }
.product-detail-copy li strong { font-size: .88rem; }
.product-detail-copy li small { margin-top: 3px; color: #8492a5; font-size: .75rem; }
.product-screen-stack { position: relative; min-height: 720px; perspective: 1200px; }
.screen-card { position: absolute; top: 50%; left: 50%; width: 300px; height: auto; aspect-ratio: .53; overflow: hidden; padding: 7px; border: 1px solid #425169; border-radius: 40px; background: #060a10; box-shadow: 0 35px 90px rgba(0,0,0,.48); }
.screen-card img { width: 100%; height: 100%; border-radius: 33px; object-fit: cover; object-position: top; }
.screen-back { opacity: .43; transform: translate(-102%,-50%) rotate(-8deg) scale(.82); }
.screen-mid { opacity: .68; transform: translate(2%,-50%) rotate(7deg) scale(.9); }
.screen-front { z-index: 3; transform: translate(-50%,-50%); }
.screen-stack-note { position: absolute; right: 0; bottom: 12%; z-index: 5; display: grid; grid-template-columns: 12px auto; gap: 1px 10px; padding: 16px 18px; border: 1px solid #35465e; border-radius: 14px; background: rgba(8,14,23,.9); box-shadow: 0 20px 55px rgba(0,0,0,.4); backdrop-filter: blur(15px); }
.screen-stack-note i { grid-row: 1/3; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: #2cd175; box-shadow: 0 0 0 5px rgba(44,209,117,.12); }
.screen-stack-note span { color: #6f8fbe; font-size: .57rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.screen-stack-note strong { font-size: .7rem; }

.product-proof { padding: clamp(90px,11vw,150px) 0; background: #070b11; }
.product-proof-grid { display: grid; grid-template-columns: .35fr 1fr; gap: 35px clamp(60px,10vw,150px); }
.product-proof blockquote { margin: 0; max-width: 850px; color: #f1f5fb; font-size: clamp(2.5rem,5.3vw,5.1rem); font-weight: 720; line-height: 1.02; letter-spacing: -.06em; }
.product-proof-list { grid-column: 2; margin-top: 38px; }
.product-proof-list article { display: grid; grid-template-columns: .35fr 1fr; gap: 30px; padding: 25px 0; border-top: 1px solid #273345; }
.product-proof-list article:last-child { border-bottom: 1px solid #273345; }
.product-proof-list span { color: #6e91c9; font-size: .66rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.product-proof-list strong { font-size: .92rem; font-weight: 600; }
.product-final { background: linear-gradient(135deg,#336fdb,#173a7d 72%,#10264f); }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease,transform .7s cubic-bezier(.22,.8,.25,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }

@keyframes productPulse { 0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(.98); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.025); } }

@media (max-width: 1040px) {
  .product-phone-left { left: 8%; }
  .product-phone-right { right: 8%; }
  .product-stage { height: 690px; }
  .product-detail-grid { grid-template-columns: .85fr 1fr; gap: 45px; }
  .screen-card { width: 245px; height: auto; }
  .product-screen-stack { min-height: 620px; }
}

@media (max-width: 760px) {
  .product-impact-copy h1 { font-size: clamp(4.2rem,22vw,6.6rem); line-height: .79; }
  .product-impact-copy h1 em { margin-left: 0; }
  .product-hero-intro { grid-template-columns: 1fr; gap: 28px; margin: 42px 0 65px; }
  .product-stage { width: calc(100% - 20px); height: 560px; border-radius: 20px 20px 0 0; }
  .product-phone { width: 200px; height: auto; aspect-ratio: .536; }
  .product-phone-center { top: 9%; }
  .product-phone-left { left: -12%; top: 20%; opacity: .45; }
  .product-phone-right { right: -12%; top: 20%; opacity: .45; }
  .product-core-mark { top: 67%; width: 130px; }
  .product-core-mark strong { font-size: 1.8rem; }
  .product-signal-side { display: none; }
  .product-signal-top { top: 3%; left: 3%; }
  .product-stage-caption { display: none; }
  .orbit-one { width: 500px; }
  .orbit-two { width: 340px; }
  .product-manifesto-grid, .product-logic-head, .product-detail-grid, .product-proof-grid { grid-template-columns: 1fr; }
  .product-index { display: flex; align-items: end; gap: 15px; }
  .product-index span { font-size: 3.5rem; }
  .product-index p { margin-bottom: 7px; }
  .product-manifesto-lead { margin-top: 35px; }
  .product-principles { grid-template-columns: 1fr; }
  .product-principles article { min-height: 220px; border-right: 0; border-bottom: 1px solid #293547; }
  .product-principles article:last-child { border-bottom: 0; }
  .product-principles h3 { margin-top: 65px; }
  .product-flow { grid-template-columns: 1fr; }
  .product-flow article { min-height: 275px; border-right: 0; border-bottom: 1px solid #263244; }
  .product-flow article::after { top: auto; right: 50%; bottom: -15px; transform: translateX(50%) rotate(90deg); }
  .flow-node { margin-top: 35px; }
  .product-flow h3 { margin-top: 28px; }
  .product-detail-copy { order: 1; }
  .product-screen-stack { min-height: 580px; }
  .screen-card { width: 230px; height: auto; aspect-ratio: .534; }
  .screen-back { transform: translate(-88%,-50%) rotate(-7deg) scale(.78); }
  .screen-mid { transform: translate(-10%,-50%) rotate(7deg) scale(.84); }
  .screen-stack-note { right: 0; bottom: 5%; }
  .product-proof-list { grid-column: auto; margin-top: 10px; }
  .product-proof-list article { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .product-orbit { animation: none; }
}

@media (max-width: 1040px) {
  .connection-stage { grid-template-columns: minmax(280px,1fr) 150px minmax(320px,1fr); }
  .core-disc { width: 112px; }
  .pulse-one { width: 150px; }
  .pulse-two { width: 185px; }
  .core-line { width: 48px; }
  .fragment-card { width: 86%; }
}

@media (max-width: 760px) {
  .connection-stage { grid-template-columns: 1fr; gap: 14px; min-height: 0; padding: 10px; border-radius: 22px; }
  .fragment-field { min-height: 510px; }
  .connection-core { min-height: 185px; }
  .core-disc { width: 116px; }
  .pulse-one { width: 155px; }
  .pulse-two { width: 190px; }
  .connection-core > p { bottom: 2px; }
  .core-line { width: 72px; }
  .line-one, .line-two { left: 8%; }
  .line-three, .line-four { right: 8%; }
  .line-one, .line-three { top: 42%; }
  .line-two, .line-four { bottom: 42%; }
  .fragment-card { width: min(84%,285px); }
  .fragment-calendar { left: 5%; }
  .fragment-chat { right: 4%; }
  .fragment-paper { left: 4%; }
  .fragment-sheet { right: 5%; }
  .context-object { padding: 19px; }
  .connection-caption { position: relative; flex-wrap: wrap; padding: 18px 8px 8px; background: none; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .core-pulse, .core-line::after { animation: none; }
}