/* ============================================================
   Solodev — static stylesheet (plain CSS, no build step)
   Converted from the Next.js/Tailwind version.
   ============================================================ */

:root { --background: #050505; --foreground: #f6f8fb; --blue: #1264ff; --blue-bright: #3b82ff; --muted: #8e97a8; --line: rgba(255,255,255,.12); --card: rgba(255,255,255,.055); --radius: 18px; --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.76,0,.24,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; }
body.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
.site-shell { min-height: 100vh; overflow: clip; position: relative; background: radial-gradient(ellipse at 76% 12%, rgba(18,100,255,.12), transparent 34%), #050505; animation: page-focus-in 1.35s var(--ease-out) .3s both; }
.container { width: min(1160px, calc(100% - 48px)); margin-inline: auto; position: relative; z-index: 2; }
.ambient { border-radius: 999px; filter: blur(90px); opacity: .38; pointer-events: none; position: absolute; animation: drift 14s ease-in-out infinite alternate; }.ambient-one { background: #0d51d9; height: 280px; right: -120px; top: 390px; width: 280px; }.ambient-two { animation-delay: -5s; background: #1642a8; height: 220px; left: -150px; top: 1050px; width: 220px; opacity: .22; }.grid-glow { background-image: linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.027) 1px, transparent 1px); background-size: 80px 80px; inset: 0; mask-image: linear-gradient(to bottom, black, transparent 62%); opacity: .55; pointer-events: none; position: absolute; }
.nav { align-items: center; display: flex; justify-content: space-between; padding: 27px 0; animation: nav-in .8s var(--ease-out) .6s backwards; }.brand { align-items: center; display: inline-flex; font-size: 20px; font-weight: 700; gap: 10px; letter-spacing: -.06em; }.brand > span:last-child span { color: var(--blue-bright); }.brand-mark { align-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 8px; color: var(--blue-bright); display: inline-flex; font-size: 12px; font-weight: 700; gap: 1px; height: 28px; justify-content: center; letter-spacing: -.2em; padding-right: 3px; width: 28px; }.brand-mark span:first-child,.brand-mark span:last-child { color: #f5f7fa; }.nav-links { align-items: center; display: flex; gap: 29px; font-size: 12px; color: #aab1be; }.nav-links a { transition: color .2s ease; }.nav-links a:hover { color: white; }.nav-cta { align-items: center; border: 1px solid var(--line); border-radius: 999px; color: white !important; display: flex; gap: 8px; padding: 10px 15px; }.menu-toggle { background: transparent; border: 0; color: white; display: none; }
.hero { align-items: center; display: grid; grid-template-columns: 1.02fr .98fr; min-height: 690px; padding: 84px 0 113px; }.hero-copy .eyebrow, .hero-copy .hero-text, .hero-copy .hero-actions, .hero-copy .hero-note { animation: reveal-up .95s var(--ease-out) both; }.hero-copy .eyebrow { animation-delay: .7s; }.hero-copy .hero-text { animation-delay: 1.05s; }.hero-copy .hero-actions { animation-delay: 1.2s; }.hero-copy .hero-note { animation-delay: 1.35s; }.hero-visual { animation: reveal-scale 1.2s var(--ease-out) .9s both; }.eyebrow,.section-kicker { color: #78a6ff; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }.eyebrow { align-items: center; display: flex; gap: 9px; }.pulse-dot { background: var(--blue-bright); border-radius: 50%; box-shadow: 0 0 0 5px rgba(59,130,255,.14), 0 0 20px #1264ff; height: 6px; width: 6px; }.hero h1 { font-size: clamp(55px, 7vw, 91px); letter-spacing: -.082em; line-height: .91; margin: 24px 0 27px; max-width: 670px; }.hero h1 em, h2 span, h2 em { color: var(--blue-bright); font-style: normal; }.hero-text { color: #adb5c3; font-size: 16px; line-height: 1.65; max-width: 450px; }.hero-actions { align-items: center; display: flex; gap: 25px; margin-top: 35px; }.button { align-items: center; border-radius: 999px; display: inline-flex; font-size: 12px; font-weight: 700; gap: 10px; padding: 14px 20px; }.button-primary { background: white; color: #090b0f; }.button-primary:hover { background: #dbe8ff; }.text-link,.arrow-link { align-items: center; color: #cdd4df; display: inline-flex; font-size: 12px; font-weight: 700; gap: 7px; }.text-link:hover,.arrow-link:hover { color: var(--blue-bright); }.hero-note { align-items: center; color: #6d7685; display: flex; font-size: 10px; gap: 11px; letter-spacing: .05em; margin-top: 78px; text-transform: uppercase; }.note-line { background: #303746; height: 1px; width: 30px; }
.hero-visual { align-items: center; display: flex; justify-content: center; min-height: 500px; position: relative; }.logo-card { animation: float 6s ease-in-out infinite; background: #050505; border: 1px solid rgba(255,255,255,.15); border-radius: 32px; box-shadow: 0 35px 100px rgba(0,0,0,.72), 0 0 90px rgba(25,94,255,.2); overflow: hidden; transform: rotate(4deg); width: min(410px, 75%); }.logo-card img { display: block; filter: saturate(1.1); height: auto; width: 100%; }.orbital { border: 1px solid rgba(52,125,255,.32); border-radius: 50%; height: 500px; left: 50%; position: absolute; top: 50%; transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))) rotate(-22deg); transition: transform .7s cubic-bezier(.2,.8,.2,1); width: 250px; }.orbital-b { border-color: rgba(255,255,255,.08); height: 410px; transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))) rotate(59deg); width: 500px; }.floating-chip { align-items: center; backdrop-filter: blur(15px); background: rgba(20,27,41,.72); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; box-shadow: 0 15px 35px rgba(0,0,0,.2); color: #dbe5f8; display: flex; font-size: 10px; gap: 7px; padding: 10px 13px; position: absolute; z-index: 2; }.chip-top { right: 2%; top: 17%; }.chip-bottom { bottom: 15%; left: 2%; }.chip-signal { background: #31df84; border-radius: 50%; box-shadow: 0 0 10px #31df84; height: 6px; width: 6px; }
[data-reveal] { filter: grayscale(1) saturate(.2) blur(7px); opacity: .42; transform: translateY(38px) scale(.985); transition: filter 1.2s cubic-bezier(.2,.8,.2,1), opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1); } [data-reveal].is-visible { filter: grayscale(0) saturate(1) blur(0); opacity: 1; transform: translateY(0) scale(1); }
.signal-strip { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }.signal-inner { color: #7f8998; display: flex; font-size: 10px; font-weight: 700; justify-content: space-between; letter-spacing: .15em; padding: 22px 0; text-transform: uppercase; }.signal-symbol { color: var(--blue-bright); }
.section { padding: 142px 0; }.section-intro h2,.story-content h2,.hosting-card h2,.contact-card h2 { font-size: clamp(38px, 5vw, 64px); letter-spacing: -.07em; line-height: .98; margin: 19px 0 0; }.premise-grid { display: grid; gap: 120px; grid-template-columns: 1.2fr .8fr; margin-top: 78px; }.large-copy { font-size: clamp(25px, 3vw, 37px); letter-spacing: -.045em; line-height: 1.18; margin: 0; max-width: 640px; }.body-copy { align-self: end; color: var(--muted); font-size: 14px; line-height: 1.8; }.body-copy p { margin: 0 0 28px; }.row-intro { align-items: end; display: flex; justify-content: space-between; }.intro-aside { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; max-width: 250px; }.path-grid { display: grid; gap: 15px; grid-template-columns: repeat(3,1fr); margin-top: 65px; }.path-card { opacity: 0; filter: blur(10px); background-image: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(59,130,255,.16), transparent 62%), linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); border: 1px solid var(--line); border-radius: var(--radius); min-height: 310px; padding: 26px; transition: opacity .75s ease var(--rd, 0s), filter .75s ease var(--rd, 0s), border .3s ease, transform .3s ease, background-image .3s ease; }.path-card:nth-child(2) { --rd: .13s; }.path-card:nth-child(3) { --rd: .26s; }.path-card:hover { background-image: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(70,140,255,.3), transparent 62%), linear-gradient(145deg, rgba(35,107,255,.18), rgba(255,255,255,.045)); border-color: rgba(71,137,255,.55); transform: translateY(-6px); transition-delay: 0s; }.path-top { color: #6f7b8f; display: flex; justify-content: space-between; }.path-top svg { color: var(--blue-bright); }.path-card h3 { font-size: 22px; letter-spacing: -.04em; margin: 73px 0 13px; }.path-card p { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0; max-width: 260px; }.path-card a { align-items: center; color: white; display: flex; font-size: 11px; font-weight: 700; gap: 7px; margin-top: 26px; }.path-card a:hover { color: var(--blue-bright); }
.story-section { background: linear-gradient(110deg, rgba(12,36,88,.6), rgba(5,5,5,.1)); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }.story-grid { display: grid; gap: 100px; grid-template-columns: .5fr 1.5fr; padding: 128px 0; }.story-marker { color: #798494; font-size: 10px; letter-spacing: .12em; }.story-line { background: var(--blue-bright); height: 1px; margin: 67px 0 18px; width: 40px; }.story-content { max-width: 700px; }.quote-mark { color: var(--blue-bright); font-family: Georgia, serif; font-size: 80px; height: 47px; line-height: 1; margin: -10px 0 18px; }.story-content h2 { font-size: clamp(38px, 5.2vw, 68px); margin: 0 0 30px; }.story-content > p:not(.quote-mark) { color: #9ca7b8; font-size: 15px; line-height: 1.8; max-width: 600px; }.button-outline { border: 1px solid rgba(255,255,255,.23); color: white; margin-top: 20px; }.button-outline:hover { border-color: var(--blue-bright); background: rgba(18,100,255,.13); }
.hosting-section { padding: 120px 0; }.hosting-card { align-items: center; background: linear-gradient(120deg, #0c1f47, #091124); border: 1px solid rgba(81,139,255,.35); border-radius: 24px; display: grid; gap: 70px; grid-template-columns: 1.1fr .9fr; overflow: hidden; padding: 52px; position: relative; }.hosting-card:after { background: radial-gradient(circle, rgba(35,112,255,.4), transparent 68%); content: ''; height: 400px; pointer-events: none; position: absolute; right: -130px; top: -150px; width: 400px; }.hosting-card h2 { font-size: 44px; }.hosting-card p:not(.section-kicker) { color: #aab6ca; font-size: 14px; line-height: 1.7; max-width: 470px; }.domain-preview { backdrop-filter: blur(16px); background: rgba(2,8,20,.54); border: 1px solid rgba(255,255,255,.15); border-radius: 15px; padding: 25px; position: relative; z-index: 1; }.domain-label,.domain-status { align-items: center; color: #8f9db2; display: flex; font-size: 10px; gap: 7px; text-transform: uppercase; }.domain-label svg { color: var(--blue-bright); }.domain-preview strong { display: block; font-size: clamp(21px, 3vw, 34px); letter-spacing: -.06em; margin: 34px 0; }.domain-preview strong span { color: var(--blue-bright); }.domain-status { color: #66dfa0; }
.support-section { padding: 0 0 120px; }.support-card { align-items: center; background: linear-gradient(115deg, rgba(21,76,182,.28), rgba(9,14,28,.92)); border: 1px solid rgba(76,139,255,.32); border-radius: 26px; display: grid; gap: 60px; grid-template-columns: 1.2fr .8fr; overflow: hidden; padding: 58px; position: relative; }.support-card:before { animation: shimmer 7s ease-in-out infinite; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.1), transparent 75%); content: ''; inset: 0; pointer-events: none; position: absolute; transform: translateX(-100%); }.support-copy,.support-action { position: relative; z-index: 1; }.support-copy h2 { font-size: clamp(40px, 5vw, 68px); letter-spacing: -.07em; line-height: .96; margin: 18px 0 22px; }.support-copy > p:not(.section-kicker) { color: #aebbd0; font-size: 14px; line-height: 1.8; max-width: 560px; }.support-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }.support-tags span { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #cbd8ed; font-size: 10px; padding: 8px 11px; }.support-action { align-items: center; display: flex; flex-direction: column; text-align: center; }.support-orbit { align-items: center; animation: spin 12s linear infinite; border: 1px solid rgba(100,158,255,.45); border-radius: 50%; display: flex; height: 146px; justify-content: center; margin-bottom: 19px; position: relative; width: 146px; }.support-orbit:before { border: 1px dashed rgba(255,255,255,.2); border-radius: 50%; content: ''; height: 103px; position: absolute; width: 103px; }.support-heart { animation: pulse-glow 2s ease-in-out infinite; color: white; font-size: 38px; font-weight: 300; position: relative; }.orbit-dot { background: #73a6ff; border-radius: 50%; box-shadow: 0 0 17px #3b82ff; height: 7px; position: absolute; width: 7px; }.orbit-dot-one { right: 4px; top: 38px; }.orbit-dot-two { bottom: 14px; left: 27px; }.support-action p { color: #c1ccdc; font-size: 12px; margin: 0 0 14px; }.support-button { box-shadow: 0 0 32px rgba(82,142,255,.26); }.support-action small { color: #8190a8; font-size: 10px; margin-top: 13px; }.contact-section { padding: 0 0 110px; }.contact-card { display: grid; gap: 80px; grid-template-columns: 1fr 1fr; padding: 74px 0; }.contact-card h2 { font-size: 60px; }.contact-card > div:first-child > p:last-child { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 30px; }.contact-actions { align-self: end; border-top: 1px solid var(--line); }.contact-row { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 13px; padding: 18px 0; }.contact-row > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; font-size: 14px; font-weight: 700; gap: 4px; }.contact-row small { color: #798494; font-size: 9px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }.contact-icon { align-items: center; background: rgba(35,108,255,.14); border-radius: 50%; color: #75a4ff; display: flex; height: 37px; justify-content: center; width: 37px; }.contact-row > svg { color: #76859a; }.copy-email { align-items: center; background: none; border: 0; color: #7d899a; cursor: pointer; display: flex; font-size: 10px; gap: 7px; margin-top: 17px; padding: 0; }.copy-email:hover { color: white; }.footer { align-items: center; border-top: 1px solid var(--line); color: #667285; display: flex; font-size: 10px; justify-content: space-between; padding: 28px 0 35px; }.footer .brand { color: white; font-size: 15px; }.footer .brand-mark { height: 22px; width: 22px; }.footer p { margin: 0; }
@keyframes float { 0%,100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-13px); } }
@keyframes drift { 0% { transform: translate3d(-20px, 10px, 0) scale(1); } 100% { transform: translate3d(35px, -25px, 0) scale(1.18); } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal-scale { from { opacity: 0; transform: scale(.88) rotate(-4deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes card-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0%, 45% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-glow { 0%,100% { text-shadow: 0 0 0 rgba(80,145,255,0); transform: scale(1); } 50% { text-shadow: 0 0 25px rgba(80,145,255,.9); transform: scale(1.12); } }
@keyframes page-focus-in { from { filter: blur(18px); opacity: .2; transform: scale(1.035); } to { filter: blur(0); opacity: 1; transform: scale(1); } }
@keyframes page-wipe { from { opacity: 1; transform: translateX(0); } 70% { opacity: 1; } to { opacity: 0; transform: translateX(100%); } }
@keyframes slide-blur-left { from { filter: blur(12px); opacity: 0; transform: translateX(-34px); } to { filter: blur(0); opacity: 1; transform: translateX(0); } }
@keyframes slide-blur-right { from { filter: blur(10px); opacity: 0; transform: translateX(38px); } to { filter: blur(0); opacity: 1; transform: translateX(0); } }
@keyframes slide-blur-up { from { filter: blur(13px); opacity: 0; transform: translateY(32px); } to { filter: blur(0); opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) { .container { width: min(100% - 36px, 560px); }.nav { padding: 20px 0; }.menu-toggle { display: block; padding: 5px; }.nav-links { align-items: stretch; background: #0c1018; border: 1px solid var(--line); border-radius: 14px; display: none; flex-direction: column; gap: 0; padding: 9px; position: absolute; right: 0; top: 65px; width: 220px; }.nav-links.is-open { display: flex; }.nav-links a { padding: 12px; }.nav-cta { justify-content: center; margin-top: 6px; }.hero { display: flex; flex-direction: column; min-height: auto; padding: 76px 0 72px; }.hero-copy { width: 100%; }.hero h1 { font-size: clamp(52px, 16vw, 80px); }.hero-visual { min-height: 410px; width: 100%; }.logo-card { width: min(320px, 76%); }.orbital { height: 390px; width: 190px; }.orbital-b { height: 320px; width: 390px; }.chip-top { right: 0; top: 8%; }.chip-bottom { bottom: 8%; left: 0; }.signal-inner { gap: 13px; justify-content: flex-start; overflow: hidden; white-space: nowrap; }.signal-inner span:nth-child(4),.signal-inner span:nth-child(5) { display: none; }.section { padding: 92px 0; }.premise-grid,.story-grid,.hosting-card,.support-card,.contact-card { gap: 40px; grid-template-columns: 1fr; }.support-card { padding: 34px 24px; }.premise-grid { margin-top: 48px; }.row-intro { align-items: start; flex-direction: column; gap: 25px; }.path-grid { grid-template-columns: 1fr; margin-top: 44px; }.path-card { min-height: 260px; }.path-card h3 { margin-top: 56px; }.story-grid { padding: 85px 0; }.story-line { margin-top: 40px; }.hosting-section { padding: 80px 0; }.hosting-card { padding: 30px 24px; }.hosting-card h2 { font-size: 39px; }.contact-card { padding: 65px 0; }.contact-card h2 { font-size: 50px; }.footer { align-items: flex-start; flex-direction: column; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.site-shell,.site-shell:after,.nav,.signal-strip,.section,.ambient,.hero-copy,.hero-visual,.logo-card,.path-card,.support-card:before,.support-orbit,.support-heart { animation: none; } [data-reveal] { filter: none; opacity: 1; transform: none; transition: none; }.site-shell:after { display: none; }.path-card { transition: none; } }
button, a { -webkit-tap-highlight-color: transparent; }

/* ============================================================
   Professional animation system — choreography, depth, texture
   ============================================================ */
@property --sa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* --- 11. Intro curtain (branded load choreography) --- */
.intro { animation: intro-exit 1s var(--ease-in-out) .55s both; background: #050505; clip-path: inset(0 0 0 0); display: grid; inset: 0; place-items: center; pointer-events: none; position: fixed; z-index: 80; }
.intro-mark { animation: mark-seq 1.05s var(--ease-out) both; color: var(--blue-bright); display: inline-flex; font-size: 46px; font-weight: 700; gap: 5px; letter-spacing: -.08em; }
.intro-mark span:first-child, .intro-mark span:last-child { color: #f5f7fa; }
@keyframes intro-exit { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
@keyframes mark-seq { 0% { opacity: 0; filter: blur(14px); transform: translateY(16px) scale(.94); } 35%, 62% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } 100% { opacity: 0; filter: blur(8px); transform: translateY(-14px) scale(1.05); } }
@keyframes nav-in { from { opacity: 0; filter: blur(10px); transform: translateY(-18px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- 12. Smart nav: hide on scroll down, show on scroll up + scrollspy --- */
.nav { transition: transform .5s var(--ease-out), opacity .4s ease, filter .4s ease; }
.nav.nav-hidden { filter: blur(6px); opacity: 0; transform: translateY(-115%); transition-delay: 0s; }
.nav-links a.is-active { color: #fff; }
.nav-links a:not(.nav-cta).is-active::after { transform: scaleX(1); }

/* --- 13. Signal marquee (scroll-velocity aware) --- */
.signal-strip { color: #7f8998; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); overflow: hidden; padding: 22px 0; }
.marquee-track { animation: marquee-slide 38s linear infinite; display: flex; width: max-content; will-change: transform; }
.marquee-group { align-items: center; display: flex; gap: 44px; padding-right: 44px; }
@keyframes marquee-slide { to { transform: translateX(-50%); } }

/* --- 14. Staggered child reveals (blur + rise, sequenced) --- */
[data-stagger] > * { filter: blur(8px); opacity: 0; transform: translateY(28px); transition: opacity .85s ease, filter .85s ease, transform .95s var(--ease-out); transition-delay: calc(var(--s, 0) * 120ms); }
[data-stagger].is-visible > * { filter: blur(0); opacity: 1; transform: translateY(0); }
[data-stagger] > .border-sweep { filter: none; opacity: .7; transform: none; transition: none; }

/* --- 15. Line draw-ins --- */
.section-kicker { position: relative; }
.section-kicker::after { background: linear-gradient(90deg, var(--blue-bright), rgba(59,130,255,0)); bottom: -9px; content: ''; height: 1px; left: 0; position: absolute; transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease-out) .35s; width: 46px; }
[data-reveal].is-visible .section-kicker::after { transform: scaleX(1); }
.eyebrow { position: relative; }
.eyebrow::after { animation: draw-x .9s var(--ease-out) 1.15s both; background: linear-gradient(90deg, var(--blue-bright), rgba(59,130,255,0)); bottom: -9px; content: ''; height: 1px; left: 0; position: absolute; transform-origin: 0 50%; width: 46px; }
.story-line { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out) .45s; }
[data-reveal].is-visible .story-line { transform: scaleX(1); }

/* --- 16. Card 3D tilt --- */
.path-grid { perspective: 1400px; }
.path-card.is-tilting { transition: opacity .75s ease var(--rd, 0s), filter .75s ease var(--rd, 0s), border .3s ease, transform .14s ease-out, background-image .3s ease; }

/* --- 17. Border light sweep (hosting + support cards) --- */
.border-sweep { animation: sweep-spin 7s linear infinite; background: conic-gradient(from var(--sa), transparent 0 62%, rgba(120,170,255,.9) 78%, transparent 92%); border-radius: inherit; inset: 0; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: .7; padding: 1px; pointer-events: none; position: absolute; z-index: 0; }
@keyframes sweep-spin { to { --sa: 360deg; } }
.hosting-card > div:not(.border-sweep) { position: relative; z-index: 1; }

/* --- 18. Custom cursor ring --- */
.cursor-ring { border: 1px solid rgba(255,255,255,.35); border-radius: 50%; height: 32px; left: 0; margin: -16px 0 0 -16px; opacity: 0; pointer-events: none; position: fixed; top: 0; transition: opacity .35s ease, width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), border-color .3s ease, background-color .3s ease; width: 32px; z-index: 95; }
.cursor-ring.is-active { opacity: 1; }
.cursor-ring.is-hovering { background: rgba(59,130,255,.07); border-color: rgba(96,152,255,.85); height: 54px; margin: -27px 0 0 -27px; width: 54px; }

/* --- 19. Film grain texture --- */
.grain { animation: grain-jump .8s steps(1) infinite; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); height: 110%; left: -5%; opacity: .05; pointer-events: none; position: fixed; top: -5%; width: 110%; z-index: 90; }
@keyframes grain-jump { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1.5%, 1%); } 50% { transform: translate(1%, -1.5%); } 75% { transform: translate(1.5%, 1.5%); } }

/* --- 20. Aurora background drift --- */
.aurora { animation: aurora-spin 48s linear infinite; background: conic-gradient(from 0deg, rgba(18,100,255,.15), rgba(94,42,214,.1), rgba(6,74,180,.18), rgba(18,100,255,.15)); border-radius: 50%; filter: blur(130px); height: 880px; opacity: .5; pointer-events: none; position: absolute; right: -320px; top: -360px; width: 880px; }
@keyframes aurora-spin { to { transform: rotate(360deg); } }

/* --- 21. Logo glare sweep --- */
.logo-card { position: relative; }
.logo-card::after { animation: glare-pass 6s ease-in-out 2.4s infinite; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.16) 47%, transparent 62%); content: ''; inset: 0; overflow: hidden; pointer-events: none; position: absolute; transform: translateX(-130%); }
@keyframes glare-pass { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }

/* --- 22. Interaction micro-polish --- */
.text-link svg, .arrow-link svg, .path-card a svg, .button svg, .nav-cta svg { transition: transform .4s var(--ease-out); }
.text-link:hover svg, .arrow-link:hover svg, .path-card a:hover svg { transform: translate(3px, -3px); }
.button:hover svg, .nav-cta:hover svg { transform: translate(2px, -2px); }
.hero-actions .button:hover svg { transform: translateY(4px); }
.contact-icon { transition: transform .45s var(--ease-out), background-color .3s ease, box-shadow .3s ease; }
.contact-row:hover .contact-icon { background: rgba(59,130,255,.28); box-shadow: 0 0 22px rgba(59,130,255,.35); transform: scale(1.08); }
.brand-mark { transition: transform .5s var(--ease-out), border-color .3s ease, box-shadow .4s ease; }
.brand:hover .brand-mark { border-color: rgba(96,152,255,.8); box-shadow: 0 0 18px rgba(59,130,255,.35); transform: rotate(-8deg) scale(1.06); }
::selection { background: rgba(59,130,255,.4); color: #fff; }
@supports (scrollbar-width: thin) { html { scrollbar-color: #2b3345 transparent; scrollbar-width: thin; } }
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #2b3345; background-clip: padding-box; border: 3px solid #050505; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #3b82ff; background-clip: padding-box; }

/* --- 23. Reduced motion (extended) --- */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .marquee-track, .grain, .aurora, .border-sweep, .logo-card::after, .eyebrow::after { animation: none; }
  .cursor-ring { display: none; }
  [data-stagger] > * { filter: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  .story-line, .section-kicker::after { transform: none !important; transition: none !important; }
  .nav, .nav.nav-hidden, .path-card.is-tilting, .brand-mark, .contact-icon, .text-link svg, .arrow-link svg, .path-card a svg, .button svg, .nav-cta svg { transition: none; }
}

/* ============================================================
   Static-site additions — base resets + motion & interaction
   ============================================================ */

/* --- 1. Base resets (stand-in for the removed Tailwind preflight) --- */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
p { margin: 0; }
img, svg { display: block; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; background: transparent; cursor: pointer; }

/* --- 2. Scroll progress bar --- */
.scroll-progress { background: transparent; height: 2px; left: 0; pointer-events: none; position: fixed; right: 0; top: 0; z-index: 100; }
.scroll-progress span { background: linear-gradient(90deg, #1264ff, #5f98ff, #b9d2ff); box-shadow: 0 0 14px rgba(59,130,255,.75); display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; width: 100%; }

/* --- 3. Sticky navigation with blur backdrop --- */
.nav { position: sticky; top: 0; z-index: 30; }
.nav::before { -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); background: rgba(7,9,14,.68); border: 1px solid transparent; border-radius: 18px; content: ''; inset: -12px -20px; opacity: 0; pointer-events: none; position: absolute; transition: opacity .4s ease, border-color .4s ease; z-index: -1; }
.nav.is-scrolled::before { border-color: var(--line); opacity: 1; }
.nav-links a { position: relative; }
.nav-links a:not(.nav-cta)::after { background: linear-gradient(90deg, var(--blue-bright), rgba(59,130,255,0)); bottom: -7px; content: ''; height: 1px; left: 0; position: absolute; right: 0; transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.nav-links a:not(.nav-cta):hover::after, .nav-links a:not(.nav-cta):focus-visible::after { transform: scaleX(1); }
.nav-links.is-open { animation: menu-in .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes menu-in { from { opacity: 0; filter: blur(10px); transform: translateY(-12px) scale(.97); } to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
.menu-toggle { height: 34px; padding: 0; position: relative; width: 34px; }
.menu-toggle svg { inset: 0; margin: auto; position: absolute; transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.menu-toggle .icon-close { opacity: 0; transform: rotate(-90deg) scale(.5); }
.nav.menu-open .menu-toggle .icon-menu { opacity: 0; transform: rotate(90deg) scale(.5); }
.nav.menu-open .menu-toggle .icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

/* --- 4. Word-by-word heading reveal (fade + blur + rise) --- */
.word { display: inline-block; margin: -.14em 0 -.18em; overflow: hidden; padding: .14em 0 .18em; vertical-align: bottom; }
.word-inner { display: inline-block; filter: blur(8px); opacity: 0; transform: translateY(140%); transition: opacity .6s ease, filter .7s ease, transform .85s cubic-bezier(.2,.85,.2,1); transition-delay: calc(var(--i, 0) * 55ms); }
.is-split.is-visible .word-inner { filter: blur(0); opacity: 1; transform: translateY(0); }
.hero h1 .word-inner { transition-delay: calc(var(--i, 0) * 60ms + .85s); }

/* --- 5. Hero parallax layers --- */
.p-layer { align-items: center; display: flex; inset: 0; justify-content: center; pointer-events: none; position: absolute; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform .75s cubic-bezier(.2,.8,.2,1); will-change: transform; }

/* --- 6. Cursor glow --- */
.cursor-glow { background: radial-gradient(circle, rgba(35,105,255,.16), rgba(35,105,255,0) 65%); border-radius: 50%; filter: blur(28px); height: 460px; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; transform: translate(-50%, -50%); transition: opacity .6s ease; width: 460px; z-index: 1; }

/* --- 7. Path cards: staggered fade + blur reveal on scroll --- */
[data-reveal].is-visible .path-card { filter: blur(0); opacity: 1; }

/* --- 8. Contact rows: staggered reveal + hover motion --- */
.contact-row { filter: blur(6px); opacity: 0; transform: translateY(16px); transition: opacity .6s ease var(--rd, 0s), filter .6s ease var(--rd, 0s), transform .6s cubic-bezier(.2,.8,.2,1) var(--rd, 0s), padding .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease; }
.contact-actions .contact-row:nth-child(1) { --rd: .05s; }
.contact-actions .contact-row:nth-child(2) { --rd: .16s; }
[data-reveal].is-visible .contact-row { filter: blur(0); opacity: 1; transform: translateY(0); }
.contact-row > svg { transition: color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.contact-row:hover { border-color: rgba(71,137,255,.5); padding-left: 12px; transition-delay: 0s; }
.contact-row:hover > svg { color: var(--blue-bright); transform: translate(4px, -4px); }
.copy-email.is-copied { color: #66dfa0; }

/* --- 9. Micro-motion & interaction polish --- */
.pulse-dot { animation: dot-ping 2.4s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes dot-ping { 0% { box-shadow: 0 0 0 0 rgba(59,130,255,.55), 0 0 20px #1264ff; } 70% { box-shadow: 0 0 0 11px rgba(59,130,255,0), 0 0 20px #1264ff; } 100% { box-shadow: 0 0 0 0 rgba(59,130,255,0), 0 0 20px #1264ff; } }
.signal-symbol { animation: symbol-breathe 3.4s ease-in-out infinite; display: inline-block; }
.signal-inner span:nth-child(4) { animation-delay: -1.7s; }
@keyframes symbol-breathe { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }
.quote-mark { animation: quote-float 7s ease-in-out infinite; }
@keyframes quote-float { 0%, 100% { opacity: .85; transform: translateY(0) rotate(0deg); } 50% { opacity: 1; transform: translateY(-10px) rotate(-5deg); } }
.button, .nav-cta, .text-link, .arrow-link, .path-card a, .copy-email { transition: transform .3s cubic-bezier(.2,.8,.2,1), color .25s ease, background .3s ease, border-color .3s ease; }
.button:active, .nav-cta:active { transform: scale(.96); }
a:focus-visible, button:focus-visible { border-radius: 8px; outline: 2px solid var(--blue-bright); outline-offset: 3px; }

/* --- 10. Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .word-inner { filter: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  .path-card, .contact-row { filter: none; opacity: 1; transform: none; transition: none; }
  .p-layer, .orbital, .nav::before, .nav-links a::after, .contact-row > svg, .button, .nav-cta, .menu-toggle svg, .scroll-progress span { transition: none; }
  .nav-links.is-open, .pulse-dot, .signal-symbol, .quote-mark { animation: none; }
  .hero-copy .eyebrow, .hero-copy .hero-text, .hero-copy .hero-actions, .hero-copy .hero-note { animation: none; }
  .cursor-glow { display: none; }
}