:root {
color: #eef4f5;
background: #07090a;
font-family: Inter, "SF Pro Display", "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
text-rendering: optimizeLegibility;
--bg: #07090a;
--surface: #0d1112;
--surface-2: #111719;
--ink: #eef4f5;
--muted: #9aa7aa;
--dim: #667276;
--line: rgba(226, 242, 244, 0.13);
--cyan: #7edee2;
--silver: #cdd7d9;
--amber: #d7ad65;
--paper: #f4f7f5;
--paper-ink: #101617;
}

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
min-width: 320px;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}

button,
a {
font: inherit;
}

button {
cursor: pointer;
}

a {
color: inherit;
text-decoration: none;
}

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

main {
overflow: hidden;
background: var(--bg);
}

.site-header {
position: fixed;
z-index: 20;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 clamp(20px, 4vw, 64px);
border-bottom: 1px solid rgba(232, 244, 245, 0.12);
background: rgba(7, 9, 10, 0.52);
backdrop-filter: blur(18px);
}

.brand,
.desktop-nav button,
.menu-toggle,
.language-toggle {
border: 0;
color: var(--ink);
background: transparent;
}

.brand {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.04em;
}

.brand-mark {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid rgba(126, 222, 226, 0.38);
background: rgba(126, 222, 226, 0.08);
color: var(--cyan);
font-family: Georgia, "Times New Roman", serif;
font-size: 1.02rem;
letter-spacing: 0;
}

.desktop-nav {
display: none;
}

.desktop-nav button {
padding: 10px 13px;
color: rgba(238, 244, 245, 0.74);
font-size: 0.78rem;
transition: color 180ms ease, background 180ms ease;
}

.desktop-nav button:hover,
.desktop-nav button:focus-visible {
color: var(--ink);
background: rgba(238, 244, 245, 0.08);
outline: none;
}

.header-controls {
display: inline-flex;
align-items: center;
gap: 10px;
}

.menu-toggle,
.language-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border: 1px solid var(--line);
color: var(--silver);
min-width: 74px;
}

.language-toggle {
min-width: 96px;
color: rgba(238, 244, 245, 0.82);
background: rgba(238, 244, 245, 0.05);
}

.language-toggle:hover,
.menu-toggle:hover,
.language-toggle:focus-visible,
.menu-toggle:focus-visible {
border-color: rgba(126, 222, 226, 0.5);
outline: none;
}

.mobile-nav {
position: fixed;
z-index: 19;
top: 64px;
right: clamp(16px, 4vw, 64px);
display: none;
width: min(280px, calc(100vw - 32px));
gap: 1px;
padding: 10px;
border: 1px solid var(--line);
background: rgba(7, 9, 10, 0.94);
backdrop-filter: blur(22px);
}

body.menu-open .mobile-nav {
display: grid;
}

.mobile-nav button {
border: 0;
padding: 12px 10px;
color: var(--ink);
text-align: left;
background: transparent;
}

.mobile-nav button:hover,
.mobile-nav button:focus-visible {
background: rgba(238, 244, 245, 0.08);
outline: none;
}

.hero {
position: relative;
min-height: 100vh;
padding: 124px clamp(20px, 5vw, 72px) 72px;
background-image:
linear-gradient(90deg, rgba(7, 9, 10, 0.96) 0%, rgba(7, 9, 10, 0.86) 32%, rgba(7, 9, 10, 0.46) 68%, rgba(7, 9, 10, 0.28) 100%),
linear-gradient(180deg, rgba(7, 9, 10, 0) 62%, #07090a 100%),
url("./assets/ags-system-hero.png");
background-position: center, center, center right;
background-size: cover;
}

.hero::after {
content: "";
position: absolute;
left: clamp(20px, 5vw, 72px);
right: clamp(20px, 5vw, 72px);
bottom: 40px;
height: 1px;
background: linear-gradient(90deg, rgba(126, 222, 226, 0.46), rgba(238, 244, 245, 0.08), transparent);
}

.hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 680px) minmax(280px, 1fr);
gap: clamp(36px, 7vw, 96px);
align-items: end;
max-width: 1360px;
min-height: calc(100vh - 220px);
margin: 0 auto;
}

.eyebrow,
.section-kicker {
color: var(--cyan);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
}

.hero h1 {
max-width: 760px;
margin-top: 28px;
color: #ffffff;
font-size: clamp(2.65rem, 5.6vw, 5.75rem);
font-weight: 650;
line-height: 1.04;
letter-spacing: 0;
}

.hero-lede {
max-width: 650px;
margin-top: 30px;
color: rgba(238, 244, 245, 0.82);
font-size: clamp(1.05rem, 1.55vw, 1.32rem);
line-height: 1.9;
}

.hero-line {
margin-top: 20px;
color: var(--amber);
font-size: 0.95rem;
letter-spacing: 0.03em;
}

.contact-panel button {
min-height: 46px;
border: 1px solid rgba(126, 222, 226, 0.35);
padding: 12px 18px;
color: var(--ink);
background: rgba(126, 222, 226, 0.11);
transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.contact-panel button:hover {
transform: translateY(-1px);
border-color: rgba(126, 222, 226, 0.74);
background: rgba(126, 222, 226, 0.17);
}

.system-readout {
justify-self: end;
width: min(100%, 410px);
border-top: 1px solid rgba(126, 222, 226, 0.36);
border-bottom: 1px solid rgba(238, 244, 245, 0.16);
padding: 22px 0;
color: rgba(238, 244, 245, 0.72);
background: rgba(7, 9, 10, 0.36);
}

.system-readout span,
.system-readout strong {
display: block;
}

.system-readout strong {
margin: 8px 0;
color: var(--ink);
font-size: 1.15rem;
font-weight: 620;
}

.band {
padding: clamp(76px, 9vw, 132px) clamp(20px, 5vw, 72px);
background: var(--paper);
color: var(--paper-ink);
}

.band > * {
max-width: 1220px;
margin-left: auto;
margin-right: auto;
}

.intro {
padding-top: clamp(70px, 8vw, 104px);
}

.two-column {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.75fr);
gap: clamp(36px, 6vw, 84px);
align-items: start;
margin-top: 26px;
}

h2 {
font-size: clamp(1.85rem, 3.35vw, 3.35rem);
font-weight: 620;
line-height: 1.16;
letter-spacing: 0;
}

.copy-stack {
display: grid;
gap: 20px;
color: rgba(16, 22, 23, 0.72);
font-size: 1rem;
line-height: 2;
}

.muted {
color: #607074;
}

.dark-band {
background: #0b0f10;
color: var(--ink);
}

.dark-band .wide-statement {
margin-top: 26px;
}

.wide-statement h2 {
max-width: 980px;
}

.wide-statement p {
max-width: 780px;
margin-top: 24px;
color: rgba(238, 244, 245, 0.72);
line-height: 2;
}

.logic-lines {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 64px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}

.logic-lines span {
min-height: 104px;
padding: 24px 18px;
border-right: 1px solid var(--line);
color: var(--silver);
}

.logic-lines span:last-child {
border-right: 0;
}

.section-heading {
display: flex;
justify-content: space-between;
gap: 40px;
margin-top: 24px;
padding-bottom: 38px;
border-bottom: 1px solid rgba(16, 22, 23, 0.14);
}

.section-heading h2 {
max-width: 620px;
}

.section-heading p {
max-width: 430px;
color: rgba(16, 22, 23, 0.66);
line-height: 1.9;
}

.direction-grid {
display: grid;
margin-top: 6px;
border-bottom: 1px solid rgba(16, 22, 23, 0.12);
}

.direction-item {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: clamp(24px, 6vw, 76px);
padding: 28px 0;
border-top: 1px solid rgba(16, 22, 23, 0.12);
}

.direction-item span {
color: #47797e;
font-size: 0.8rem;
font-weight: 700;
}

.direction-item h3 {
margin-top: 8px;
font-size: clamp(1.45rem, 2.4vw, 2.4rem);
font-weight: 610;
line-height: 1.12;
}

.direction-item p {
max-width: 650px;
color: rgba(16, 22, 23, 0.7);
line-height: 1.9;
}

.system-band {
background: #091012;
color: var(--ink);
}

.system-band .copy-stack {
color: rgba(238, 244, 245, 0.72);
}

.layer-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
margin-top: 64px;
background: rgba(238, 244, 245, 0.12);
}

.visual-panel {
position: relative;
margin-top: 54px;
overflow: hidden;
border: 1px solid rgba(238, 244, 245, 0.13);
background: #060808;
}

.visual-panel::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(7, 9, 10, 0.68), rgba(7, 9, 10, 0.08) 52%, rgba(7, 9, 10, 0.2)),
linear-gradient(180deg, transparent 58%, rgba(7, 9, 10, 0.86));
pointer-events: none;
}

.visual-panel img {
display: block;
width: 100%;
min-height: 320px;
max-height: 520px;
object-fit: cover;
}

.visual-panel figcaption {
position: absolute;
z-index: 1;
left: clamp(18px, 3vw, 36px);
bottom: clamp(18px, 3vw, 34px);
max-width: 360px;
color: rgba(238, 244, 245, 0.78);
font-size: 0.88rem;
}

.layer-item {
min-height: 260px;
padding: 26px;
background: #0d1517;
}

.layer-item span {
color: var(--amber);
font-size: 0.78rem;
font-weight: 700;
}

.layer-item h3 {
margin-top: 56px;
color: var(--ink);
font-size: 1.2rem;
font-weight: 630;
}

.layer-item p {
margin-top: 18px;
color: rgba(238, 244, 245, 0.66);
line-height: 1.85;
}

.symbol-band {
background: #f7f8f5;
}

.symbol-lockup {
display: grid;
grid-template-columns: minmax(240px, 0.75fr) minmax(300px, 1fr);
gap: clamp(36px, 7vw, 94px);
align-items: center;
margin-top: 30px;
}

.symbol-large {
color: #101617;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(5.5rem, 13vw, 11.5rem);
line-height: 0.86;
}

.symbol-lockup p,
.vision-band p,
.contact-band p {
max-width: 680px;
margin-top: 24px;
color: rgba(16, 22, 23, 0.68);
line-height: 2;
}

.symbol-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
margin-top: 62px;
background: rgba(16, 22, 23, 0.14);
}

.symbol-band .visual-panel {
border-color: rgba(16, 22, 23, 0.18);
}

.symbol-band .visual-panel::after {
background:
linear-gradient(90deg, rgba(7, 9, 10, 0.72), rgba(7, 9, 10, 0.04) 55%),
linear-gradient(180deg, transparent 50%, rgba(7, 9, 10, 0.7));
}

.symbol-grid article {
padding: 28px;
background: #f7f8f5;
}

.symbol-grid span {
font-family: Georgia, "Times New Roman", serif;
font-size: 3rem;
color: #47797e;
}

.symbol-grid h3 {
margin-top: 18px;
font-size: 1.15rem;
}

.symbol-grid p {
margin-top: 10px;
color: rgba(16, 22, 23, 0.68);
}

.closing-line {
margin-top: 54px;
color: #315f63;
font-size: clamp(1.15rem, 2vw, 1.85rem);
}

.origin-band {
background: #101617;
color: var(--ink);
}

.origin-band .copy-stack {
color: rgba(238, 244, 245, 0.72);
}

.vision-band {
background: #e8eeec;
color: var(--paper-ink);
}

.vision-band h2,
.vision-band p {
max-width: 920px;
}

.contact-band {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(320px, 0.55fr);
gap: clamp(36px, 7vw, 96px);
align-items: start;
background: #f4f7f5;
}

.contact-panel {
border-top: 1px solid rgba(16, 22, 23, 0.22);
border-bottom: 1px solid rgba(16, 22, 23, 0.12);
padding: 24px 0;
}

.contact-panel span {
color: #607074;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
}

.contact-panel a {
display: block;
margin-top: 10px;
color: #101617;
font-size: clamp(1.3rem, 2.5vw, 2rem);
font-weight: 640;
overflow-wrap: anywhere;
}

.contact-panel button {
margin-top: 22px;
color: #101617;
border-color: rgba(16, 22, 23, 0.18);
background: rgba(126, 222, 226, 0.28);
}

.contact-panel p {
margin-top: 24px;
color: #607074;
}

footer {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 28px;
align-items: end;
padding: 34px clamp(20px, 5vw, 72px);
border-top: 1px solid rgba(238, 244, 245, 0.12);
color: rgba(238, 244, 245, 0.74);
background: #07090a;
}

footer strong {
color: var(--ink);
}

footer p {
margin-top: 6px;
}

footer span,
footer small {
font-size: 0.82rem;
}

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

.hero {
min-height: 880px;
background-position: center, center, 58% center;
}

.hero-inner,
.two-column,
.symbol-lockup,
.contact-band {
grid-template-columns: 1fr;
}

.system-readout {
justify-self: start;
}

.logic-lines,
.layer-list {
grid-template-columns: repeat(2, 1fr);
}

.section-heading {
display: block;
}

.section-heading p {
margin-top: 18px;
}

.direction-item {
grid-template-columns: 1fr;
gap: 16px;
}

.symbol-grid {
grid-template-columns: 1fr;
}

footer {
grid-template-columns: 1fr;
}
}

@media (max-width: 620px) {
.site-header {
height: 68px;
padding: 0 16px;
}

.brand-mark {
width: 36px;
height: 36px;
}

.mobile-nav {
top: 68px;
right: 16px;
}

.hero {
min-height: 820px;
padding: 124px 18px 58px;
background-position: center, center, 62% center;
}

.visual-panel img {
min-height: 240px;
}

.hero-inner {
min-height: calc(820px - 190px);
}

.hero h1 {
font-size: clamp(2.45rem, 12vw, 3.55rem);
}

.band {
padding: 72px 18px;
}

.logic-lines,
.layer-list {
grid-template-columns: 1fr;
}

.logic-lines span {
min-height: auto;
border-right: 0;
border-bottom: 1px solid var(--line);
}

.layer-item {
min-height: 220px;
}

.layer-item h3 {
margin-top: 38px;
}
}