:root {
  --black: #050505;
  --paper: #f4f1e8;
  --muted: #a3a19c;
  --line: rgba(244, 241, 232, .22);
  --mono: "DM Mono", monospace;
  --display: "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--black); color: var(--paper); font-family: var(--display); }
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

.intro-loader { position: fixed; z-index: 9999; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(75% 60% at 50% 47%, #1a3943 0%, #102932 48%, #071c24 100%); opacity: 1; visibility: visible; transition: opacity .75s cubic-bezier(.55,0,.2,1), visibility .75s; }
.intro-loader::before { content: ""; position: absolute; inset: 0; opacity: .1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.intro-loader__halo { position: absolute; width: min(62vw, 760px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(107,184,185,.11), transparent 66%); filter: blur(24px); animation: loader-halo 2.3s ease-in-out infinite; }
.intro-loader__content { position: relative; width: min(310px, 74vw); text-align: center; transform: translateY(-4px); }
.intro-loader__logo { color: #f4f1e8; font-family: var(--display); font-size: clamp(40px, 5vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -.085em; opacity: 0; animation: loader-reveal .7s .12s cubic-bezier(.2,.8,.2,1) forwards; }
.intro-loader__logo span { display: inline-block; margin-left: .07em; color: #dbb057; font-size: .62em; vertical-align: .12em; letter-spacing: 0; }
.intro-loader__content p { margin: 29px 0 30px; color: #8acbc1; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .24em; opacity: 0; animation: loader-reveal .7s .36s ease forwards; }
.intro-loader__content p i { color: #dbb057; font-style: normal; }
.intro-loader__track { position: relative; width: 76%; height: 1px; margin: 0 auto; overflow: hidden; background: rgba(138,203,193,.16); }
.intro-loader__track b { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, transparent, #8acbc1 34%, #dbb057 78%, transparent); transform: translateX(-102%); animation: loader-progress 1.75s .25s cubic-bezier(.65,0,.25,1) forwards; }
.intro-loader.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-loader.is-leaving .intro-loader__content { transform: translateY(-18px) scale(.98); opacity: 0; transition: transform .65s cubic-bezier(.4,0,.2,1), opacity .45s; }
@keyframes loader-reveal { from { opacity: 0; transform: translateY(13px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes loader-progress { 0% { transform: translateX(-102%); } 72% { transform: translateX(-12%); } 100% { transform: translateX(102%); } }
@keyframes loader-halo { 0%,100% { opacity: .6; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }

.hero { min-height: 100svh; height: 900px; max-height: 100svh; overflow: hidden; position: relative; isolation: isolate; background: #01080d; }
.hero::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(1,10,15,.82) 0%, rgba(1,9,14,.14) 44%, transparent 70%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.hero__glow { position: absolute; width: 35vw; height: 35vw; filter: blur(80px); border-radius: 50%; opacity: .16; pointer-events: none; }
.hero__glow--left { background: #23656c; left: -15vw; bottom: -20vw; }
.hero__glow--right { background: #d4a848; right: -14vw; top: -12vw; opacity: .07; }
.topbar { position: absolute; z-index: 5; top: 0; width: 100%; display: flex; justify-content: flex-end; align-items: center; gap: 28px; padding: 32px 4vw; font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.brand { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -.07em; }
.brand__dot { color: #ff591f; }
.manifesto { margin: 0; color: var(--paper); }
.manifesto span { color: #ff591f; padding: 0 7px; }
.theme-mark { position: relative; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.theme-mark span { display: block; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(90deg, #fff 0 50%, transparent 50% 100%); transform: rotate(0deg); transition: transform .45s ease; }
.theme-mark:hover span { transform: rotate(180deg); }
.menu-toggle { justify-self: end; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; gap: 15px; padding: 8px 0; text-transform: uppercase; font-family: var(--mono); font-size: 11px; }
.menu-toggle i, .menu-toggle i::after { display: block; width: 30px; height: 2px; background: var(--paper); content: ""; transition: .3s; }
.menu-toggle i::after { transform: translateY(6px); }
.menu-toggle i::after { background: #dbb057; width: 20px; margin-left: 10px; }
.menu-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] i::after { transform: rotate(-90deg); }
.site-menu { position: absolute; z-index: 4; top: 0; right: 0; width: min(380px, 100%); height: 100%; padding: 150px 4vw; background: #171513; display: flex; flex-direction: column; gap: 24px; transform: translateX(100%); transition: transform .5s cubic-bezier(.77,0,.18,1); font-size: clamp(22px, 3vw, 38px); }
.site-menu.is-open { transform: translateX(0); }
.site-menu a, .site-menu > span { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.site-menu > span { color: var(--muted); }
.hero__content { position: absolute; z-index: 2; left: 44px; bottom: 58px; }
.hero__eyebrow { display: flex; align-items: center; gap: 11px; width: max-content; margin: 0 0 25px 2px; color: rgba(244,241,232,.82); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .18em; text-shadow: 0 0 18px rgba(255,255,255,.08); }
.hero__eyebrow b { display: inline-grid; place-items: center; min-height: 25px; padding: 0 9px; border: 1px solid rgba(255,89,31,.5); border-radius: 999px; color: #ff7a45; background: rgba(255,89,31,.075); box-shadow: inset 0 0 12px rgba(255,89,31,.05), 0 0 18px rgba(255,89,31,.06); font: inherit; letter-spacing: .11em; }
.eyebrow-line { position: relative; width: 35px; height: 1px; background: linear-gradient(90deg, #ff591f, rgba(255,89,31,.15)); box-shadow: 0 0 8px rgba(255,89,31,.42); }
.eyebrow-line::before { content: ""; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #ff591f; box-shadow: 0 0 9px rgba(255,89,31,.72); }
h1 { margin: 0; font-size: clamp(88px, 10vw, 154px); line-height: .82; letter-spacing: -.105em; font-weight: 600; position: relative; }
.title-mark { color: #ff591f; font-size: .32em; vertical-align: top; letter-spacing: 0; margin-left: 10px; }
.hero__subtitle { margin: 28px 0 0 0; font-family: var(--display); font-size: clamp(22px, 2.1vw, 34px); font-weight: 650; line-height: 1.04; letter-spacing: -.03em; color: #f4f1e8; }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; margin: 24px 0 0 0; font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: var(--muted); }
.scroll-cue__arrow { color: #ff591f; font-size: 20px; animation: float 1.6s ease-in-out infinite; }
.webgl-scene { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.webgl-scene canvas { display: block; width: 100%; height: 100%; }
body.high-contrast .webgl-scene canvas { filter: contrast(1.17) brightness(1.08); }
.hero__footer { display: none; }
.hero__footer-status { display: flex; align-items: center; gap: 8px; color: var(--paper); }
.hero__footer-status b { width: 6px; height: 6px; border-radius: 50%; background: #ff591f; box-shadow: 0 0 10px #ff591f; }
.whatsapp-float { position: fixed; z-index: 20; right: 28px; bottom: 72px; display: flex; align-items: center; gap: 13px; min-height: 64px; padding: 7px 8px 7px 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.055) 48%, rgba(255,255,255,.11)); box-shadow: 0 18px 45px rgba(0,12,18,.34), 0 3px 9px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.52), inset 0 -1px 0 rgba(255,255,255,.09), inset 1px 0 0 rgba(255,255,255,.15); backdrop-filter: blur(22px) saturate(180%) brightness(1.08); -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.08); transform: translateZ(0); transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .45s ease; }
.whatsapp-float::before { content: ""; position: absolute; width: 55%; height: 190%; top: -65%; left: -12%; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.34) 0%, rgba(255,255,255,.1) 38%, transparent 70%); filter: blur(3px); transform: rotate(-24deg); opacity: .7; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.whatsapp-float::after { content: ""; position: absolute; inset: 1px 8px auto; height: 42%; pointer-events: none; border-radius: 999px 999px 50% 50%; background: linear-gradient(180deg, rgba(255,255,255,.2), transparent); opacity: .62; }
.whatsapp-float:hover { transform: translateY(-5px) scale(1.025); border-color: rgba(255,255,255,.42); box-shadow: 0 24px 60px rgba(0,12,18,.42), 0 5px 13px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.66), inset 0 -1px 0 rgba(255,255,255,.13), 0 0 28px rgba(37,211,102,.12); }
.whatsapp-float:hover::before { transform: translateX(90%) rotate(-18deg); opacity: .9; }
.whatsapp-float__signal { position: relative; z-index: 1; width: 7px; height: 7px; border-radius: 50%; background: #5cff95; box-shadow: 0 0 9px rgba(92,255,149,.9); animation: signal 2s ease-out infinite; }
.whatsapp-float__label { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding-right: 3px; line-height: 1; text-shadow: 0 1px 5px rgba(0,0,0,.28); }
.whatsapp-float__label small { color: rgba(239,255,249,.64); font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.whatsapp-float__label strong { color: #f7fffb; font: 500 13px var(--display); letter-spacing: -.01em; }
.whatsapp-float__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; color: #effff5; background: radial-gradient(circle at 30% 18%, rgba(255,255,255,.44), transparent 34%), linear-gradient(145deg, rgba(74,255,143,.62), rgba(16,173,79,.34)); box-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 0 -8px 18px rgba(0,78,38,.16), 0 4px 13px rgba(0,0,0,.18), 0 0 18px rgba(37,211,102,.16); backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%); }
.whatsapp-float__icon::after { content: ""; position: absolute; top: 3px; left: 9px; width: 27px; height: 13px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.3), transparent); transform: rotate(-9deg); }
.whatsapp-float__icon svg { width: 25px; height: 25px; fill: currentColor; }
@keyframes signal { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45), 0 0 15px #25d366; } 70%,100% { box-shadow: 0 0 0 9px rgba(37,211,102,0), 0 0 15px #25d366; } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .intro-loader__halo, .intro-loader__logo, .intro-loader__content p, .intro-loader__track b { animation: none; opacity: 1; transform: none; } .intro-loader { transition-duration: .08s; } }
@media (max-width: 720px) { .hero { height: 100svh; min-height: 680px; background: #01080d; } .topbar { padding: 22px 22px; grid-template-columns: 1fr auto; } .manifesto { display: none; } .hero__content { left: 22px; right: 22px; top: auto; bottom: 9%; transform: none; } h1 { font-size: clamp(56px, 17vw, 120px); letter-spacing: -.12em; } .hero__eyebrow { display: flex; margin-bottom: 17px; font-size: 9px; gap: 8px; } .hero__eyebrow b { min-height: 21px; padding: 0 7px; } .eyebrow-line { width: 24px; } .hero__subtitle { margin-top: 20px; font-size: 18px; } .scroll-cue { margin-top: 22px; } .webgl-scene { opacity: 1; transform: none; } .hero__footer { display: none; } .site-menu { padding: 120px 22px; } .whatsapp-float { right: 18px; bottom: 18px; min-height: 54px; padding: 5px; } .whatsapp-float__signal, .whatsapp-float__label { display: none; } .whatsapp-float__icon { width: 46px; height: 46px; } }