:root{
--font-display: 'Big Shoulders Display', 'Bricolage Grotesque', Impact, ui-sans-serif, system-ui, sans-serif;
--font-subhead: 'Bricolage Grotesque', 'Geist', ui-sans-serif, system-ui, sans-serif;
--font-editorial: 'Instrument Serif', ui-serif, Georgia, serif;
--font-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, monospace;
--bg:           #0c0d0f; --bg-2:         #131517; --bg-3:         #1a1c1f; --paper:        #f3efe7; --paper-2:      #eae5d8;
--paper-3:      #fdfaf2; --card:         #ffffff;
--ink:          #0c0d0f; --ink-2:        #25272c;
--text-on-dark: #f3efe7;
--text-on-dark-2: rgba(243,239,231,.72);
--muted:        #7a7c82;
--muted-d:      #8d8f96; --muted-2:      #9c9ea4;
--line:         #1f2125; --line-l:       #e0dccf; --orange:       #E07B30;
--orange-2:     #ec8a3c;
--orange-deep:  #b85e1a;
--orange-soft:  rgba(224,123,48,.14);
--orange-glow:  rgba(224,123,48,.36);
--ok:           #3aa66e;
--r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;
--sh-card: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15,16,20,.04), 0 14px 28px rgba(15,16,20,.08), 0 40px 70px rgba(15,16,20,.08); --sh-btn-dark:
inset 0 2px 0 rgba(255,255,255,0.30),
inset 0 1px 0 rgba(255,255,255,0.14),
inset 0 -2px 1px rgba(0,0,0,0.70),
0 1px 2px rgba(0,0,0,0.32),
0 10px 22px rgba(15,16,20,0.34),
0 24px 44px rgba(15,16,20,0.26),
0 52px 80px rgba(15,16,20,0.18);
--sh-btn-dark-h:
inset 0 2px 0 rgba(255,255,255,0.42),
inset 0 1px 0 rgba(255,255,255,0.20),
inset 0 -2px 1px rgba(120,50,10,0.60),
0 2px 3px rgba(160,80,30,0.28),
0 14px 28px rgba(180,90,36,0.32),
0 32px 56px rgba(180,90,36,0.22),
0 64px 92px rgba(180,90,36,0.14);
--sh-btn-light:
inset 0 2px 0 rgba(255,255,255,1),
inset 0 1px 0 rgba(255,255,255,0.9),
inset 0 -1.5px 1px rgba(0,0,0,0.16),
inset 0 0 0 1px rgba(0,0,0,0.06),
0 1px 2px rgba(0,0,0,0.10),
0 8px 18px rgba(0,0,0,0.12),
0 20px 34px rgba(0,0,0,0.10);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
font-family: var(--font-body);
background: var(--bg);
color: var(--text-on-dark);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-height: 1.6;
font-size: 18px;
padding-top: 76px;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
background-size: 24px 24px; background-attachment: scroll;
} body::after{ display: none; }
h1,h2,h3,h4{
margin:0; color: var(--text-on-dark);
font-family: var(--font-display);
font-weight: 800;
letter-spacing:-0.005em; line-height: 1.0;
text-transform: uppercase;
}
p{ margin:0; }
a{ color: inherit; }
.wrap{ max-width: 1180px; margin:0 auto; padding: 0 28px; }
.eyebrow{
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--muted); font-weight: 500;
display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before{
content: "";
width: 6px; height: 6px;
background: var(--orange);
display: inline-block;
box-shadow: 0 0 0 3px rgba(224,123,48,.15);
} .ed{
font-family: var(--font-display);
font-style: normal;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.005em;
color: var(--orange);
} .gauge{
display: flex; align-items: center; gap: 16px;
font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--muted-d); font-weight: 500;
margin: 0 0 28px;
}
.gauge::after{
content: "";
flex: 1; height: 1px;
background: linear-gradient(90deg, var(--orange), transparent);
} .btn{
display:inline-flex; align-items:center; gap: 10px;
padding: 16px 24px;
border-radius: var(--r-pill);
font-weight: 600; font-size: 15px;
text-decoration: none; border: none; cursor: pointer;
transition:
transform .35s cubic-bezier(.22,.61,.36,1),
box-shadow .4s cubic-bezier(.22,.61,.36,1),
background .3s ease, color .3s ease, filter .2s ease;
white-space: nowrap;
position: relative;
overflow: hidden;
} .btn::before{
content:""; position:absolute; inset:0;
background: linear-gradient(110deg,
transparent 30%,
rgba(255,255,255,0.22) 48%,
rgba(255,255,255,0.32) 50%,
rgba(255,255,255,0.22) 52%,
transparent 70%);
transform: translateX(-120%);
transition: transform .9s cubic-bezier(.22,.61,.36,1);
pointer-events:none; border-radius: inherit;
mix-blend-mode: overlay; opacity: 0;
}
.btn:hover::before{ transform: translateX(120%); opacity: 1; }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); transition-duration:.12s; filter: brightness(.96); }
.btn-primary{
background: linear-gradient(180deg, #1c1a17 0%, #0a0a09 55%, #050505 100%);
color: var(--orange);
box-shadow: var(--sh-btn-dark);
padding: 18px 28px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.btn-primary:hover{
background: linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 55%, var(--orange-deep) 100%);
color: #fff;
transform: translateY(-3px);
box-shadow: var(--sh-btn-dark-h);
text-shadow: 0 1px 0 rgba(120,50,10,.5);
}
.btn-ghost{
background: linear-gradient(180deg, #ffffff 0%, #f7f3ea 100%);
color: var(--ink);
box-shadow: var(--sh-btn-light);
}
.btn-ghost:hover{
transform: translateY(-2px);
box-shadow:
inset 0 2px 0 rgba(255,255,255,1),
inset 0 1px 0 rgba(255,255,255,.9),
inset 0 -2px 1px rgba(0,0,0,.18),
inset 0 0 0 1px rgba(0,0,0,.08),
0 2px 4px rgba(0,0,0,.14),
0 12px 22px rgba(0,0,0,.16),
0 28px 44px rgba(0,0,0,.14);
}
.btn .arr{
width: 16px; height: 16px;
display:inline-grid; place-items:center;
transition: transform .35s cubic-bezier(.22,.61,.36,1);
position: relative; z-index: 1;
}
.btn:hover .arr{ transform: translate(3px,-3px) rotate(2deg); }
.btn > span, .btn > svg{ position:relative; z-index:1; } nav.top{
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
background: rgba(12,13,15,.72); backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid transparent;
transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
nav.top.scrolled{
border-bottom-color: rgba(255,255,255,.06);
background: rgba(12,13,15,.88);
box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.30);
}
nav.top .bar{
max-width: 1240px; margin: 0 auto;
display:flex; align-items:center; justify-content:space-between;
padding: 16px 28px;
}
.brand{
display:flex; align-items:center; gap: 12px;
font-weight: 700; font-size: 18px; letter-spacing:-0.01em;
color: var(--text-on-dark);
text-decoration:none;
}
.brand-mark{
width: 38px; height: 38px;
background: url(//j1systems.pro/wp-content/themes/j1systems-v2/assets/j1-logo-light.png) no-repeat center / contain;
flex: none;
}
nav.top ul{ list-style:none; display:flex; gap: 30px; margin: 0; padding: 0; }
nav.top ul a{
text-decoration: none; color: var(--text-on-dark-2); font-size: 14px; font-weight: 500;
background-image: linear-gradient(var(--orange), var(--orange));
background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%;
transition: background-size .35s cubic-bezier(.22,.61,.36,1), color .25s ease;
padding-bottom: 2px;
}
nav.top ul a:hover{ color: var(--text-on-dark); background-size: 100% 1.5px; }
@media (max-width: 880px){ nav.top ul{ display:none; } } .hero{
padding: 48px 0 120px;
position: relative;
overflow: hidden;
}
.hero::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
background:
radial-gradient(60% 50% at 85% 50%, rgba(224,123,48,.16), transparent 65%),
radial-gradient(70% 60% at 15% 80%, rgba(224,123,48,.08), transparent 60%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero-grid{
display:grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items:center;
}
.hero h1{
font-family: var(--font-display);
font-size: clamp(56px, 8.4vw, 108px);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.005em;
letter-spacing: -0.035em;
line-height: 0.98;
color: var(--text-on-dark);
}
.hero h1 .em{ color: var(--orange); }
.hero h1 .ed{
font-family: var(--font-display);
font-style: normal;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.005em;
font-size: 1em;
line-height: 1;
margin-left: 0;
}
.hero .sub{
margin-top: 26px;
color: var(--text-on-dark-2);
font-size: 19px; line-height: 1.55;
max-width: 52ch;
}
.hero .ctas{ margin-top: 36px; display:flex; gap: 14px; flex-wrap: wrap; }
.hero .trust{
margin-top: 30px;
display:inline-flex; align-items:center; gap: 10px;
color: var(--muted-d); font-size: 14px;
}
.hero .trust .live{
width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
box-shadow: 0 0 0 4px rgba(58,166,110,.18);
animation: livePulse 2.6s ease-in-out infinite;
}
@keyframes livePulse{ 0%,100%{ box-shadow: 0 0 0 4px rgba(58,166,110,.18); } 50%{ box-shadow: 0 0 0 8px rgba(58,166,110,.04); } } .hero-stage{
position: relative;
max-width: 460px;
margin-left: auto;
padding: 28px 16px;
background: transparent;
border: none;
box-shadow: none;
overflow: visible;
}
@media (max-width: 880px){
.hero-stage{ max-width: 420px; margin: 0 auto; }
} .lead-card{
position: relative; z-index: 2;
width: 100%;
background: linear-gradient(180deg, rgba(28,22,18,.92), rgba(18,14,11,.96));
border: 1px solid rgba(255,255,255,.08);
border-radius: 22px;
padding: 22px 22px 20px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 20px 40px rgba(0,0,0,.5);
transform: rotate(-1.2deg);
}
.lead-card__head{
display: flex; align-items: center; gap: 10px;
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(243,239,231,.55);
padding-bottom: 12px;
border-bottom: 1px dashed rgba(255,255,255,.10);
}
.lead-card__head .app{
display: inline-flex; align-items: center; gap: 10px;
color: var(--text-on-dark); font-weight: 700;
letter-spacing: 0.14em;
font-family: var(--font-display);
font-size: 15px;
text-transform: uppercase;
}
.lead-card__head .app i{
width: 10px; height: 10px; border-radius: 50%;
background: #ff4a3d;
box-shadow: 0 0 0 3px rgba(255,74,61,.18), 0 0 12px rgba(255,74,61,.6);
animation: missedPulse 1.8s ease-in-out infinite;
}
@keyframes missedPulse{
0%,100%{ box-shadow: 0 0 0 3px rgba(255,74,61,.18), 0 0 12px rgba(255,74,61,.6); }
50%    { box-shadow: 0 0 0 6px rgba(255,74,61,.0),  0 0 18px rgba(255,74,61,.4); }
}
.lead-card__head .stamp{ margin-left: auto; }
.lead-card__title{
margin: 16px 0 6px;
font-family: var(--font-subhead);
font-size: clamp(20px, 2.2vw, 24px); font-weight: 600;
color: var(--text-on-dark); letter-spacing: -0.012em; line-height: 1.18;
}
.lead-card__sub{
color: rgba(243,239,231,.65);
font-size: 14.5px; line-height: 1.5;
}
.lead-card__meta{
margin-top: 16px; padding-top: 14px;
border-top: 1px dashed rgba(255,255,255,.08);
display: grid; grid-template-columns: 1fr auto; gap: 6px 16px;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(243,239,231,.5);
}
.lead-card__meta b{
color: var(--text-on-dark); font-weight: 600;
font-variant-numeric: tabular-nums;
}  .lead-card__status{
position: relative;
margin-top: 18px; padding: 14px 16px;
background: rgba(207,55,40,.10);
border: 1px solid rgba(224,80,40,.42);
border-radius: 12px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
overflow: hidden;
animation: statusPulse 3.4s ease-in-out infinite;
} .lead-card__status::before{
content: ""; position: absolute; inset: 0;
background: radial-gradient(60% 100% at 20% 50%, rgba(255,80,50,.20), transparent 70%);
opacity: 0;
animation: statusInnerPulse 3.4s ease-in-out infinite;
pointer-events: none;
border-radius: inherit;
}
@keyframes statusPulse{
0%, 100% {
border-color: rgba(224,80,40,.42);
box-shadow: 0 0 0 0 rgba(224,80,40,0);
}
50% {
border-color: rgba(255,100,70,.72);
box-shadow: 0 0 0 4px rgba(224,80,40,.08), 0 0 24px rgba(224,80,40,.18);
}
}
@keyframes statusInnerPulse{
0%, 100% { opacity: 0.0; }
50%      { opacity: 1.0; }
}
.lead-card__status .label{
position: relative; z-index: 1;
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.20em; text-transform: uppercase;
color: #ff8a6a;
font-weight: 600;
display: inline-flex; align-items: center; gap: 8px;
} .lead-card__status .label::before{
content: ""; width: 7px; height: 7px;
background: #ff5f44; border-radius: 50%;
box-shadow: 0 0 0 0 rgba(255,95,68,.6);
animation: statusDotPulse 1.6s ease-in-out infinite;
}
@keyframes statusDotPulse{
0%, 100% { box-shadow: 0 0 0 0 rgba(255,95,68,.6); }
50%      { box-shadow: 0 0 0 6px rgba(255,95,68,0); }
}
.lead-card__status .value{
position: relative; z-index: 1;
font-family: var(--font-display); font-weight: 800;
color: #ffb59a;
font-size: 18px; letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 14px rgba(255,95,68,.30);
transition: transform .25s cubic-bezier(.22,.61,.36,1);
} .lead-card__status .value.tick{
animation: valueTick .42s cubic-bezier(.22,.61,.36,1);
}
@keyframes valueTick{
0%   { transform: translateY(0)    scale(1); color: #ffb59a; }
35%  { transform: translateY(-2px) scale(1.06); color: #ffd9c4; }
100% { transform: translateY(0)    scale(1); color: #ffb59a; }
}
.lead-card__compete{
position: absolute; bottom: -22px; right: -18px;
transform: rotate(2.5deg);
background: linear-gradient(180deg, #1a1614, #0f0c0a);
border: 1px solid rgba(255,120,80,.22);
border-left: 3px solid var(--orange);
border-radius: 12px;
padding: 10px 14px;
display: flex; align-items: center; gap: 10px;
box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 0 0 rgba(255,90,60,0);
animation: competeAmbient 3.4s ease-in-out infinite,
competeNudge   6s ease-in-out infinite;
transform-origin: center right;
} @keyframes competeAmbient{
0%, 100% {
box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 0 0 rgba(255,90,60,0);
border-color: rgba(255,120,80,.22);
}
50% {
box-shadow: 0 18px 36px rgba(0,0,0,.5), 0 0 22px rgba(255,90,60,.22);
border-color: rgba(255,140,100,.55);
}
} @keyframes competeNudge{
0%, 92%, 100% { transform: rotate(2.5deg) translateX(0); }
93% { transform: rotate(3.5deg)  translateX(-2px); }
95% { transform: rotate(1.5deg)  translateX(2px); }
97% { transform: rotate(3.2deg)  translateX(-1.5px); }
99% { transform: rotate(2deg)    translateX(0.5px); }
}
@media (prefers-reduced-motion: reduce){
.lead-card__status, .lead-card__status::before, .lead-card__status .label::before,
.lead-card__compete{ animation: none !important; }
}
.lead-card__compete .num{
font-family: var(--font-display); font-weight: 800;
font-size: 22px; color: var(--orange); letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.lead-card__compete .lbl{
font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(243,239,231,.7); line-height: 1.25;
} .hero-photo{
position: relative;
aspect-ratio: 4/5;
border-radius: var(--r-xl);
background:
radial-gradient(120% 80% at 50% 30%, #2a221c 0%, #15110d 60%, #0a0907 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 30px 60px rgba(0,0,0,.40),
0 70px 120px rgba(0,0,0,.34),
0 0 0 1px rgba(224,123,48,.08),
0 0 80px rgba(224,123,48,.12);
overflow: hidden;
--py: 0px;
transform: translateY(var(--py));
transition: transform .15s linear;
}
.hero-photo img.jacob{
position:absolute; left:0; right:0; top:0; bottom:0;
width: 100%; height: 100%;
object-fit: contain; object-position: 50% 100%;
z-index: 2;
filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
}
.hero-photo .badge{
position:absolute; left: 22px; top: 22px; z-index: 3;
display:inline-flex; align-items:center; gap: 8px;
background: rgba(20,16,12,.65); backdrop-filter: blur(10px);
color: var(--text-on-dark);
padding: 8px 14px; border-radius: var(--r-pill);
font-family:'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
border: 1px solid rgba(255,255,255,.10);
}
.hero-photo .badge .dot{
width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
box-shadow: 0 0 0 3px rgba(224,123,48,.28);
}
.hero-photo .corner{
position:absolute; right:-1px; top:-1px; z-index:1;
width: 100px; height: 100px;
background: linear-gradient(225deg, var(--orange), transparent 65%);
border-top-right-radius: var(--r-xl);
opacity:.6;
}
@media (max-width: 880px){
.hero-grid{ grid-template-columns: 1fr; gap: 36px; }
.hero-photo{ max-width: 380px; margin: 0 auto; }
} section{ padding: 96px 0; }
@media (max-width: 700px){ section{ padding: 64px 0; } }
.sec-head{ max-width: 800px; margin-bottom: 64px; }
.sec-head h2{
font-family: var(--font-display);
font-size: clamp(40px, 5.6vw, 72px);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.005em;
margin-top: 18px;
color: var(--text-on-dark);
line-height: 1.02;
}
.sec-head h2 .em{ color: var(--orange); }
.sec-head h2 .ed{
font-family: var(--font-display);
font-style: normal;
font-weight: 900;
text-transform: uppercase;
letter-spacing: -0.005em;
font-size: 1em; line-height: 1;
} h3, h4,
.step h3, .outcome h3, .stake h3, .tier h3, .case-col h4, .ch h3, .auth-item p strong{
font-family: var(--font-subhead);
font-weight: 600;
letter-spacing: -0.015em;
text-transform: none;
line-height: 1.18;
}
.sec-head p.kicker{
margin-top: 18px; color: var(--muted-d); font-size: 17px; max-width: 60ch;
} .sec-head .eyebrow,
.case .eyebrow,
.final .eyebrow{ color: var(--orange); }
section.band{
background: var(--bg-2);
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
background-size: 24px 24px;
} .stakes-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.stake{
padding: 0; max-width: 32ch;
}
.stake .ico{
width: 44px; height: 44px; border-radius: 12px;
display:grid; place-items:center; color: var(--orange);
background: var(--orange-soft);
border: 1px solid rgba(224,123,48,.30);
margin-bottom: 22px;
}
.stake .ico svg{ width: 22px; height: 22px; }
.stake h3{ font-size: 22px; font-weight: 600; margin-bottom: 10px; color: var(--text-on-dark); }
.stake p{ color: var(--text-on-dark-2); font-size: 16px; line-height: 1.6; }
.stakes-foot{ margin-top: 32px; color: var(--muted-d); font-size: 15px; max-width: 64ch; }
#stakes{ padding-bottom: 48px; }
@media (max-width: 880px){ .stakes-grid{ grid-template-columns: 1fr; gap: 36px; } } .leak{ position: relative; margin-top: 16px; }
.leak__grid{
display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
position: relative;
}
.leak__scene{
position: relative;
display: flex; flex-direction: column;
min-width: 0;
} .leak__head{
display: flex; align-items: center; gap: 12px;
height: 32px;
margin-bottom: 10px;
position: relative;
}
.leak__badge{
font-family: var(--font-mono);
font-size: 12px; font-weight: 600; letter-spacing: .14em;
color: var(--orange);
padding: 6px 10px; border-radius: 6px;
background: rgba(224,123,48,.10);
border: 1px solid rgba(224,123,48,.32);
line-height: 1; flex: none;
}
.leak__arrow{
flex: 1; height: 14px; position: relative;
margin-right: -52px; z-index: 0;
}
.leak__arrow::before{
content: ""; position: absolute; top: 50%; left: 4px; right: 16px;
height: 2px; transform: translateY(-50%);
background-image: linear-gradient(to right, var(--orange) 55%, transparent 55%);
background-size: 10px 2px;
background-repeat: repeat-x;
background-position: 0 50%;
animation: leakFlow 1.4s linear infinite;
filter: drop-shadow(0 0 6px rgba(224,123,48,.55));
opacity: .85;
}
.leak__arrow::after{
content: ""; position: absolute; top: 50%; right: 0;
width: 0; height: 0;
border-left: 9px solid var(--orange);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
transform: translateY(-50%);
filter: drop-shadow(0 0 8px rgba(224,123,48,.6));
}
.leak__scene:last-child .leak__arrow{ display: none; }
@keyframes leakFlow{
from{ background-position: 0 50%; }
to  { background-position: 10px 50%; }
}
.leak__when{
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted-d);
margin-bottom: 14px;
} .leak__stage{
height: 240px;
border-radius: 14px;
background:
linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 60%),
var(--bg-2);
border: 1px solid var(--line);
padding: 14px;
position: relative;
overflow: hidden;
margin-bottom: 22px;
}
.leak__stage--loss{
background:
radial-gradient(120% 80% at 50% 0%, rgba(224,123,48,.14), rgba(224,123,48,0) 60%),
#17110c;
border-color: rgba(224,123,48,.22);
} .leak__phone{ display: flex; flex-direction: column; gap: 7px; height: 100%; }
.leak__row{
display: grid; grid-template-columns: 44px 1fr 10px; gap: 10px; align-items: center;
background: rgba(255,255,255,.03);
border: 1px solid var(--line);
border-radius: 9px; padding: 8px 10px;
}
.leak__row--alert{
border-color: rgba(207,78,78,.32);
background: rgba(207,78,78,.06);
}
.leak__pill{
font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
padding: 4px 0; border-radius: 5px; text-align: center;
line-height: 1;
}
.leak__pill--call{ background: rgba(207,78,78,.16); color:#e89595; border:1px solid rgba(207,78,78,.35); }
.leak__pill--fb  { background: rgba(82,118,200,.18); color:#a4b8e8; border:1px solid rgba(82,118,200,.35); }
.leak__pill--form{ background: rgba(120,140,150,.15); color:#bfc6cb; border:1px solid rgba(120,140,150,.30); }
.leak__rowtxt strong{ display:block; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--text-on-dark); }
.leak__rowtxt small { display:block; font-family: var(--font-body); font-size: 11px; color: var(--muted-d); margin-top:1px; }
.leak__dot{ width: 8px; height: 8px; border-radius: 50%; background: #e0533a; box-shadow: 0 0 8px rgba(224,80,60,.75); }
.leak__seen{
margin-top: auto; align-self: flex-end;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
color: var(--muted-d); padding: 4px 9px;
border: 1px dashed var(--line); border-radius: 999px;
} .leak__inbox{ display: flex; flex-direction: column; gap: 6px; height: 100%; }
.leak__ibhead{
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
color: var(--muted-d); padding-bottom: 6px; border-bottom: 1px dashed var(--line);
margin-bottom: 2px;
}
.leak__timer{ display: inline-flex; gap: 5px; align-items: center; color: var(--orange-2); }
.leak__bub{
display: flex; justify-content: space-between; align-items: center; gap: 8px;
padding: 7px 10px; border-radius: 8px;
background: rgba(255,255,255,.035); border: 1px solid var(--line);
font-size: 11.5px;
}
.leak__bub strong{ font-weight: 600; color: var(--text-on-dark); }
.leak__bub span{ color: var(--muted-d); font-family: var(--font-mono); font-size: 11px; }
.leak__bub--you{
margin-top: auto;
background: rgba(224,123,48,.05);
border: 1px dashed rgba(224,123,48,.45);
}
.leak__bub--you strong{ color: var(--orange-2); }
.leak__bub--you span{ color: rgba(224,123,48,.78); font-style: italic; font-family: var(--font-body); } .leak__receipt{ display: flex; flex-direction: column; gap: 10px; height: 100%; }
.leak__rhead{
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(224,123,48,.22);
}
.leak__lab{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-d); }
.leak__stamp{
font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .14em;
color: #ff5f44;
padding: 3px 8px; border: 2px solid #ff5f44; border-radius: 4px;
transform: rotate(-5deg);
opacity: .92;
}
.leak__line{
display: flex; justify-content: space-between; align-items: baseline;
font-size: 13px; color: var(--text-on-dark-2);
}
.leak__line strong{ color: var(--text-on-dark); font-weight: 600; }
.leak__line em{ font-style: italic; color: var(--muted-d); }
.leak__receipt hr{ border: 0; border-top: 1px dashed var(--line); margin: 4px 0 2px; }
.leak__totlab{
font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted-d); margin-top: auto;
}
.leak__total{
font-family: var(--font-display); font-weight: 800;
font-size: 38px; line-height: 1; letter-spacing: -0.01em;
color: #ff8c6a;
text-shadow: 0 0 28px rgba(224,123,48,.45);
margin-top: 2px;
}
.leak__total .leak__neg{ color: #ff5f44; margin-right: 2px; } .leak__cap{ max-width: 34ch; }
.leak__cap h3{ font-size: 22px; font-weight: 600; margin-bottom: 10px; color: var(--text-on-dark); font-family: var(--font-subhead); }
.leak__cap p{ color: var(--text-on-dark-2); font-size: 15px; line-height: 1.6; } .leak__scene{ isolation: isolate; }
.leak__scene::after{
content:""; position: absolute; inset: 24px -8px -8px -8px;
border-radius: 18px;
pointer-events: none;
box-shadow: 0 0 0 1px rgba(224,123,48,.0), 0 30px 60px -20px rgba(224,123,48,.0);
background: radial-gradient(60% 50% at 50% 30%, rgba(224,123,48,.12), rgba(224,123,48,0) 70%);
opacity: 0; transition: opacity 280ms ease; z-index: -1;
}
.leak__scene:hover::after{ opacity: 1; }
@media (max-width: 880px){
.leak__grid{ grid-template-columns: 1fr; gap: 32px; }
.leak__arrow{ display: none; }
.leak__scene:last-child .leak__arrow{ display: none; }
.leak__stage{ height: auto; min-height: 200px; }
.leak__cap{ max-width: none; }
}
@media (prefers-reduced-motion: reduce){
.leak__arrow::before{ animation: none; }
} .leak2{
--phone-w: 440px;
--rail-x: 18px;
display: grid;
grid-template-columns: 1fr var(--phone-w);
gap: 96px;
margin-top: 64px;
position: relative;
}
.leak2__intro{
grid-column: 1 / -1;
margin: -16px 0 40px;
font-family: var(--font-mono);
font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted-d);
display: inline-flex; align-items: center; gap: 12px;
}
.leak2__intro::after{
content: ""; flex: 1; max-width: 220px;
height: 1px;
background-image: linear-gradient(to right, rgba(224,123,48,.5) 55%, transparent 55%);
background-size: 8px 1px; background-repeat: repeat-x;
animation: leak2RailFlowH 1.6s linear infinite;
align-self: center;
}
@keyframes leak2RailFlowH{ to{ background-position: 8px 0; } } .leak2__copy{
position: relative;
padding-left: 64px;
min-width: 0;
}
.leak2__copy::before{ content: ""; position: absolute;
left: var(--rail-x); top: 0; bottom: 0;
width: 1px;
background-image: linear-gradient(to bottom, rgba(224,123,48,.45) 50%, transparent 50%);
background-size: 1px 9px;
background-repeat: repeat-y;
animation: leak2RailFlow 1.6s linear infinite;
pointer-events: none;
opacity: .55;
}
.leak2__copy::after{ content: ""; position: absolute;
left: calc(var(--rail-x) - 3px); bottom: -2px;
width: 7px; height: 7px;
background: var(--orange);
border-radius: 50%;
box-shadow: 0 0 16px rgba(224,123,48,.8), 0 0 0 4px var(--bg);
}
@keyframes leak2RailFlow{ to{ background-position: 0 9px; } }
.leak2__chap{
position: relative;
min-height: 90vh;
padding-top: 14vh;
padding-bottom: 12vh;
}
.leak2__chap:first-of-type{ padding-top: 6vh; } .leak2__chap:last-of-type{ padding-bottom: 2vh; min-height: 175vh; } .leak2__chap::before{
content: attr(data-chap);
position: absolute; left: -65px;
top: 14vh;
width: 38px; height: 38px;
border-radius: 50%;
background: var(--bg);
border: 1px solid rgba(224,123,48,.45);
color: var(--orange);
display: grid; place-items: center;
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px rgba(224,123,48,.0), 0 0 0 12px rgba(224,123,48,0);
transition: background 400ms ease, color 400ms ease, transform 500ms cubic-bezier(.2,.65,.2,1.2), box-shadow 400ms ease;
z-index: 2;
}
.leak2__chap:first-of-type::before{ top: 6vh; }
.leak2__chap.is-active::before{
background: var(--orange);
color: #161108;
transform: scale(1.08);
box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px rgba(224,123,48,.35), 0 0 28px rgba(224,123,48,.55);
}
.leak2__when{
display: inline-block;
font-family: var(--font-mono);
font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--muted-d);
padding-bottom: 14px;
border-bottom: 1px dashed rgba(255,255,255,.08);
margin-bottom: 28px;
transition: color 300ms ease, border-color 300ms ease;
}
.leak2__chap.is-active .leak2__when{
color: var(--orange-2);
border-bottom-color: rgba(224,123,48,.35);
}
.leak2__title{
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(46px, 5.4vw, 72px);
line-height: 0.96;
letter-spacing: -0.015em;
color: var(--text-on-dark);
margin-bottom: 28px;
text-transform: uppercase;
}
.leak2__title em{
font-family: var(--font-display);
font-style: normal;
font-weight: 800;
color: var(--orange);
text-transform: uppercase;
letter-spacing: -0.005em;
font-size: 1em;
}
.leak2__lede{
font-family: var(--font-body);
font-size: 19px;
line-height: 1.5;
color: var(--text-on-dark);
max-width: 38ch;
margin-bottom: 18px;
}
.leak2__chap p:not(.leak2__lede){
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--text-on-dark-2);
max-width: 38ch;
margin-bottom: 14px;
}
.leak2__chap p .hl{
color: var(--orange-2);
font-weight: 500;
} .leak2__stage{
position: sticky;
top: calc(96px + 2vh);
height: min(82vh, calc(100vh - 96px - 4vh));
min-height: 640px;
align-self: start;
display: flex; justify-content: center; align-items: flex-start;
} .leak2__phone{
position: relative;
height: 100%;
aspect-ratio: 9 / 19.5;
border-radius: 52px;
background: linear-gradient(160deg, #1a1b1f 0%, #0e0f12 55%, #060608 100%);
padding: 9px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(255,255,255,.05),
inset 0 0 0 1px rgba(255,255,255,.035),
inset 0 1px 0 rgba(255,255,255,.05),
inset 0 -2px 0 rgba(0,0,0,.55),
-20px 30px 60px -10px rgba(0,0,0,.55),
0 60px 120px -30px rgba(0,0,0,.85),
0 24px 60px -10px rgba(0,0,0,.55);
}
.leak2__phone::before{ content: "";
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(105deg, transparent 0%, transparent 72%, rgba(255,255,255,.035) 86%, rgba(255,255,255,.05) 92%, transparent 100%);
z-index: 2;
}
.leak2__phone::after{
content: ""; position: absolute; inset: 0; border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 60px rgba(224,123,48,0);
transition: box-shadow 700ms ease;
}
.leak2.is-loss .leak2__phone::after{
box-shadow:
inset 0 -120px 90px -40px rgba(200,40,25,.32),
inset 0 0 80px rgba(160,30,15,.18);
animation: phoneLossPulse 1.6s ease-in-out infinite;
}
@keyframes phoneLossPulse{
0%, 100% {
box-shadow:
inset 0 -120px 90px -40px rgba(200,40,25,.32),
inset 0 0 80px rgba(160,30,15,.18);
}
50% {
box-shadow:
inset 0 -140px 110px -40px rgba(220,55,30,.46),
inset 0 0 100px rgba(180,40,20,.28);
}
} .leak2__screen{
position: relative;
width: 100%; height: 100%;
border-radius: 44px;
overflow: hidden;
background:
radial-gradient(120% 80% at 50% 0%, rgba(70,70,80,.45), rgba(20,20,24,0) 55%),
radial-gradient(140% 100% at 50% 100%, rgba(40,28,22,.55), rgba(14,14,18,0) 60%),
linear-gradient(180deg, #1a1a1f 0%, #0c0c10 100%);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
} .leak2__notch{
position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
width: 36%; min-width: 100px; max-width: 130px;
height: 30px;
background: #000;
border-radius: 28px;
z-index: 6;
box-shadow: inset 0 0 0 1px #111;
} .leak2__statusbar{
position: absolute; top: 0; left: 0; right: 0;
height: 46px;
padding: 0 28px;
display: flex; justify-content: space-between; align-items: center;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
font-size: 15px;
font-weight: 600;
color: #fff;
z-index: 5;
pointer-events: none;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.leak2__statusbar .leak2__day{
color: #fff;
letter-spacing: -0.01em;
padding-top: 8px;
}
.leak2__statusbar .ios-icons{
display: inline-flex; align-items: center; gap: 6px;
padding-top: 8px;
}
.leak2__statusbar .ios-icons svg{ display: block; } .leak2__scene{
position: absolute;
inset: 46px 0 0 0; padding: 0 14px 24px;
display: flex; flex-direction: column;
opacity: 0;
transform: translateY(8px);
transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.65,.2,1);
pointer-events: none;
will-change: opacity, transform;
color: #fff;
}
.leak2__scene.is-active{
opacity: 1; transform: translateY(0);
pointer-events: auto;
} .leak2__sceneLabel{ display: none; }  .leak2__lock{
text-align: center;
padding: 6px 0 22px;
color: #fff;
}
.leak2__lock__lock{
width: 14px; height: 14px;
margin: 0 auto 14px;
opacity: .9;
}
.leak2__lock__date{
font-size: 14px;
font-weight: 500;
color: rgba(255,255,255,.92);
letter-spacing: 0;
margin-bottom: 6px;
}
.leak2__lock__time{
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
font-weight: 200;
font-size: 76px;
line-height: 1;
letter-spacing: -0.04em;
color: #fff;
font-variant-numeric: tabular-nums;
} .leak2__notif{
display: grid;
grid-template-columns: 32px 1fr auto;
grid-template-rows: auto auto;
column-gap: 10px;
row-gap: 2px;
background: rgba(255,255,255,.10); backdrop-filter: blur(8px) saturate(150%);
-webkit-backdrop-filter: blur(8px) saturate(150%);
border: 0.5px solid rgba(255,255,255,.10);
border-radius: 16px;
padding: 10px 12px 11px;
margin-bottom: 8px;
opacity: 0; transform: translateY(12px);
transition: opacity 340ms ease, transform 460ms cubic-bezier(.2,.65,.2,1);
transition-delay: calc(var(--i) * 110ms + 80ms);
box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.leak2__scene--1.is-active .leak2__notif{
opacity: 1; transform: translateY(0);
}
.leak2__notif .ios-app-icon{
grid-row: 1 / span 2;
width: 32px; height: 32px;
border-radius: 8px;
background: #1a1a1f;
display: grid; place-items: center;
color: #fff;
box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
overflow: hidden;
align-self: start;
}
.leak2__notif .ios-app-icon svg{ width: 18px; height: 18px; }
.leak2__notif .ios-app-icon.ico--phone{ background: linear-gradient(180deg, #4cd964, #2cab4a); }
.leak2__notif .ios-app-icon.ico--msg  { background: linear-gradient(180deg, #67d6ff, #2196f3); }
.leak2__notif .ios-app-icon.ico--mail { background: linear-gradient(180deg, #5cc1ff, #1e88e5); }
.leak2__notif .ios-app-icon.ico--fb   { background: linear-gradient(180deg, #4267b2, #29487d); }
.leak2__notif .ios-app-icon.ico--web  { background: linear-gradient(180deg, #ff9d4d, #e07b30); }
.leak2__notif .ios-app-name{
grid-column: 2; grid-row: 1;
font-size: 12px; font-weight: 600;
color: rgba(255,255,255,.85);
letter-spacing: 0.01em;
text-transform: uppercase;
align-self: center;
}
.leak2__notif .ios-time{
grid-column: 3; grid-row: 1;
font-size: 11.5px; font-weight: 500;
color: rgba(255,255,255,.62);
align-self: center;
}
.leak2__notif .ios-content{
grid-column: 2 / span 2; grid-row: 2;
color: #fff;
font-size: 13.5px;
line-height: 1.32;
font-weight: 400;
}
.leak2__notif .ios-content b{
font-weight: 600;
display: block;
margin-bottom: 1px;
} .leak2__unseen{
margin-top: auto;
align-self: stretch;
display: flex; justify-content: space-between; align-items: center;
font-family: -apple-system, system-ui, sans-serif;
font-size: 11.5px; letter-spacing: 0;
color: rgba(255,255,255,.55);
padding: 10px 8px 0;
border-top: 1px solid rgba(255,255,255,.07);
text-transform: uppercase;
font-weight: 500;
opacity: 0;
transition: opacity 340ms ease;
transition-delay: 480ms;
}
.leak2__unseen strong{
color: #ff5f44; font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.leak2__scene--1.is-active .leak2__unseen{ opacity: 1; } .leak2__appbar{
text-align: center;
padding: 4px 0 14px;
border-bottom: 0.33px solid rgba(255,255,255,.10);
margin-bottom: 14px;
}
.leak2__appbar__sub{
font-size: 11px;
font-weight: 500;
color: rgba(255,255,255,.58);
letter-spacing: 0.02em;
text-transform: uppercase;
margin-bottom: 4px;
}
.leak2__appbar__title{
font-size: 17px;
font-weight: 600;
color: #fff;
letter-spacing: -0.01em;
} .leak2__custHead{ display: none; }
.leak2__timer{
display: inline-flex; gap: 6px; align-items: center;
color: #ff5f44;
font-feature-settings: 'tnum';
font-size: 11px;
font-weight: 500;
}
.leak2__bub{
display: flex; justify-content: space-between; align-items: center; gap: 8px;
padding: 10px 14px; border-radius: 14px;
background: rgba(255,255,255,.10); backdrop-filter: blur(6px) saturate(150%);
-webkit-backdrop-filter: blur(6px) saturate(150%);
border: 0.5px solid rgba(255,255,255,.08);
font-size: 13px;
margin-bottom: 8px;
color: #fff;
opacity: 0; transform: translateX(-12px);
transition: opacity 340ms ease, transform 420ms cubic-bezier(.2,.65,.2,1);
transition-delay: calc(var(--i) * 120ms + 100ms);
}
.leak2__scene--2.is-active .leak2__bub{ opacity: 1; transform: translateX(0); }
.leak2__bub strong{ color: #fff; font-weight: 600; }
.leak2__bub span{
color: rgba(255,255,255,.62);
font-size: 11.5px;
font-feature-settings: 'tnum';
}
.leak2__bub--you{
margin-top: 6px;
background: rgba(224,123,48,.10);
border: 0.5px dashed rgba(224,123,48,.45);
transform: translateX(0) translateY(8px);
}
.leak2__bub--you strong{ color: var(--orange-2); }
.leak2__bub--you span{ color: rgba(224,123,48,.78); font-style: italic; }
.leak2__verdict{
margin-top: 14px;
text-align: center;
font-style: italic;
font-size: 13px;
color: rgba(255,255,255,.65);
padding: 14px 16px;
border-radius: 12px;
background: rgba(255,255,255,.04);
opacity: 0;
transition: opacity 380ms ease;
transition-delay: 620ms;
}
.leak2__scene--2.is-active .leak2__verdict{ opacity: 1; } .leak2__weekHead{
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 10px;
border-bottom: 0.5px solid rgba(255,255,255,.10);
margin-bottom: 6px;
}
.leak2__weekLab{
font-size: 11.5px;
color: rgba(255,255,255,.62);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.leak2__lostStamp{
font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .16em;
color: #ff5f44;
padding: 4px 9px; border: 2px solid #ff5f44; border-radius: 4px;
transform: rotate(22deg) scale(1.6); opacity: 0;
transition: transform 750ms cubic-bezier(.2,.7,.2,1.4), opacity 350ms ease;
transition-delay: 950ms;
line-height: 1;
}
.leak2__scene--3.is-active .leak2__lostStamp{
transform: rotate(-7deg) scale(1);
opacity: 0.94;
}
.leak2__r-line{
display: flex; justify-content: space-between; align-items: baseline;
font-size: 13px; color: rgba(255,255,255,.78);
padding: 7px 0;
opacity: 0; transform: translateY(6px);
transition: opacity 340ms ease, transform 360ms ease;
transition-delay: calc(var(--i) * 90ms + 100ms);
}
.leak2__scene--3.is-active .leak2__r-line{ opacity: 1; transform: translateY(0); }
.leak2__r-line strong{ color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.leak2__r-line em{ font-style: italic; color: rgba(255,255,255,.55); }
.leak2__r-hr{ border: 0; border-top: 0.5px dashed rgba(255,255,255,.12); margin: 4px 0; opacity: 0; transition: opacity 300ms ease; transition-delay: 420ms; }
.leak2__scene--3.is-active .leak2__r-hr{ opacity: 1; }
.leak2__weekTotal{
margin-top: auto;
padding-top: 14px;
text-align: center;
}
.leak2__weekTotalLab{
font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
color: rgba(255,255,255,.55);
margin-bottom: 6px;
opacity: 0;
transition: opacity 340ms ease;
transition-delay: 380ms;
font-weight: 500;
}
.leak2__scene--3.is-active .leak2__weekTotalLab{ opacity: 1; }
.leak2__weekTotalVal{
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
font-weight: 800;
font-size: 54px; line-height: 1; letter-spacing: -0.035em;
color: #ff3a2a;
text-shadow:
0 0 12px rgba(255,58,42,.85),
0 0 32px rgba(255,40,25,.55),
0 0 64px rgba(220,30,15,.40);
font-variant-numeric: tabular-nums;
opacity: 0; transform: translateY(8px);
transition: opacity 460ms ease, transform 460ms cubic-bezier(.2,.65,.2,1.2);
transition-delay: 500ms;
}
.leak2__scene--3.is-active .leak2__weekTotalVal{
opacity: 1; transform: translateY(0);
animation: weekTotalPulse 1.6s ease-in-out 900ms infinite;
}
@keyframes weekTotalPulse{
0%, 100% {
color: #ff3a2a;
text-shadow:
0 0 12px rgba(255,58,42,.85),
0 0 32px rgba(255,40,25,.55),
0 0 64px rgba(220,30,15,.40);
}
50% {
color: #ff5142;
text-shadow:
0 0 18px rgba(255,80,60,1),
0 0 48px rgba(255,55,35,.80),
0 0 96px rgba(230,40,20,.60);
}
}
.leak2__weekTotalSub{
font-size: 12px;
color: rgba(255,255,255,.55);
margin-top: 6px;
opacity: 0;
transition: opacity 340ms ease;
transition-delay: 640ms;
}
.leak2__scene--3.is-active .leak2__weekTotalSub{ opacity: 1; } @media (max-width: 1080px){
.leak2{ --phone-w: 380px; gap: 64px; }
.leak2__title{ font-size: clamp(38px, 5vw, 56px); }
}
@media (max-width: 880px){
.leak2{
grid-template-columns: 1fr;
gap: 24px;
}
.leak2__stage{
position: sticky;
top: 72px;
height: 56vh;
min-height: 420px;
max-width: 340px;
margin: 0 auto;
order: -1; }
.leak2__copy{ padding-left: 44px; }
.leak2__copy::before{ left: 10px; }
.leak2__copy::after{ left: 7px; } .leak2__chap::before{ left: -50px; width: 32px; height: 32px; font-size: 11px; top: 6vh; }
.leak2__chap{ min-height: auto; padding-top: 4vh; padding-bottom: 4vh; }
.leak2__title{ font-size: 38px; }
.leak2__lede{ font-size: 17px; }
}
@media (prefers-reduced-motion: reduce){
.leak2__scene, .leak2__notif, .leak2__bub, .leak2__r-line, .leak2__weekTotalVal,
.leak2__lostStamp, .leak2__chap::before, .leak2__verdict, .leak2__unseen,
.leak2__weekTotalLab, .leak2__weekTotalSub, .leak2__r-hr{
transition: none !important;
}
.leak2__copy::before, .leak2__intro::after{ animation: none !important; }
} .plan-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step{
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 36px 30px 32px;
position: relative;
overflow: hidden; transition: border-color .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.step::before{ content: attr(data-num);
position: absolute;
right: -14px; bottom: -36px;
font-family: var(--font-display);
font-weight: 800;
font-size: 200px;
line-height: 1;
letter-spacing: -0.06em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(224,123,48,.22);
pointer-events: none;
transition: -webkit-text-stroke-color .4s ease;
}
.step:hover{ border-color: rgba(224,123,48,.30); transform: translateY(-2px); }
.step:hover::before{ -webkit-text-stroke-color: rgba(224,123,48,.35); }
.step .n{
font-family: var(--font-mono);
font-size: 11px; color: var(--orange); letter-spacing: 0.22em;
display:block; margin-bottom: 18px; text-transform: uppercase;
position: relative; z-index: 1;
}
.step h3{ font-size: 24px; font-weight: 600; margin-bottom: 14px; color: var(--text-on-dark); position: relative; z-index: 1; }
.step p{ color: var(--text-on-dark-2); font-size: 16px; line-height: 1.6; position: relative; z-index: 1; }
.plan-foot{ margin-top: 40px; color: var(--muted-d); font-size: 15px; }
@media (max-width: 880px){ .plan-grid{ grid-template-columns: 1fr; } } .outcome-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.outcome-grid--four{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
.outcome{
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 36px 32px;
display:flex; flex-direction: column;
position: relative;
overflow: hidden;
transition: border-color .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.outcome::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
background: linear-gradient(180deg, var(--orange), transparent);
}
.outcome:hover{ border-color: rgba(224,123,48,.30); transform: translateY(-2px); }
.outcome .ico{
width: 48px; height: 48px; border-radius: 12px;
background: linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 60%, var(--orange-deep) 100%);
color: #fff;
display:grid; place-items:center;
margin-bottom: 22px;
box-shadow: 0 8px 18px rgba(224,123,48,.30), inset 0 1px 0 rgba(255,255,255,.25);
}
.outcome .ico svg{ width: 22px; height: 22px; }
.outcome h3{ font-size: 22px; font-weight: 600; line-height: 1.2; margin-bottom: 12px; color: var(--text-on-dark); }
.outcome p{ color: var(--text-on-dark-2); font-size: 16px; line-height: 1.6; }
.outcome .result{
margin-top: 24px; padding-top: 20px;
border-top: 1px solid var(--line);
font-family:'Geist Mono', monospace;
font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--orange);
}
@media (max-width: 880px){ .outcome-grid{ grid-template-columns: 1fr; } } .case{
background: linear-gradient(180deg, #131517 0%, #0a0b0d 100%);
border: 1px solid rgba(224,123,48,.18);
border-radius: var(--r-xl);
padding: 72px 56px;
position: relative; overflow: hidden;
}
.case::before{
content:""; position:absolute; right:-100px; top:-100px;
width: 380px; height: 380px; border-radius: 50%;
background: radial-gradient(circle, rgba(224,123,48,.30), transparent 70%);
pointer-events: none;
}
.case .eyebrow{ color: var(--orange); }
.case h2{ color: var(--text-on-dark); font-size: clamp(30px, 4vw, 44px); margin-top: 14px; max-width: 24ch; position: relative; }
.case-cols{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; margin-top: 52px; position: relative; }
.case-col h4{
font-family:'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--muted-d); font-weight: 500;
padding-bottom: 14px; margin-bottom: 18px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.case-col.result h4{ color: var(--orange); border-bottom-color: rgba(224,123,48,.30); }
.case-col ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.case-col__line{
font-family: var(--font-subhead);
font-size: 17px;
line-height: 1.5;
color: var(--text-on-dark);
margin: 0;
letter-spacing: -0.005em;
}
.case-col.result .case-col__line{ color: var(--orange); }
.case-col li{ font-size: 15px; color: var(--text-on-dark-2); line-height: 1.55; padding-left: 22px; position:relative; }
.case-col li::before{
content:""; position:absolute; left: 0; top: 9px; width: 12px; height: 1px; background: rgba(255,255,255,.25);
}
.case-col.after li::before, .case-col.result li::before{ background: var(--orange); }
.pullquote{
margin-top: 56px; padding: 36px 40px;
background: rgba(0,0,0,.35);
border: 1px solid rgba(255,255,255,.06);
border-left: 3px solid var(--orange);
border-radius: 8px;
position: relative;
}
.pullquote p{ font-size: 22px; line-height: 1.45; font-weight: 500; color: var(--text-on-dark); max-width: 56ch; }
.pullquote cite{
display:block; margin-top: 16px; font-style: normal;
font-family:'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--muted-d);
}
.case-foot{ margin-top: 32px; font-size: 13px; color: var(--muted-d); position: relative; } .case-stat{
margin-top: 56px;
padding: 36px 0 12px;
border-top: 1px solid rgba(255,255,255,.08);
border-bottom: 1px solid rgba(255,255,255,.08);
position: relative;
}
.case-stat__label{
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--muted-d); font-weight: 500;
margin-bottom: 18px;
}
.case-stat__label::before{
content: ""; width: 6px; height: 6px;
background: var(--orange);
box-shadow: 0 0 0 3px rgba(224,123,48,.15);
}
.case-stat__row{
display: flex; align-items: baseline; gap: clamp(20px, 4vw, 56px);
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.9;
flex-wrap: wrap;
}
.case-stat__from{
font-size: clamp(48px, 8vw, 96px);
color: var(--muted-d);
text-decoration: line-through;
text-decoration-color: rgba(141,143,150,.4);
text-decoration-thickness: 3px;
}
.case-stat__arrow{
color: var(--orange);
display: inline-flex; align-items: center;
flex: none;
transform: translateY(-0.1em);
}
.case-stat__to{
font-size: clamp(72px, 13vw, 168px);
color: var(--text-on-dark);
display: inline-flex; align-items: baseline; gap: 0.12em;
}
.case-stat__unit{
font-family: var(--font-editorial);
font-style: italic;
font-weight: 400;
color: var(--orange);
font-size: 0.42em;
letter-spacing: -0.01em;
}
.case-stat__sub{
display: inline-block;
margin-top: 14px;
font-family: var(--font-body);
font-size: 15px;
color: var(--text-on-dark-2);
letter-spacing: 0;
}
.case-stat__sub .ed{
font-size: 1.4em;
margin-right: 0.1em;
vertical-align: -0.1em;
}
@media (max-width: 700px){
.case-stat__row{ gap: 16px; }
.case-stat__arrow svg{ width: 48px; height: 18px; }
}
@media (max-width: 880px){
.case{ padding: 48px 24px; }
.case-cols{ grid-template-columns: 1fr; gap: 28px; }
} .guide-grid{ display:grid; grid-template-columns: 0.85fr 1fr; gap: 64px; align-items:center; }
.guide-photo{
aspect-ratio: 4/5;
border-radius: var(--r-xl);
background: radial-gradient(120% 80% at 50% 20%, #2a221c 0%, #15110d 60%, #0a0907 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 24px 50px rgba(0,0,0,.40),
0 56px 96px rgba(0,0,0,.30),
0 0 0 1px rgba(224,123,48,.08),
0 0 80px rgba(224,123,48,.10);
overflow: hidden;
position: relative;
}
.guide-photo img.jacob{
position:absolute; left:0; right:0; top:0; bottom:0;
width: 100%; height: 100%;
object-fit: cover; object-position: 50% 18%;
z-index: 2;
filter: drop-shadow(0 12px 24px rgba(0,0,0,.55));
}
.guide-photo .placeholder{ display:none; }
.guide-body h2{ font-size: clamp(28px, 3.8vw, 42px); font-weight: 600; color: var(--text-on-dark); }
.guide-body p{ margin-top: 18px; color: var(--text-on-dark-2); font-size: 17px; line-height: 1.65; max-width: 56ch; }
.auth-strip{
margin-top: 40px; display:grid; grid-template-columns: 1fr 1fr; gap: 18px;
padding-top: 32px; border-top: 1px solid var(--line);
}
.auth-item{ display:flex; gap: 14px; align-items:flex-start; }
.auth-item .ico{
flex: none; width: 32px; height: 32px;
display:grid; place-items:center; color: var(--orange);
background: var(--orange-soft);
border-radius: 8px;
border: 1px solid rgba(224,123,48,.20);
}
.auth-item p{ margin: 0; font-size: 14px; color: var(--text-on-dark-2); line-height: 1.5; }
@media (max-width: 880px){
.guide-grid{ grid-template-columns: 1fr; gap: 40px; }
.guide-photo{ max-width: 340px; margin: 0 auto; }
.auth-strip{ grid-template-columns: 1fr; }
} .tiers{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: stretch; }
.tiers--two{
grid-template-columns: 1.05fr 0.95fr;
gap: 28px;
max-width: 1080px;
margin: 0 auto;
}
@media (max-width: 880px){ .tiers--two{ grid-template-columns: 1fr; } }
.tier{
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 40px 32px;
display:flex; flex-direction: column;
position: relative;
transition: border-color .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.tier:hover{ border-color: rgba(224,123,48,.30); transform: translateY(-3px); }
.tier.featured{
background: linear-gradient(180deg, #1c1814 0%, #16120e 100%);
border: 1px solid rgba(224,123,48,.40);
box-shadow: 0 0 40px rgba(224,123,48,.10), 0 30px 60px rgba(0,0,0,.40);
}
.tier.featured h3, .tier.featured .price, .tier.featured .sub{ color: var(--text-on-dark); }
.tier .badge{
position:absolute; top: -14px; left: 32px;
background: linear-gradient(180deg, var(--orange-2), var(--orange) 60%, var(--orange-deep));
color: #fff;
font-family:'Geist Mono', monospace;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
padding: 7px 14px; border-radius: var(--r-pill);
font-weight: 600;
box-shadow: 0 8px 18px rgba(224,123,48,.40), inset 0 1px 0 rgba(255,255,255,.25);
}
.tier h3{ font-size: 20px; font-weight: 600; color: var(--text-on-dark); }
.tier .price{
margin-top: 14px;
font-size: 40px; font-weight: 600; letter-spacing: -0.028em; color: var(--text-on-dark);
}
.tier .price .unit{ font-size: 14px; color: var(--muted-d); font-weight: 500; margin-left: 6px; }
.tier .sub{ margin-top: 10px; font-size: 15px; color: var(--text-on-dark-2); }
.tier hr{ border: none; border-top: 1px solid var(--line); margin: 24px 0; }
.tier.featured hr{ border-top-color: rgba(224,123,48,.18); }
.feat-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.feat-list li{ font-size: 14.5px; color: var(--text-on-dark-2); line-height: 1.5; padding-left: 24px; position: relative; }
.feat-list li::before{ content: "✓"; position:absolute; left: 0; top: 0; color: var(--orange); font-weight: 700; }
.guarantee{
margin-top: 24px; padding: 16px 18px;
background: rgba(224,123,48,.08);
border: 1px solid rgba(224,123,48,.20);
border-radius: var(--r-md);
font-size: 13.5px; color: var(--text-on-dark-2); line-height: 1.55;
}
.guarantee strong{ color: var(--orange); }
.tier .btn{ margin-top: auto; align-self: stretch; justify-content: center; margin-top: 28px; }
.tier.featured .btn-primary{ background: linear-gradient(180deg, var(--orange-2), var(--orange) 60%, var(--orange-deep)); color: #fff; }
.tier.featured .btn-primary:hover{ filter: brightness(1.06); } .tier--founding .badge{
display: inline-flex; align-items: center; gap: 8px;
font-variant-numeric: tabular-nums;
transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}
.tier--founding .badge::before{
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25);
animation: foundingDot 2.4s ease-in-out infinite;
}
@keyframes foundingDot{
0%,100%{ box-shadow: 0 0 0 3px rgba(255,255,255,.20); }
50%    { box-shadow: 0 0 0 7px rgba(255,255,255,.0); }
}
.tier--founding .price-stamp{
position: absolute;
top: 88px; left: 32px;
transform: rotate(-7deg) scale(0.96);
font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: .18em;
color: #ff5f44;
padding: 6px 12px;
border: 3px solid #ff5f44; border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1.4);
line-height: 1;
} .tradeback{
margin-top: 22px;
padding: 18px 20px;
background: linear-gradient(180deg, rgba(243,239,231,.04), rgba(243,239,231,.02));
border: 1px dashed rgba(243,239,231,.16);
border-radius: var(--r-md);
}
.tradeback__lab{
font-family: var(--font-mono);
font-size: 10.5px; letter-spacing: .20em; text-transform: uppercase;
color: var(--muted-d); font-weight: 500;
display: block; margin-bottom: 12px;
}
.tradeback ul{
list-style: none; padding: 0; margin: 0; display: grid; gap: 8px;
}
.tradeback li{
font-size: 13.5px; line-height: 1.5;
color: var(--text-on-dark-2);
padding-left: 18px; position: relative;
}
.tradeback li::before{
content: "↺"; position: absolute; left: 0; top: 0;
color: var(--orange); font-weight: 700;
} .tiers[data-founding-spots="0"] .tier--founding{
opacity: 0.78;
filter: saturate(0.6);
}
.tiers[data-founding-spots="0"] .tier--founding .badge{
background: linear-gradient(180deg, #2a2a2e, #18181a);
color: var(--text-on-dark-2);
box-shadow: 0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.tiers[data-founding-spots="0"] .tier--founding .badge::before{
background: var(--muted-d); animation: none; box-shadow: none;
}
.tiers[data-founding-spots="0"] .tier--founding .price{
color: var(--muted-d);
text-decoration: line-through;
text-decoration-color: rgba(141,143,150,.5);
text-decoration-thickness: 2px;
}
.tiers[data-founding-spots="0"] .tier--founding .price-stamp{
opacity: 0.94;
transform: rotate(-7deg) scale(1);
}
.tiers[data-founding-spots="0"] .tier--founding .tradeback{ display: none; }
.tiers[data-founding-spots="0"] .tier--founding .btn-primary{
background: linear-gradient(180deg, #1c1a17 0%, #0a0a09 55%, #050505 100%);
color: var(--text-on-dark);
}
.tiers[data-founding-spots="0"] .tier--founding .btn-primary:hover{
background: linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 55%, var(--orange-deep) 100%);
color: #fff;
}
.tiers-foot{
margin-top: 40px; text-align:center;
color: var(--muted-d); font-size: 15px;
}
.tiers-foot a{ color: var(--orange); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
@media (max-width: 980px){ .tiers{ grid-template-columns: 1fr; } } .vision{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.vision .col h3{
font-family:'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--orange); font-weight: 600; margin-bottom: 24px;
}
.vision .checklist{ list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.vision .checklist li{ font-size: 17px; line-height: 1.5; color: var(--text-on-dark); padding-left: 32px; position:relative; }
.vision .checklist li::before{
content:""; position:absolute; left: 0; top: 6px; width: 18px; height: 18px;
border-radius: 50%;
background: var(--orange-soft);
box-shadow: inset 0 0 0 1px rgba(224,123,48,.40);
}
.vision .checklist li::after{
content:""; position:absolute; left: 5px; top: 11px; width: 8px; height: 5px;
border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
transform: rotate(-45deg);
}
.vision .col p{ color: var(--text-on-dark-2); font-size: 17px; line-height: 1.7; }
.vision .col p + p{ margin-top: 18px; }
@media (max-width: 880px){ .vision{ grid-template-columns: 1fr; gap: 40px; } } .final{
background:
radial-gradient(60% 80% at 50% 0%, rgba(224,123,48,.22), transparent 65%),
linear-gradient(180deg, #1a1714 0%, #0a0907 100%);
border: 1px solid rgba(224,123,48,.20);
color: var(--text-on-dark);
border-radius: var(--r-xl);
padding: 96px 56px; text-align: center;
position: relative; overflow: hidden;
}
.final::after{
content:""; position:absolute; left:-100px; bottom:-100px;
width: 400px; height: 400px; border-radius: 50%;
background: radial-gradient(circle, rgba(224,123,48,.28), transparent 70%);
pointer-events:none;
}
.final h2{
color: var(--text-on-dark);
font-size: clamp(40px, 5.4vw, 64px); font-weight: 600;
max-width: 22ch; margin: 14px auto 0;
position: relative;
}
.final p{ color: var(--text-on-dark-2); margin: 22px auto 0; max-width: 58ch; font-size: 17px; line-height: 1.6; position: relative; }
.final .ctas{ margin-top: 42px; display:flex; justify-content:center; gap: 14px; flex-wrap: wrap; position: relative; }
.final .btn-primary{
background: linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 55%, var(--orange-deep) 100%);
color: #fff;
}
.final .btn-primary:hover{ filter: brightness(1.06); }
.final .alt{ margin-top: 28px; font-size: 14px; color: var(--muted-d); position: relative; }
.final .alt a{ color: var(--orange); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.final .eyebrow{ color: var(--orange); }
@media (max-width: 700px){ .final{ padding: 64px 24px; } } footer{ padding: 72px 0 36px; border-top: 1px solid var(--line); margin-top: 72px; }
.foot-row{ display:flex; justify-content:space-between; align-items:flex-end; gap: 24px; flex-wrap: wrap; }
.foot-links{ display:flex; gap: 24px; flex-wrap: wrap; }
.foot-links a{ color: var(--muted-d); text-decoration: none; font-size: 14px; transition: color .25s ease; }
.foot-links a:hover{ color: var(--orange); }
.foot-row .brand-mark{
background: url(//j1systems.pro/wp-content/themes/j1systems-v2/assets/j1-logo-orange.png) no-repeat center / contain;
} [data-reveal]{
opacity: 0;
transform: translateY(22px);
transition:
opacity .9s cubic-bezier(.22,.61,.36,1),
transform 1s cubic-bezier(.22,.61,.36,1);
transition-delay: calc(var(--i,0) * 80ms);
will-change: opacity, transform;
}
[data-reveal].in{ opacity: 1; transform: translateY(0); }
[data-reveal-x="left"]{ transform: translateX(-26px); }
[data-reveal-x="left"].in{ transform: translateX(0); }
[data-reveal-x="right"]{ transform: translateX(26px); }
[data-reveal-x="right"].in{ transform: translateX(0); }
.hero-photo{ animation: none; }
@media (prefers-reduced-motion: reduce){
*{ transition: none !important; animation: none !important; }
[data-reveal]{ opacity:1 !important; transform: none !important; }
html{ scroll-behavior: auto; }
} @media (max-width: 760px){
body{
background-attachment: scroll;
} .hero-bg::before{
filter: none;
animation: none;
} .final::after{
filter: none;
opacity: 0.12;
} .marquee-track{
animation: none;
}
}
.ico-stroke{ stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .marquee{
position: relative;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
overflow: hidden;
padding: 22px 0;
margin: 0;
}
.marquee-track{
display: flex;
width: max-content;
animation: marqueeScroll 38s linear infinite;
will-change: transform;
}
.marquee-item{
display: inline-flex; align-items: center; gap: 28px;
padding: 0 28px;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(22px, 2.6vw, 32px);
letter-spacing: -0.02em;
color: var(--text-on-dark);
white-space: nowrap;
}
.marquee-item .sep{
width: 8px; height: 8px;
background: var(--orange);
transform: rotate(45deg);
flex: none;
}
.marquee-item .ed-i{
font-family: var(--font-editorial);
font-style: italic;
font-weight: 400;
color: var(--orange);
}
@keyframes marqueeScroll{
from{ transform: translateX(0); }
to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
.marquee-track{ animation: none; }
}  .hero-bg{
position: absolute; inset: 0; z-index: 0;
pointer-events: none; overflow: hidden;
}
.hero-bg::before{
content:""; position: absolute; inset: -10%; background:
radial-gradient(50% 40% at 80% 30%, rgba(224,123,48,.16), transparent 60%),
radial-gradient(45% 35% at 20% 80%, rgba(224,123,48,.08), transparent 60%);
animation: heroDrift 22s ease-in-out infinite;
will-change: transform;
}
@keyframes heroDrift{
0%,100%{ transform: translate(0,0); }
50%{ transform: translate(40px,-30px); }
} .stake, .step, .outcome, .tier, .case-col{
position: relative; isolation: isolate;
transition: box-shadow 250ms ease, border-color .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.stake, .step, .outcome, .case-col{
box-shadow: 0 0 32px rgba(224,123,48,0.05);
}
.stake:hover, .step:hover, .outcome:hover, .case-col:hover{
box-shadow: 0 0 40px rgba(224,123,48,0.18);
} .tier:hover{ box-shadow: 0 0 40px rgba(224,123,48,0.18); } @media (max-width: 767px){
.stake, .step, .outcome, .tier, .case-col{ box-shadow: none; }
.stake:hover, .step:hover, .outcome:hover, .tier:hover, .case-col:hover{ transform: none; box-shadow: none; }
} @media (prefers-reduced-motion: reduce){
.hero-bg::before{ animation: none; }
}  .chapter-rail{
position: fixed;
top: 50%; right: 28px;
transform: translateY(-50%);
z-index: 40;
display: flex; flex-direction: column; align-items: center;
pointer-events: none;
opacity: 0;
transition: opacity .6s ease; }
.chapter-rail.is-ready{ opacity: 1; } .chapter-rail::before{
content: "";
position: absolute;
left: 50%; top: 16px; bottom: 16px;
width: 1px;
background: rgba(243,239,231,.10);
transform: translateX(-0.5px);
z-index: 0;
} .chapter-rail::after{
content: "";
position: absolute;
left: 50%; top: 16px;
width: 1px;
height: var(--fill, 0%);
max-height: calc(100% - 32px);
background: linear-gradient(180deg, var(--orange), var(--orange-deep));
transform: translateX(-0.5px);
transition: height .5s cubic-bezier(.22,.61,.36,1);
box-shadow: 0 0 8px rgba(224,123,48,.4);
z-index: 0;
}
.chapter-rail a{
pointer-events: auto;
text-decoration: none;
position: relative;
z-index: 1;
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
margin: 14px 0;
border-radius: 50%;
background: var(--bg);
border: 1px solid rgba(243,239,231,.22);
font-family: var(--font-mono);
font-size: 11px; font-weight: 600;
color: rgba(243,239,231,.45);
transition: border-color .35s ease, color .35s ease, background .35s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.chapter-rail a:first-of-type{ margin-top: 0; }
.chapter-rail a:last-of-type{ margin-bottom: 0; } .chapter-rail a .name{
position: absolute;
right: calc(100% + 14px);
top: 50%; transform: translateY(-50%);
font-family: var(--font-mono);
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--text-on-dark);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
text-shadow: 0 1px 0 rgba(0,0,0,.4);
} .chapter-rail a .name::after{
content: "";
position: absolute;
left: 100%; top: 50%;
width: 8px; height: 1px;
margin-left: 4px;
background: var(--orange);
transform: translateY(-0.5px);
} .chapter-rail a.is-passed{
border-color: var(--orange);
color: var(--orange-2);
} .chapter-rail a.is-current{
background: var(--orange);
border-color: var(--orange);
color: #161108;
transform: scale(1.16);
box-shadow: 0 0 0 4px rgba(224,123,48,.16), 0 0 18px rgba(224,123,48,.45);
}
.chapter-rail a.is-current .name,
.chapter-rail a:hover .name{
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.chapter-rail a:hover:not(.is-current){
border-color: var(--orange);
color: var(--orange-2);
}
@media (max-width: 980px){ .chapter-rail{ display: none; } } .narr-open{
padding: 48px 0 24px;
position: relative;
text-align: center;
}
.narr-open .wrap{ max-width: 880px; }
.narr-open__lede{
font-family: var(--font-display);
font-style: normal;
font-weight: 800;
text-transform: uppercase;
color: var(--text-on-dark);
font-size: clamp(38px, 5.6vw, 72px);
line-height: 1.0;
letter-spacing: -0.005em;
max-width: 22ch;
margin: 0 auto;
text-wrap: balance;
}
.narr-open__lede em{
font-style: normal;
color: var(--orange);
font-family: var(--font-display);
font-weight: 900;
} .compare{
margin-top: 44px;
background: #1c1e22;
background-image: none;
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-lg, 16px);
overflow: hidden;
position: relative;
z-index: 1;
isolation: isolate;
box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
}
.compare *{ background-image: none; } .compare::before{
content: "";
position: absolute; inset: 0;
background: #1c1e22;
z-index: -1;
border-radius: inherit;
}
.compare__head,
.compare__row,
.compare__total{
display: grid;
grid-template-columns: 1.4fr 1.5fr 1fr 0.85fr;
align-items: center;
padding: 22px 32px;
border-top: 1px solid rgba(255,255,255,.05);
background: #1c1e22;
}
.compare__head{
border-top: 0;
background: #14110e;
font-family: var(--font-mono);
font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
color: rgba(255,255,255,.75);
padding: 18px 32px;
}
.compare__row{
transition: background .25s ease;
}
.compare__row:hover{ background: #23262b; }
.compare__col--feat{
font-family: var(--font-subhead);
font-weight: 700;
color: #ffffff;
font-size: 18px;
letter-spacing: -0.005em;
}
.compare__col--repl{
color: rgba(243,239,231,.85);
font-size: 16px;
} .brand-chips{
display: inline-flex; align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.brand-logo{
position: relative;
display: inline-grid; place-items: center;
width: 34px; height: 34px;
border-radius: 50%;
background: #ffffff;
box-shadow:
0 2px 4px rgba(0,0,0,.30),
0 6px 12px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -1px 0 rgba(0,0,0,.08);
user-select: none;
transition: transform .2s ease, box-shadow .2s ease;
flex: 0 0 auto;
overflow: hidden;
}
.brand-logo:hover{
transform: translateY(-2px);
box-shadow:
0 4px 8px rgba(0,0,0,.35),
0 10px 20px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.45);
} .brand-logo img{
width: 22px; height: 22px;
object-fit: contain;
object-position: center;
display: block;
} .brand-logo[data-mono]::before{
content: attr(data-mono);
position: absolute; inset: 0;
display: none;
place-items: center;
font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
font-weight: 800;
font-size: 13px;
letter-spacing: -0.02em;
color: var(--mono-color, #1a1f2e);
z-index: 0;
}
.brand-logo.is-fallback[data-mono]::before{ display: grid; }
.brand-logo img{ position: relative; z-index: 1; }
.brand-logo.is-fallback img{ display: none; } .brand-logo[title]:hover::after{
content: attr(title);
position: absolute;
bottom: calc(100% + 8px);
left: 50%; transform: translateX(-50%);
background: #0c0d0f;
color: #f3efe7;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .04em;
padding: 5px 9px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,.10);
white-space: nowrap;
pointer-events: none;
z-index: 5;
}
.compare__col--cost{
font-family: var(--font-mono);
font-size: 15px;
color: rgba(243,239,231,.78);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.compare__col--j1{ text-align: right; }
.compare__check{
display: inline-grid; place-items: center;
width: 34px; height: 34px; border-radius: 10px;
background: linear-gradient(180deg, var(--orange-2), var(--orange) 60%, var(--orange-deep));
border: 1px solid rgba(224,123,48,.50);
color: #fff;
font-weight: 800; font-size: 16px;
box-shadow: 0 6px 14px rgba(224,123,48,.30), inset 0 1px 0 rgba(255,255,255,.20);
}
.compare__total{
background: linear-gradient(180deg, #1c1814 0%, #16120e 100%);
border-top: 1px solid rgba(224,123,48,.30);
padding: 28px 32px;
}
.compare__total .compare__col--feat{ font-size: 19px; }
.compare__strike{
font-family: var(--font-mono);
color: var(--text-on-dark-2);
text-decoration: line-through;
text-decoration-color: rgba(224,80,60,.85);
text-decoration-thickness: 2px;
font-size: 17px;
}
.compare__price{
font-family: var(--font-display);
font-weight: 800;
color: var(--orange);
font-size: 32px;
letter-spacing: -0.02em;
text-shadow: 0 0 24px rgba(224,123,48,.35);
white-space: nowrap;
}
.compare__price small{
font-family: var(--font-mono);
font-weight: 500;
font-size: 11px;
color: var(--muted-d);
margin-left: 4px;
letter-spacing: 0;
text-shadow: none;
}
@media (max-width: 880px){
.compare__head{ display: none; }
.compare__row, .compare__total{
grid-template-columns: 1fr auto;
grid-template-areas:
"feat j1"
"repl repl"
"cost cost";
gap: 6px 12px;
padding: 18px 18px;
}
.compare__col--feat{ grid-area: feat; }
.compare__col--repl{ grid-area: repl; font-size: 13px; }
.compare__col--cost{ grid-area: cost; font-size: 12px; }
.compare__col--j1{ grid-area: j1; }
}
.compare-summary{
margin-top: 48px;
text-align: center;
}
.compare-summary__row{
display: inline-flex;
align-items: stretch;
gap: 18px;
flex-wrap: wrap;
justify-content: center;
}
.compare-summary__stat{
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 26px 30px;
background: #23252a;
background-image: none;
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
min-width: 200px;
position: relative;
z-index: 1;
box-shadow: 0 20px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.compare-summary__stat--big{
background: linear-gradient(180deg, #1c1814 0%, #16120e 100%);
border: 1px solid rgba(224,123,48,.40);
box-shadow: 0 0 40px rgba(224,123,48,.10);
}
.compare-summary__num{
font-family: var(--font-display);
font-weight: 800;
font-size: 30px; letter-spacing: -0.02em;
color: var(--text-on-dark);
line-height: 1;
}
.compare-summary__num--big{
color: var(--orange);
font-size: 40px;
text-shadow: 0 0 28px rgba(224,123,48,.40);
}
.compare-summary__num small{
font-family: var(--font-mono);
font-weight: 500;
font-size: 12px;
color: var(--muted-d);
margin-left: 2px;
text-shadow: none;
}
.compare-summary__lab{
margin-top: 8px;
font-family: var(--font-mono);
font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted-d);
}
.compare-summary__plus,
.compare-summary__eq{
align-self: center;
font-family: var(--font-display);
font-weight: 700; font-size: 24px;
color: var(--muted-d);
padding: 0 4px;
}
.compare-summary__foot{
margin-top: 28px;
color: var(--muted-d);
font-size: 13px;
max-width: 60ch;
margin-left: auto; margin-right: auto;
}
@media (max-width: 760px){
.compare-summary__row{ flex-direction: column; gap: 10px; }
.compare-summary__plus, .compare-summary__eq{ font-size: 20px; }
.compare-summary__stat{ width: 100%; }
} .dash-band{ padding-top: 80px; padding-bottom: 80px; }
.dash-grid{
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 60px;
align-items: center;
}
.dash-phone-wrap{
perspective: 900px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
}
.dash-grid .dash-copy{ order: 2; }
.dash-grid .dash-phone{ order: 1; }
@media (max-width: 980px){
.dash-grid{ grid-template-columns: 1fr; gap: 48px; }
.dash-phone-wrap{ perspective: none; }
.dash-grid .dash-copy{ order: 2; }
.dash-grid .dash-phone{ order: 1; }
.dash-phone{ transform: none !important; }
}
.dash-copy h2{
font-size: clamp(40px, 5.2vw, 72px);
line-height: 0.98;
letter-spacing: -0.035em;
text-transform: uppercase;
margin-top: 18px;
}
.dash-copy .ed{ color: var(--orange); }
.dash-copy .kicker{
margin-top: 22px;
color: var(--text-on-dark-2);
font-size: 17px; line-height: 1.55;
max-width: 48ch;
}
.dash-list{
list-style: none; padding: 0; margin: 32px 0 0;
display: grid; gap: 16px;
}
.dash-list li{
display: grid;
grid-template-columns: 26px 1fr;
gap: 14px; align-items: start;
color: var(--text-on-dark-2);
font-size: 15.5px; line-height: 1.5;
}
.dash-list li::before{
content: "";
width: 18px; height: 18px;
margin-top: 3px;
border-radius: 6px;
background: var(--orange-soft);
border: 1px solid rgba(224,123,48,.40);
background-image: linear-gradient(135deg, transparent 35%, var(--orange) 35%, var(--orange) 45%, transparent 45%, transparent 55%, var(--orange) 55%, var(--orange) 65%, transparent 65%);
background-size: 8px 8px;
background-repeat: no-repeat;
background-position: 4px 4px;
}
.dash-list strong{ color: var(--text-on-dark); font-weight: 600; }
.dash-cta{ margin-top: 36px; display: inline-flex; } .dash-phone{
position: relative;
width: 100%; max-width: 360px;
aspect-ratio: 9 / 19.5;
margin: 0 auto;
border-radius: 44px;
padding: 12px;
background:
linear-gradient(135deg, #3a3a3e 0%, #1a1a1c 50%, #0e0e10 100%);
--tilt-y: 0deg;
--tilt-x: 0deg;
--tilt-z: 0deg;
--mouse-y: 0deg;
--mouse-x: 0deg;
transform: rotateY(calc(var(--tilt-y) + var(--mouse-y))) rotateX(calc(var(--tilt-x) + var(--mouse-x))) rotateZ(var(--tilt-z));
transform-style: preserve-3d;
transform-origin: 50% 50%;
transition: transform 600ms cubic-bezier(.22,.61,.36,1);
will-change: transform;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
inset 0 2px 0 rgba(255,255,255,.14),
inset 0 -2px 0 rgba(0,0,0,.5),
0 30px 50px -10px rgba(0,0,0,.5),
0 60px 80px -30px rgba(0,0,0,.4);
}
.dash-phone.is-tracking{
transition: transform 80ms linear;
}
.dash-phone::before{ content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(105deg, transparent 0%, transparent 55%, rgba(255,255,255,.08) 72%, rgba(255,255,255,.18) 80%, rgba(255,255,255,.05) 88%, transparent 100%);
pointer-events: none;
}
.dash-phone::after{ content: "";
position: absolute;
top: 12px; left: 12px; right: 12px; bottom: 12px;
border-radius: 32px;
background: linear-gradient(115deg, transparent 0%, transparent 45%, rgba(255,255,255,.04) 55%, transparent 65%);
pointer-events: none;
z-index: 5;
}
.dash-phone__screen{
position: relative;
width: 100%; height: 100%;
border-radius: 32px;
background: linear-gradient(180deg, #0e0e10 0%, #16120e 100%);
overflow: hidden;
padding: 18px 14px 14px;
display: flex; flex-direction: column;
gap: 10px;
}
.dash-phone__notch{
position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
width: 90px; height: 26px; border-radius: 14px;
background: #000;
}
.dash-phone__statusbar{
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-mono);
font-size: 11px; font-weight: 600;
color: var(--text-on-dark);
padding: 0 6px;
margin-bottom: 6px;
margin-top: 2px;
}
.dash-phone__statusbar .icons{ display: inline-flex; gap: 4px; align-items: center; }
.dash-phone__statusbar .icons svg{ width: 12px; height: 12px; }
.dash-phone__head{
padding: 8px 8px 4px;
}
.dash-phone__brand{
font-family: var(--font-subhead);
font-weight: 600;
color: var(--text-on-dark);
font-size: 13px;
letter-spacing: -0.01em;
}
.dash-phone__sub{
font-family: var(--font-mono);
font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted-d);
margin-top: 2px;
}
.dash-phone__kpis{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.dash-kpi{
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
padding: 12px 12px 10px;
position: relative;
}
.dash-kpi__lab{
font-family: var(--font-mono);
font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted-d);
}
.dash-kpi__val{
font-family: var(--font-display);
font-weight: 800;
font-size: 24px; letter-spacing: -0.02em;
color: var(--text-on-dark);
line-height: 1.1;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.dash-kpi__val--orange{
color: var(--orange);
text-shadow: 0 0 16px rgba(224,123,48,.40);
}
.dash-kpi__delta{
font-family: var(--font-mono);
font-size: 9.5px;
color: #6fbd8f;
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.dash-kpi__icon{
position: absolute; top: 12px; right: 12px;
width: 22px; height: 22px;
border-radius: 6px;
background: var(--orange-soft);
color: var(--orange);
display: grid; place-items: center;
}
.dash-kpi__icon svg{ width: 12px; height: 12px; }
.dash-phone__list{
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
border-radius: 12px;
padding: 10px 12px;
display: flex; flex-direction: column; gap: 8px;
flex: 1;
}
.dash-phone__listhead{
display: flex; justify-content: space-between;
font-family: var(--font-mono);
font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted-d);
padding-bottom: 6px;
border-bottom: 1px dashed rgba(255,255,255,.08);
}
.dash-job{
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 10px;
font-size: 11.5px;
color: var(--text-on-dark);
}
.dash-job small{
grid-column: 1 / -1;
font-family: var(--font-mono);
font-size: 9.5px;
color: var(--muted-d);
}
.dash-job__price{
color: var(--orange);
font-weight: 600;
font-variant-numeric: tabular-nums;
font-size: 12px;
}
.dash-phone__dock{
display: flex; justify-content: space-around;
padding: 6px 4px 2px;
border-top: 1px solid rgba(255,255,255,.06);
margin-top: 4px;
}
.dash-phone__dock span{
width: 32px; height: 32px;
display: grid; place-items: center;
border-radius: 9px;
background: rgba(224,123,48,.10);
color: var(--orange);
}
.dash-phone__dock span svg{ width: 14px; height: 14px; } .testi-band{ padding-top: 80px; padding-bottom: 80px; }
.testi-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
margin-top: 64px;
align-items: start;
}
.testi-grid > .testi:nth-child(1){ translate: 0 28px; }
.testi-grid > .testi:nth-child(2){ translate: 0 -12px; }
.testi-grid > .testi:nth-child(3){ translate: 0 40px; }
.testi-grid > .testi:nth-child(4){ translate: 0 0; }
@media (max-width: 1100px){
.testi-grid{ grid-template-columns: repeat(2, 1fr); }
.testi-grid > .testi:nth-child(1){ translate: 0 20px; }
.testi-grid > .testi:nth-child(2){ translate: 0 0; }
.testi-grid > .testi:nth-child(3){ translate: 0 0; }
.testi-grid > .testi:nth-child(4){ translate: 0 20px; }
}
@media (max-width: 560px){
.testi-grid{ grid-template-columns: 1fr; }
.testi-grid > .testi{ translate: 0 !important; }
}
.testi{
position: relative;
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: 16px;
padding: 28px 24px 22px;
display: flex; flex-direction: column;
transition: border-color .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.testi:hover{ border-color: rgba(224,123,48,.32); transform: translateY(-3px); }
.testi--featured{
background: linear-gradient(180deg, #1c1814 0%, #16120e 100%);
border: 1px solid rgba(224,123,48,.34);
box-shadow: 0 0 30px rgba(224,123,48,.08);
}
.testi__mark{
font-family: var(--font-display);
font-size: 56px; line-height: 0.6;
color: var(--orange);
opacity: 0.85;
margin-bottom: 4px;
letter-spacing: -0.06em;
}
.testi__quote{
font-family: var(--font-subhead);
font-size: 15px; line-height: 1.55;
color: var(--text-on-dark);
margin: 6px 0 18px;
text-wrap: pretty;
}
.testi__stars{
display: inline-flex; gap: 2px;
color: var(--orange);
margin-bottom: 16px;
}
.testi__stars svg{ width: 13px; height: 13px; }
.testi__who{
margin-top: auto;
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px; align-items: center;
padding-top: 16px;
border-top: 1px dashed var(--line);
}
.testi__avatar{
width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(135deg, var(--orange-2), var(--orange-deep));
display: grid; place-items: center;
color: #fff;
font-family: var(--font-display); font-weight: 800;
font-size: 15px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.testi__name{
font-family: var(--font-subhead);
font-weight: 600;
font-size: 13.5px;
color: var(--text-on-dark);
line-height: 1.2;
}
.testi__role{
font-family: var(--font-mono);
font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted-d);
margin-top: 3px;
}
.testi-foot{
margin-top: 32px;
text-align: center;
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted-d);
}.score-wrap { max-width: 760px; margin: 0 auto; padding: 0 28px; }
.score-shell { padding: 72px 0 96px; }
.score-landing { padding: 80px 0 64px; }
.score-card {
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 48px 48px 40px;
position: relative;
}
@media (max-width: 700px) {
.score-card { padding: 32px 24px; }
} .score-progress { margin-bottom: 32px; }
.progress-meta {
display: flex; justify-content: space-between;
font-family: var(--font-mono);
font-size: 12px; color: var(--muted-d);
letter-spacing: 0.12em; text-transform: uppercase;
margin-bottom: 10px;
}
.progress-bar {
height: 4px;
background: rgba(255, 255, 255, .08);
border-radius: 999px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--orange);
border-radius: 999px;
width: 0%;
transition: width .5s cubic-bezier(.22, .61, .36, 1);
box-shadow: 0 0 12px rgba(224, 123, 48, .5);
} .score-q {
font-family: var(--font-subhead);
font-size: clamp(24px, 3.2vw, 32px);
font-weight: 600;
color: var(--text-on-dark);
margin-bottom: 28px;
line-height: 1.15;
letter-spacing: -0.012em;
} .options { display: grid; gap: 12px; }
.opt {
text-align: left;
cursor: pointer;
padding: 18px 22px;
background: var(--bg-2);
border: 1.5px solid var(--line);
border-radius: var(--r-md);
color: var(--text-on-dark);
font-family: inherit;
font-size: 16px;
font-weight: 500;
display: flex;
align-items: center;
gap: 14px;
transition: border-color .25s ease, background .25s ease;
}
.opt:hover {
border-color: var(--orange);
background: rgba(224, 123, 48, .04);
}
.opt.selected {
border-color: var(--orange);
background: rgba(224, 123, 48, .08);
}
.opt .letter {
display: inline-grid;
place-items: center;
width: 28px; height: 28px;
border-radius: 8px;
background: rgba(255, 255, 255, .06);
color: var(--muted-d);
font-family: var(--font-mono);
font-size: 12px;
flex: none;
transition: background .25s ease, color .25s ease;
}
.opt.selected .letter,
.opt:hover .letter {
background: var(--orange);
color: #fff;
} .nav-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 32px;
}
.back-btn {
background: none;
border: none;
color: var(--muted-d);
font-size: 14px;
cursor: pointer;
font-family: inherit;
padding: 8px 0;
}
.back-btn:hover { color: var(--text-on-dark); }
.back-btn:disabled { opacity: 0; pointer-events: none; }
.hint {
font-size: 13px;
color: var(--muted-d);
font-family: var(--font-mono);
} .field {
display: grid;
gap: 8px;
margin-bottom: 18px;
}
.field label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted-d);
}
.field input,
.field select,
.field textarea {
background: var(--bg-2);
border: 1.5px solid var(--line);
border-radius: var(--r-md);
padding: 14px 18px;
color: var(--text-on-dark);
font-family: inherit;
font-size: 16px;
transition: border-color .25s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--orange);
}
.field select option {
background: var(--bg-2);
color: var(--text-on-dark);
} .score-result-num {
font-family: var(--font-display);
font-size: clamp(72px, 10vw, 120px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: var(--text-on-dark);
text-align: center;
}
.score-result-num .of {
font-size: 0.32em;
color: var(--muted-d);
font-weight: 500;
}
.score-result-label {
margin-top: 8px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--orange);
text-align: center;
}
.score-headline {
font-family: var(--font-subhead);
font-size: clamp(24px, 3.4vw, 32px);
font-weight: 600;
text-align: center;
max-width: 22ch;
margin: 32px auto 28px;
color: var(--text-on-dark);
letter-spacing: -0.012em;
line-height: 1.18;
}
.leak-list-r {
list-style: none;
padding: 0;
margin: 0 0 36px;
display: grid;
gap: 14px;
}
.leak-item {
padding: 20px 22px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--r-md);
display: grid;
grid-template-columns: 32px 1fr;
gap: 16px;
align-items: start;
}
.leak-item .n {
font-family: var(--font-mono);
font-size: 13px;
color: var(--orange);
}
.leak-item h4 {
font-family: var(--font-subhead);
font-size: 16px;
font-weight: 600;
margin-bottom: 6px;
color: var(--text-on-dark);
letter-spacing: -0.005em;
}
.leak-item p {
font-size: 14.5px;
color: var(--text-on-dark-2);
line-height: 1.5;
} .score-next {
background: linear-gradient(180deg, #1c1814 0%, #0d0b09 100%);
border: 1px solid rgba(224, 123, 48, .25);
padding: 32px;
border-radius: var(--r-lg);
margin-top: 24px;
}
.score-next h3 {
font-family: var(--font-subhead);
font-size: 22px;
font-weight: 600;
color: var(--text-on-dark);
margin-bottom: 10px;
letter-spacing: -0.012em;
}
.score-next p {
color: var(--text-on-dark-2);
font-size: 15px;
line-height: 1.55;
margin-bottom: 24px;
} .hidden { display: none !important; } .score-landing .eyebrow {
justify-content: center;
} #score-phone {
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
} .consent {
margin: 18px 0 6px;
padding: 16px 18px;
background: rgba(255, 255, 255, .025);
border: 1px solid var(--line);
border-radius: var(--r-md, 12px);
}
.consent-row {
display: grid;
grid-template-columns: 22px 1fr;
gap: 12px;
align-items: flex-start;
cursor: pointer;
margin: 0;
}
.consent-row input[type="checkbox"] {
margin: 3px 0 0;
width: 18px;
height: 18px;
accent-color: var(--orange);
cursor: pointer;
flex-shrink: 0;
}
.consent-text {
font-size: 13px;
line-height: 1.55;
color: var(--text-on-dark-2);
}
.consent-links {
margin: 10px 0 0;
padding-left: 34px;
font-size: 12px;
color: var(--muted-d);
}
.consent-links a {
color: var(--orange);
text-decoration: none;
}
.consent-links a:hover { text-decoration: underline; } #score-submit-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
#score-submit-btn.is-loading {
opacity: 0.7;
pointer-events: none;
}
#score-submit-btn.is-loading .arr svg { display: none; }
#score-submit-btn.is-loading::after {
content: "";
display: inline-block;
width: 14px; height: 14px;
margin-left: 6px;
border-radius: 50%;
border: 2px solid currentColor;
border-top-color: transparent;
animation: j1s-spin 0.7s linear infinite;
}
@keyframes j1s-spin { to { transform: rotate(360deg); } }
.score-form-error {
margin-top: 14px;
padding: 10px 14px;
background: rgba(224, 65, 65, .12);
border: 1px solid rgba(224, 65, 65, .35);
border-radius: var(--r-md, 12px);
color: #ffb4b4;
font-size: 13px;
line-height: 1.5;
text-align: center;
}