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

:root {
 --bg: #050816;
 --bg-soft: #0a1022;
 --bg-panel: rgba(10,16,34,0.78);
 --bg-panel-strong: rgba(14,22,44,0.92);
 --line: rgba(255,255,255,0.08);
 --line-strong: rgba(130,155,255,0.26);
 --text: #eef2ff;
 --text-soft: #b0bbd3;
 --text-dim: #8f9ab3;
 --accent: #7d9cff;
 --accent-2: #ab82ff;
 --accent-3: #78dbff;
 --shadow-lg:042px120px rgba(0,0,0,0.44);
 --shadow-md:018px56px rgba(6,10,24,0.38);
 --max-width:1180px;
}

* {
 box-sizing: border-box;
}

html,
body {
 margin:0;
 padding:0;
 min-height:100%;
 scroll-behavior: smooth;
}

body {
 font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 color: var(--text);
 line-height:1.6;
 letter-spacing:0.01em;
 overflow-x: hidden;
 background-color: var(--bg);
 background-image:
 radial-gradient(circle at10% -12%, rgba(123,157,255,0.24), transparent28%),
 radial-gradient(circle at84%6%, rgba(169,120,255,0.18), transparent25%),
 radial-gradient(circle at55%36%, rgba(80,138,255,0.12), transparent34%),
 linear-gradient(180deg, #0406120%, #06091644%, #050814100%);
}

.bg-layer,
.orb {
 position: fixed;
 inset:0;
 pointer-events: none;
}

.bg-layer {
 background-image:
 linear-gradient(rgba(255,255,255,0.03)1px, transparent1px),
 linear-gradient(90deg, rgba(255,255,255,0.03)1px, transparent1px);
 background-size:52px52px;
 opacity:0.18;
 mask-image: radial-gradient(circle at center, black34%, transparent92%);
}

.orb {
 filter: blur(80px);
 opacity:0.38;
}

.orb-a {
 top: -26%;
 left: -14%;
 width:36rem;
 height:36rem;
 background: rgba(109,152,255,0.28);
}

.orb-b {
 inset: auto -10% -12% auto;
 width:30rem;
 height:30rem;
 background: rgba(154,121,255,0.22);
}

.container {
 width: min(var(--max-width), calc(100% -48px));
 margin:0 auto;
}

.site-header {
 position: sticky;
 top:0;
 z-index:30;
 background: rgba(5,8,20,0.62);
 backdrop-filter: blur(18px);
 border-bottom:1px solid rgba(255,255,255,0.06);
}

.header-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 min-height:72px;
}

.brand {
 color: var(--text);
 text-decoration: none;
 font-weight:700;
 letter-spacing:0.08em;
}

nav {
 display: flex;
 gap:24px;
}

nav a {
 color: var(--text-soft);
 text-decoration: none;
 font-size:0.95rem;
 transition: color180ms ease;
}

nav a:hover {
 color: var(--text);
}

main {
 position: relative;
 z-index:1;
}

.hero {
 display: grid;
 grid-template-columns: minmax(0,1.05fr) minmax(420px,0.95fr);
 gap:34px;
 align-items: center;
 padding:104px048px;
}

.hero-copy-block {
 max-width:680px;
}

.eyebrow,
.section-tag {
 margin:0;
 color: var(--text-soft);
 text-transform: uppercase;
 letter-spacing:0.18em;
 font-size:0.76rem;
 font-weight:700;
}

h1,
h2,
h3,
p {
 margin:0;
}

h1 {
 margin-top:16px;
 font-size: clamp(2.5rem,5.6vw,5.2rem);
 line-height:1.02;
 letter-spacing: -0.04em;
}

h2 {
 margin-top:12px;
 font-size: clamp(1.8rem,3.4vw,3rem);
 line-height:1.08;
 letter-spacing: -0.03em;
}

.hero-copy,
.section-intro,
.panel p,
.feature p,
.capability-list p,
.vision-stage-grid p,
.hero-metrics p,
.cta p,
ul {
 color: var(--text-soft);
}

.hero-copy {
 margin-top:22px;
 max-width:640px;
 font-size:1.08rem;
}

.hero-actions {
 margin-top:32px;
 display: flex;
 gap:14px;
 flex-wrap: wrap;
}

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height:50px;
 padding:022px;
 border-radius:999px;
 text-decoration: none;
 font-weight:700;
 transition: transform200ms ease, box-shadow200ms ease, border-color200ms ease;
}

.btn-primary {
 color: #fff;
 background: linear-gradient(135deg, var(--accent), var(--accent-2));
 box-shadow:018px44px rgba(102,129,255,0.34);
}

.btn-primary:hover {
 transform: translateY(-1px);
}

.btn-ghost {
 color: var(--text);
 background: rgba(255,255,255,0.04);
 border:1px solid rgba(255,255,255,0.14);
}

.btn-ghost:hover {
 border-color: rgba(255,255,255,0.24);
}

.hero-metrics {
 margin-top:38px;
 display: grid;
 grid-template-columns: repeat(3, minmax(0,1fr));
 gap:14px;
}

.hero-metrics article,
.hero-card,
.panel,
.feature,
.vision-stage-grid article,
.cta,
.system-visual,
.ontology-visual {
 background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
 border:1px solid var(--line);
 border-radius:24px;
 box-shadow: var(--shadow-md);
}

.hero-metrics article {
 padding:18px;
}

.hero-metrics span {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width:32px;
 height:32px;
 border-radius:999px;
 margin-bottom:12px;
 color: var(--text);
 background: rgba(255,255,255,0.05);
 border:1px solid rgba(255,255,255,0.08);
 font-size:0.8rem;
}

.hero-metrics strong {
 display: block;
 font-size:1rem;
 color: var(--text);
}

.hero-metrics p {
 margin-top:8px;
 font-size:0.95rem;
}

.hero-visual {
 position: relative;
 min-height:560px;
 padding:28px;
 border-radius:32px;
 overflow: hidden;
 border:1px solid rgba(134,156,255,0.22);
 box-shadow: var(--shadow-lg);
 background-color: #0a1020;
 background-image:
 radial-gradient(circle at22%24%, rgba(123,157,255,0.24), transparent24%),
 radial-gradient(circle at78%16%, rgba(159,123,255,0.18), transparent20%),
 linear-gradient(180deg, rgba(13,18,34,0.96), rgba(8,12,24,0.88));
}

.hero-visual::before {
 content: '';
 position: absolute;
 inset:18px;
 border-radius:24px;
 border:1px solid rgba(255,255,255,0.06);
}

.hero-card {
 position: relative;
 z-index:2;
 padding:24px;
 backdrop-filter: blur(20px);
}

.hero-card p,
.hero-card li,
.system-node,
.ontology-column p {
 color: var(--text-soft);
}

.hero-card-main {
 width: min(100%,350px);
}

.hero-card-main p,
.hero-card-grid p {
 font-size:0.78rem;
 text-transform: uppercase;
 letter-spacing:0.14em;
}

.hero-card-main h3 {
 margin-top:10px;
 font-size:1.35rem;
}

.hero-card-main ul {
 margin:14px00;
 padding-left:18px;
}

.hero-bridge {
 position: absolute;
 top:180px;
 left:34px;
 right:34px;
 height:160px;
}

.hero-bridge span {
 position: absolute;
 inset:0;
 border:1px dashed rgba(128,160,255,0.18);
 border-radius:999px;
}

.hero-bridge span:nth-child(1) {
 transform: rotate(-10deg);
}

.hero-bridge span:nth-child(2) {
 inset:24px30px;
 transform: rotate(8deg);
}

.hero-bridge span:nth-child(3) {
 inset:48px64px;
}

.hero-card-grid {
 position: absolute;
 right:28px;
 bottom:28px;
 width: min(100%,440px);
 display: grid;
 grid-template-columns: repeat(2, minmax(0,1fr));
 gap:12px;
}

.hero-card-grid article {
 padding:18px;
 border-radius:18px;
 background: rgba(255,255,255,0.035);
 border:1px solid rgba(255,255,255,0.08);
}

.hero-card-grid strong {
 display: block;
 margin-top:10px;
 font-size:1rem;
 line-height:1.35;
 color: var(--text);
}

.section {
 padding:96px00;
}

.section-heading,
.split-layout > div:first-child {
 max-width:760px;
}

.section-intro {
 margin-top:14px;
 font-size:1.02rem;
}

.grid {
 margin-top:28px;
 display: grid;
 gap:16px;
}

.three-col {
 grid-template-columns: repeat(3, minmax(0,1fr));
}

.two-col,
.ownership-layout {
 grid-template-columns: repeat(2, minmax(0,1fr));
}

.panel,
.feature {
 padding:24px;
}

.panel-highlight,
.feature-emphasis,
.glass-panel {
 border-color: var(--line-strong);
 background: linear-gradient(180deg, rgba(124,146,255,0.09), rgba(255,255,255,0.038));
}

.panel h3,
.feature h3,
.vision-stage-grid h3 {
 font-size:1.05rem;
 color: var(--text);
}

.panel p,
.feature p {
 margin-top:10px;
}

.split-layout {
 display: grid;
 grid-template-columns: minmax(0,1fr) minmax(420px,0.92fr);
 gap:28px;
 align-items: center;
}

.capability-list {
 margin-top:28px;
 display: grid;
 gap:14px;
}

.capability-list article {
 padding:16px18px;
 border-left:1px solid rgba(122,160,255,0.34);
 background: rgba(255,255,255,0.025);
}

.capability-list span {
 display: block;
 color: var(--text);
 font-weight:700;
 margin-bottom:6px;
}

.system-visual {
 position: relative;
 min-height:480px;
 overflow: hidden;
 background-color: var(--bg-panel-strong);
 background-image:
 radial-gradient(circle at50%50%, rgba(124,160,255,0.12), transparent42%),
 linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

.system-core,
.system-node {
 position: absolute;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 background: rgba(12,16,32,0.88);
 border:1px solid rgba(255,255,255,0.1);
 backdrop-filter: blur(18px);
 z-index:2;
}

.system-core {
 top:50%;
 left:50%;
 width:156px;
 height:156px;
 border-radius:50%;
 transform: translate(-50%, -50%);
 color: #fff;
 font-weight:700;
 box-shadow:0060px rgba(113,147,255,0.18);
}

.system-node {
 width:132px;
 height:132px;
 border-radius:24px;
 font-weight:600;
}

.node-memory {
 top:42px;
 left:50%;
 transform: translateX(-50%);
}

.node-tools {
 top:50%;
 left:40px;
 transform: translateY(-50%);
}

.node-audit {
 top:50%;
 right:40px;
 transform: translateY(-50%);
}

.node-feedback {
 bottom:42px;
 left:50%;
 transform: translateX(-50%);
}

.system-ring {
 position: absolute;
 inset:90px;
 border:1px dashed rgba(124,160,255,0.2);
 border-radius:50%;
}

.ring-b {
 inset:46px;
 opacity:0.7;
}

ul {
 margin:12px00;
 padding-left:18px;
}

li + li {
 margin-top:8px;
}

.vision-stage-grid {
 margin-top:28px;
 display: grid;
 grid-template-columns: repeat(3, minmax(0,1fr));
 gap:16px;
}

.vision-stage-grid article {
 padding:22px;
}

.vision-stage-grid span {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width:36px;
 height:36px;
 border-radius:999px;
 border:1px solid rgba(255,255,255,0.12);
 color: var(--text);
}

.vision-stage-grid h3 {
 margin-top:14px;
}

.ontology-visual {
 margin-top:24px;
 padding:24px;
 display: grid;
 grid-template-columns: repeat(3, minmax(0,1fr));
 gap:16px;
 background-color: var(--bg-panel-strong);
}

.ontology-column {
 padding:22px;
 border-radius:22px;
 min-height:220px;
 background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(128,160,255,0.03));
 border:1px solid rgba(255,255,255,0.08);
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

.ontology-column p {
 font-size:1rem;
 font-weight:700;
}

.ontology-column span {
 display: block;
 height:116px;
 border-radius:18px;
 position: relative;
 overflow: hidden;
 border:1px solid rgba(255,255,255,0.08);
 background:
 linear-gradient(180deg, rgba(119,158,255,0.18), rgba(159,123,255,0.08)),
 rgba(255,255,255,0.03);
}

.ontology-column span::after {
 content: '';
 position: absolute;
 inset:18px;
 border-radius:14px;
 border:1px dashed rgba(255,255,255,0.18);
}

.cta {
 margin-top:92px;
 margin-bottom:64px;
 padding:44px28px;
 text-align: center;
 border-color: rgba(146,171,255,0.36);
 background:
 radial-gradient(circle at top, rgba(126,160,255,0.15), transparent40%),
 linear-gradient(140deg, rgba(125,145,255,0.11), rgba(159,123,255,0.08));
}

.cta .btn {
 margin-top:18px;
}

.site-footer {
 padding:0038px;
 color: #91a0bb;
 font-size:0.92rem;
}

[data-reveal] {
 opacity:0;
 transform: translateY(18px);
 transition: opacity560ms ease, transform560ms ease;
}

[data-reveal].revealed {
 opacity:1;
 transform: translateY(0);
}

@media (max-width:1100px) {
 .hero,
 .split-layout {
 grid-template-columns:1fr;
 }

 .hero-copy-block {
 max-width: none;
 }

 .hero-visual,
 .system-visual {
 min-height:500px;
 }
}

@media (max-width:980px) {
 nav {
 display: none;
 }

 .three-col,
 .vision-stage-grid,
 .ontology-visual,
 .hero-metrics {
 grid-template-columns:1fr;
 }

 .two-col,
 .ownership-layout,
 .hero-card-grid {
 grid-template-columns:1fr;
 }

 .hero-card-grid {
 position: relative;
 right: auto;
 bottom: auto;
 width:100%;
 margin-top:210px;
 }

 .hero-card-main {
 width:100%;
 }
}

@media (max-width:720px) {
 .container {
 width: min(var(--max-width), calc(100% -28px));
 }

 .hero {
 padding-top:84px;
 }

 h1 {
 font-size: clamp(2rem,11vw,3.2rem);
 }

 .hero-copy,
 .section-intro {
 font-size:1rem;
 }

 .hero-visual,
 .system-visual {
 min-height:420px;
 padding:18px;
 }

 .hero-bridge {
 left:18px;
 right:18px;
 }

 .system-core {
 width:128px;
 height:128px;
 }

 .system-node {
 width:108px;
 height:108px;
 font-size:0.92rem;
 }

 .node-tools {
 left:10px;
 }

 .node-audit {
 right:10px;
 }
}