/*
 * HCE Secure IT Services Private Limited
 * Copyright 2015-2026. Strictly Company Confidential.
 * ISO 9001:2015 controlled website release.
 * Module: styles.css
 */

:root {
  --ink: #f7f8fb;
  --muted: #aeb9cb;
  --line: rgba(255, 255, 255, 0.12);
  --panel: rgba(17, 31, 51, 0.76);
  --navy: #07111f;
  --navy-2: #0c1b2e;
  --orange: #ff6a1a;
  --gold: #ffb05d;
  --green: #63dc9a;
  --max: 1180px;
}

:root[data-theme="light"] {
  --ink: #1d1d1f;
  --muted: #5f636b;
  --line: rgba(0, 0, 0, 0.11);
  --panel: rgba(255, 255, 255, 0.82);
  --navy: #f5f5f7;
  --navy-2: #ffffff;
  --gold: #a64a00;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 4%, rgba(255, 106, 26, 0.16), transparent 32rem),
    radial-gradient(circle at 8% 30%, rgba(29, 98, 173, 0.2), transparent 38rem),
    var(--navy);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
:root[data-theme="light"] body { background: radial-gradient(circle at 88% 4%, rgba(255,106,26,.12), transparent 32rem), radial-gradient(circle at 8% 30%, rgba(50,120,210,.1), transparent 38rem), #f5f5f7; }
:root[data-theme="light"] .site-header { background: rgba(250,250,252,.82); }
:root[data-theme="light"] .vision-band,
:root[data-theme="light"] .mdbc-band { background: linear-gradient(125deg, rgba(255,106,26,.09), rgba(225,236,249,.6)); }
:root[data-theme="light"] .grounding-band,
:root[data-theme="light"] .creation-band,
:root[data-theme="light"] .ecosystem-band,
:root[data-theme="light"] .security-band,
:root[data-theme="light"] .content-band.alt { background: rgba(232,237,244,.62); }
:root[data-theme="light"] footer { background: #e8ebf0; }
:root[data-theme="light"] .generation-gallery figure,
:root[data-theme="light"] .comparison-card > div { background: #e5e8ed; }
:root[data-theme="light"] .check-list li,
:root[data-theme="light"] .ecosystem-feature li,
:root[data-theme="light"] .faculty-flow span { color: #34373c; }
:root[data-theme="light"] .truth-note { color: #6b3b16; }
:root[data-theme="light"] .button-secondary { background: rgba(255,255,255,.68); }
a { color: inherit; }
img { max-width: 100%; }
.section-shell { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px max(20px, calc((100vw - var(--max)) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(7, 17, 31, 0.86);
  backdrop-filter: blur(20px);
}
.brand { display: flex; align-items: center; gap: 11px; font-size: 1.2rem; font-weight: 800; text-decoration: none; }
.brand img { border-radius: 50%; }
nav { display: flex; align-items: center; gap: 24px; }
nav a { color: var(--muted); font-size: 0.92rem; font-weight: 650; text-decoration: none; }
nav a:hover, nav a:focus-visible { color: var(--ink); }

.hero { min-height: 760px; display: grid; grid-template-columns: 0.82fr 1.18fr; align-items: center; gap: 56px; padding-block: 94px 88px; }
.hero h1, .feature-intro h2, .section-heading h2, .download-copy h2, .security-grid h2, .policy-title h1 {
  margin: 0;
  font-weight: 560;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.hero h1 { max-width: 720px; font-size: clamp(3.4rem, 6vw, 6.7rem); }
.hero h1 span { color: var(--orange); }
.eyebrow { margin: 0 0 18px; color: var(--gold); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.lede { max-width: 640px; margin: 28px 0; color: var(--muted); font-size: clamp(1.08rem, 1.8vw, 1.3rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 21px;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-weight: 750;
  text-decoration: none;
}
.button-primary { border-color: var(--orange); background: var(--orange); color: white; box-shadow: 0 18px 45px rgba(255, 106, 26, 0.22); }
.button-secondary { background: rgba(255, 255, 255, 0.06); }
.button-disabled { color: #8290a5; background: rgba(255, 255, 255, 0.035); cursor: not-allowed; }
.trust-list { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 0; margin: 30px 0 0; color: #cdd6e4; font-size: 0.86rem; list-style: none; }
.trust-list li::before { content: "✓"; margin-right: 8px; color: var(--green); font-weight: 900; }
.hero-visual { position: relative; }
.hero-visual::before { content: ""; position: absolute; inset: 12% 8%; z-index: -1; border-radius: 50%; background: rgba(255, 106, 26, 0.24); filter: blur(70px); }
.hero-visual img { display: block; width: 125%; max-width: none; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 38px 90px rgba(0, 0, 0, 0.48); transform: perspective(1100px) rotateY(-4deg); transform-origin: left center; }

.vision-band { padding-block: 110px; border-block: 1px solid var(--line); background: linear-gradient(125deg, rgba(255, 106, 26, 0.12), rgba(9, 31, 55, 0.2)); }
.vision-grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: 90px; }
.vision-grid h2, .command-centre h2, .grounding-grid h2, .use-cases h2, .patterns h2, .layers h2 { margin: 0; font-size: clamp(2.2rem, 4.5vw, 4.4rem); font-weight: 560; letter-spacing: -0.045em; line-height: 1.03; }
.vision-copy p { color: var(--muted); }
.vision-copy .vision-lede { margin-top: 0; color: var(--ink); font-size: 1.3rem; }
.command-centre { position: relative; display: grid; grid-template-columns: 0.86fr 0.72fr; gap: 70px; padding-block: 118px; }
.command-centre-badge { position: absolute; top: 54px; right: 0; padding: 7px 12px; border: 1px solid rgba(99, 220, 154, 0.45); border-radius: 999px; color: var(--green); background: rgba(99, 220, 154, 0.08); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.12em; }
.command-centre > div:last-child { align-self: end; color: var(--muted); font-size: 1.04rem; }

.heritage { padding-block: 120px 40px; }
.heritage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.heritage-grid a { min-height: 285px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; color: inherit; background: rgba(17, 31, 51, 0.68); text-decoration: none; transition: border-color 160ms ease, transform 160ms ease; }
.heritage-grid a:hover, .heritage-grid a:focus-visible { border-color: rgba(255, 176, 93, 0.62); transform: translateY(-2px); }
.heritage-grid span { color: var(--gold); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.heritage-grid h3 { margin: 70px 0 9px; font-size: 1.28rem; font-weight: 620; line-height: 1.2; }
.heritage-grid p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.feature-intro { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 80px; align-items: end; padding-block: 110px 52px; }
.feature-intro h2, .section-heading h2, .download-copy h2, .security-grid h2 { font-size: clamp(2.2rem, 4.5vw, 4.4rem); }
.feature-intro > p { margin: 0; color: var(--muted); font-size: 1.12rem; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-bottom: 120px; }
.cards article { min-height: 290px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.card-number { color: var(--orange); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; }
.cards h3 { margin: 72px 0 8px; font-size: 1.35rem; font-weight: 620; }
.cards p { margin: 0; color: var(--muted); font-size: 0.94rem; }

.creation-band { padding-block: 120px; border-block: 1px solid var(--line); background: linear-gradient(145deg, #050d18, #0d2138 58%, #122239); }
.creation-heading { max-width: 920px; }
.generation-gallery { display: grid; grid-template-columns: 1.18fr 0.82fr 0.82fr; gap: 14px; }
.generation-gallery figure { position: relative; min-height: 430px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #111f33; }
.generation-gallery img { width: 100%; height: 100%; object-fit: cover; }
.generation-gallery figcaption { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(3, 10, 18, 0.72); backdrop-filter: blur(16px); }
.generation-gallery figcaption span { color: var(--gold); font-size: .68rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.generation-gallery figcaption strong { font-size: .94rem; font-weight: 650; }
.before-after { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; align-items: center; padding-top: 88px; }
.before-after-copy h3 { margin: 0; font-size: clamp(2.2rem, 4.2vw, 4rem); font-weight: 560; letter-spacing: -.045em; line-height: 1.04; }
.before-after-copy > p:not(.eyebrow) { color: var(--muted); }
.comparison-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.05); box-shadow: 0 28px 80px rgba(0,0,0,.34); }
.comparison-card > div { position: relative; overflow: hidden; border-radius: 17px; background: #09111d; }
.comparison-card img { width: 100%; height: 410px; object-fit: cover; }
.comparison-card > div > span { position: absolute; left: 14px; bottom: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(3,10,18,.74); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(10px); }
.comparison-card figcaption { grid-column: 1 / -1; padding: 7px 8px 4px; color: var(--muted); font-size: .76rem; }

.multi-faculty { padding-block: 120px; }
.faculty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.faculty-grid article { min-height: 250px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.faculty-grid article > span { color: var(--orange); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.faculty-grid h3 { margin: 58px 0 8px; font-size: 1.26rem; font-weight: 620; }
.faculty-grid p { margin: 0; color: var(--muted); font-size: .91rem; }
.faculty-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 20px; }
.faculty-flow span { padding: 14px; border: 1px solid var(--line); border-radius: 12px; color: #d7deea; background: rgba(255,255,255,.035); font-size: .76rem; }

.grounding-band { padding-block: 120px; border-block: 1px solid var(--line); background: #050d18; }
.grounding-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 90px; align-items: center; }
.grounding-grid > div:last-child > p { color: var(--muted); }
.grounding-orbit { position: relative; width: min(390px, 78vw); aspect-ratio: 1; margin: auto; border: 1px solid rgba(255, 176, 93, 0.45); border-radius: 50%; box-shadow: inset 0 0 80px rgba(255, 106, 26, 0.08), 0 0 90px rgba(36, 107, 181, 0.12); }
.grounding-orbit::before, .grounding-orbit::after { content: ""; position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.grounding-orbit::before { inset: 19%; }
.grounding-orbit::after { inset: 38%; background: var(--orange); box-shadow: 0 0 50px rgba(255, 106, 26, 0.6); }
.grounding-orbit span { position: absolute; z-index: 2; padding: 5px 9px; border-radius: 999px; color: var(--ink); background: var(--navy-2); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.12em; }
.grounding-orbit span:nth-child(1) { top: 5%; left: 42%; }
.grounding-orbit span:nth-child(2) { top: 44%; right: -5%; }
.grounding-orbit span:nth-child(3) { bottom: 5%; left: 37%; }
.grounding-orbit span:nth-child(4) { top: 44%; left: -5%; }
.check-list { padding: 0; margin: 28px 0 0; list-style: none; }
.check-list li { margin: 10px 0; color: #d5dce7; }
.check-list li::before { content: "✓"; display: inline-block; width: 24px; color: var(--green); font-weight: 900; }

.use-cases, .patterns, .layers { padding-block: 120px; }
.section-heading > p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; }
.use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.use-grid article { min-height: 275px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.use-grid article > span { color: var(--gold); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
.use-grid h3 { margin: 74px 0 8px; font-size: 1.35rem; font-weight: 620; }
.use-grid p { margin: 0; color: var(--muted); font-size: 0.94rem; }
.mdbc-band { padding-block: 120px; border-block: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,106,26,.12), rgba(9,31,55,.2)); }
.mdbc-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 84px; }
.mdbc-grid h2 { margin: 0; font-size: clamp(2.4rem, 4.8vw, 4.7rem); font-weight: 560; letter-spacing: -.045em; line-height: 1.02; }
.mdbc-lede { color: var(--muted); font-size: 1.12rem; }
.mdbc-stages { border-top: 1px solid var(--line); }
.mdbc-stages article { display: grid; grid-template-columns: 44px .55fr 1fr; gap: 18px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.mdbc-stages span { color: var(--orange); font-size: .74rem; font-weight: 850; }
.mdbc-stages h3 { margin: 0; font-size: 1.06rem; font-weight: 650; }
.mdbc-stages p { margin: 0; color: var(--muted); font-size: .91rem; }
.workflow-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 42px; }
.workflow-chips span { padding: 8px 12px; border: 1px solid rgba(255,176,93,.32); border-radius: 999px; color: #e7c39b; background: rgba(255,106,26,.06); font-size: .78rem; }
.patterns { padding-top: 30px; }
.patterns ol { padding: 0; margin: 0; border-top: 1px solid var(--line); list-style: none; counter-reset: pattern; }
.patterns li { display: grid; grid-template-columns: 50px 0.4fr 0.6fr; gap: 22px; align-items: baseline; padding: 21px 0; border-bottom: 1px solid var(--line); counter-increment: pattern; }
.patterns li::before { content: "0" counter(pattern); color: var(--orange); font-size: 0.76rem; font-weight: 850; }
.patterns li strong { font-size: 1.18rem; }
.patterns li span { color: var(--muted); }

.ecosystem-band { padding-block: 120px; border-block: 1px solid var(--line); background: linear-gradient(160deg, rgba(6, 17, 31, 0.96), rgba(18, 41, 68, 0.78)); }
.ecosystem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ecosystem-feature { display: flex; min-height: 285px; flex-direction: column; padding: 27px; border: 1px solid var(--line); border-radius: 20px; background: rgba(7, 17, 31, 0.72); }
.ecosystem-feature-wide { grid-column: span 2; }
.capability-status { color: var(--orange); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.14em; }
.ecosystem-feature h3 { margin: 48px 0 10px; font-size: 1.38rem; font-weight: 620; }
.ecosystem-feature p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.ecosystem-feature ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: auto 0 0; list-style: none; }
.ecosystem-feature li { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: #cbd5e3; font-size: 0.74rem; }
.availability-note { margin: 24px 0 0; color: var(--muted); font-size: 0.82rem; }

.security-band { border-block: 1px solid var(--line); background: rgba(2, 8, 16, 0.52); }
.security-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 90px; padding-block: 110px; }
.security-grid p:not(.eyebrow) { max-width: 620px; color: var(--muted); font-size: 1.06rem; }
.security-grid dl { margin: 0; }
.security-grid dl div { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.security-grid dt { color: var(--muted); }
.security-grid dd { margin: 0; font-weight: 700; }

.layers { padding-bottom: 80px; }
.layer-stack { display: grid; gap: 8px; }
.layer-stack > div { display: grid; grid-template-columns: 50px 0.35fr 0.65fr; gap: 22px; align-items: center; min-height: 74px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(90deg, rgba(255, 106, 26, calc(0.02 + var(--i, 0) * 0.01)), rgba(17, 31, 51, 0.7)); }
.layer-stack > div:nth-child(1) { margin-inline: 0; }
.layer-stack > div:nth-child(2) { margin-inline: 1.2%; }
.layer-stack > div:nth-child(3) { margin-inline: 2.4%; }
.layer-stack > div:nth-child(4) { margin-inline: 3.6%; }
.layer-stack > div:nth-child(5) { margin-inline: 4.8%; }
.layer-stack > div:nth-child(6) { margin-inline: 6%; }
.layer-stack > div:nth-child(7) { margin-inline: 7.2%; }
.layer-stack span { color: var(--orange); font-size: 0.75rem; font-weight: 850; }
.layer-stack strong { font-size: 1.04rem; }
.layer-stack p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.screenshots { padding-block: 120px; }
.section-heading { max-width: 850px; margin-bottom: 56px; }
.screenshots figure { margin: 0 0 64px; }
.screenshots figure:nth-of-type(even) { margin-left: 7%; }
.screenshots img { display: block; width: 93%; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.36); }
.screenshots figcaption { display: flex; gap: 14px; align-items: baseline; padding-top: 14px; color: var(--muted); }
.screenshots figcaption strong { color: var(--ink); }

.download-section { padding-block: 84px 120px; }
.download-copy { max-width: 820px; }
.download-copy > p:not(.eyebrow), .release-note { color: var(--muted); }
.store-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 42px; }
.store-card { grid-column: span 2; }
.store-card:nth-child(4), .store-card:nth-child(5) { grid-column: span 3; }
.store-card { display: flex; min-height: 270px; flex-direction: column; align-items: flex-start; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.store-card .platform { color: var(--gold); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.store-card h3 { margin: 28px 0 2px; font-size: 1.42rem; }
.store-card p { margin: 0 0 26px; color: var(--muted); }
.store-card .button { margin-top: auto; }
.release-note { margin-top: 26px; font-size: 0.84rem; }

.policy-shell { width: min(860px, calc(100% - 40px)); margin: 0 auto; padding: 90px 0 120px; }
.policy-title { padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.policy-title h1 { font-size: clamp(3rem, 7vw, 5.6rem); }
.policy-title > p:last-child { color: var(--muted); }
.policy-summary { margin: 38px 0; padding: 24px; border: 1px solid rgba(99, 220, 154, 0.34); border-radius: 16px; background: rgba(99, 220, 154, 0.07); }
.policy-summary p { margin-bottom: 0; }
.policy-shell section { padding: 28px 0; border-bottom: 1px solid var(--line); }
.policy-shell h2 { margin: 0 0 12px; font-size: 1.7rem; }
.policy-shell h3 { margin: 22px 0 6px; font-size: 1.06rem; }
.policy-shell p, .policy-shell li { color: #c2ccda; }
.policy-shell a { color: var(--gold); }
.policy-shell address { color: #c2ccda; font-style: normal; }

.page-hero { display: grid; grid-template-columns: 1fr .8fr; gap: 70px; align-items: center; padding-block: 100px 72px; }
.page-hero h1 { margin: 0; font-size: clamp(3rem, 7vw, 6.3rem); font-weight: 560; letter-spacing: -.05em; line-height: .98; }
.page-hero p:not(.eyebrow) { max-width: 700px; color: var(--muted); font-size: 1.15rem; }
.page-hero img { width: 100%; max-height: 520px; object-fit: cover; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 28px 80px rgba(0,0,0,.34); }
.content-band { padding-block: 95px; border-top: 1px solid var(--line); }
.content-band.alt { background: rgba(4,12,22,.48); }
.content-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 84px; }
.content-grid h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 560; letter-spacing: -.04em; line-height: 1.05; }
.content-grid > div:last-child > p { color: var(--muted); }
.idea-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 36px; }
.idea-grid article { padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.idea-grid h3 { margin: 0 0 9px; font-weight: 620; }
.idea-grid p { margin: 0; color: var(--muted); font-size: .91rem; }
.truth-note { margin-top: 24px; padding: 22px; border: 1px solid rgba(255,176,93,.38); border-radius: 16px; background: rgba(255,106,26,.07); color: #e7d5c2; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.media-grid figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.media-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-grid figcaption { padding: 16px 18px; font-weight: 620; }
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.contact-cards article { padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.contact-cards h2 { margin-top: 0; font-weight: 620; }
.contact-cards p { color: var(--muted); }
.contact-cards a { color: var(--gold); }

.preference-dock { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; gap: 8px; }
.preference-pill { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: color-mix(in srgb, var(--navy-2) 88%, transparent); font: inherit; font-size: .74rem; box-shadow: 0 12px 32px rgba(0,0,0,.2); backdrop-filter: blur(18px); cursor: pointer; }
.preference-pill b { font-weight: 720; }
.language-popover { position: absolute; right: 0; bottom: 48px; width: min(390px, calc(100vw - 28px)); padding: 18px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: color-mix(in srgb, var(--navy-2) 96%, transparent); box-shadow: 0 24px 70px rgba(0,0,0,.32); backdrop-filter: blur(24px); }
.language-popover strong { display: block; margin-bottom: 12px; }
.language-popover small, .preference-welcome small { display: block; margin: 13px 0 7px; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.language-popover > div, .welcome-options { display: flex; flex-wrap: wrap; gap: 6px; }
.language-popover button, .welcome-options button, .welcome-theme button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgba(127,127,127,.08); font: inherit; font-size: .75rem; cursor: pointer; }
.language-popover button:hover, .language-popover button:focus-visible, .welcome-options button:hover, .welcome-options button:focus-visible, .welcome-theme button:hover, .welcome-theme button:focus-visible { border-color: var(--orange); }
.preference-welcome { position: fixed; right: 18px; bottom: 68px; z-index: 80; width: min(430px, calc(100vw - 28px)); padding: 22px; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); background: color-mix(in srgb, var(--navy-2) 96%, transparent); box-shadow: 0 28px 90px rgba(0,0,0,.4); backdrop-filter: blur(26px); }
.preference-welcome > img { border-radius: 50%; }
.preference-welcome h2 { margin: 12px 34px 6px 0; font-size: 1.45rem; font-weight: 620; letter-spacing: -.025em; }
.preference-welcome > p { margin: 0 0 14px; color: var(--muted); font-size: .88rem; }
.preference-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; color: var(--ink); background: rgba(127,127,127,.12); font-size: 1.2rem; cursor: pointer; }
.welcome-theme { display: flex; gap: 6px; margin-top: 15px; }
.welcome-continue { width: 100%; margin-top: 16px; border: 0; cursor: pointer; }

footer { display: grid; grid-template-columns: 1fr auto; gap: 22px; padding: 42px max(20px, calc((100vw - var(--max)) / 2)); border-top: 1px solid var(--line); color: var(--muted); background: #050c16; }
footer > div:first-child { display: flex; gap: 12px; align-items: baseline; }
footer strong { color: var(--ink); }
.footer-links { display: flex; gap: 20px; }
.footer-links a { text-decoration: none; }
footer > p { grid-column: 1 / -1; margin: 0; font-size: 0.78rem; }

@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; gap: 10px; }
  nav { width: 100%; gap: 18px; overflow-x: auto; padding-bottom: 3px; white-space: nowrap; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 70px; }
  .hero-visual img { width: 100%; transform: none; }
  .vision-grid, .command-centre, .feature-intro, .grounding-grid, .security-grid, .before-after, .mdbc-grid, .page-hero, .content-grid { grid-template-columns: 1fr; gap: 34px; }
  .command-centre-badge { position: static; width: max-content; grid-column: 1; }
  .heritage-grid, .cards, .use-grid, .ecosystem-grid, .store-grid, .faculty-grid, .generation-gallery, .media-grid { grid-template-columns: repeat(2, 1fr); }
  .store-card, .store-card:nth-child(4), .store-card:nth-child(5) { grid-column: auto; }
  .generation-gallery figure:first-child { grid-column: span 2; }
  .faculty-flow { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .site-header { padding-inline: 16px; }
  .section-shell, .policy-shell { width: min(100% - 28px, var(--max)); }
  .hero { padding-block: 55px 72px; }
  .hero h1 { font-size: 3.25rem; }
  .heritage-grid, .cards, .use-grid, .ecosystem-grid, .store-grid, .faculty-grid, .generation-gallery, .idea-grid, .media-grid, .contact-cards { grid-template-columns: 1fr; }
  .generation-gallery figure:first-child { grid-column: auto; }
  .generation-gallery figure { min-height: 360px; }
  .comparison-card { grid-template-columns: 1fr; }
  .comparison-card figcaption { grid-column: auto; }
  .comparison-card img { height: 330px; }
  .faculty-flow { grid-template-columns: 1fr; }
  .mdbc-stages article { grid-template-columns: 36px 1fr; }
  .mdbc-stages p { grid-column: 2; }
  .ecosystem-feature-wide { grid-column: auto; }
  .cards article { min-height: 230px; }
  .cards h3 { margin-top: 44px; }
  .patterns li, .layer-stack > div { grid-template-columns: 36px 1fr; gap: 12px; }
  .patterns li span, .layer-stack p { grid-column: 2; }
  .layer-stack > div { margin-inline: 0 !important; }
  .screenshots img { width: 100%; }
  .screenshots figure:nth-of-type(even) { margin-left: 0; }
  .screenshots figcaption { display: grid; gap: 0; }
  footer { grid-template-columns: 1fr; }
  footer > p { grid-column: auto; }
  .preference-dock { right: 10px; bottom: 10px; }
  .preference-pill { padding-inline: 10px; }
  .preference-welcome { right: 10px; bottom: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}