/* ============================================================
cyber.koscak.ai - landing stylesheet
Consolidated 2026-07-23: one uniform format, exact-duplicate rules
removed (cascade-preserving - source order untouched), graffiti
comments retired. Tokens live in :root at the top.
Edit discipline: append to the matching section, never re-declare
a selector that already exists - extend it in place.
============================================================ */
:root {
--g: #76b900;
--g-dim: rgba(118,185,0,.12);
--g-line: rgba(118,185,0,.25);
--g-dark: #4a7a00;
--g-light: #ccff44;
--b: #4488ff;
--red: #ff5555;
--amber: #fbbf24;
--bg: #000000;
--bg-1: #0a0a0a;
--bg-2: #111213;
--bg-3: #1c1c1e;
--bg-4: #2c2c2e;
--t1: #f5f5f7;
--t2: rgba(245,245,247,.72);
--t3: rgba(245,245,247,.45);
--t4: rgba(245,245,247,.25);
--sep: rgba(255,255,255,.24);
--sep-soft: rgba(255,255,255,.08);
--line: rgba(255,255,255,.07);
--s1: 8px;
--s2: 16px;
--s3: 24px;
--s4: 32px;
--s5: 40px;
--s6: 48px;
--s7: 56px;
--s8: 64px;
--s10: 80px;
--s12: 96px;
--s16: 128px;
--sec-y: clamp(80px, 12vw, 140px);
--sec-x: clamp(22px, 4vw, 60px);
--max: 1068px;
--e1: cubic-bezier(.4, 0, .6, 1);
--e2: cubic-bezier(0.28, 0.11, 0.32, 1);
--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--r-card: 20px;
--r-pill: 980px;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* dark-only: light theme removed per Phil 2026-04-15 - lex toggle replaces it */
*, *::before, *::after {
margin:0;
padding:0;
box-sizing: border-box;
}
body {
background: var(--bg);
color: var(--t1);
font-family: var(--sans);
font-size: 17px;
line-height: 1.47;
font-weight: 400;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
img, svg {
display: block;
max-width: 100%;
}
button {
font: inherit;
cursor: pointer;
background: none;
border: none;
color: inherit;
}
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* ── type tokens - Apple-grade scale (values extracted from overview.css) ─ */
/* Apple uses 600 weight across the board, NOT 900. Negative ls on headlines/body. */
.t-headline-super {
font-size: clamp(48px, 8vw, 80px);
line-height: 1.05;
font-weight: 600;
letter-spacing: -0.015em;
}
.t-section-h {
font-size: clamp(40px, 5.5vw, 56px);
line-height: 1.0714;
font-weight: 600;
letter-spacing: -0.005em;
}
.t-tile-h {
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.1429;
font-weight: 600;
letter-spacing: 0.007em;
}
.t-tile-sub {
font-size: 17px;
line-height: 1.4706;
font-weight: 600;
letter-spacing: -0.022em;
}
.t-body {
font-size: 17px;
line-height: 1.4706;
font-weight: 400;
letter-spacing: -0.022em;
}
.t-eyebrow {
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.19;
font-weight: 600;
letter-spacing: 0.011em;
}
.t-caption {
font-size: 12px;
line-height: 1.3334;
font-weight: 400;
letter-spacing: -0.01em;
}
/* Dynamic Island-style floating pill nav - centered, sticky, all devices */
.gnav {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 14px);
left: 50%;
transform: translateX(-50%);
height: 52px;
max-width: min(960px, calc(100vw - 32px));
width: auto;
z-index: 9800;
padding: 0 10px 0 22px;
border-radius: 980px;
background: rgba(6, 8, 4, 0.72);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
color: #f5f5f7;
border: 1px solid rgba(255,255,255,0.12);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.5), 0 18px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.25);
transition: background .28s var(--e2), border-color .28s var(--e2);
}
.gnav[data-theme-slice="light"] {
background: rgba(251,251,253,.72);
color: #1d1d1f;
border-bottom-color: rgba(0,0,0,.08);
}
.gnav[data-theme-slice="green"] {
background: rgba(10,18,5,.78);
border-bottom-color: rgba(118,185,0,.2);
}
.gnav__inner {
height: 100%;
display: flex;
align-items: center;
gap: 24px;
}
.gnav__brand {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: -0.015em;
}
.gnav__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--g);
box-shadow: 0 0 8px var(--g);
}
.gnav__name {
color: #f5f5f7;
font-weight: 700;
letter-spacing: -0.01em;
}
.gnav__links {
display: flex;
flex: 1;
justify-content: center;
gap: 2px;
}
.gnav__links a {
padding: 6px 10px;
font-size: 0.78rem;
font-weight: 400;
color: inherit;
opacity: 0.72;
border-radius: 6px;
letter-spacing: -0.01em;
transition: opacity 0.2s var(--e1);
white-space: nowrap;
}
.gnav__links a:hover {
opacity: 1;
}
.gnav__right {
display: flex;
align-items: center;
gap: 6px;
}
.gnav__icon {
width: 28px;
height: 28px;
border-radius: 50%;
color: inherit;
opacity: 0.72;
font-size: 0.85rem;
transition: opacity 0.2s var(--e1);
}
.gnav__icon:hover {
opacity: 1;
}
.gnav__buy {
background: linear-gradient(180deg, #8ed11a 0%, #76b900 55%, #5e9500 100%);
color: #0a0a0a;
padding: 8px 18px;
border-radius: 980px;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: -0.01em;
border: 1px solid rgba(255,255,255,0.24);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.25), 0 4px 12px rgba(118,185,0,0.35);
text-shadow: 0 1px 0 rgba(255,255,255,0.22);
transition: transform .18s var(--e1), box-shadow .18s var(--e1), filter .18s var(--e1);
}
.gnav__buy:hover {
transform: translateY(-1px);
filter: brightness(1.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px rgba(118,185,0,0.5);
}
@media (max-width: 900px) {
.gnav {
padding: 0 8px 0 16px;
height: 48px;
gap: 12px;
}
.gnav__inner {
gap: 12px;
}
.gnav__buy {
padding: 7px 14px;
font-size: 0.72rem;
}
}
/* lnav removed 2026-04-15 - was duplicate nav chrome under gnav */
.sec {
padding: var(--sec-y) var(--sec-x);
position: relative;
}
.sec + .sec {
border-top: 1px solid transparent;
}
.sec-head {
max-width: 720px;
margin: 0 auto var(--s8);
text-align: center;
}
.sec-head__h {
font-size: clamp(40px, 5.5vw, 56px);
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.0714;
margin-bottom: 16px;
}
.sec-head__sub {
font-size: clamp(1rem, 1.3vw, 1.25rem);
color: var(--t2);
line-height: 1.4;
max-width: 560px;
margin: 0 auto;
}
.sc-eyebrow {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--g);
margin-bottom: 12px;
}
.sc-h {
font-size: clamp(40px, 5.5vw, 56px);
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.0714;
margin: 0 0 16px;
color: var(--t1);
}
/* .sc-h em → shared title-em rule (iridescent prism) */
.sc-sub {
font-size: clamp(1rem, 1.25vw, 1.2rem);
color: var(--t2);
max-width: 640px;
line-height: 1.5;
margin: 0 auto;
}
.sc-head {
text-align: center;
max-width: 780px;
margin: 0 auto var(--s10);
}
.sec-welcome {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(140px, 18vh, 220px) var(--sec-x) clamp(72px, 10vw, 140px);
background: #000;
overflow: hidden;
clip-path: inset(0);
position: relative;
--mx: 50%;
--my: 50%;
}
.hero-bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.hero-flicker {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.4;
mix-blend-mode: screen;
will-change: contents;
contain: strict;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,0.5) 55%, transparent 70%);
mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0,0,0,0.5) 55%, transparent 70%);
}
/* hero blobs removed 2026-04-15 - Phil: "too much color noise" */
.hero-blobs, .hero-blob {
display: none !important;
}
.hero-aurora {
position: absolute;
left: 50%;
top: 42%;
transform: translate3d(-50%, -50%, 0);
width: 1400px;
height: 1000px;
max-width: 160vw;
background: radial-gradient(ellipse 40% 32% at 50% 50%, rgba(118,185,0,0.22) 0%, rgba(118,185,0,0.08) 35%, transparent 62%);
animation: auroraBloom 16s ease-in-out infinite alternate;
will-change: transform;
contain: strict;
}
@keyframes auroraBloom {
0% {
transform: translate3d(-50%, -50%, 0) scale(0.95);
opacity: 0.85;
}
100% {
transform: translate3d(-50%, -50%, 0) scale(1.08);
opacity: 1;
}
;
}
.hero-spotlight {
position: absolute;
inset: 0;
background: radial-gradient(circle 600px at var(--mx) var(--my), rgba(118,185,0,0.14) 0%, rgba(118,185,0,0.05) 30%, transparent 60%);
transition: background 0.3s var(--e1);
}
.hero-horizon {
position: absolute;
left: 0;
right: 0;
bottom: 40%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(118,185,0,0.5) 25%, rgba(204,255,68,1) 50%, rgba(118,185,0,0.5) 75%, transparent 100%);
box-shadow: 0 0 24px rgba(118,185,0,0.8), 0 0 80px rgba(118,185,0,0.4), 0 0 140px rgba(118,185,0,0.2);
}
.hero-grid-floor {
position: absolute;
left: 50%;
bottom: -10%;
width: 240vw;
height: 55vh;
transform: translate3d(-50%, 0, 0) perspective(420px) rotateX(62deg);
transform-origin: 50% 0;
background-image: linear-gradient(to right, rgba(118,185,0,0.6) 1px, transparent 1px), linear-gradient(to bottom, rgba(118,185,0,0.6) 1px, transparent 1px);
background-size: 64px 64px;
background-position: 0 0;
animation: gridScroll 16s linear infinite;
-webkit-mask-image: radial-gradient(ellipse 55% 90% at 50% 0%, #000 25%, rgba(0,0,0,0.6) 55%, transparent 95%);
mask-image: radial-gradient(ellipse 55% 90% at 50% 0%, #000 25%, rgba(0,0,0,0.6) 55%, transparent 95%);
will-change: background-position;
contain: strict;
}
@keyframes gridScroll {
from {
background-position: 0 0;
}
to {
background-position: 0 64px;
}
;
}
.hero-vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 55% at 50% 45%, transparent 0%, transparent 40%, rgba(0,0,0,0.6) 100%);
}
.hero-scanlines {
position: absolute;
inset: 0;
background: repeating-linear-gradient( to bottom, transparent 0, transparent 2px, rgba(255,255,255,0.018) 2px, rgba(255,255,255,0.018) 3px );
mix-blend-mode: overlay;
}
.hero-noise {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.05;
mix-blend-mode: overlay;
}
.sec-welcome__copy {
position: relative;
z-index: 3;
}
/* liquid glass eyebrow with pulse dot */
.sw-pulse {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--g);
margin-right: 10px;
vertical-align: middle;
box-shadow: 0 0 0 0 rgba(118,185,0,0.8);
animation: swPulse 2.2s ease-out infinite;
}
@keyframes swPulse {
0% {
box-shadow: 0 0 0 0 rgba(118,185,0,0.8);
}
70% {
box-shadow: 0 0 0 14px rgba(118,185,0,0);
}
100% {
box-shadow: 0 0 0 0 rgba(118,185,0,0);
}
;
}
.sec-welcome__stats {
display: flex;
justify-content: center;
gap: clamp(24px, 4vw, 56px);
margin: clamp(48px, 8vw, 72px) auto 0;
padding: 20px 32px;
max-width: 640px;
background: rgba(10,12,8,0.42);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.4), 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(118,185,0,0.08);
}
.sw-stat {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.sw-stat__num {
font-family: var(--mono);
font-size: clamp(1.8rem, 2.6vw, 2.4rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: var(--g);
text-shadow: 0 0 24px rgba(118,185,0,0.4);
}
.sw-stat__num-sm {
font-size: 0.5em;
opacity: 0.7;
margin-left: 2px;
}
.sw-stat__label {
font-family: var(--mono);
font-size: 0.68rem;
color: var(--t3);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 6px;
}
@media (max-width: 640px) {
.sec-welcome__stats {
gap: 18px;
padding: 16px 20px;
}
.sw-stat__label {
font-size: 0.6rem;
}
}
.sec-welcome__eyebrow {
font-family: var(--sans);
font-size: 21px;
line-height: 1.1905;
font-weight: 600;
letter-spacing: 0.011em;
color: var(--g);
margin-bottom: 16px;
text-transform: none;
}
.sec-welcome__title {
font-size: clamp(36px, 5.6vw, 64px);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.12;
padding-bottom: 0.08em;
margin-bottom: 24px;
color: #fff;
}
/* One phrase per row - never reflow into a third line */
.sec-welcome__title .twol {
display: inline-block;
white-space: nowrap;
}
/* .sec-welcome__title em uses the shared title-em rule below (same as .sc-h em) */
.sec-welcome__sub {
font-size: 17px;
line-height: 1.4706;
letter-spacing: -0.022em;
font-weight: 400;
color: var(--t2);
max-width: none;
width: 100%;
margin: 0 0 40px;
}
.sec-welcome__cta {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.sec-welcome__scroll {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
font-family: var(--mono);
font-size: 0.72rem;
color: var(--t3);
letter-spacing: 0.1em;
animation: scrollBob 2.4s ease-in-out infinite;
white-space: nowrap;
}
@keyframes scrollBob {
0%, 100% {
transform: translateX(-50%) translateY(0);
opacity: .5;
}
50% {
transform: translateX(-50%) translateY(6px);
opacity: 1;
}
;
}
.button {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(180deg, #8ed11a 0%, #76b900 50%, #5e9500 100%);
color: #0a0a0a;
padding: 14px 30px;
border-radius: 980px;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: -0.01em;
white-space: nowrap;
border: 1px solid rgba(255,255,255,0.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.25), inset 0 0 24px rgba(255,255,255,0.18), 0 8px 24px rgba(118,185,0,0.35), 0 2px 6px rgba(0,0,0,0.4);
text-shadow: 0 1px 0 rgba(255,255,255,0.25);
overflow: hidden;
}
.button::before {
content: '';
position: absolute;
inset: 0;
transform: translateX(-120%);
transition: transform .6s var(--e1);
pointer-events: none;
}
.button:hover {
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 0 28px rgba(255,255,255,0.22), 0 14px 32px rgba(118,185,0,0.5), 0 4px 10px rgba(0,0,0,0.45);
filter: brightness(1.06);
}
.button:hover::before {
transform: translateX(120%);
}
.button:active {
transform: translateY(0);
filter: brightness(0.96);
}
.button-secondary {
background: rgba(255,255,255,0.06);
color: var(--t1);
padding: 13px 28px;
font-weight: 500;
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.45);
text-shadow: none;
}
.button-secondary::before {
background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.15) 50%, transparent 80%);
}
.button-secondary:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.32);
filter: none;
}
.arr {
display: inline-block;
transition: transform .2s var(--e1);
}
.button:hover .arr {
transform: translateX(3px);
}
.sec-highlights {
background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(118,185,0,0.08) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 50% 100%, rgba(68,136,255,0.05) 0%, transparent 60%), var(--bg-1);
padding-top: clamp(120px, 16vw, 200px);
padding-bottom: clamp(120px, 16vw, 200px);
position: relative;
overflow: hidden;
}
.sec-highlights::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(118,185,0,0.35) 50%, transparent 100%);
pointer-events: none;
}
.sec-highlights .sec-head {
max-width: 880px;
margin-bottom: clamp(80px, 10vw, 120px);
}
.sec-highlights .sec-head__h {
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 28px;
background: linear-gradient(180deg, #f5f5f7 0%, #f5f5f7 60%, rgba(118,185,0,0.85) 140%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.sec-highlights .sec-head__sub {
font-size: clamp(1.1rem, 1.5vw, 1.35rem);
color: var(--t2);
max-width: 640px;
}
.hl-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1120px;
margin: 0 auto;
position: relative;
}
.hl-grid::before {
content: '';
position: absolute;
left: 16%;
right: 16%;
top: 50%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(118,185,0,0.5) 25%, rgba(204,255,68,0.8) 50%, rgba(118,185,0,0.5) 75%, transparent 100%);
z-index: 0;
pointer-events: none;
}
@media (max-width: 900px) {
.hl-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.hl-grid::before {
display: none;
}
}
.hl {
background: linear-gradient(165deg, rgba(22,28,16,0.9) 0%, rgba(10,14,7,0.95) 100%);
border: 1px solid var(--line);
border-radius: 24px;
padding: clamp(40px, 4.5vw, 56px);
overflow: hidden;
z-index: 1;
box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.hl::after {
content: counter(hl-count, decimal-leading-zero);
counter-increment: hl-count;
position: absolute;
right: -16px;
bottom: -52px;
font-family: var(--mono);
font-size: clamp(150px, 18vw, 220px);
font-weight: 900;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px color-mix(in srgb, var(--accent, var(--g)) 8%, transparent);
pointer-events: none;
z-index: 0;
letter-spacing: -0.05em;
transition: -webkit-text-stroke-color .4s var(--e1);
}
.hl-grid {
counter-reset: hl-count;
}
.hl:hover, .hl.is-tapped {
transform: translateY(-8px);
border-color: var(--accent, var(--g));
box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 60px color-mix(in srgb, var(--accent, var(--g)) 22%, transparent);
}
.hl:hover::after, .hl.is-tapped::after {
-webkit-text-stroke-color: color-mix(in srgb, var(--accent, var(--g)) 30%, transparent);
}
/* always-on orbit defined below, hover/tap just bumps opacity */
.hl > * {
position: relative;
z-index: 1;
}
/* Rolling conic-gradient orbit border - always on, per-card accent color */
.hl:hover::before, .hl.is-tapped::before {
opacity: 1;
}
/* hover bg stays clean, accent color only in border + orbit + shadow */
.hl__eyebrow {
font-family: var(--mono);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--accent, var(--g));
margin-bottom: 16px;
}
.hl__h {
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.05;
margin-bottom: 12px;
}
.hl__unit {
display: block;
font-size: 0.92rem;
font-weight: 400;
color: var(--t2);
margin-top: 4px;
letter-spacing: 0;
}
.hl__copy {
font-size: 0.95rem;
color: var(--t2);
line-height: 1.55;
margin-bottom: 24px;
}
.hl__link {
color: var(--accent, var(--g));
font-size: 0.86rem;
font-weight: 500;
letter-spacing: -0.01em;
transition: opacity .2s var(--e1);
}
.hl__link:hover {
opacity: 0.7;
}
.hl__link:hover .arr {
transform: translateX(3px);
}
.sec-showcase {
background: var(--bg);
padding: var(--sec-y) var(--sec-x);
}
.sc-stage {
max-width: var(--max);
margin: 0 auto var(--s10);
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 64px;
align-items: center;
}
@media (max-width: 900px) {
.sc-stage {
grid-template-columns: 1fr;
gap: 40px;
}
}
.sc-stage__num-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.sc-stage__num {
font-family: var(--mono);
font-size: clamp(5rem, 12vw, 11rem);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 1;
color: var(--g);
text-shadow: 0 0 80px rgba(118,185,0,.18);
}
.sc-stage__num-sm {
font-size: 0.42em;
color: var(--t2);
margin-left: 6px;
font-weight: 500;
}
.sc-stage__num-label {
font-family: var(--mono);
font-size: 0.84rem;
color: var(--t2);
letter-spacing: 0.02em;
}
.sc-stage__art {
width: 100%;
}
.terminal {
background: #000;
border: 1px solid var(--line);
overflow: hidden;
font-family: var(--mono);
font-size: 0.84rem;
line-height: 1.7;
box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px rgba(0,0,0,.7), 0 0 60px rgba(118,185,0,.08);
}
.terminal__bar {
padding: 12px 16px;
display: flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.03);
border-bottom: 1px solid var(--line);
}
.terminal__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #3a3a3a;
}
.terminal__dot--r {
background: #ff5f57;
}
.terminal__dot--y {
background: #febc2e;
}
.terminal__dot--g {
background: #28c840;
}
.terminal__title {
margin-left: 14px;
font-size: 0.74rem;
color: var(--t3);
letter-spacing: 0.04em;
}
.terminal__body {
padding: 20px 24px;
min-height: 480px;
max-height: 520px;
overflow-y: auto;
color: var(--t2);
scroll-behavior: smooth;
}
.terminal__line {
white-space: pre-wrap;
line-height: 1.75;
animation: termLineIn .22s var(--e1) both;
}
@keyframes termLineIn {
from {
opacity: 0;
transform: translateX(-4px);
}
to {
opacity: 1;
transform: none;
}
;
}
.terminal__line--crit {
background: linear-gradient(90deg, rgba(255,85,85,0.12) 0%, transparent 80%);
border-left: 2px solid rgba(255,85,85,0.7);
padding-left: 8px;
margin-left: -10px;
box-shadow: 0 0 20px rgba(255,85,85,0.12);
animation: termLineIn .22s var(--e1) both, critPulse 2s ease-in-out infinite;
}
@keyframes critPulse {
0%,100% {
box-shadow: 0 0 20px rgba(255,85,85,0.12);
}
50% {
box-shadow: 0 0 28px rgba(255,85,85,0.28);
}
;
}
.terminal__prompt {
color: var(--g);
margin-right: 4px;
}
.terminal__comment {
color: var(--t3);
font-style: italic;
}
.terminal__ok {
color: var(--g);
margin-right: 4px;
}
.terminal__warn {
color: var(--amber);
margin-right: 4px;
font-weight: 600;
}
.terminal__crit {
color: var(--red);
font-weight: 700;
margin-right: 4px;
letter-spacing: 0.02em;
}
.term-text {
display: inline;
}
.terminal__cursor {
display: inline-block;
width: 7px;
height: 1em;
background: var(--g);
vertical-align: text-bottom;
margin-left: 4px;
animation: blink 1s steps(1) infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
;
}
.sc-tiles {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--sep-soft);
border: 1px solid var(--sep-soft);
border-radius: 16px;
overflow: hidden;
}
@media (max-width: 900px) {
.sc-tiles {
grid-template-columns: 1fr;
}
}
.sc-tile {
background: var(--bg-2);
padding: clamp(28px, 4vw, 40px);
}
.sc-tile__eyebrow {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--g);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 14px;
}
.sc-tile__h {
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.015em;
margin-bottom: 10px;
line-height: 1.2;
}
.sc-tile__copy {
font-size: 0.9rem;
color: var(--t2);
line-height: 1.55;
}
.sec-darkstage {
background: var(--bg-1);
position: relative;
overflow: hidden;
}
.threats {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 900px) {
.threats {
grid-template-columns: 1fr;
}
}
.threat {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 16px;
padding: clamp(24px, 3vw, 32px);
transition: border-color .25s var(--e1), transform .25s var(--e1);
}
.threat:hover {
border-color: var(--g);
transform: translateY(-3px);
}
.threat__num {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--g);
letter-spacing: 0.2em;
margin-bottom: 12px;
}
.threat__h {
font-size: 1.2rem;
font-weight: 600;
letter-spacing: -0.015em;
margin-bottom: 10px;
}
.threat__copy {
font-size: 0.92rem;
color: var(--t2);
line-height: 1.55;
}
.sec-pin {
background: var(--bg);
padding-bottom: var(--sec-y);
}
.pin-stage {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
@media (max-width: 900px) {
.pin-stage {
grid-template-columns: 1fr;
gap: 40px;
}
}
.pin-stage__sticky {
position: sticky;
top: 80px;
padding-top: var(--sec-y);
}
.pin-stage__vis {
margin-top: 32px;
width: 100%;
max-width: 420px;
}
.pin-svg {
width: 100%;
height: auto;
}
.pin-rail {
padding: var(--sec-y) 0;
display: flex;
flex-direction: column;
gap: clamp(80px, 14vh, 160px);
}
.pin-step {
opacity: 0.42;
transition: opacity .4s var(--e1);
}
.pin-step.is-active {
opacity: 1;
}
.pin-step__num {
font-family: var(--mono);
font-size: 0.8rem;
color: var(--g);
letter-spacing: 0.1em;
margin-bottom: 12px;
}
.pin-step__h {
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
font-weight: 600;
letter-spacing: -0.022em;
line-height: 1.15;
margin-bottom: 16px;
color: var(--t1);
}
.pin-step__copy {
font-size: 1rem;
color: var(--t2);
line-height: 1.55;
max-width: 44ch;
}
.sec-hymn {
background: var(--bg-1);
padding: var(--sec-y) var(--sec-x);
}
.hymn-grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
@media (max-width: 900px) {
.hymn-grid {
grid-template-columns: 1fr;
}
}
.hymn-lang {
background: var(--bg-2);
border: 1px solid var(--g-line);
border-radius: var(--r-card);
padding: clamp(32px, 4vw, 56px);
text-align: center;
}
.hymn-lang__label {
font-family: var(--mono);
font-size: 0.74rem;
color: var(--g);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 24px;
}
.hymn-lang__h {
font-family: var(--mono);
font-size: clamp(3rem, 7vw, 5.5rem);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--t1);
line-height: 1;
margin-bottom: 24px;
}
.hymn-lang__plus {
color: var(--t3);
font-weight: 400;
margin: 0 8px;
}
.hymn-lang__q {
color: var(--g);
}
.hymn-lang__copy {
font-size: 0.95rem;
color: var(--t2);
line-height: 1.6;
max-width: 340px;
margin: 0 auto;
}
.hymn-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--sep-soft);
border: 1px solid var(--sep-soft);
border-radius: var(--r-card);
overflow: hidden;
}
.hstat__num {
font-family: var(--mono);
font-size: clamp(2.2rem, 4vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--t1);
line-height: 1;
margin-bottom: 8px;
}
.hstat__pct {
font-size: 0.5em;
color: var(--t2);
font-weight: 500;
}
.hstat__label {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--t3);
letter-spacing: 0.06em;
line-height: 1.5;
}
.sec-compare {
background: var(--bg);
}
.spec-grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--sep-soft);
border: 1px solid var(--sep-soft);
border-radius: 20px;
overflow: hidden;
}
@media (max-width: 900px) {
.spec-grid {
grid-template-columns: 1fr;
}
}
.spec-cell {
background: var(--bg-2);
padding: clamp(32px, 4vw, 56px);
display: flex;
flex-direction: column;
gap: 16px;
}
.spec-cell--us {
background: linear-gradient(180deg, var(--g-dim) 0%, var(--bg-2) 70%);
}
.spec-cell__label {
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--t3);
}
.spec-cell--us .spec-cell__label {
color: var(--g);
}
.spec-cell__num {
font-family: var(--mono);
font-size: clamp(3rem, 7vw, 5.5rem);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1;
color: var(--t1);
}
.spec-cell--us .spec-cell__num {
color: var(--g);
}
.spec-cell__num-sm {
font-size: 0.42em;
opacity: 0.7;
margin-left: 4px;
}
.spec-cell__unit {
font-size: 0.92rem;
color: var(--t2);
}
.spec-cell__copy {
font-size: 0.88rem;
color: var(--t3);
line-height: 1.55;
}
.team-grid {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 900px) {
.team-grid {
grid-template-columns: 1fr;
}
}
.person {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 16px;
padding: clamp(28px, 3vw, 40px);
transition: border-color .25s var(--e1), transform .25s var(--e1);
}
.person:hover {
border-color: var(--g);
transform: translateY(-3px);
}
.person__photo {
width: 72px;
height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, var(--g-dark), var(--g));
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-weight: 800;
font-size: 1.5rem;
color: #000;
letter-spacing: -0.02em;
box-shadow: 0 0 24px rgba(118,185,0,.28);
}
.person__name {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 6px;
line-height: 1.2;
}
.person__role {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--g);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 16px;
}
.person__copy {
font-size: 0.9rem;
color: var(--t2);
line-height: 1.6;
}
.sec-ghostride {
background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(118,185,0,.12) 0%, transparent 70%), var(--bg);
text-align: center;
position: relative;
overflow: hidden;
}
.gr-wrap {
max-width: 720px;
margin: 0 auto;
}
.gr-h {
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
margin: 8px 0 16px;
color: var(--t1);
}
/* .gr-h em → shared title-em rule */
.gr-sub {
font-size: 1.05rem;
color: var(--t2);
max-width: 520px;
margin: 0 auto 40px;
line-height: 1.5;
}
.gr-form {
max-width: 640px;
margin: 0 auto;
}
.gr-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.gr-input {
flex: 1 1 220px;
padding: 14px 18px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 12px;
color: var(--t1);
font-family: var(--mono);
font-size: 0.9rem;
transition: border-color .2s var(--e1);
}
.gr-input:focus {
outline: none;
border-color: var(--g);
box-shadow: 0 0 0 3px var(--g-dim);
}
.gr-input::placeholder {
color: var(--t3);
}
.gr-btn {
flex: 1 1 220px;
justify-content: center;
}
.gr-hint {
font-family: var(--mono);
font-size: 0.74rem;
color: var(--t3);
margin-top: 16px;
}
.gfooter {
background: var(--bg);
border-top: 1px solid var(--line);
padding: var(--s10) var(--sec-x) var(--s5);
font-size: 0.82rem;
color: var(--t3);
}
.gfooter__inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
padding-bottom: var(--s7);
border-bottom: 1px solid var(--line);
}
@media (max-width: 833px) {
.gfooter__inner {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
.gfooter__h {
font-size: 0.76rem;
color: var(--t1);
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 14px;
}
.gfooter__col ul {
list-style: none;
}
.gfooter__col li {
padding: 5px 0;
font-size: 0.78rem;
line-height: 1.5;
}
.gfooter__col a {
color: var(--t3);
transition: color .2s var(--e1);
}
.gfooter__col a:hover {
color: var(--t1);
}
.gfooter__base {
max-width: var(--max);
margin: 0 auto;
padding-top: var(--s4);
padding-bottom: 88px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
font-size: 0.72rem;
}
.gfooter__mono {
font-family: var(--mono);
color: var(--t4);
}
@media (prefers-reduced-motion: reduce) {
.hero-blob, .hero-aurora, .hero-grid-floor, .sec-welcome__title em, .gr-h em, .sc-h em, .principle::after {
animation: none !important;
}
}
.principle {
padding: clamp(44px, 5vw, 60px);
min-height: 460px;
border-radius: 28px;
background: radial-gradient(ellipse 80% 60% at 50% 100%, color-mix(in srgb, var(--accent, var(--g)) 6%, transparent) 0%, transparent 60%), linear-gradient(165deg, rgba(22,28,16,0.88) 0%, rgba(8,10,6,0.96) 100%);
border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 30px 70px rgba(0,0,0,0.55);
display: flex;
flex-direction: column;
transition: transform .4s var(--e1), box-shadow .4s var(--e1);
}
.principle:hover, .principle.is-tapped {
transform: translateY(-6px);
box-shadow: 0 36px 90px rgba(0,0,0,0.65), 0 0 80px color-mix(in srgb, var(--accent, var(--g)) 22%, transparent);
}
.principle::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--a, 0deg), transparent 0deg, transparent 300deg, color-mix(in srgb, var(--accent, var(--g)) 55%, transparent) 335deg, var(--accent, var(--g)) 350deg, color-mix(in srgb, var(--accent, var(--g)) 55%, transparent) 360deg);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
animation: principleOrbit 7s linear infinite;
opacity: 0.9;
}
@property --a {
syntax: '';
inherits: false;
initial-value: 0deg;
}
@keyframes principleOrbit {
to {
--a: 360deg;
}
;
}
@supports not (background: conic-gradient(from var(--a, 0deg), red, blue)) {
.principle::after {
animation: none;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--g)) 40%, transparent), transparent 70%);
}
}
/* Big ghosted number watermark, per-accent */
.principle__num {
position: absolute;
top: 24px;
right: 28px;
font-family: var(--mono);
font-size: 3.6rem;
font-weight: 900;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px color-mix(in srgb, var(--accent, var(--g)) 30%, transparent);
letter-spacing: -0.04em;
pointer-events: none;
z-index: 0;
}
.principle__glyph {
width: 72px;
height: 72px;
color: var(--accent, var(--g));
margin-bottom: 28px;
filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent, var(--g)) 40%, transparent));
position: relative;
z-index: 1;
}
.principle__glyph svg {
width: 100%;
height: 100%;
display: block;
}
.principle__name {
font-size: clamp(1.8rem, 2.4vw, 2.2rem);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 10px;
color: var(--t1);
position: relative;
z-index: 1;
}
.principle__role {
font-family: var(--mono);
font-size: 0.68rem;
color: var(--accent, var(--g));
letter-spacing: 0.1em;
text-transform: lowercase;
margin-bottom: 24px;
text-shadow: 0 0 18px color-mix(in srgb, var(--accent, var(--g)) 40%, transparent);
position: relative;
z-index: 1;
}
.principle__copy {
font-size: 0.95rem;
line-height: 1.6;
color: var(--t2);
flex: 1;
margin-bottom: 32px;
position: relative;
z-index: 1;
}
.principle__stat {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 24px;
border-top: 1px solid color-mix(in srgb, var(--accent, var(--g)) 20%, transparent);
position: relative;
z-index: 1;
}
.principle__stat-num {
font-family: var(--mono);
font-size: 2.6rem;
font-weight: 800;
line-height: 1;
color: var(--accent, var(--g));
letter-spacing: -0.03em;
text-shadow: 0 0 24px color-mix(in srgb, var(--accent, var(--g)) 40%, transparent);
}
.principle__stat-unit {
font-size: 0.6em;
font-weight: 600;
margin-left: 2px;
}
.principle__stat-label {
font-family: var(--mono);
font-size: 0.66rem;
color: var(--t3);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 6px;
}
/* principle section gets more breathing room */
.sec-team {
background: var(--bg-1);
padding-top: clamp(120px, 16vw, 180px);
padding-bottom: clamp(120px, 16vw, 180px);
}
.sec-team .team-grid {
max-width: var(--max);
margin: 0 auto;
gap: 24px;
}
@media (max-width: 900px) {
.sec-team .team-grid {
grid-template-columns: 1fr;
}
.principle {
min-height: auto;
}
}
@media (max-width: 899px) {
/* Kill only the two canvas animations (heaviest) */
.hero-flicker, .matrix-rain {
display: none !important;
}
/* Hero fills iPhone screen -- 100svh respects Safari dynamic toolbar */
.sec-welcome {
padding-top: calc(env(safe-area-inset-top, 0px) + clamp(80px, 14vh, 110px)) !important;
padding-bottom: clamp(48px, 8vw, 96px) !important;
min-height: 100vh !important;
min-height: 100svh !important;
}
/* Keep 2-line title; size is owned by the .twol rules below */
.sec-welcome__sub {
font-size: 15px;
padding: 0 8px;
}
}
.lex-pro, .lex-pro-block {
display: none !important;
}
[data-lex="pro"] .lex-pro {
display: inline !important;
}
[data-lex="pro"] .lex-pro-block {
display: block !important;
}
[data-lex="pro"] .lex-con, [data-lex="pro"] .lex-con-block {
display: none !important;
}
/* ── floating dock (bottom-center, always visible, iOS 26 control-center vibe) ── */
.lex-dock {
min-width: 220px;
white-space: nowrap;
position: fixed;
left: 50%;
transform: translateX(-50%);
z-index: 9900;
padding: 10px 14px 10px 18px;
border-radius: 980px;
background: rgba(10, 14, 7, 0.58);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255,255,255,0.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.45), inset 0 0 24px rgba(255,255,255,0.04), 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.3), 0 0 0 0 rgba(118,185,0,0.55);
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
user-select: none;
isolation: isolate;
transition: transform .28s var(--spring), box-shadow .28s var(--e1);
will-change: transform;
contain: layout paint;
}
.lex-dock::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(160deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 30%, transparent 60%);
mix-blend-mode: screen;
}
.lex-dock::after {
content: '';
position: absolute;
left: 18%;
right: 18%;
top: 0;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
}
.lex-dock:hover {
transform: translateX(-50%) translateY(-3px) scale(1.02);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.45), inset 0 0 28px rgba(255,255,255,0.06), 0 28px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3), 0 0 60px rgba(118,185,0,0.35);
}
.lex-dock:active {
transform: translateX(-50%) translateY(0) scale(0.98);
}
/* Dock yields while the page scrolls - slides off-canvas, springs back on idle. Keeps the control-center pill discoverable at rest without ever sitting on content mid-read. */
.lex-dock.is-scrolling {
transform: translateX(-50%) translateY(calc(100% + 48px));
box-shadow: none;
}
/* lexDockPulse removed - box-shadow animation was repainting 60fps */
.lex-dock__label {
font-family: var(--mono);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--t3);
white-space: nowrap;
}
.lex-dock__switch {
position: relative;
display: inline-flex;
align-items: stretch;
height: 30px;
padding: 2px;
border-radius: 980px;
background: rgba(4, 6, 3, 0.45);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: inset 0 1px 0 rgba(0,0,0,0.35);
overflow: hidden;
isolation: isolate;
}
.lex-dock__seg {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 14px;
min-width: 76px;
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--t3);
border-radius: 980px;
transition: color .28s var(--e1), text-shadow .28s var(--e1);
}
.lex-dock__thumb {
position: absolute;
z-index: 1;
top: 2px;
bottom: 2px;
left: 2px;
width: calc(50% - 2px);
border-radius: 980px;
background: linear-gradient(180deg, #8ed11a 0%, #76b900 55%, #5e9500 100%);
border: 1px solid rgba(255,255,255,0.28);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.25), inset 0 0 18px rgba(255,255,255,0.18), 0 4px 14px rgba(118,185,0,0.45);
transition: transform .32s var(--spring);
}
[data-lex="pro"] .lex-dock__thumb {
transform: translateX(100%);
}
[data-lex="con"] .lex-dock__seg--con, [data-lex="pro"] .lex-dock__seg--pro {
color: #0a0a0a;
text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
@media (max-width: 560px) {
.lex-dock {
padding: 8px 12px 8px 14px;
gap: 10px;
}
.lex-dock__label {
display: none;
}
.lex-dock__seg {
min-width: 60px;
padding: 0 10px;
font-size: 0.6rem;
}
.lex-dock__switch {
height: 26px;
}
}
.cursor-dot, .cursor-reticle {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999;
transform: translate3d(-100px, -100px, 0);
will-change: transform;
}
.cursor-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--g);
margin: -3px 0 0 -3px;
box-shadow: 0 0 8px rgba(118,185,0,0.9), 0 0 16px rgba(118,185,0,0.45);
transition: opacity .18s var(--e1), transform .05s linear;
}
.cursor-reticle {
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
color: rgba(118,185,0,0.75);
opacity: 0.85;
filter: drop-shadow(0 0 6px rgba(118,185,0,0.55));
transition: opacity .22s var(--e1), transform .05s linear, color .22s var(--e1);
mix-blend-mode: screen;
}
.cursor-reticle svg {
width: 100%;
height: 100%;
display: block;
transition: transform .3s var(--spring);
}
.cursor-reticle.is-hover svg {
transform: scale(1.15);
}
.cursor-reticle.is-hover {
color: rgba(204,255,68,0.95);
}
.cursor-reticle.is-press svg {
transform: scale(0.85);
}
.cursor-dot.is-hover {
opacity: 0.6;
}
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
html.cursor-ready body {
cursor: none;
}
html.cursor-ready a, html.cursor-ready button, html.cursor-ready input, html.cursor-ready textarea, html.cursor-ready select, html.cursor-ready [data-cursor="grow"] {
cursor: none;
}
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce), (max-width: 899px) {
.cursor-dot, .cursor-reticle {
display: none !important;
}
body {
cursor: auto;
}
}
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 99999;
}
.skip-link:focus {
position: fixed;
top: 12px;
left: 12px;
width: auto;
height: auto;
padding: 10px 16px;
border-radius: 980px;
background: var(--g);
color: #000;
font-weight: 700;
font-size: 0.84rem;
outline: 2px solid rgba(255,255,255,0.9);
outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--g);
outline-offset: 3px;
border-radius: 6px;
}
/* perf containment on cards only - content-visibility removed because it defers style computation and broke ancestor attribute selector matching (caused .lex-pro to un-hide when sections entered viewport) */
.hl, .threat, .sc-tile, .spec-cell, .person, .hymn-lang, .hstat, .terminal {
contain: layout paint;
}
.matrix-rain {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.16;
mix-blend-mode: screen;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.sec-darkstage .sc-head, .sec-darkstage .threats {
position: relative;
z-index: 2;
}
/* ua-ios legacy block removed - desktop nav is now always pill-shaped */
/* Lex dock respects home bar safe area */
.lex-dock {
bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 3vw, 32px));
}
.hl, .threat, .sc-tile, .spec-cell, .person, .hymn-lang {
border-radius: var(--r-card-lg);
}
.terminal {
border-radius: var(--r-card-md);
}
.hstat {
background: var(--bg-2);
padding: clamp(24px, 3vw, 40px);
text-align: left;
border-radius: 0;
}
/* in-grid cells stay square */
.sw-certs {
list-style: none;
display: flex;
justify-content: center;
gap: clamp(10px, 1.6vw, 18px);
margin: clamp(24px, 3vw, 32px) auto 0;
padding: 0;
max-width: 680px;
flex-wrap: wrap;
}
.sw-cert {
display: inline-flex;
flex-direction: column;
gap: 2px;
padding: 10px 16px;
border-radius: 12px;
background: rgba(10, 14, 7, 0.42);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.3);
}
.sw-cert__name {
font-family: var(--mono);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--t1);
}
.sw-cert__sub {
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--t3);
text-transform: uppercase;
}
.gfooter__certs {
list-style: none;
padding: 0;
}
.gfooter__certs li {
padding: 5px 0;
font-size: 0.78rem;
line-height: 1.4;
color: var(--t2);
}
.gfooter__cert-sub {
display: inline-block;
font-family: var(--mono);
font-size: 0.62rem;
color: var(--t3);
margin-left: 6px;
letter-spacing: 0.04em;
}
@media (max-width: 640px) {
.sw-certs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
max-width: 100%;
padding: 0 8px;
flex-wrap: nowrap;
}
.sw-cert {
padding: 8px 4px;
align-items: center;
text-align: center;
}
.sw-cert__name {
font-size: 0.64rem;
letter-spacing: 0.02em;
}
.sw-cert__sub {
font-size: 0.48rem;
line-height: 1.2;
}
}
.scan-result {
max-width: 720px;
margin: 32px auto 0;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity .4s var(--e1), max-height .6s var(--e1);
}
.scan-result.is-open {
opacity: 1;
max-height: 3000px;
}
.scan-loader {
background: rgba(10,14,7,0.55);
border: 1px solid rgba(118,185,0,0.18);
border-radius: 20px;
padding: 28px 32px;
text-align: left;
font-family: var(--mono);
font-size: 0.82rem;
color: var(--t2);
box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 40px rgba(118,185,0,0.08);
}
.scan-loader__bar {
height: 4px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
overflow: hidden;
margin-bottom: 18px;
}
.scan-loader__fill {
height: 100%;
width: 0;
background: linear-gradient(90deg, transparent, var(--g), var(--g-light), var(--g), transparent);
animation: scanFill 2.4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes scanFill {
from {
width: 0;
}
to {
width: 100%;
}
;
}
.scan-loader__steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
}
.scan-loader__steps li {
opacity: 0;
transform: translateX(-6px);
animation: scanStep .4s forwards;
color: var(--t3);
}
.scan-loader__steps li::before {
content: '\203A ';
color: var(--g);
margin-right: 6px;
}
@keyframes scanStep {
0% {
opacity: 0;
transform: translateX(-6px);
}
20% {
opacity: 1;
transform: none;
color: var(--g-light);
}
100% {
opacity: 1;
transform: none;
color: var(--t3);
}
;
}
.scan-card {
background: rgba(10,14,7,0.72);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 24px;
padding: 32px;
text-align: left;
box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 60px rgba(118,185,0,0.08);
animation: scanCardIn .5s var(--e1) both;
}
@keyframes scanCardIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: none;
}
;
}
.scan-card__head {
display: flex;
gap: 28px;
align-items: center;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 20px;
flex-wrap: wrap;
}
.scan-card__band {
position: relative;
width: 140px;
height: 140px;
flex-shrink: 0;
}
.scan-card__band svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 0 18px color-mix(in srgb, var(--band, #76b900) 40%, transparent));
}
.scan-card__score {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-weight: 800;
}
.scan-card__score span {
font-size: 2.4rem;
color: var(--t1);
line-height: 1;
}
.scan-card__score small {
font-size: 0.68rem;
color: var(--t3);
margin-top: 2px;
font-weight: 500;
}
.scan-card__grade {
position: absolute;
top: -10px;
right: -10px;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(10,14,7,0.92);
border: 2px solid currentColor;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-weight: 900;
font-size: 1.1rem;
box-shadow: 0 0 16px currentColor;
}
.scan-card__meta {
flex: 1;
min-width: 200px;
}
.scan-card__url {
font-family: var(--mono);
font-size: 0.76rem;
color: var(--t3);
word-break: break-all;
margin-bottom: 8px;
letter-spacing: 0.02em;
}
.scan-card__summary {
font-size: 0.92rem;
color: var(--t2);
line-height: 1.5;
}
.scan-card__summary strong {
color: var(--t1);
}
.scan-finding {
display: flex;
gap: 12px;
padding: 12px 14px;
background: rgba(255,255,255,0.02);
border-radius: 12px;
border-left: 2px solid rgba(255,255,255,0.08);
transition: background .2s var(--e1), border-color .2s var(--e1);
}
.scan-finding--pass {
border-left-color: var(--g);
}
.scan-finding--low {
border-left-color: #fbbf24;
}
.scan-finding--medium {
border-left-color: #f97316;
background: rgba(249,115,22,0.06);
}
.scan-finding--high {
border-left-color: #ff5555;
background: rgba(255,85,85,0.08);
box-shadow: inset 0 0 0 1px rgba(255,85,85,0.12);
}
.scan-finding__sym {
font-family: var(--mono);
font-weight: 700;
flex-shrink: 0;
width: 20px;
text-align: center;
}
.scan-finding--pass .scan-finding__sym {
color: var(--g);
}
.scan-finding--low .scan-finding__sym {
color: #fbbf24;
}
.scan-finding--medium .scan-finding__sym {
color: #f97316;
}
.scan-finding--high .scan-finding__sym {
color: #ff5555;
}
.scan-finding__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.scan-finding__body strong {
font-size: 0.92rem;
color: var(--t1);
}
.scan-finding__body span {
font-size: 0.78rem;
color: var(--t3);
font-family: var(--mono);
word-break: break-word;
}
.scan-lead {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 24px;
margin-top: 12px;
}
.scan-lead__copy {
font-size: 0.92rem;
color: var(--t2);
line-height: 1.5;
margin-bottom: 14px;
}
.scan-lead__copy strong {
color: var(--t1);
}
.scan-lead__row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.scan-lead__row input {
flex: 1 1 200px;
}
.scan-lead__row .button {
flex: 0 0 auto;
}
.scan-error {
animation: scanCardIn .4s var(--e1) both;
}
.scan-error__h {
font-size: 1.1rem;
font-weight: 700;
color: #ff5555;
margin-bottom: 8px;
}
.scan-error__d {
font-size: 0.92rem;
color: var(--t2);
}
@media (max-width: 640px) {
.scan-card {
padding: 20px;
}
.scan-card__head {
gap: 16px;
}
.scan-card__band {
width: 100px;
height: 100px;
}
.scan-card__score span {
font-size: 1.8rem;
}
}
.blog-hero {
padding-top: clamp(120px, 16vh, 180px);
padding-bottom: clamp(40px, 6vw, 60px);
text-align: center;
position: relative;
background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(118,185,0,0.08), transparent 60%), #0a0a0a;
}
.blog-hero__copy {
max-width: 760px;
margin: 0 auto;
padding: 0 24px;
}
.blog-hero__title {
font-size: clamp(48px, 7vw, 84px);
line-height: 1.08;
font-weight: 700;
letter-spacing: -0.025em;
margin: 16px 0 24px;
color: #f5f5f7;
padding-bottom: 0.08em;
}
.blog-hero__title em {
font-style: normal;
background: linear-gradient(90deg, #4a7a00, #76b900, #ccff44, #76b900, #4a7a00);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shimmer 4s ease-in-out infinite;
}
.blog-hero__sub {
font-size: 1.1rem;
line-height: 1.55;
color: rgba(245,245,247,0.72);
max-width: 640px;
margin: 0 auto 32px;
}
.blog-hero__rss {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 980px;
background: rgba(118,185,0,0.08);
border: 1px solid rgba(118,185,0,0.28);
color: var(--g);
font-family: var(--mono);
font-size: 0.76rem;
letter-spacing: 0.04em;
text-decoration: none;
transition: background .2s var(--e1), border-color .2s var(--e1);
}
.blog-hero__rss:hover {
background: rgba(118,185,0,0.16);
border-color: rgba(118,185,0,0.5);
}
.blog-list-section {
padding-top: 40px;
padding-bottom: clamp(80px, 10vw, 140px);
}
.blog-list {
max-width: 900px;
margin: 0 auto;
padding: 0;
list-style: none;
display: grid;
gap: 20px;
}
.blog-card {
background: linear-gradient(165deg, rgba(22,28,16,0.82) 0%, rgba(10,14,7,0.92) 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px;
overflow: hidden;
}
.blog-card a {
display: block;
padding: clamp(28px, 3.5vw, 40px);
text-decoration: none;
color: inherit;
}
.blog-card:hover {
transform: translateY(-4px);
border-color: rgba(118,185,0,0.45);
box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 60px rgba(118,185,0,0.14);
}
.blog-card__date {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--t3);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 14px;
}
.blog-card__title {
font-size: clamp(1.4rem, 2.4vw, 2rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--t1);
margin-bottom: 12px;
}
.blog-card__excerpt {
font-size: 1rem;
line-height: 1.55;
color: var(--t2);
margin-bottom: 14px;
}
.blog-card__tag {
display: inline-block;
font-family: var(--mono);
font-size: 0.64rem;
padding: 4px 10px;
border-radius: 980px;
background: rgba(118,185,0,0.14);
color: var(--g);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.blog-list__empty {
max-width: 600px;
margin: 40px auto 0;
text-align: center;
font-size: 0.92rem;
color: var(--t3);
line-height: 1.5;
}
.blog-list__empty a {
color: var(--g);
text-decoration: underline;
}
/* ─── blog post article layout ─── */
.post {
max-width: 720px;
margin: 0 auto;
padding: clamp(120px, 16vh, 180px) clamp(22px, 5vw, 40px) clamp(80px, 10vw, 140px);
}
.post__header {
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 32px;
margin-bottom: 40px;
}
.post__eyebrow {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--t3);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 20px;
}
.post__eyebrow a {
color: var(--g);
text-decoration: none;
}
.post__eyebrow a:hover {
text-decoration: underline;
}
.post__title {
font-size: clamp(40px, 5.5vw, 64px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--t1);
margin-bottom: 24px;
padding-bottom: 0.06em;
}
.post__title em {
font-style: normal;
background: linear-gradient(90deg, #4a7a00, #76b900, #ccff44, #76b900, #4a7a00);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shimmer 4s ease-in-out infinite;
}
.post__lede {
font-size: 1.25rem;
line-height: 1.55;
color: var(--t2);
}
.post__body {
font-size: 1.05rem;
line-height: 1.7;
color: var(--t2);
}
.post__body h2 {
font-size: 1.8rem;
font-weight: 700;
color: var(--t1);
letter-spacing: -0.015em;
margin: 48px 0 16px;
}
.post__body h3 {
font-size: 1.3rem;
font-weight: 600;
color: var(--t1);
margin: 36px 0 12px;
}
.post__body p {
margin-bottom: 20px;
}
.post__body ul, .post__body ol {
margin: 0 0 24px 22px;
padding: 0;
}
.post__body li {
margin-bottom: 10px;
}
.post__body a {
color: var(--g);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.post__body a:hover {
color: var(--g-light);
}
.post__body strong {
color: var(--t1);
}
.post__body code {
font-family: var(--mono);
font-size: 0.92em;
background: rgba(118,185,0,0.12);
color: var(--g-light);
padding: 2px 7px;
border-radius: 6px;
}
.post__body pre {
background: rgba(6,8,4,0.72);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 20px 24px;
overflow-x: auto;
margin-bottom: 28px;
}
.post__body pre code {
background: none;
padding: 0;
color: var(--t2);
font-size: 0.92rem;
}
.post__body blockquote {
border-left: 3px solid var(--g);
padding: 4px 0 4px 24px;
margin: 28px 0;
color: var(--t3);
font-style: italic;
}
.post__kicker {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.08);
font-family: var(--mono);
font-size: 0.92rem;
color: var(--g);
letter-spacing: 0.04em;
text-align: center;
}
.post__cta {
margin-top: 60px;
padding: 32px;
background: linear-gradient(165deg, rgba(118,185,0,0.1), rgba(10,14,7,0.6));
border: 1px solid rgba(118,185,0,0.28);
border-radius: 20px;
text-align: center;
}
.post__cta p {
font-size: 1.05rem;
color: var(--t2);
line-height: 1.55;
margin-bottom: 20px;
}
.post__cta strong {
color: var(--t1);
}
.blog-ticker {
position: relative;
left: 0;
right: 0;
z-index: 1;
height: 36px;
background: rgba(6,8,4,0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid rgba(255,85,85,0.25);
border-bottom: none;
display: flex;
align-items: center;
overflow: hidden;
gap: 0;
}
.blog-ticker__label {
flex-shrink: 0;
padding: 0 14px;
font-family: var(--mono);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red);
border-right: 1px solid rgba(255,85,85,0.3);
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
height: 100%;
}
.blog-ticker__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--red);
box-shadow: 0 0 8px var(--red);
animation: swPulse 2s ease-out infinite;
}
.blog-ticker__track {
flex: 1;
overflow: hidden;
height: 100%;
display: flex;
align-items: center;
mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
}
.blog-ticker__inner {
display: flex;
gap: 0;
animation: tickerScroll 40s linear infinite;
white-space: nowrap;
will-change: transform;
}
.blog-ticker__inner:hover {
animation-play-state: paused;
}
.blog-ticker__item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 32px;
font-family: var(--mono);
font-size: 0.7rem;
color: var(--t2);
letter-spacing: -0.01em;
white-space: nowrap;
}
.blog-ticker__item a {
color: var(--t1);
text-decoration: none;
transition: color .2s var(--e1);
}
.blog-ticker__item a:hover {
color: var(--g);
}
.blog-ticker__sep {
color: var(--t4);
margin: 0 4px;
}
.blog-ticker__age {
font-size: 0.62rem;
color: var(--t3);
flex-shrink: 0;
}
@keyframes tickerScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
;
}
@media (max-width: 640px) {
.blog-ticker {
display: none;
}
}
.blog-breaking-hero {
max-width: 900px;
margin: 0 auto 32px;
padding: 0;
list-style: none;
}
.blog-card--hero {
position: relative;
background: linear-gradient(165deg, rgba(30,16,16,0.95) 0%, rgba(10,6,6,0.98) 100%);
border: 1px solid rgba(255,85,85,0.2);
border-radius: 28px;
overflow: hidden;
isolation: isolate;
transition: transform .4s var(--e1), box-shadow .4s var(--e1);
}
.blog-card--hero::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--a, 0deg), transparent 0deg, transparent 300deg, rgba(255,85,85,0.45) 335deg, var(--red) 350deg, rgba(255,85,85,0.45) 360deg);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
animation: principleOrbit 5s linear infinite;
opacity: 0.9;
}
.blog-card--hero:hover {
transform: translateY(-4px);
box-shadow: 0 32px 80px rgba(255,85,85,0.12), 0 0 60px rgba(255,85,85,0.08);
}
.blog-card--hero a {
display: block;
padding: clamp(32px, 4vw, 48px);
text-decoration: none;
color: inherit;
}
.blog-card__hero-meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.live-dot {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--red);
}
.live-dot::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--red);
box-shadow: 0 0 8px var(--red);
animation: swPulse 2s ease-out infinite;
}
.cvss-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--mono);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
padding: 3px 9px;
border-radius: 980px;
border: 1px solid currentColor;
white-space: nowrap;
}
.cvss-badge--critical {
color: #ff5555;
background: rgba(255,85,85,0.12);
}
.cvss-badge--high {
color: #f97316;
background: rgba(249,115,22,0.12);
}
.cvss-badge--medium {
color: #fbbf24;
background: rgba(251,191,36,0.12);
}
.cvss-badge--low {
color: var(--g);
background: var(--g-dim);
}
.blog-card--hero .blog-card__title {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
margin-bottom: 16px;
}
.blog-card--hero .blog-card__excerpt {
font-size: 1.1rem;
margin-bottom: 20px;
}
.blog-card--hero .blog-card__footer {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
.blog-cats {
max-width: 900px;
margin: 0 auto 28px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.blog-cat-chip {
font-family: var(--mono);
font-size: 0.64rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 980px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
color: var(--t3);
cursor: pointer;
user-select: none;
}
.blog-cat-chip:hover, .blog-cat-chip.is-active {
border-color: var(--g);
color: var(--g);
background: var(--g-dim);
}
.blog-card__footer {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
.post-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 64px;
max-width: 1060px;
margin: 0 auto;
padding: clamp(100px, 14vh, 160px) clamp(22px, 4vw, 48px) clamp(80px, 10vw, 140px);
align-items: start;
}
@media (max-width: 1000px) {
.post-layout {
grid-template-columns: 1fr;
gap: 0;
padding-left: clamp(22px, 5vw, 40px);
padding-right: clamp(22px, 5vw, 40px);
}
}
.post-toc {
position: sticky;
top: 110px;
font-family: var(--mono);
font-size: 0.72rem;
line-height: 1.6;
}
.post-toc__label {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--t4);
margin-bottom: 12px;
}
.post-toc__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.post-toc__item a {
display: block;
padding: 4px 10px;
border-left: 2px solid rgba(255,255,255,0.07);
color: var(--t3);
text-decoration: none;
transition: color .2s var(--e1), border-color .2s var(--e1);
font-size: 0.7rem;
letter-spacing: -0.01em;
}
.post-toc__item a:hover {
color: var(--t1);
border-left-color: var(--t3);
}
.post-toc__item.is-active a {
color: var(--g);
border-left-color: var(--g);
}
@media (max-width: 1000px) {
.post-toc {
position: static;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 16px;
margin-bottom: 32px;
background: rgba(10,14,7,0.5);
}
.post-toc details summary {
cursor: pointer;
list-style: none;
color: var(--t2);
font-size: 0.74rem;
font-weight: 600;
padding: 0;
}
.post-toc details[open] .post-toc__list {
margin-top: 12px;
}
.post-toc__item a {
border-left: none;
padding: 4px 0;
}
}
/* Post byline */
.post__byline {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
font-family: var(--mono);
font-size: 0.68rem;
color: var(--t3);
letter-spacing: 0.04em;
margin-bottom: 20px;
}
.post__byline-sep {
opacity: 0.4;
}
.post__byline-updated {
color: var(--amber);
}
/* Post update log accordion */
.post__updates {
margin: 32px 0;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
overflow: hidden;
}
.post__updates summary {
padding: 14px 18px;
cursor: pointer;
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 600;
color: var(--amber);
letter-spacing: 0.04em;
list-style: none;
display: flex;
align-items: center;
gap: 8px;
background: rgba(251,191,36,0.05);
transition: background .2s var(--e1);
}
.post__updates summary:hover {
background: rgba(251,191,36,0.1);
}
.post__updates summary::before {
content: '+';
font-size: 1rem;
font-weight: 400;
width: 16px;
text-align: center;
transition: transform .2s var(--e1);
}
.post__updates[open] summary::before {
transform: rotate(45deg);
}
.post__updates-body {
padding: 0 18px 18px;
font-family: var(--mono);
font-size: 0.7rem;
color: var(--t3);
line-height: 1.7;
}
.post__updates-body p {
margin-bottom: 6px;
}
.post__updates-date {
color: var(--amber);
margin-right: 8px;
}
/* Sources block */
.post__sources {
margin: 32px 0 0;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
overflow: hidden;
}
.post__sources summary {
padding: 14px 18px;
cursor: pointer;
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 600;
color: var(--t2);
letter-spacing: 0.04em;
list-style: none;
display: flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.03);
transition: background .2s var(--e1);
}
.post__sources summary:hover {
background: rgba(255,255,255,0.06);
}
.post__sources summary::before {
content: '+';
font-size: 1rem;
font-weight: 400;
width: 16px;
text-align: center;
transition: transform .2s var(--e1);
}
.post__sources[open] summary::before {
transform: rotate(45deg);
}
.post__sources-body {
padding: 0 18px 18px;
}
.post__sources-verify {
font-size: 0.82rem;
color: var(--t3);
line-height: 1.6;
margin-bottom: 16px;
font-style: italic;
}
.post__sources-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.post__sources-list li {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--t3);
}
.post__sources-list a {
color: var(--g);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
word-break: break-all;
}
.pricing-hero {
padding-top: clamp(120px, 16vh, 180px);
padding-bottom: clamp(40px, 6vw, 60px);
text-align: center;
background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(118,185,0,0.08), transparent 60%), #0a0a0a;
}
.pricing-hero__eyebrow {
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--g);
margin-bottom: 16px;
}
.pricing-hero__h {
font-size: clamp(40px, 6vw, 72px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.08;
color: var(--t1);
margin-bottom: 20px;
}
.pricing-hero__sub {
font-size: 1.1rem;
color: var(--t2);
max-width: 540px;
margin: 0 auto;
line-height: 1.55;
}
.pricing-section {
padding: clamp(48px, 8vw, 80px) var(--sec-x) clamp(80px, 10vw, 140px);
}
.pricing-grid {
max-width: 1060px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: start;
padding-top: 18px;
}
@media (max-width: 860px) {
.pricing-grid {
grid-template-columns: 1fr;
max-width: 500px;
}
}
.pricing-card {
background: linear-gradient(165deg, rgba(22,28,16,0.9) 0%, rgba(10,14,7,0.96) 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 28px;
padding: clamp(32px, 4vw, 48px);
display: flex;
flex-direction: column;
gap: 24px;
overflow: visible;
}
.pricing-card:hover {
box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 60px rgba(118,185,0,0.12);
}
/* Premium orbit border */
.pricing-card--premium::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--a, 0deg), transparent 0deg, transparent 280deg, rgba(118,185,0,0.45) 325deg, var(--g) 350deg, rgba(118,185,0,0.45) 360deg);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
animation: principleOrbit 6s linear infinite;
opacity: 0.95;
}
/* Most-popular badge - top-centered pill, adapted from the NoxBuild .tier__badge pattern (real reference component, not invented): floats above the card edge instead of a diagonal corner ribbon. */
.pricing-ribbon {
top: -14px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(180deg, var(--g-light) 0%, var(--g) 100%);
color: #0a0a0a;
font-family: var(--mono);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 7px 18px;
border-radius: 980px;
white-space: nowrap;
border: 1px solid rgba(255,255,255,.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 20px rgba(118,185,0,.45), 0 8px 20px -4px rgba(0,0,0,.5);
}
.pricing-card--premium .pricing-card__tier {
color: var(--g);
}
.pricing-card__price-block {
display: flex;
flex-direction: column;
gap: 4px;
}
.pricing-card__price {
font-family: var(--mono);
font-size: clamp(2.8rem, 5vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: var(--t1);
}
.pricing-card--premium .pricing-card__price {
color: var(--g);
}
.pricing-card__usd {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--t4);
letter-spacing: 0.02em;
}
.pricing-card__vat {
font-family: var(--mono);
font-size: 0.6rem;
color: var(--t4);
letter-spacing: 0.02em;
}
.pricing-card__promise {
font-size: 1rem;
font-weight: 600;
color: var(--t1);
line-height: 1.3;
letter-spacing: -0.01em;
}
.pricing-card__features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.88rem;
color: var(--t2);
}
.pricing-card__features li::before {
font-family: var(--mono);
font-weight: 700;
font-size: 0.76rem;
color: var(--g);
flex-shrink: 0;
margin-top: 1px;
}
.pricing-card__who {
font-family: var(--mono);
font-size: 0.68rem;
color: var(--t3);
line-height: 1.55;
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 18px;
}
.pricing-card__who strong {
color: var(--t2);
}
.pricing-card__cta {
display: block;
padding: 14px 24px;
border-radius: 980px;
font-size: 0.88rem;
font-weight: 700;
letter-spacing: -0.01em;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.06);
color: var(--t1);
}
.pricing-card--premium .pricing-card__cta {
background: linear-gradient(180deg, #8ed11a 0%, #76b900 55%, #5e9500 100%);
color: #0a0a0a;
border-color: rgba(255,255,255,0.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 20px rgba(118,185,0,0.35);
}
.pricing-card__cta:hover {
transform: translateY(-2px);
}
.pricing-card--premium .pricing-card__cta:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 28px rgba(118,185,0,0.5);
}
.pricing-custom {
max-width: 1060px;
margin: 40px auto 0;
text-align: center;
font-size: 0.9rem;
color: var(--t3);
}
.pricing-custom a {
color: var(--g);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.pricing-guarantee {
max-width: 1060px;
margin: 48px auto 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 48px;
}
@media (max-width: 640px) {
.pricing-guarantee {
grid-template-columns: 1fr;
gap: 16px;
}
}
.pricing-guarantee__item {
text-align: center;
font-size: 0.84rem;
color: var(--t3);
line-height: 1.5;
}
.pricing-guarantee__icon {
font-family: var(--mono);
font-size: 1.2rem;
color: var(--g);
margin-bottom: 8px;
}
.subscribe-strip {
max-width: 900px;
margin: 48px auto 0;
padding: 32px;
background: linear-gradient(165deg, rgba(118,185,0,0.07) 0%, rgba(10,14,7,0.6) 100%);
border: 1px solid rgba(118,185,0,0.2);
border-radius: 20px;
text-align: center;
}
.subscribe-strip__h {
font-size: 1.1rem;
font-weight: 700;
color: var(--t1);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.subscribe-strip__sub {
font-size: 0.88rem;
color: var(--t3);
margin-bottom: 20px;
line-height: 1.5;
}
.subscribe-form {
display: flex;
gap: 10px;
max-width: 480px;
margin: 0 auto;
flex-wrap: wrap;
}
.subscribe-form input[type="email"] {
flex: 1 1 200px;
padding: 12px 16px;
background: rgba(10,14,7,0.7);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
color: var(--t1);
font-family: var(--mono);
font-size: 0.84rem;
transition: border-color .2s var(--e1);
}
.subscribe-form input[type="email"]:focus {
outline: none;
border-color: var(--g);
box-shadow: 0 0 0 3px var(--g-dim);
}
.subscribe-form input[type="email"]::placeholder {
color: var(--t4);
}
.subscribe-form__btn {
padding: 12px 22px;
border-radius: 12px;
background: var(--g);
color: #000;
font-family: var(--mono);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
border: none;
cursor: pointer;
white-space: nowrap;
transition: filter .2s var(--e1), transform .2s var(--e1);
}
.subscribe-form__btn:hover {
filter: brightness(1.1);
transform: translateY(-1px);
}
.subscribe-form__consent {
width: 100%;
font-size: 0.68rem;
color: var(--t4);
text-align: center;
margin-top: 8px;
line-height: 1.5;
}
.subscribe-form__consent a {
color: var(--t3);
text-decoration: underline;
text-underline-offset: 3px;
}
.subscribe-msg {
font-family: var(--mono);
font-size: 0.78rem;
padding: 10px 16px;
border-radius: 10px;
margin-top: 12px;
display: none;
}
.subscribe-msg.is-ok {
display: block;
color: var(--g);
background: var(--g-dim);
border: 1px solid var(--g-line);
}
.subscribe-msg.is-err {
display: block;
color: var(--red);
background: rgba(255,85,85,0.08);
border: 1px solid rgba(255,85,85,0.3);
}
.queue-layout {
max-width: 900px;
margin: 0 auto;
padding: clamp(100px, 14vh, 160px) clamp(22px, 5vw, 40px) 80px;
}
.queue-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 32px;
gap: 16px;
flex-wrap: wrap;
}
.queue-header h1 {
font-family: var(--mono);
font-size: 1.2rem;
font-weight: 700;
color: var(--t1);
letter-spacing: -0.01em;
}
.queue-header__status {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--t3);
letter-spacing: 0.06em;
}
.queue-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.queue-item {
background: rgba(10,14,7,0.72);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
overflow: hidden;
transition: border-color .2s var(--e1);
}
.queue-item:hover {
border-color: rgba(255,255,255,0.16);
}
.queue-item__head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
flex-wrap: wrap;
}
.queue-item__score {
font-family: var(--mono);
font-size: 1.1rem;
font-weight: 800;
color: var(--g);
min-width: 40px;
text-align: right;
}
.queue-item__title {
flex: 1;
font-size: 0.95rem;
font-weight: 600;
color: var(--t1);
letter-spacing: -0.01em;
min-width: 200px;
}
.queue-item__lede {
font-size: 0.82rem;
color: var(--t2);
line-height: 1.5;
padding: 0 20px 12px;
}
.queue-item__actions {
display: flex;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.02);
flex-wrap: wrap;
}
.queue-btn {
padding: 8px 16px;
border-radius: 8px;
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
border: 1px solid transparent;
transition: filter .2s var(--e1), transform .15s var(--e1);
}
.queue-btn:hover {
transform: translateY(-1px);
filter: brightness(1.1);
}
.queue-btn--publish {
background: var(--g);
color: #000;
border-color: rgba(255,255,255,0.2);
}
.queue-btn--edit {
background: rgba(255,255,255,0.08);
color: var(--t1);
border-color: rgba(255,255,255,0.14);
}
.queue-btn--discard {
background: rgba(255,85,85,0.12);
color: var(--red);
border-color: rgba(255,85,85,0.3);
}
.queue-btn--regen {
background: rgba(251,191,36,0.1);
color: var(--amber);
border-color: rgba(251,191,36,0.3);
}
.queue-editor {
padding: 16px 20px;
border-top: 1px solid rgba(255,255,255,0.06);
display: none;
}
.queue-editor.is-open {
display: block;
}
.queue-editor textarea {
width: 100%;
min-height: 300px;
background: rgba(6,8,4,0.9);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 14px;
color: var(--t1);
font-family: var(--mono);
font-size: 0.78rem;
line-height: 1.7;
resize: vertical;
}
.queue-editor textarea:focus {
outline: none;
border-color: var(--g);
}
.queue-editor__preview {
margin-top: 16px;
padding: 16px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
font-size: 0.88rem;
line-height: 1.65;
color: var(--t2);
max-height: 300px;
overflow-y: auto;
}
.queue-empty {
text-align: center;
padding: 80px 40px;
font-family: var(--mono);
font-size: 0.88rem;
color: var(--t3);
}
.queue-empty strong {
display: block;
font-size: 1.2rem;
color: var(--g);
margin-bottom: 8px;
}
.doc-layout {
max-width: 720px;
margin: 0 auto;
padding: clamp(120px, 16vh, 180px) clamp(22px, 5vw, 40px) clamp(80px, 10vw, 140px);
}
.doc-layout h1 {
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--t1);
margin-bottom: 12px;
}
.doc-layout .doc-meta {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--t3);
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255,255,255,0.08);
letter-spacing: 0.04em;
}
.doc-layout h2 {
font-size: 1.4rem;
font-weight: 700;
color: var(--t1);
letter-spacing: -0.01em;
margin: 40px 0 12px;
}
.doc-layout p {
font-size: 1rem;
line-height: 1.7;
color: var(--t2);
margin-bottom: 16px;
}
.doc-layout ul {
margin: 0 0 20px 22px;
padding: 0;
}
.doc-layout li {
font-size: 1rem;
line-height: 1.65;
color: var(--t2);
margin-bottom: 8px;
}
.doc-layout a {
color: var(--g);
text-decoration: underline;
text-underline-offset: 3px;
}
/* blog-has-ticker no longer needs extra hero padding (ticker moved to bottom) */
.gnav__links a[aria-label="pricing"] {
background: rgba(118,185,0,0.08);
border-radius: 6px;
color: var(--g);
opacity: 1;
}
.post--v19 {
max-width: 720px;
margin: 0 auto;
padding: 0;
}
.gfooter__status {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--t2, #b8b8b8);
margin-bottom: 12px;
}
.gfooter__status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--g, #76b900);
box-shadow: 0 0 0 0 rgba(118,185,0,0.55);
animation: statusPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
flex-shrink: 0;
}
@keyframes statusPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(118,185,0,0.55);
}
50% {
box-shadow: 0 0 0 6px rgba(118,185,0,0);
}
;
}
@media (prefers-reduced-motion: reduce) {
.gfooter__status-dot {
animation: none;
}
}
:root {
--iri-a: #ccff44;
--iri-b: #4488ff;
--iri-c: #ff5555;
--iri-d: #76b900;
--iri-e: #d4af37;
}
@property --btn-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
@property --progress {
syntax: '';
initial-value: 0%;
inherits: false;
}
.page-progress {
position: fixed;
left: 0;
right: 0;
height: 3px;
background: transparent;
z-index: 9999;
pointer-events: none;
}
.page-progress::before {
content: '';
display: block;
height: 100%;
width: var(--progress, 0%);
background: linear-gradient(90deg, var(--iri-a), var(--iri-d), var(--iri-b), var(--iri-c), var(--iri-a));
background-size: 400% 100%;
animation: iriFlow 9s linear infinite;
box-shadow: 0 0 12px rgba(118,185,0,0.55), 0 0 2px rgba(204,255,68,0.8);
transition: width 0.08s linear;
}
@keyframes iriFlow {
0% {
background-position: 0% 50%;
}
100% {
background-position: 400% 50%;
}
;
}
/* ONE iridescent rule for every title - hero, sections, CTA. No specials. */
.sec-welcome__title em, .sc-h em, .gr-h em, .sc-head__h em, .sec-head__h em, .blog-hero__title em {
font-style: normal;
display: inline-block;
line-height: 1.2;
background-image: linear-gradient(110deg, var(--iri-a, #ccff44) 0%, var(--iri-d, #76b900) 18%, var(--iri-b, #4488ff) 42%, var(--iri-c, #ff5555) 65%, var(--iri-d, #76b900) 82%, var(--iri-a, #ccff44) 100%);
background-size: 300% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: iriShimmer 7s ease-in-out infinite;
filter: drop-shadow(0 0 24px rgba(118,185,0,0.28));
}
@keyframes iriShimmer {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 300% 50%;
}
;
}
/* Parent filter on H1 kills child background-clip:text in Chrome - strip it so hero em paints identically to .sc-h em. Not a special effect, just enabling the shared rule. */
.sec-welcome__title, .sec-welcome__title.is-lit {
filter: none;
}
.button {
isolation: isolate;
position: relative;
}
.button::after {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
padding: 2px;
background: conic-gradient(from var(--btn-angle, 0deg), var(--iri-a), var(--iri-b), var(--iri-c), var(--iri-d), var(--iri-a));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.35s var(--e1);
pointer-events: none;
z-index: -1;
animation: btnSpin 6s linear infinite;
}
@keyframes btnSpin {
from {
--btn-angle: 0deg;
}
to {
--btn-angle: 360deg;
}
;
}
.button:hover::after {
opacity: 1;
}
.gnav__links a {
position: relative;
overflow: visible;
}
.gnav__links a::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 1px;
background: var(--g);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.32s var(--e1);
pointer-events: none;
opacity: 0.85;
}
.gnav__links a:hover::after, .gnav__links a:focus-visible::after {
transform: scaleX(1);
}
.hl {
clip-path: polygon( 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.hl {
position: relative;
isolation: isolate;
}
.hl::before {
padding: 1px;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: principleOrbit 7s linear infinite;
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient( circle 260px at var(--light-x, 50%) var(--light-y, 0%), rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 35%, transparent 60%);
opacity: 0;
transition: opacity 0.3s var(--e1);
pointer-events: none;
z-index: 1;
clip-path: inherit;
}
.hl:hover::before {
opacity: 1;
}
hr {
border: 0;
height: 32px;
background: transparent;
text-align: center;
margin: 56px auto;
position: relative;
overflow: visible;
}
hr::before {
content: '◇';
display: inline-block;
color: var(--g);
font-size: 18px;
opacity: 0.55;
line-height: 32px;
text-shadow: 0 0 16px rgba(118,185,0,0.5);
animation: hrDiamondSpin 14s linear infinite;
}
@keyframes hrDiamondSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
;
}
/* reduced-motion - halt iri animations */
@media (prefers-reduced-motion: reduce) {
.page-progress::before, .sec-welcome__title em, .sc-h em, .gr-h em, .sc-head__h em, .button::after, .gnav__links a:hover::after, hr::before {
animation: none !important;
}
}
.button::before {
background: radial-gradient(circle 140px at var(--flare-x, 50%) var(--flare-y, 50%), rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 25%, transparent 55%), linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.45) 50%, transparent 80%);
}
.button {
transform: translate3d(var(--pull-x, 0px), var(--pull-y, 0px), 0);
transition: transform 0.24s cubic-bezier(0.33, 1, 0.68, 1), box-shadow .22s var(--e1), filter .22s var(--e1);
}
.sec-welcome__title {
text-shadow: 1px 0 rgba(255,85,85,0.10), -1px 0 rgba(68,136,255,0.10);
}
@property --card-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
.sc-tile::after, .principle::after, .hymn-num__block::after, .spec-cell::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--card-angle, 0deg), rgba(204,255,68,0.0) 0%, rgba(204,255,68,0.6) 20%, rgba(68,136,255,0.6) 50%, rgba(255,85,85,0.6) 80%, rgba(204,255,68,0.0) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s var(--e1);
z-index: 2;
}
@keyframes cardBorderSpin {
from {
--card-angle: 0deg;
}
to {
--card-angle: 360deg;
}
;
}
/* Do NOT include .hl:hover::after - .hl has its own numeral-watermark ::after; overriding opacity here would dim the 01/02/03 numerals. .hl gets its rolling glow via ::before orbit. */
.sc-tile:hover::after, .principle:hover::after, .hymn-num__block:hover::after, .spec-cell:hover::after {
opacity: 0.55;
}
@supports (animation-timeline: scroll()) {
.hero-aurora {
animation: auroraBloom 16s ease-in-out infinite alternate, auroraHueShift linear both;
animation-timeline: auto, scroll(root);
animation-range: auto, 0 100vh;
}
@keyframes auroraHueShift {
from {
filter: hue-rotate(0deg) saturate(1);
}
to {
filter: hue-rotate(60deg) saturate(1.25);
}
;
}
}
.gnav__brand:hover .gnav__dot {
box-shadow: -2px 0 0 rgba(68,136,255,0.5), 2px 0 0 rgba(255,85,85,0.5), 0 0 12px rgba(118,185,0,0.7);
transition: box-shadow 0.2s var(--e1);
}
.count-up {
font-variant-numeric: tabular-nums;
display: inline-block;
transition: filter 0.4s var(--e1);
}
.count-up.is-counting {
filter: drop-shadow(0 0 10px rgba(204,255,68,0.4));
}
.prism-glyph::before {
content: "◈";
display: inline-block;
margin-right: 6px;
color: var(--g-l);
text-shadow: 0 0 10px rgba(204,255,68,0.6);
animation: prismGlyphSpin 6s linear infinite;
vertical-align: -2px;
}
@keyframes prismGlyphSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
;
}
@media (prefers-reduced-motion: reduce) {
.sec-welcome__title, .hl::after, .sc-tile::after, .principle::after, .hymn-num__block::after, .spec-cell::after, .prism-glyph::before, .hero-aurora {
animation: none !important;
}
.sec-welcome__title {
filter: none !important;
text-shadow: none !important;
}
}
.launch-strip {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 10px 20px;
background: linear-gradient(90deg, rgba(15,18,10,0.96) 0%, rgba(12,16,8,0.96) 100%);
border-bottom: 1px solid rgba(204,255,68,0.12);
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.74rem;
letter-spacing: 0.04em;
color: var(--t2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.launch-strip::before {
content: 'NEW';
padding: 3px 8px;
border-radius: 4px;
background: linear-gradient(110deg, var(--iri-a), var(--iri-d));
color: #0a0a0a;
font-weight: 800;
letter-spacing: 0.08em;
font-size: 0.64rem;
}
.launch-strip a {
color: var(--iri-a);
text-decoration: none;
border-bottom: 1px dotted rgba(204,255,68,0.4);
transition: color 0.2s, border-color 0.2s;
}
.launch-strip a:hover {
color: #fff;
border-bottom-color: rgba(255,255,255,0.6);
}
.launch-strip__dismiss {
margin-left: 12px;
background: transparent;
border: 0;
color: var(--t3);
font-size: 1rem;
cursor: pointer;
line-height: 1;
padding: 0 6px;
}
.launch-strip__dismiss:hover {
color: var(--t1);
}
@media (max-width: 640px) {
.launch-strip {
font-size: 0.7rem;
padding: 8px 12px;
}
.launch-strip__detail {
display: none;
}
}
.pricing-ribbon {
position: relative;
overflow: hidden;
}
.pricing-ribbon::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
transform: translateX(-150%);
animation: ribbonShine 7s var(--e1) infinite;
pointer-events: none;
}
@keyframes ribbonShine {
0%, 70% {
transform: translateX(-150%);
}
85% {
transform: translateX(150%);
}
100% {
transform: translateX(150%);
}
;
}
details > summary {
list-style: none;
cursor: pointer;
padding-left: 24px;
position: relative;
transition: color 0.2s;
}
details > summary::-webkit-details-marker {
display: none;
}
details > summary::before {
content: '';
position: absolute;
left: 2px;
top: 50%;
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-70%) rotate(-45deg);
transition: transform 0.3s var(--spring);
opacity: 0.7;
}
details[open] > summary::before {
transform: translateY(-30%) rotate(45deg);
}
.gnav.is-scrolled {
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
background: rgba(8,10,6,0.55);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sec-compare [data-enter-tile] {
opacity: 0;
transform: scale(0.96) translateY(12px);
transition: opacity 0.55s var(--e1), transform 0.65s var(--spring);
}
.sec-compare [data-enter-tile].is-visible {
opacity: 1;
transform: scale(1) translateY(0);
}
.sec-compare [data-enter-tile]:nth-child(1) {
transition-delay: 0.12s;
}
.sec-compare [data-enter-tile]:nth-child(2) {
transition-delay: 0s;
}
.sec-compare [data-enter-tile]:nth-child(3) {
transition-delay: 0.12s;
}
.principle {
position: relative;
isolation: isolate;
overflow: hidden;
}
.principle::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient( circle 280px at var(--light-x, 50%) var(--light-y, 0%), rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 40%, transparent 65%);
opacity: 0;
transition: opacity 0.3s var(--e1);
pointer-events: none;
z-index: 1;
}
.principle:hover::before {
opacity: 1;
}
a[href^="http"]:not([href*="cyber.koscak.ai"]):not([href*="koscak.ai"])::after {
content: '↗';
display: inline-block;
margin-left: 3px;
font-size: 0.75em;
opacity: 0.55;
vertical-align: 2px;
transition: transform 0.2s, opacity 0.2s;
}
a[href^="http"]:not([href*="cyber.koscak.ai"]):not([href*="koscak.ai"]):hover::after {
transform: translate(2px, -2px);
opacity: 0.9;
}
.pricing-card__currency {
font-size: 0.42em;
font-weight: 600;
margin-right: 2px;
vertical-align: super;
letter-spacing: 0.02em;
color: var(--t2);
}
.sc-stage__num.count-up.is-counting, .hstat__num.count-up.is-counting, .spec-cell__num.count-up.is-counting {
filter: drop-shadow(0 0 14px rgba(204,255,68,0.45));
}
@supports (view-transition-name: none) {
.gnav__brand {
view-transition-name: nav-brand;
}
.gnav__buy {
view-transition-name: nav-cta;
}
.sec-welcome__title {
view-transition-name: hero-title;
}
.blog-hero__title {
view-transition-name: blog-title;
}
.pricing-card--premium .pricing-card__tier {
view-transition-name: pricing-featured;
}
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root), ::view-transition-new(root) {
animation: none !important;
}
}
.page-progress {
opacity: 0.75;
transition: opacity 0.3s;
}
.page-progress.is-active {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.pricing-ribbon::after, .pricing-card__currency, .sec-compare [data-enter-tile] {
animation: none !important;
transition: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* keep the 28px rounded corners from the base block; chamfer clip-path removed because it fought border-radius + background and produced visible corner rectangles over text */
.pricing-card {
position: relative;
isolation: isolate;
transition: transform 0.35s var(--spring), box-shadow 0.35s var(--e1), border-color 0.35s var(--e1);
}
.pricing-card:hover {
transform: translateY(-4px);
}
/* cursor-driven specular on each card - uses ::after so premium's ::before (orbit border) coexists */
.pricing-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient( circle 320px at var(--light-x, 50%) var(--light-y, 0%), rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 40%, transparent 65%);
opacity: 0;
transition: opacity 0.3s var(--e1);
pointer-events: none;
z-index: 1;
}
.pricing-card:hover::after {
opacity: 1;
}
/* content stays above the specular layer */
/* premium tier: iridescent rim border static + subtle inner glow */
.pricing-card--premium {
border-color: rgba(118,185,0,0.2);
background: linear-gradient(180deg, rgba(118,185,0,0.06) 0%, rgba(10,12,8,0.95) 40%, rgba(10,12,8,0.98) 100%);
box-shadow: inset 0 1px 0 rgba(204,255,68,0.14), inset 0 -1px 0 rgba(0,0,0,0.4), 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(204,255,68,0.18);
}
/* premium tier ::after REMOVED - the existing orbit ::before from earlier CSS already carries the signature; stacking another overlay was occluding the price digits */
.pricing-card--premium:hover {
box-shadow: inset 0 1px 0 rgba(204,255,68,0.22), inset 0 -1px 0 rgba(0,0,0,0.4), 0 34px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(204,255,68,0.4), 0 0 40px rgba(118,185,0,0.2);
}
/* tier price stays in white for clarity; iridescent treatment lives on the EUR label only */
.pricing-card__price, .pricing-card__usd, .pricing-card__vat {
font-variant-numeric: tabular-nums;
}
.pricing-card:not(.pricing-card--premium):hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 28px 64px rgba(0,0,0,0.55), 0 0 36px rgba(118,185,0,0.08);
}
.pricing-card__cta {
position: relative;
z-index: 2;
transition: transform 0.24s var(--spring), filter 0.24s var(--e1);
transform: translate3d(var(--pull-x, 0px), var(--pull-y, 0px), 0);
}
.pricing-card__cta:hover {
filter: drop-shadow(0 0 12px rgba(204,255,68,0.45));
}
.pricing-card--premium .pricing-ribbon {
background: linear-gradient(110deg, var(--iri-d) 0%, var(--iri-a) 30%, var(--iri-b) 55%, var(--iri-a) 80%, var(--iri-d) 100%);
background-size: 240% auto;
animation: iriShimmer 10s ease-in-out infinite;
color: #0a0a0a;
font-weight: 800;
letter-spacing: 0.08em;
}
/* feature list: subtle green check replaces bullet */
.pricing-card__features li {
position: relative;
padding-left: 24px;
line-height: 1.55;
margin-bottom: 12px;
}
.pricing-card__features li::before {
content: '';
position: absolute;
left: 0;
top: 0.55em;
width: 12px;
height: 6px;
border-left: 1.5px solid var(--g);
border-bottom: 1.5px solid var(--g);
transform: rotate(-45deg);
opacity: 0.9;
}
/* tier label tiny caps refinement */
.pricing-card__tier {
font-weight: 700;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--t3);
margin-bottom: 16px;
}
@media (prefers-reduced-motion: reduce) {
.pricing-card, .pricing-card__price, .pricing-card--premium .pricing-ribbon {
animation: none !important;
transition: none !important;
}
}
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* hero urgency strip - first-100 offer */
.hero-scan__urgency {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
margin: 0 0 18px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--t1);
background: linear-gradient(90deg, rgba(204,255,68,0.08) 0%, rgba(118,185,0,0.04) 100%);
border: 1px solid rgba(204,255,68,0.18);
border-radius: 100px;
max-width: 100%;
}
.hero-scan__urgency strong {
color: var(--g-l, #ccff44);
font-weight: 700;
}
.hero-scan__pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--g-l, #ccff44);
box-shadow: 0 0 0 0 rgba(204,255,68,0.55);
animation: statusPulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
flex-shrink: 0;
}
/* hero scan form - URL input + Scan button as one centered tray */
.hero-scan {
display: flex;
gap: 8px;
align-items: stretch;
margin: 0 0 16px;
max-width: none;
width: 100%;
box-sizing: border-box;
padding: 8px;
background: rgba(12, 14, 10, 0.72);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 100px;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 48px rgba(0, 0, 0, 0.35);
}
.hero-scan input[type="text"] {
flex: 1 1 auto;
min-width: 0;
font-family: inherit;
font-size: 16px;
font-weight: 500;
padding: 14px 18px;
border-radius: 100px;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.03);
color: var(--t1);
transition: border-color 0.2s var(--e1), box-shadow 0.25s var(--e1), background 0.2s var(--e1);
caret-color: var(--g-l);
}
.hero-scan input[type="text"]::placeholder {
color: var(--t3);
}
.hero-scan input[type="text"]:focus {
outline: none;
border-color: rgba(204,255,68,0.45);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 0 0 3px rgba(204,255,68,0.12);
}
.hero-scan__btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(180deg, #8ed11a 0%, #76b900 50%, #5e9500 100%);
color: #0a0a0a;
padding: 14px 24px;
border-radius: 100px;
border: 1px solid rgba(255,255,255,0.22);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: -0.01em;
cursor: pointer;
white-space: nowrap;
flex: 0 0 auto;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.25), 0 6px 18px rgba(118,185,0,0.28);
transition: transform 0.22s var(--spring), filter 0.22s var(--e1);
}
.hero-scan__btn:hover {
transform: translateY(-2px);
filter: brightness(1.06);
}
.hero-scan__btn:active {
transform: translateY(0);
}
.hero-scan__btn-loading {
display: none;
}
.hero-scan.is-scanning .hero-scan__btn-text {
display: none;
}
.hero-scan.is-scanning .hero-scan__btn-loading {
display: inline;
}
.hero-scan.is-scanning .hero-scan__btn {
animation: btnPulse 1s ease-in-out infinite;
cursor: wait;
}
@keyframes btnPulse {
0%, 100% {
filter: brightness(1);
}
50% {
filter: brightness(1.15);
}
;
}
.hero-scan__trust {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
font-size: 0.82rem;
color: var(--t2);
margin: 0 0 32px;
padding: 10px 18px;
background: linear-gradient(90deg, rgba(204,255,68,0.06) 0%, rgba(118,185,0,0.03) 100%);
border: 1px solid rgba(204,255,68,0.14);
border-radius: 100px;
max-width: 100%;
}
.hero-scan__trust strong {
color: var(--g-l, #ccff44);
font-weight: 700;
}
.hero-scan__trust a {
color: var(--t2);
}
/* mobile: stack scan form */
@media (max-width: 640px) {
.hero-scan__btn {
width: 100%;
justify-content: center;
}
.hero-scan__urgency {
font-size: 0.7rem;
padding: 8px 14px;
line-height: 1.4;
text-align: left;
}
}
/* ─── scan results section (sits right under hero scan form, no big gap) ─── */
.sec-scan-results {
padding: 0 var(--sec-x, 32px) clamp(48px, 7vw, 96px);
margin-top: -24px;
background: var(--bg, #000);
position: relative;
z-index: 2;
}
.scan-results__container {
max-width: 920px;
margin: 0 auto;
}
.scan-results__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px 32px;
background: var(--s1, #111213);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.scan-results__score-block {
display: flex;
align-items: baseline;
gap: 16px;
}
.scan-results__score {
font-size: clamp(42px, 6vw, 64px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
background: linear-gradient(110deg, var(--iri-a, #ccff44), var(--iri-d, #76b900));
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: iriShimmer 8s ease-in-out infinite;
font-variant-numeric: tabular-nums;
}
.scan-results__band {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.9rem;
color: var(--t3);
}
.scan-results__url {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.82rem;
color: var(--t2);
word-break: break-all;
max-width: 100%;
}
.scan-results__summary {
font-size: 0.86rem;
color: var(--t2);
margin-top: 8px;
}
.scan-results__summary strong {
color: var(--r, #ff5555);
}
.scan-findings {
margin: 0 0 24px;
list-style: none;
padding: 0;
display: grid;
gap: 12px;
}
.finding {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
padding: 18px 24px;
background: var(--s1, #111213);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
transition: border-color 0.2s;
}
.finding:hover {
border-color: rgba(255,255,255,0.14);
}
.finding__severity {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
padding: 5px 10px;
border-radius: 6px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.finding__severity--high {
background: rgba(255,85,85,0.14);
color: #ff8a8a;
border: 1px solid rgba(255,85,85,0.3);
}
.finding__severity--medium {
background: rgba(245,166,35,0.12);
color: #f5a623;
border: 1px solid rgba(245,166,35,0.3);
}
.finding__severity--low {
background: rgba(68,136,255,0.12);
color: #7aa9ff;
border: 1px solid rgba(68,136,255,0.3);
}
.finding__severity--pass {
background: rgba(118,185,0,0.12);
color: var(--g-l, #ccff44);
border: 1px solid rgba(118,185,0,0.3);
}
.finding__body {
min-width: 0;
}
.finding__name {
font-weight: 600;
font-size: 1rem;
color: var(--t1, #f0f0f0);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.finding__detail {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.78rem;
color: var(--t2, #b8b8b8);
margin: 0;
line-height: 1.5;
word-break: break-word;
}
.finding__weight {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.72rem;
color: var(--t3, #606060);
white-space: nowrap;
}
/* locked/paywalled finding */
.finding--locked {
position: relative;
overflow: hidden;
}
.finding--locked::after {
content: '◈';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--g-l, #ccff44);
font-size: 1.1rem;
text-shadow: 0 0 10px rgba(204,255,68,0.6);
}
/* Re-test + historical compare (same 15 checks) */
.scan-retest-note {
margin: 12px 0 0;
text-align: center;
font-size: 0.82rem;
color: var(--t3);
font-family: var(--mono, 'JetBrains Mono', monospace);
}
.scan-compare {
margin: 16px 0 8px;
padding: 16px 18px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.03);
text-align: left;
}
.scan-compare--up {
border-color: rgba(118,185,0,0.35);
background: rgba(118,185,0,0.08);
}
.scan-compare--down {
border-color: rgba(255,85,85,0.3);
background: rgba(255,85,85,0.08);
}
.scan-compare__label {
margin: 0 0 8px;
font-size: 0.72rem;
font-family: var(--mono, 'JetBrains Mono', monospace);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--t3);
}
.scan-compare__line {
margin: 0 0 8px;
font-size: 1.05rem;
color: var(--t1);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 12px;
}
.scan-compare__prev {
color: var(--t2);
}
.scan-compare__arrow {
color: var(--t3);
}
.scan-compare__now b {
color: var(--g-l, #ccff44);
}
.scan-compare--down .scan-compare__now b {
color: #ff8a8a;
}
.scan-compare__delta {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-weight: 700;
font-size: 0.95rem;
}
.scan-compare--up .scan-compare__delta {
color: var(--g-l, #ccff44);
}
.scan-compare--down .scan-compare__delta {
color: #ff8a8a;
}
.scan-compare--flat .scan-compare__delta {
color: var(--t3);
}
.scan-compare__hint {
margin: 0;
font-size: 0.88rem;
color: var(--t2);
line-height: 1.45;
}
/* Agent / team handoff after scan results */
.scan-agent {
margin-top: 24px;
padding: 28px 32px;
border-radius: 16px;
background: linear-gradient(165deg, rgba(118,185,0,0.1) 0%, rgba(10,12,8,0.98) 55%);
border: 1px solid rgba(204,255,68,0.28);
text-align: center;
}
.scan-agent__eyebrow {
margin: 0 0 8px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--g-l, #ccff44);
}
.scan-agent__h {
font-size: clamp(1.15rem, 2.5vw, 1.45rem);
font-weight: 750;
letter-spacing: -0.02em;
color: var(--t1);
margin: 0 0 10px;
}
.scan-agent__p {
font-size: 0.95rem;
color: var(--t2);
margin: 0 auto 18px;
line-height: 1.55;
max-width: 520px;
}
.scan-agent__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 12px;
}
.scan-agent__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
border-radius: 100px;
border: 1px solid rgba(255,255,255,0.18);
background: linear-gradient(180deg, #8ed11a 0%, #76b900 50%, #5e9500 100%);
color: #0a0a0a;
font-size: 0.95rem;
font-weight: 750;
font-family: inherit;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 22px rgba(118,185,0,0.3);
transition: transform 0.18s ease, filter 0.18s ease;
}
.scan-agent__btn:hover {
transform: translateY(-1px);
filter: brightness(1.05);
}
.scan-agent__btn--ghost {
background: rgba(255,255,255,0.05);
color: var(--t1);
border-color: rgba(255,255,255,0.14);
box-shadow: none;
font-weight: 650;
}
.scan-agent__btn--ghost:hover {
border-color: rgba(118,185,0,0.4);
background: rgba(118,185,0,0.08);
}
.scan-agent__hint {
margin: 0;
font-size: 0.78rem;
color: var(--t3);
line-height: 1.4;
}
/* unlock CTA card after locked findings */
.scan-unlock {
margin-top: 20px;
padding: 28px 32px;
border-radius: 16px;
background: linear-gradient(165deg, rgba(118,185,0,0.08) 0%, rgba(10,12,8,0.98) 50%);
border: 1px solid rgba(204,255,68,0.22);
text-align: center;
}
.scan-unlock__h {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--t1);
margin: 0 0 8px;
}
.scan-unlock__p {
font-size: 0.95rem;
color: var(--t2);
margin: 0 0 20px;
line-height: 1.55;
}
.scan-unlock__price {
display: inline-flex;
align-items: baseline;
gap: 8px;
margin-bottom: 16px;
font-variant-numeric: tabular-nums;
}
.scan-unlock__price-old {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.9rem;
color: var(--t3);
text-decoration: line-through;
}
.scan-unlock__price-now {
font-size: 2.4rem;
font-weight: 800;
background: linear-gradient(110deg, var(--iri-a), var(--iri-d), var(--iri-b), var(--iri-d), var(--iri-a));
background-size: 300% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: iriShimmer 6s ease-in-out infinite;
letter-spacing: -0.03em;
}
.scan-unlock__btn {
display: inline-block;
background: linear-gradient(180deg, #8ed11a 0%, #76b900 50%, #5e9500 100%);
color: #0a0a0a;
padding: 16px 36px;
border-radius: 100px;
border: 1px solid rgba(255,255,255,0.22);
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.25), 0 8px 24px rgba(118,185,0,0.35);
transition: transform 0.22s var(--spring), filter 0.22s var(--e1);
}
.scan-unlock__btn:hover {
transform: translateY(-2px);
filter: brightness(1.06);
}
.scan-unlock__alt {
display: block;
margin-top: 14px;
font-size: 0.82rem;
color: var(--t3);
}
.scan-unlock__alt a {
color: var(--t2);
}
/* scan error state */
.scan-error {
padding: 24px;
background: rgba(255,85,85,0.08);
border: 1px solid rgba(255,85,85,0.3);
border-radius: 12px;
color: #ff8a8a;
text-align: center;
}
/* reduced motion halts iri on results */
@media (prefers-reduced-motion: reduce) {
.scan-results__score, .scan-unlock__price-now, .hero-scan__pulse {
animation: none !important;
}
}
.scan-results__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.76rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--g-l, #ccff44);
margin: 0 0 16px;
}
.scan-results__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--g-l, #ccff44);
box-shadow: 0 0 0 0 rgba(204,255,68,0.55);
animation: statusPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.scan-prog {
max-width: 760px;
margin: 0 auto;
padding: 32px;
background: var(--s1, #111213);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
}
.scan-prog__heading {
margin: 0 0 20px;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.82rem;
color: var(--t2);
letter-spacing: 0.03em;
}
.scan-prog__heading strong {
color: var(--t1);
font-weight: 600;
word-break: break-all;
}
.scan-prog__bar-outer {
height: 3px;
background: rgba(255,255,255,0.05);
border-radius: 2px;
overflow: hidden;
margin-bottom: 24px;
}
.scan-prog__bar-inner {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--iri-a, #ccff44), var(--iri-d, #76b900), var(--iri-b, #4488ff), var(--iri-a, #ccff44));
background-size: 400% 100%;
animation: iriFlow 4s linear infinite;
transition: width 0.35s cubic-bezier(0.33, 1, 0.68, 1);
box-shadow: 0 0 12px rgba(204,255,68,0.55);
}
.scan-prog__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 6px;
}
.scan-prog__row {
display: grid;
grid-template-columns: 22px 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 8px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.82rem;
color: var(--t3);
background: rgba(255,255,255,0.02);
transition: background 0.2s, color 0.2s;
}
.scan-prog__row.is-done {
background: rgba(118,185,0,0.05);
color: var(--t1);
}
.scan-prog__icon {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.12);
background: transparent;
position: relative;
transition: background 0.2s, border-color 0.2s;
}
.scan-prog__row.is-done .scan-prog__icon {
background: var(--g, #76b900);
border-color: var(--g, #76b900);
box-shadow: 0 0 8px rgba(118,185,0,0.45);
}
.scan-prog__row.is-done .scan-prog__icon::after {
content: '';
position: absolute;
left: 3px;
top: 1px;
width: 4px;
height: 7px;
border-right: 2px solid #0a0a0a;
border-bottom: 2px solid #0a0a0a;
transform: rotate(45deg);
}
.scan-prog__label {
color: inherit;
letter-spacing: 0.01em;
}
.scan-prog__time {
font-size: 0.72rem;
color: var(--t3);
letter-spacing: 0;
opacity: 0;
transition: opacity 0.2s;
}
.scan-prog__row.is-done .scan-prog__time {
opacity: 0.75;
}
/* retry button for error state */
.scan-retry-btn {
display: inline-block;
background: transparent;
color: var(--t1);
padding: 10px 24px;
border-radius: 100px;
border: 1px solid rgba(255,255,255,0.18);
font-family: inherit;
font-size: 0.86rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
.scan-retry-btn:hover {
border-color: rgba(204,255,68,0.45);
background: rgba(204,255,68,0.06);
}
/* reviews section empty state */
.sec-reviews {
padding: clamp(80px, 10vw, 140px) var(--sec-x, 32px);
background: var(--bg, #000);
}
.sec-reviews .sec-head__h em {
font-style: italic;
}
/* reduced motion */
@media (prefers-reduced-motion: reduce) {
.scan-prog__bar-inner {
animation: none !important;
}
}
.scan-results__summary--big {
font-size: 1.1rem;
line-height: 1.4;
color: var(--t1);
margin-bottom: 8px;
}
.scan-results__summary--big strong {
color: var(--r, #ff5555);
}
.scan-results__paywall-hint {
font-size: 0.86rem;
color: var(--t3);
margin: 4px 0 0;
line-height: 1.5;
}
.scan-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 24px;
}
@media (max-width: 820px) {
.scan-split {
grid-template-columns: 1fr;
}
}
.scan-split__col {
min-width: 0;
}
.scan-split__h {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--t2);
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.scan-split__h-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 100px;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.scan-split__h-chip--pass {
background: rgba(118,185,0,0.14);
color: var(--g-l, #ccff44);
border: 1px solid rgba(118,185,0,0.32);
}
.scan-split__h-chip--fail {
background: rgba(255,85,85,0.14);
color: #ff8a8a;
border: 1px solid rgba(255,85,85,0.32);
}
.scan-findings--dense {
display: grid;
gap: 8px;
}
.scan-findings--dense .finding {
padding: 12px 16px;
grid-template-columns: auto 1fr;
}
.scan-findings--dense .finding__weight {
display: none;
}
.scan-findings--dense .finding__name {
font-size: 0.92rem;
margin-bottom: 2px;
}
.scan-findings--dense .finding__detail {
font-size: 0.74rem;
color: var(--t3);
}
.finding--pass {
border-color: rgba(118,185,0,0.12);
}
.finding--pass:hover {
border-color: rgba(118,185,0,0.28);
}
/* Locked with real text blurred - user sees shapes, can't read, wants to unlock */
.finding--locked .finding__name, .finding--locked .finding__detail {
filter: blur(5px);
user-select: none;
pointer-events: none;
transition: filter 0.3s var(--e1);
}
.finding--locked:hover .finding__name, .finding--locked:hover .finding__detail {
filter: blur(4.5px);
}
.scan-split__empty {
grid-column: 1 / -1;
font-size: 0.86rem;
color: var(--t3);
padding: 16px;
text-align: center;
font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
.scan-results__dot {
animation: none !important;
}
}
.fomo-pop {
position: fixed;
z-index: 600;
align-items: center;
gap: 14px;
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border: 1px solid rgba(204,255,68,0.18);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02);
}
.fomo-pop.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.fomo-pop__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--g-l, #ccff44);
box-shadow: 0 0 0 0 rgba(204,255,68,0.55);
animation: statusPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
flex-shrink: 0;
}
.fomo-pop__body {
flex: 1 1 auto;
min-width: 0;
}
.fomo-pop__x {
background: transparent;
border: 0;
color: var(--t3, #6a6a6a);
font-size: 1.15rem;
line-height: 1;
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
align-self: flex-start;
transition: color 0.2s, background 0.2s;
}
.fomo-pop__x:hover {
color: var(--t1, #f0f0f0);
background: rgba(255,255,255,0.06);
}
@media (max-width: 640px) {
.fomo-pop {
right: 12px;
max-width: none;
}
}
@media (prefers-reduced-motion: reduce) {
.fomo-pop__dot {
animation: none;
}
.fomo-pop {
transition: opacity 0.2s;
transform: none !important;
}
}
.bob-toggle {
position: fixed;
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(180deg, #0f1410, #0a0c08);
color: var(--t1, #f0f0f0);
border: 1px solid rgba(204,255,68,0.22);
border-radius: 100px;
font-family: inherit;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(204,255,68,0.06);
}
.bob-toggle:hover {
transform: translateY(-2px);
border-color: rgba(204,255,68,0.5);
}
.bob-toggle__pulse {
border-radius: 50%;
background: var(--g-l, #ccff44);
box-shadow: 0 0 0 0 rgba(204,255,68,0.55);
animation: statusPulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
flex-shrink: 0;
margin-left: 2px;
}
.bob-panel {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 850;
max-width: calc(100vw - 48px);
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
backdrop-filter: blur(28px) saturate(160%);
overflow: hidden;
transform-origin: bottom right;
animation: bobSlideIn 0.32s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Critical: [hidden] must win over display:flex or panel never closes */
.bob-toggle.is-open {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
@keyframes bobSlideIn {
from {
transform: translateY(16px) scale(0.96);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
;
}
.bob-panel__ident {
display: flex;
align-items: center;
gap: 12px;
}
.bob-panel__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--iri-a, #ccff44), var(--iri-d, #76b900));
color: #0a0a0a;
font-weight: 800;
letter-spacing: -0.02em;
}
.bob-panel[data-persona="t800"] .bob-panel__avatar {
background: linear-gradient(135deg, #ff5555, #7a0000);
color: #fff;
}
.bob-panel__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--g-l, #ccff44);
box-shadow: 0 0 6px rgba(204,255,68,0.5);
}
.bob-panel__x {
background: transparent;
border: 0;
color: var(--t3, #6a6a6a);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
.bob-panel__x:hover {
color: var(--t1);
background: rgba(255,255,255,0.06);
}
.bob-msg {
max-width: 84%;
word-wrap: break-word;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.bob-msg--human {
border: 1px solid rgba(68, 136, 255, 0.45);
background: rgba(68, 136, 255, 0.12);
border-left: 3px solid #4488ff;
}
.bob-msg__label {
font-family: var(--mono), ui-monospace, monospace;
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7fb4ff;
margin-bottom: 4px;
font-weight: 700;
}
.bob-msg__text {
white-space: pre-wrap;
}
.bob-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 14px 10px;
}
.bob-chip {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
color: inherit;
border-radius: 99px;
padding: 6px 11px;
font-size: 11.5px;
cursor: pointer;
font-family: inherit;
}
.bob-chip:hover {
border-color: rgba(118,185,0,.45);
background: rgba(118,185,0,.08);
}
.bob-chip--tg {
border-color: rgba(42, 171, 238, 0.45);
color: #7ec8f0;
}
.bob-chip--tg:hover {
border-color: rgba(42, 171, 238, 0.7);
background: rgba(42, 171, 238, 0.12);
}
.bob-msg-wrap {
display: flex;
flex-direction: column;
gap: 6px;
max-width: 92%;
}
.bob-msg-wrap--bot {
align-self: flex-start;
}
.bob-msg-wrap--user {
align-self: flex-end;
align-items: flex-end;
}
.bob-msg-wrap .bob-msg {
max-width: 100%;
}
.bob-msg-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.bob-tg-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 650;
text-decoration: none;
color: #0a0a0a;
background: linear-gradient(180deg, #54c0f0, #2aabee);
border: 1px solid rgba(255,255,255,.2);
box-shadow: 0 4px 14px rgba(42, 171, 238, 0.25);
}
.bob-tg-btn:hover {
filter: brightness(1.06);
}
.bob-agent-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 650;
font-family: inherit;
cursor: pointer;
color: #0a0a0a;
background: linear-gradient(180deg, #a0e628, #76b900);
border: 1px solid rgba(255,255,255,.2);
box-shadow: 0 4px 14px rgba(118, 185, 0, 0.28);
}
.bob-agent-btn:hover {
filter: brightness(1.06);
}
.bob-agent-btn--ghost {
background: rgba(118, 185, 0, 0.12);
color: #ccff44;
border: 1px solid rgba(118, 185, 0, 0.35);
box-shadow: none;
}
.bob-lead {
padding: 10px 14px 8px;
border-top: 1px solid rgba(255,255,255,.06);
background: rgba(118,185,0,.04);
}
.bob-lead[hidden] {
display: none !important;
}
.bob-lead__label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--t1, #f0f0f0);
margin: 0 0 8px;
}
.bob-lead__row {
display: flex;
gap: 6px;
align-items: stretch;
}
.bob-lead__row input {
flex: 1;
min-width: 0;
background: #141517;
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
padding: 9px 11px;
color: #f5f5f7;
font-size: 13.5px;
font-family: inherit;
outline: none;
}
.bob-lead__row input:focus {
border-color: rgba(118,185,0,.5);
}
.bob-lead__btn {
background: #76b900;
color: #0a0a0a;
border: 0;
border-radius: 10px;
padding: 0 12px;
font-weight: 700;
font-size: 12.5px;
cursor: pointer;
white-space: nowrap;
}
.bob-lead__skip {
background: transparent;
border: 1px solid rgba(255,255,255,.1);
color: var(--t3, #8a8f98);
border-radius: 10px;
padding: 0 10px;
font-size: 12px;
cursor: pointer;
}
.bob-lead__hint {
margin: 6px 0 0;
font-size: 11px;
color: var(--t3, #6b7178);
line-height: 1.35;
}
.bob-panel__form.is-sending {
opacity: 0.75;
pointer-events: none;
}
.bob-panel__send:disabled {
opacity: 0.5;
cursor: wait;
}
.bob-msg--bot {
align-self: flex-start;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
color: var(--t1, #f0f0f0);
}
.bob-msg--user {
align-self: flex-end;
background: linear-gradient(135deg, var(--g-l, #ccff44), var(--g, #76b900));
color: #0a0a0a;
font-weight: 500;
}
.bob-panel[data-persona="t800"] .bob-msg--user {
background: linear-gradient(135deg, #ff5555, #aa1010);
color: #fff;
}
.bob-typing {
align-self: flex-start;
display: inline-flex;
gap: 3px;
padding: 10px 14px;
border-radius: 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
}
.bob-typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--g-l, #ccff44);
animation: bobTypingDot 1.2s ease-in-out infinite;
}
.bob-typing span:nth-child(2) {
animation-delay: 0.15s;
}
.bob-typing span:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes bobTypingDot {
0%, 60%, 100% {
opacity: 0.3;
transform: translateY(0);
}
30% {
opacity: 1;
transform: translateY(-3px);
}
;
}
.bob-panel__form input:focus {
border-color: rgba(204,255,68,0.5);
}
.bob-panel__send {
background: linear-gradient(180deg, var(--iri-a, #ccff44), var(--iri-d, #76b900));
color: #0a0a0a;
border: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s;
}
.bob-panel__send:hover {
transform: scale(1.06);
}
@media (max-width: 640px) {
.bob-toggle__label {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.bob-panel {
animation: none;
}
.bob-toggle__pulse, .bob-typing span {
animation: none;
}
}
/* Hide fomo + chat toggle until scrolled past hero */
.fomo-pop {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(24px) scale(0.97) !important;
transition: opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1), transform 0.45s cubic-bezier(0.33, 1, 0.68, 1), visibility 0.4s !important;
grid-template-columns: auto 1fr auto;
display: grid;
max-width: calc(100vw - 48px);
}
.fomo-pop.is-revealed.is-visible {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) scale(1) !important;
}
.fomo-pop__score--A {
background: linear-gradient(135deg, #ccff44, #76b900);
}
.fomo-pop__score--B {
background: linear-gradient(135deg, #b5d85a, #76b900);
}
.fomo-pop__score--C {
background: linear-gradient(135deg, #f5a623, #c17a00);
}
.fomo-pop__score--D {
background: linear-gradient(135deg, #ff8a8a, #aa2222);
color: #fff;
}
.fomo-pop__score--F {
background: linear-gradient(135deg, #ff5555, #7a0000);
color: #fff;
}
.fomo-pop__dot {
display: none !important;
}
.fomo-pop__line strong {
-webkit-background-clip: text;
background-clip: text;
color: var(--t1, #f0f0f0) !important;
background: none !important;
-webkit-text-fill-color: currentColor !important;
font-weight: 700 !important;
}
/* Chat toggle: ALWAYS visible (was reveal-on-scroll - stayed opacity:0 until past 75% of hero, so most people never saw Bob on the landing) */
.bob-toggle {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) scale(1) !important;
transition: transform 0.22s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.22s, box-shadow 0.22s !important;
}
.bob-toggle:hover, .bob-toggle.is-revealed:hover {
transform: translateY(-2px) scale(1) !important;
border-color: rgba(204,255,68,0.5) !important;
}
/* Chat panel: bigger + expandable + nicer framing */
/* Expand/contract button in the panel head */
.bob-panel__expand {
background: transparent;
border: 0;
color: var(--t3, #6a6a6a);
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
font-size: 1rem;
line-height: 1;
margin-right: 4px;
transition: color 0.2s, background 0.2s;
}
.bob-panel__expand:hover {
color: var(--t1, #f0f0f0);
background: rgba(255,255,255,0.06);
}
/* Bigger type + breath in panel body */
@media (max-width: 640px) {
.fomo-pop {
width: calc(100vw - 24px);
left: 12px;
bottom: 12px;
}
.bob-panel {
max-width: none;
resize: none;
width: calc(100vw - 24px) !important;
height: 70vh !important;
left: 12px;
right: 12px;
bottom: 12px;
}
}
/* Bullet-hole easter egg in hero. Click empty space to shoot. */
.hero-holes {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
overflow: hidden;
}
.hero-hole {
position: absolute;
width: 22px;
height: 22px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(8, 10, 6, 0.95) 0%, rgba(8, 10, 6, 0.85) 35%, rgba(204, 255, 68, 0.35) 55%, rgba(118, 185, 0, 0.1) 75%, transparent 100%);
box-shadow: inset 0 0 8px rgba(0,0,0,0.9), 0 0 18px rgba(204, 255, 68, 0.25), 0 0 2px rgba(204, 255, 68, 0.6);
animation: holeImpact 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.28);
will-change: transform, opacity;
}
.hero-hole.is-dying {
animation: holeFade 0.5s forwards ease-out;
}
@keyframes holeImpact {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
60% {
transform: translate(-50%, -50%) scale(1.25);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
;
}
@keyframes holeFade {
from {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
to {
opacity: 0;
transform: translate(-50%, -50%) scale(0.4);
}
;
}
@media (prefers-reduced-motion: reduce) {
.hero-hole {
animation: none;
}
}
.sc-stage__num, .hstat__num, .spec-cell__num, [data-stat-number] {
text-shadow: 1px 0 rgba(255, 85, 85, 0.14), -1px 0 rgba(68, 136, 255, 0.14), 0 0 24px rgba(204, 255, 68, 0.22);
transition: text-shadow 0.4s var(--e1);
}
.sc-stage__num:hover, .hstat__num:hover, .spec-cell__num:hover, [data-stat-number]:hover {
text-shadow: 2px 0 rgba(255, 85, 85, 0.26), -2px 0 rgba(68, 136, 255, 0.26), 0 0 32px rgba(204, 255, 68, 0.38);
}
@media (prefers-reduced-motion: reduce) {
.sc-stage__num, .hstat__num, .spec-cell__num, [data-stat-number] {
text-shadow: 0 0 24px rgba(204, 255, 68, 0.18);
transition: none;
}
}
@property --brand-morph {
syntax: '';
initial-value: 0;
inherits: false;
}
.gnav__dot {
position: relative;
transform: rotate(0deg);
transition: clip-path 0.6s cubic-bezier(0.33, 1, 0.68, 1), transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.4s var(--e1), background 0.4s var(--e1);
clip-path: circle(50% at 50% 50%);
}
/* When the nav is past the hero, dot morphs to a diamond with iridescent glow */
.gnav.is-scrolled .gnav__dot {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
transform: rotate(0deg);
background: linear-gradient(135deg, var(--iri-a, #ccff44), var(--iri-d, #76b900));
box-shadow: 0 0 10px rgba(204, 255, 68, 0.7), 0 0 22px rgba(118, 185, 0, 0.35);
}
.gnav__brand:hover .gnav__dot {
transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
.gnav__dot {
transition: none;
}
}
/* Chat toggle: smaller, calmer */
.bob-toggle__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--iri-a, #ccff44), var(--iri-d, #76b900));
color: #0a0a0a;
font-weight: 800;
letter-spacing: -0.02em;
flex-shrink: 0;
width: 28px !important;
height: 28px !important;
font-size: 0.86rem !important;
}
.bob-toggle__pulse {
width: 6px !important;
height: 6px !important;
}
/* Chat panel: compact default, no resize, cleaner frame */
.bob-panel {
width: min(380px, calc(100vw - 48px)) !important;
height: min(560px, calc(100vh - 48px)) !important;
min-width: unset !important;
min-height: unset !important;
resize: none !important;
border-radius: 20px !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 32px 80px rgba(0,0,0,0.7) !important;
background: radial-gradient(140% 120% at 0% 0%, rgba(118,185,0,0.04) 0%, transparent 55%), rgba(14,16,12,0.97) !important;
}
.bob-panel.is-expanded {
width: min(720px, calc(100vw - 48px)) !important;
height: min(780px, calc(100vh - 48px)) !important;
}
.bob-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px !important;
background: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.bob-panel__avatar {
width: 32px !important;
height: 32px !important;
}
.bob-panel__name {
margin: 0;
color: var(--t1, #f0f0f0);
letter-spacing: -0.01em;
font-size: 0.88rem !important;
font-weight: 600 !important;
}
.bob-panel__sub {
margin: 2px 0 0;
color: var(--t3, #6a6a6a);
font-family: var(--mono, 'JetBrains Mono', monospace);
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.68rem !important;
letter-spacing: 0.06em !important;
text-transform: uppercase;
}
.bob-panel__body {
flex: 1 1 auto;
min-height: 260px;
max-height: 440px;
overflow-y: auto;
display: flex;
flex-direction: column;
padding: 16px !important;
gap: 10px !important;
}
.bob-msg {
font-size: 0.88rem !important;
line-height: 1.5 !important;
padding: 9px 13px !important;
border-radius: 14px !important;
}
.bob-panel__form {
display: flex;
gap: 8px;
padding: 10px !important;
background: transparent !important;
border-top: 1px solid rgba(255,255,255,0.05) !important;
}
.bob-panel__form input {
flex: 1 1 auto;
min-width: 0;
font-family: inherit;
border-radius: 100px;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(20,22,18,0.85);
color: var(--t1, #f0f0f0);
outline: none;
font-size: 0.88rem !important;
padding: 9px 14px !important;
}
.bob-panel__send {
width: 36px !important;
height: 36px !important;
}
/* Fomo: less in-your-face */
.fomo-pop {
width: 320px !important;
padding: 10px 14px 10px 12px !important;
border-radius: 12px !important;
background: rgba(10,12,8,0.94) !important;
border-color: rgba(255,255,255,0.08) !important;
}
.fomo-pop__score {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-weight: 800;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: #0a0a0a;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
width: 38px !important;
height: 38px !important;
font-size: 0.92rem !important;
}
.fomo-pop__line {
font-weight: 600 !important;
letter-spacing: -0.01em !important;
line-height: 1.35 !important;
margin: 0 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--t1, #f0f0f0);
font-size: 0.8rem !important;
}
.fomo-pop__sub {
display: inline-flex !important;
align-items: center;
gap: 8px;
margin: 3px 0 0 !important;
color: var(--t3, #6a6a6a) !important;
font-family: var(--mono, 'JetBrains Mono', monospace);
letter-spacing: 0.08em !important;
text-transform: uppercase;
font-size: 0.66rem !important;
}
.fomo-pop__sub::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: #ccff44;
flex-shrink: 0;
animation: none !important;
box-shadow: 0 0 4px rgba(204,255,68,0.4) !important;
}
.button, .hero-scan__btn, .pricing-card__cta, .scan-unlock__btn {
overflow: hidden;
isolation: isolate;
}
.btn-ripple {
position: absolute;
width: 320px;
height: 320px;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
background: conic-gradient(from 0deg, rgba(255,255,255,0.55) 0deg, rgba(204,255,68,0.35) 90deg, rgba(68,136,255,0.22) 180deg, rgba(255,255,255,0.35) 270deg, rgba(255,255,255,0.55) 360deg);
mix-blend-mode: screen;
pointer-events: none;
opacity: 0.9;
animation: btnRipple 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
z-index: 0;
}
@keyframes btnRipple {
from {
transform: translate(-50%, -50%) scale(0);
opacity: 0.9;
}
to {
transform: translate(-50%, -50%) scale(1.4);
opacity: 0;
}
;
}
@media (prefers-reduced-motion: reduce) {
.btn-ripple {
display: none !important;
}
}
.hl {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}
.hl.is-revealed {
opacity: 1;
transform: translateY(0);
}
.hl-grid .hl.is-revealed:nth-child(2) {
transition-delay: 0.12s;
}
.hl-grid .hl.is-revealed:nth-child(3) {
transition-delay: 0.24s;
}
/* Force-show fallback: after 2.5s from page load, body gets .hl-fallback class which reveals anything still hidden. Guarantees no cards stay invisible. */
body.hl-fallback .hl:not(.is-revealed) {
opacity: 1;
transform: translateY(0);
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.hl {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
hr, .hr-iri {
border: 0;
height: 1px;
margin: clamp(40px, 6vw, 64px) auto;
width: min(100%, 880px);
background-image: linear-gradient( 90deg, transparent 0%, var(--iri-a, #ccff44) 20%, var(--iri-b, #4488ff) 50%, var(--iri-c, #ff5555) 80%, transparent 100% );
background-size: 200% 100%;
background-position: 0% 50%;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
opacity: 0.55;
animation: iriHrSweep 14s linear infinite;
}
@keyframes iriHrSweep {
from {
background-position: 0% 50%;
}
to {
background-position: 200% 50%;
}
;
}
@media (prefers-reduced-motion: reduce) {
hr, .hr-iri {
animation: none;
}
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 0;
box-shadow: 0 0 0 2px var(--bg, #0a0a0a), 0 0 0 3px var(--iri-a, #ccff44), 0 0 0 5px rgba(68, 136, 255, 0.55), 0 0 0 7px rgba(255, 85, 85, 0.30), 0 0 18px 2px rgba(204, 255, 68, 0.35);
border-radius: inherit;
transition: box-shadow 0.12s ease-out;
}
/* Inputs already carry a background - drop the inner dark spacer ring so the iridescent edge is flush against the field border. */
input:focus-visible, textarea:focus-visible, select:focus-visible {
box-shadow: 0 0 0 2px var(--iri-a, #ccff44), 0 0 0 4px rgba(68, 136, 255, 0.45), 0 0 16px 2px rgba(204, 255, 68, 0.30);
}
@media (prefers-reduced-motion: reduce) {
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
transition: none;
}
}
::selection {
background: rgba(204, 255, 68, 0.85);
color: #000;
text-shadow: none;
}
::-moz-selection {
background: rgba(204, 255, 68, 0.85);
color: #000;
text-shadow: none;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
font-size: 16px;
scrollbar-color: rgba(118, 185, 0, 0.45) rgba(24, 25, 27, 0.6);
scrollbar-width: thin;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: rgba(24, 25, 27, 0.6);
}
*::-webkit-scrollbar-thumb {
background: linear-gradient( 180deg, rgba(204, 255, 68, 0.55), rgba(118, 185, 0, 0.65) 50%, rgba(68, 136, 255, 0.45) );
border-radius: 6px;
border: 2px solid rgba(10, 10, 10, 0.85);
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: linear-gradient( 180deg, rgba(204, 255, 68, 0.85), rgba(118, 185, 0, 0.95) 50%, rgba(68, 136, 255, 0.70) );
background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
background: transparent;
}
input, textarea, [contenteditable="true"] {
caret-color: var(--iri-a, #ccff44);
}
.post-body a:not(.button):hover, .blog-card a:not(.button):hover, article p a:hover, .footer a:hover, .insight-card a:hover, #reviews a:hover, .legal a:hover, .pricing-card li a:hover {
filter: hue-rotate(14deg) brightness(1.12) saturate(1.15);
transition: filter 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.post-body a:hover, .blog-card a:hover, article p a:hover, .footer a:hover, .insight-card a:hover, #reviews a:hover, .legal a:hover, .pricing-card li a:hover {
filter: none;
transition: none;
}
}
.skip-to-content {
position: fixed;
z-index: 9999;
padding: 10px 18px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
color: #000;
background: linear-gradient( 110deg, var(--iri-a, #ccff44), var(--g, #76b900) 50%, var(--iri-b, #4488ff) 120% );
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.6);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(204, 255, 68, 0.25);
text-decoration: none;
transform: translateY(calc(-100% - 20px));
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.skip-to-content:focus, .skip-to-content:focus-visible {
transform: translateY(0);
outline: 0;
}
@media (prefers-reduced-motion: reduce) {
.skip-to-content {
transition: none;
}
}
@supports (color: color(display-p3 0 1 0)) {
:root {
--iri-a: color(display-p3 0.80 1.00 0.26);
--iri-b: color(display-p3 0.26 0.53 1.00);
--iri-c: color(display-p3 1.00 0.33 0.33);
--iri-d: color(display-p3 0.46 0.73 0.00);
--iri-e: color(display-p3 0.83 0.69 0.22);
--g: color(display-p3 0.46 0.73 0.00);
--g-light: color(display-p3 0.80 1.00 0.26);
--b: color(display-p3 0.26 0.53 1.00);
}
}
@keyframes heroCascadeReveal {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
;
}
.sec-welcome__copy > .sec-welcome__eyebrow, .sec-welcome__copy > .sec-welcome__title, .sec-welcome__copy > .sec-welcome__sub, .sec-welcome__copy > .hero-scan, .sec-welcome__copy > .hero-scan__trust {
animation: heroCascadeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: transform, opacity;
}
.sec-welcome__copy > .sec-welcome__eyebrow {
animation-delay: 0.04s;
}
.sec-welcome__copy > .sec-welcome__title {
animation-delay: 0.12s;
}
.sec-welcome__copy > .sec-welcome__sub {
animation-delay: 0.22s;
}
.sec-welcome__copy > .hero-scan {
animation-delay: 0.30s;
}
.sec-welcome__copy > .hero-scan__trust {
animation-delay: 0.38s;
}
@media (prefers-reduced-motion: reduce) {
.sec-welcome__copy > .sec-welcome__eyebrow, .sec-welcome__copy > .sec-welcome__title, .sec-welcome__copy > .sec-welcome__sub, .sec-welcome__copy > .hero-scan, .sec-welcome__copy > .hero-scan__trust {
animation: none;
opacity: 1;
transform: none;
}
}
.code-wrap {
position: relative;
}
.code-copy {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
padding: 6px 12px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.70rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: lowercase;
color: var(--t2, #b8b8b8);
background: rgba(20, 22, 20, 0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
cursor: pointer;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.18s ease-out, transform 0.18s ease-out, color 0.15s, border-color 0.15s;
}
.code-wrap:hover .code-copy, .code-wrap:focus-within .code-copy, .code-copy:focus-visible {
opacity: 1;
transform: translateY(0);
}
.code-copy:hover {
color: var(--g-light, #ccff44);
border-color: rgba(204, 255, 68, 0.35);
}
.code-copy.is-copied {
color: #000;
background: var(--iri-a, #ccff44);
border-color: var(--iri-a, #ccff44);
opacity: 1;
transform: translateY(0);
}
/* Inline code when it appears in newer .post-body markup too (existing .post__body rules at line 2385 already cover BEM) */
article.post .post-body code:not(pre code), .post-body code:not(pre code), article code:not(pre code) {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.92em;
background: rgba(118, 185, 0, 0.12);
color: var(--g-light, #ccff44);
padding: 2px 7px;
border-radius: 6px;
border: 1px solid rgba(118, 185, 0, 0.18);
}
/* - brand-green highlight, readable on dark bg */
mark {
background: linear-gradient( 180deg, rgba(204, 255, 68, 0.22) 0%, rgba(118, 185, 0, 0.22) 100% );
color: var(--g-light, #ccff44);
padding: 0 4px;
border-radius: 3px;
text-shadow: 0 0 12px rgba(204, 255, 68, 0.15);
}
/* - pill-shaped key on the page, mono, subtle 3D */
kbd {
display: inline-block;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.80em;
font-weight: 600;
line-height: 1;
color: var(--t1, #f0f0f0);
background: linear-gradient(180deg, #1f2022 0%, #141517 100%);
padding: 4px 8px 5px;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-bottom-color: rgba(0, 0, 0, 0.6);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
white-space: nowrap;
vertical-align: baseline;
transform: translateY(-1px);
}
/* - sample output, lower-contrast mono */
samp {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.92em;
color: var(--t2, #b8b8b8);
background: rgba(255, 255, 255, 0.03);
padding: 1px 5px;
border-radius: 4px;
}
/* - defined term, italic + underline */
dfn {
font-style: italic;
border-bottom: 1px dashed rgba(204, 255, 68, 0.5);
padding-bottom: 1px;
color: var(--t1, #f0f0f0);
cursor: help;
}
/* with title - dotted underline on hover */
abbr[title] {
text-decoration: underline dotted rgba(204, 255, 68, 0.5);
text-underline-offset: 3px;
cursor: help;
}
@media (forced-colors: active) {
/* Decorative atmospheric layers add no semantic value in HCM; hiding them reduces visual noise and improves perceived speed. */
.hero-blobs, .hero-aurora, .hero-spotlight, .hero-grid-floor, .hero-vignette, .hero-scanlines, .hero-noise, .hero-flicker, .page-progress, .matrix-rain, .hl::after, .hl::before, .sc-tile::after, .principle::after, .spec-cell::after, .button::after, .button::before {
display: none !important;
}
/* Let the OS draw borders/buttons/text in user-chosen high-contrast palette */
.hl, .sc-tile, .principle, .threat, .spec-cell, .pricing-card, .bob-panel, .fomo-pop, .scan-results__container, article.post {
background: Canvas;
border: 1px solid CanvasText;
color: CanvasText;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Links become LinkText so users can distinguish them from body copy */
a, a:visited {
color: LinkText;
text-decoration: underline;
}
/* Buttons use ButtonFace / ButtonText for the OS button appearance */
button, .button, input[type="submit"], input[type="button"], .hero-scan__btn, .bob-toggle {
background: ButtonFace;
color: ButtonText;
border: 1px solid ButtonBorder;
forced-color-adjust: none;
}
/* Focus visibility in HCM uses system highlight */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
box-shadow: none;
}
/* Iridescent H1 text-fill collapses to plain CanvasText */
.sec-welcome__title, .sec-welcome__title em, .blog-hero__title, .blog-hero__title em {
background: none !important;
-webkit-text-fill-color: CanvasText !important;
color: CanvasText !important;
}
/* Keep the skip-link legible */
.skip-to-content {
background: Highlight;
color: HighlightText;
border: 2px solid HighlightText;
}
}
details {
overflow: clip;
}
details > summary {
color: var(--t2, #b8b8b8);
font-weight: 500;
user-select: none;
-webkit-user-select: none;
padding-block: 6px;
border-radius: 6px;
margin-inline: -6px;
padding-inline: 30px 12px;
}
details > summary:hover {
color: var(--g-light, #ccff44);
background: rgba(204, 255, 68, 0.04);
}
details > summary:focus-visible {
outline: 2px solid var(--iri-a, #ccff44);
outline-offset: 2px;
}
details[open] > summary {
color: var(--t1, #f0f0f0);
margin-bottom: 10px;
}
/* Smooth expand (Chrome 129+, Safari 17.4+) - uses ::details-content when available, falls back to simple opacity-fade otherwise. */
@supports (interpolate-size: allow-keywords) {
details::details-content {
height: 0;
opacity: 0;
overflow: clip;
transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.32s allow-discrete, opacity 0.22s ease-out;
}
details[open]::details-content {
height: auto;
opacity: 1;
}
}
/* Legacy fallback: just fade the content in */
@supports not (interpolate-size: allow-keywords) {
details[open] > *:not(summary) {
animation: detailsFade 0.3s ease-out both;
}
@keyframes detailsFade {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
;
}
}
@media (prefers-reduced-motion: reduce) {
details::details-content, details > summary::before {
transition: none;
}
details[open] > *:not(summary) {
animation: none;
}
}
@view-transition {
navigation: auto;
}
/* Default root transition: 280ms smooth cross-fade */
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 0.28s;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Named morphs get a slightly longer beat so the morph is perceptible */
::view-transition-old(hero-title), ::view-transition-new(hero-title), ::view-transition-old(blog-title), ::view-transition-new(blog-title), ::view-transition-old(nav-brand), ::view-transition-new(nav-brand), ::view-transition-old(nav-cta), ::view-transition-new(nav-cta) {
animation-duration: 0.38s;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Reduced motion: instant swap */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(*), ::view-transition-new(*) {
animation: none !important;
}
}
@supports (background: linear-gradient(in oklch, red, blue)) {
/* Same title ems - oklch arc, still one shared selector list */
.sec-welcome__title em, .sc-h em, .gr-h em, .sc-head__h em, .sec-head__h em, .blog-hero__title em {
background-image: linear-gradient(110deg in oklch, var(--iri-a) 0%, var(--iri-d) 18%, var(--iri-b) 42%, var(--iri-c) 65%, var(--iri-d) 82%, var(--iri-a) 100%);
background-size: 300% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Scan-unlock price-now */
.scan-unlock__price-now {
background: linear-gradient(110deg in oklch, var(--iri-a), var(--iri-d), var(--iri-b), var(--iri-d), var(--iri-a));
background-size: 300% auto;
}
hr, .hr-iri {
background-image: linear-gradient(90deg in oklch, transparent 0%, var(--iri-a, #ccff44) 20%, var(--iri-b, #4488ff) 50%, var(--iri-c, #ff5555) 80%, transparent 100%);
background-size: 200% 100%;
}
.skip-to-content {
background: linear-gradient(110deg in oklch, var(--iri-a, #ccff44), var(--g, #76b900) 50%, var(--iri-b, #4488ff) 120%);
}
}
.blog-search-label {
margin: 0 auto 18px;
padding: 10px 16px;
max-width: 1000px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.82rem;
color: var(--t2, #b8b8b8);
background: rgba(118, 185, 0, 0.06);
border: 1px solid rgba(118, 185, 0, 0.18);
border-radius: 8px;
}
.blog-search-label strong {
color: var(--g-light, #ccff44);
font-weight: 700;
}
.blog-search-label a {
color: var(--t3, #606060);
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.2);
text-underline-offset: 2px;
margin-left: 8px;
}
.blog-search-label a:hover {
color: var(--g-light, #ccff44);
}
@media (max-width: 520px) {
.pricing-grid {
display: flex;
grid-template-columns: none;
max-width: none;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-padding: 24px;
gap: 16px;
padding: 8px 24px 24px;
margin: 0 calc(var(--sec-x) * -1);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.pricing-grid::-webkit-scrollbar {
display: none;
}
.pricing-card {
flex: 0 0 min(86vw, 340px);
scroll-snap-align: center;
scroll-snap-stop: always;
}
/* Nudge the premium tile so it sits dead-center on first landing */
.pricing-grid .pricing-card--premium {
order: 0;
}
}
/* Progressive hint: very first render on narrow-viewport shows a small fade on the right edge so users read "scroll more" without copy. */
@media (max-width: 520px) {
.sec-pricing, section:has(> .pricing-grid) {
position: relative;
}
.sec-pricing::after, section:has(> .pricing-grid)::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 48px;
background: linear-gradient( to right, transparent 0%, rgba(10, 10, 10, 0.8) 100% );
pointer-events: none;
z-index: 2;
}
}
/* Burger hidden on desktop, revealed on ≤900px */
.gnav__burger {
display: none;
width: 38px;
height: 38px;
padding: 0;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
cursor: pointer;
position: relative;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
transition: border-color 0.18s, background 0.18s;
}
.gnav__burger > span {
display: block;
width: 18px;
height: 2px;
background: var(--t1, #f0f0f0);
border-radius: 2px;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s;
transform-origin: center;
}
.gnav__burger:hover {
border-color: rgba(204, 255, 68, 0.4);
background: rgba(204, 255, 68, 0.06);
}
@media (max-width: 900px) {
.gnav__burger {
display: inline-flex;
}
}
/* Burger becomes an X when the menu is open */
body.nav-open .gnav__burger > span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
body.nav-open .gnav__burger > span:nth-child(2) {
opacity: 0;
}
body.nav-open .gnav__burger > span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* Mobile sheet: reveal .gnav__links as a blur-glass sheet below the nav */
@media (max-width: 900px) {
.gnav__links {
display: block !important;
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 24px 28px env(safe-area-inset-bottom, 24px);
background: rgba(8, 10, 6, 0.72);
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border-top: 1px solid rgba(255, 255, 255, 0.06);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.22s ease-out, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
pointer-events: none;
z-index: 998;
}
.gnav__links a {
display: block;
padding: 14px 12px;
font-size: 1.15rem;
font-weight: 600;
color: var(--t1, #f0f0f0);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
opacity: 0;
transform: translateX(-12px);
transition: opacity 0.25s ease-out, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s;
}
body.nav-open .gnav__links {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.28s ease-out, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}
body.nav-open .gnav__links a {
opacity: 1;
transform: translateX(0);
}
body.nav-open .gnav__links a:nth-child(1) {
transition-delay: 0.06s;
}
body.nav-open .gnav__links a:nth-child(2) {
transition-delay: 0.12s;
}
body.nav-open .gnav__links a:nth-child(3) {
transition-delay: 0.18s;
}
body.nav-open .gnav__links a:nth-child(4) {
transition-delay: 0.24s;
}
body.nav-open .gnav__links a:nth-child(5) {
transition-delay: 0.30s;
}
body.nav-open {
overflow: hidden;
}
}
@media (prefers-reduced-motion: reduce) {
.gnav__burger > span, .gnav__links, .gnav__links a {
transition: none;
}
}
.hero-scan__error {
margin-top: 12px;
padding: 10px 14px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.80rem;
color: var(--red, #ff5555);
background: rgba(255, 85, 85, 0.08);
border: 1px solid rgba(255, 85, 85, 0.30);
border-radius: 8px;
max-width: none;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.hero-scan__error[hidden] {
display: none !important;
}
/* Input visual state when flagged invalid */
#heroScanUrl[aria-invalid="true"] {
border-color: var(--red, #ff5555) !important;
box-shadow: 0 0 0 2px rgba(255, 85, 85, 0.30);
}
/* Nav height gains top inset - prevents iOS notch overlap */
.gnav {
padding-top: env(safe-area-inset-top, 0px);
}
/* On mobile, the burger-triggered sheet should start below the nav plus the notch height so it doesn't slide under the status bar. */
@media (max-width: 900px) {
.gnav__links {
top: calc(48px + env(safe-area-inset-top, 0px));
}
}
/* Chat toggle (bottom-right) respects the home-indicator bar */
.bob-toggle {
padding: 8px 16px 8px 8px !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
letter-spacing: -0.005em;
bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
right: max(20px, calc(env(safe-area-inset-right, 0px) + 12px));
z-index: 900 !important;
}
/* Fomo popup (bottom-left) same treatment */
.fomo-pop {
bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
left: max(20px, calc(env(safe-area-inset-left, 0px) + 12px));
}
/* Page-progress bar pushed below notch/Dynamic Island */
.page-progress {
top: env(safe-area-inset-top, 0px);
}
/* Skip-to-content link respects notch when visible */
.skip-to-content {
top: calc(env(safe-area-inset-top, 0px) + 12px);
left: max(12px, env(safe-area-inset-left, 0px));
}
.blog-cat-chip {
will-change: transform;
transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s, color 0.2s, background 0.2s;
}
.blog-cat-chip.is-active {
transform: scale(1.06);
background: linear-gradient(110deg, rgba(204, 255, 68, 0.22), rgba(118, 185, 0, 0.16) 60%, rgba(68, 136, 255, 0.12));
border-color: var(--g-light, #ccff44);
color: var(--g-light, #ccff44);
box-shadow: 0 4px 14px rgba(204, 255, 68, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.blog-cat-chip:active {
transform: scale(0.97);
}
.blog-cat-chip:hover:not(.is-active) {
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.blog-cat-chip, .blog-cat-chip.is-active, .blog-cat-chip:active, .blog-cat-chip:hover {
transform: none !important;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
}
@media (max-width: 520px) {
.hl-grid {
display: flex;
grid-template-columns: none;
max-width: none;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-padding: 24px;
gap: 16px;
padding: 8px 24px 24px;
margin-inline: calc(var(--sec-x, 24px) * -1);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.hl-grid::-webkit-scrollbar {
display: none;
}
.hl-grid::before {
display: none;
}
.hl-grid > .hl {
flex: 0 0 min(86vw, 340px);
scroll-snap-align: center;
scroll-snap-stop: always;
}
}
.post__body > p:first-of-type::first-letter, .post-body > p:first-of-type::first-letter {
float: left;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-weight: 800;
font-size: 3.4rem;
line-height: 0.95;
padding: 4px 10px 0 0;
margin-top: 4px;
background: linear-gradient(110deg, var(--iri-a, #ccff44), var(--iri-d, #76b900) 45%, var(--iri-b, #4488ff));
background-size: 220% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
text-shadow: 0 0 24px rgba(204, 255, 68, 0.18);
}
@supports (background: linear-gradient(in oklch, red, blue)) {
.post__body > p:first-of-type::first-letter, .post-body > p:first-of-type::first-letter {
background: linear-gradient(110deg in oklch, var(--iri-a, #ccff44), var(--iri-d, #76b900) 45%, var(--iri-b, #4488ff));
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
}
}
.post__body > p:first-of-type::first-line, .post-body > p:first-of-type::first-line {
font-weight: 500;
letter-spacing: -0.005em;
color: var(--t1, #f0f0f0);
}
/* Skip drop-cap when the post already carries an explicit .post__lede lede paragraph - the lede IS the hero moment, not the paragraph after. .post__lede already has distinct styling. */
.post__lede + .post__body > p:first-of-type::first-letter, article.post:has(> .post__header .post__lede) .post__body > p:first-of-type::first-letter {
float: none;
font-size: inherit;
background: none;
-webkit-text-fill-color: currentColor;
color: inherit;
padding: 0;
text-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
.post__body > p:first-of-type::first-letter, .post-body > p:first-of-type::first-letter {
text-shadow: none;
}
}
.blog-card {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.33, 1, 0.68, 1);
}
.blog-card.is-revealed {
opacity: 1;
transform: translateY(0);
}
/* Staggered delays up to the 7th card; 8th+ revert to default */
.blog-list .blog-card.is-revealed:nth-child(1) {
transition-delay: 0.04s;
}
.blog-list .blog-card.is-revealed:nth-child(2) {
transition-delay: 0.14s;
}
.blog-list .blog-card.is-revealed:nth-child(3) {
transition-delay: 0.24s;
}
.blog-list .blog-card.is-revealed:nth-child(4) {
transition-delay: 0.32s;
}
.blog-list .blog-card.is-revealed:nth-child(5) {
transition-delay: 0.40s;
}
.blog-list .blog-card.is-revealed:nth-child(6) {
transition-delay: 0.46s;
}
.blog-list .blog-card.is-revealed:nth-child(7) {
transition-delay: 0.52s;
}
/* Hero card on blog index reveals first, no delay */
.blog-breaking-hero .blog-card.is-revealed {
transition-delay: 0s;
}
/* Failsafe reveal if JS never wires up or IO fails */
body.blog-cards-fallback .blog-card:not(.is-revealed) {
opacity: 1;
transform: translateY(0);
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.blog-card, .blog-card.is-revealed {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
.gfooter {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.33, 1, 0.68, 1);
}
.gfooter.is-revealed {
opacity: 1;
transform: translateY(0);
}
/* Failsafe: if JS never adds is-revealed within 2.5s, show it */
body.gfooter-fallback .gfooter:not(.is-revealed) {
opacity: 1;
transform: translateY(0);
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.gfooter, .gfooter.is-revealed {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* Container polish: pre matches card styling, soft brand-green ring */
.post__body pre[class*="language-"], .post-body pre[class*="language-"] {
background: rgba(6, 8, 4, 0.82);
border: 1px solid rgba(118, 185, 0, 0.16);
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 28px;
font-size: 0.88rem;
line-height: 1.6;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 28px rgba(0, 0, 0, 0.38);
overflow: auto;
font-feature-settings: 'calt' 0, 'liga' 0;
}
/* Token palette - brand-tuned overrides of prism-tomorrow defaults */
.post__body code[class*="language-"] .token.comment, .post-body code[class*="language-"] .token.comment, .post__body code[class*="language-"] .token.prolog, .post-body code[class*="language-"] .token.prolog, .post__body code[class*="language-"] .token.doctype, .post-body code[class*="language-"] .token.doctype {
color: var(--t3, #606060);
font-style: italic;
}
.post__body code[class*="language-"] .token.keyword, .post-body code[class*="language-"] .token.keyword, .post__body code[class*="language-"] .token.tag, .post-body code[class*="language-"] .token.tag {
color: var(--iri-a, #ccff44);
}
.post__body code[class*="language-"] .token.string, .post-body code[class*="language-"] .token.string, .post__body code[class*="language-"] .token.char, .post-body code[class*="language-"] .token.char, .post__body code[class*="language-"] .token.attr-value, .post-body code[class*="language-"] .token.attr-value {
color: var(--iri-b, #4488ff);
}
.post__body code[class*="language-"] .token.function, .post-body code[class*="language-"] .token.function, .post__body code[class*="language-"] .token.class-name, .post-body code[class*="language-"] .token.class-name {
color: var(--iri-e, #d4af37);
}
.post__body code[class*="language-"] .token.number, .post-body code[class*="language-"] .token.number, .post__body code[class*="language-"] .token.boolean, .post-body code[class*="language-"] .token.boolean {
color: var(--iri-c, #ff5555);
}
.post__body code[class*="language-"] .token.operator, .post-body code[class*="language-"] .token.operator, .post__body code[class*="language-"] .token.punctuation, .post-body code[class*="language-"] .token.punctuation {
color: var(--t2, #b8b8b8);
}
.post__body code[class*="language-"] .token.property, .post-body code[class*="language-"] .token.property, .post__body code[class*="language-"] .token.attr-name, .post-body code[class*="language-"] .token.attr-name {
color: var(--g, #76b900);
}
.post__body code[class*="language-"] .token.regex, .post-body code[class*="language-"] .token.regex, .post__body code[class*="language-"] .token.important, .post-body code[class*="language-"] .token.important {
color: var(--iri-c, #ff5555);
font-weight: 600;
}
.post__body code[class*="language-"] .token.selector, .post-body code[class*="language-"] .token.selector {
color: var(--iri-a, #ccff44);
}
/* Text selection inside code blocks - match brand selection */
.post__body pre::selection, .post-body pre::selection {
background: rgba(204, 255, 68, 0.3);
color: var(--t1, #f0f0f0);
}
.post__body pre *::selection, .post-body pre *::selection {
background: rgba(204, 255, 68, 0.3);
color: var(--t1, #f0f0f0);
}
:root {
interpolate-size: allow-keywords;
--r-card-lg: 24px;
--r-card-md: 20px;
--r-card-sm: 16px;
font-kerning: normal;
font-feature-settings: 'kern', 'liga', 'calt';
}
h1, h2, h3, .sec-welcome__title, .blog-hero__title, .sec-head__h, .sc-h, .gr-h, .post__title, .pricing-card__tier {
text-wrap: balance;
hanging-punctuation: first last;
}
/* Hero title: hanging punctuation optically shifts the block off the shared column center - keep balance, kill the hang here only. */
.sec-welcome__sub, .blog-hero__sub, .sec-head__sub, .post__lede, .post__body p, .post-body p, .blog-card__excerpt {
text-wrap: pretty;
orphans: 3;
widows: 3;
}
/* Correct Unicode quotes: default to curly when typed straight is replaced. Safari/Chrome do this via font-variant-alternates; Firefox ignores silently. */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.blog-empty-state {
list-style: none;
margin: 24px 0;
padding: 40px 32px;
text-align: center;
background: linear-gradient(165deg, rgba(22, 28, 16, 0.7) 0%, rgba(10, 14, 7, 0.9) 100%);
border: 1px dashed rgba(118, 185, 0, 0.24);
border-radius: 18px;
color: var(--t2, #b8b8b8);
}
.blog-empty-state__glyph {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 2.8rem;
line-height: 1;
color: var(--g-light, #ccff44);
opacity: 0.38;
margin-bottom: 16px;
text-shadow: 0 0 28px rgba(204, 255, 68, 0.22);
animation: blogEmptyPulse 4s ease-in-out infinite;
}
@keyframes blogEmptyPulse {
0%, 100% {
opacity: 0.34;
transform: scale(1);
}
50% {
opacity: 0.52;
transform: scale(1.06);
}
;
}
.blog-empty-state__h {
font-family: 'Inter', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--t1, #f0f0f0);
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.blog-empty-state__sub {
font-size: 0.92rem;
max-width: 540px;
margin: 0 auto;
line-height: 1.55;
}
.blog-empty-state__sub a {
color: var(--g-light, #ccff44);
text-decoration: underline;
text-decoration-color: rgba(204, 255, 68, 0.4);
text-underline-offset: 2px;
}
.blog-empty-state__sub a:hover {
text-decoration-color: var(--g-light, #ccff44);
}
@media (prefers-reduced-motion: reduce) {
.blog-empty-state__glyph {
animation: none;
}
}
.pricing-card {
min-height: 100%;
}
.pricing-card__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 20px;
}
.pricing-card__features {
list-style: none;
padding-left: 0;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 24px;
flex: 1 1 auto;
}
.pricing-card__cta {
margin-top: auto;
align-self: stretch;
text-align: center;
}
/* Cards stretch to same grid-row height so bottoms visually line up */
@media (min-width: 861px) {
.pricing-grid {
align-items: stretch;
}
}
.threat, .spec-cell {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.33, 1, 0.68, 1);
}
.threat.is-revealed, .spec-cell.is-revealed {
opacity: 1;
transform: translateY(0);
}
.threat.is-revealed:nth-child(1) {
transition-delay: 0.04s;
}
.threat.is-revealed:nth-child(2) {
transition-delay: 0.10s;
}
.threat.is-revealed:nth-child(3) {
transition-delay: 0.16s;
}
.threat.is-revealed:nth-child(4) {
transition-delay: 0.22s;
}
.threat.is-revealed:nth-child(5) {
transition-delay: 0.28s;
}
.threat.is-revealed:nth-child(6) {
transition-delay: 0.34s;
}
.spec-cell.is-revealed:nth-child(1) {
transition-delay: 0.06s;
}
.spec-cell.is-revealed:nth-child(2) {
transition-delay: 0.15s;
}
.spec-cell.is-revealed:nth-child(3) {
transition-delay: 0.24s;
}
.spec-cell.is-revealed:nth-child(4) {
transition-delay: 0.33s;
}
body.tile-fallback .threat:not(.is-revealed), body.tile-fallback .spec-cell:not(.is-revealed) {
opacity: 1;
transform: translateY(0);
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.threat, .spec-cell, .threat.is-revealed, .spec-cell.is-revealed {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
@keyframes postTocSlideIn {
from {
opacity: 0;
transform: translateX(16px);
}
to {
opacity: 1;
transform: translateX(0);
}
;
}
@keyframes postArticleRise {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
;
}
/* Scope to the post-shell container so blog index + landing are unaffected */
.post-shell .post-toc {
animation: postTocSlideIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: 0.20s;
}
.post-shell article.post {
animation: postArticleRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: 0.06s;
}
.post-shell article.post > .post__header > .post__title {
animation: postArticleRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: 0.12s;
}
.post-shell article.post > .post__header > .post__lede {
animation: postArticleRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: 0.22s;
}
@media (prefers-reduced-motion: reduce) {
.post-shell .post-toc, .post-shell article.post, .post-shell article.post > .post__header > .post__title, .post-shell article.post > .post__header > .post__lede {
animation: none;
opacity: 1;
transform: none;
}
}
.post__share {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 48px 0 24px;
padding: 16px 20px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
}
.post__share-label {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--t3, #606060);
margin-right: 4px;
}
.post__share-native, .post__share-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.78rem;
color: var(--t2, #b8b8b8);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.18s;
}
.post__share-native:hover, .post__share-btn:hover {
color: var(--g-light, #ccff44);
border-color: rgba(204, 255, 68, 0.35);
background: rgba(204, 255, 68, 0.06);
transform: translateY(-1px);
}
.post__share-btn.is-copied {
color: #000;
background: var(--iri-a, #ccff44);
border-color: var(--iri-a, #ccff44);
}
@media (prefers-reduced-motion: reduce) {
.post__share-native, .post__share-btn {
transition: none;
}
.post__share-native:hover, .post__share-btn:hover {
transform: none;
}
}
.post__body a[target="_blank"]::after, .post-body a[target="_blank"]::after, article.post a[target="_blank"]:not(.post__share-btn):not(.post__share-native)::after, .gfooter a[target="_blank"]::after {
content: ' ↗';
display: inline-block;
margin-left: 2px;
font-size: 0.85em;
opacity: 0.55;
transition: opacity 0.18s ease-out, transform 0.18s ease-out;
vertical-align: baseline;
}
.post__body a[target="_blank"]:hover::after, .post-body a[target="_blank"]:hover::after, article.post a[target="_blank"]:not(.post__share-btn):not(.post__share-native):hover::after, .gfooter a[target="_blank"]:hover::after {
opacity: 1;
transform: translate(1px, -1px);
}
@media (prefers-reduced-motion: reduce) {
.post__body a[target="_blank"]::after, .post-body a[target="_blank"]::after, article.post a[target="_blank"]::after, .gfooter a[target="_blank"]::after {
transition: none;
}
}
.post__breadcrumb {
margin-bottom: 20px;
}
.post__breadcrumb ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.post__breadcrumb li {
display: inline-flex;
align-items: center;
color: var(--t3, #606060);
}
.post__breadcrumb li:not(:last-child)::after {
content: '›';
margin-left: 8px;
color: var(--t4, #404040);
font-weight: 300;
}
.post__breadcrumb a {
color: var(--g, #76b900);
text-decoration: none;
transition: color 0.15s;
}
.post__breadcrumb a:hover {
color: var(--g-light, #ccff44);
text-decoration: underline;
text-underline-offset: 3px;
}
.post__breadcrumb li[aria-current="page"] {
color: var(--t2, #b8b8b8);
}
.bob-panel[hidden] {
display: none !important;
}
.hl, .blog-card, .gfooter, .threat, .spec-cell, .sec-welcome__copy > .sec-welcome__eyebrow, .sec-welcome__copy > .sec-welcome__title, .sec-welcome__copy > .sec-welcome__sub, .sec-welcome__copy > .hero-scan, .sec-welcome__copy > .hero-scan__trust {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* The reveal-on-scroll transitions are kept for elements that DO get .is-revealed (e.g. a user scroll-anim wanted later), but the baseline is already visible so no permanent hiding is possible. */
/* 1 ── ghost secondary nav pill */
.gnav__ghost {
padding: 7px 16px;
border-radius: 980px;
font-size: 0.76rem;
font-weight: 600;
letter-spacing: -0.01em;
white-space: nowrap;
color: var(--t1, #f5f5f7);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.18);
transition: background 0.18s var(--e1), border-color 0.18s var(--e1);
}
.gnav__ghost:hover {
background: rgba(255, 255, 255, 0.11);
border-color: rgba(255, 255, 255, 0.32);
}
.gnav__ghost:focus-visible, .gnav__buy:focus-visible {
outline: 2px solid var(--g-l, #ccff44);
outline-offset: 2px;
}
/* 2 ── keep the primary pill a pill (no 2-line wrap on narrow) */
.gnav__buy {
white-space: nowrap;
}
/* Sign-in inside the burger sheet: hidden on desktop (sheet CSS un-hides all .gnav__links children ≤900px) */
.gnav__links-signin {
display: none;
}
@media (max-width: 900px) {
.gnav__links .gnav__links-signin {
display: block;
}
}
@media (max-width: 640px) {
.gnav__right .gnav__ghost {
display: none;
}
}
/* 3 ── consent chip (standalone form layouts only - inside the .saas-scan card the label is a quiet row styled by hero-saas.css, so the chip surface must not double-box it) */
.hero-auth:not(.saas-scan__auth) {
display: flex;
align-items: flex-start;
gap: 12px;
max-width: none;
width: 100%;
margin: 14px 0 0;
padding: 12px 16px;
text-align: left;
font-size: 13px;
line-height: 1.45;
color: var(--t2);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px;
cursor: pointer;
box-sizing: border-box;
transition: background 0.18s var(--e1), border-color 0.18s var(--e1);
}
.hero-auth:not(.saas-scan__auth):hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(204, 255, 68, 0.28);
}
.hero-auth input[type="checkbox"]:focus-visible {
outline: 2px solid var(--g-l, #ccff44);
outline-offset: 2px;
border-radius: 4px;
}
/* 4 ── quiet offer microcopy under the form column */
.hero-scan__meta {
max-width: none;
width: 100%;
margin: 14px 0 0;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.72rem;
letter-spacing: 0.02em;
line-height: 1.6;
color: var(--t3);
text-align: center;
}
/* 5 ── keep the 2-line title on phones; shrink type so nowrap fits ≤390px */
@media (max-width: 640px) {
.sec-welcome__title .twol {
white-space: nowrap;
}
}
/* Consent chip */
.hero-auth {
display: flex;
align-items: flex-start;
gap: 12px;
max-width: none;
width: 100%;
margin: 14px 0 0;
padding: 12px 16px;
text-align: left;
font-size: 13px;
line-height: 1.45;
color: var(--t2);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px;
cursor: pointer;
box-sizing: border-box;
transition: background 0.18s var(--e1), border-color 0.18s var(--e1);
}
.hero-auth:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(204, 255, 68, 0.28);
}
.hero-auth input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 1px;
flex-shrink: 0;
accent-color: var(--g, #76b900);
cursor: pointer;
}
/* Hero scan form: mobile stack - keep tray padding so form + consent share the same outer edges as the title column */
@media (max-width: 640px) {
.hero-scan {
flex-direction: column !important;
width: 100%;
max-width: none;
padding: 10px;
border-radius: 24px;
}
.hero-scan input[type="text"], .hero-scan__btn {
width: 100% !important;
}
.hero-auth {
max-width: none;
width: 100%;
}
}
/* 1 ── terminal idle state */
.terminal__body {
background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(118, 185, 0, 0.05) 0%, transparent 65%), #000;
}
.terminal__body:empty::before {
content: '~ standing by';
font-family: var(--mono, 'JetBrains Mono', monospace);
color: var(--t3);
letter-spacing: 0.02em;
}
.terminal__body:empty::after {
content: '';
display: inline-block;
width: 7px;
height: 1em;
margin-left: 6px;
vertical-align: text-bottom;
background: var(--g);
animation: blink 1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
.terminal__body:empty::after {
animation: none;
}
}
/* 2 ── terminal mobile sizing */
@media (max-width: 900px) {
.terminal__body {
min-height: 240px;
max-height: 340px;
}
}
/* Product UI shots - real report captures in a window chrome frame */
.product-shot {
margin: 28px 0 0;
width: 100%;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.10);
background: #0a0b09;
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(118, 185, 0, 0.07);
}
.product-shot__chrome {
display: flex;
align-items: center;
gap: 7px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.product-shot__chrome span {
width: 9px;
height: 9px;
border-radius: 50%;
background: #3a3a3a;
}
.product-shot__chrome span:nth-child(1) {
background: #ff5f57;
}
.product-shot__chrome span:nth-child(2) {
background: #febc2e;
}
.product-shot__chrome span:nth-child(3) {
background: #28c840;
}
.product-shot__chrome em {
margin-left: 10px;
font-style: normal;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.04em;
color: var(--t3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-shot img {
display: block;
width: 100%;
height: auto;
}
.product-shot a {
display: block;
}
.product-shot--wide {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.product-shot--banner {
max-width: 1060px;
margin: 0 auto clamp(28px, 4vw, 44px);
}
.product-shot--grade {
margin-top: 28px;
max-width: 560px;
}
.pin-stage__vis {
display: grid;
gap: 16px;
}
.pin-panel {
margin: 0;
padding: 22px 22px 18px;
border-radius: 20px;
background: linear-gradient(180deg, #0e100c, #0a0b09);
border: 1px solid rgba(118, 185, 0, 0.22);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(118, 185, 0, 0.06);
}
.pin-panel__label {
margin: 0 0 14px;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--t3);
}
.pin-panel__rows {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.pin-panel__rows li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
font-size: 0.9rem;
color: var(--t1);
}
.pin-panel__ok, .pin-panel__warn {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pin-panel__ok {
color: var(--g-l, #ccff44);
}
.pin-panel__warn {
color: var(--amber, #fbbf24);
}
/* 4 ── ironsight mobile rhythm */
@media (max-width: 900px) {
.pin-stage__sticky {
position: static;
padding-top: calc(var(--sec-y) * 0.75);
}
.pin-stage__vis {
max-width: 480px;
margin-top: 24px;
}
.pin-rail {
gap: 56px;
padding-top: 8px;
padding-bottom: 48px;
}
.pin-step {
opacity: 1;
}
}
.sec-report {
position: relative;
}
.sec-report::before {
content: '';
position: absolute;
left: 50%;
top: 46%;
width: min(880px, 88vw);
height: 640px;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, rgba(118,185,0,.06), transparent 70%);
pointer-events: none;
}
.srep {
position: relative;
margin: 0 auto;
background: linear-gradient(180deg, #0c0d0b, var(--bg-1));
border: 1px solid var(--line);
border-radius: var(--r-card-lg);
box-shadow: 0 30px 80px rgba(0,0,0,.5);
overflow: hidden;
}
.srep::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(118,185,0,.45), transparent);
pointer-events: none;
}
/* ── grade hero ── */
.srep__hero {
display: flex;
align-items: center;
gap: clamp(26px, 4vw, 44px);
padding: clamp(28px, 4.5vw, 46px) clamp(20px, 4vw, 46px);
border-bottom: 1px solid var(--line);
}
.srep__gauge {
position: relative;
width: 172px;
height: 172px;
flex-shrink: 0;
}
.srep__gauge svg {
display: block;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.srep__gauge svg circle {
fill: none;
}
.srep__gauge svg .bgc {
stroke: rgba(255,255,255,.06);
}
.srep__gauge svg .valc {
stroke: var(--srep-c, var(--g));
stroke-linecap: round;
transition: stroke-dashoffset 1.25s var(--spring) .2s;
filter: drop-shadow(0 0 12px color-mix(in srgb, var(--srep-c, var(--g)) 45%, transparent));
}
.srep__gauge-in {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
}
.srep__grade {
font-size: 64px;
font-weight: 800;
line-height: 1;
letter-spacing: -.03em;
color: var(--srep-c, var(--g));
opacity: 0;
transform: scale(.5);
transition: transform .8s var(--spring) .5s, opacity .3s linear .5s;
}
.srep.is-in .srep__grade {
opacity: 1;
transform: scale(1);
}
.srep__score {
font-family: var(--mono);
font-size: 12.5px;
color: var(--t3);
}
.srep__score b {
color: var(--t2);
font-weight: 700;
}
.srep__meta {
flex: 1;
min-width: 0;
}
.srep__badge {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--g-light);
background: var(--g-dim);
border: 1px solid var(--g-line);
border-radius: var(--r-pill);
padding: 5px 12px;
margin-bottom: 14px;
}
.srep__badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--g);
box-shadow: 0 0 8px var(--g);
}
.srep__host {
font-size: clamp(22px, 2.6vw, 27px);
font-weight: 700;
letter-spacing: -.02em;
word-break: break-all;
margin: 0 0 6px;
}
.srep__verdict {
font-size: 15px;
color: var(--t2);
line-height: 1.5;
margin: 0 0 16px;
}
.srep__verdict b {
color: var(--t1);
font-weight: 600;
}
.srep__verdict .hi {
color: var(--red);
font-weight: 600;
}
.srep__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.srep__chip {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--r-pill);
padding: 6px 13px;
font-size: 12.5px;
font-weight: 600;
color: var(--t1);
}
.srep__chip .d {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.srep__chip--mut {
color: var(--t2);
}
/* ── category rings (filter) ── */
.srep__cats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line);
border-bottom: 1px solid var(--line);
}
.srep__cat {
appearance: none;
-webkit-appearance: none;
background: var(--bg-1);
border: none;
color: inherit;
font: inherit;
cursor: pointer;
padding: 22px 12px 18px;
text-align: center;
position: relative;
transition: background .18s var(--e1);
}
.srep__cat:hover {
background: var(--bg-2);
}
.srep__cat[aria-pressed="true"] {
background: #10140a;
}
.srep__cat[aria-pressed="true"]::after {
content: '';
position: absolute;
left: 18%;
right: 18%;
bottom: 0;
height: 2px;
border-radius: 2px;
background: var(--cat-c, var(--g));
}
.srep__cring {
position: relative;
display: block;
width: 64px;
height: 64px;
margin: 0 auto 10px;
}
.srep__cring svg {
display: block;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.srep__cring svg circle {
fill: none;
}
.srep__cring svg .bgc {
stroke: rgba(255,255,255,.06);
}
.srep__cring svg .valc {
stroke: var(--cat-c, var(--g));
stroke-linecap: round;
transition: stroke-dashoffset 1s var(--spring) .45s;
}
.srep__cat:nth-of-type(2) .valc {
transition-delay: .55s;
}
.srep__cat:nth-of-type(3) .valc {
transition-delay: .65s;
}
.srep__cat:nth-of-type(4) .valc {
transition-delay: .75s;
}
.srep__cring b {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 800;
color: var(--cat-c, var(--g));
}
.srep__cat-n {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--t1);
margin-bottom: 2px;
}
.srep__cat-s {
display: block;
font-family: var(--mono);
font-size: 10.5px;
color: var(--t3);
}
/* ── findings list ── */
.srep__list-h {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
padding: 18px clamp(20px, 4vw, 44px) 12px;
}
.srep__list-t {
font-size: 14.5px;
font-weight: 700;
margin: 0;
}
.srep__list-hint {
font-family: var(--mono);
font-size: 11px;
color: var(--t3);
margin-left: auto;
}
.srep__reset {
appearance: none;
background: none;
border: none;
color: var(--g-light);
font-family: var(--mono);
font-size: 11px;
cursor: pointer;
padding: 0;
margin-left: auto;
text-decoration: underline;
text-underline-offset: 3px;
}
.srep__f {
border-top: 1px solid var(--line);
border-left: 2px solid transparent;
transition: background .2s var(--e1), border-color .2s var(--e1);
}
.srep__f.open {
border-left-color: var(--sev-c, var(--g));
background: rgba(255,255,255,.014);
}
.srep__frow {
display: flex;
align-items: flex-start;
gap: 16px;
width: 100%;
padding: 15px clamp(20px, 4vw, 44px);
background: none;
border: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: background .15s var(--e1);
}
.srep__frow:hover {
background: var(--bg-2);
}
.srep__sev {
flex-shrink: 0;
width: 64px;
text-align: center;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
padding: 4px 0;
border-radius: 6px;
margin-top: 2px;
color: var(--sev-c, var(--t2));
background: rgba(255,255,255,.07);
background: color-mix(in srgb, var(--sev-c, #888) 13%, transparent);
}
.srep__fbody {
flex: 1;
min-width: 0;
}
.srep__fname {
display: block;
font-size: 15px;
font-weight: 600;
letter-spacing: -.01em;
}
.srep__fw {
display: block;
font-size: 13.5px;
color: var(--t2);
line-height: 1.5;
margin-top: 3px;
}
.srep__caret {
flex-shrink: 0;
color: var(--t3);
font-size: 12px;
margin-top: 5px;
transition: transform .2s var(--e1);
}
.srep__f.open > .srep__frow .srep__caret {
transform: rotate(90deg);
}
.srep__det {
max-height: 0;
overflow: hidden;
transition: max-height .3s var(--e1);
}
.srep__f.open > .srep__det {
max-height: 420px;
}
.srep__f--passwrap.open > .srep__det {
max-height: 760px;
}
.srep__det-in {
padding: 2px clamp(20px, 4vw, 44px) 22px calc(clamp(20px, 4vw, 44px) + 80px);
}
.srep__lab {
display: block;
font-family: var(--mono);
font-size: 10.5px;
color: var(--t3);
text-transform: uppercase;
letter-spacing: .09em;
margin: 8px 0 6px;
}
.srep__fixwrap {
position: relative;
}
.srep__fix {
margin: 0;
background: #0d0f0a;
border: 1px solid rgba(118,185,0,.16);
border-radius: 12px;
padding: 13px 96px 13px 16px;
font-family: var(--mono);
font-size: 12.5px;
line-height: 1.6;
color: var(--g-light);
white-space: pre-wrap;
word-break: break-word;
}
.srep__copy {
position: absolute;
top: 9px;
right: 9px;
appearance: none;
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bg-4);
border: 1px solid var(--line);
color: var(--t2);
font-family: var(--mono);
font-size: 11px;
padding: 5px 11px;
border-radius: 7px;
cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
.srep__copy:hover {
color: var(--g-light);
border-color: var(--g-line);
}
.srep__copy.ok {
color: #000;
background: var(--g);
border-color: var(--g);
font-weight: 700;
}
/* pass rows (calm, non-expandable) */
.srep__f--pass > .srep__frow {
cursor: default;
padding-top: 11px;
padding-bottom: 11px;
}
.srep__f--pass > .srep__frow:hover {
background: none;
}
.srep__f--pass .srep__fname {
font-weight: 500;
font-size: 14px;
color: var(--t2);
}
/* passed-summary grid */
.srep__passgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px;
padding: 4px clamp(20px, 4vw, 44px) 22px;
}
.srep__pill {
display: flex;
align-items: center;
gap: 9px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 9px 12px;
font-size: 12.5px;
font-weight: 500;
color: var(--t2);
}
.srep__pill svg {
color: var(--g);
flex-shrink: 0;
}
/* ── CTA ── */
.srep__cta {
border-top: 1px solid var(--line);
padding: 26px clamp(20px, 4vw, 44px);
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
background: linear-gradient(180deg, transparent, rgba(118,185,0,.04));
}
.srep__cta-hint {
font-family: var(--mono);
font-size: 11.5px;
color: var(--t3);
}
/* focus */
.srep__frow:focus-visible, .srep__cat:focus-visible, .srep__copy:focus-visible, .srep__reset:focus-visible {
outline: 2px solid var(--g);
outline-offset: -2px;
border-radius: 8px;
}
/* ── mobile ── */
@media (max-width: 760px) {
.srep__hero {
flex-direction: column;
text-align: center;
gap: 20px;
}
.srep__meta {
display: flex;
flex-direction: column;
align-items: center;
}
.srep__chips {
justify-content: center;
}
.srep__gauge {
width: 156px;
height: 156px;
}
.srep__grade {
font-size: 56px;
}
.srep__cats {
grid-template-columns: repeat(2, 1fr);
}
.srep__frow {
gap: 12px;
padding-left: 18px;
padding-right: 16px;
}
.srep__sev {
width: 56px;
font-size: 9px;
letter-spacing: .05em;
}
.srep__det-in {
padding-left: 18px;
padding-right: 16px;
}
.srep__fix {
padding-right: 16px;
padding-bottom: 46px;
}
.srep__copy {
top: auto;
bottom: 9px;
}
.srep__list-h {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding-left: 18px;
padding-right: 16px;
}
.srep__list-hint, .srep__reset {
margin-left: 0;
}
.srep__passgrid {
padding-left: 18px;
padding-right: 16px;
}
}
/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.srep__gauge svg .valc, .srep__cring svg .valc {
transition: none;
filter: none;
}
.srep__grade {
transition: none;
opacity: 1;
transform: none;
}
.srep__det, .srep__caret, .srep__f {
transition: none;
}
}
.sec-welcome {
align-items: center;
text-align: center;
}
.sec-welcome__copy {
width: min(600px, 100%);
max-width: 600px;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
box-sizing: border-box;
}
.sec-welcome__eyebrow, .sec-welcome__title, .sec-welcome__sub, .sec-welcome__copy > .hero-scan, .sec-welcome__copy > .hero-auth, .sec-welcome__copy > .hero-scan__meta, .sec-welcome__copy > .hero-scan__trust, .sec-welcome__copy > .hero-scan__error {
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}
.sec-welcome__title {
hanging-punctuation: none;
}
@media (max-width: 640px) {
.sec-welcome__copy {
padding: 0;
width: 100%;
max-width: 100%;
}
}
/* Quiet enterprise trust strip under the scan consent */
.hero-trust {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 0;
margin: 22px 0 0;
padding: 0;
width: 100%;
}
.hero-trust li {
position: relative;
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 0.68rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--t3);
padding: 0 14px;
}
.hero-trust li + li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 10px;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.16);
}
@media (max-width: 640px) {
.hero-trust {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 12px;
}
.hero-trust li {
padding: 8px 10px;
text-align: center;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
}
.hero-trust li + li::before {
display: none;
}
}
/* Soften matrix-rain - less hacker-demo, more product backdrop */
.sec-darkstage .matrix-rain {
opacity: 0.08;
}
/* REVERTED 2026-07-22: the green-only em override and the brand-orb hide are gone - Phil's call. The shared iridescent title shimmer and the liquid-metal orb are the site's signature and stay exactly as designed. */
/* Alternating ink slabs - break the endless flat-black scroll into editorial bands; hairlines mark each band edge. */
.sec-showcase, .sec-hymn, .sec-team {
background: var(--bg-1);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* plain-English micro-caption under each category ring - the product promise (plain English) applied to its own dashboard */
.srep__cat-plain {
display: block;
margin-top: 2px;
font-size: 11.5px;
color: var(--t3);
letter-spacing: 0.01em;
}
.hero-demo {
max-width: 592px;
margin: 10px auto 0;
font-family: var(--mono);
}
/* the stage is always reserved - the demo never shifts layout under it */
.hero-scan {
margin-bottom: 0;
}
.sec-welcome__copy .hero-demo, .sec-welcome__copy .hero-demo[hidden] {
display: block;
visibility: visible;
min-height: 84px;
}
.hero-demo[hidden] > * {
display: none !important;
}
.hero-demo__scan {
display: flex;
align-items: center;
gap: 16px;
padding: 8px 4px;
}
.hero-demo__status {
font-size: 0.72rem;
letter-spacing: 0.04em;
color: var(--t3);
white-space: nowrap;
}
.hero-demo__bar {
flex: 1;
height: 2px;
border-radius: 2px;
background: rgba(255,255,255,0.08);
overflow: hidden;
}
.hero-demo__bar-fill {
display: block;
width: 0%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--g-dark), var(--g));
transition: width 0.6s var(--e1);
}
.hero-demo__result {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px 14px;
padding: 10px 16px;
border-radius: 980px;
background: rgba(118,185,0,0.06);
border: 1px solid rgba(118,185,0,0.18);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.45s var(--e2), transform 0.45s var(--e2);
}
.hero-demo__result.is-in {
opacity: 1;
transform: translateY(0);
}
.hero-demo__grade {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid var(--g);
color: var(--g-light);
font-weight: 700;
font-size: 0.82rem;
flex-shrink: 0;
}
.hero-demo__text {
font-size: 0.76rem;
color: var(--t2);
letter-spacing: 0.02em;
}
.hero-demo__text b {
color: var(--t1);
font-weight: 600;
}
.hero-demo__hint {
flex-basis: 100%;
text-align: center;
font-size: 0.66rem;
letter-spacing: 0.08em;
color: var(--t3);
}
@media (prefers-reduced-motion: reduce) {
.hero-demo__result {
transition: none;
transform: none;
}
}
/* [hidden] must beat the display:flex classes above (UA sheet loses that fight) */
.hero-demo[hidden], .hero-demo__scan[hidden], .hero-demo__result[hidden] {
display: none;
}
.srep__gauge::before {
content: '';
position: absolute;
inset: -7px;
border-radius: 50%;
background: conic-gradient(from 210deg, rgba(204,255,68,0.50), rgba(118,185,0,0.45), rgba(68,136,255,0.32), rgba(255,94,200,0.24), rgba(251,191,36,0.28), rgba(204,255,68,0.50));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
animation: gradeHalo 14s linear infinite;
pointer-events: none;
}
@keyframes gradeHalo {
to {
transform: rotate(360deg);
}
;
}
.srep__share {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding: 9px 18px;
border-radius: 980px;
border: 1px solid rgba(118,185,0,0.35);
background: rgba(118,185,0,0.08);
color: var(--g-light);
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.05em;
cursor: pointer;
transition: border-color 0.2s var(--e1), background 0.2s var(--e1), box-shadow 0.2s var(--e1);
}
.srep__share:hover {
border-color: var(--g);
background: rgba(118,185,0,0.14);
box-shadow: 0 0 24px rgba(118,185,0,0.18);
}
.srep__share:focus-visible {
outline: 2px solid var(--g);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.srep__gauge::before {
animation: none;
}
}
/* plain 'we check' line closing each AI-threat card - the section stops being scary theory and states the concrete service */
.threat__check {
margin-top: 14px;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.05em;
color: var(--g);
opacity: 0.8;
}
/* one real finding, two languages - makes 'any second language' tangible */
.hymn-lang__sample {
margin-top: 20px;
padding: 14px 18px;
border-radius: 12px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--line);
text-align: left;
}
.hymn-lang__sample p {
margin: 0;
font-size: 0.82rem;
color: var(--t2);
line-height: 1.7;
}
.hymn-lang__tag {
display: inline-block;
min-width: 30px;
margin-right: 10px;
font-family: var(--mono);
font-size: 0.64rem;
letter-spacing: 0.08em;
color: var(--g);
}
.sec-highlights, .sec-team {
padding-top: var(--sec-y);
padding-bottom: var(--sec-y);
}
.sec-pin {
padding-top: var(--sec-y);
}
.hl-grid, .team-grid {
max-width: var(--max);
}
.srep {
max-width: var(--max);
}
.sec-highlights .sec-head__h {
font-size: clamp(40px, 5.5vw, 56px);
line-height: 1.07;
}
.gr-h {
font-size: clamp(2.4rem, 4vw, 3.5rem);
}
/* ── CRAFT: mobile hero rebalance (audit: h1 was 27px — smaller than its own eyebrow; chips collided with the resting dock) ── */
@media (max-width: 640px) {
.sec-welcome__title {
font-size: clamp(30px, 10vw, 44px);
line-height: 1.1;
}
.sec-welcome__eyebrow {
font-size: 14px;
letter-spacing: 0.02em;
}
.hero-trust {
margin-bottom: 84px;
}
}
/* mobile: dock waits offstage while the hero owns the first screen - the reading-mode toggle matters once you're reading sections */
@media (max-width: 640px) {
body.hero-in-view .lex-dock {
transform: translateX(-50%) translateY(calc(100% + 48px));
box-shadow: none;
}
}
/* mobile: lift hero content so the chip row clears Bob's launcher */
@media (max-width: 640px) {
.sec-welcome {
padding-top: 72px;
}
}
.proof-band {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-1);
padding: 28px var(--sec-x, 32px) 22px;
}
.proof-band[hidden] {
display: none;
}
.proof-band__inner {
max-width: var(--max);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(24px, 5vw, 64px);
}
.proof-band__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.proof-band__item b {
font-family: var(--mono);
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 700;
color: var(--g);
letter-spacing: -0.01em;
}
.proof-band__item span {
font-size: 0.75rem;
color: var(--t3);
letter-spacing: 0.03em;
text-align: center;
}
.proof-band__sep {
width: 1px;
height: 36px;
background: var(--line);
}
.proof-band__foot {
margin: 16px 0 0;
text-align: center;
font-family: var(--mono);
font-size: 0.66rem;
letter-spacing: 0.09em;
color: var(--t4);
text-transform: uppercase;
}
@media (max-width: 640px) {
.proof-band__inner {
gap: 18px;
}
.proof-band__sep {
display: none;
}
.proof-band__item {
flex: 1;
}
.proof-band__item b {
font-size: 20px;
}
.proof-band__item span {
font-size: 0.66rem;
}
}
/* ============================================================
extracted components (2026-07-23) - former inline styles from
index.html, scoped to their sections so the shared /blog/ and
footer systems are untouched. Parametric --accent inline custom
properties on cards were kept on purpose (that is configuration,
not styling).
============================================================ */
.noscript-note {
padding: 32px;
color: rgba(245,245,247,.72);
font-size: 14px;
}
.sc-eyebrow--lit {
color: var(--g-light);
}
.gr-ctas {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.sec-ghostride .gr-hint {
margin-top: 18px;
}
.gr-hint__link {
color: inherit;
text-decoration: underline;
}
.sec-blog-preview .blog-list {
max-width: 1068px;
margin: 0 auto;
list-style: none;
padding: 0;
display: grid;
gap: 20px;
}
.sec-blog-preview .bpost {
display: block;
padding: 28px 32px;
background: var(--bg-2);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
text-decoration: none;
color: inherit;
transition: border-color .3s, transform .3s;
}
.sec-blog-preview .bpost__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.sec-blog-preview .blog-card__date {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--t3);
}
.sec-blog-preview .blog-card__tag {
font-family: var(--mono);
font-size: 0.66rem;
padding: 3px 8px;
background: rgba(255,255,255,0.05);
color: var(--t2);
border-radius: 4px;
letter-spacing: 0.06em;
}
.sec-blog-preview .bpost__tag--ai {
background: rgba(204,255,68,0.08);
color: var(--g-light);
}
.sec-blog-preview .blog-card__title {
font-size: 1.35rem;
font-weight: 700;
line-height: 1.25;
margin-bottom: 10px;
color: var(--t1);
letter-spacing: -0.02em;
}
.sec-blog-preview .blog-card__excerpt {
font-size: 0.98rem;
color: var(--t2);
line-height: 1.55;
}
.bpost-more {
text-align: center;
margin-top: 40px;
}
.gfooter .subscribe-strip {
max-width: 720px;
margin: 32px auto 0;
}
.gfoot-legal {
margin-top: 8px;
}
.gfoot-legal a {
color: var(--t3);
}
.gfoot-legal a:not(:last-child) {
margin-right: 16px;
}
/* ── Pricing: buttons, grids, guarantee row, landing section (Programme v4, Phase 0b) ── */
.pricing-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 48px;
line-height: 1;
white-space: nowrap;
text-align: center;
}
.pricing-card__cta .arr { display: inline-block; transition: transform 0.24s var(--spring); }
.pricing-card__cta:hover .arr { transform: translateX(3px); }
.pricing-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pricing-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .pricing-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; } }
@media (max-width: 860px) { .pricing-grid--2, .pricing-grid--4 { grid-template-columns: 1fr; max-width: 500px; } }
.pricing-band { max-width: 1060px; margin: clamp(48px, 6vw, 80px) auto 0; }
.pricing-band__title { text-align: center; margin-bottom: 24px; }
.pricing-guarantee {
max-width: 1060px;
margin: clamp(48px, 6vw, 80px) auto 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
@media (max-width: 860px) { .pricing-guarantee { grid-template-columns: 1fr; gap: 16px; max-width: 500px; } }
.pricing-guarantee__item {
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.12);
font-size: 0.9rem;
color: var(--t2);
line-height: 1.55;
}
.pricing-guarantee__item strong { display: block; color: var(--t1); font-size: 0.95rem; margin-bottom: 6px; letter-spacing: -0.01em; }
/* Landing: compact pricing section */
.sec-pricing-home .pricing-card { padding: clamp(24px, 3vw, 32px); gap: 16px; }
.sec-pricing-home .pricing-card__price { font-size: clamp(2rem, 3.2vw, 2.5rem); }
.sec-pricing-home .pricing-card__promise { font-size: 0.95rem; }
.sec-pricing-home .pricing-card__features { font-size: 0.88rem; }
.sec-pricing-home .pricing-home__foot { text-align: center; margin-top: 28px; font-size: 0.85rem; color: var(--t3); }
.sec-pricing-home .pricing-home__foot a { color: var(--t2); text-decoration: underline; text-underline-offset: 3px; }
/* Human-led band: the services we actually sell get room */
.pricing-band__title { font-family: var(--sans); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; text-transform: none; color: var(--t1); margin-bottom: 32px; }
.pricing-band .pricing-card { padding: clamp(36px, 4.2vw, 56px); gap: 28px; }
.pricing-band .pricing-card__price { font-size: clamp(3.2rem, 5.6vw, 4.2rem); }
.pricing-band .pricing-card__promise { font-size: 1.12rem; }
.pricing-band .pricing-card__features { font-size: 1rem; }
/* Live popup: only ever visible once a renderer has real data */
.fomo-pop:not(.is-visible) { opacity: 0 !important; pointer-events: none !important; }
/* ── Perf pass 2 (Programme v4): same look, composited motion, nothing runs offscreen ── */
/* Grid floor: scroll via transform on a child layer instead of repainting an 85k-px background every frame */
.hero-grid-floor { animation: none; background-image: none; overflow: hidden; will-change: auto; }
.hero-grid-floor::before {
content: '';
position: absolute;
left: 0; right: 0;
top: -64px;
height: calc(100% + 64px);
background-image: linear-gradient(to right, rgba(118,185,0,0.6) 1px, transparent 1px), linear-gradient(to bottom, rgba(118,185,0,0.6) 1px, transparent 1px);
background-size: 64px 64px;
background-position: 0 0;
animation: gridScrollT 16s linear infinite;
will-change: transform;
}
@keyframes gridScrollT { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 64px, 0); } }
/* Aurora hue shift: keep it on its own compositor layer */
.hero-aurora { will-change: transform, filter; backface-visibility: hidden; }
/* Anything outside the viewport stops animating (shimmers, orbits, spins, pulses) */
.sec.is-offscreen, .sec.is-offscreen * { animation-play-state: paused !important; }
/* Below-fold sections are not laid out or painted until they are near the viewport */
.sec:not(.sec-welcome):not(.sec-scan-results) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
@media (prefers-reduced-motion: reduce) { .hero-grid-floor::before { animation: none; } }