/* ============================================================
* PRINTDECK — Marketing site stylesheet
* Drop-in CSS. No build step required.
*
* USAGE
* 1. Add Syne + Syne Mono to your HTML :
*
*
*
*
* 2. Link this file:
*
*
* 3. Mount the scroll-reveal observer (see printdeck.js or copy the
* snippet at the bottom of this file).
*
* SECTIONS
* 01 · Tokens
* 02 · Base
* 03 · Layout shell
* 04 · Nav
* 05 · Wordmark / glyph
* 06 · Hero + animated plate stack
* 07 · Stat strip
* 08 · Section scaffold
* 09 · Phone frame component
* 10 · Feature blocks
* 11 · Wide screenshot panel
* 12 · How-it-works steps
* 13 · Honesty / quote card
* 14 · CTA section
* 15 · Footer
* 16 · Buttons
* 17 · Scroll reveal + reduced motion
* 18 · Responsive
* ============================================================ */
/* ============================================================
PRINTDECK — TOKENS
============================================================ */
:root{
--bg: #080d1a;
--bg-elev: #0c1326;
--card: #111b33;
--card-border: #1a2644;
--text: #e7ecf7;
--text-dim: #93a0bf;
--text-mute: #5a6789;
--cyan: #4DD6FF;
--cyan-soft: #7df0ff;
--green: #3EE07A;
--royal: #2E6FF0;
--radius: 16px;
--frame: #0d1326;
--ease-out: cubic-bezier(.22,.61,.36,1);
--ease-pop: cubic-bezier(.18,.84,.32,1.06);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:"Syne",ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
body{
background:
radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
radial-gradient(1px 1px at 28% 42%, rgba(77,214,255,.45), transparent 60%),
radial-gradient(1px 1px at 64% 12%, rgba(255,255,255,.35), transparent 60%),
radial-gradient(1px 1px at 82% 36%, rgba(255,255,255,.5), transparent 60%),
radial-gradient(1px 1px at 8% 72%, rgba(77,214,255,.35), transparent 60%),
radial-gradient(1px 1px at 44% 86%, rgba(255,255,255,.4), transparent 60%),
radial-gradient(1px 1px at 92% 78%, rgba(77,214,255,.3), transparent 60%),
radial-gradient(1px 1px at 22% 96%, rgba(255,255,255,.3), transparent 60%),
radial-gradient(1400px 280px at 50% 100%, rgba(77,214,255,.10), transparent 70%),
radial-gradient(1200px 700px at 12% -10%, rgba(46,111,240,.10), transparent 60%),
radial-gradient(900px 600px at 100% 30%, rgba(77,214,255,.05), transparent 65%),
var(--bg);
background-attachment: fixed;
overflow-x:hidden;
}
.mono{ font-family:"Syne Mono",ui-monospace,monospace; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.shell{ max-width:1240px; margin:0 auto; padding:0 32px; }
/* ============================================================
NAV
============================================================ */
.pd-nav{
position:sticky; top:0; z-index:50;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
background: rgba(8,13,26,.62);
border-bottom: 1px solid rgba(255,255,255,.04);
}
.pd-nav__inner{
display:flex; align-items:center; justify-content:space-between;
height: 64px;
}
.pd-nav__links{
display:flex; gap: 28px; align-items:center;
font-size: 14px; color: var(--text-dim);
}
.pd-nav__links a{ transition: color .25s; }
.pd-nav__links a:hover{ color: var(--text); }
.pd-nav__cta{
display:inline-flex; align-items:center; gap:8px;
padding: 10px 16px;
font-size: 14px; font-weight: 600;
background: var(--cyan); color: #051018;
border-radius: 999px;
transition: transform .2s var(--ease-out), box-shadow .25s;
box-shadow: 0 6px 18px -6px rgba(77,214,255,.6);
}
.pd-nav__cta:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(77,214,255,.8); }
.pd-nav__cta::after{ content:"→"; }
/* ============================================================
WORDMARK + GLYPH
============================================================ */
.pd-mark{ display:inline-flex; align-items:center; gap:12px; }
.pd-mark__glyph{
width: 36px; height: 36px;
border-radius: 9px;
overflow: hidden;
flex-shrink: 0;
box-shadow:
0 6px 16px rgba(0,0,0,.5),
0 0 18px -4px rgba(77,214,255,.35);
}
.pd-mark__glyph img{ display:block; width:36px; height:36px; border-radius:0; }
.pd-mark__word{
font-family:"Syne", sans-serif;
font-weight:700;
font-size: 20px;
letter-spacing: -.01em;
}
.pd-mark__word .l{ color: #d6e4ff; }
.pd-mark__word .r{ color: var(--cyan); }
/* ============================================================
HERO
============================================================ */
.hero{
position:relative;
padding: 120px 0 100px;
overflow:hidden;
}
.hero::before{
/* horizon glow */
content:"";
position:absolute; left:50%; bottom: 18%;
width: 1100px; height: 220px;
transform: translateX(-50%);
background: radial-gradient(50% 50% at 50% 50%, rgba(77,214,255,.22), transparent 70%);
filter: blur(20px);
z-index:0;
pointer-events:none;
}
.hero__inner{
position:relative; z-index:1;
display:grid;
grid-template-columns: 1.05fr 1fr;
gap: 64px;
align-items:center;
}
.hero__eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-family:"Syne Mono", monospace;
text-transform:uppercase;
letter-spacing:.18em;
font-size: 11px;
color: var(--cyan);
padding: 6px 12px;
border:1px solid rgba(77,214,255,.22);
background: linear-gradient(90deg, rgba(77,214,255,.08), rgba(46,111,240,.06));
border-radius: 999px;
}
.hero__eyebrow::before{
content:""; width:6px; height:6px; border-radius:50%;
background: var(--green);
box-shadow: 0 0 10px var(--green);
animation: pd-pulse 2s ease-in-out infinite;
}
@keyframes pd-pulse{
0%,100%{ opacity:1; transform:scale(1); }
50% { opacity:.55; transform:scale(.85); }
}
.hero h1{
font-weight: 800;
font-size: clamp(48px, 6.4vw, 84px);
line-height: 0.98;
letter-spacing: -.035em;
margin: 22px 0 22px;
text-wrap: balance;
}
.hero h1 .grad{
background: linear-gradient(120deg, var(--cyan-soft) 0%, var(--cyan) 35%, var(--green) 70%, var(--royal) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
display:inline-block;
}
.hero p.lede{
font-size: 19px; line-height: 1.55;
color: var(--text-dim);
max-width: 52ch;
margin: 0 0 32px;
text-wrap: pretty;
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap: 12px; align-items:center; }
.btn{
display:inline-flex; align-items:center; gap:10px;
padding: 14px 22px;
border-radius: 999px;
font-weight: 600; font-size: 15px;
transition: transform .2s var(--ease-out), box-shadow .25s, background .2s;
cursor:pointer; border: 0;
font-family: inherit;
}
.btn--primary{
background: var(--cyan); color: #051018;
box-shadow: 0 10px 28px -8px rgba(77,214,255,.7);
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(77,214,255,.9); }
.btn--ghost{
background: transparent; color: var(--text);
border:1px solid rgba(255,255,255,.10);
}
.btn--ghost:hover{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); }
.btn--ghost::after{ content:"→"; opacity:.7; }
.hero__meta{
margin-top: 28px;
display:flex; gap: 22px;
font-family:"Syne Mono",monospace;
font-size: 11px;
color: var(--text-mute);
text-transform:uppercase; letter-spacing:.16em;
}
.hero__meta b{ color: var(--text-dim); font-weight: 500; }
/* hero visual: layered plate stack from the icon, levitating above its base */
.hero__visual{
position:relative;
height: 520px;
display:grid;
place-items: center;
}
.plate-stack{
position:relative;
width: 380px;
height: 380px;
perspective: 1200px;
}
.plate-stack__rig{
position:absolute; inset:0;
transform-style: preserve-3d;
transform: rotateX(58deg) rotateZ(-22deg);
animation: pd-rig 14s ease-in-out infinite;
}
@keyframes pd-rig{
0%,100%{ transform: rotateX(58deg) rotateZ(-22deg); }
50% { transform: rotateX(54deg) rotateZ(-26deg); }
}
.plate{
position:absolute;
left: 50%; top: 50%;
width: 230px; height: 230px;
margin-left:-115px; margin-top:-115px;
border-radius: 22px;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.18),
0 30px 60px -10px rgba(0,0,0,.6);
}
.plate--1{
background: linear-gradient(135deg, #7df0ff 0%, #3edcc6 100%);
transform: translateZ(100px);
animation: pd-float-a 6s ease-in-out infinite;
}
.plate--2{
background: linear-gradient(135deg, #5fe88a 0%, #3EE07A 100%);
transform: translateZ(30px);
animation: pd-float-b 6s ease-in-out infinite;
}
.plate--3{
background: linear-gradient(135deg, #4DD6FF 0%, #2E6FF0 100%);
transform: translateZ(-40px);
animation: pd-float-c 6s ease-in-out infinite;
}
@keyframes pd-float-a{ 0%,100%{ transform: translateZ(100px); } 50%{ transform: translateZ(120px); } }
@keyframes pd-float-b{ 0%,100%{ transform: translateZ(30px); } 50%{ transform: translateZ(45px); } }
@keyframes pd-float-c{ 0%,100%{ transform: translateZ(-40px); } 50%{ transform: translateZ(-30px); } }
/* nozzle drop */
.plate-stack__nozzle{
position:absolute;
left: 50%; top: -10px;
width: 18px; height: 80px;
margin-left: -9px;
background: linear-gradient(180deg, #1a2644 0%, #0c1426 100%);
border-radius: 4px 4px 8px 8px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
z-index: 5;
}
.plate-stack__nozzle::after{
content:"";
position:absolute;
left:50%; bottom:-6px; width:0; height:0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 8px solid var(--cyan);
filter: drop-shadow(0 0 6px var(--cyan));
transform: translateX(-50%);
}
.plate-stack__base{
position:absolute;
left: 50%; bottom: -10px;
width: 300px; height: 50px;
margin-left:-150px;
border-radius: 12px;
background: linear-gradient(180deg, #1a2644 0%, #0a1224 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 30px 60px rgba(0,0,0,.6),
0 60px 60px -20px rgba(77,214,255,.25);
border: 1px solid rgba(77,214,255,.15);
}
.plate-stack__floor{
position:absolute;
left:50%; bottom:-26px;
width: 440px; height: 16px;
margin-left:-220px;
border-radius: 50%;
background: radial-gradient(50% 50% at 50% 50%, rgba(77,214,255,.6), transparent 70%);
filter: blur(8px);
animation: pd-glow 4s ease-in-out infinite;
}
@keyframes pd-glow{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }
/* ============================================================
STAT STRIP
============================================================ */
.stat-strip{
border-top:1px solid rgba(255,255,255,.04);
border-bottom:1px solid rgba(255,255,255,.04);
padding: 36px 0;
background: linear-gradient(180deg, transparent, rgba(77,214,255,.02), transparent);
}
.stats{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
align-items:center;
}
.stat{
padding: 8px 28px;
border-left:1px solid rgba(255,255,255,.05);
}
.stat:first-child{ border-left:0; padding-left:0; }
.stat__num{
font-family: "Syne Mono", monospace;
font-size: 36px;
letter-spacing: -.02em;
color: var(--cyan);
line-height:1;
}
.stat__num--green{ color: var(--green); }
.stat__label{
margin-top: 8px;
font-family:"Syne Mono", monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--text-mute);
}
/* ============================================================
SECTION SCAFFOLD
============================================================ */
.section{
padding: 120px 0;
position:relative;
}
.section-head{
display:flex; align-items:center; gap:14px;
margin: 0 0 36px;
}
.section-head .num{
font-family:"Syne Mono",monospace;
font-size:12px;
color:var(--cyan);
border:1px solid rgba(77,214,255,.25);
padding: 4px 10px;
border-radius: 999px;
letter-spacing:.14em;
background:linear-gradient(90deg, rgba(77,214,255,.08), rgba(62,224,122,.05) 55%, rgba(46,111,240,.08));
}
.section-head .name{
font-weight:600; font-size:13px;
letter-spacing:.18em; text-transform:uppercase;
color:var(--text-dim);
font-family:"Syne Mono",monospace;
}
.section-head .rule{ flex:1; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.08), transparent); }
.section-title{
font-weight: 700;
font-size: clamp(36px, 4.4vw, 56px);
letter-spacing: -.025em;
line-height: 1.04;
margin: 0 0 20px;
text-wrap: balance;
max-width: 22ch;
}
.section-title em{ font-style: normal; color: var(--cyan); }
.section-sub{
color: var(--text-dim);
font-size: 18px;
line-height: 1.6;
max-width: 60ch;
margin: 0 0 64px;
text-wrap: pretty;
}
/* ============================================================
PHONE FRAME (carried over)
============================================================ */
.pd-phone{
--pd-phone-w: 320px;
--pd-phone-h: calc(var(--pd-phone-w) * 2.165);
--pd-radius: calc(var(--pd-phone-w) * 0.163);
--pd-bezel: calc(var(--pd-phone-w) * 0.012);
width:var(--pd-phone-w);
height:var(--pd-phone-h);
position:relative;
border-radius:var(--pd-radius);
background:var(--frame);
padding:var(--pd-bezel);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.05),
inset 0 0 0 2px rgba(0,0,0,.6),
0 1px 0 rgba(255,255,255,.04),
0 40px 80px rgba(0,0,0,.75),
0 12px 24px rgba(0,0,0,.55),
0 60px 60px -30px rgba(77,214,255,.18);
isolation:isolate;
}
.pd-phone::before{
content:""; position:absolute; inset:0;
border-radius:inherit; padding:1px;
background:linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 22%, rgba(0,0,0,.4) 55%, rgba(255,255,255,.04) 88%, rgba(255,255,255,.10) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
pointer-events:none; z-index:3;
}
.pd-phone::after{
content:""; position:absolute; top:14%; bottom:14%; left:0;
width:2px; border-radius:2px;
background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 25%, rgba(255,255,255,.32) 50%, rgba(255,255,255,.18) 75%, rgba(255,255,255,0) 100%);
filter: blur(.5px); pointer-events:none; z-index:4;
}
.pd-phone__screen{
position:relative;
width:100%; height:100%;
border-radius:calc(var(--pd-radius) - var(--pd-bezel));
overflow:hidden;
background:#000;
--pd-top-buffer: calc(var(--pd-phone-w) * 0.16);
--pd-bottom-buffer: calc(var(--pd-phone-w) * 0.16);
display:flex; flex-direction:column;
}
.pd-phone__screen::before{ content:""; flex: 0 0 var(--pd-top-buffer); background:#000; }
.pd-phone__screen::after { content:""; flex: 0 0 var(--pd-bottom-buffer); background:#000; }
.pd-phone__shot{
flex: 1 1 auto; width:100%; min-height:0;
object-fit:cover; object-position:top center; display:block;
}
.pd-phone__island{
position:absolute; top: calc(var(--pd-phone-w) * 0.034); left:50%;
transform:translateX(-50%);
width: calc(var(--pd-phone-w) * 0.31);
height: calc(var(--pd-phone-w) * 0.084);
background:#000; border-radius:999px;
z-index:5; box-shadow: 0 0 0 1px rgba(255,255,255,.04);
}
.pd-phone__island::after{
content:""; position:absolute; right:14%; top:50%;
transform:translateY(-50%);
width:6px; height:6px; border-radius:50%;
background:radial-gradient(circle at 35% 30%, #2a3550 0%, #0a0e18 60%, #000 100%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.pd-phone__home{
position:absolute; bottom: calc(var(--pd-phone-w) * 0.025); left:50%;
transform:translateX(-50%);
width:36%; height:4px; border-radius:4px;
background: rgba(255,255,255,.55); z-index:5;
}
.pd-phone--sm{ --pd-phone-w: 260px; }
.pd-phone--md{ --pd-phone-w: 320px; }
.pd-phone--lg{ --pd-phone-w: 360px; }
/* ============================================================
FEATURE BLOCKS (carried over, refined)
============================================================ */
.pd-feat{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items:center;
padding: 36px;
border-radius: 24px;
position:relative;
transition: box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
border:1px solid transparent;
}
.pd-feat:hover{
border-color: rgba(77,214,255,.10);
box-shadow:
0 0 0 1px rgba(77,214,255,.08),
0 30px 80px -30px rgba(77,214,255,.12),
inset 0 1px 0 rgba(77,214,255,.04);
}
.pd-feat--reverse .pd-feat__copy{ order:2; }
.pd-feat--reverse .pd-feat__visual{ order:1; }
.pd-feat__copy .tag{
font-family:"Syne Mono",monospace;
text-transform:uppercase; letter-spacing:.18em;
font-size:11px; color:var(--cyan);
display:inline-flex; align-items:center; gap:10px;
}
.pd-feat__copy .tag::before{
content:""; width:6px; height:6px; border-radius:50%;
background:var(--cyan);
box-shadow: 0 0 0 4px rgba(77,214,255,.15);
}
.pd-feat__copy h2{
font-weight:700; font-size:44px;
line-height:1.05; letter-spacing:-.02em;
margin: 18px 0 18px;
text-wrap: balance;
}
.pd-feat__copy h2 em{ font-style:normal; color:var(--cyan); }
.pd-feat__copy p{
color:var(--text-dim);
font-size:17px; line-height:1.6;
max-width: 46ch;
margin: 0 0 22px;
text-wrap: pretty;
}
.pd-feat__copy ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.pd-feat__copy ul li{
display:flex; gap:12px; align-items:flex-start;
color:var(--text); font-size:15px; line-height:1.5;
}
.pd-feat__copy ul li::before{
content:""; flex:none;
width:6px; height:6px; margin-top:9px; border-radius:50%;
background:var(--cyan);
box-shadow: 0 0 8px rgba(77,214,255,.6);
}
.pd-feat__visual{ display:flex; justify-content:center; align-items:center; min-height:0; }
.pd-visual--duo{
display:grid; grid-template-columns: auto auto;
gap: 28px; align-items:start;
}
.pd-visual--duo .pd-phone:nth-child(1){ margin-top: 16px; }
.pd-feat--wide{ grid-template-columns: 1fr; gap: 48px; }
.pd-feat--wide .pd-feat__copy{ max-width: 720px; }
.pd-feat--wide .pd-feat__copy h2{ font-size:48px; }
.pd-panel{
position:relative;
background:var(--card);
border:1px solid var(--card-border);
border-radius: var(--radius);
overflow:hidden;
box-shadow:
0 30px 80px rgba(0,0,0,.55),
0 1px 0 rgba(255,255,255,.03) inset,
0 60px 80px -40px rgba(77,214,255,.14);
}
.pd-panel__edge{
position:absolute; top:0; left:0; right:0; height:1px;
background:linear-gradient(90deg,
transparent 0%, rgba(77,214,255,0) 8%,
rgba(77,214,255,.85) 35%, rgba(62,224,122,.55) 55%,
rgba(46,111,240,.7) 75%, rgba(77,214,255,0) 92%, transparent 100%);
background-size: 200% 100%;
animation: pd-shimmer 3s linear infinite;
pointer-events:none; z-index:2;
}
@keyframes pd-shimmer{
0%{ background-position:-100% 0; } 100%{ background-position:100% 0; }
}
.pd-panel__chrome{
display:flex; align-items:center; gap:8px;
padding: 12px 16px;
border-bottom:1px solid var(--card-border);
background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.pd-panel__dots{ display:flex; gap:6px; }
.pd-panel__dots span{
width:10px; height:10px; border-radius:50%;
background:#1a2644;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.pd-panel__url{
font-family:"Syne Mono",monospace;
font-size:11px; color:var(--text-mute);
letter-spacing:.06em; margin-left:8px;
}
.pd-panel__shot{ display:block; width:100%; height:auto; }
/* ============================================================
HOW IT WORKS — three steps
============================================================ */
.how{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.how-step{
background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 60%), var(--card);
border:1px solid var(--card-border);
border-radius: 20px;
padding: 28px;
position:relative;
transition: border-color .3s, transform .3s var(--ease-out), box-shadow .3s;
}
.how-step:hover{
border-color: rgba(77,214,255,.2);
transform: translateY(-3px);
box-shadow: 0 30px 60px -20px rgba(77,214,255,.15);
}
.how-step__num{
font-family:"Syne Mono",monospace;
font-size: 56px;
line-height:1;
letter-spacing:-.04em;
background: linear-gradient(135deg, var(--cyan-soft), var(--royal));
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color: transparent;
margin-bottom: 18px;
font-weight: 400;
}
.how-step h3{
font-size: 22px; font-weight:700;
margin: 0 0 10px; letter-spacing:-.01em;
}
.how-step p{
color: var(--text-dim);
font-size: 15px; line-height:1.55;
margin: 0;
}
.how-step__chip{
display:inline-flex; align-items:center; gap:8px;
margin-top: 18px;
font-family:"Syne Mono", monospace;
font-size: 11px; letter-spacing:.14em;
text-transform: uppercase;
color: var(--green);
padding: 5px 10px;
background: rgba(62,224,122,.08);
border: 1px solid rgba(62,224,122,.18);
border-radius: 999px;
}
/* ============================================================
QUOTE
============================================================ */
.quote{
position:relative;
padding: 80px 56px;
border-radius: 28px;
background:
radial-gradient(600px 300px at 80% 0%, rgba(46,111,240,.10), transparent 70%),
radial-gradient(500px 300px at 0% 100%, rgba(77,214,255,.08), transparent 70%),
var(--card);
border:1px solid var(--card-border);
text-align: center;
}
.quote__open{
font-family:"Syne", serif;
font-size: 120px;
line-height: 0;
color: var(--cyan);
opacity: .4;
display:block;
height: 30px;
margin-bottom: 16px;
}
.quote blockquote{
margin: 0 auto;
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.35;
font-weight: 500;
letter-spacing: -.01em;
color: var(--text);
max-width: 28ch;
text-wrap: balance;
}
.quote__attr{
margin-top: 28px;
display: inline-flex; align-items: center; gap: 14px;
text-align: left;
}
.quote__avatar{
width: 48px; height: 48px;
border-radius: 50%;
background:
radial-gradient(60% 60% at 50% 50%, rgba(77,214,255,.4), transparent 70%),
linear-gradient(135deg, #1a2644, #0c1426);
border: 1px solid rgba(77,214,255,.25);
display:grid; place-items:center;
font-family:"Syne Mono", monospace;
font-size: 13px;
color: var(--cyan);
}
.quote__who b{ display:block; font-weight: 600; font-size: 14px; color: var(--text); }
.quote__who span{ font-family:"Syne Mono",monospace; font-size: 11px; color: var(--text-mute); text-transform:uppercase; letter-spacing:.14em; }
/* ============================================================
CTA
============================================================ */
.cta{
position:relative;
padding: 140px 0 120px;
text-align:center;
overflow:hidden;
}
.cta::before{
content:"";
position:absolute; left:50%; top:50%;
width: 900px; height: 900px;
margin-left:-450px; margin-top:-450px;
background: radial-gradient(50% 50% at 50% 50%, rgba(77,214,255,.10), transparent 60%);
z-index: 0; pointer-events:none;
filter: blur(20px);
}
.cta__inner{ position:relative; z-index:1; }
.cta h2{
font-weight: 800;
font-size: clamp(48px, 6vw, 80px);
line-height: .98; letter-spacing: -.035em;
margin: 0 0 18px;
text-wrap: balance;
}
.cta h2 .grad{
background: linear-gradient(120deg, var(--cyan-soft), var(--green) 50%, var(--royal));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.cta p{
color: var(--text-dim);
font-size: 18px; line-height: 1.55;
max-width: 50ch;
margin: 0 auto 32px;
}
.cta__ctas{ display:inline-flex; gap: 12px; flex-wrap:wrap; justify-content:center; }
.cta__small{
margin-top: 22px;
font-family:"Syne Mono",monospace;
font-size: 11px;
text-transform:uppercase; letter-spacing:.16em;
color: var(--text-mute);
}
/* ============================================================
FOOTER
============================================================ */
.foot{
border-top: 1px solid rgba(255,255,255,.04);
padding: 48px 0;
}
.foot__inner{
display:flex; flex-wrap:wrap;
align-items:center; justify-content:space-between;
gap: 18px;
}
.foot__links{ display:flex; gap: 22px; font-size: 13px; color: var(--text-dim); }
.foot__copy{ font-family:"Syne Mono",monospace; font-size: 11px; color: var(--text-mute); text-transform:uppercase; letter-spacing:.14em; }
/* ============================================================
ALIVE — scroll reveal
============================================================ */
[data-reveal]{
opacity:0;
transform: translate3d(0, 24px, 0);
transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
will-change: opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform: translate3d(0,0,0); }
[data-reveal-delay="1"].is-in{ transition-delay: .12s; }
[data-reveal-delay="2"].is-in{ transition-delay: .24s; }
[data-reveal-delay="3"].is-in{ transition-delay: .36s; }
[data-reveal-delay="4"].is-in{ transition-delay: .48s; }
.pd-phone[data-reveal]{
transform: translate3d(0, 24px, 0) scale(.96);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-pop);
}
.pd-phone[data-reveal].is-in{ transform: translate3d(0,0,0) scale(1); }
@media (prefers-reduced-motion: reduce){
[data-reveal], .pd-phone[data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
.pd-panel__edge, .plate-stack__rig, .plate--1, .plate--2, .plate--3, .plate-stack__floor, .hero__eyebrow::before{ animation:none !important; }
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1080px){
.hero__inner{ grid-template-columns: 1fr; gap: 48px; text-align:left; }
.hero__visual{ height: 460px; }
.stats{ grid-template-columns: repeat(2,1fr); gap: 28px 0; }
.how{ grid-template-columns: 1fr; }
}
@media (max-width: 920px){
.pd-feat{ grid-template-columns: 1fr; gap: 48px; padding: 24px; }
.pd-feat--reverse .pd-feat__copy{ order:1; }
.pd-feat--reverse .pd-feat__visual{ order:2; }
.pd-feat__copy h2{ font-size:32px; }
.pd-feat--wide .pd-feat__copy h2{ font-size:32px; }
.pd-phone--md{ --pd-phone-w: 260px; }
.pd-phone--lg{ --pd-phone-w: 280px; }
.quote{ padding: 56px 28px; }
.pd-nav__links{ display:none; }
}
/* ============================================================
* 19 · Scroll reveal observer (drop into a