*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
--obsidian: #0A0A0A;
--steel: #141414;
--ash: #222222;
--crimson: #CC0000;
--blood: #8B0000;
--ember: #FF2020;
--white: #F5F5F5;
--grey: #888888;
--dim: #444444;
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
--obsidian: #F7F7F7;
--steel: #EFEFEF;
--ash: #E0E0E0;
--white: #111111;
--grey: #555555;
--dim: #AAAAAA;
--blood: #AA0000;
}
[data-theme="light"] body { background: #F7F7F7; color: #111; }
[data-theme="light"] nav { background: rgba(247,247,247,0.94); border-bottom-color: #ddd; }
[data-theme="light"] .hero::before { background-image: radial-gradient(circle, #bbb 1px, transparent 1px); }
[data-theme="light"] .slash-bg { background: #E2E2E2; opacity: 0.8; }
[data-theme="light"] .hero-headline .line-outline { -webkit-text-stroke: 1px rgba(0,0,0,0.18); }
[data-theme="light"] .hero-desc { color: #666; }
[data-theme="light"] .hero-desc strong { color: #111; }
[data-theme="light"] .hero-scroll { color: #bbb; }
[data-theme="light"] .scroll-line { background: linear-gradient(180deg, #bbb 0%, transparent 100%); }
[data-theme="light"] .prod-card { background: #fff; border-color: #e0e0e0; }
[data-theme="light"] .prod-card:hover { background: #fafafa; }
[data-theme="light"] .prod-card.featured { background: linear-gradient(135deg, #fff5f5 0%, #fff 100%); border-color: rgba(204,0,0,0.2); }
[data-theme="light"] .prod-name { color: #111; }
[data-theme="light"] .prod-desc { color: #666; }
[data-theme="light"] .prod-features li { color: #888; border-color: #ddd; }
[data-theme="light"] .prod-arrow { border-color: #ccc; }
[data-theme="light"] .prod-arrow svg path { stroke: #333; }
[data-theme="light"] .why-slash { background: #E8E8E8; }
[data-theme="light"] .why-item { border-bottom-color: #e0e0e0; }
[data-theme="light"] .why-item:first-child { border-top-color: #e0e0e0; }
[data-theme="light"] .why-num { color: #ddd; }
[data-theme="light"] .why-item-text p { color: #666; }
[data-theme="light"] .why-left p { color: #666; }
[data-theme="light"] #clients { background: #efefef; }
[data-theme="light"] .clients-label { color: #aaa; }
[data-theme="light"] .client-logo { color: #ccc; }
[data-theme="light"] .client-logo:hover { color: #888; }
[data-theme="light"] .price-card { background: #fff; border-color: #e0e0e0; }
[data-theme="light"] .price-card.highlighted { background: linear-gradient(160deg, #fff0f0 0%, #fff 100%); border-color: rgba(204,0,0,0.3); }
[data-theme="light"] .price-tier { color: #888; }
[data-theme="light"] .price-amount { color: #111; }
[data-theme="light"] .price-period { color: #aaa; }
[data-theme="light"] .price-divider { background: #eee; }
[data-theme="light"] .price-features li { color: #666; }
[data-theme="light"] .price-features li.disabled { color: #bbb; }
[data-theme="light"] .price-btn { border-color: #ccc; color: #111; }
[data-theme="light"] .price-btn:hover { background: var(--crimson); color: #fff; border-color: var(--crimson); }
[data-theme="light"] .price-card.highlighted .price-btn { color: #fff; }
[data-theme="light"] #stack { background: #efefef; }
[data-theme="light"] .stack-item { background: #fff; border-color: #e0e0e0; }
[data-theme="light"] .stack-name { color: #888; }
[data-theme="light"] footer { background: #F7F7F7; border-top-color: #ddd; }
[data-theme="light"] .footer-brand p { color: #666; }
[data-theme="light"] .footer-col h5 { color: #111; }
[data-theme="light"] .footer-col a { color: #666; }
[data-theme="light"] .social-btn { border-color: #ddd; color: #aaa; }
[data-theme="light"] .footer-bottom p { color: #aaa; }
[data-theme="light"] .footer-bottom { border-top-color: #ddd; }
[data-theme="light"] .logo-text { color: #111; }
[data-theme="light"] .nav-links a { color: #888; }
[data-theme="light"] .sec-title { color: #111; }
[data-theme="light"] .why-item-text h4 { color: #111; }
[data-theme="light"] #products { background: #efefef; }
[data-theme="light"] #pricing { background: #F7F7F7; }
[data-theme="light"] #why { background: #F7F7F7; }
[data-theme="light"] .hero-bg { background: linear-gradient(135deg, rgba(204,0,0,0.04) 0%, transparent 60%); }
[data-theme="light"] .products-intro p { color: #666; }
[data-theme="light"] .sec-label { color: var(--crimson); }

/* ── THEME TOGGLE ── */
.theme-toggle {
width: 44px; height: 24px;
background: var(--ash);
border: 1px solid var(--dim);
border-radius: 12px;
position: relative;
cursor: pointer;
transition: background 0.3s, border-color 0.3s;
flex-shrink: 0;
display: flex; align-items: center;
padding: 0 3px;
margin-left: 16px;
}
.theme-toggle::after {
content: '';
width: 16px; height: 16px;
background: var(--grey);
border-radius: 50%;
transition: transform 0.3s, background 0.3s;
}
[data-theme="light"] .theme-toggle { background: #e0e0e0; border-color: #bbb; }
[data-theme="light"] .theme-toggle::after { transform: translateX(20px); background: var(--crimson); }

html { scroll-behavior: smooth; }

body {
background: var(--obsidian);
color: var(--white);
font-family: 'Inter', sans-serif;
overflow-x: hidden;
}

/* ── NAV ── */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 20px 60px;
background: rgba(10,10,10,0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid #1a1a1a;
}

.logo {
display: flex; align-items: center; gap: 10px;
text-decoration: none;
}

.logo-mark {
width: 36px; height: 36px; position: relative;
}

.logo-mark svg { width: 100%; height: 100%; }

.logo-text {
font-family: 'Bebas Neue', sans-serif;
font-size: 22px;
letter-spacing: 3px;
color: var(--white);
}

.logo-text span { color: var(--crimson); }
.logo-img {
  display: block;
  height: 36px;
  width: auto;
  object-fit: contain;
}

.nav-links {
display: flex; gap: 40px; list-style: none;
}

.nav-links a {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--grey);
text-decoration: none;
transition: color 0.2s;
}

.nav-links a:hover { color: var(--crimson); }

.nav-cta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--white);
background: var(--crimson);
border: none;
padding: 10px 24px;
cursor: pointer;
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
transition: background 0.2s;
}

.nav-cta:hover { background: var(--ember); }

/* ── HERO ── */
.hero {
min-height: 100vh;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 0 60px 80px;
position: relative;
overflow: hidden;
}

.hero-bg {
position: absolute; inset: 0;
background:
    linear-gradient(135deg, rgba(140,0,0,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(204,0,0,0.06) 0%, transparent 60%);
}

/* Slash geometry */
.slash-bg {
position: absolute; top: 0; right: -100px;
width: 700px; height: 100vh;
background: var(--steel);
transform: skewX(-12deg);
transform-origin: top right;
opacity: 0.5;
}

.slash-accent {
position: absolute; top: 0; right: 140px;
width: 6px; height: 100vh;
background: linear-gradient(180deg, transparent 0%, var(--crimson) 30%, var(--blood) 70%, transparent 100%);
transform: skewX(-12deg);
}

.slash-accent-2 {
position: absolute; top: 0; right: 200px;
width: 2px; height: 100vh;
background: linear-gradient(180deg, transparent 0%, var(--dim) 50%, transparent 100%);
transform: skewX(-12deg);
}

/* Grid dots */
.hero::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle, #222 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.4;
}

.hero-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 4px;
color: var(--crimson);
text-transform: uppercase;
margin-bottom: 10px;
position: relative;
display: flex; align-items: center; gap: 16px;
}

.hero-eyebrow::before {
content: ''; width: 40px; height: 1px; background: var(--crimson);
}

.hero-headline {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(80px, 12vw, 180px);
line-height: 0.88;
letter-spacing: -2px;
position: relative;
z-index: 2;
}

.hero-headline .line-red { color: var(--crimson); }
.hero-headline .line-outline {
-webkit-text-stroke: 1px rgba(245,245,245,0.3);
color: transparent;
}

.hero-sub-row {
display: flex; align-items: flex-end; justify-content: space-between;
margin-top: 48px; position: relative; z-index: 2;
}

.hero-desc {
max-width: 420px;
font-size: 15px;
line-height: 1.7;
color: var(--grey);
font-weight: 300;
}

.hero-desc strong { color: var(--white); font-weight: 500; }

.hero-stats {
display: flex; gap: 48px;
}

.stat-item {
text-align: right;
}

.stat-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 48px;
color: var(--white);
line-height: 1;
}

.stat-num span { color: var(--crimson); }

.stat-label {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 2px;
color: var(--grey);
text-transform: uppercase;
margin-top: 4px;
}

.hero-scroll {
position: absolute; bottom: 80px; left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 3px;
color: var(--dim);
text-transform: uppercase;
z-index: 2;
}

.scroll-line {
width: 1px; height: 40px;
background: linear-gradient(180deg, var(--dim) 0%, transparent 100%);
animation: scrollAnim 2s ease-in-out infinite;
}

@keyframes scrollAnim {
0%, 100% { opacity: 0.3; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(1.3); }
}

/* ── TICKER ── */
.ticker {
background: var(--crimson);
padding: 12px 0;
overflow: hidden;
white-space: nowrap;
position: relative;
}

.ticker-inner {
display: inline-flex; gap: 0;
animation: ticker 20s linear infinite;
}

.ticker-item {
font-family: 'Bebas Neue', sans-serif;
font-size: 14px;
letter-spacing: 3px;
color: rgba(0,0,0,0.7);
padding: 0 40px;
}

.ticker-dot {
color: rgba(0,0,0,0.4);
}

@keyframes ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

/* ── SECTION HEADER ── */
.section { padding: 120px 60px; }

.sec-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 4px;
color: var(--crimson);
text-transform: uppercase;
margin-bottom: 20px;
display: flex; align-items: center; gap: 12px;
}

.sec-label::after {
content: ''; flex: 1; max-width: 60px;
height: 1px; background: var(--crimson);
}

.sec-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(40px, 5vw, 72px);
line-height: 1;
letter-spacing: 1px;
margin-bottom: 16px;
}

/* ── PRODUCTS ── */
#products { background: var(--steel); }

.products-intro {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 80px;
}

.products-intro-text { max-width: 600px; }

.products-intro p {
color: var(--grey); font-size: 15px; line-height: 1.7;
font-weight: 300; margin-top: 16px;
}

.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 2px;
}

.prod-card {
background: var(--obsidian);
padding: 48px 40px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: background 0.3s;
border: 1px solid #1a1a1a;
}

.prod-card:hover { background: #111; }

.prod-card::before {
content: '';
position: absolute; top: 0; left: 0;
width: 3px; height: 0;
background: var(--crimson);
transition: height 0.4s ease;
}

.prod-card:hover::before { height: 100%; }

.prod-card.featured {
grid-column: span 2;
background: linear-gradient(135deg, #110000 0%, var(--obsidian) 100%);
border-color: rgba(204,0,0,0.2);
}

.prod-card.featured::before { height: 100%; width: 4px; }

.prod-num {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 3px;
color: var(--crimson);
margin-bottom: 40px;
opacity: 0.7;
}

.prod-icon {
width: 48px; height: 48px;
margin-bottom: 24px;
position: relative;
}

.prod-icon svg { width: 100%; height: 100%; }

.prod-name {
font-family: 'Bebas Neue', sans-serif;
font-size: 32px;
letter-spacing: 2px;
margin-bottom: 12px;
color: var(--white);
}

.prod-card.featured .prod-name { font-size: 44px; }

.prod-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 2px;
color: var(--crimson);
text-transform: uppercase;
background: rgba(204,0,0,0.1);
border: 1px solid rgba(204,0,0,0.3);
padding: 4px 10px;
display: inline-block;
margin-bottom: 20px;
clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}

.prod-desc {
font-size: 13px;
line-height: 1.7;
color: var(--grey);
font-weight: 300;
margin-bottom: 32px;
}

.prod-features {
list-style: none;
display: flex; flex-wrap: wrap; gap: 8px;
}

.prod-features li {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 1px;
color: var(--dim);
border: 1px solid #2a2a2a;
padding: 4px 10px;
}

.prod-arrow {
position: absolute; bottom: 40px; right: 40px;
width: 40px; height: 40px;
border: 1px solid var(--dim);
display: flex; align-items: center; justify-content: center;
transform: rotate(-45deg);
transition: all 0.3s;
}

.prod-card:hover .prod-arrow {
background: var(--crimson);
border-color: var(--crimson);
transform: rotate(0deg);
}

.prod-arrow svg { transform: rotate(45deg); transition: transform 0.3s; }
.prod-card:hover .prod-arrow svg { transform: rotate(0deg); }

/* ── WHY ── */
#why {
position: relative;
overflow: hidden;
}

.why-slash {
position: absolute; top: -100px; right: -200px;
width: 900px; height: 120%;
background: var(--steel);
transform: skewX(-8deg);
opacity: 0.6;
}

.why-content {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1fr 1fr; gap: 120px;
align-items: center;
}

.why-left .sec-title { margin-bottom: 32px; }

.why-left p {
font-size: 15px; line-height: 1.8;
color: var(--grey); font-weight: 300;
margin-bottom: 40px;
}

.why-cta-btn {
font-family: 'Bebas Neue', sans-serif;
font-size: 16px;
letter-spacing: 3px;
color: var(--white);
background: var(--crimson);
border: none;
padding: 16px 40px;
cursor: pointer;
clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
transition: background 0.2s;
display: inline-flex; align-items: center; gap: 12px;
}

.why-cta-btn:hover { background: var(--ember); }

.why-right {
display: flex; flex-direction: column; gap: 0;
}

.why-item {
padding: 32px 0;
border-bottom: 1px solid #1e1e1e;
display: flex; gap: 24px; align-items: flex-start;
}

.why-item:first-child { border-top: 1px solid #1e1e1e; }

.why-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 56px;
color: #1c1c1c;
line-height: 1;
min-width: 60px;
transition: color 0.3s;
}

.why-item:hover .why-num { color: var(--crimson); }

.why-item-text h4 {
font-family: 'Bebas Neue', sans-serif;
font-size: 22px;
letter-spacing: 2px;
margin-bottom: 8px;
}

.why-item-text p {
font-size: 13px; line-height: 1.7;
color: var(--grey); font-weight: 300;
}

/* ── CLIENTS ── */
#clients {
background: var(--steel);
padding: 80px 60px;
text-align: center;
}

.clients-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 4px;
color: var(--dim);
text-transform: uppercase;
margin-bottom: 48px;
}

.clients-row {
display: flex; justify-content: center;
align-items: center; gap: 60px; flex-wrap: wrap;
}

.client-logo {
font-family: 'Bebas Neue', sans-serif;
font-size: 20px;
letter-spacing: 3px;
color: #333;
transition: color 0.3s;
cursor: default;
}

.client-logo:hover { color: var(--grey); }

/* ── PRICING ── */
#pricing { background: var(--obsidian); }

.pricing-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 2px; margin-top: 60px;
}

.price-card {
background: var(--steel);
padding: 48px 40px;
position: relative;
border: 1px solid #1e1e1e;
transition: transform 0.3s;
}

.price-card:hover { transform: translateY(-4px); }

.price-card.highlighted {
background: linear-gradient(160deg, #1a0000 0%, var(--steel) 100%);
border-color: rgba(204,0,0,0.4);
}

.price-card.highlighted::after {
content: 'MOST POPULAR';
position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
background: var(--crimson);
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 2px;
padding: 4px 16px;
color: white;
}

.price-tier {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 3px;
color: var(--grey);
text-transform: uppercase;
margin-bottom: 24px;
}

.price-amount {
font-family: 'Bebas Neue', sans-serif;
font-size: 64px;
line-height: 1;
color: var(--white);
margin-bottom: 4px;
}

.price-amount sup {
font-size: 24px;
color: var(--crimson);
vertical-align: super;
}

.price-period {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--dim);
letter-spacing: 2px;
margin-bottom: 32px;
}

.price-divider {
height: 1px;
background: #222;
margin-bottom: 32px;
}

.price-features {
list-style: none;
display: flex; flex-direction: column; gap: 14px;
margin-bottom: 40px;
}

.price-features li {
font-size: 13px;
color: var(--grey);
display: flex; align-items: center; gap: 12px;
}

.price-features li::before {
content: '▸';
color: var(--crimson);
font-size: 10px;
}

.price-features li.disabled {
opacity: 0.3;
text-decoration: line-through;
}

.price-btn {
width: 100%;
font-family: 'Bebas Neue', sans-serif;
font-size: 16px;
letter-spacing: 3px;
border: 1px solid var(--dim);
background: transparent;
color: var(--white);
padding: 14px;
cursor: pointer;
transition: all 0.2s;
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.price-btn:hover { background: var(--crimson); border-color: var(--crimson); }

.price-card.highlighted .price-btn {
background: var(--crimson);
border-color: var(--crimson);
}

/* ── TECH STACK ── */
#stack {
background: var(--steel);
padding: 100px 60px;
}

.stack-grid {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: 2px; margin-top: 60px;
}

.stack-item {
background: var(--obsidian);
padding: 32px 20px;
text-align: center;
border: 1px solid #1a1a1a;
transition: border-color 0.3s;
}

.stack-item:hover { border-color: var(--blood); }

.stack-icon {
font-size: 28px; margin-bottom: 12px;
}

.stack-name {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 2px;
color: var(--dim);
text-transform: uppercase;
}

/* ── CTA SECTION ── */
#cta {
background: var(--crimson);
padding: 100px 60px;
position: relative;
overflow: hidden;
text-align: center;
}

#cta::before {
content: 'NEXCORE';
font-family: 'Bebas Neue', sans-serif;
font-size: 300px;
color: rgba(0,0,0,0.15);
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
pointer-events: none;
}

#cta .sec-title {
font-size: clamp(48px, 7vw, 96px);
color: var(--white);
position: relative; z-index: 2;
}

#cta p {
font-size: 16px; color: rgba(255,255,255,0.7);
font-weight: 300; margin: 24px 0 48px;
position: relative; z-index: 2;
}

.cta-btns {
display: flex; gap: 16px; justify-content: center;
position: relative; z-index: 2;
}

.btn-white {
font-family: 'Bebas Neue', sans-serif;
font-size: 16px; letter-spacing: 3px;
background: var(--obsidian); color: var(--white);
border: none; padding: 16px 48px; cursor: pointer;
clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
transition: background 0.2s;
}

.btn-white:hover { background: #1a1a1a; }

.btn-outline-white {
font-family: 'Bebas Neue', sans-serif;
font-size: 16px; letter-spacing: 3px;
background: transparent; color: var(--white);
border: 2px solid rgba(255,255,255,0.5); padding: 16px 48px; cursor: pointer;
clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
transition: all 0.2s;
}

.btn-outline-white:hover {
background: rgba(255,255,255,0.15);
border-color: white;
}

/* ── FOOTER ── */
footer {
background: var(--obsidian);
border-top: 1px solid #1a1a1a;
padding: 80px 60px 40px;
}

.footer-top {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px; margin-bottom: 60px;
}

.footer-brand .logo-text {
font-size: 20px; display: block; margin-bottom: 16px;
}

.footer-brand p {
font-size: 13px; color: var(--grey); line-height: 1.7;
font-weight: 300; max-width: 280px; margin-bottom: 24px;
}

.footer-social {
display: flex; gap: 12px;
}

.social-btn {
width: 36px; height: 36px;
border: 1px solid #2a2a2a;
display: flex; align-items: center; justify-content: center;
color: var(--dim); font-size: 12px;
transition: all 0.2s; cursor: pointer;
clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
}

.social-btn:hover { border-color: var(--crimson); color: var(--crimson); }

.footer-col h5 {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 3px;
color: var(--white); text-transform: uppercase;
margin-bottom: 24px;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }

.footer-col a {
font-size: 13px; color: var(--grey);
text-decoration: none; transition: color 0.2s;
}

.footer-col a:hover { color: var(--crimson); }

.footer-bottom {
border-top: 1px solid #1a1a1a;
padding-top: 32px;
display: flex; justify-content: space-between; align-items: center;
}

.footer-bottom p {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 2px;
color: var(--dim); text-transform: uppercase;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}

.fade-up { animation: fadeUp 0.8s ease forwards; }
.delay-1 { animation-delay: 0.1s; opacity: 0; }
.delay-2 { animation-delay: 0.2s; opacity: 0; }
.delay-3 { animation-delay: 0.3s; opacity: 0; }
.delay-4 { animation-delay: 0.4s; opacity: 0; }

/* ── HAMBURGER BUTTON ── */
/* Mobile nav hidden on desktop */
.mobile-nav { visibility: hidden; }
.mobile-nav.open { visibility: visible; }
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px; height: 40px;
background: none; border: none;
cursor: pointer;
padding: 6px;
z-index: 200;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.hamburger span {
display: block;
width: 100%; height: 2px;
background: var(--white);
border-radius: 1px;
transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE NAV DRAWER ── */
.mobile-nav {
display: flex;
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(10,10,10,0.98);
backdrop-filter: blur(16px);
z-index: 150;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.mobile-nav.open {
opacity: 1;
pointer-events: all;
}
.mobile-nav ul {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.mobile-nav ul a {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2rem, 8vw, 3rem);
letter-spacing: 4px;
color: var(--white);
text-decoration: none;
transition: color 0.2s;
}
.mobile-nav ul a:hover { color: var(--crimson); }
.mobile-nav .mobile-nav-cta {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--white);
background: var(--crimson);
border: none;
padding: 0.875rem 2rem;
cursor: pointer;
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
transition: background 0.2s;
margin-top: 1rem;
}
[data-theme="light"] .mobile-nav { background: rgba(247,247,247,0.98); }
[data-theme="light"] .mobile-nav ul a { color: #111; }
[data-theme="light"] .hamburger span { background: #111; }

/* ── RESPONSIVE IMAGES ── */
img, svg { max-width: 100%; height: auto; }

/* ── TABLET (≤ 768px) ── */
@media (max-width: 768px) {
nav { padding: 1rem 1.25rem; }
.nav-links { display: none; }
.hamburger { display: flex; }
#desktopCta { display: none; }

.hero { padding: 0 1.25rem 4rem; }
.hero-eyebrow { margin-bottom: 2.5rem; }
.hero-sub-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 2rem;
}
.hero-desc { font-size: 1rem; max-width: 100%; }
.hero-stats { gap: 2rem; flex-wrap: wrap; }
.stat-num { font-size: 2.5rem; }
.hero-scroll { display: none; }

.section { padding: 5rem 1.25rem; }
#stack { padding: 5rem 1.25rem; }
#clients { padding: 3.5rem 1.25rem; }
#cta { padding: 5rem 1.25rem; }
footer { padding: 4rem 1.25rem 2rem; }

.products-intro {
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}
.products-intro-text { max-width: 100%; }
.products-grid { grid-template-columns: 1fr 1fr; }
.prod-card.featured { grid-column: span 2; }
.prod-card.featured .prod-name { font-size: 2rem; }

.why-content { grid-template-columns: 1fr; gap: 3rem; }
.why-slash { display: none; }

.pricing-grid { grid-template-columns: 1fr; gap: 1rem; }
.price-card { padding: 2rem 1.5rem; }
.price-card:hover { transform: none; }

.stack-grid { grid-template-columns: repeat(3, 1fr); }
#stack .sec-label,
#stack .sec-title { padding: 0 !important; }

.clients-row { gap: 2rem; }

.footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
.footer-brand { grid-column: span 2; }
.footer-bottom { flex-direction: column; gap: 0.75rem; text-align: center; }

.cta-btns { flex-direction: column; align-items: center; gap: 0.75rem; }
.btn-white, .btn-outline-white { width: 100%; max-width: 18rem; padding: 1rem 2rem; }
}

/* ── MOBILE (≤ 480px) ── */
@media (max-width: 480px) {
nav { padding: 0.875rem 1rem; }

.logo-text { font-size: 1.125rem; letter-spacing: 2px; }
.logo-mark { width: 28px; height: 28px; }

.hero { padding: 0 1rem 3.5rem; }
.hero-eyebrow { font-size: 0.625rem; margin-bottom: 2rem; }
.hero-headline { letter-spacing: -1px; line-height: 0.9; }
.hero-stats { gap: 1.25rem; }
.stat-num { font-size: 2rem; }
.stat-label { font-size: 0.5rem; }

.section { padding: 4rem 1rem; }
#stack { padding: 4rem 1rem; }
#clients { padding: 3rem 1rem; }
#cta { padding: 4rem 1rem; }
footer { padding: 3rem 1rem 2rem; }

.sec-title { font-size: clamp(2rem, 10vw, 3rem); }

.products-grid { grid-template-columns: 1fr; }
.prod-card.featured { grid-column: span 1; }
.prod-card { padding: 2rem 1.5rem; }
.prod-card.featured .prod-name { font-size: 1.75rem; }
.prod-name { font-size: 1.5rem; }
.prod-desc { font-size: 1rem; }
.prod-features li { font-size: 0.625rem; }
/* Touch-friendly: larger tap targets */
.why-cta-btn, .price-btn, .btn-white, .btn-outline-white, .nav-cta { min-height: 3rem; }
a, button { touch-action: manipulation; }

.why-num { font-size: 2.5rem; min-width: 2.5rem; }

.stack-grid { grid-template-columns: repeat(2, 1fr); }
#stack .sec-label,
#stack .sec-title { padding: 0 !important; }

.clients-row { gap: 1.25rem; }
.client-logo { font-size: 0.875rem; }

.footer-top { grid-template-columns: 1fr; }
.footer-brand { grid-column: span 1; }

.price-amount { font-size: 3rem; }

#cta::before { font-size: 8rem; }
}

/* scroll reveal via IntersectionObserver applied via JS */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* =====================================================================
   v2 LAYER — dynamic site
   Everything below was added when the page became database-driven:
   the animated hero, the About / Core Values / Contact sections, the
   per-product pricing blocks and the lead form.
   Appended last on purpose, so it wins over the older rules it replaces.
   ===================================================================== */

/* ── A11y ── */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--crimson); color: #fff;
padding: 0.75rem 1.25rem;
font-size: 0.8125rem; letter-spacing: 1px; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

:focus-visible {
outline: 2px solid var(--crimson);
outline-offset: 3px;
}

/* ── Nav ── */
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }

nav.scrolled { border-bottom-color: var(--crimson); }

.logo-img { height: 34px; width: auto; display: block; }

a.nav-cta,
a.mobile-nav-cta {
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────
   HERO — cinematic headline
   Each line rides inside an overflow-hidden mask and slides up from
   below on load; line 2 then keeps cycling through its words.
   ───────────────────────────────────────────────────────────────── */
.hero-headline { display: block; }

.hero-headline .line-mask {
display: block;
overflow: hidden;
/* Bebas descenders would otherwise get clipped by the mask. */
padding-bottom: 0.04em;
}

.hero-headline .line-inner {
display: block;
transform: translateY(110%);
opacity: 0;
transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.75s ease;
will-change: transform;
}

.hero-headline.in .line-inner { transform: translateY(0); opacity: 1; }

/* Line 2: the rotating word.
   The hidden probe stacks every word in one grid cell so the line keeps
   the width of the longest one and nothing reflows mid-swap. Both rules
   need the probe to exist, so with JS off the word simply sits inline. */
.hero-headline .line-red { position: relative; }

.rotator-probe { display: inline-grid; visibility: hidden; height: 0; }
.rotator-probe > span { grid-area: 1 / 1; }

.rotator-probe + .rotator {
position: absolute;
left: 0; top: 0;
transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.42s ease;
}
.rotator-probe + .rotator.out { transform: translateY(-90%); opacity: 0; }
.rotator-probe + .rotator.in  { animation: rotatorIn 0.42s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes rotatorIn {
from { transform: translateY(90%); opacity: 0; }
to   { transform: translateY(0);   opacity: 1; }
}

/* Slow crimson light sweep across the hero. */
.hero-beam {
position: absolute; inset: 0;
pointer-events: none;
background: linear-gradient(105deg, transparent 42%, rgba(204,0,0,0.14) 50%, transparent 58%);
background-size: 260% 100%;
animation: heroBeam 11s ease-in-out infinite;
}
@keyframes heroBeam {
0%   { background-position: 130% 0; }
100% { background-position: -50% 0; }
}
[data-theme="light"] .hero-beam { background-image: linear-gradient(105deg, transparent 42%, rgba(204,0,0,0.07) 50%, transparent 58%); }

.hero-eyebrow { animation: fadeIn 0.9s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hero-sub-left { max-width: 460px; }

.hero-actions { display: flex; gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap; }

/* ── Buttons ── */
.btn-primary, .btn-ghost {
display: inline-flex; align-items: center; justify-content: center;
padding: 0.875rem 1.75rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.6875rem; letter-spacing: 2px; text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.btn-primary { background: var(--crimson); color: #fff; }
.btn-primary:hover { background: var(--ember); transform: translateY(-2px); }
.btn-primary.wide { width: 100%; padding: 1rem; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-ghost { background: transparent; color: var(--white); border-color: var(--dim); }
.btn-ghost:hover { border-color: var(--crimson); color: var(--crimson); }

/* ── Section intro paragraph ── */
.sec-intro {
max-width: 620px;
margin-top: 1.25rem;
font-size: 0.9375rem; line-height: 1.75; font-weight: 300;
color: var(--grey);
}

/* ── Product cards ── */
.prod-icon { color: var(--crimson); }
.prod-icon svg { width: 48px; height: 48px; }

.prod-actions {
display: flex; flex-wrap: wrap; gap: 0.5rem;
margin-top: 1.75rem;
}

.prod-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 0.6875rem 1.125rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.625rem; letter-spacing: 1.5px; text-transform: uppercase;
text-decoration: none;
color: var(--white);
border: 1px solid var(--dim);
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.prod-btn:hover { border-color: var(--crimson); color: var(--crimson); }
.prod-btn.primary { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.prod-btn.primary:hover { background: var(--ember); border-color: var(--ember); color: #fff; }
.prod-btn.link { border-color: transparent; color: var(--grey); padding-left: 0.5rem; padding-right: 0.5rem; }
.prod-btn.link:hover { color: var(--crimson); }

/* ── About / Mission / Vision ── */
.about-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 4rem; align-items: start;
}
.about-body {
margin-top: 1.5rem;
font-size: 0.9375rem; line-height: 1.85; font-weight: 300;
color: var(--grey);
}
.about-right { display: flex; flex-direction: column; gap: 1.25rem; }

.mv-card {
background: var(--steel);
border: 1px solid var(--ash);
border-left: 3px solid var(--crimson);
padding: 2rem;
}
.mv-label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.625rem; letter-spacing: 3px; text-transform: uppercase;
color: var(--crimson);
margin-bottom: 0.875rem;
}
.mv-text { font-size: 1rem; line-height: 1.8; font-weight: 300; color: var(--white); }

/* ── Core values ── */
.values-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1px;
margin-top: 3.5rem;
background: var(--ash);
border: 1px solid var(--ash);
}
.value-card {
background: var(--obsidian);
padding: 2.25rem 1.75rem;
transition: background 0.25s;
}
.value-card:hover { background: var(--steel); }
.value-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.25rem; line-height: 1;
color: var(--crimson);
margin-bottom: 1rem;
}
.value-card h4 { font-size: 1rem; font-weight: 600; margin-bottom: 0.625rem; color: var(--white); }
.value-card p { font-size: 0.875rem; line-height: 1.7; font-weight: 300; color: var(--grey); }

/* ── Pricing, grouped per product ── */
.price-block { margin-top: 3.5rem; }

.price-block-head {
display: flex; align-items: baseline; gap: 1rem;
padding-bottom: 1rem; margin-bottom: 1.75rem;
border-bottom: 1px solid var(--ash);
}
.price-block-head h3 {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem; letter-spacing: 1px; color: var(--white);
}
.price-block-head span {
font-family: 'JetBrains Mono', monospace;
font-size: 0.625rem; letter-spacing: 2px; text-transform: uppercase;
color: var(--crimson);
}

.pricing-grid.cols-1 { grid-template-columns: minmax(0, 26rem); }
.pricing-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.price-card { position: relative; }

.price-badge {
position: absolute; top: -0.6875rem; left: 2rem;
background: var(--crimson); color: #fff;
padding: 0.25rem 0.75rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.5625rem; letter-spacing: 1.5px; text-transform: uppercase;
}

a.price-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 100%; text-decoration: none;
}

/* ── Technology chips ── */
.stack-item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.375rem;
padding: 1.75rem 1rem;
}
.stack-name { font-size: 0.9375rem; font-weight: 500; color: var(--white); }
.stack-cat {
font-family: 'JetBrains Mono', monospace;
font-size: 0.5625rem; letter-spacing: 2px; text-transform: uppercase;
color: var(--grey);
}

/* ── Contact ── */
.contact-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 4rem; align-items: start;
}

.contact-list { list-style: none; margin-top: 2.5rem; }
.contact-list li {
display: grid; grid-template-columns: 5.5rem 1fr;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--ash);
font-size: 0.9375rem; font-weight: 300; line-height: 1.7;
color: var(--white);
}
.contact-list li span {
font-family: 'JetBrains Mono', monospace;
font-size: 0.5625rem; letter-spacing: 2px; text-transform: uppercase;
color: var(--grey);
padding-top: 0.3rem;
}
.contact-list a { color: var(--white); text-decoration: none; }
.contact-list a:hover { color: var(--crimson); border-color: var(--crimson); }

.contact-social { display: flex; gap: 1rem; margin-top: 2rem; }
.contact-social a {
font-family: 'JetBrains Mono', monospace;
font-size: 0.6875rem; letter-spacing: 2px; text-transform: uppercase;
color: var(--grey); text-decoration: none;
padding: 0.625rem 1rem;
border: 1px solid var(--ash);
transition: color 0.2s, border-color 0.2s;
}
.contact-social a:hover { color: var(--crimson); border-color: var(--crimson); }

/* ── Lead form ── */
.lead-form {
background: var(--steel);
border: 1px solid var(--ash);
padding: 2.25rem;
}
.form-row { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.125rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-row label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.5625rem; letter-spacing: 2px; text-transform: uppercase;
color: var(--grey);
}
.form-row label span { color: var(--crimson); }

.form-row input,
.form-row select,
.form-row textarea {
width: 100%;
background: var(--obsidian);
border: 1px solid var(--ash);
color: var(--white);
font-family: 'Inter', sans-serif;
font-size: 0.9375rem;
padding: 0.8125rem 0.875rem;
transition: border-color 0.2s;
}
.form-row textarea { resize: vertical; min-height: 6rem; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { outline: none; border-color: var(--crimson); }

.form-hint { font-size: 0.75rem; color: var(--grey); margin: 0 0 1.25rem; font-weight: 300; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp-field {
position: absolute !important;
left: -10000px; top: auto;
width: 1px; height: 1px; overflow: hidden;
}

.form-note {
padding: 1rem 1.25rem;
margin-bottom: 1.25rem;
font-size: 0.875rem; line-height: 1.6;
border-left: 3px solid;
}
.form-note.ok  { background: rgba(0,150,60,0.10); border-color: #00A94F; color: var(--white); }
.form-note.err { background: rgba(204,0,0,0.10);  border-color: var(--crimson); color: var(--white); }

/* ── Footer ── */
.footer-logo { height: 34px; width: auto; margin-bottom: 1.25rem; }
a.social-btn {
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none;
}

/* ── Light theme for everything above ── */
[data-theme="light"] .mv-card { background: #fff; border-color: #e2e2e2; }
[data-theme="light"] .mv-text { color: #111; }
[data-theme="light"] .values-grid { background: #e2e2e2; border-color: #e2e2e2; }
[data-theme="light"] .value-card { background: #fff; }
[data-theme="light"] .value-card:hover { background: #fafafa; }
[data-theme="light"] .value-card h4 { color: #111; }
[data-theme="light"] .value-card p,
[data-theme="light"] .about-body,
[data-theme="light"] .sec-intro,
[data-theme="light"] .form-hint { color: #666; }
[data-theme="light"] .price-block-head { border-bottom-color: #e2e2e2; }
[data-theme="light"] .price-block-head h3 { color: #111; }
[data-theme="light"] .stack-name { color: #111; }
[data-theme="light"] .stack-cat { color: #999; }
[data-theme="light"] .contact-list li { color: #111; border-bottom-color: #e2e2e2; }
[data-theme="light"] .contact-list a { color: #111; border-bottom-color: #ccc; }
[data-theme="light"] .contact-social a { border-color: #ddd; color: #666; }
[data-theme="light"] .lead-form { background: #fff; border-color: #e2e2e2; }
[data-theme="light"] .form-row input,
[data-theme="light"] .form-row select,
[data-theme="light"] .form-row textarea { background: #F7F7F7; border-color: #ddd; color: #111; }
[data-theme="light"] .form-note.ok,
[data-theme="light"] .form-note.err { color: #111; }
[data-theme="light"] .btn-ghost { color: #111; border-color: #ccc; }
[data-theme="light"] .prod-btn { color: #111; border-color: #ccc; }
[data-theme="light"] .prod-btn.link { color: #777; border-color: transparent; }

/* ── Motion preferences ──
   Users who ask for reduced motion get the finished layout with no
   movement at all: the headline is already in place, nothing sweeps. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}
.hero-headline .line-inner { transform: none; opacity: 1; }
.hero-beam { display: none; }
.reveal { opacity: 1; transform: none; }
}

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {
.about-grid,
.contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.pricing-grid.cols-2,
.pricing-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Tablet / mobile (≤ 768px) ── */
@media (max-width: 768px) {
.hero-sub-left { max-width: 100%; }
.hero-actions { width: 100%; }
.btn-primary, .btn-ghost { flex: 1 1 auto; min-height: 3rem; }

/* These have to be repeated here: the .cols-* rules above are more
   specific than the older single-column .pricing-grid mobile rule. */
.pricing-grid.cols-1,
.pricing-grid.cols-2,
.pricing-grid.cols-3 { grid-template-columns: minmax(0, 1fr); }

.price-block { margin-top: 2.5rem; }
.price-block-head { flex-direction: column; align-items: flex-start; gap: 0.375rem; }

.values-grid { grid-template-columns: 1fr 1fr; margin-top: 2.5rem; }
.mv-card { padding: 1.5rem; }
.lead-form { padding: 1.5rem; }
.form-row-2 { grid-template-columns: 1fr; gap: 0; }
.prod-btn { min-height: 2.75rem; }
}

/* ── Small phones (≤ 480px) ── */
@media (max-width: 480px) {
.values-grid { grid-template-columns: 1fr; }
.contact-list li { grid-template-columns: 1fr; gap: 0.25rem; }
.contact-list li span { padding-top: 0; }
.hero-actions { flex-direction: column; }
.btn-primary, .btn-ghost { width: 100%; }
.prod-actions { flex-direction: column; }
.prod-btn { width: 100%; }
.logo-img, .footer-logo { height: 28px; }
.price-block-head h3 { font-size: 1.625rem; }
}

/* =====================================================================
   v3 LAYER
   - Technology icons
   - Ambient hero motion (gentle, randomised, never-ending)
   - Mobile hero / nav overlap fixes
   ===================================================================== */

/* ── Technology icons ───────────────────────────────────────────── */
.stack-item { gap: 0.75rem; padding: 2rem 1rem 1.75rem; }

.stack-icon {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
color: var(--crimson);
transition: transform 0.3s ease, color 0.3s ease;
}
.stack-icon svg { width: 100%; height: 100%; display: block; }

.stack-item:hover .stack-icon { transform: translateY(-3px) scale(1.06); }

/* Wordmark glyphs (php / JS / jQ) must not inherit the stroke settings. */
.stack-icon svg text { stroke: none; }

[data-theme="light"] .stack-icon { color: var(--crimson); }

/* -----------------------------------------------------------------
   HERO - choreographed motion
   Replaces the earlier version, which moved ONE random line at a time.
   Individually twitching lines read as restless rather than designed,
   so the headline now performs a single coordinated sequence: all four
   lines take the same movement, staggered a beat apart, so it sweeps
   through the block like a wave. Then a long rest, then another.

   Three choreographies, each slower than the whole of the old set, on
   an easeInOutQuint curve - slow out, quick through the middle, slow
   back in. Every keyframe ends exactly where it started, so nothing
   drifts out of position over a long session.
   ----------------------------------------------------------------- */

/* The headline breathes continuously so it is never completely static
   between sequences. 7px over 11s - felt, not watched. */
@keyframes heroBreathe {
0%, 100% { transform: translate3d(0, 0, 0); }
50%      { transform: translate3d(0, -7px, 0); }
}
.hero-headline { animation: heroBreathe 11s ease-in-out infinite; }

/* Sideways wipe with a slight lean into the direction of travel. */
@keyframes heroWave {
0%   { transform: translateX(0)      skewX(0deg);  opacity: 1; }
44%  { transform: translateX(106%)   skewX(-7deg); opacity: 0; }
56%  { transform: translateX(-106%)  skewX(7deg);  opacity: 0; }
100% { transform: translateX(0)      skewX(0deg);  opacity: 1; }
}

/* Rises away and settles back from below, shrinking slightly as it goes
   so it reads as depth rather than a flat slide. */
@keyframes heroLift {
0%   { transform: translateY(0)      scale(1);    opacity: 1; }
44%  { transform: translateY(-112%)  scale(0.94); opacity: 0; }
56%  { transform: translateY(112%)   scale(0.94); opacity: 0; }
100% { transform: translateY(0)      scale(1);    opacity: 1; }
}

/* Rolls over on its own horizontal axis, like a split-flap board. */
@keyframes heroUnfold {
0%   { transform: perspective(900px) rotateX(0deg)   translateY(0);    opacity: 1; }
44%  { transform: perspective(900px) rotateX(82deg)  translateY(-28%); opacity: 0; }
56%  { transform: perspective(900px) rotateX(-82deg) translateY(28%);  opacity: 0; }
100% { transform: perspective(900px) rotateX(0deg)   translateY(0);    opacity: 1; }
}

/* The 44% -> 56% gap holds each line off screen for a moment before it
   returns. That pause is what stops the movement feeling hurried. */
.hero-headline .line-inner.is-moving {
animation-duration: 3.2s;
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
animation-fill-mode: both;
will-change: transform, opacity;
}

.line-inner.anim-wave   { animation-name: heroWave; }
.line-inner.anim-lift   { animation-name: heroLift; }
.line-inner.anim-unfold { animation-name: heroUnfold; animation-duration: 3.6s; }

/* The rotating word changes while its line is off screen, so its own
   transition only has to cover the no-JS case. */
.rotator-probe + .rotator { transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.5s ease; }

/* ─────────────────────────────────────────────────────────────────
   HERO — layout
   padding-top clears the fixed nav. This is the actual overlap fix:
   .hero is min-height:100vh with justify-content:flex-end, so as soon
   as the content is taller than the viewport there is no free space
   left, flex-end stops applying, and the first line lands at y=0 —
   directly underneath the fixed bar. Padding keeps it clear whether
   the content overflows or not.
   ───────────────────────────────────────────────────────────────── */
.hero { padding-top: 5rem; }

/* ── Motion preferences ── */
@media (prefers-reduced-motion: reduce) {
.hero-headline .line-inner.is-moving { animation: none !important; }
.stack-item:hover .stack-icon { transform: none; }
}

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {
.stack-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Tablet / mobile (≤ 768px) ── */
@media (max-width: 768px) {
/* The desktop CTA used to be hidden by #desktopCta. It is an <a class="nav-cta">
   now, so it needs hiding by class - otherwise it stays in the bar at full
   width, pushes the hamburger off screen and makes the whole page scroll
   sideways. The mobile drawer carries its own Book a Demo.

   Must be written as a.nav-cta: the rule that shows it is `a.nav-cta,
   a.mobile-nav-cta { display: inline-flex }`, and an element+class selector
   outranks a bare class no matter which comes later in the file. */
a.nav-cta { display: none; }

.hero {
    /* Clear the fixed bar, and stop pinning content to the bottom: on a
       phone the hero is taller than the screen, so top-alignment is what
       actually reads correctly. */
    padding: 6.75rem 1.25rem 4rem;
    justify-content: flex-start;
}

/* 80px was the old floor, which put four lines at ~290px on a 360px-wide
   phone before any other content. */
.hero-headline { font-size: clamp(3rem, 12.5vw, 5.5rem); }
.hero-eyebrow { margin-bottom: 1.75rem; }

/* The stats are right-aligned on desktop because they sit at the end of a
   row. Stacked under the copy on a phone that reads as ragged, so they go
   back to a plain left-aligned three-up grid. */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 0.75rem;
    width: 100%;
}
.stat-item { text-align: left; }
.stat-label { line-height: 1.5; }

.stack-grid { grid-template-columns: repeat(3, 1fr); }
.stack-icon { width: 38px; height: 38px; }
}

/* ── Small phones (≤ 480px) ── */
@media (max-width: 480px) {
.hero { padding: 6rem 1rem 3.5rem; }
.hero-headline { font-size: clamp(2.5rem, 13.5vw, 3.75rem); letter-spacing: -1px; line-height: 0.92; }
.hero-eyebrow { margin-bottom: 1.5rem; }

.stack-grid { grid-template-columns: repeat(2, 1fr); }
.stack-item { padding: 1.5rem 0.75rem 1.25rem; }
}

/* ── Admin: icon preview cell ── */
.icon-cell {
width: 26px; height: 26px;
color: #CC0000;
margin-bottom: 6px;
}
.icon-cell svg { width: 100%; height: 100%; display: block; }
.icon-cell svg text { stroke: none; }

/* =====================================================================
   v4 LAYER — mobile drawer close button, back-to-top
   ===================================================================== */

/* ── Mobile drawer close button ──
   The drawer is z-index 150 and the nav bar is 100, so the hamburger that
   opened it is covered over. Without this there is no way out of the menu
   except the browser back button or picking a link. */
.mobile-nav-close {
position: absolute; top: 1.25rem; right: 1.25rem;
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px;
background: transparent;
border: 1px solid var(--ash);
border-radius: 50%;
color: var(--white);
cursor: pointer;
transition: color 0.25s, border-color 0.25s, transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
-webkit-tap-highlight-color: transparent;
}
.mobile-nav-close svg { width: 22px; height: 22px; display: block; }
.mobile-nav-close:hover,
.mobile-nav-close:focus-visible {
color: var(--crimson);
border-color: var(--crimson);
transform: rotate(90deg);
}

[data-theme="light"] .mobile-nav-close { color: #111; border-color: #ddd; }
[data-theme="light"] .mobile-nav-close:hover { color: var(--crimson); border-color: var(--crimson); }

/* ── Back to top ──
   Below the drawer (150) and the nav (100) on purpose, so an open menu
   covers it rather than floating a stray button over the overlay. */
.to-top {
position: fixed; right: 1.75rem; bottom: 1.75rem;
z-index: 90;
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px;
padding: 0;
background: var(--crimson);
color: #fff;
border: none;
cursor: pointer;
clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
opacity: 0;
visibility: hidden;
transform: translateY(14px);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.76, 0, 0.24, 1),
            visibility 0.35s, background 0.2s;
-webkit-tap-highlight-color: transparent;
}
.to-top svg { width: 20px; height: 20px; display: block; }
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--ember); }
.to-top:active { transform: translateY(2px); }

@media (max-width: 480px) {
.to-top { right: 1rem; bottom: 1rem; width: 44px; height: 44px; }
.to-top svg { width: 18px; height: 18px; }
.mobile-nav-close { top: 0.875rem; right: 1rem; width: 44px; height: 44px; }
}

/* Users who asked for less motion get the layout, not the movement. */
@media (prefers-reduced-motion: reduce) {
.hero-headline { animation: none; }
.mobile-nav-close:hover { transform: none; }
.to-top { transition: opacity 0.01ms, visibility 0.01ms; transform: none; }
.to-top.show { transform: none; }
}