/* Variables */
:root {
  --black: #020308;
  --navy: #050817;
  --panel: rgba(8, 10, 27, .78);
  --white: #f6f2ff;
  --muted: #aaa9bb;
  --purple: #b337ff;
  --magenta: #ee31fa;
  --blue: #18a8ff;
  --cyan: #53dcff;
  --line: rgba(116, 94, 213, .35);
  --gradient: linear-gradient(100deg, var(--magenta), #744aff 46%, var(--blue));
  --glow: 0 0 28px rgba(140, 45, 255, .32);
  --max-width: 1440px;
  --section-pad: clamp(72px, 9vw, 128px);
}

/* Base styles */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; color: var(--white); background: var(--black); font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.55; overflow-x: hidden; }
body.menu-open, body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
p { color: var(--muted); margin: 0 0 1.1em; }
h1, h2, h3, .logo, .section-label, .button { font-family: "Chakra Petch", sans-serif; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: .015em; line-height: 1.03; }
h1 span, h2 span, .gradient-text { color: transparent; background: var(--gradient); -webkit-background-clip: text; background-clip: text; }
.section-shell { position: relative; width: min(100%, var(--max-width)); margin: 0 auto; padding-left: clamp(24px, 4.5vw, 72px); padding-right: clamp(24px, 4.5vw, 72px); }
.section-label { margin: 0 0 12px; color: var(--blue); text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.section-label.align-left { text-align: left; color: #d65bff; }
.accent-rule { width: 70px; height: 2px; margin: 24px 0 28px; background: var(--gradient); box-shadow: 0 0 16px rgba(128, 69, 255, .6); }
#ambient-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: .55; }
.page-noise { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Navigation */
.site-header { width: min(100%, var(--max-width)); height: 82px; margin: 0 auto; padding: 0 clamp(24px, 4.5vw, 72px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; z-index: 50; }
.logo { font-weight: 600; letter-spacing: .22em; font-size: 16px; white-space: nowrap; }
.logo span { color: var(--cyan); }
.main-nav { display: flex; gap: clamp(24px, 3vw, 52px); }
.main-nav a { position: relative; color: #d7d4df; font-family: "Chakra Petch", sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: var(--gradient); transition: right .25s ease; }
.main-nav a:hover::after { right: 0; }
.nav-cta { justify-self: end; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 28px; position: relative; border: 1px solid transparent; border-radius: 3px; color: #fff; background: linear-gradient(var(--black), var(--black)) padding-box, var(--gradient) border-box; box-shadow: var(--glow); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 0 35px rgba(98, 91, 255, .55); }
.button-small { min-height: 40px; padding: 0 20px; font-size: 10px; }
.menu-toggle { display: none; }

/* Hero */
.hero { min-height: calc(100vh - 82px); display: grid; grid-template-columns: minmax(360px, .9fr) minmax(540px, 1.25fr); align-items: center; padding-top: 50px; padding-bottom: 90px; }
.hero-copy { position: relative; z-index: 3; padding: 25px 0; }
.hero .eyebrow { color: var(--cyan); font-family: "Chakra Petch", sans-serif; font-size: 10px; letter-spacing: .12em; }
.hero h1 { font-size: clamp(50px, 5.1vw, 78px); text-shadow: 0 0 35px rgba(255,255,255,.08); }
.hero-copy > p:not(.eyebrow) { max-width: 560px; }
.hero-actions { display: flex; align-items: center; gap: 40px; margin-top: 34px; }
.scroll-link { color: #bdb8ca; font-family: "Chakra Petch", sans-serif; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.scroll-link span { margin-left: 8px; color: var(--purple); }
.hero-city-visual { position: absolute; top: 0; bottom: 0; left: 40%; right: 0; overflow: hidden; background-image: url("assets/CyberNeonCityLandscape.png"); background-size: cover; background-position: center; mask-image: linear-gradient(to right, transparent 0, #000 18%); }
.hero-city-visual::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(2,3,8,.92), transparent 29%), linear-gradient(0deg, rgba(2,3,8,.45), transparent 42%); pointer-events: none; }
.hero-city-visual::after { content: ""; position: absolute; z-index: 2; inset: auto 0 0; height: 16%; background: linear-gradient(to top, var(--black), transparent); pointer-events: none; }
.hero-city-visual > * { display: none; }
.orb { position: absolute; width: min(41vw, 560px); aspect-ratio: 1; border: 3px solid #704aff; border-radius: 50%; top: 6%; left: 34%; box-shadow: 0 0 15px var(--blue), inset 0 0 35px rgba(100, 28, 255, .3), 0 0 90px rgba(26, 55, 255, .25); animation: orbPulse 5s ease-in-out infinite; }
.cyber-neon-emblem { width: 118px; height: 118px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); border: 2px solid var(--magenta); box-shadow: 0 0 18px var(--purple), inset 0 0 12px rgba(173, 45, 255, .35); }
.cyber-neon-emblem::before, .cyber-neon-emblem::after, .cyber-neon-emblem i { content: ""; position: absolute; }
.cyber-neon-emblem::before { inset: 17%; border: 1px solid var(--blue); }
.cyber-neon-emblem::after { inset: 0; transform: rotate(45deg) scale(.72); border: 1px solid #cf73ff; }
.cyber-neon-emblem i:first-child { width: 141%; height: 1px; top: 50%; left: -20%; background: #7e6bff; }
.cyber-neon-emblem i:last-child { height: 141%; width: 1px; left: 50%; top: -20%; background: #7e6bff; }
.skyline { position: absolute; inset: 20% 0 14%; }
.skyline i { position: absolute; bottom: 0; left: var(--x); width: clamp(24px, 4vw, 62px); height: var(--h); border: 1px solid rgba(60, 98, 255, .35); background: repeating-linear-gradient(to bottom, transparent 0 13px, rgba(35, 148, 255, .65) 14px 16px), linear-gradient(100deg, #050817, #101237); box-shadow: 0 0 22px rgba(30, 61, 220, .22); clip-path: polygon(20% 7%, 42% 7%, 50% 0, 58% 7%, 85% 7%, 100% 100%, 0 100%); }
.skyline i:nth-child(3n) { background: repeating-linear-gradient(to bottom, transparent 0 18px, rgba(221, 36, 255, .65) 19px 22px), linear-gradient(100deg, #080719, #1b0c39); }
.citizen-silhouette { position: absolute; z-index: 4; bottom: 9%; left: 59%; width: 62px; height: 210px; background: linear-gradient(90deg, #020209, #070918 55%, #000); clip-path: polygon(34% 0, 64% 0, 71% 9%, 69% 19%, 84% 33%, 75% 65%, 68% 65%, 70% 100%, 53% 100%, 48% 65%, 42% 100%, 25% 100%, 31% 64%, 20% 61%, 15% 33%, 31% 18%, 28% 9%); filter: drop-shadow(0 0 13px rgba(53, 97, 255, .75)); }
.citizen-silhouette i { position: absolute; width: 18px; height: 18px; left: 22px; top: 73px; border: 1px solid var(--cyan); transform: rotate(45deg); box-shadow: 0 0 12px var(--blue); }

/* Sections */
.manifesto { padding-top: 0; padding-bottom: var(--section-pad); }
.tech-frame { padding: 54px clamp(28px, 7vw, 110px); text-align: center; background: linear-gradient(90deg, rgba(5,8,20,.7), rgba(7,6,17,.28), rgba(5,8,20,.7)); border-top: 1px solid rgba(59, 95, 196, .22); border-bottom: 1px solid rgba(59, 95, 196, .22); clip-path: polygon(4% 0, 96% 0, 100% 16%, 100% 84%, 96% 100%, 4% 100%, 0 84%, 0 16%); }
.tech-frame h2 { font-size: clamp(26px, 3vw, 40px); }
.manifesto-copy { max-width: 980px; margin: 28px auto 0; }
.manifesto-copy strong { display: block; margin: 22px 0; color: #bf5cff; font-family: "Chakra Petch", sans-serif; font-weight: 500; letter-spacing: .04em; }
.split-section { min-height: 610px; display: grid; grid-template-columns: minmax(300px, .75fr) minmax(500px, 1.35fr); align-items: stretch; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.section-copy { padding: clamp(60px, 8vw, 115px) clamp(26px, 4vw, 70px) clamp(60px, 8vw, 115px) 0; align-self: center; }
.section-copy h2, .join h2 { font-size: clamp(34px, 3.7vw, 54px); }
.section-copy p { max-width: 470px; }
.city-visual, .citizen-group-visual { min-height: 580px; position: relative; overflow: hidden; background-color: #070820; background-size: cover; background-position: center; }
.city-visual { background-image: url("assets/CyberNeonCity.png"); }
.city-visual::after, .citizen-group-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--black), transparent 27%), linear-gradient(0deg, rgba(1,2,8,.58), transparent 38%); pointer-events: none; }
.city-visual > *, .citizen-group-visual > * { display: none; }
.vanishing-glow { position: absolute; width: 25%; height: 45%; left: 38%; bottom: 5%; background: #bb2cff; filter: blur(60px); opacity: .65; }
.city-grid { position: absolute; inset: 45% -20% -20%; background: repeating-linear-gradient(90deg, rgba(44, 134, 255, .5) 0 2px, transparent 2px 80px), repeating-linear-gradient(0deg, rgba(158, 38, 255, .3) 0 2px, transparent 2px 70px); transform: perspective(300px) rotateX(63deg); }
.building-field { position: absolute; inset: 5% 50% 20% 2%; background: repeating-linear-gradient(90deg, #080b22 0 24px, transparent 25px 38px), repeating-linear-gradient(0deg, transparent 0 22px, rgba(55, 97, 255, .7) 23px 25px); clip-path: polygon(0 20%, 25% 0, 32% 18%, 46% 10%, 55% 34%, 68% 12%, 77% 28%, 100% 5%, 100% 100%, 0 100%); filter: drop-shadow(0 0 8px #6725ff); }
.building-field.right { left: 50%; right: 2%; transform: scaleX(-1); }
.distant-citizen { position: absolute; width: 30px; height: 112px; left: 50%; bottom: 14%; transform: translateX(-50%); background: #000; clip-path: polygon(37% 0, 64% 0, 75% 15%, 67% 30%, 85% 50%, 70% 73%, 67% 100%, 51% 100%, 48% 70%, 41% 100%, 25% 100%, 31% 70%, 17% 53%, 31% 28%, 26% 14%); z-index: 2; box-shadow: 0 0 20px #b332ff; }

/* Cards */
.pillars { padding-top: 42px; padding-bottom: var(--section-pad); }
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.neon-card { min-height: 250px; padding: 32px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(145deg, rgba(15,12,35,.72), rgba(3,8,19,.58)); transition: border-color .25s, transform .25s, background .25s; }
.neon-card:hover { transform: translateY(-5px); border-color: rgba(62,160,255,.65); background: rgba(10,12,35,.9); }
.neon-card h3, .benefit h3 { font-size: 17px; text-transform: uppercase; margin: 20px 0 8px; }
.neon-card p { max-width: 230px; margin: 0; font-size: 13px; }
.line-icon { position: relative; width: 58px; height: 58px; color: #a64cff; filter: drop-shadow(0 0 8px currentColor); }
.diamond-icon { border: 2px solid currentColor; transform: rotate(45deg) scale(.7); }
.diamond-icon::before, .diamond-icon::after, .diamond-icon i { content: ""; position: absolute; inset: 13px; border: 1px solid currentColor; transform: rotate(45deg); }
.diamond-icon::after { inset: -2px 12px; }
.cube-icon { border: 2px solid var(--blue); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.cube-icon::before, .cube-icon::after, .cube-icon i { content: ""; position: absolute; background: var(--blue); }
.cube-icon::before { width: 2px; height: 50%; top: 50%; left: 50%; }
.cube-icon::after { width: 60%; height: 2px; top: 37%; left: -2%; transform: rotate(28deg); }
.orbit-icon { border: 2px solid #bd58ff; border-radius: 50%; box-shadow: inset 0 0 0 8px rgba(185, 67, 255, .15); }
.orbit-icon::before { content: ""; position: absolute; inset: 12px; border: 2px solid currentColor; border-radius: 50%; }
.orbit-icon::after { content: ""; position: absolute; width: 70px; height: 2px; left: -6px; top: 28px; background: currentColor; }
.people-icon { color: var(--blue); }
.people-icon::before, .people-icon::after, .people-icon i, .people-icon b { content: ""; position: absolute; border: 2px solid currentColor; border-radius: 50%; }
.people-icon::before { width: 18px; height: 18px; top: 2px; left: 18px; }
.people-icon::after { width: 30px; height: 24px; bottom: 5px; left: 12px; border-radius: 50% 50% 4px 4px; border-bottom: 0; }
.people-icon i { width: 14px; height: 14px; top: 9px; left: 2px; }.people-icon b { width: 14px; height: 14px; top: 9px; right: 2px; }

.citizens { grid-template-columns: minmax(320px, .8fr) minmax(520px, 1.4fr); }
.citizen-group-visual { background-image: url("assets/CyberNeonGroup.png"); background-position: center 42%; }
.portal-glow { position: absolute; width: 270px; height: 270px; left: 50%; top: 8%; transform: translateX(-50%); border-radius: 50%; background: rgba(160, 45, 255, .17); box-shadow: 0 0 80px #7e20ff, inset 0 0 55px #30168a; }
.cyber-neon-emblem.small { width: 100px; height: 100px; }

.status { padding-top: 48px; padding-bottom: 38px; text-align: center; border-bottom: 1px solid rgba(94,76,180,.22); }
.status-heading h2 { font-size: clamp(35px, 4vw, 58px); }
.status-heading > p:last-child { margin-top: 18px; }
.benefit-grid { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 44px; }
.benefit { min-height: 190px; padding: 0 20px; border-right: 1px solid rgba(91,66,158,.22); }
.benefit:last-child { border: 0; }
.benefit-icon { height: 52px; color: #c457ff; display: grid; place-items: center; }
.benefit-icon svg { width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(168,72,255,.75)); transition: color .25s, filter .25s, transform .25s; }
.benefit:hover .benefit-icon svg { color: #63b7ff; filter: drop-shadow(0 0 9px rgba(72,156,255,.85)); transform: translateY(-2px); }
.benefit h3 { margin-top: 16px; font-size: 13px; }
.benefit p { font-size: 13px; }
.beginning { font-size: 12px; }

/* Form */
.join { display: grid; grid-template-columns: .9fr 1.2fr; gap: clamp(50px, 8vw, 140px); padding-top: 70px; padding-bottom: 70px; background: radial-gradient(circle at 75% 10%, rgba(64,33,151,.16), transparent 35%); }
.join-copy { align-self: center; }
.signup-form { position: relative; padding: 8px 0; }
.signup-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.input-wrap { height: 54px; display: flex; align-items: center; margin-top: 8px; border: 1px solid rgba(116,91,199,.52); border-radius: 5px; background: rgba(7,8,21,.75); transition: border-color .2s, box-shadow .2s; }
.input-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 18px rgba(48,113,255,.18); }
.input-wrap span { padding: 0 14px; color: #a9a3c5; }
.input-wrap input { width: 100%; height: 100%; padding: 0 16px 0 0; color: #fff; border: 0; outline: 0; background: transparent; }
.input-wrap input::placeholder { color: #9a96ac; }
.field-error { min-height: 18px; margin: 4px 0 0; color: #ff65aa; font-size: 12px; }
.input-wrap.invalid { border-color: #ff4f96; }
.submit-button { width: 100%; border: 0; background: var(--gradient); box-shadow: 0 0 28px rgba(90,56,255,.4); cursor: pointer; }
.submit-button:disabled { cursor: wait; opacity: .7; transform: none; }
.reassurance { margin: 14px 0 0; color: #d4d0df; text-align: center; font-size: 12px; }
.privacy { margin: 5px 0 0; text-align: center; font-size: 11px; }

/* Signup modal */
.signup-modal[hidden] { display: none; }
.signup-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 28px; overflow-y: auto; background: rgba(1,2,8,.86); backdrop-filter: blur(16px); animation: modalFade .25s ease both; }
.signup-modal-panel { width: min(100%, 970px); max-height: 94vh; position: relative; overflow-x: hidden; overflow-y: auto; color: var(--white); border: 1px solid transparent; border-radius: 17px; outline: 0; background: linear-gradient(#02040d,#02040d) padding-box, var(--gradient) border-box; box-shadow: 0 0 90px rgba(70,28,180,.38), inset 0 0 55px rgba(24,31,84,.18); text-align: center; scrollbar-width: thin; scrollbar-color: rgba(120,70,220,.5) transparent; animation: modalRise .35s ease both; }
.modal-x { width: 48px; height: 48px; position: absolute; z-index: 5; top: 27px; right: 30px; border: 0; background: transparent; cursor: pointer; }
.modal-x[hidden] { display: none; }
.modal-x span { width: 30px; height: 2px; position: absolute; left: 9px; top: 23px; background: var(--purple); box-shadow: 0 0 10px rgba(190,55,255,.8); }
.modal-x span:first-child { transform: rotate(45deg); }.modal-x span:last-child { transform: rotate(-45deg); }
.modal-visual { height: clamp(300px, 43vh, 455px); position: relative; background-image: linear-gradient(to bottom, rgba(2,3,10,.08), transparent 55%, #02040d 100%), url("assets/CyberNeonCityLandscape.png"); background-size: cover; background-position: center 35%; }
.modal-visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 20%, rgba(2,4,13,.2) 62%, rgba(2,4,13,.75) 100%); pointer-events: none; }
.modal-state-icon { width: 110px; height: 110px; position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(2,4,14,.72); box-shadow: 0 0 45px rgba(121,42,255,.55); }
.modal-spinner { width: 72px; height: 72px; border: 3px solid rgba(115,93,212,.24); border-top-color: var(--cyan); border-right-color: var(--purple); border-radius: 50%; box-shadow: 0 0 20px rgba(75,140,255,.35); animation: modalSpin 1s linear infinite; }
.modal-result-icon { display: none; width: 72px; height: 72px; place-items: center; color: #ff65aa; border: 1px solid currentColor; transform: rotate(45deg); font-family: "Chakra Petch", sans-serif; font-size: 40px; text-shadow: 0 0 18px currentColor; }
.modal-result-icon::before { transform: rotate(-45deg); }
.modal-content { padding: 0 clamp(30px,6vw,90px) 54px; }
.modal-kicker { display: flex; align-items: center; gap: 30px; margin: 0 0 25px; color: transparent; background: var(--gradient); -webkit-background-clip: text; background-clip: text; font-family: "Chakra Petch", sans-serif; font-size: 20px; letter-spacing: .12em; text-transform: uppercase; }
.modal-kicker::before, .modal-kicker::after { content: ""; height: 1px; flex: 1; background: var(--gradient); opacity: .75; }
.signup-modal h2 { margin: 0; font-size: clamp(34px,4.2vw,56px); line-height: 1.08; }
.signup-modal h2 span { color: transparent; background: var(--gradient); -webkit-background-clip: text; background-clip: text; }
.modal-message { max-width: 650px; min-height: 58px; margin: 30px auto 0; color: #c9c5d1; font-size: clamp(15px,1.45vw,19px); line-height: 1.7; }
.modal-divider { display: flex; align-items: center; gap: 22px; margin: 32px auto; }
.modal-divider::before, .modal-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(128,76,219,.65)); }
.modal-divider::after { transform: scaleX(-1); }
.modal-divider i { width: 23px; height: 23px; border: 2px solid var(--purple); transform: rotate(45deg); box-shadow: 0 0 15px rgba(177,55,255,.65); }
.modal-close { width: min(100%,470px); min-height: 66px; margin: 0 auto; font-size: 17px; cursor: pointer; }
.modal-close[hidden] { display: none; }
.signup-modal[data-state="success"] .modal-state-icon { display: none; }
.signup-modal[data-state="error"] .modal-spinner { display: none; }
.signup-modal[data-state="error"] .modal-result-icon { display: grid; }
.signup-modal[data-state="error"] .modal-result-icon::before { content: "!"; }
.signup-modal[data-state="error"] .modal-kicker { color: #ff65aa; background: none; -webkit-text-fill-color: initial; }

/* Footer */
.site-footer { min-height: 150px; display: grid; grid-template-columns: 1.2fr 1fr .8fr auto; align-items: center; gap: 35px; padding-top: 35px; padding-bottom: 35px; border-top: 1px solid rgba(90,65,155,.28); }
.site-footer p { margin: 8px 0 0; font-size: 11px; }
.footer-statement, .copyright { padding-left: 38px; border-left: 1px solid rgba(124,111,167,.18); }
.socials { display: flex; gap: 12px; }
.socials a { width: 32px; height: 32px; display: grid; place-items: center; color: #aaa5bd; border: 1px solid rgba(136,123,180,.35); border-radius: 50%; transition: color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.socials a:hover { color: var(--cyan); border-color: rgba(83,220,255,.7); box-shadow: 0 0 16px rgba(83,220,255,.28); transform: translateY(-2px); }
.socials svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.socials svg.social-fill { fill: currentColor; stroke: none; }
.socials .social-dot { fill: currentColor; stroke: none; }

/* Animations */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes orbPulse { 0%,100% { filter: brightness(.9); } 50% { filter: brightness(1.25); } }
@keyframes modalSpin { to { transform: rotate(360deg); } }
@keyframes modalFade { from { opacity: 0; } }
@keyframes modalRise { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }

/* Responsive breakpoints */
@media (max-width: 1050px) {
  .hero { grid-template-columns: .9fr 1.1fr; }.hero-city-visual { left: 32%; }.hero-copy { max-width: 520px; }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .split-section, .citizens { grid-template-columns: .75fr 1.15fr; }
  .benefit-grid { grid-template-columns: repeat(5, 1fr); }.benefit { padding: 0 10px; }
}
@media (max-width: 820px) {
  .site-header { grid-template-columns: 1fr auto; }.nav-cta { display: none; }
  .menu-toggle { width: 42px; height: 42px; display: grid; place-content: center; gap: 7px; justify-self: end; border: 1px solid var(--line); background: rgba(4,6,17,.82); cursor: pointer; }
  .menu-toggle span { display: block; width: 20px; height: 1px; background: #fff; transition: transform .25s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .main-nav { position: fixed; top: 82px; left: 0; right: 0; height: calc(100vh - 82px); padding: 55px 30px; display: flex; flex-direction: column; align-items: center; gap: 35px; background: rgba(2,3,10,.97); backdrop-filter: blur(18px); transform: translateX(100%); transition: transform .3s ease; }
  .main-nav.open { transform: none; }.main-nav a { font-size: 18px; }
  .hero { min-height: 900px; display: block; padding-top: 70px; }.hero-copy { max-width: 600px; }.hero-city-visual { top: 340px; left: 0; height: 560px; background-position: center; mask-image: linear-gradient(to bottom, transparent, #000 25%); }.hero-city-visual::before { background: linear-gradient(180deg, rgba(2,3,8,.72), transparent 29%), linear-gradient(0deg, rgba(2,3,8,.35), transparent 45%); }.orb { width: 430px; left: 42%; top: 7%; }
  .split-section, .citizens { display: flex; flex-direction: column; }.section-copy { padding-right: 0; }.city-visual, .citizen-group-visual { width: calc(100% + 48px); margin-left: -24px; min-height: 500px; }.city-visual::after, .citizen-group-visual::after { background: linear-gradient(180deg, var(--black), transparent 18%), linear-gradient(0deg, rgba(1,2,8,.5), transparent 35%); }
  .benefit-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 0; }.benefit:nth-child(3) { border: 0; }
  .join { grid-template-columns: 1fr; gap: 45px; }.signup-form { max-width: 620px; width: 100%; }
  .site-footer { grid-template-columns: repeat(2, 1fr); }.footer-statement, .copyright { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  body { font-size: 14px; }.site-header { height: 70px; }.main-nav { top: 70px; height: calc(100vh - 70px); }
  .hero { min-height: 850px; padding-top: 48px; }.hero h1 { font-size: clamp(41px, 12vw, 58px); }.hero .eyebrow { display: none; }.hero-actions { align-items: stretch; flex-direction: column; gap: 20px; }.hero-actions .button { width: 100%; }.scroll-link { text-align: center; }.hero-city-visual { top: 430px; height: 420px; }.orb { width: 310px; left: 29%; }.cyber-neon-emblem { width: 76px; height: 76px; }.citizen-silhouette { left: 54%; height: 150px; width: 47px; }.citizen-silhouette i { left: 17px; top: 53px; width: 14px; height: 14px; }
  .tech-frame { padding: 44px 22px; clip-path: polygon(6% 0,94% 0,100% 5%,100% 95%,94% 100%,6% 100%,0 95%,0 5%); }.tech-frame h2 br { display: none; }.manifesto-copy br { display: none; }
  .pillar-grid { grid-template-columns: 1fr; }.neon-card { min-height: 220px; }
  .city-visual, .citizen-group-visual { min-height: 410px; }.city-visual { background-position: center; }.citizen-group-visual { background-position: center; }.portal-glow { width: 210px; height: 210px; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }.benefit:nth-child(3) { border-right: 1px solid rgba(91,66,158,.22); }.benefit:nth-child(even) { border: 0; }.benefit:last-child { grid-column: 1 / -1; border: 0; }
  .join { padding-top: 60px; padding-bottom: 60px; }.signup-modal { padding: 12px; }.signup-modal-panel { max-height: 96vh; border-radius: 10px; }.modal-x { top: 12px; right: 12px; }.modal-visual { height: 270px; background-position: center 38%; }.modal-content { padding: 0 22px 32px; }.modal-kicker { gap: 14px; margin-bottom: 18px; font-size: 13px; }.signup-modal h2 { font-size: clamp(27px,8.5vw,38px); }.modal-message { margin-top: 20px; font-size: 14px; line-height: 1.55; }.modal-divider { margin: 24px auto; }.modal-close { min-height: 56px; font-size: 14px; }.site-footer { grid-template-columns: 1fr; gap: 22px; }.socials { margin-top: 5px; }
}