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

:root {
  --bg: #07111f;
  --bg-soft: #0b1829;
  --panel: #0e1d30;
  --panel-hover: #11253b;
  --line: #203750;
  --text: #edf5ff;
  --muted: #9bb0c8;
  --cyan: #22d3ee;
  --blue: #38a5ff;
  --green: #62f3bd;
  --max: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Manrope, Arial, sans-serif; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.container { width: min(var(--max), calc(100% - 44px)); margin-inline: auto; }
.announcement { min-height: 31px; display: flex; justify-content: center; align-items: center; gap: 9px; padding: 5px 16px; color: #a9c0d8; background: #081a2b; border-bottom: 1px solid #142b42; font: 10px 'DM Mono', monospace; letter-spacing: .055em; text-align: center; }
.pulse, .status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px #62f3bd99; }
.site-header { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 0 max(22px, calc((100% - var(--max))/2)); background: #07111ff2; border-bottom: 1px solid #1a3048; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
.brand { color: #f4f9ff; font-size: 22px; font-weight: 800; letter-spacing: -.07em; white-space: nowrap; }
.brand > span:first-child { color: var(--cyan); }
.brand-dot { color: var(--green); }
.nav { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 28px); }
.nav a { font-size: 12px; color: #b6c7da; transition: color .2s; }
.nav a:hover, .nav a.active { color: var(--cyan); }
.menu-toggle { display: none; color: var(--text); border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 7px 10px; }
.hero { min-height: 555px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; padding-block: 66px 72px; }
.eyebrow { margin: 0 0 15px; color: var(--cyan); font: 10px 'DM Mono', monospace; letter-spacing: .14em; }
.eyebrow-line { display: inline-block; width: 24px; height: 1px; margin: 0 8px 3px 0; background: var(--cyan); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 22px; font-size: clamp(38px, 5.3vw, 66px); line-height: 1.1; letter-spacing: -.065em; }
.gradient-text { color: var(--cyan); text-shadow: 0 0 32px #22d3ee30; }
.hero-text { max-width: 550px; margin-bottom: 28px; color: #b2c3d6; font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 11px 17px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; font-weight: 800; transition: transform .2s, border-color .2s, background .2s; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #03111e; background: linear-gradient(100deg, var(--cyan), #4da9ff); box-shadow: 0 7px 24px #12bde51c; }
.button-ghost { border-color: #2a4966; color: #d5e8fa; background: #0b1a2b80; }
.button-ghost:hover { border-color: var(--cyan); }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 35px; color: #8198b0; font: 10px 'DM Mono', monospace; }
.proof-icon { color: var(--green); font-size: 15px; }.proof-sep { color: #35516b; }
.hero-visual { position: relative; min-height: 360px; overflow: hidden; border: 1px solid #1c4561; border-radius: 14px; background: radial-gradient(ellipse at 52% 45%, #0b4b6a70 0, transparent 45%), linear-gradient(145deg, #0c2135, #07111f 75%); box-shadow: 0 0 60px #008dc21a, inset 0 0 35px #00c8ff08; }
.visual-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(#24516c 1px, transparent 1px), linear-gradient(90deg, #24516c 1px, transparent 1px); background-size: 31px 31px; mask-image: linear-gradient(to bottom, #000, transparent 90%); }
.orbit { position: absolute; left: 50%; top: 49%; border: 1px solid #2ac6e64c; border-radius: 50%; transform: translate(-50%,-50%) rotate(-24deg); }
.orbit-one { width: 270px; height: 155px; }.orbit-two { width: 210px; height: 290px; transform: translate(-50%,-50%) rotate(48deg); border-color: #4e9eff55; }
.core-shield { position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%); width: 152px; height: 152px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; border: 1px solid #24c8e9aa; border-radius: 50%; background: radial-gradient(circle, #0d3851, #081a2b 72%); box-shadow: 0 0 45px #00cfff25, inset 0 0 25px #00cfff14; }
.core-shield > span { color: var(--cyan); font-size: 51px; line-height: 1; text-shadow: 0 0 20px #22d3ee; }.core-shield b { font-size: 12px; letter-spacing: .08em; }.core-shield small { color: #6e9ab7; font: 8px 'DM Mono', monospace; }
.float-card { position: absolute; z-index: 2; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid #28506a; border-radius: 7px; background: #091827e8; color: #94abc1; font: 9px 'DM Mono', monospace; box-shadow: 0 8px 22px #0003; }
.float-card-top { top: 25px; right: 20px; flex-wrap: wrap; width: 142px; }.float-card-top strong { width: 100%; color: var(--green); font-size: 10px; }.float-card-bottom { left: 20px; bottom: 23px; }.float-card-bottom div { display: grid; gap: 2px; }.float-card-bottom strong { color: #dff5ff; font-size: 10px; }.float-card-bottom small { color: #7792ac; font-size: 9px; }.mini-code { color: var(--cyan); font-size: 19px; }.scanline { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #29d5ff70; box-shadow: 0 0 18px #29d5ff; animation: scan 7s linear infinite; opacity: .5; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(360px); } }
.section { padding-block: 42px 76px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 27px; }
.section-heading h2, .feature-inner h2, .newsletter h2 { margin-bottom: 0; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.045em; line-height: 1.2; }
.section-intro { max-width: 390px; margin-bottom: 0; color: var(--muted); font-size: 13px; }
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.topic-card { padding: 23px 21px; border: 1px solid #203750; border-radius: 9px; background: linear-gradient(145deg, #0e1d30, #091523); transition: transform .2s, border-color .2s, background .2s; }
.topic-card:hover { transform: translateY(-4px); border-color: #2388ac; background: var(--panel-hover); }
.topic-icon { display: grid; place-items: center; width: 39px; height: 39px; margin-bottom: 18px; border: 1px solid #1c6b86; border-radius: 9px; color: var(--cyan); background: #0a2a3c; font-size: 23px; }
.topic-card h3 { margin-bottom: 8px; font-size: 15px; }.topic-card p { min-height: 62px; margin-bottom: 17px; color: var(--muted); font-size: 12px; }.card-link, .text-link { color: var(--cyan); font: 11px 'DM Mono', monospace; }
.feature-band { padding-block: 36px; border-block: 1px solid #17344a; background: linear-gradient(100deg, #0b1e30, #0b2435 50%, #0a1727); }
.feature-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }.feature-inner h2 { margin-bottom: 9px; }.muted { color: var(--muted); font-size: 13px; }.feature-inner p:last-child { margin-bottom: 0; }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.resource-card { overflow: hidden; border: 1px solid #203750; border-radius: 10px; background: #0a1726; }
.resource-art { height: 145px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; position: relative; overflow: hidden; background-image: linear-gradient(135deg, #0b2c43, #07111f); }
.resource-art:before { content: ""; position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(#24516c 1px, transparent 1px), linear-gradient(90deg, #24516c 1px, transparent 1px); background-size: 20px 20px; }
.resource-art span { z-index: 1; color: var(--cyan); font-size: 48px; text-shadow: 0 0 25px #22d3ee70; }.resource-art small { z-index: 1; color: #87b6d0; font: 9px 'DM Mono', monospace; letter-spacing: .15em; }.art-ai { background-image: radial-gradient(circle at center, #123d65, #07111f 75%); }.art-network { background-image: radial-gradient(circle at center, #123c3d, #07111f 75%); }
.resource-content { padding: 20px; }.pill { display: inline-block; padding: 3px 7px; border: 1px solid #1d657e; border-radius: 3px; color: var(--cyan); font: 8px 'DM Mono', monospace; letter-spacing: .06em; }.resource-content h3 { margin: 12px 0 7px; font-size: 15px; }.resource-content p { min-height: 42px; margin-bottom: 14px; color: var(--muted); font-size: 12px; }.resource-content a { color: var(--cyan); font-size: 11px; font-weight: 700; }
.newsletter { display: flex; align-items: center; gap: 20px; margin-bottom: 70px; padding: 27px; border: 1px solid #21445b; border-radius: 12px; background: linear-gradient(105deg, #0d2235, #0a1827); }.newsletter-mark { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border: 1px solid #1d6e8a; border-radius: 10px; color: var(--cyan); font-size: 25px; }.newsletter > div:nth-child(2) { flex: 1; }.newsletter h2 { margin-bottom: 6px; font-size: 20px; }.newsletter p:last-child { margin-bottom: 0; }
.site-footer { border-top: 1px solid #1b3148; background: #050d17; }.footer-main { display: flex; justify-content: space-between; gap: 35px; padding-block: 34px; }.footer-main p { margin: 8px 0 0; color: #8299b1; font-size: 11px; }.footer-links { display: flex; flex-wrap: wrap; gap: 14px 22px; align-content: center; }.footer-links a, .footer-bottom { color: #8299b1; font-size: 10px; }.footer-links a:hover { color: var(--cyan); }.footer-bottom { display: flex; justify-content: space-between; gap: 18px; padding-block: 16px; border-top: 1px solid #142538; }
.page-hero { padding: 70px 0 45px; border-bottom: 1px solid #193249; background: radial-gradient(ellipse at 80% 20%, #0d395040, transparent 50%); }.page-hero h1 { max-width: 800px; font-size: clamp(35px, 5vw, 54px); }.page-hero p:last-child { max-width: 720px; margin-bottom: 0; color: var(--muted); font-size: 15px; }
.content-section { padding-block: 45px 80px; }.content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }.content-card { padding: 22px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }.content-card .category { color: var(--cyan); font: 9px 'DM Mono', monospace; letter-spacing: .1em; }.content-card h2, .content-card h3 { margin: 10px 0; font-size: 17px; line-height: 1.4; }.content-card p { color: var(--muted); font-size: 12px; }.content-card a { color: var(--cyan); font-size: 11px; font-weight: 700; }.notice { padding: 15px 17px; border-left: 3px solid var(--cyan); background: #0b2130; color: #b9cde0; font-size: 12px; }
@media (max-width: 900px) { .site-header { gap: 15px; }.nav { gap: 12px; }.nav a { font-size: 11px; }.hero { gap: 24px; }.topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .container { width: min(100% - 32px, var(--max)); }.site-header { height: 66px; padding-inline: 16px; }.menu-toggle { display: block; }.nav { display: none; position: absolute; top: 65px; left: 0; right: 0; padding: 14px 18px 20px; flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); background: #07111f; }.nav.nav-open { display: flex; }.nav a { padding: 11px 3px; font-size: 13px; border-bottom: 1px solid #152b40; }
  .hero { grid-template-columns: 1fr; padding-block: 52px 55px; }.hero-visual { min-height: 320px; }.section { padding-block: 32px 55px; }.section-heading { display: block; }.section-intro { margin-top: 14px; }.topic-grid, .resource-grid, .content-grid { grid-template-columns: 1fr; }.topic-card p, .resource-content p { min-height: 0; }.feature-inner { align-items: flex-start; flex-direction: column; }.newsletter { align-items: flex-start; flex-wrap: wrap; margin-bottom: 48px; padding: 21px; }.newsletter > div:nth-child(2) { min-width: calc(100% - 70px); }.footer-main, .footer-bottom { flex-direction: column; }.footer-links { gap: 12px 18px; }.footer-bottom { gap: 8px; }.page-hero { padding: 50px 0 35px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }