kicker / h1 / .bs-hero-sub / cta
scroll
*/
.bs-hero {
position: relative; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw);
min-height: min(88vh, 820px); display: flex; align-items: center;
justify-content: center; text-align: center; padding: 120px 20px 100px;
background: radial-gradient(1100px 520px at 50% -8%, #12303177, transparent 70%),
radial-gradient(900px 480px at 82% 108%, #0e243855, transparent 70%),
linear-gradient(180deg, #0a0e14 0%, #0b1119 55%, #0a0e14 100%);
}
/* A hero on a LANDING page has to introduce the page without burying it.
.bs-hero-compact keeps the look but gets out of the way. */
.bs-hero-compact { min-height: min(46vh, 430px); padding: 62px 20px 54px; }
.bs-hero-layer { position: absolute; inset: -6% -2%; pointer-events: none; will-change: transform; }
/* the cage: reusable octagon wireframe + floor glow as a data-URI (accent
green is baked in — data URIs can't read CSS vars) */
.bs-hero-cage {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 640' preserveAspectRatio='xMidYMid slice'%3E%3Cg transform='rotate(-2 600 360)' fill='none' stroke='%2300e5a0'%3E%3Cpolygon points='849,463 703,609 497,609 351,463 351,257 497,111 703,111 849,257' stroke-opacity='.13' stroke-width='10'/%3E%3Cpolygon points='849,463 703,609 497,609 351,463 351,257 497,111 703,111 849,257' stroke-opacity='.34' stroke-width='2'/%3E%3Cpolygon points='809,447 687,569 513,569 391,447 391,273 513,151 687,151 809,273' stroke-opacity='.09' stroke-width='1.5'/%3E%3C/g%3E%3Cellipse cx='600' cy='520' rx='430' ry='86' fill='%2300e5a0' fill-opacity='.055'/%3E%3Cg stroke='%2300e5a0' stroke-opacity='.15' stroke-width='2'%3E%3Cline x1='80' y1='600' x2='80' y2='612'/%3E%3Cline x1='160' y1='596' x2='160' y2='612'/%3E%3Cline x1='240' y1='602' x2='240' y2='612'/%3E%3Cline x1='960' y1='600' x2='960' y2='612'/%3E%3Cline x1='1040' y1='596' x2='1040' y2='612'/%3E%3Cline x1='1120' y1='602' x2='1120' y2='612'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover; background-position: center;
}
.bs-hero-grid {
background: linear-gradient(#12202e55 1px, transparent 1px),
linear-gradient(90deg, #12202e55 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(75% 65% at 50% 45%, #000 30%, transparent 100%);
-webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 30%, transparent 100%);
}
.bs-hero-shade {
background: linear-gradient(180deg, #0a0e1488 0%, #0a0e1420 30%,
#0a0e1444 68%, var(--bg) 98%);
}
.bs-hero-inner { position: relative; z-index: 3; max-width: 900px; width: 100%; }
.bs-hero .bs-kicker { color: var(--accent); font-size: 12px; letter-spacing: .34em; }
.bs-hero h1 {
margin: 22px 0 10px; font-weight: 250; letter-spacing: -.02em;
font-size: clamp(44px, 9vw, 100px); line-height: 1.0; color: var(--text);
}
.bs-hero h1 em {
font-style: italic; font-family: Georgia, "Times New Roman", serif;
font-weight: 400; color: var(--accent); text-shadow: 0 0 44px #00e5a055;
}
.bs-hero-sub {
color: var(--dim); font-size: clamp(15px, 2vw, 19px); line-height: 1.6;
max-width: 640px; margin: 18px auto 30px;
}
.bs-hero-sub b { color: var(--text); font-weight: 650; }
.bs-hero-sub .num { color: var(--accent); }
.bs-scrolldown {
position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
color: var(--dim); font: 600 10px var(--mono); letter-spacing: .3em;
text-transform: uppercase; z-index: 3;
}
.bs-scrolldown::after {
content: ""; display: block; width: 1px; height: 34px; margin: 8px auto 0;
background: linear-gradient(var(--accent), transparent);
}
/* =============================== CARD ================================= */
/* Elevated panel — the building block for everything boxed. */
.bs-card {
background: var(--panel); border: 1px solid var(--line);
border-radius: 12px; padding: 22px 24px;
}
/* ============================== COUNTER =============================== */
/* Boxed big number.