/* ═══════════════════════════════════════════════════════════════════
HIZIX SOLARLEAD · V2 · MONOCHROME COMMAND DECK
Inspired by: NASA Hero Deck × Halide Topographical Hero × Modem Footer
Pure grayscale + #FF3C00 accent. Brutal typographic precision.
═══════════════════════════════════════════════════════════════════ */
:root{
/* Base palette — pure monochrome */
--bg:#0a0a0a;
--bg-2:#101010;
--bg-3:#161616;
--surface:#1a1a1a;
--surface-2:#222;
--line:rgba(224,224,224,0.08);
--line-2:rgba(224,224,224,0.14);
--line-3:rgba(224,224,224,0.22);
/* Foreground tones */
--silver:#e0e0e0;
--silver-2:#bcbcbc;
--silver-3:#8a8a8a;
--silver-4:#5a5a5a;
--silver-5:#3a3a3a;
/* Accent — Halide signal orange. Used SPARINGLY on metadata + hover */
--signal:#FF3C00;
--signal-2:#ff5c25;
--signal-dim:rgba(255,60,0,.12);
/* Type scale */
--f-display:'Syncopate', 'Inter', -apple-system, sans-serif;
--f-sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--f-mono:'JetBrains Mono', 'SF Mono', Menlo, monospace;
/* Geometry */
--radius-sm:6px;
--radius:10px;
--radius-lg:18px;
/* Motion */
--ease:cubic-bezier(0.16, 1, 0.3, 1);
--ease-2:cubic-bezier(0.4, 0, 0.2, 1);
--max:1320px;
--pad:clamp(20px, 4vw, 56px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}
body{
background:var(--bg);
color:var(--silver);
font-family:var(--f-sans);
font-size:16px;
line-height:1.55;
font-weight:400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
letter-spacing:-0.005em;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit;color:inherit}
::selection{background:var(--signal);color:#000}
/* ═══════════════════════════════════════════════════════════════════
GLOBAL TEXTURE — SVG GRAIN OVERLAY
═══════════════════════════════════════════════════════════════════ */
.grain-overlay{
position:fixed;
inset:0;
pointer-events:none;
z-index:200;
opacity:.10;
mix-blend-mode:overlay;
}
.grain-overlay::before{
content:'';
position:absolute;
inset:-100%;
background-image:url("data:image/svg+xml;utf8,");
}
/* Dotted bg pattern (Image 1 ref) */
.dot-grid{
position:absolute;
inset:0;
background-image:radial-gradient(circle, rgba(224,224,224,0.06) 1px, transparent 1px);
background-size:24px 24px;
background-position:0 0;
pointer-events:none;
mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
}
/* ═══════════════════════════════════════════════════════════════════
TYPOGRAPHY — display, body, mono
═══════════════════════════════════════════════════════════════════ */
.h-display{
font-family:var(--f-display);
font-weight:700;
font-size:clamp(2.5rem, 7.2vw, 6rem);
line-height:0.92;
letter-spacing:-0.035em;
color:var(--silver);
text-transform:none;
}
.h-display em{
font-style:normal;
color:var(--silver-3);
font-weight:400;
letter-spacing:-0.02em;
}
.h-section{
font-family:var(--f-display);
font-weight:700;
font-size:clamp(2rem, 5vw, 4rem);
line-height:0.95;
letter-spacing:-0.03em;
color:var(--silver);
}
.h-sub{
font-family:var(--f-sans);
font-weight:600;
font-size:clamp(1.25rem, 2vw, 1.75rem);
line-height:1.25;
letter-spacing:-0.02em;
color:var(--silver);
}
.metadata{
font-family:var(--f-mono);
font-size:11px;
font-weight:500;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--signal);
}
.metadata-quiet{
font-family:var(--f-mono);
font-size:11px;
font-weight:500;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--silver-3);
}
.eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
padding:7px 14px;
border:1px solid var(--line-2);
border-radius:100px;
background:rgba(255,255,255,0.02);
font-family:var(--f-mono);
font-size:11px;
font-weight:500;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--silver-2);
backdrop-filter:blur(8px);
}
.eyebrow .dot{
width:6px;height:6px;border-radius:50%;
background:var(--signal);
box-shadow:0 0 8px var(--signal);
animation:pulse-dot 2s ease infinite;
}
@keyframes pulse-dot{
0%,100%{opacity:1}
50%{opacity:.4}
}
.lead-text{
font-size:clamp(1rem, 1.4vw, 1.125rem);
line-height:1.6;
color:var(--silver-2);
max-width:54ch;
}
/* ═══════════════════════════════════════════════════════════════════
BUTTONS — polygon clip CTA + ghost
═══════════════════════════════════════════════════════════════════ */
.btn{
position:relative;
display:inline-flex;
align-items:center;
gap:10px;
padding:14px 26px;
font-family:var(--f-sans);
font-weight:700;
font-size:13px;
letter-spacing:0.06em;
text-transform:uppercase;
cursor:pointer;
transition:all .28s var(--ease);
white-space:nowrap;
}
.btn svg{width:14px;height:14px;flex-shrink:0}
/* Primary — solid silver, polygon clip-path */
.btn-primary{
background:var(--silver);
color:#000;
clip-path:polygon(0 0, 100% 0, 100% 70%, 88% 100%, 0 100%);
padding-right:34px;
}
.btn-primary:hover{
background:var(--signal);
color:#000;
transform:translateY(-3px);
}
/* Secondary — outline */
.btn-ghost{
background:transparent;
color:var(--silver);
border:1px solid var(--line-3);
border-radius:2px;
}
.btn-ghost:hover{
border-color:var(--signal);
color:var(--signal);
}
/* Mode toggle pill (Image 1 ref) */
.pill-toggle{
display:inline-flex;
align-items:center;
padding:6px;
gap:4px;
border:1px solid var(--line-2);
border-radius:100px;
background:rgba(255,255,255,0.02);
backdrop-filter:blur(10px);
}
.pill-toggle button{
padding:9px 22px;
border-radius:100px;
font-family:var(--f-mono);
font-size:11px;
font-weight:600;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--silver-3);
transition:all .25s var(--ease);
}
.pill-toggle button.is-active{
background:var(--silver);
color:#000;
}
/* ═══════════════════════════════════════════════════════════════════
NAVIGATION
═══════════════════════════════════════════════════════════════════ */
.nav{
position:fixed;
top:0;left:0;right:0;
z-index:100;
padding:18px 0;
background:rgba(10,10,10,0);
border-bottom:1px solid transparent;
transition:background .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
}
.nav.scrolled{
background:rgba(10,10,10,0.78);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--line);
padding:12px 0;
}
.nav-inner{
max-width:var(--max);
margin:0 auto;
padding:0 var(--pad);
display:flex;
align-items:center;
justify-content:space-between;
gap:32px;
}
.nav-brand{
display:flex;
align-items:center;
gap:10px;
font-family:var(--f-display);
font-weight:700;
font-size:14px;
letter-spacing:0.04em;
color:var(--silver);
text-transform:uppercase;
white-space:nowrap;
}
.nav-brand .mark{
width:30px;height:30px;
border:1px solid var(--line-3);
border-radius:6px;
display:grid;place-items:center;
background:rgba(255,255,255,0.02);
flex-shrink:0;
}
.nav-brand .mark svg{width:16px;height:16px;color:var(--silver)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
padding:8px 12px;
font-family:var(--f-display);
font-size:13px;
font-weight:600;
letter-spacing:-0.005em;
color:var(--silver-2);
border-radius:6px;
white-space:nowrap;
transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover{
color:var(--silver);
background:rgba(255,255,255,0.04);
}
.nav-links a.active{
color:var(--silver);
background:rgba(255,255,255,0.05);
}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{
display:none;
width:40px;height:40px;
border:1px solid var(--line-3);
border-radius:6px;
align-items:center;justify-content:center;
}
.nav-toggle svg{width:18px;height:18px;color:var(--silver)}
.mobile-menu{
display:none;
position:fixed;
top:64px;left:0;right:0;
background:rgba(10,10,10,0.96);
backdrop-filter:blur(20px);
border-bottom:1px solid var(--line);
padding:16px var(--pad);
flex-direction:column;
gap:4px;
z-index:99;
}
@media (max-width:980px){
.mobile-menu{display:flex}
}
.mobile-menu:not(.open){
transform:translateY(-12px);
opacity:0;
pointer-events:none;
}
.mobile-menu.open{
transform:translateY(0);
opacity:1;
pointer-events:auto;
}
.mobile-menu{
transition:transform .42s var(--ease), opacity .3s var(--ease);
}
.mobile-menu a{
padding:14px 16px;
font-size:14px;
color:var(--silver-2);
border-radius:6px;
border-bottom:1px solid var(--line);
}
.mobile-menu a:hover{color:var(--silver);background:rgba(255,255,255,0.03)}
.mobile-menu a:last-of-type{border-bottom:none}
/* ═══════════════════════════════════════════════════════════════════
HERO — Halide 3D parallax canvas + Command deck overlay
═══════════════════════════════════════════════════════════════════ */
.hero{
position:relative;
min-height:92vh;
padding:120px var(--pad) 60px;
overflow:hidden;
display:flex;
align-items:center;
}
/* Background layers */
.hero-bg{
position:absolute;inset:0;
pointer-events:none;
z-index:0;
}
.hero-bg::before{
content:'';
position:absolute;inset:0;
background:
radial-gradient(ellipse 70% 50% at 30% 40%, rgba(255,255,255,0.04), transparent 70%),
radial-gradient(ellipse 50% 40% at 80% 70%, rgba(255,60,0,0.05), transparent 70%);
}
/* 3D Parallax canvas (Halide ref) */
.hero-3d-stage{
position:absolute;
top:0;right:0;
width:62%;
height:100%;
perspective:2000px;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
z-index:1;
opacity:0.55;
}
.hero-3d-canvas{
position:relative;
width:680px;
height:440px;
transform-style:preserve-3d;
transform:rotateX(55deg) rotateZ(-25deg);
transition:transform 0.8s var(--ease);
}
.hero-3d-canvas .layer{
position:absolute;
inset:0;
border:1px solid rgba(224,224,224,0.10);
background-size:cover;
background-position:center;
transition:transform .5s var(--ease-2);
}
.hero-3d-canvas .layer-1{
background-image:linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%),
url("data:image/svg+xml;utf8,");
filter:grayscale(1) contrast(1.2) brightness(0.7);
}
.hero-3d-canvas .layer-2{
background:
radial-gradient(circle at 30% 40%, rgba(224,224,224,0.06), transparent 50%),
radial-gradient(circle at 70% 60%, rgba(255,60,0,0.04), transparent 50%);
opacity:0.7;
mix-blend-mode:screen;
}
.hero-3d-canvas .layer-3{
background-image:repeating-linear-gradient(
0deg,
transparent 0,
transparent 30px,
rgba(255,255,255,0.04) 30px,
rgba(255,255,255,0.04) 31px
);
opacity:0.4;
mix-blend-mode:overlay;
}
.hero-3d-canvas .contour{
position:absolute;
width:200%;height:200%;
top:-50%;left:-50%;
background-image:repeating-radial-gradient(
circle at 50% 50%,
transparent 0,
transparent 28px,
rgba(255,255,255,0.06) 29px,
transparent 30px
);
transform:translateZ(80px);
}
/* ── Hero satellite image (transparent PNG/WebP, floating) ──
Pulled UP visibly so the satellite anchors the top-right of the hero
alongside the headline, instead of drifting low. */
.hero-satellite-img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -60%);
width:108%;
max-width:none;
height:auto;
z-index:5;
pointer-events:none;
filter:
drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 40px rgba(80, 130, 220, 0.18));
opacity:0;
animation: heroSatFadeIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards,
heroSatFloat 8s ease-in-out 1.7s infinite;
}
@keyframes heroSatFadeIn{
0% { opacity:0; transform: translate(-50%, calc(-60% + 24px)) scale(0.96); }
100% { opacity:1; transform: translate(-50%, -60%) scale(1); }
}
@keyframes heroSatFloat{
0%, 100% { transform: translate(-50%, -60%) scale(1); }
50% { transform: translate(-50%, calc(-60% - 10px)) scale(1.012); }
}
@media (prefers-reduced-motion: reduce){
.hero-satellite-img{
animation: heroSatFadeIn 0.6s ease forwards;
}
}
/* Hero content */
.hero-content{
position:relative;
z-index:5;
max-width:var(--max);
margin:0 auto;
width:100%;
display:grid;
grid-template-columns:minmax(0, 1fr);
gap:48px;
align-items:center;
}
.hero-left{display:flex;flex-direction:column;gap:32px;max-width:760px}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hero-h1{
font-family:var(--f-display);
font-weight:700;
font-size:clamp(2.5rem, 5.5vw, 5rem);
line-height:0.92;
letter-spacing:-0.04em;
color:var(--silver);
}
.hero-h1 .h1-block{display:block}
.hero-h1 .h1-quiet{
color:var(--silver-4);
font-weight:400;
}
.hero-sub{
font-size:clamp(1rem, 1.3vw, 1.125rem);
line-height:1.65;
color:var(--silver-2);
max-width:52ch;
}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* ═══════════════════════════════════════════════════════════════════
HERO PRE-HEADLINE WHISPER — Lead Hunter advantage hint
Tiny pill above H1, sets up the "we hunt where ad money is" angle.
═══════════════════════════════════════════════════════════════════ */
.hero-whisper{
display:inline-flex;
align-items:center;
gap:10px;
padding:7px 14px 7px 12px;
border:1px solid rgba(255,60,0,0.22);
border-radius:100px;
background:linear-gradient(180deg, rgba(255,60,0,0.06), rgba(255,60,0,0.02));
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.10em;
text-transform:uppercase;
color:var(--silver-2);
align-self:flex-start;
width:max-content;
max-width:100%;
}
.hero-whisper .whisper-dot{
width:6px;height:6px;border-radius:50%;
background:var(--signal);
box-shadow:0 0 8px var(--signal), 0 0 14px rgba(255,60,0,0.45);
animation:whisperPulse 2.4s ease-in-out infinite;
flex-shrink:0;
}
.hero-whisper .whisper-text{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
@keyframes whisperPulse{
0%, 100%{opacity:1; transform:scale(1)}
50%{opacity:0.55; transform:scale(0.85)}
}
/* ═══════════════════════════════════════════════════════════════════
HERO 4-STEP FLOW PIPELINE — visual proof of the promise
"Pick zone → Scan → Find owner → AI dials" — engineered chain
═══════════════════════════════════════════════════════════════════ */
.hero-flow{
display:grid;
grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
gap:0;
align-items:stretch;
padding:14px;
border:1px solid var(--line-2);
border-radius:18px;
background:
linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
max-width:760px;
position:relative;
overflow:hidden;
}
/* Glow line behind the steps */
.hero-flow::before{
content:'';
position:absolute;
left:0;right:0;
top:50%;
height:1px;
background:linear-gradient(90deg,
transparent 0%,
rgba(255,60,0,0.0) 8%,
rgba(255,60,0,0.32) 50%,
rgba(255,60,0,0.0) 92%,
transparent 100%);
transform:translateY(-0.5px);
pointer-events:none;
z-index:0;
}
.hf-step{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
padding:12px 14px;
position:relative;
z-index:1;
min-width:0;
}
.hf-icon{
width:34px;height:34px;
border-radius:9px;
background:rgba(255,60,0,0.08);
border:1px solid rgba(255,60,0,0.30);
display:grid;
place-items:center;
color:var(--signal);
flex-shrink:0;
}
.hf-icon svg{width:16px;height:16px}
.hf-step-final .hf-icon{
background:linear-gradient(135deg, rgba(255,60,0,0.18), rgba(255,60,0,0.06));
border-color:rgba(255,60,0,0.55);
box-shadow:0 0 16px rgba(255,60,0,0.18);
}
.hf-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.hf-num{
font-family:var(--f-mono);
font-size:9px;
font-weight:600;
letter-spacing:0.18em;
color:var(--silver-4);
}
.hf-title{
font-family:var(--f-display);
font-size:14px;
font-weight:700;
letter-spacing:-0.01em;
color:var(--silver);
line-height:1.15;
}
.hf-desc{
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.04em;
color:var(--silver-3);
line-height:1.4;
}
.hf-arrow{
display:grid;
place-items:center;
color:var(--silver-4);
position:relative;
z-index:1;
}
.hf-arrow svg{
width:14px;height:14px;
opacity:0.5;
animation:hfArrowFlow 2.4s ease-in-out infinite;
}
.hf-arrow:nth-of-type(2) svg{animation-delay:0s}
.hf-arrow:nth-of-type(4) svg{animation-delay:0.4s}
.hf-arrow:nth-of-type(6) svg{animation-delay:0.8s}
@keyframes hfArrowFlow{
0%, 100%{opacity:0.25; transform:translateX(-2px)}
50%{opacity:0.85; transform:translateX(2px)}
}
/* Mobile flow — stack vertically with rotated arrows */
@media (max-width:760px){
.hero-flow{
grid-template-columns:1fr;
gap:0;
padding:10px;
}
.hero-flow::before{display:none}
.hf-step{
flex-direction:row;
align-items:center;
gap:14px;
padding:10px 12px;
border-radius:10px;
}
.hf-step:not(:last-child){border-bottom:1px dashed var(--line)}
.hf-arrow{display:none}
.hf-icon{width:30px;height:30px;border-radius:8px}
.hf-icon svg{width:14px;height:14px}
.hf-title{font-size:13px}
.hf-desc{font-size:10px}
}
@media (max-width:480px){
.hero-whisper{font-size:10px;padding:6px 12px 6px 10px}
.hero-whisper .whisper-text{
/* Keep whisper visible on small screens */
overflow:visible;
white-space:normal;
}
}
/* Hero KPI strip (Image 1 ref) */
.hero-kpi-strip{
display:grid;
grid-template-columns:auto 1fr 1fr 1fr;
gap:0;
border:1px solid var(--line-2);
border-radius:100px;
padding:6px;
align-items:center;
background:rgba(255,255,255,0.015);
backdrop-filter:blur(10px);
max-width:680px;
}
.hero-kpi-pill{
padding:10px 22px;
border-radius:100px;
background:rgba(255,255,255,0.03);
display:flex;align-items:center;gap:10px;
font-family:var(--f-mono);
font-size:11px;
font-weight:600;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--silver-2);
}
.hero-kpi-pill .dot{
width:6px;height:6px;border-radius:50%;
background:var(--signal);
box-shadow:0 0 6px var(--signal);
}
.hero-kpi-cell{
padding:8px 18px;
display:flex;
flex-direction:column;
gap:2px;
border-left:1px solid var(--line);
}
.hero-kpi-cell:first-child{border-left:none}
.hero-kpi-cell .k-label{
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--silver-3);
}
.hero-kpi-cell .k-value{
font-family:var(--f-display);
font-size:18px;
font-weight:700;
color:var(--silver);
letter-spacing:-0.01em;
}
/* Hero right column — Command Card (Image 1 ref) */
.hero-right{
position:relative;
z-index:5;
}
.command-card{
position:relative;
border:1px solid var(--line-2);
border-radius:18px;
padding:32px;
background:rgba(20,20,20,0.6);
backdrop-filter:blur(20px);
display:flex;
flex-direction:column;
gap:22px;
overflow:hidden;
}
.command-card::before{
content:'';
position:absolute;
top:-1px;left:50%;
width:100px;height:1px;
background:linear-gradient(90deg, transparent, var(--signal), transparent);
transform:translateX(-50%);
}
.cc-corner{
position:absolute;
width:24px;height:24px;
border:1px solid var(--silver-3);
opacity:.45;
}
.cc-corner.tl{top:14px;left:14px;border-right:none;border-bottom:none}
.cc-corner.tr{top:14px;right:14px;border-left:none;border-bottom:none}
.cc-corner.bl{bottom:14px;left:14px;border-right:none;border-top:none}
.cc-corner.br{bottom:14px;right:14px;border-left:none;border-top:none}
.cc-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
}
.cc-header-text .cc-mode-label{
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--silver-3);
margin-bottom:4px;
}
.cc-header-text .cc-mode-title{
font-family:var(--f-display);
font-size:22px;
font-weight:700;
color:var(--silver);
letter-spacing:-0.01em;
}
.cc-target-icon{
width:48px;height:48px;
border:1px solid var(--silver-3);
border-radius:50%;
display:grid;place-items:center;
position:relative;
flex-shrink:0;
}
.cc-target-icon::before{
content:'';
position:absolute;
inset:-6px;
border:1px dashed var(--silver-4);
border-radius:50%;
animation:rotate-slow 12s linear infinite;
}
.cc-target-icon svg{width:18px;height:18px;color:var(--silver)}
@keyframes rotate-slow{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.cc-body{
font-size:14px;
line-height:1.65;
color:var(--silver-2);
}
.cc-bullets{
display:flex;
flex-direction:column;
gap:10px;
list-style:none;
}
.cc-bullets li{
display:flex;
align-items:flex-start;
gap:10px;
font-size:13px;
line-height:1.5;
color:var(--silver-2);
}
.cc-bullets li::before{
content:'';
width:6px;height:6px;
border-radius:50%;
background:var(--silver-3);
margin-top:7px;
flex-shrink:0;
}
/* ═══════════════════════════════════════════════════════════════════
SECTION FRAMEWORK
═══════════════════════════════════════════════════════════════════ */
.section{
position:relative;
padding:clamp(80px, 12vw, 140px) var(--pad);
overflow:hidden;
}
.section-inner{
max-width:var(--max);
margin:0 auto;
position:relative;
}
.section-head{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
margin-bottom:64px;
align-items:end;
}
.section-head-left{display:flex;flex-direction:column;gap:18px}
.section-head-right{display:flex;flex-direction:column;gap:14px;padding-bottom:6px}
.section-head .h-section{max-width:18ch}
.section-divider{
position:relative;
height:1px;
background:linear-gradient(90deg, transparent, var(--line-3), transparent);
margin:0;
}
/* Section labels (top of section) */
.section-label{
display:flex;
align-items:center;
gap:14px;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.2em;
text-transform:uppercase;
color:var(--signal);
}
.section-label::before{
content:'';
width:32px;height:1px;
background:var(--signal);
}
.section-label .num{color:var(--silver-3)}
/* ═══════════════════════════════════════════════════════════════════
TRUSTBAR — infinite marquee
═══════════════════════════════════════════════════════════════════ */
.trustbar{
padding:60px var(--pad);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
position:relative;
overflow:hidden;
}
.trustbar-label{
text-align:center;
margin-bottom:32px;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.2em;
text-transform:uppercase;
color:var(--silver-3);
}
.trustbar-track{
position:relative;
overflow:hidden;
mask-image:linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%);
}
.trustbar-marquee{
display:flex;
gap:0;
animation:marquee-x 38s linear infinite;
width:max-content;
}
.trustbar-set{
display:flex;
flex-shrink:0;
}
.tb-item{
padding:0 50px;
display:flex;
align-items:center;
gap:14px;
border-right:1px solid var(--line);
height:48px;
font-family:var(--f-display);
font-weight:700;
font-size:15px;
letter-spacing:0.04em;
text-transform:uppercase;
color:var(--silver-3);
transition:color .25s var(--ease);
}
.tb-item:hover{color:var(--silver)}
.tb-item svg{width:18px;height:18px;opacity:.7}
@keyframes marquee-x{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
/* ═══════════════════════════════════════════════════════════════════
STATS BAR
═══════════════════════════════════════════════════════════════════ */
.stats-bar{
display:grid;
grid-template-columns:repeat(4, 1fr);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
background:rgba(255,255,255,0.01);
}
.stat-cell{
padding:48px 32px;
border-left:1px solid var(--line);
display:flex;
flex-direction:column;
gap:6px;
}
.stat-cell:first-child{border-left:none}
.stat-cell .stat-num{
font-family:var(--f-display);
font-size:clamp(2rem, 4vw, 3.25rem);
font-weight:700;
letter-spacing:-0.03em;
color:var(--silver);
line-height:1;
}
.stat-cell .stat-num .stat-suffix{color:var(--signal)}
.stat-cell .stat-label{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--silver-3);
margin-top:8px;
}
.stat-cell .stat-sub{
font-size:13px;
line-height:1.5;
color:var(--silver-3);
margin-top:4px;
}
/* ═══════════════════════════════════════════════════════════════════
CONSOLE / LIVE MISSION DISPLAY
═══════════════════════════════════════════════════════════════════ */
.console-section{padding-top:0}
.console-frame{
position:relative;
border:1px solid var(--line-2);
border-radius:14px;
background:linear-gradient(180deg, var(--bg-2), var(--bg));
overflow:hidden;
}
.console-bar{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 24px;
border-bottom:1px solid var(--line);
background:rgba(255,255,255,0.01);
}
.console-bar-left,.console-bar-right{
display:flex;
align-items:center;
gap:14px;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--silver-3);
}
.console-bar-dots{display:flex;gap:6px}
.console-bar-dots span{
width:9px;height:9px;border-radius:50%;
background:var(--silver-5);
}
.console-bar-dots span:first-child{background:var(--signal)}
.console-content{
position:relative;
aspect-ratio:16/10;
background:
radial-gradient(ellipse at center, rgba(255,255,255,0.02), transparent 70%),
repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(224,224,224,0.025) 39px, rgba(224,224,224,0.025) 40px),
repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(224,224,224,0.025) 39px, rgba(224,224,224,0.025) 40px);
display:flex;
align-items:center;
justify-content:center;
}
.console-placeholder{
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--silver-4);
text-align:center;
}
.console-placeholder .ph-box{
width:64px;height:64px;
border:1px dashed var(--silver-5);
border-radius:8px;
display:grid;place-items:center;
}
.console-placeholder .ph-box svg{width:24px;height:24px;color:var(--silver-4)}
/* ═══════════════════════════════════════════════════════════════════
SOFTWARE-VS-AGENCY (signature differentiator section)
═══════════════════════════════════════════════════════════════════ */
.vs-section{
padding:clamp(80px, 12vw, 130px) var(--pad);
background:linear-gradient(180deg, var(--bg) 0%, #060606 100%);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
position:relative;
}
.vs-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:1px;
background:var(--line);
border:1px solid var(--line);
border-radius:14px;
overflow:hidden;
}
.vs-col{
padding:40px 36px;
background:var(--bg);
display:flex;
flex-direction:column;
gap:24px;
}
.vs-col.is-them{background:#060606}
.vs-col.is-us{background:linear-gradient(180deg, #0e0e0e, #0a0a0a)}
.vs-col-head{
display:flex;
justify-content:space-between;
align-items:center;
padding-bottom:18px;
border-bottom:1px solid var(--line);
}
.vs-col-tag{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.18em;
text-transform:uppercase;
}
.vs-col.is-them .vs-col-tag{color:var(--silver-4)}
.vs-col.is-us .vs-col-tag{color:var(--signal)}
.vs-col h3{
font-family:var(--f-display);
font-size:clamp(1.5rem, 2.2vw, 2rem);
font-weight:700;
letter-spacing:-0.02em;
color:var(--silver);
}
.vs-col.is-them h3{color:var(--silver-3)}
.vs-list{
display:flex;
flex-direction:column;
gap:14px;
list-style:none;
}
.vs-list li{
display:flex;
gap:12px;
align-items:flex-start;
font-size:14px;
line-height:1.55;
color:var(--silver-2);
}
.vs-list li .icon{
width:18px;height:18px;
flex-shrink:0;
margin-top:2px;
border:1px solid var(--silver-4);
border-radius:4px;
display:grid;place-items:center;
font-family:var(--f-mono);
font-size:10px;
font-weight:700;
}
.vs-col.is-them .vs-list li .icon{color:var(--silver-4)}
.vs-col.is-us .vs-list li .icon{
border-color:var(--signal);
color:var(--signal);
background:var(--signal-dim);
}
.vs-col.is-them .vs-list li{color:var(--silver-3)}
.vs-col-footer{
margin-top:auto;
padding-top:18px;
border-top:1px solid var(--line);
display:flex;
justify-content:space-between;
align-items:center;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--silver-4);
}
.vs-col-footer .footer-num{
font-family:var(--f-display);
font-size:22px;
font-weight:700;
letter-spacing:-0.01em;
}
.vs-col.is-them .vs-col-footer .footer-num{color:var(--silver-3)}
.vs-col.is-us .vs-col-footer .footer-num{color:var(--silver)}
/* ═══════════════════════════════════════════════════════════════════
FEATURE BLOCKS — alternating big rows
═══════════════════════════════════════════════════════════════════ */
.bf-section{padding-top:0}
.bf-row{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:64px;
align-items:center;
padding:64px 0;
border-top:1px solid var(--line);
}
.bf-row:first-of-type{border-top:none}
.bf-row.alt{grid-template-columns:1.2fr 1fr}
.bf-row.alt .bf-text{order:2}
.bf-row.alt .bf-visual{order:1}
.bf-text{display:flex;flex-direction:column;gap:24px}
.bf-text h3{
font-family:var(--f-display);
font-size:clamp(1.75rem, 3.5vw, 2.75rem);
font-weight:700;
line-height:0.98;
letter-spacing:-0.03em;
color:var(--silver);
}
.bf-text p{
font-size:15px;
line-height:1.6;
color:var(--silver-2);
max-width:48ch;
}
.bf-list{
display:flex;
flex-direction:column;
gap:12px;
list-style:none;
}
.bf-list li{
display:flex;
gap:12px;
align-items:flex-start;
font-size:14px;
line-height:1.55;
color:var(--silver-2);
padding-left:14px;
position:relative;
}
.bf-list li::before{
content:'';
position:absolute;
left:0;top:9px;
width:6px;height:6px;
background:var(--signal);
}
.bf-visual{
position:relative;
aspect-ratio:4/3;
border:1px solid var(--line-2);
border-radius:14px;
background:
linear-gradient(180deg, var(--bg-2), #060606),
repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(255,255,255,0.02) 10px, rgba(255,255,255,0.02) 11px);
overflow:hidden;
}
/* Image inside bf-visual fills the container, sits below meta-strip & corner marks.
Alt text (when image fails to load) is hidden so layout doesn't break. */
.bf-visual > img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
border-radius:14px;
z-index:1;
/* Hide alt-text overflow if the image fails to load */
font-size:0;
color:transparent;
/* If image is broken, the dimmed background still renders as placeholder */
}
.bf-visual::before,
.bf-visual::after{
content:'';
position:absolute;
width:32px;height:32px;
border:1px solid var(--silver-4);
opacity:.5;
z-index:2;
}
.bf-visual::before{top:14px;left:14px;border-right:none;border-bottom:none}
.bf-visual::after{bottom:14px;right:14px;border-left:none;border-top:none}
.bf-meta-strip{
position:absolute;
top:14px;
right:14px;
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--signal);
text-align:right;
z-index:3;
/* Subtle shadow so text reads over any image */
text-shadow:0 1px 4px rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.7);
}
.bf-meta-strip .row{margin-bottom:2px}
.bf-slot-placeholder{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:12px;
color:var(--silver-4);
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.16em;
text-transform:uppercase;
}
.bf-slot-placeholder .ph-icon{
width:48px;height:48px;
border:1px dashed var(--silver-5);
border-radius:8px;
display:grid;place-items:center;
}
.bf-slot-placeholder .ph-icon svg{width:20px;height:20px}
/* ═══════════════════════════════════════════════════════════════════
FLOW TIMELINE
═══════════════════════════════════════════════════════════════════ */
.flow-section{padding:clamp(80px, 12vw, 130px) var(--pad);background:#060606;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flow-grid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:0;
border:1px solid var(--line);
border-radius:14px;
overflow:hidden;
}
.flow-step{
padding:32px 24px;
border-left:1px solid var(--line);
display:flex;
flex-direction:column;
gap:14px;
background:var(--bg);
position:relative;
min-height:240px;
}
.flow-step:first-child{border-left:none}
.flow-step .step-num{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.16em;
color:var(--signal);
text-transform:uppercase;
}
.flow-step .step-icon{
width:44px;height:44px;
border:1px solid var(--line-3);
border-radius:8px;
display:grid;place-items:center;
background:rgba(255,255,255,0.02);
}
.flow-step .step-icon svg{width:20px;height:20px;color:var(--silver-2)}
.flow-step h4{
font-family:var(--f-sans);
font-size:15px;
font-weight:700;
color:var(--silver);
letter-spacing:-0.01em;
}
.flow-step p{
font-size:13px;
line-height:1.55;
color:var(--silver-3);
}
/* ═══════════════════════════════════════════════════════════════════
VIDEO DEMO
═══════════════════════════════════════════════════════════════════ */
.video-section{padding:clamp(80px, 12vw, 130px) var(--pad);}
.video-frame{
position:relative;
aspect-ratio:16/9;
border:1px solid var(--line-2);
border-radius:14px;
background:linear-gradient(135deg, #1a1a1a, #0a0a0a);
overflow:hidden;
cursor:pointer;
transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.video-frame:hover{
border-color:var(--silver-3);
transform:translateY(-4px);
}
.video-frame::before{
content:'';
position:absolute;inset:0;
background:
radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.04), transparent 60%),
repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(224,224,224,0.02) 39px, rgba(224,224,224,0.02) 40px);
}
.video-play{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:88px;height:88px;
border-radius:50%;
background:var(--silver);
display:grid;place-items:center;
transition:transform .3s var(--ease), background .3s var(--ease);
z-index:2;
}
.video-frame:hover .video-play{
background:var(--signal);
transform:translate(-50%,-50%) scale(1.08);
}
.video-play svg{width:30px;height:30px;color:#000;margin-left:4px}
.video-meta{
position:absolute;
bottom:24px;left:24px;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--silver-3);
z-index:2;
}
.video-meta .top{color:var(--signal);margin-bottom:4px}
/* ═══════════════════════════════════════════════════════════════════
AUDIENCE / WHO IT'S FOR — vertical cards
═══════════════════════════════════════════════════════════════════ */
.aud-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
}
.aud-card{
position:relative;
padding:32px 28px 28px;
border:1px solid var(--line-2);
border-radius:14px;
background:linear-gradient(180deg, var(--bg-2), var(--bg));
display:flex;
flex-direction:column;
gap:18px;
min-height:380px;
transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.aud-card:hover{
border-color:var(--silver-4);
transform:translateY(-4px);
}
.aud-card .card-num{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.16em;
color:var(--signal);
}
.aud-card .card-icon{
width:52px;height:52px;
border:1px solid var(--line-3);
border-radius:10px;
display:grid;place-items:center;
background:rgba(255,255,255,0.02);
}
.aud-card .card-icon svg{width:22px;height:22px;color:var(--silver)}
.aud-card h3{
font-family:var(--f-display);
font-size:22px;
font-weight:700;
color:var(--silver);
letter-spacing:-0.015em;
line-height:1.1;
}
.aud-card p{
font-size:14px;
line-height:1.55;
color:var(--silver-2);
flex:1;
}
.aud-card .card-link{
margin-top:auto;
display:inline-flex;
align-items:center;
gap:8px;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--silver-2);
transition:color .25s var(--ease), gap .25s var(--ease);
}
.aud-card .card-link svg{width:13px;height:13px}
.aud-card .card-link:hover{color:var(--signal);gap:14px}
/* ═══════════════════════════════════════════════════════════════════
PRICING
═══════════════════════════════════════════════════════════════════ */
.pricing-section{padding:clamp(80px, 12vw, 130px) var(--pad);}
.pricing-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:1px;
background:var(--line);
border:1px solid var(--line);
border-radius:14px;
overflow:hidden;
}
.price-card{
position:relative;
padding:36px 28px 32px;
background:var(--bg);
display:flex;
flex-direction:column;
gap:22px;
}
.price-card.is-featured{
background:linear-gradient(180deg, #0e0e0e, #060606);
}
.price-card.is-featured::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:2px;
background:var(--signal);
}
.price-tag{
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--silver-3);
display:flex;align-items:center;justify-content:space-between;
}
.price-tag .badge{
padding:3px 8px;
background:var(--signal-dim);
color:var(--signal);
border:1px solid var(--signal);
border-radius:3px;
font-size:9px;
}
.price-name{
font-family:var(--f-display);
font-size:24px;
font-weight:700;
color:var(--silver);
letter-spacing:-0.015em;
}
.price-amt{
display:flex;
align-items:baseline;
gap:6px;
font-family:var(--f-display);
color:var(--silver);
}
.price-amt .num{
font-size:48px;
font-weight:700;
letter-spacing:-0.04em;
line-height:1;
}
.price-amt .per{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--silver-3);
}
.price-desc{
font-size:13px;
line-height:1.55;
color:var(--silver-3);
padding-bottom:18px;
border-bottom:1px solid var(--line);
}
.price-list{
display:flex;
flex-direction:column;
gap:11px;
list-style:none;
}
.price-list li{
display:flex;
gap:10px;
align-items:flex-start;
font-size:13px;
line-height:1.5;
color:var(--silver-2);
}
.price-list li svg{
width:14px;height:14px;
flex-shrink:0;
margin-top:3px;
color:var(--silver-3);
}
.price-card.is-featured .price-list li svg{color:var(--signal)}
.price-card .btn{margin-top:auto;justify-content:center;width:100%}
/* ─── Ek Paketler — small variant (Faz 2 billing) ─── */
.price-card-sm{
position:relative;
padding:24px 22px 22px;
background:var(--bg);
display:flex;
flex-direction:column;
gap:14px;
}
.price-card-sm.is-featured{
background:linear-gradient(180deg, #0e0e0e, #060606);
}
.price-card-sm.is-featured::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:2px;
background:var(--signal);
}
.price-card-sm .price-tag{margin-bottom:0}
.price-card-sm .price-amt{margin:2px 0}
.price-card-sm .price-amt .per{font-size:10px}
.price-card-sm .price-desc{
font-size:12px;
padding-bottom:12px;
border-bottom:1px solid var(--line);
}
.price-card-sm .btn{margin-top:auto;justify-content:center;width:100%;font-size:13px;padding:11px 16px}
.btn-ghost-sm{
display:inline-flex;align-items:center;gap:6px;
padding:6px 10px;
background:transparent;
color:var(--silver-3);
border:1px solid var(--line);
border-radius:5px;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.06em;
text-transform:uppercase;
cursor:pointer;
transition:border-color .15s ease,color .15s ease;
text-decoration:none;
}
.btn-ghost-sm:hover{
border-color:var(--silver-3);
color:var(--silver);
}
/* ─── AI Caller Add-on Modal (Faz 2 billing) ─── */
.addon-modal{
position:fixed;
inset:0;
z-index:9998;
display:none;
align-items:center;
justify-content:center;
padding:24px;
}
.addon-modal.open{display:flex}
.addon-modal-bg{
position:absolute;
inset:0;
background:rgba(0,0,0,0.85);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.addon-modal-inner{
position:relative;
z-index:1;
width:min(880px, 100%);
max-height:90vh;
overflow-y:auto;
background:linear-gradient(180deg, #0a0a0a, #050505);
border:1px solid var(--line-2);
border-radius:16px;
padding:48px 40px 36px;
box-shadow:0 30px 80px rgba(0,0,0,0.6);
}
.addon-close{
position:absolute;
top:16px;right:16px;
width:34px;height:34px;
background:transparent;
border:1px solid var(--line);
border-radius:6px;
color:var(--silver-3);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:border-color .15s,color .15s;
}
.addon-close:hover{border-color:var(--silver-2);color:var(--silver)}
.addon-close svg{width:14px;height:14px}
.addon-tag{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--signal);
display:block;
margin-bottom:14px;
}
.addon-h{
font-family:var(--f-display);
font-size:clamp(1.6rem, 3vw, 2.4rem);
font-weight:700;
letter-spacing:-0.025em;
color:var(--silver);
line-height:1.05;
margin:0 0 14px 0;
}
.addon-sub{
font-size:14px;
line-height:1.6;
color:var(--silver-2);
max-width:64ch;
margin:0 0 28px 0;
}
.addon-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:12px;
margin-bottom:24px;
}
.addon-card{
position:relative;
display:flex;
flex-direction:column;
gap:6px;
padding:18px 16px;
background:var(--bg);
border:1px solid var(--line-2);
border-radius:10px;
text-align:left;
cursor:pointer;
transition:border-color .15s,background .15s,transform .15s;
font-family:var(--f-display);
color:var(--silver);
}
.addon-card:hover{
border-color:var(--silver-3);
background:#0e0e0e;
transform:translateY(-2px);
}
.addon-card-featured{
border-color:var(--signal);
background:linear-gradient(180deg, rgba(255,107,53,0.04), transparent);
}
.addon-card-featured:hover{
border-color:var(--signal);
box-shadow:0 0 0 1px var(--signal-dim);
}
.addon-badge{
position:absolute;
top:10px;right:10px;
padding:3px 7px;
background:var(--signal-dim);
color:var(--signal);
border:1px solid var(--signal);
border-radius:3px;
font-family:var(--f-mono);
font-size:9px;
letter-spacing:0.1em;
}
.addon-tier{
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.16em;
color:var(--silver-3);
text-transform:uppercase;
}
.addon-name{
font-size:18px;
font-weight:700;
letter-spacing:-0.015em;
}
.addon-price{
font-size:26px;
font-weight:700;
letter-spacing:-0.03em;
margin-top:4px;
}
.addon-per{
font-size:11px;
color:var(--silver-3);
font-weight:400;
letter-spacing:0.08em;
margin-left:2px;
}
.addon-desc{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.04em;
color:var(--silver-3);
line-height:1.5;
margin-top:6px;
}
.addon-skip{
width:100%;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:14px 22px;
background:transparent;
border:1px solid var(--line);
border-radius:8px;
color:var(--silver-2);
font-family:var(--f-mono);
font-size:12px;
letter-spacing:0.08em;
text-transform:uppercase;
cursor:pointer;
transition:border-color .15s,color .15s;
}
.addon-skip:hover{border-color:var(--silver-2);color:var(--silver)}
.addon-skip svg{width:14px;height:14px}
.addon-foot{
text-align:center;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.06em;
color:var(--silver-3);
margin:14px 0 0 0;
}
@media (max-width: 700px){
.addon-modal-inner{padding:36px 22px 24px}
.addon-grid{grid-template-columns:1fr;gap:10px}
}
/* ─── Pricing/Page hero with satellite image (anasayfa ile uyumlu) ─── */
.page-hero-with-img{
min-height:480px;
display:flex;
align-items:center;
}
.page-hero-img{
position:absolute;
right:-8%;
top:50%;
transform:translateY(-50%);
width:62%;
max-width:760px;
height:auto;
z-index:1;
pointer-events:none;
opacity:0.85;
filter:drop-shadow(0 30px 60px rgba(0,0,0,0.5));
-webkit-mask-image:linear-gradient(to left, black 55%, transparent 100%);
mask-image:linear-gradient(to left, black 55%, transparent 100%);
}
.page-hero-img img{
width:100%;
height:auto;
display:block;
}
.page-hero-with-img .page-hero-inner{
position:relative;
z-index:2;
}
.page-hero-with-img .page-hero-right{
position:relative;
z-index:3;
}
@media (max-width: 980px){
.page-hero-img{
opacity:0.35;
width:80%;
right:-12%;
}
}
@media (max-width: 700px){
.page-hero-img{
opacity:0.22;
width:120%;
right:-30%;
top:auto;
bottom:-10%;
transform:none;
}
}
/* ═══════════════════════════════════════════════════════════════════
PAY-AS-YOU-GO BAND
═══════════════════════════════════════════════════════════════════ */
.pay2go-band{
border:1px solid var(--line-2);
border-radius:18px;
background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.005));
overflow:hidden;
position:relative;
}
.pay2go-band::before{
content:'';
position:absolute;
top:0;left:24px;right:24px;height:1px;
background:linear-gradient(90deg,transparent,var(--signal),transparent);
}
.pay2go-inner{
display:grid;
grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
gap:28px;
padding:36px 36px 28px;
align-items:center;
}
.pay2go-tag{
display:inline-block;
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.18em;
color:var(--signal);
background:rgba(80,255,140,0.06);
border:1px solid rgba(80,255,140,0.15);
border-radius:6px;
padding:5px 10px;
margin-bottom:14px;
font-weight:700;
text-transform:uppercase;
}
.pay2go-h{
font-family:var(--f-display);
font-size:clamp(1.4rem, 3vw, 2rem);
font-weight:700;
letter-spacing:-0.02em;
color:var(--silver);
line-height:1.1;
margin:0 0 10px;
}
.pay2go-sub{
font-size:14px;
line-height:1.6;
color:var(--silver-2);
max-width:42ch;
}
.pay2go-prices{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.pay2go-cell{
background:rgba(255,255,255,0.018);
border:1px solid var(--line-2);
border-radius:14px;
padding:22px 20px 18px;
display:flex;
flex-direction:column;
gap:6px;
transition:border-color .25s var(--ease), background .25s var(--ease);
}
.pay2go-cell:hover{ border-color:var(--line-3); background:rgba(255,255,255,0.03) }
.pay2go-cell.pay2go-featured{
border-color:rgba(80,255,140,0.25);
background:rgba(80,255,140,0.03);
}
.pay2go-price{
font-family:var(--f-display);
font-size:clamp(2rem, 4vw, 2.6rem);
font-weight:700;
letter-spacing:-0.025em;
color:var(--silver);
line-height:1;
display:inline-flex;
align-items:baseline;
gap:2px;
}
.pay2go-price .cur{
font-size:0.55em;
color:var(--silver-3);
font-weight:500;
margin-right:1px;
}
.pay2go-cell.pay2go-featured .pay2go-price{ color:var(--signal) }
.pay2go-unit{
font-family:var(--f-mono);
font-size:10.5px;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--silver-3);
margin-bottom:4px;
}
.pay2go-desc{
font-size:12.5px;
line-height:1.55;
color:var(--silver-2);
}
.pay2go-foot{
display:flex;
align-items:center;
gap:8px;
padding:14px 36px;
border-top:1px solid var(--line);
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.06em;
color:var(--silver-3);
}
.pay2go-foot-eye{
color:var(--signal);
font-size:8px;
}
@media (max-width:980px){
.pay2go-inner{ grid-template-columns:1fr; padding:28px 24px 22px; gap:22px }
.pay2go-foot{ padding:12px 24px; font-size:10.5px; line-height:1.5 }
}
@media (max-width:560px){
.pay2go-prices{ grid-template-columns:1fr; gap:10px }
.pay2go-cell{ padding:18px 16px 16px }
.pay2go-price{ font-size:1.9rem }
.pay2go-h{ font-size:1.3rem }
.pay2go-sub{ font-size:13px }
}
/* ═══════════════════════════════════════════════════════════════════
TESTIMONIALS
═══════════════════════════════════════════════════════════════════ */
.test-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
}
.test-card{
padding:32px 28px;
border:1px solid var(--line-2);
border-radius:14px;
background:var(--bg-2);
display:flex;
flex-direction:column;
gap:22px;
position:relative;
}
.test-quote{
font-family:var(--f-display);
font-size:42px;
line-height:1;
color:var(--signal);
font-weight:700;
}
.test-body{
font-size:15px;
line-height:1.6;
color:var(--silver-2);
flex:1;
}
.test-meta{
display:flex;
gap:12px;
align-items:center;
padding-top:18px;
border-top:1px solid var(--line);
}
.test-avatar{
width:42px;height:42px;
border-radius:50%;
background:var(--surface-2);
border:1px solid var(--line-3);
display:grid;place-items:center;
font-family:var(--f-display);
font-weight:700;
font-size:14px;
color:var(--silver);
}
.test-meta .meta-name{
font-size:14px;
font-weight:600;
color:var(--silver);
}
.test-meta .meta-role{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--silver-3);
}
/* ═══════════════════════════════════════════════════════════════════
AI CALLER TEASER
═══════════════════════════════════════════════════════════════════ */
.ai-section{
padding:clamp(80px, 12vw, 130px) var(--pad);
background:linear-gradient(180deg, var(--bg) 0%, #060606 100%);
position:relative;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.ai-grid{
display:grid;
grid-template-columns:1fr 1.1fr;
gap:64px;
align-items:center;
}
.ai-text{display:flex;flex-direction:column;gap:24px}
.ai-card{
position:relative;
border:1px solid var(--line-2);
border-radius:14px;
background:var(--bg-2);
overflow:hidden;
}
.ai-card-head{
padding:16px 20px;
border-bottom:1px solid var(--line);
display:flex;
justify-content:space-between;
align-items:center;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--silver-3);
}
.ai-call-status{
display:flex;align-items:center;gap:8px;
color:var(--signal);
}
.ai-call-status .dot{
width:8px;height:8px;border-radius:50%;
background:var(--signal);
box-shadow:0 0 8px var(--signal);
animation:pulse-dot 1.4s ease infinite;
}
.ai-card-body{
padding:24px 20px;
display:flex;
flex-direction:column;
gap:14px;
min-height:300px;
}
.ai-bubble{
padding:12px 16px;
border-radius:12px;
max-width:80%;
font-size:14px;
line-height:1.5;
}
.ai-bubble.is-ai{
background:rgba(224,224,224,0.06);
border:1px solid var(--line-2);
color:var(--silver);
align-self:flex-start;
border-bottom-left-radius:4px;
}
.ai-bubble.is-user{
background:var(--silver);
color:#000;
align-self:flex-end;
border-bottom-right-radius:4px;
}
.ai-bubble .who{
font-family:var(--f-mono);
font-size:9px;
letter-spacing:0.18em;
text-transform:uppercase;
margin-bottom:4px;
display:block;
color:inherit;
opacity:.6;
}
.ai-booked{
margin-top:auto;
padding:14px 16px;
border:1px solid var(--signal);
background:var(--signal-dim);
border-radius:8px;
display:flex;
align-items:center;
gap:10px;
font-family:var(--f-mono);
font-size:12px;
letter-spacing:0.08em;
color:var(--signal);
}
/* ═══════════════════════════════════════════════════════════════════
FAQ
═══════════════════════════════════════════════════════════════════ */
.faq-section{padding:clamp(80px, 12vw, 130px) var(--pad);}
.faq-grid{
border:1px solid var(--line);
border-radius:14px;
overflow:hidden;
}
.faq-item{
border-bottom:1px solid var(--line);
background:var(--bg);
transition:background .25s var(--ease);
}
.faq-item:last-child{border-bottom:none}
.faq-item summary{
cursor:pointer;
padding:24px 28px;
display:flex;
justify-content:space-between;
align-items:center;
gap:24px;
font-size:16px;
font-weight:600;
letter-spacing:-0.01em;
color:var(--silver);
list-style:none;
position:relative;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .q-num{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.14em;
color:var(--silver-4);
margin-right:12px;
}
.faq-item summary .q-icon{
width:30px;height:30px;
border:1px solid var(--line-3);
border-radius:50%;
display:grid;place-items:center;
flex-shrink:0;
transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.faq-item summary .q-icon::before,
.faq-item summary .q-icon::after{
content:'';
position:absolute;
background:var(--silver);
}
.faq-item summary .q-icon::before{width:12px;height:1.5px}
.faq-item summary .q-icon::after{width:1.5px;height:12px;transition:transform .25s var(--ease)}
.faq-item[open] summary .q-icon{
border-color:var(--signal);
transform:rotate(45deg);
}
.faq-item[open] summary .q-icon::before,
.faq-item[open] summary .q-icon::after{background:var(--signal)}
.faq-item:hover{background:rgba(255,255,255,0.015)}
.faq-content{
padding:0 28px 24px 28px;
font-size:14px;
line-height:1.65;
color:var(--silver-2);
max-width:80ch;
}
/* ═══════════════════════════════════════════════════════════════════
CTA BANNER
═══════════════════════════════════════════════════════════════════ */
.cta-banner{
position:relative;
padding:clamp(80px, 12vw, 130px) var(--pad);
text-align:center;
background:#060606;
overflow:hidden;
}
.cta-banner::before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,60,0,0.08), transparent 70%),
repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(224,224,224,0.02) 39px, rgba(224,224,224,0.02) 40px);
pointer-events:none;
}
.cta-inner{
position:relative;
max-width:880px;
margin:0 auto;
display:flex;
flex-direction:column;
align-items:center;
gap:28px;
}
.cta-banner h2{
font-family:var(--f-display);
font-size:clamp(2.25rem, 6vw, 5rem);
font-weight:700;
line-height:0.92;
letter-spacing:-0.04em;
color:var(--silver);
}
.cta-banner h2 em{
font-style:normal;
color:var(--signal);
}
.cta-banner p{
font-size:16px;
line-height:1.6;
color:var(--silver-2);
max-width:54ch;
}
.cta-banner .btn-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* ═══════════════════════════════════════════════════════════════════
FOOTER (Modem-animated reference)
═══════════════════════════════════════════════════════════════════ */
.footer{
position:relative;
padding:80px var(--pad) 0;
border-top:1px solid var(--line);
background:var(--bg);
overflow:hidden;
min-height:560px;
}
.footer-inner{
max-width:var(--max);
margin:0 auto;
position:relative;
z-index:5;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
}
.footer-brand{
display:flex;
align-items:center;
gap:10px;
font-family:var(--f-display);
font-size:28px;
font-weight:700;
color:var(--silver);
letter-spacing:-0.01em;
}
.footer-brand .mark{
width:38px;height:38px;
border:1px solid var(--line-3);
border-radius:8px;
display:grid;place-items:center;
}
.footer-brand .mark svg{width:20px;height:20px;color:var(--silver)}
.footer-tagline{
font-size:14px;
line-height:1.55;
color:var(--silver-3);
max-width:48ch;
}
.footer-links{
display:flex;
flex-wrap:wrap;
gap:24px;
justify-content:center;
margin-top:8px;
}
.footer-links a{
font-size:13px;
font-weight:500;
color:var(--silver-3);
transition:color .25s var(--ease);
}
.footer-links a:hover{color:var(--silver)}
.footer-socials{
display:flex;
gap:14px;
margin-top:8px;
}
.footer-socials a{
width:40px;height:40px;
border:1px solid var(--line-2);
border-radius:8px;
display:grid;place-items:center;
color:var(--silver-3);
transition:color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.footer-socials a:hover{
color:var(--signal);
border-color:var(--signal);
transform:translateY(-2px);
}
.footer-socials a svg{width:16px;height:16px}
/* Footer copyright */
.footer-bottom{
position:relative;
z-index:5;
margin-top:80px;
padding:24px var(--pad);
border-top:1px solid var(--line);
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:14px;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--silver-4);
max-width:var(--max);
margin-left:auto;
margin-right:auto;
}
/* Footer giant text background */
.footer-giant{
position:absolute;
left:50%;
bottom:130px;
transform:translateX(-50%);
font-family:var(--f-display);
font-weight:800;
font-size:clamp(4rem, 18vw, 18rem);
letter-spacing:-0.06em;
line-height:0.85;
background:linear-gradient(180deg, rgba(224,224,224,0.16), rgba(224,224,224,0.04) 60%, transparent);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
pointer-events:none;
user-select:none;
white-space:nowrap;
z-index:1;
}
/* Floating logo card (Modem ref) */
.footer-floating{
position:absolute;
left:50%;
bottom:90px;
transform:translateX(-50%);
width:96px;height:96px;
border:2px solid var(--line-3);
border-radius:24px;
background:rgba(20,20,20,0.85);
backdrop-filter:blur(10px);
display:grid;place-items:center;
z-index:6;
filter:drop-shadow(0 0 24px rgba(255,255,255,0.08));
}
.footer-floating .logo-inner{
width:64px;height:64px;
background:linear-gradient(135deg, var(--silver), var(--silver-3));
border-radius:14px;
display:grid;place-items:center;
box-shadow:0 8px 24px rgba(0,0,0,0.5);
}
.footer-floating .logo-inner svg{width:32px;height:32px;color:#000}
.footer-line{
position:absolute;
left:0;right:0;
bottom:118px;
height:1px;
background:linear-gradient(90deg, transparent, var(--line-3), transparent);
z-index:5;
pointer-events:none;
}
.footer-shadow{
position:absolute;
left:0;right:0;
bottom:80px;
height:140px;
background:linear-gradient(0deg, var(--bg) 0%, rgba(10,10,10,0.85) 30%, transparent 100%);
pointer-events:none;
z-index:4;
}
/* ═══════════════════════════════════════════════════════════════════
AUTH MODAL
═══════════════════════════════════════════════════════════════════ */
.auth-modal{
position:fixed;
inset:0;
z-index:300;
display:none;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(0,0,0,0.85);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
.auth-modal.open{display:flex}
.auth-card{
position:relative;
width:100%;
max-width:440px;
border:1px solid var(--line-2);
border-radius:16px;
background:linear-gradient(180deg, #161616, #0a0a0a);
padding:36px 32px 32px;
display:flex;
flex-direction:column;
gap:18px;
}
.auth-close{
position:absolute;
top:16px;right:16px;
width:32px;height:32px;
border:1px solid var(--line-3);
border-radius:50%;
display:grid;place-items:center;
color:var(--silver-3);
transition:all .2s var(--ease);
}
.auth-close:hover{color:var(--signal);border-color:var(--signal)}
.auth-close svg{width:14px;height:14px}
.auth-tag{
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--signal);
}
.auth-h{
font-family:var(--f-display);
font-size:24px;
font-weight:700;
color:var(--silver);
letter-spacing:-0.02em;
line-height:1.1;
}
.auth-sub{
font-size:13px;
line-height:1.55;
color:var(--silver-3);
}
.auth-field{display:flex;flex-direction:column;gap:6px}
.auth-field label{
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--silver-3);
}
.auth-field input{
width:100%;
padding:12px 14px;
border:1px solid var(--line-2);
border-radius:8px;
background:rgba(255,255,255,0.02);
color:var(--silver);
font-size:14px;
transition:border-color .2s var(--ease), background .2s var(--ease);
}
.auth-field input:focus{
outline:none;
border-color:var(--silver-3);
background:rgba(255,255,255,0.04);
}
.auth-err{
font-family:var(--f-mono);
font-size:11px;
color:var(--signal);
min-height:14px;
}
.auth-btn{
width:100%;
padding:14px;
background:var(--silver);
color:#000;
font-family:var(--f-sans);
font-weight:700;
font-size:13px;
letter-spacing:0.06em;
text-transform:uppercase;
border-radius:8px;
cursor:pointer;
transition:all .25s var(--ease);
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
.auth-btn:hover{background:var(--signal)}
.auth-btn:disabled{opacity:.5;cursor:not-allowed}
.auth-btn-ghost{
width:100%;
padding:13px;
background:transparent;
color:var(--silver-2);
border:1px solid var(--line-3);
border-radius:8px;
font-family:var(--f-sans);
font-size:13px;
font-weight:500;
cursor:pointer;
transition:all .25s var(--ease);
display:flex;align-items:center;justify-content:center;gap:10px;
}
.auth-btn-ghost:hover{border-color:var(--silver-2);color:var(--silver)}
.auth-btn-ghost svg{width:16px;height:16px}
.auth-divider{
position:relative;
text-align:center;
margin:6px 0;
}
.auth-divider::before{
content:'';
position:absolute;
inset:50% 0;
height:1px;
background:var(--line-2);
}
.auth-divider span{
position:relative;
background:#0e0e0e;
padding:0 12px;
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--silver-4);
}
.auth-step{display:none}
.auth-step.is-active{display:flex;flex-direction:column;gap:18px}
.auth-back{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--silver-3);
cursor:pointer;
display:inline-flex;align-items:center;gap:6px;
transition:color .2s var(--ease);
}
.auth-back:hover{color:var(--silver)}
.auth-back svg{width:12px;height:12px}
/* ═══════════════════════════════════════════════════════════════════
REVEAL ANIMATIONS
═══════════════════════════════════════════════════════════════════ */
[data-reveal]{
opacity:0;
transform:translateY(20px);
transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-revealed{
opacity:1;
transform:translateY(0);
}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.4s}
/* ═══════════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
.hero-content{grid-template-columns:1fr;gap:40px}
.hero-3d-stage{width:100%;opacity:.55;top:auto;bottom:0;height:55%}
.hero-right{max-width:520px}
/* On stacked layout the satellite image is the visual hero — keep it visible */
.hero-satellite-img{width:90%;opacity:1;filter:drop-shadow(0 24px 48px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(80,130,220,.22))}
}
@media (max-width:980px){
.nav-links{display:none}
.nav-toggle{display:flex}
.nav-cta .btn-primary{display:none}
.section-head{grid-template-columns:1fr;gap:20px}
.vs-grid,
.ai-grid{grid-template-columns:1fr;gap:1px}
.flow-grid{grid-template-columns:repeat(2, 1fr)}
.flow-step:nth-child(odd){border-left:none}
.flow-step{border-top:1px solid var(--line)}
.flow-step:nth-child(-n+2){border-top:none}
.aud-grid,
.pricing-grid,
.test-grid,
.stats-bar{grid-template-columns:1fr 1fr}
.stat-cell:nth-child(odd){border-left:none}
.stat-cell:nth-child(n+3){border-top:1px solid var(--line)}
.bf-row{grid-template-columns:1fr;gap:36px;padding:48px 0}
.bf-row.alt .bf-text{order:1}
.bf-row.alt .bf-visual{order:2}
}
@media (max-width:680px){
.hero{padding-top:96px;min-height:auto;padding-bottom:60px}
.hero-h1{font-size:clamp(2.4rem, 11vw, 3.6rem)}
.hero-sub{font-size:14px;line-height:1.55}
/* KPI strip — single horizontal row, ultra-compact */
.hero-kpi-strip{
grid-template-columns:auto 1fr 1fr 1fr;
border-radius:12px;
padding:5px;
gap:0;
overflow:hidden;
}
.hero-kpi-pill{
padding:7px 10px;
font-size:9.5px;
letter-spacing:0.08em;
gap:5px;
}
.hero-kpi-pill .dot{ width:5px;height:5px; }
.hero-kpi-cell{
padding:5px 6px;
border-left:1px solid var(--line);
border-top:none;
text-align:center;
align-items:center;
}
.hero-kpi-cell:first-child{border-left:none}
.hero-kpi-cell .k-label{ font-size:8px;letter-spacing:0.08em }
.hero-kpi-cell .k-value{ font-size:13px }
/* Hero satellite image — VISIBLE, properly placed above the headline area */
.hero-3d-stage{ height:38vh; bottom:auto; top:64px; opacity:.9 }
.hero-satellite-img{
width:78%;
opacity:1;
transform:translate(-50%, -50%);
filter:drop-shadow(0 18px 36px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(80,130,220,.28));
}
@keyframes heroSatFloat{
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, calc(-50% - 6px)) scale(1.01); }
}
/* Push hero text below the image area */
.hero-content{ padding-top:36vh }
.hero-left{ gap:22px }
.stats-bar,
.aud-grid,
.pricing-grid,
.test-grid{grid-template-columns:1fr}
.stat-cell{border-left:none;border-top:1px solid var(--line)}
.stat-cell:first-child{border-top:none}
.flow-grid{grid-template-columns:1fr}
.flow-step{border-left:none;border-top:1px solid var(--line)}
.flow-step:first-child{border-top:none}
.footer-bottom{justify-content:center;text-align:center}
.vs-col{padding:28px 22px}
.price-card,
.test-card,
.aud-card{padding:28px 22px}
.command-card{padding:24px 20px}
.auth-card{padding:28px 22px}
.footer-giant{font-size:clamp(3rem, 22vw, 6rem)}
.footer-floating{width:80px;height:80px}
.footer-floating .logo-inner{width:54px;height:54px}
}
@media (max-width:480px){
:root{--pad:18px}
.btn{padding:12px 20px;font-size:12px}
.console-content{aspect-ratio:4/3}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
}
.hero-3d-canvas{transform:rotateX(48deg) rotateZ(-20deg) scale(.92) !important}
}
/* ═══════════════════════════════════════════════════════════════════
INNER PAGE COMPONENTS
page-header, content-grid, terms blocks, contact form
═══════════════════════════════════════════════════════════════════ */
.page-hero{
position:relative;
padding:160px var(--pad) 80px;
overflow:hidden;
border-bottom:1px solid var(--line);
}
.page-hero::before{
content:'';
position:absolute;
inset:0;
background-image:radial-gradient(circle, rgba(224,224,224,0.06) 1px, transparent 1px);
background-size:24px 24px;
mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 90%);
-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 90%);
pointer-events:none;
}
.page-hero-inner{
position:relative;
z-index:2;
max-width:var(--max);
margin:0 auto;
display:grid;
grid-template-columns:1.2fr 1fr;
gap:60px;
align-items:end;
}
.page-hero-left{display:flex;flex-direction:column;gap:24px}
.page-hero-right{
display:flex;
flex-direction:column;
gap:14px;
padding-bottom:8px;
}
.page-hero h1{
font-family:var(--f-display);
font-weight:700;
font-size:clamp(2.5rem, 6vw, 5.5rem);
line-height:0.92;
letter-spacing:-0.04em;
color:var(--silver);
max-width:18ch;
}
.page-hero h1 em{
font-style:normal;
color:var(--silver-4);
font-weight:400;
}
.page-hero .lead{
font-size:clamp(1rem, 1.4vw, 1.18rem);
line-height:1.6;
color:var(--silver-2);
max-width:54ch;
}
.page-hero-meta{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:auto;
}
.page-hero-meta .meta-cell{
border:1px solid var(--line-2);
padding:18px 20px;
border-radius:8px;
background:rgba(255,255,255,0.015);
display:flex;
flex-direction:column;
gap:6px;
}
.page-hero-meta .meta-cell .lab{
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--silver-3);
}
.page-hero-meta .meta-cell .val{
font-family:var(--f-display);
font-size:22px;
font-weight:700;
color:var(--silver);
letter-spacing:-0.01em;
}
.page-hero-meta .meta-cell .val.signal{color:var(--signal)}
/* breadcrumb strip */
.crumbs{
display:flex;
align-items:center;
gap:8px;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--silver-3);
}
.crumbs a{color:var(--silver-3);transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--silver)}
.crumbs .sep{color:var(--silver-5)}
.crumbs .current{color:var(--signal)}
/* ─────────── Feature grid (features.html) ─────────── */
.feat-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:1px;
background:var(--line);
border:1px solid var(--line);
border-radius:14px;
overflow:hidden;
}
.feat-card{
padding:34px 28px;
background:var(--bg);
display:flex;
flex-direction:column;
gap:18px;
min-height:340px;
transition:background .25s var(--ease);
}
.feat-card:hover{background:var(--bg-2)}
.feat-card .feat-num{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.16em;
color:var(--signal);
}
.feat-card .feat-icon{
width:48px;height:48px;
border:1px solid var(--line-3);
border-radius:10px;
display:grid;place-items:center;
background:rgba(255,255,255,0.02);
}
.feat-card .feat-icon svg{width:22px;height:22px;color:var(--silver)}
.feat-card h3{
font-family:var(--f-display);
font-size:20px;
font-weight:700;
color:var(--silver);
letter-spacing:-0.01em;
line-height:1.15;
}
.feat-card p{
font-size:14px;
line-height:1.55;
color:var(--silver-2);
flex:1;
}
.feat-card ul{
list-style:none;
display:flex;
flex-direction:column;
gap:8px;
padding-top:14px;
border-top:1px solid var(--line);
}
.feat-card ul li{
display:flex;
align-items:center;
gap:10px;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.06em;
color:var(--silver-3);
}
.feat-card ul li svg{
width:12px;height:12px;
color:var(--signal);
flex-shrink:0;
}
/* ─────────── Step blocks (how-it-works.html) ─────────── */
.step-row{
display:grid;
grid-template-columns:80px 1fr;
gap:32px;
margin-bottom:64px;
}
.step-num-circle{
width:80px;height:80px;
border:1px solid var(--silver-3);
border-radius:50%;
display:grid;
place-items:center;
font-family:var(--f-display);
font-size:30px;
font-weight:700;
color:var(--silver);
position:relative;
}
.step-num-circle::before{
content:'';
position:absolute;
inset:-6px;
border:1px dashed var(--silver-5);
border-radius:50%;
animation:rotate-slow 18s linear infinite;
}
.step-row .step-body{display:flex;flex-direction:column;gap:14px}
.step-row .step-body .meta{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--signal);
}
.step-row .step-body h2{
font-family:var(--f-display);
font-size:clamp(1.5rem, 3vw, 2.4rem);
font-weight:700;
letter-spacing:-0.025em;
color:var(--silver);
line-height:1.05;
}
.step-row .step-body p{
font-size:15px;
line-height:1.65;
color:var(--silver-2);
max-width:60ch;
}
.step-frame{
margin-top:8px;
margin-left:112px;
margin-bottom:80px;
aspect-ratio:16/8;
border:1px solid var(--line-2);
border-radius:14px;
background:linear-gradient(135deg, var(--bg-2), #060606);
position:relative;
overflow:hidden;
}
.step-frame::before{
content:'';
position:absolute;
inset:0;
background:repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(224,224,224,0.025) 39px, rgba(224,224,224,0.025) 40px);
}
.step-frame .ph{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:14px;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.16em;
color:var(--silver-4);
}
.step-frame .ph .icon{
width:56px;height:56px;
border:1px dashed var(--silver-5);
border-radius:10px;
display:grid;place-items:center;
}
.step-frame .ph .icon svg{width:22px;height:22px}
/* ─────────── Contact form ─────────── */
.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:start;
}
.contact-info{display:flex;flex-direction:column;gap:32px}
.contact-info .info-block{display:flex;flex-direction:column;gap:8px}
.contact-info .info-block .lab{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--signal);
}
.contact-info .info-block .val{
font-size:18px;
font-weight:600;
color:var(--silver);
}
.contact-info .info-block a{
color:var(--silver);
border-bottom:1px solid var(--silver-4);
padding-bottom:1px;
transition:color .2s var(--ease), border-color .2s var(--ease);
}
.contact-info .info-block a:hover{color:var(--signal);border-color:var(--signal)}
.contact-form{
border:1px solid var(--line-2);
border-radius:14px;
padding:36px 32px;
background:linear-gradient(180deg, var(--bg-2), var(--bg));
display:flex;
flex-direction:column;
gap:18px;
}
.contact-form .form-row{display:flex;flex-direction:column;gap:6px}
.contact-form label{
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--silver-3);
}
.contact-form input,
.contact-form textarea,
.contact-form select{
width:100%;
padding:12px 14px;
border:1px solid var(--line-2);
border-radius:8px;
background:rgba(255,255,255,0.02);
color:var(--silver);
font-size:14px;
font-family:var(--f-sans);
transition:border-color .2s var(--ease), background .2s var(--ease);
}
.contact-form textarea{resize:vertical;min-height:120px;font-family:var(--f-sans)}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
outline:none;
border-color:var(--silver-3);
background:rgba(255,255,255,0.04);
}
.contact-form button{
margin-top:8px;
padding:14px;
background:var(--silver);
color:#000;
font-family:var(--f-sans);
font-weight:700;
font-size:13px;
letter-spacing:0.06em;
text-transform:uppercase;
border-radius:8px;
cursor:pointer;
transition:background .2s var(--ease);
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
.contact-form button:hover{background:var(--signal)}
.contact-form button svg{width:14px;height:14px}
/* ─────────── Long form prose (privacy, terms) ─────────── */
.prose{
max-width:760px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:28px;
}
.prose h2{
font-family:var(--f-display);
font-size:clamp(1.4rem, 2.4vw, 1.85rem);
font-weight:700;
color:var(--silver);
letter-spacing:-0.02em;
margin-top:24px;
}
.prose h3{
font-family:var(--f-sans);
font-size:17px;
font-weight:700;
color:var(--silver);
margin-top:18px;
letter-spacing:-0.01em;
}
.prose p,
.prose li{
font-size:15px;
line-height:1.7;
color:var(--silver-2);
}
.prose ul,
.prose ol{
padding-left:22px;
display:flex;
flex-direction:column;
gap:8px;
}
.prose strong{color:var(--silver);font-weight:600}
.prose a{
color:var(--silver);
border-bottom:1px solid var(--silver-4);
transition:color .2s var(--ease), border-color .2s var(--ease);
}
.prose a:hover{color:var(--signal);border-color:var(--signal)}
.prose hr{
border:none;
border-top:1px solid var(--line);
margin:8px 0;
}
.prose .updated{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--silver-4);
padding:14px 18px;
border:1px solid var(--line-2);
border-radius:8px;
background:rgba(255,255,255,0.015);
margin-bottom:14px;
}
/* ─────────── For Installer / Agency hero variants ─────────── */
.persona-hero{
position:relative;
padding:160px var(--pad) 80px;
border-bottom:1px solid var(--line);
overflow:hidden;
}
.persona-hero::before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(ellipse 60% 50% at 30% 30%, rgba(255,60,0,0.05), transparent 70%),
radial-gradient(circle, rgba(224,224,224,0.06) 1px, transparent 1px);
background-size:auto, 24px 24px;
mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
pointer-events:none;
}
.persona-hero-inner{
position:relative;
z-index:2;
max-width:var(--max);
margin:0 auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
.persona-hero-left{display:flex;flex-direction:column;gap:24px}
.persona-hero h1{
font-family:var(--f-display);
font-weight:700;
font-size:clamp(2.5rem, 6vw, 5rem);
line-height:0.92;
letter-spacing:-0.04em;
color:var(--silver);
}
.persona-hero h1 em{
font-style:normal;
color:var(--silver-4);
font-weight:400;
}
.persona-hero .lead{
font-size:clamp(1rem, 1.4vw, 1.15rem);
line-height:1.6;
color:var(--silver-2);
max-width:52ch;
}
.persona-stat-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:16px;
}
.persona-stat-grid .ps-cell{
border:1px solid var(--line-2);
padding:20px 22px;
border-radius:10px;
background:rgba(255,255,255,0.015);
display:flex;
flex-direction:column;
gap:6px;
}
.persona-stat-grid .ps-cell .lab{
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--silver-3);
}
.persona-stat-grid .ps-cell .val{
font-family:var(--f-display);
font-size:26px;
font-weight:700;
letter-spacing:-0.02em;
color:var(--silver);
}
.persona-stat-grid .ps-cell .val.signal{color:var(--signal)}
/* ─────────── ROI Section (pricing) ─────────── */
.roi-card{
border:1px solid var(--line-2);
border-radius:14px;
padding:40px;
background:linear-gradient(180deg, var(--bg-2), var(--bg));
max-width:880px;
margin:0 auto;
}
.roi-row{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
padding:14px 0;
border-bottom:1px solid var(--line);
font-size:14px;
}
.roi-row:last-child{border-bottom:none}
.roi-row .label{color:var(--silver-3);font-family:var(--f-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase}
.roi-row .industry{color:var(--silver-3)}
.roi-row .hizix{color:var(--silver);font-weight:600}
.roi-row .delta{color:var(--signal);font-weight:600;font-family:var(--f-mono);font-size:13px}
.roi-row.hd{border-bottom:1px solid var(--line-3);margin-bottom:8px;padding-bottom:14px}
.roi-row.total{
border-top:1px solid var(--line-3);
padding-top:18px;
margin-top:8px;
font-size:18px;
}
.roi-row.total .hizix{font-family:var(--f-display);font-size:24px}
.roi-row.total .delta{font-family:var(--f-display);font-size:20px}
/* Responsive for inner pages */
@media (max-width:980px){
.feat-grid{grid-template-columns:1fr 1fr}
.page-hero-inner,
.persona-hero-inner,
.contact-grid{grid-template-columns:1fr;gap:36px}
.step-row{grid-template-columns:60px 1fr;gap:18px}
.step-num-circle{width:60px;height:60px;font-size:24px}
.step-frame{margin-left:0}
}
@media (max-width:680px){
.feat-grid{grid-template-columns:1fr}
.roi-row{grid-template-columns:1fr;gap:4px;padding:12px 0}
.roi-row .label{margin-bottom:4px}
.step-row{grid-template-columns:1fr}
.page-hero-meta{grid-template-columns:1fr}
}
/* ═══════════════════════════════════════════════════════════════════
GLOBAL MOBILE HARDENING
No horizontal overflow. Touch targets. Edge-safe padding.
═══════════════════════════════════════════════════════════════════ */
html, body{
overflow-x:hidden;
width:100%;
max-width:100vw;
}
section, footer, nav, header, main, article, aside{
max-width:100vw;
}
.section-inner,
.hero-content,
.cta-inner,
.footer-inner,
.nav-inner,
.page-hero-inner,
.persona-hero-inner,
.contact-grid{
width:100%;
max-width:var(--max);
margin-left:auto;
margin-right:auto;
padding-left:var(--pad);
padding-right:var(--pad);
box-sizing:border-box;
}
/* Prevent any element from blowing out width on tiny screens */
@media (max-width:680px){
h1, h2, h3, h4{ overflow-wrap:break-word; word-wrap:break-word; hyphens:auto; }
pre, code, .tb-item, .badge, .price-tag, .feat-num, .card-num{ word-break:break-word; }
.hero-h1{ font-size:clamp(2.2rem, 11vw, 3.6rem); line-height:1.04; }
.h-section{ font-size:clamp(1.6rem, 7vw, 2.4rem); line-height:1.1; }
h1{ font-size:clamp(2rem, 9vw, 3.2rem)!important; line-height:1.06; }
.hero-cta-row{ flex-direction:column; width:100%; gap:10px; }
.hero-cta-row .btn{ width:100%; justify-content:center; }
.btn-row{ flex-direction:column; width:100%; gap:10px; }
.btn-row .btn{ width:100%; justify-content:center; }
.nav-cta .btn-primary{ display:none; } /* mobile-menu has its own */
.crumbs{ font-size:11px; }
.price-card{ padding:24px 20px; }
.price-amt .num{ font-size:clamp(2.2rem, 12vw, 3.4rem); }
.pricing-grid{ gap:14px; }
.test-grid, .aud-grid, .feat-grid{ gap:14px; }
.footer-giant{ font-size:clamp(2.2rem, 18vw, 4.8rem); }
.footer-inner{ padding-top:48px; padding-bottom:48px; }
.footer-bottom{ flex-direction:column; gap:8px; padding:18px var(--pad); }
.footer-links{ gap:14px 18px; flex-wrap:wrap; justify-content:center; }
.vs-col-footer .footer-num{ font-size:clamp(1.6rem, 8vw, 2.4rem); }
.stat-num{ font-size:clamp(2rem, 10vw, 3rem); }
.console-bar-right{ display:none; }
.ai-card{ padding:20px 16px; }
.ai-bubble{ font-size:13px; padding:10px 14px; }
}
/* iOS safe area */
@supports (padding: max(0px)){
.nav-inner{ padding-left:max(var(--pad), env(safe-area-inset-left)); padding-right:max(var(--pad), env(safe-area-inset-right)); }
.footer-bottom{ padding-bottom:max(18px, env(safe-area-inset-bottom)); }
}
/* Touch targets — min 44x44 */
@media (max-width:980px){
.nav-toggle{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.mobile-menu a,
.mobile-menu button{ min-height:44px; padding:12px 14px; }
.footer-socials a{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; }
.faq-item summary{ min-height:54px; padding-top:14px; padding-bottom:14px; }
}
/* ═══════════════════════════════════════════════════════════════════
PARENT COMPANY BAND — HiziX.io
Subtle "by HiziX" relationship band with website plug
═══════════════════════════════════════════════════════════════════ */
.parent-band{
position:relative;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
background:linear-gradient(180deg, transparent 0%, rgba(255,60,0,0.014) 50%, transparent 100%);
overflow:hidden;
}
.parent-band-inner{
max-width:var(--max);
margin:0 auto;
padding:64px var(--pad);
display:grid;
grid-template-columns:1.1fr 1fr;
gap:48px;
align-items:center;
}
.parent-band-left .metadata{ margin-bottom:14px; }
.parent-band h2{
font-family:var(--f-display);
font-size:clamp(1.7rem, 3.5vw, 2.6rem);
font-weight:700;
letter-spacing:-0.02em;
line-height:1.06;
margin-bottom:16px;
}
.parent-band h2 em{ color:var(--signal); font-style:normal; }
.parent-band p{
color:var(--silver-3);
line-height:1.6;
font-size:15px;
margin-bottom:24px;
max-width:48ch;
}
.parent-cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.parent-card{
position:relative;
border:1px solid var(--line-2);
border-radius:var(--radius-lg);
padding:32px;
background:linear-gradient(140deg, rgba(255,255,255,0.015), rgba(255,60,0,0.018));
display:flex;
flex-direction:column;
gap:18px;
}
.parent-card .meta-strip{
display:flex;
justify-content:space-between;
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.14em;
color:var(--silver-4);
border-bottom:1px solid var(--line);
padding-bottom:12px;
}
.parent-card .meta-strip .live{ color:var(--signal); display:inline-flex; align-items:center; gap:6px; }
.parent-card .meta-strip .live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 8px var(--signal); animation:pulse 1.6s infinite; }
.parent-card-rows{ display:flex; flex-direction:column; gap:14px; }
.parent-card-row{
display:flex;
align-items:flex-start;
gap:14px;
padding:12px 0;
border-bottom:1px dashed var(--line);
}
.parent-card-row:last-child{ border-bottom:none; }
.parent-card-row .pc-num{
font-family:var(--f-mono);
font-size:10px;
color:var(--silver-4);
letter-spacing:0.16em;
width:42px;
flex-shrink:0;
}
.parent-card-row .pc-text strong{ display:block; color:var(--silver); font-size:14px; margin-bottom:2px; }
.parent-card-row .pc-text span{ color:var(--silver-3); font-size:13px; line-height:1.45; }
@media (max-width:980px){
.parent-band-inner{ grid-template-columns:1fr; gap:28px; padding:48px var(--pad); }
}
@media (max-width:680px){
.parent-card{ padding:22px 18px; }
.parent-cta-row{ flex-direction:column; }
.parent-cta-row .btn{ width:100%; justify-content:center; }
}
/* ═══════════════════════════════════════════════════════════════════
24/7 CALL CENTER STRIP — Pure marketing band
═══════════════════════════════════════════════════════════════════ */
.alwayson-strip{
position:relative;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
background:#0a0a0a;
overflow:hidden;
}
.alwayson-strip::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(120% 80% at 50% 0%, rgba(255,60,0,0.06), transparent 60%);
pointer-events:none;
}
.alwayson-inner{
position:relative;
max-width:var(--max);
margin:0 auto;
padding:54px var(--pad);
display:grid;
grid-template-columns:auto 1fr auto;
gap:36px;
align-items:center;
}
.alwayson-clock{
display:flex;
align-items:center;
justify-content:center;
width:96px;
height:96px;
border:1px solid var(--line-2);
border-radius:50%;
position:relative;
flex-shrink:0;
}
.alwayson-clock::after{
content:"";
position:absolute; inset:8px;
border:1px dashed var(--line-2);
border-radius:50%;
animation:spin 24s linear infinite;
}
.alwayson-clock svg{ width:38px; height:38px; color:var(--signal); position:relative; z-index:1; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.alwayson-text .label{
font-family:var(--f-mono);
font-size:11px;
color:var(--signal);
letter-spacing:0.18em;
margin-bottom:6px;
display:flex; align-items:center; gap:8px;
}
.alwayson-text .label::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--signal); animation:pulse 1.4s infinite; }
.alwayson-text h3{
font-family:var(--f-display);
font-size:clamp(1.3rem, 2.6vw, 1.9rem);
font-weight:700;
letter-spacing:-0.01em;
line-height:1.1;
margin-bottom:6px;
}
.alwayson-text p{ color:var(--silver-3); font-size:14px; line-height:1.5; max-width:62ch; }
.alwayson-cta{ display:flex; flex-shrink:0; }
@media (max-width:980px){
.alwayson-inner{ grid-template-columns:1fr; gap:24px; padding:42px var(--pad); text-align:center; justify-items:center; }
.alwayson-text{ text-align:center; }
.alwayson-text .label{ justify-content:center; }
}
@media (max-width:680px){
.alwayson-clock{ width:76px; height:76px; }
.alwayson-clock svg{ width:28px; height:28px; }
}
/* ═══════════════════════════════════════════════════════════════════
SCREENSHOT FRAMES — for satellite, panel, lead-card images
When user drops an ![]()
in, it fits perfectly. Otherwise placeholder.
═══════════════════════════════════════════════════════════════════ */
.shot-frame{
position:relative;
border:1px solid var(--line-2);
border-radius:var(--radius-lg);
overflow:hidden;
background:#0d0d0d;
aspect-ratio:16/10;
}
.shot-frame img,
.shot-frame video{
width:100%; height:100%;
object-fit:cover;
display:block;
}
.shot-frame .shot-bar{
position:absolute; top:0; left:0; right:0;
display:flex; justify-content:space-between; align-items:center;
padding:10px 14px;
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.14em;
color:var(--silver-4);
background:linear-gradient(180deg, rgba(0,0,0,0.7), transparent);
z-index:2;
pointer-events:none;
}
.shot-frame .shot-bar .live{ color:var(--signal); display:inline-flex; align-items:center; gap:6px; }
.shot-frame .shot-bar .live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 6px var(--signal); animation:pulse 1.5s infinite; }
.shot-frame .shot-corner{
position:absolute; width:14px; height:14px; border:1px solid var(--silver-2); z-index:3;
}
.shot-frame .shot-corner.tl{ top:8px; left:8px; border-right:none; border-bottom:none; }
.shot-frame .shot-corner.tr{ top:8px; right:8px; border-left:none; border-bottom:none; }
.shot-frame .shot-corner.bl{ bottom:8px; left:8px; border-right:none; border-top:none; }
.shot-frame .shot-corner.br{ bottom:8px; right:8px; border-left:none; border-top:none; }
/* Three-up screenshot grid */
.shot-trio{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:16px;
margin-top:36px;
}
.shot-trio .shot-frame{ aspect-ratio:4/5; }
.shot-trio figcaption{
position:absolute; bottom:0; left:0; right:0;
padding:14px; z-index:2;
background:linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.14em;
color:var(--silver-2);
pointer-events:none;
}
@media (max-width:980px){
.shot-trio{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
.shot-trio{ grid-template-columns:1fr; gap:12px; }
}
/* ═══════════════════════════════════════════════════════════════════
YOUTUBE / VIDEO EMBED FRAME (for hero or section)
═══════════════════════════════════════════════════════════════════ */
.yt-frame{
position:relative;
border:1px solid var(--line-2);
border-radius:var(--radius-lg);
overflow:hidden;
background:#000;
aspect-ratio:16/9;
width:100%;
}
.yt-frame iframe,
.yt-frame video{
position:absolute; inset:0;
width:100%; height:100%;
border:none;
}
.yt-frame .yt-bar{
position:absolute; top:12px; left:12px; right:12px;
display:flex; justify-content:space-between;
font-family:var(--f-mono);
font-size:10px;
color:var(--silver);
letter-spacing:0.14em;
z-index:5;
pointer-events:none;
text-shadow:0 1px 4px rgba(0,0,0,0.8);
}
/* ═══════════════════════════════════════════════════════════════════
USPS BADGE — used to highlight USPS-verified status
═══════════════════════════════════════════════════════════════════ */
.usps-badge{
display:inline-flex; align-items:center; gap:8px;
padding:5px 11px;
border:1px solid var(--line-2);
border-radius:999px;
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.14em;
color:var(--silver-2);
}
.usps-badge svg{ width:12px; height:12px; color:var(--signal); }
/* ═══════════════════════════════════════════════════════════════════
AI CHATBOT — Floating widget on every page
Black/silver glass card, Halide signal accent on AI bubbles
═══════════════════════════════════════════════════════════════════ */
/* Launcher button — bottom right floating */
.cb-launcher{
position:fixed;
right:24px; bottom:24px;
z-index:300;
width:60px; height:60px;
border-radius:50%;
background:linear-gradient(135deg, #1a1a1a, #0a0a0a);
border:1px solid var(--line-3);
box-shadow:0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,60,0,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cb-launcher::before{
content:""; position:absolute;
inset:-2px;
border-radius:50%;
background:radial-gradient(circle at 30% 30%, rgba(255,60,0,0.25), transparent 70%);
opacity:0;
transition:opacity .3s var(--ease);
z-index:-1;
}
.cb-launcher:hover{
transform:translateY(-2px) scale(1.04);
box-shadow:0 22px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,60,0,0.18);
}
.cb-launcher:hover::before{ opacity:1; }
.cb-launcher svg{
width:24px; height:24px;
color:var(--silver);
}
.cb-launcher .cb-pulse{
position:absolute;
top:8px; right:8px;
width:10px; height:10px;
border-radius:50%;
background:var(--signal);
box-shadow:0 0 10px var(--signal);
animation:pulse 1.6s infinite;
}
.cb-launcher.is-open .cb-icon-chat{ display:none; }
.cb-launcher .cb-icon-close{ display:none; }
.cb-launcher.is-open .cb-icon-close{ display:block; }
.cb-launcher.is-open .cb-pulse{ display:none; }
/* Tooltip on hover */
.cb-launcher .cb-tip{
position:absolute;
right:74px; top:50%; transform:translateY(-50%) translateX(8px);
background:#0a0a0a;
border:1px solid var(--line-2);
padding:8px 14px;
border-radius:999px;
font-family:var(--f-mono);
font-size:11px;
letter-spacing:0.10em;
color:var(--silver-2);
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.cb-launcher:hover .cb-tip{
opacity:1;
transform:translateY(-50%) translateX(0);
}
.cb-launcher.is-open .cb-tip{ display:none; }
/* Main panel */
.cb-panel{
position:fixed;
right:24px; bottom:96px;
z-index:299;
width:400px;
max-width:calc(100vw - 32px);
height:600px;
max-height:calc(100vh - 120px);
background:rgba(12,12,12,0.94);
backdrop-filter:blur(28px) saturate(120%);
-webkit-backdrop-filter:blur(28px) saturate(120%);
border:1px solid var(--line-2);
border-radius:18px;
box-shadow:0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02);
display:flex;
flex-direction:column;
overflow:hidden;
opacity:0;
transform:translateY(16px) scale(0.96);
pointer-events:none;
transition:opacity .3s var(--ease), transform .35s var(--ease);
}
.cb-panel.is-open{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}
/* Header */
.cb-header{
position:relative;
padding:18px 20px;
border-bottom:1px solid var(--line);
background:linear-gradient(180deg, rgba(255,60,0,0.04), transparent);
flex-shrink:0;
}
.cb-header-row{
display:flex; justify-content:space-between; align-items:center;
}
.cb-header-brand{
display:flex; align-items:center; gap:10px;
}
.cb-header-mark{
width:32px; height:32px;
border-radius:8px;
background:linear-gradient(135deg, #1f1f1f, #0e0e0e);
border:1px solid var(--line-2);
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
position:relative;
}
.cb-header-mark::after{
content:"";
position:absolute;
inset:-2px;
border-radius:10px;
background:radial-gradient(circle, rgba(255,60,0,0.15), transparent 70%);
z-index:-1;
}
.cb-header-mark svg{ width:18px; height:18px; color:var(--signal); }
.cb-header-text .name{
font-family:var(--f-display);
font-size:13px;
font-weight:700;
letter-spacing:-0.005em;
color:var(--silver);
display:flex; align-items:center; gap:8px;
}
.cb-header-text .name .live{
display:inline-flex; align-items:center; gap:5px;
font-family:var(--f-mono);
font-size:9px;
font-weight:500;
letter-spacing:0.14em;
color:var(--signal);
}
.cb-header-text .name .live::before{
content:""; width:5px; height:5px; border-radius:50%;
background:var(--signal);
box-shadow:0 0 6px var(--signal);
animation:pulse 1.4s infinite;
}
.cb-header-text .role{
font-family:var(--f-mono);
font-size:10px;
letter-spacing:0.12em;
color:var(--silver-4);
margin-top:2px;
}
.cb-header-close{
width:28px; height:28px;
border-radius:50%;
background:transparent;
border:1px solid var(--line);
color:var(--silver-3);
cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:all .2s var(--ease);
}
.cb-header-close:hover{ background:var(--line); color:var(--silver); border-color:var(--line-3); }
.cb-header-close svg{ width:14px; height:14px; }
/* Messages area */
.cb-messages{
flex:1;
overflow-y:auto;
overflow-x:hidden;
padding:20px;
display:flex;
flex-direction:column;
gap:14px;
scrollbar-width:thin;
scrollbar-color:var(--line-3) transparent;
}
.cb-messages::-webkit-scrollbar{ width:6px; }
.cb-messages::-webkit-scrollbar-thumb{ background:var(--line-3); border-radius:3px; }
.cb-messages::-webkit-scrollbar-track{ background:transparent; }
/* Welcome / intro state */
.cb-intro{
padding:24px 8px 8px;
text-align:center;
}
.cb-intro h3{
font-family:var(--f-display);
font-size:18px;
letter-spacing:-0.01em;
color:var(--silver);
margin-bottom:8px;
line-height:1.2;
}
.cb-intro p{
font-size:13px;
color:var(--silver-3);
line-height:1.5;
margin-bottom:18px;
max-width:34ch;
margin-left:auto; margin-right:auto;
}
.cb-suggested{
display:flex;
flex-direction:column;
gap:8px;
margin-top:14px;
}
.cb-suggested-btn{
background:rgba(255,255,255,0.025);
border:1px solid var(--line);
color:var(--silver-2);
padding:10px 14px;
border-radius:10px;
font-family:var(--f-sans);
font-size:13px;
text-align:left;
cursor:pointer;
transition:all .2s var(--ease);
display:flex; align-items:center; gap:10px;
}
.cb-suggested-btn:hover{
background:rgba(255,60,0,0.06);
border-color:rgba(255,60,0,0.25);
color:var(--silver);
}
.cb-suggested-btn svg{ width:14px; height:14px; flex-shrink:0; color:var(--signal); }
/* Message bubbles */
.cb-msg{
display:flex;
gap:10px;
align-items:flex-start;
animation:cbFadeIn .35s var(--ease);
}
@keyframes cbFadeIn{
from{ opacity:0; transform:translateY(8px); }
to{ opacity:1; transform:translateY(0); }
}
.cb-msg.is-user{ flex-direction:row-reverse; }
.cb-msg-avatar{
width:28px; height:28px;
border-radius:8px;
background:#1a1a1a;
border:1px solid var(--line-2);
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
color:var(--silver-2);
font-family:var(--f-mono);
font-size:11px;
font-weight:600;
}
.cb-msg.is-ai .cb-msg-avatar{
background:linear-gradient(135deg, rgba(255,60,0,0.18), rgba(255,60,0,0.04));
border-color:rgba(255,60,0,0.3);
color:var(--signal);
}
.cb-msg.is-ai .cb-msg-avatar svg{ width:14px; height:14px; }
.cb-msg-bubble{
max-width:78%;
padding:11px 14px;
border-radius:14px;
font-size:13.5px;
line-height:1.5;
word-wrap:break-word;
overflow-wrap:break-word;
}
.cb-msg.is-ai .cb-msg-bubble{
background:rgba(255,255,255,0.04);
border:1px solid var(--line);
color:var(--silver);
border-top-left-radius:4px;
}
.cb-msg.is-user .cb-msg-bubble{
background:linear-gradient(135deg, rgba(255,60,0,0.14), rgba(255,60,0,0.06));
border:1px solid rgba(255,60,0,0.25);
color:var(--silver);
border-top-right-radius:4px;
}
.cb-msg-bubble strong{ color:var(--silver); font-weight:600; }
.cb-msg-bubble em{ color:var(--silver-2); font-style:normal; border-bottom:1px dotted var(--silver-4); }
.cb-msg-bubble a{ color:var(--signal); text-decoration:underline; text-decoration-color:rgba(255,60,0,0.4); }
.cb-msg-bubble a:hover{ text-decoration-color:var(--signal); }
.cb-msg-bubble ul, .cb-msg-bubble ol{ margin:6px 0 6px 18px; padding:0; }
.cb-msg-bubble li{ margin-bottom:3px; }
.cb-msg-bubble code{
background:rgba(0,0,0,0.4);
padding:1px 5px;
border-radius:4px;
font-family:var(--f-mono);
font-size:11px;
color:var(--signal-2);
}
/* Typing indicator */
.cb-typing{
display:flex; gap:4px;
padding:11px 14px;
align-items:center;
}
.cb-typing span{
width:6px; height:6px;
border-radius:50%;
background:var(--silver-3);
animation:cbBlink 1.2s infinite;
}
.cb-typing span:nth-child(2){ animation-delay:.2s; }
.cb-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes cbBlink{
0%, 60%, 100%{ opacity:.25; transform:translateY(0); }
30%{ opacity:1; transform:translateY(-3px); }
}
/* Error state */
.cb-error{
background:rgba(255,60,0,0.08);
border:1px solid rgba(255,60,0,0.25);
color:var(--silver);
padding:10px 14px;
border-radius:10px;
font-size:12px;
font-family:var(--f-mono);
letter-spacing:0.04em;
text-align:center;
}
.cb-error a{ color:var(--signal); text-decoration:underline; }
/* Input area */
.cb-input-wrap{
border-top:1px solid var(--line);
padding:14px 16px 16px;
background:rgba(0,0,0,0.3);
flex-shrink:0;
}
.cb-input-row{
display:flex; gap:8px; align-items:flex-end;
background:rgba(255,255,255,0.04);
border:1px solid var(--line-2);
border-radius:14px;
padding:8px 8px 8px 14px;
transition:border-color .2s var(--ease);
}
.cb-input-row:focus-within{
border-color:rgba(255,60,0,0.4);
background:rgba(255,255,255,0.05);
}
.cb-input{
flex:1;
background:none;
border:none;
outline:none;
color:var(--silver);
font-family:var(--f-sans);
font-size:13.5px;
line-height:1.4;
resize:none;
min-height:24px;
max-height:120px;
padding:4px 0;
}
.cb-input::placeholder{ color:var(--silver-4); }
.cb-send{
width:36px; height:36px;
border-radius:10px;
background:var(--signal);
border:none;
color:#000;
cursor:pointer;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
transition:all .2s var(--ease);
}
.cb-send:hover:not(:disabled){
background:var(--signal-2);
transform:scale(1.05);
}
.cb-send:disabled{
background:var(--silver-5);
color:var(--silver-4);
cursor:not-allowed;
}
.cb-send svg{ width:16px; height:16px; }
.cb-footer{
display:flex; justify-content:space-between; align-items:center;
margin-top:10px;
font-family:var(--f-mono);
font-size:9px;
letter-spacing:0.12em;
color:var(--silver-4);
}
.cb-footer a{ color:var(--silver-3); }
.cb-footer a:hover{ color:var(--signal); }
/* Mobile adjustments */
@media (max-width:560px){
.cb-launcher{ right:16px; bottom:16px; width:54px; height:54px; }
.cb-launcher svg{ width:22px; height:22px; }
.cb-launcher .cb-tip{ display:none; }
.cb-panel{
right:0; bottom:0;
width:100vw;
max-width:100vw;
height:100dvh;
max-height:100dvh;
border-radius:0;
border-left:none;
border-right:none;
border-bottom:none;
}
.cb-msg-bubble{ max-width:82%; font-size:14px; }
.cb-suggested-btn{ font-size:13.5px; padding:11px 14px; }
}
@supports (padding: max(0px)){
@media (max-width:560px){
.cb-input-wrap{ padding-bottom:max(16px, env(safe-area-inset-bottom)); }
.cb-launcher{ bottom:max(16px, env(safe-area-inset-bottom)); }
}
}
/* ═══════════════════════════════════════════════════════════════════
FREE TRIAL BADGE (next to ENTER SYSTEM)
Orange-glow militaristic chip — same vibe as the trial chip in /app
═══════════════════════════════════════════════════════════════════ */
.trial-badge{
display:inline-flex;
align-items:center;
gap:6px;
height:34px;
padding:0 11px 0 9px;
border-radius:8px;
background:linear-gradient(180deg, rgba(255,90,30,0.16), rgba(255,60,0,0.10));
border:1px solid rgba(255,90,30,0.42);
color:#ffd2bd;
font-family:var(--font-mono);
font-size:10.5px;
font-weight:800;
letter-spacing:0.16em;
text-transform:uppercase;
white-space:nowrap;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 0 14px rgba(255,90,30,0.22);
}
.trial-badge .pulse{
width:6px; height:6px; border-radius:50%;
background:#ff5a1e;
box-shadow:0 0 8px #ff5a1e, 0 0 14px rgba(255,90,30,0.5);
animation: trialBadgePulse 1.6s ease-in-out infinite;
}
@keyframes trialBadgePulse{
0%,100%{ opacity:.55; transform:scale(1); }
50% { opacity:1; transform:scale(1.25); }
}
.nav-cta{ display:flex; align-items:center; gap:10px; }
@media (max-width:980px){
.trial-badge{ display:none; } /* mobile menüde altta zaten var */
}
/* ═══════════════════════════════════════════════════════════════════
AUTH MODAL — NEW SIGNUP STEPS (phone, company, goal) + WELCOME BACK
Styles for the redesigned auth flow:
authStepWelcome → "Welcome back, {name}" + AI Caller ad + password
authStepSignup1 → email already in step 1, ask phone
authStepSignup2 → company name + goal
authStepLoading → 5s satellite loading screen
authStepDone → "Check your inbox" success screen
═══════════════════════════════════════════════════════════════════ */
.auth-step .auth-welcome-back{
display:flex; align-items:center; gap:12px;
padding:14px 16px;
border-radius:10px;
background:linear-gradient(180deg, rgba(80,180,120,0.10), rgba(80,180,120,0.05));
border:1px solid rgba(80,180,120,0.32);
margin-bottom:18px;
}
.auth-welcome-back .ic{
width:32px; height:32px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:rgba(80,180,120,0.20);
color:#7ee2a4; flex-shrink:0;
}
.auth-welcome-back .ic svg{ width:16px; height:16px; }
.auth-welcome-back .txt{ flex:1; min-width:0; }
.auth-welcome-back .txt b{ color:#fff; font-weight:800; }
.auth-welcome-back .txt small{
display:block; font-family:var(--font-mono);
font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
color:#7ee2a4; margin-top:2px;
}
/* HiziX brand block in modal (replaces the AI Caller ad) */
.auth-brand-block{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
margin:14px 0 18px;
padding:18px 16px;
border-radius:10px;
background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
border:1px solid var(--line);
}
.auth-brand-logo{
max-width:140px;
max-height:48px;
width:auto;
height:auto;
object-fit:contain;
filter:brightness(1.1);
}
.auth-brand-tag{
font-family:var(--font-mono);
font-size:9.5px;
font-weight:800;
letter-spacing:0.22em;
text-transform:uppercase;
color:rgba(255,255,255,0.5);
}
/* AI Caller upsell ad — small, premium, persuasive */
.auth-ad{
display:block;
margin:14px 0 18px;
padding:14px 16px;
border-radius:10px;
background:
radial-gradient(circle at 100% 0%, rgba(255,90,30,0.14), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border:1px solid rgba(255,90,30,0.28);
text-decoration:none;
color:inherit;
position:relative;
overflow:hidden;
}
.auth-ad::before{
content:''; position:absolute; top:0; right:0; bottom:0; width:80px;
background:linear-gradient(90deg, transparent, rgba(255,90,30,0.10));
pointer-events:none;
}
.auth-ad .auth-ad-row{
display:flex; align-items:center; gap:12px;
}
.auth-ad-icon{
width:38px; height:38px; border-radius:9px;
background:linear-gradient(180deg, rgba(255,90,30,0.30), rgba(255,60,0,0.18));
border:1px solid rgba(255,90,30,0.45);
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
color:#ffb893;
box-shadow:0 0 16px rgba(255,90,30,0.20);
}
.auth-ad-icon svg{ width:18px; height:18px; }
.auth-ad-body{ flex:1; min-width:0; }
.auth-ad-eye{
display:block;
font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.20em;
text-transform:uppercase; color:#ff8a5e; font-weight:800;
margin-bottom:3px;
}
.auth-ad-h{
font-size:13.5px; font-weight:700; color:#fff; line-height:1.35;
}
.auth-ad-h b{ color:#ffb893; font-weight:800; }
.auth-ad-cta{
display:inline-flex; align-items:center; gap:5px;
margin-top:6px;
font-family:var(--font-mono); font-size:10.5px; font-weight:800;
letter-spacing:0.14em; text-transform:uppercase;
color:#ffd2bd;
text-decoration:none;
}
.auth-ad-cta svg{ width:11px; height:11px; }
/* Bulletproof fallback: any SVG without explicit size inside the modal stays sane */
.auth-modal svg:not([width]):not([height]){ width:1em; height:1em; }
.auth-modal .auth-ad svg{ max-width:38px; max-height:38px; }
.auth-modal .auth-welcome-back svg{ max-width:20px; max-height:20px; }
/* Loading step (5-second satellite spinner) */
.auth-loading-wrap{
text-align:center;
padding:18px 0 8px;
}
.auth-loading-orb{
width:120px; height:120px;
margin:0 auto 22px;
position:relative;
}
.auth-loading-orb::before,
.auth-loading-orb::after,
.auth-loading-orb .ring{
content:''; position:absolute; inset:0;
border-radius:50%;
border:1.5px solid transparent;
animation: authLoadSpin 2.4s linear infinite;
}
.auth-loading-orb::before{
border-top-color:rgba(99,200,255,0.85);
border-right-color:rgba(99,200,255,0.35);
}
.auth-loading-orb::after{
inset:14px;
border-top-color:rgba(255,90,30,0.85);
border-left-color:rgba(255,90,30,0.30);
animation-direction:reverse;
animation-duration:1.8s;
}
.auth-loading-orb .ring{
inset:30px;
border-top-color:rgba(255,255,255,0.7);
animation-duration:1.4s;
}
.auth-loading-orb .core{
position:absolute; inset:46px;
border-radius:50%;
background:radial-gradient(circle, #4fc3f7 0%, #1a6f9c 70%, transparent 100%);
box-shadow:0 0 24px rgba(99,200,255,0.6);
animation: authLoadPulse 1.6s ease-in-out infinite;
}
@keyframes authLoadSpin{ to{ transform:rotate(360deg); } }
@keyframes authLoadPulse{
0%,100%{ transform:scale(1); opacity:.85; }
50% { transform:scale(1.18); opacity:1; }
}
.auth-load-status{
font-family:var(--font-mono);
font-size:11px; letter-spacing:0.20em; text-transform:uppercase;
color:#7eb8d4; margin-bottom:6px;
}
.auth-load-h{
font-size:18px; font-weight:800; color:#fff; margin-bottom:14px;
letter-spacing:-0.01em;
}
.auth-load-progress{
height:3px; border-radius:2px;
background:rgba(255,255,255,0.06);
overflow:hidden;
margin:0 auto;
max-width:240px;
}
.auth-load-progress-fill{
height:100%; width:0%;
background:linear-gradient(90deg, #4fc3f7, #ff5a1e);
box-shadow:0 0 10px rgba(99,200,255,0.5);
animation: authLoadFill 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}
@keyframes authLoadFill{ to{ width:100%; } }
/* Success / done step */
.auth-done-icon{
width:64px; height:64px;
margin:0 auto 18px;
border-radius:50%;
background:radial-gradient(circle, rgba(80,180,120,0.30) 0%, transparent 70%);
border:1.5px solid rgba(80,180,120,0.65);
display:flex; align-items:center; justify-content:center;
color:#7ee2a4;
box-shadow:0 0 24px rgba(80,180,120,0.30);
animation: authDonePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.auth-done-icon svg{ width:30px; height:30px; }
@keyframes authDonePop{
0% { transform:scale(.4); opacity:0; }
100% { transform:scale(1); opacity:1; }
}
.auth-done-h{ font-size:22px; font-weight:800; color:#fff; text-align:center; margin-bottom:10px; letter-spacing:-0.01em; }
.auth-done-sub{ font-size:14px; color:var(--silver); text-align:center; line-height:1.55; margin-bottom:18px; }
.auth-done-card{
padding:14px 16px;
border-radius:10px;
background:rgba(255,255,255,0.03);
border:1px solid var(--line);
text-align:left;
margin-bottom:18px;
}
.auth-done-row{
display:flex; justify-content:space-between; align-items:center;
padding:6px 0;
font-size:13px;
border-bottom:1px solid rgba(255,255,255,0.04);
}
.auth-done-row:last-child{ border-bottom:none; }
.auth-done-row .lbl{
font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.14em;
text-transform:uppercase; color:var(--txt-3);
}
.auth-done-row .val{ color:#fff; font-weight:600; }
/* ═══════════════════════════════════════════════════════════════════
📱 MARKETING PAGES — phone polish
Final touches for index/features/pricing/etc on small phones.
Most layout already handles 980px → 680px → 480px gracefully;
this pass tightens spacing on very small screens (≤420px) and
makes auth modal usable on phones.
═══════════════════════════════════════════════════════════════════ */
@media (max-width:560px){
/* Auth modal — phone-first */
.auth-modal{ padding:12px; }
.auth-card{
padding:24px 18px 18px;
max-height:calc(100vh - 24px);
overflow-y:auto;
}
.auth-h{ font-size:18px; line-height:1.25; }
.auth-sub{ font-size:13px; line-height:1.5; }
.auth-tag{ font-size:9.5px; }
.auth-field input,
.auth-field select{ font-size:14px; } /* iOS won't auto-zoom */
.auth-btn{ padding:13px 16px; font-size:13px; }
.auth-welcome-back{ padding:12px 14px; }
.auth-welcome-back .ic{ width:28px; height:28px; }
.auth-brand-block{ padding:14px 14px; }
.auth-brand-logo{ max-width:120px; max-height:38px; }
.auth-loading-orb{ width:96px; height:96px; }
.auth-loading-orb::after{ inset:11px; }
.auth-loading-orb .ring{ inset:24px; }
.auth-loading-orb .core{ inset:36px; }
.auth-load-h{ font-size:16px; }
/* Mobile menu — ensure it overlays correctly on full-height screens */
.mobile-menu{
top:60px;
max-height:calc(100dvh - 60px);
overflow-y:auto;
padding-bottom:24px;
}
}
@media (max-width:420px){
/* Hero section — tighter spacing on small phones */
.hero{ padding-top:84px; padding-bottom:40px; }
.hero-h1{ font-size:clamp(2rem, 10.5vw, 3rem); }
.hero-sub{ font-size:13px; line-height:1.55; }
/* KPI strip stays single-row even at 360px */
.hero-kpi-strip{ padding:4px; gap:0; border-radius:10px; }
.hero-kpi-pill{ padding:6px 8px; font-size:8.5px; gap:4px; }
.hero-kpi-cell{ padding:4px 4px; }
.hero-kpi-cell .k-label{ font-size:7.5px;letter-spacing:0.05em }
.hero-kpi-cell .k-value{ font-size:11.5px }
/* Hero satellite slightly smaller stage on tiny phones */
.hero-3d-stage{ height:34vh; }
.hero-satellite-img{ width:82%; }
.hero-content{ padding-top:32vh }
/* Auth modal — compact */
.auth-card{ padding:20px 14px 16px; }
.auth-h{ font-size:16px; }
}
/* ═══════════════════════════════════════════════════════════════════
NEW COMPONENTS (Redesign 2026)
═══════════════════════════════════════════════════════════════════ */
/* ─── Hero free-leads badge ─── */
.hero-free-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:8px 14px;
background:rgba(80,220,120,0.08);
border:1px solid rgba(80,220,120,0.35);
border-radius:100px;
font:600 11px/1 var(--f-mono);
letter-spacing:0.12em;
text-transform:uppercase;
color:#7fe89f;
width:fit-content;
margin-bottom:24px;
}
.hero-free-badge .dot{
width:8px;
height:8px;
border-radius:50%;
background:#50dc78;
box-shadow:0 0 12px rgba(80,220,120,0.6);
animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{
0%,100%{ opacity:1; transform:scale(1) }
50%{ opacity:.5; transform:scale(0.8) }
}
/* ─── Hero 3-step howto ─── */
.hero-howto{
display:flex;
flex-direction:column;
gap:10px;
margin-top:28px;
padding:20px 22px;
background:rgba(255,255,255,0.02);
border:1px solid var(--line);
border-radius:12px;
max-width:460px;
}
.howto-row{
display:flex;
align-items:center;
gap:14px;
}
.howto-step{
flex-shrink:0;
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,60,0,0.12);
border:1px solid rgba(255,60,0,0.35);
border-radius:50%;
color:var(--signal);
font:700 13px/1 var(--f-mono);
}
.howto-text{
color:var(--silver-2);
font-size:14px;
line-height:1.4;
}
.howto-text strong{ color:var(--silver); font-weight:600 }
/* ─── Honest Trust Strip (replaces fake logo marquee) ─── */
.trust-strip{
padding:48px var(--pad);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
background:rgba(255,255,255,0.015);
}
.trust-strip-inner{
max-width:var(--max);
margin:0 auto;
}
.trust-strip-label{
font:500 10px var(--f-mono);
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--silver-4);
margin-bottom:20px;
text-align:center;
}
.trust-strip-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:16px;
}
.trust-cell{
display:flex;
align-items:center;
gap:14px;
padding:18px 18px;
border:1px solid var(--line);
border-radius:10px;
background:rgba(255,255,255,0.02);
transition:border-color .25s, background .25s;
}
.trust-cell:hover{
border-color:var(--line-2);
background:rgba(255,255,255,0.035);
}
.tc-icon{
flex-shrink:0;
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
background:rgba(255,60,0,0.1);
color:var(--signal);
}
.tc-icon svg{ width:20px; height:20px }
.tc-body{
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
}
.tc-title{
font:600 13px var(--f-display);
color:var(--silver);
letter-spacing:-0.01em;
}
.tc-sub{
font:500 10px var(--f-mono);
color:var(--silver-3);
letter-spacing:0.06em;
}
@media (max-width:980px){
.trust-strip-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:600px){
.trust-strip-grid{ grid-template-columns:1fr }
}
/* ─── Founder section (replaces fake testimonials) ─── */
.founder-section{ position:relative }
.founder-card{
margin-top:20px;
padding:36px 36px 28px;
background:linear-gradient(180deg, rgba(255,60,0,0.04), rgba(255,255,255,0.015));
border:1px solid var(--line-2);
border-radius:14px;
position:relative;
overflow:hidden;
}
.founder-card::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:2px;
background:linear-gradient(90deg, transparent, var(--signal), transparent);
opacity:0.5;
}
.founder-card-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:18px;
margin-bottom:30px;
}
.founder-cell{
display:flex;
flex-direction:column;
gap:8px;
padding:18px 16px;
border:1px solid var(--line);
border-radius:10px;
background:rgba(255,255,255,0.02);
}
.founder-cell-icon{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
background:rgba(80,220,120,0.1);
color:#50dc78;
margin-bottom:6px;
}
.founder-cell-icon svg{ width:18px; height:18px }
.founder-cell-title{
font:700 14px var(--f-display);
color:var(--silver);
letter-spacing:-0.01em;
}
.founder-cell-text{
font-size:12.5px;
line-height:1.5;
color:var(--silver-3);
}
.founder-cta-row{
display:flex;
gap:14px;
flex-wrap:wrap;
justify-content:center;
padding-top:24px;
border-top:1px solid var(--line);
}
@media (max-width:980px){
.founder-card-grid{ grid-template-columns:repeat(2,1fr) }
.founder-card{ padding:28px 22px 22px }
}
@media (max-width:600px){
.founder-card-grid{ grid-template-columns:1fr }
}
/* ─── Pay-as-you-go PRIMARY band (now leads pricing) ─── */
.pay2go-primary{
border:2px solid rgba(80,220,120,0.35) !important;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(80,220,120,0.08), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)) !important;
position:relative;
box-shadow:0 0 40px rgba(80,220,120,0.06);
}
.pay2go-primary::before{
content:'';
position:absolute;
top:-1px; left:0; right:0;
height:3px;
background:linear-gradient(90deg, transparent, #50dc78, transparent);
}
.pay2go-tag-green{
background:rgba(80,220,120,0.15) !important;
color:#7fe89f !important;
border:1px solid rgba(80,220,120,0.4);
}
.pay2go-badge{
position:absolute;
top:-10px;
right:14px;
background:#50dc78;
color:#0a0a0a;
font:700 9px var(--f-mono);
letter-spacing:0.12em;
text-transform:uppercase;
padding:5px 10px;
border-radius:4px;
box-shadow:0 4px 12px rgba(80,220,120,0.35);
}
.pay2go-featured{ position:relative }
.pay2go-cta-row{
display:flex;
gap:12px;
flex-wrap:wrap;
justify-content:center;
padding:20px 24px 0;
margin-top:12px;
border-top:1px solid var(--line);
}
@media (max-width:600px){
.pay2go-cta-row{ flex-direction:column }
.pay2go-cta-row .btn{ width:100% }
}
/* ─── Plans secondary section head ─── */
.plans-secondary-head{
padding:24px 0;
}
.plans-secondary-head .metadata{
font:600 10px var(--f-mono);
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--silver-4);
}
/* ─── Community Solar teaser row (compact version of bf-row) ─── */
.community-teaser-row{
opacity:0.9;
}
.community-teaser-row .bf-text{ max-width:none }
/* ─── Auth modal: cleaner labels ─── */
/* Old: "ACCESS · STEP 01" — kept in HTML for backward compat,
but visually de-emphasized */
/* ─── Persona hero with image (matches page-hero-with-img) ─── */
.persona-hero-with-img{
min-height:480px;
display:flex;
align-items:center;
}
.persona-hero-img{
position:absolute;
right:-8%;
top:50%;
transform:translateY(-50%);
width:62%;
max-width:760px;
height:auto;
z-index:1;
pointer-events:none;
opacity:0.85;
filter:drop-shadow(0 30px 60px rgba(0,0,0,0.5));
-webkit-mask-image:linear-gradient(to left, black 55%, transparent 100%);
mask-image:linear-gradient(to left, black 55%, transparent 100%);
}
.persona-hero-img img{
width:100%;
height:auto;
display:block;
}
.persona-hero-with-img .persona-hero-inner{
position:relative;
z-index:2;
}
.persona-hero-with-img .persona-hero-right{
position:relative;
z-index:3;
}
@media (max-width: 980px){
.persona-hero-img{
opacity:0.35;
width:80%;
right:-12%;
}
}
@media (max-width: 700px){
.persona-hero-img{
opacity:0.22;
width:120%;
right:-30%;
top:auto;
bottom:-10%;
transform:none;
}
}
/* ─── Nav CTA "10 FREE" badge ─── */
.nav-cta-btn{ position:relative }
.nav-cta-badge{
display:inline-flex;
align-items:center;
padding:2px 6px;
margin-left:6px;
background:#50dc78;
color:#0a0a0a;
font:700 9px/1 var(--f-mono);
letter-spacing:0.08em;
border-radius:3px;
text-transform:uppercase;
}
/* ★ Hide badge from medium widths down — keeps "Get Started" + arrow visible
even when nav is crowded (1200px+ menu links sıkışıyor). */
@media (max-width:1280px){
.nav .nav-cta-badge{ display:none }
}
/* ★ Tighter nav-link padding from 1200px down so "Get Started" doesn't overflow */
@media (max-width:1200px){
.nav-inner{ gap:16px; }
.nav-links{ gap:0; }
.nav-links a{ padding:8px 8px; font-size:12px; }
}
@media (max-width:1080px){
.nav-links a{ padding:6px 6px; font-size:11.5px; }
.nav-cta-btn{ padding:9px 12px; font-size:12px; }
}
/* ─── Mobile sticky bottom CTA ─── */
.mobile-sticky-cta{
display:none;
}
@media (max-width:760px){
.mobile-sticky-cta{
display:block;
position:fixed;
bottom:0;
left:0;
right:0;
z-index:90;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,0.95) 30%);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
pointer-events:none;
}
.mobile-sticky-cta .btn{
pointer-events:auto;
width:100%;
justify-content:center;
box-shadow:0 8px 24px rgba(255,60,0,0.35);
}
/* Add bottom padding to body to prevent content being hidden behind sticky CTA */
body{ padding-bottom:80px; }
}
/* ─── Standalone "How to Start" guide block (reusable across pages) ─── */
.start-guide{
margin:48px auto;
max-width:880px;
padding:32px 36px;
background:linear-gradient(180deg, rgba(80,220,120,0.04), rgba(255,255,255,0.015));
border:1px solid rgba(80,220,120,0.25);
border-radius:14px;
position:relative;
overflow:hidden;
}
.start-guide::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:2px;
background:linear-gradient(90deg, transparent, #50dc78, transparent);
opacity:0.5;
}
.start-guide-head{
display:flex;
align-items:center;
gap:12px;
margin-bottom:22px;
}
.start-guide-icon{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(80,220,120,0.15);
color:#50dc78;
}
.start-guide-icon svg{ width:22px; height:22px }
.start-guide-title{
font:700 18px var(--f-display);
color:var(--silver);
letter-spacing:-0.02em;
}
.start-guide-steps{
display:flex;
flex-direction:column;
gap:14px;
margin-bottom:24px;
}
.start-guide-step{
display:flex;
align-items:flex-start;
gap:16px;
}
.start-guide-num{
flex-shrink:0;
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,60,0,0.12);
border:1px solid rgba(255,60,0,0.35);
border-radius:50%;
color:var(--signal);
font:700 14px/1 var(--f-mono);
}
.start-guide-text{
color:var(--silver-2);
font-size:14.5px;
line-height:1.6;
padding-top:5px;
}
.start-guide-text strong{ color:var(--silver); font-weight:600 }
.start-guide-cta{
display:flex;
justify-content:center;
padding-top:18px;
border-top:1px solid var(--line);
}
@media (max-width:600px){
.start-guide{ padding:24px 20px }
}
/* ═══════════════════════════════════════════════════════════════════
MOBILE TIGHTENING — ensure every section fits on phone (< 480px)
═══════════════════════════════════════════════════════════════════ */
/* Slightly larger phones first */
@media (max-width: 760px){
/* Section padding — reduce so content has breathing room */
.section,
.console-section,
.vs-section,
.pricing-section,
.faq-section,
.flow-section,
.video-section,
.ai-section,
.bf-section{
padding-left:max(16px, env(safe-area-inset-left));
padding-right:max(16px, env(safe-area-inset-right));
}
/* Hero text alignment + spacing */
.hero{ padding:96px 16px 48px; min-height:auto; }
.hero-left{ max-width:100%; gap:18px; }
.hero-sub{ font-size:14.5px; line-height:1.55; }
/* 3-step howto on mobile — compact */
.hero-howto{
padding:14px 16px;
gap:8px;
max-width:100%;
}
.howto-row{ gap:10px; }
.howto-step{ width:24px; height:24px; font-size:11px; }
.howto-text{ font-size:13px; line-height:1.4; }
/* Trust strip — already breakpoint at 600px, fine */
/* Founder card — bigger touch targets, smaller text */
.founder-card{ padding:24px 18px 20px; }
.founder-card-grid{ gap:12px; margin-bottom:22px; }
.founder-cell{ padding:14px 14px; }
.founder-cell-title{ font-size:13px; }
.founder-cell-text{ font-size:12px; }
.founder-cta-row .btn{ width:100%; justify-content:center; }
.founder-cta-row{ flex-direction:column; gap:10px; }
/* Pay-as-you-go primary band — stack prices */
.pay2go-inner{ flex-direction:column; gap:20px; }
.pay2go-prices{ grid-template-columns:1fr; gap:14px; }
.pay2go-cell{ padding:18px; }
.pay2go-h{ font-size:1.4rem; }
.pay2go-cta-row{
flex-direction:column;
gap:10px;
padding:18px 18px 0;
}
.pay2go-cta-row .btn{ width:100%; justify-content:center; }
/* Pricing grid — 1 col on mobile, not 2 (cards have lots of content) */
.pricing-grid{ grid-template-columns:1fr !important; gap:16px; }
.price-card{ padding:24px 20px; }
/* Plans secondary section head */
.plans-secondary-head{ padding:18px 0; }
/* Start guide on mobile */
.start-guide{
padding:22px 18px;
margin:32px auto;
}
.start-guide-head{ gap:10px; margin-bottom:18px; }
.start-guide-icon{ width:34px; height:34px; }
.start-guide-title{ font-size:15.5px; }
.start-guide-step{ gap:12px; }
.start-guide-num{ width:26px; height:26px; font-size:12px; }
.start-guide-text{ font-size:13.5px; padding-top:3px; }
.start-guide-cta .btn{ width:100%; justify-content:center; }
/* VS section — single column already at 980, just tighten padding */
.vs-col{ padding:24px 20px; }
.vs-col h3{ font-size:1.4rem; }
/* Audience cards on mobile - already 1 col? confirm */
.aud-grid{ grid-template-columns:1fr; gap:16px; }
.aud-card{ padding:24px 20px; }
/* Flow grid — single column on phone, was 2 at 980 */
.flow-grid{ grid-template-columns:1fr; }
.flow-step{
border-left:none;
border-top:1px solid var(--line);
padding:22px 18px;
}
.flow-step:first-child{ border-top:none; }
/* Test/stats grid — single col */
.test-grid,
.stats-bar{ grid-template-columns:1fr; }
.stat-cell{
border-left:none;
border-top:1px solid var(--line);
}
.stat-cell:first-child{ border-top:none; }
/* Console / dashboard preview frame — readable on phone */
.console-frame{ border-radius:8px; }
.console-bar{ padding:8px 12px; font-size:9px; }
.console-bar-left,
.console-bar-right{ font-size:9px; }
/* AI Caller chat card */
.ai-card{ padding:18px 16px; }
.ai-bubble{ font-size:13px; padding:10px 12px; }
/* Section heads & titles — tighter */
.h-section{
font-size:clamp(1.6rem, 6.5vw, 2.2rem) !important;
line-height:1.05;
}
.lead-text{ font-size:14px; }
/* CTA banner */
.cta-banner{ padding:60px 18px; }
.cta-banner h2{ font-size:clamp(1.7rem, 7vw, 2.4rem); }
.cta-banner .btn-row{ flex-direction:column; gap:10px; width:100%; }
.cta-banner .btn-row .btn{ width:100%; justify-content:center; }
/* Footer — keep readable */
.footer-inner{ padding:32px 18px; gap:20px; }
.footer-bottom{ padding:14px 18px; font-size:10px; flex-direction:column; gap:6px; text-align:center; }
.footer-links{ flex-wrap:wrap; gap:14px 18px; justify-content:center; font-size:12px; }
.footer-giant{ font-size:18vw !important; }
/* Page hero (sub-pages) — smaller H1 + tighter image on mobile */
.page-hero{ padding:96px 16px 48px; }
.page-hero h1{ font-size:clamp(2rem, 9vw, 3rem); line-height:1; }
.page-hero .lead{ font-size:14.5px; }
.page-hero-meta{ grid-template-columns:1fr 1fr; gap:10px; }
.page-hero-meta .meta-cell{ padding:12px 14px; }
.page-hero-meta .meta-cell .val{ font-size:18px; }
/* Persona hero meta */
.persona-stat-grid{ grid-template-columns:1fr 1fr; gap:10px; }
.ps-cell{ padding:12px 14px; }
/* Parent band — stack */
.parent-band-inner{ grid-template-columns:1fr; gap:32px; }
.parent-band-inner h2{ font-size:clamp(1.6rem, 7vw, 2.2rem); }
.parent-cta-row{ flex-direction:column; gap:10px; }
.parent-cta-row .btn{ width:100%; justify-content:center; }
/* Btn row throughout — full width */
.btn-row{ flex-direction:column; gap:10px; }
.btn-row .btn{ width:100%; justify-content:center; }
/* Roi card on mobile */
.roi-row{ grid-template-columns:1fr; gap:6px; padding:14px 16px; }
.roi-row .label{ font-weight:600; color:var(--silver); }
.roi-row .industry,
.roi-row .hizix{ padding-left:0; }
/* Brand logo on nav — show shorter on mobile */
.nav-brand{ font-size:13px; }
.nav-brand .mark{ width:28px; height:28px; }
/* Mobile menu — bigger touch targets, bolder */
.mobile-menu a{
font-family:var(--f-display);
font-weight:700;
font-size:15px;
padding:14px 18px;
}
}
/* Very small phones (< 380px — iPhone SE etc.) */
@media (max-width: 380px){
.hero-h1{ font-size:clamp(1.8rem, 10vw, 2.6rem); line-height:1; }
.page-hero h1{ font-size:clamp(1.8rem, 9vw, 2.6rem); }
.h-section{ font-size:clamp(1.4rem, 7vw, 2rem) !important; }
.nav-brand .mark{ width:26px; height:26px; }
.nav-brand{ font-size:12px; gap:8px; }
.btn{ font-size:12px; padding:12px 20px; }
.btn-primary{ padding-right:28px; }
.hero-kpi-cell .k-value{ font-size:11.5px; }
.hero-kpi-cell .k-label{ font-size:7.5px; }
.pay2go-price{ font-size:2.2rem; }
}
/* On very tight screens, hide the "SolarLead" word — just keep "HiziX" + icon */
@media (max-width: 420px){
.nav-brand{
font-size:11px;
letter-spacing:0.06em;
}
/* Two-line allowed only if needed — but with white-space:nowrap we force one line */
.nav-brand{ max-width:120px; overflow:hidden; }
.nav-cta-badge{ display:none; }
}