/* ===========================================================
DEFENDER POS — V3 · Dark Tactical · True Brand Palette
Co-brand: FinTech Payments
Brand colors per actual defenderpos.com hero
=========================================================== */
:root {
/* Deep navy/purple background system */
--bg-deepest: #0B0820;
--bg-deep: #120E2D;
--bg-base: #1A153A;
--bg-card: #221C48;
--bg-card-elev: #2A2455;
--bg-alt: #161033;
/* Borders / rules */
--rule: #2D2855;
--rule-bright: #3D3672;
--rule-soft: #1F1A40;
/* Primary brand: GOLD / AMBER (Defender POS hero CTA & logo) */
--gold: #BD8B1C;
--gold-bright: #D6A02E;
--gold-deep: #8E6614;
--gold-glow: rgba(214, 160, 46, 0.4);
/* Secondary CTA: Electric / Royal blue (Defender POS "Sign Up" button) */
--electric: #3D5AFE;
--electric-bright: #5B73FF;
--electric-deep: #2540D6;
/* Tactical signal colors */
--green: #4ADE80;
--amber-alert: #F5A623;
--red: #EF4444;
/* Decorative cyan accent (per dotted pattern in hero) */
--cyan: #6BC9D6;
/* Text */
--white: #FFFFFF;
--ash: #D8D5E8;
--slate-l: #9690B5;
--slate: #6E6890;
--slate-d: #4F4A75;
/* Typography */
--font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* 4px base grid */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
--s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;
/* Sharp tactical radii, but slightly softened (matches real site cards) */
--r: 6px;
--r-card: 9px;
--r-input: 0;
--container: 1240px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
font-family: var(--font);
color: var(--ash);
background: var(--bg-deepest);
line-height: 1.6;
font-size: 16px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--s-6);
position: relative;
}
/* ===========================================================
Atmospheric background system
=========================================================== */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 50% 60% at 50% -10%, rgba(189, 139, 28, 0.06) 0%, transparent 60%),
radial-gradient(ellipse 60% 70% at 100% 100%, rgba(61, 90, 254, 0.05) 0%, transparent 60%),
linear-gradient(180deg, var(--bg-base) 0%, var(--bg-deepest) 100%);
}
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.4;
background-image: url("data:image/svg+xml;utf8,");
mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 0%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 0%, transparent 90%);
}
/* ===========================================================
MIL-SPEC TYPOGRAPHIC ELEMENTS
=========================================================== */
.label {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--slate-l);
}
.label.gold { color: var(--gold-bright); }
.section-marker {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--slate-l);
text-transform: uppercase;
}
.section-marker::before,
.section-marker::after {
color: var(--gold-bright);
font-weight: 700;
}
.section-marker::before { content: '['; }
.section-marker::after { content: ']'; }
.h2 {
font-family: var(--font);
font-weight: 800;
font-size: clamp(34px, 4.6vw, 60px);
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--white);
text-transform: uppercase;
}
.h2 .em-gold { color: var(--gold-bright); }
.h2 .em-blue { color: var(--electric-bright); }
.lede {
font-size: 17px;
line-height: 1.65;
color: var(--slate-l);
max-width: 60ch;
}
/* Hand-drawn gold scribble underline accent (matches hero) */
.scribble {
position: relative;
display: inline-block;
white-space: nowrap;
}
.scribble::after {
content: '';
position: absolute;
left: -4%;
right: -4%;
bottom: -0.18em;
height: 0.22em;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
/* ===========================================================
BUTTONS — Gold primary, Electric Blue secondary (per real brand)
=========================================================== */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 26px;
border: 1px solid transparent;
border-radius: var(--r);
font-family: var(--font);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.10em;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
white-space: nowrap;
}
.btn-gold {
background: var(--gold);
color: var(--white);
box-shadow: 0 0 0 0 rgba(189, 139, 28, 0);
}
.btn-gold:hover {
background: var(--gold-bright);
transform: translateY(-1px);
box-shadow: 0 8px 24px -8px var(--gold-glow);
}
.btn-gold:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.btn-blue {
background: var(--electric);
color: var(--white);
}
.btn-blue:hover {
background: var(--electric-bright);
transform: translateY(-1px);
box-shadow: 0 8px 24px -8px rgba(61, 90, 254, 0.5);
}
.btn-ghost {
background: rgba(255,255,255,0.02);
color: var(--white);
border-color: var(--rule-bright);
}
.btn-ghost:hover { border-color: var(--gold); background: rgba(189, 139, 28, 0.08); transform: translateY(-1px); }
.btn .arrow { width: 14px; height: 14px; transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
/* Text-link secondary CTA — matches the partnership-card .links pattern */
.text-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 8px;
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-bright);
transition: color 0.2s ease;
}
.text-link:hover { color: var(--white); }
.text-link .arrow {
width: 14px;
height: 14px;
transition: transform 0.2s ease;
}
.text-link:hover .arrow { transform: translateX(3px); }
/* Pricing section footer — anchors the secondary text-link below the price cards */
.pricing-foot {
margin-top: var(--s-10);
text-align: center;
}
/* ===========================================================
CLASSIFICATION TOP BAR
=========================================================== */
.classification {
background: var(--bg-deepest);
border-bottom: 1px solid var(--rule-soft);
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--slate);
position: relative;
z-index: 60;
}
.classification-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 30px;
gap: var(--s-4);
}
.classification .left, .classification .right {
display: flex;
align-items: center;
gap: var(--s-4);
}
.classification .item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.pip-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 4px rgba(74,222,128,0.15), 0 0 12px rgba(74,222,128,0.5);
animation: blink 2.6s ease-in-out infinite;
}
.pip-dot.gold { background: var(--gold-bright); box-shadow: 0 0 0 4px rgba(214,160,46,0.18), 0 0 12px var(--gold-glow); }
.pip-dot.blue { background: var(--electric-bright); box-shadow: 0 0 0 4px rgba(91,115,255,0.18), 0 0 12px rgba(91,115,255,0.5); }
.classification .pip-dot { width: 6px; height: 6px; box-shadow: 0 0 0 2px rgba(74,222,128,0.2); }
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
.classification .right span:not(:last-child)::after {
content: '';
display: inline-block;
width: 1px; height: 10px;
background: var(--rule-bright);
margin-left: var(--s-4);
vertical-align: middle;
}
/* ===========================================================
NAVIGATION
=========================================================== */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(11, 8, 32, 0.85);
backdrop-filter: saturate(160%) blur(16px);
-webkit-backdrop-filter: saturate(160%) blur(16px);
border-bottom: 1px solid var(--rule-soft);
}
/* Mirror the hero-grid columns (1.05fr / 0.95fr with s-16 gap) so the
nav CTA (in column 2) aligns directly above the hero image's left edge */
.nav-inner {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--s-16);
align-items: center;
height: 104px;
}
.lockup {
display: flex;
align-items: center;
gap: var(--s-5);
}
.lockup-primary {
display: flex;
align-items: center;
gap: 10px;
}
/* Defender logo stays in its native gold. DO NOT invert */
.lockup-primary img {
height: 76px;
width: auto;
}
.lockup-divider {
width: 1px;
height: 44px;
background: var(--rule-bright);
}
.lockup-partner {
display: flex;
align-items: center;
gap: 10px;
}
.lockup-partner-tag {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--slate-l);
line-height: 1.2;
}
.lockup-partner img {
height: 38px;
width: auto;
}
.nav-links {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--s-8);
list-style: none;
padding: 0;
margin: 0;
}
.nav-links a {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--slate-l);
transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--gold-bright); }
.nav-cta {
padding: 16px 32px !important;
font-family: var(--mono) !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
background: var(--gold) !important;
color: var(--white) !important;
border-radius: var(--r);
box-shadow: 0 6px 16px -6px var(--gold-glow);
transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.nav-cta:hover { background: var(--gold-bright) !important; transform: translateY(-1px); box-shadow: 0 10px 24px -8px var(--gold-glow); }
.menu-btn {
display: none;
background: none;
border: 0;
cursor: pointer;
width: 32px; height: 32px;
flex-direction: column;
justify-content: center;
gap: 5px;
padding: 0;
}
.menu-btn span {
display: block;
width: 22px; height: 2px;
background: var(--white);
}
/* ===========================================================
HERO
=========================================================== */
.hero {
position: relative;
padding: var(--s-20) 0 var(--s-24);
overflow: hidden;
}
/* Warm gold gradient blob — top-left (matches real hero) */
.hero::before {
content: '';
position: absolute;
top: -200px; left: -300px;
width: 900px; height: 900px;
background: radial-gradient(circle, rgba(189, 139, 28, 0.231) 0%, rgba(189, 139, 28, 0.0525) 35%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* Cyan/teal dotted pattern decoration (bottom-right) */
.hero-dots {
position: absolute;
bottom: 60px; right: 40px;
width: 220px; height: 160px;
background-image: radial-gradient(circle, rgba(107, 201, 214, 0.55) 1.5px, transparent 1.8px);
background-size: 14px 14px;
mask-image: linear-gradient(135deg, transparent 0%, #000 50%, #000 100%);
-webkit-mask-image: linear-gradient(135deg, transparent 0%, #000 50%, #000 100%);
pointer-events: none;
z-index: 0;
}
/* Curved gold lines decoration (matches "fingerprint" element) — anchored
to the top-left corner of the hero as a peripheral brand accent,
clear of the headline reading zone. */
.hero-curves {
position: absolute;
top: 32px; left: 2%;
width: 96px; height: 96px;
opacity: 0.7;
z-index: 1;
pointer-events: none;
}
/* Subtle reticle behind terminal */
.hero-reticle {
position: absolute;
top: 50%; right: -160px;
transform: translateY(-50%);
width: 720px; height: 720px;
opacity: 0.05;
pointer-events: none;
z-index: 0;
}
.hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--s-16);
align-items: center;
}
/* Prominent Defender brand stamp in hero */
.hero-brand-stamp {
display: flex;
align-items: center;
gap: var(--s-4);
margin-bottom: var(--s-6);
padding-bottom: var(--s-5);
border-bottom: 1px dashed var(--rule-bright);
}
.hero-brand-stamp img {
height: 90px;
width: auto;
filter: drop-shadow(0 0 24px rgba(214, 160, 46, 0.35));
}
.hero-brand-stamp .stamp-meta {
display: flex;
flex-direction: column;
gap: 4px;
padding-left: var(--s-4);
border-left: 2px solid var(--gold);
}
.hero-brand-stamp .stamp-meta-tag {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-bright);
}
.hero-brand-stamp .stamp-meta-name {
font-family: var(--font);
font-size: 18px;
font-weight: 700;
color: var(--white);
letter-spacing: -0.005em;
line-height: 1.1;
}
.hero-brand-stamp .stamp-meta-sub {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate-l);
}
/* ===========================================================
CAPABILITIES BANNER — light band between hero and trust strip
Full-width white background with 5 hover-lifting tiles
=========================================================== */
.capabilities-banner {
background: var(--white);
padding: var(--s-12) 0;
position: relative;
z-index: 2;
border-top: 1px solid var(--rule-soft);
border-bottom: 1px solid var(--rule-soft);
}
.capabilities-banner::before {
/* Gold light bar along the top edge — echoes the trust-banner accent */
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
opacity: 0.65;
}
.cap-strip {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
padding: 0;
margin: 0;
}
.cap-tile {
padding: var(--s-5);
background: var(--white);
border: 1px solid #E5E8EF;
border-radius: var(--r-card);
display: flex;
flex-direction: column;
gap: var(--s-3);
cursor: default;
outline: none;
transition:
border-color 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}
.cap-tile:hover,
.cap-tile:focus-visible {
border-color: var(--gold);
background: #FFFCF5;
transform: translateY(-4px) scale(1.015);
box-shadow: 0 16px 32px -18px rgba(189, 139, 28, 0.4);
}
.cap-tile-icon {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
background: rgba(189, 139, 28, 0.10);
border-radius: 8px;
transition:
background 0.25s ease,
transform 0.25s ease,
color 0.25s ease,
filter 0.25s ease;
}
.cap-tile:hover .cap-tile-icon,
.cap-tile:focus-visible .cap-tile-icon {
background: rgba(189, 139, 28, 0.18);
color: var(--gold);
transform: scale(1.08);
filter: drop-shadow(0 0 6px rgba(189, 139, 28, 0.35));
}
.cap-tile-headline {
font-family: var(--font);
font-size: 15px;
font-weight: 700;
color: var(--bg-deepest);
letter-spacing: -0.005em;
line-height: 1.25;
}
.cap-tile-detail {
font-family: var(--font);
font-size: 13px;
line-height: 1.55;
color: var(--slate);
}
@media (max-width: 1100px) {
.cap-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.cap-strip { grid-template-columns: 1fr; gap: var(--s-2); }
.cap-tile { padding: var(--s-4); }
}
/* When the brand stamp + eyebrow are nested under the hero photo,
drop the dashed divider and bottom margin so they sit as a tight
attribution block, not as headline runway. */
.hero-photo-attribution {
margin-top: var(--s-8);
padding-top: var(--s-5);
border-top: 1px dashed var(--rule-bright);
display: flex;
flex-direction: column;
gap: var(--s-4);
}
.hero-photo-attribution .hero-brand-stamp {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.hero-photo-attribution .hero-brand-stamp img {
height: 96px;
}
.hero-photo-attribution .hero-brand-stamp .stamp-meta-name {
font-size: 19px;
}
.hero-photo-attribution .hero-eyebrow {
margin-bottom: 0;
}
.hero-eyebrow {
display: flex;
align-items: center;
gap: var(--s-3);
flex-wrap: wrap;
margin-bottom: var(--s-6);
}
.partnership-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 18px 8px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--rule-bright);
border-radius: 999px;
}
.partnership-pill img {
height: 40px;
width: auto;
}
.partnership-pill .pp-text {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--slate-l);
}
.partnership-pill .pp-text b {
color: var(--white);
font-weight: 700;
}
.hero-eyebrow-label {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--white);
}
.hero h1 {
font-family: var(--font);
font-size: clamp(46px, 6vw, 80px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--white);
margin-bottom: var(--s-6);
}
.hero h1 .brand {
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.hero-sub {
font-size: 18px;
line-height: 1.65;
color: var(--ash);
max-width: 560px;
margin-bottom: var(--s-8);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
margin-bottom: var(--s-10);
}
.hero-tagline {
font-family: var(--font);
font-size: 18px;
font-weight: 700;
color: var(--white);
letter-spacing: -0.005em;
margin-bottom: var(--s-6);
}
.hero-tagline .accent {
color: var(--gold-bright);
}
.hero-meta {
display: grid;
grid-template-columns: repeat(3, auto);
gap: var(--s-8);
padding-top: var(--s-6);
border-top: 1px dashed var(--rule-bright);
}
.hero-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.hero-meta-item .num {
font-family: var(--font);
font-weight: 800;
font-size: 28px;
color: var(--white);
letter-spacing: -0.02em;
line-height: 1;
}
.hero-meta-item .num .unit {
font-size: 14px;
color: var(--gold-bright);
font-weight: 700;
margin-left: 2px;
}
.hero-meta-item .lbl {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate);
}
/* Hero terminal mockup */
.hero-terminal {
position: relative;
background: var(--bg-card);
border: 1px solid var(--rule-bright);
border-radius: var(--r-card);
box-shadow:
0 0 0 1px rgba(189, 139, 28, 0.08),
0 40px 80px -30px rgba(0,0,0,0.7),
0 10px 30px -10px rgba(189, 139, 28, 0.18);
overflow: hidden;
}
.term-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--bg-deep);
border-bottom: 1px solid var(--rule-soft);
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate-l);
}
.term-header .left {
display: flex;
align-items: center;
gap: 10px;
}
.term-header .lights {
display: flex; gap: 5px;
}
.term-header .lights span {
width: 8px; height: 8px;
background: var(--rule-bright);
}
.term-header .right {
color: var(--green);
display: inline-flex;
align-items: center;
gap: 6px;
}
.term-header .right .pip-dot {
width: 6px; height: 6px;
box-shadow: 0 0 0 3px rgba(74,222,128,0.15);
}
.term-tabs {
display: flex;
border-bottom: 1px solid var(--rule-soft);
overflow-x: auto;
}
.term-tab {
padding: 12px 16px;
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate);
border-right: 1px solid var(--rule-soft);
position: relative;
white-space: nowrap;
}
.term-tab.active {
color: var(--white);
background: var(--bg-card-elev);
}
.term-tab.active::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--gold-bright);
box-shadow: 0 0 12px var(--gold-glow);
}
.term-body {
padding: var(--s-5);
}
.term-section-title {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: var(--s-3);
}
.term-section-title h4 {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
color: var(--white);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.term-section-title small {
font-family: var(--mono);
font-size: 10px;
color: var(--slate);
letter-spacing: 0.06em;
}
.term-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: var(--s-4);
padding: var(--s-3) 0;
border-bottom: 1px solid var(--rule-soft);
align-items: center;
}
.term-row:last-of-type { border-bottom: 0; }
.term-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 3px;
}
.term-value {
font-family: var(--font);
font-size: 13px;
font-weight: 600;
color: var(--white);
}
.term-value small {
display: block;
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
color: var(--slate-l);
margin-top: 2px;
letter-spacing: 0.04em;
}
.pill-mono {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 2px;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
border: 1px solid;
}
.pill-mono.green { color: var(--green); border-color: rgba(74,222,128,0.3); background: rgba(74,222,128,0.06); }
.pill-mono.amber { color: var(--amber-alert); border-color: rgba(245,166,35,0.3); background: rgba(245,166,35,0.06); }
.pill-mono.gold { color: var(--gold-bright); border-color: rgba(214,160,46,0.4); background: rgba(214,160,46,0.08); }
.pill-mono.blue { color: var(--electric-bright); border-color: rgba(91,115,255,0.4); background: rgba(91,115,255,0.08); }
.pill-mono.slate { color: var(--slate-l); border-color: var(--rule-bright); background: rgba(255,255,255,0.02); }
.term-totals {
margin-top: var(--s-5);
padding: var(--s-4);
background: var(--bg-deep);
border: 1px solid var(--rule-soft);
border-radius: var(--r);
display: flex;
justify-content: space-between;
align-items: center;
}
.term-totals-amt {
font-family: var(--font);
font-size: 28px;
font-weight: 800;
color: var(--white);
letter-spacing: -0.02em;
line-height: 1;
}
.term-totals small {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
color: var(--slate);
display: block;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 4px;
}
.term-charge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: var(--gold);
color: var(--white);
border-radius: var(--r);
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
box-shadow: 0 0 20px rgba(189, 139, 28, 0.35);
}
.hero-id {
position: absolute;
bottom: -28px;
left: -28px;
background: var(--bg-card);
border: 1px solid var(--rule-bright);
border-radius: var(--r);
padding: 12px 16px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 20px 40px -16px rgba(0,0,0,0.7);
z-index: 3;
}
.hero-id .icon {
width: 36px; height: 36px;
border-radius: var(--r);
background: rgba(74,222,128,0.10);
border: 1px solid rgba(74,222,128,0.3);
display: flex; align-items: center; justify-content: center;
color: var(--green);
}
.hero-id .copy strong {
display: block;
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--white);
}
.hero-id .copy span {
font-family: var(--mono);
font-size: 10px;
color: var(--slate-l);
letter-spacing: 0.04em;
}
/* ===========================================================
HERO PHOTO — v4 · real Defender POS user behind the counter
Anchors the hero in a real gun-store environment with a
compact transaction-proof card overlaid on the photo
=========================================================== */
.hero-photo {
position: relative;
padding: var(--s-6) 0 var(--s-10);
}
.hero-photo-frame {
position: relative;
margin: 0;
border-radius: var(--r-card);
overflow: hidden;
background: var(--bg-card);
border: 1px solid var(--rule-bright);
box-shadow:
0 0 0 1px rgba(189, 139, 28, 0.10),
0 60px 100px -40px rgba(0, 0, 0, 0.85),
0 30px 60px -20px rgba(189, 139, 28, 0.18);
/* v5: landscape image (POS UI baked in) — natural 4:3 aspect */
aspect-ratio: 4 / 3;
max-height: 620px;
}
.hero-photo-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
/* Subtle tactical color treatment — desaturate slightly */
filter: contrast(1.04) saturate(0.95) brightness(0.96);
}
/* v5: lighter gradient — no overlay card to support, just atmospheric edge vignette */
.hero-photo-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 90% 70% at 50% 50%, transparent 50%, rgba(11, 8, 32, 0.45) 100%),
linear-gradient(180deg, rgba(11, 8, 32, 0.08) 0%, transparent 20%, transparent 80%, rgba(11, 8, 32, 0.25) 100%);
pointer-events: none;
mix-blend-mode: multiply;
}
/* Tactical corner brackets — gold "L" marks at all four corners of the frame */
.hero-photo-bracket {
position: absolute;
width: 22px;
height: 22px;
border: 2px solid var(--gold-bright);
pointer-events: none;
filter: drop-shadow(0 0 6px var(--gold-glow));
}
.hero-photo-bracket.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.hero-photo-bracket.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.hero-photo-bracket.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.hero-photo-bracket.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
/* "LIVE" pip overlay top-center */
.hero-photo-pip {
position: absolute;
top: 22px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: rgba(11, 8, 32, 0.78);
border: 1px solid rgba(214, 160, 46, 0.45);
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-bright);
white-space: nowrap;
z-index: 3;
}
/* Floating compact transaction card on top of the photo */
.hero-photo-card {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
background: rgba(20, 16, 46, 0.92);
border: 1px solid var(--rule-bright);
border-radius: var(--r);
padding: var(--s-4);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow:
0 0 0 1px rgba(189, 139, 28, 0.10),
0 20px 40px -16px rgba(0, 0, 0, 0.7);
z-index: 3;
}
.hero-photo-card-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--s-3);
margin-bottom: var(--s-3);
border-bottom: 1px solid var(--rule-soft);
}
.hero-photo-card-brand img {
height: 22px;
width: auto;
}
.hero-photo-card-tag {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--green);
display: inline-flex;
align-items: center;
gap: 6px;
}
.hero-photo-card-tag::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18), 0 0 8px rgba(74, 222, 128, 0.5);
animation: blink 2.6s ease-in-out infinite;
}
.hero-photo-card-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-3);
padding: 8px 0;
border-bottom: 1px solid var(--rule-soft);
}
.hero-photo-card-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate-l);
margin-bottom: 3px;
}
.hero-photo-card-value {
font-family: var(--font);
font-size: 14px;
font-weight: 600;
color: var(--white);
}
.hero-photo-card-value small {
display: block;
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
color: var(--slate-l);
margin-top: 2px;
letter-spacing: 0.04em;
}
.hero-photo-card-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-3);
padding-top: var(--s-3);
margin-top: 4px;
}
.hero-photo-card-total {
font-family: var(--font);
font-size: 24px;
font-weight: 800;
color: var(--gold-bright);
letter-spacing: -0.01em;
line-height: 1;
margin-top: 2px;
text-shadow: 0 0 12px rgba(214, 160, 46, 0.35);
}
.hero-photo-card-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: var(--gold);
color: var(--white);
border-radius: var(--r);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
box-shadow: 0 0 16px rgba(189, 139, 28, 0.3);
}
@media (max-width: 1100px) {
.hero-photo-frame { max-height: 520px; }
}
@media (max-width: 720px) {
.hero-photo-frame { aspect-ratio: 4 / 3; max-height: 380px; }
.hero-photo-pip { font-size: 9px; padding: 6px 12px; top: 14px; }
.hero-photo-bracket { width: 16px; height: 16px; }
}
/* ===========================================================
COMPLIANCE PHOTO — Image2.png trace overlay
Photo of the woman holding the rifle, overlaid with pulsing
trace pins (SN + SKU) on the rifle features, connected to
floating annotation cards, with a transaction-status panel
at the bottom. Visual = "this firearm, fully traced."
=========================================================== */
.compliance-photo {
position: relative;
}
.compliance-photo-frame {
position: relative;
margin: 0;
border-radius: var(--r-card);
overflow: hidden;
background: var(--bg-card);
border: 1px solid var(--rule-bright);
aspect-ratio: 3 / 2;
max-height: 620px;
box-shadow:
0 0 0 1px rgba(189, 139, 28, 0.10),
0 60px 100px -40px rgba(0, 0, 0, 0.85),
0 30px 60px -20px rgba(189, 139, 28, 0.18);
}
.compliance-photo-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
filter: contrast(1.04) saturate(0.92) brightness(0.92);
}
.compliance-photo-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 90% 75% at 50% 50%, transparent 40%, rgba(11, 8, 32, 0.55) 100%),
linear-gradient(180deg, rgba(11, 8, 32, 0.12) 0%, transparent 25%, transparent 60%, rgba(11, 8, 32, 0.55) 100%);
pointer-events: none;
mix-blend-mode: multiply;
}
.compliance-photo-bracket {
position: absolute;
width: 22px;
height: 22px;
border: 2px solid var(--gold-bright);
pointer-events: none;
filter: drop-shadow(0 0 6px var(--gold-glow));
}
.compliance-photo-bracket.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.compliance-photo-bracket.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.compliance-photo-bracket.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.compliance-photo-bracket.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.compliance-photo-pip {
position: absolute;
top: 22px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: rgba(11, 8, 32, 0.78);
border: 1px solid rgba(214, 160, 46, 0.45);
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-bright);
white-space: nowrap;
z-index: 4;
}
/* SVG overlay for connecting trace lines */
.trace-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
}
/* Numbered scan marker on the rifle — small, non-obstructive
Gold-bordered white badge with mono number; ties to the
matching numbered card in the data panel below the photo. */
.trace-marker {
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--gold-bright);
border: 2px solid var(--white);
transform: translate(-50%, -50%);
box-shadow:
0 0 0 4px rgba(214, 160, 46, 0.22),
0 0 14px rgba(214, 160, 46, 0.6),
0 2px 6px rgba(0, 0, 0, 0.5);
animation: trace-marker-pulse 2.4s ease-in-out infinite;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 11px;
font-weight: 800;
color: var(--bg-deepest);
letter-spacing: 0.02em;
}
.trace-marker::after {
content: attr(data-num);
}
@keyframes trace-marker-pulse {
0%, 100% {
box-shadow:
0 0 0 4px rgba(214, 160, 46, 0.22),
0 0 14px rgba(214, 160, 46, 0.55),
0 2px 6px rgba(0, 0, 0, 0.5);
}
50% {
box-shadow:
0 0 0 9px rgba(214, 160, 46, 0.08),
0 0 24px rgba(214, 160, 46, 0.85),
0 2px 6px rgba(0, 0, 0, 0.5);
}
}
/* Data panel sitting BELOW the photo (never overlaid) */
.compliance-data {
margin-top: var(--s-4);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.compliance-data-row {
display: grid;
gap: var(--s-3);
}
.compliance-data-row.two-col {
grid-template-columns: 1fr 1fr;
}
/* Numbered trace data card (tied to scan markers 01 / 02 on rifle) */
.trace-data-card {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-4);
background: var(--bg-card);
border: 1px solid var(--rule-bright);
border-radius: var(--r-card);
}
.trace-data-num {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--gold-bright);
border: 2px solid var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 12px;
font-weight: 800;
color: var(--bg-deepest);
box-shadow: 0 0 12px rgba(214, 160, 46, 0.4);
}
.trace-data-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.trace-data-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-bright);
}
.trace-data-value {
font-family: var(--mono);
font-size: 14px;
font-weight: 700;
color: var(--white);
letter-spacing: 0.02em;
line-height: 1.1;
}
.trace-data-meta {
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--slate-l);
margin-top: 2px;
}
/* Compliance status card (NICS / 4473) */
.status-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-3);
padding: var(--s-4);
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: var(--r-card);
}
.status-card-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.status-card-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--slate-l);
}
.status-card-value {
font-family: var(--font);
font-size: 14px;
font-weight: 600;
color: var(--white);
letter-spacing: -0.005em;
}
.status-card-meta {
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--slate);
margin-top: 2px;
}
/* Total + charge bar (full-width footer) */
.total-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-3);
padding: var(--s-4) var(--s-5);
background:
radial-gradient(ellipse 70% 100% at 0% 50%, rgba(189, 139, 28, 0.10), transparent 70%),
var(--bg-card-elev);
border: 1px solid var(--rule-bright);
border-radius: var(--r-card);
}
.total-bar-left {
display: flex;
flex-direction: column;
gap: 2px;
}
.total-bar-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--slate-l);
}
.total-bar-amount {
font-family: var(--font);
font-size: 26px;
font-weight: 800;
color: var(--gold-bright);
letter-spacing: -0.01em;
line-height: 1;
margin-top: 2px;
text-shadow: 0 0 14px rgba(214, 160, 46, 0.35);
}
.total-bar-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 18px;
background: var(--gold);
color: var(--white);
border-radius: var(--r);
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
box-shadow: 0 0 18px rgba(189, 139, 28, 0.4);
white-space: nowrap;
}
@media (max-width: 1100px) {
.compliance-photo-frame { max-height: 520px; }
}
@media (max-width: 720px) {
.compliance-photo-frame { aspect-ratio: 3 / 2; max-height: 360px; }
.compliance-photo-pip { font-size: 9px; padding: 6px 12px; top: 14px; }
.compliance-photo-bracket { width: 16px; height: 16px; }
.trace-marker { width: 22px; height: 22px; font-size: 10px; }
.compliance-data-row.two-col { grid-template-columns: 1fr; }
.trace-data-value { font-size: 13px; }
.total-bar { flex-direction: column; align-items: flex-start; }
.total-bar-amount { font-size: 22px; }
.total-bar-cta { width: 100%; justify-content: center; }
}
/* ===========================================================
REGISTER SCENE — physical POS at gun store counter
Combines: counter surface, pistol silhouette,
POS terminal device, payment terminal, brand mark
=========================================================== */
.register-scene {
position: relative;
padding: var(--s-8) 0 var(--s-16);
min-height: 580px;
}
/* Counter surface — perspective shadow at base */
.counter-base {
position: absolute;
left: -40px; right: -40px;
bottom: 0;
height: 220px;
pointer-events: none;
z-index: 0;
}
.counter-base::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
transparent 0%,
rgba(189, 139, 28, 0.04) 30%,
rgba(0, 0, 0, 0.35) 100%);
border-top: 1px solid rgba(189, 139, 28, 0.18);
}
/* Wood-grain countertop hint */
.counter-base::after {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(90deg,
rgba(189, 139, 28, 0.04) 0px,
transparent 1px,
transparent 80px,
rgba(189, 139, 28, 0.04) 81px);
mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
opacity: 0.6;
}
/* Pistol silhouette laying on the counter (background context) */
.counter-firearm {
position: absolute;
bottom: 30px;
left: -10px;
width: 320px;
height: auto;
color: rgba(189, 139, 28, 0.16);
z-index: 1;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
pointer-events: none;
}
/* The POS terminal as a physical device (with bezel + brand foot) */
.pos-device {
position: relative;
z-index: 3;
background: linear-gradient(180deg, #1A1538, #14102E);
border: 1px solid var(--rule-bright);
border-radius: 14px;
padding: 6px;
max-width: 100%;
margin-left: auto;
box-shadow:
0 0 0 1px rgba(189, 139, 28, 0.10),
0 60px 100px -40px rgba(0, 0, 0, 0.85),
0 30px 60px -20px rgba(189, 139, 28, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pos-device::before {
/* Subtle gold rim along top edge — like overhead store lighting */
content: '';
position: absolute;
top: -1px; left: 12%; right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
opacity: 0.5;
}
.pos-device-screen {
border-radius: 9px;
overflow: hidden;
background: var(--bg-card);
}
.pos-device-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px 8px;
}
.pos-device-brand {
display: flex;
align-items: center;
gap: 8px;
}
.pos-device-brand img {
height: 22px;
width: auto;
opacity: 0.95;
}
.pos-device-tag {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--slate);
}
.pos-device-led {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
}
/* Standalone payment terminal device */
.payment-device {
position: absolute;
bottom: 38px;
left: -28px;
width: 224px;
background: linear-gradient(180deg, #14102E, #0E0A22);
border: 1px solid var(--rule-bright);
border-radius: 10px;
padding: 12px;
z-index: 4;
box-shadow:
0 30px 50px -16px rgba(0, 0, 0, 0.85),
0 10px 20px -8px rgba(189, 139, 28, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
transform: rotate(-3deg);
}
.payment-device::before {
/* Top "card slot" hint */
content: '';
position: absolute;
top: -1px; left: 18%; right: 18%;
height: 2px;
background: var(--bg-deepest);
border-radius: 0 0 4px 4px;
}
.payment-display {
background: #08051A;
border: 1px solid var(--rule-soft);
border-radius: 4px;
padding: 10px 12px;
margin-bottom: 10px;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
}
.payment-display-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
}
.payment-display-label {
font-family: var(--mono);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--slate-l);
}
.payment-display-amount {
font-family: var(--mono);
font-size: 22px;
font-weight: 800;
color: var(--gold-bright);
letter-spacing: -0.01em;
text-shadow: 0 0 10px rgba(214, 160, 46, 0.5);
}
.payment-display-prompt {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 8px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--slate-l);
}
.payment-display-prompt .pip-dot {
width: 5px; height: 5px;
box-shadow: 0 0 0 2px rgba(91, 115, 255, 0.18), 0 0 6px rgba(91, 115, 255, 0.6);
}
.payment-keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
margin-bottom: 10px;
}
.payment-keypad span {
height: 22px;
background: var(--bg-card-elev);
border: 1px solid var(--rule-soft);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
color: var(--ash);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.payment-keypad span.enter {
background: var(--gold);
color: var(--white);
border-color: var(--gold-bright);
}
.payment-keypad span.cancel {
background: rgba(239, 68, 68, 0.15);
color: var(--red);
border-color: rgba(239, 68, 68, 0.3);
}
.payment-brand {
display: flex;
justify-content: center;
padding-top: 6px;
border-top: 1px solid var(--rule-soft);
}
.payment-brand img {
height: 18px;
width: auto;
opacity: 0.9;
}
/* Re-anchor the existing "bound book logged" badge to the new scene */
.register-scene .hero-id {
bottom: -16px;
left: auto;
right: -8px;
z-index: 5;
}
/* "Live transaction" callout label pointing into the scene */
.scene-callout {
position: absolute;
top: var(--s-4);
right: var(--s-4);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(189, 139, 28, 0.12);
border: 1px solid rgba(214, 160, 46, 0.35);
border-radius: 999px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-bright);
z-index: 5;
backdrop-filter: blur(6px);
}
/* ===========================================================
DISTRIBUTOR TRUST BANNER — v5: dark theme, real logos
Dark background so mixed light/dark distributor logos
render cleanly without competing with a light banner.
=========================================================== */
.trust-banner {
background:
radial-gradient(ellipse 60% 60% at 50% 0%, rgba(189, 139, 28, 0.08) 0%, transparent 60%),
var(--bg-alt);
padding: var(--s-16) 0 var(--s-12);
position: relative;
z-index: 1;
border-top: 1px solid var(--rule-soft);
border-bottom: 1px solid var(--rule-soft);
}
.trust-banner::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
opacity: 0.6;
}
.trust-banner-head {
text-align: center;
margin-bottom: var(--s-12);
}
.trust-banner-head .marker {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-bright);
margin-bottom: var(--s-3);
display: inline-block;
}
.trust-banner-head h3 {
font-family: var(--font);
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--white);
line-height: 1.05;
}
.trust-banner-head h3 .em {
color: var(--gold-bright);
}
.trust-banner-head p {
margin-top: var(--s-3);
font-size: 15px;
color: var(--slate-l);
max-width: 60ch;
margin-left: auto;
margin-right: auto;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--s-3);
align-items: stretch;
}
.trust-tile {
padding: var(--s-4);
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: var(--r-card);
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
overflow: hidden;
}
.trust-tile:hover {
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 12px 28px -16px rgba(189, 139, 28, 0.4);
background: var(--bg-card-elev);
}
.trust-tile img {
max-width: 100%;
max-height: 64px;
width: auto;
height: auto;
object-fit: contain;
display: block;
transition: filter 0.2s ease, opacity 0.2s ease;
}
.trust-tile:hover img {
filter: brightness(1.08);
}
.trust-banner-foot {
margin-top: var(--s-10);
text-align: center;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--slate-l);
padding-top: var(--s-6);
border-top: 1px dashed var(--rule);
}
.trust-banner-foot a {
color: var(--gold-bright);
font-weight: 700;
margin-left: 6px;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(214, 160, 46, 0.4);
}
.trust-banner-foot a:hover { text-decoration-color: var(--gold-bright); color: var(--white); }
/* ===========================================================
SECTIONS
=========================================================== */
section { position: relative; z-index: 1; }
.section { padding: var(--s-32) 0; }
.section.compact { padding: var(--s-24) 0; }
.section.alt { background: var(--bg-alt); }
.section-head {
max-width: 720px;
margin: 0 auto var(--s-16);
text-align: center;
}
.section-head .section-marker { margin-bottom: var(--s-4); }
.section-head .h2 { margin-bottom: var(--s-4); }
.section-head .lede { margin: var(--s-4) auto 0; }
/* ===========================================================
FEATURES
=========================================================== */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
}
.feature-card {
position: relative;
padding: var(--s-8);
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: var(--r-card);
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 18px 48px -22px rgba(189, 139, 28, 0.4);
}
.feature-card:hover .feature-icon {
border-color: var(--gold);
color: var(--gold-bright);
}
.feature-card .feature-num {
position: absolute;
top: var(--s-4);
right: var(--s-5);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--slate);
}
.feature-icon {
width: 48px; height: 48px;
border-radius: var(--r);
background: var(--bg-deep);
border: 1px solid var(--rule-bright);
color: var(--slate-l);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--s-5);
transition: border-color 0.2s ease, color 0.2s ease;
}
.feature-card h3 {
font-family: var(--font);
font-weight: 700;
font-size: 19px;
color: var(--white);
letter-spacing: -0.005em;
margin-bottom: var(--s-2);
}
.feature-card p {
font-size: 14px;
color: var(--slate-l);
line-height: 1.65;
}
/* ===========================================================
SPLIT SECTIONS
=========================================================== */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-16);
align-items: center;
}
.split.reversed { direction: rtl; }
.split.reversed > * { direction: ltr; }
.split-copy .h3 {
font-family: var(--font);
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--white);
margin: var(--s-3) 0 var(--s-4);
}
.split-copy .h3 .em-gold { color: var(--gold-bright); }
.split-copy p {
font-size: 16px;
line-height: 1.65;
color: var(--slate-l);
margin-bottom: var(--s-6);
}
.split-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--s-3);
margin-bottom: var(--s-6);
}
.split-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
color: var(--ash);
font-weight: 500;
font-family: var(--mono);
letter-spacing: 0.02em;
}
.split-list .check {
flex-shrink: 0;
width: 18px; height: 18px;
border: 1px solid var(--gold);
color: var(--gold-bright);
display: flex; align-items: center; justify-content: center;
margin-top: 2px;
}
/* Tactical panel */
.panel {
background: var(--bg-card);
border: 1px solid var(--rule-bright);
border-radius: var(--r-card);
overflow: hidden;
box-shadow: 0 30px 60px -32px rgba(0,0,0,0.7);
}
.panel-head {
padding: var(--s-4) var(--s-5);
background: var(--bg-deep);
border-bottom: 1px solid var(--rule-soft);
display: flex;
align-items: center;
justify-content: space-between;
}
.panel-head h4 {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--white);
}
.panel-head .meta {
font-family: var(--mono);
font-size: 10px;
color: var(--green);
display: inline-flex;
align-items: center;
gap: 8px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.panel-body { padding: var(--s-5); }
.panel-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-3);
margin-bottom: var(--s-5);
}
.stat-box {
padding: var(--s-4);
background: var(--bg-deep);
border: 1px solid var(--rule-soft);
border-radius: var(--r);
}
.stat-box .lbl {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--slate);
}
.stat-box .num {
margin-top: 6px;
font-family: var(--font);
font-size: 26px;
font-weight: 800;
color: var(--white);
letter-spacing: -0.01em;
line-height: 1;
}
.stat-box .num .accent { color: var(--gold-bright); }
.panel-list {
list-style: none;
}
.panel-list li {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--s-3);
padding: var(--s-3) 0;
align-items: center;
border-bottom: 1px solid var(--rule-soft);
}
.panel-list li:last-child { border-bottom: 0; }
.panel-list .icon {
width: 32px; height: 32px;
border-radius: var(--r);
background: var(--bg-deep);
border: 1px solid var(--rule-bright);
color: var(--gold-bright);
display: flex; align-items: center; justify-content: center;
}
.panel-list .title {
font-family: var(--font);
font-size: 14px;
font-weight: 600;
color: var(--white);
}
.panel-list .meta {
font-family: var(--mono);
font-size: 10px;
color: var(--slate-l);
letter-spacing: 0.04em;
margin-top: 2px;
}
/* eCommerce storefront mockup */
.store-card {
background: var(--bg-card);
border: 1px solid var(--rule-bright);
border-radius: var(--r-card);
overflow: hidden;
box-shadow: 0 30px 60px -32px rgba(0,0,0,0.7);
}
.store-bar {
padding: 12px 16px;
background: var(--bg-deep);
border-bottom: 1px solid var(--rule-soft);
font-family: var(--mono);
font-size: 11px;
color: var(--slate-l);
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 8px;
}
.store-bar .lock {
width: 12px; height: 12px;
color: var(--green);
}
.store-grid {
padding: var(--s-4);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-3);
}
.store-tile {
padding: var(--s-4);
background: var(--bg-deep);
border: 1px solid var(--rule-soft);
border-radius: var(--r);
transition: border-color 0.2s ease;
}
.store-tile:hover { border-color: var(--gold); }
.store-tile-img {
height: 140px;
background: var(--bg-deepest);
border: 1px solid var(--rule-soft);
border-radius: var(--r);
margin-bottom: var(--s-3);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.store-tile-img img {
max-width: 96%;
max-height: 92%;
width: auto;
height: auto;
object-fit: contain;
display: block;
transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.store-tile:hover .store-tile-img img {
transform: scale(1.06);
}
.store-tile h5 {
font-family: var(--font);
font-size: 13px;
font-weight: 700;
color: var(--white);
margin-bottom: 4px;
letter-spacing: -0.005em;
}
.store-tile .price {
font-family: var(--mono);
font-size: 13px;
font-weight: 700;
color: var(--gold-bright);
}
.store-tile .stock {
font-family: var(--mono);
font-size: 9px;
color: var(--slate-l);
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
}
/* ===========================================================
WORKFLOW
=========================================================== */
.workflow {
background: var(--bg-alt);
position: relative;
overflow: hidden;
border-top: 1px solid var(--rule-soft);
border-bottom: 1px solid var(--rule-soft);
}
.workflow::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 60% at 100% 0%, rgba(189, 139, 28, 0.08) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 0% 100%, rgba(61, 90, 254, 0.06) 0%, transparent 60%);
pointer-events: none;
}
.workflow .container { position: relative; z-index: 1; }
.workflow-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-4);
}
.step {
position: relative;
padding: var(--s-6);
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: var(--r-card);
transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.step:hover {
border-color: var(--gold);
transform: translateY(-3px);
background: var(--bg-card-elev);
}
.step .num {
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--gold-bright);
margin-bottom: var(--s-3);
}
.step .num::before { content: 'OP / '; color: var(--slate); }
.step h3 {
font-family: var(--font);
font-size: 18px;
font-weight: 800;
color: var(--white);
letter-spacing: -0.005em;
text-transform: uppercase;
margin-bottom: var(--s-2);
}
.step p {
font-size: 13px;
color: var(--slate-l);
line-height: 1.6;
}
/* ===========================================================
PARTNERSHIP CARD
=========================================================== */
.partnership-card {
background: var(--bg-card);
border: 1px solid var(--rule-bright);
border-radius: var(--r-card);
padding: var(--s-12);
display: grid;
grid-template-columns: auto 1fr;
gap: var(--s-12);
align-items: center;
position: relative;
overflow: hidden;
}
.partnership-card::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 80% at 0% 50%, rgba(189, 139, 28, 0.12), transparent 60%),
radial-gradient(ellipse 40% 70% at 100% 50%, rgba(61, 90, 254, 0.08), transparent 60%);
pointer-events: none;
}
.partnership-marks {
display: flex;
align-items: center;
gap: var(--s-6);
position: relative;
z-index: 1;
}
.partnership-marks .mark {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
padding: var(--s-5);
background: var(--bg-deep);
border: 1px solid var(--rule-bright);
border-radius: var(--r);
min-width: 160px;
}
.partnership-marks .mark img {
height: 56px;
width: auto;
}
.partnership-marks .mark span {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--slate);
}
.partnership-marks .plus {
width: 36px; height: 36px;
background: var(--gold);
color: var(--white);
font-weight: 800;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 20px rgba(189, 139, 28, 0.4);
}
.partnership-copy { position: relative; z-index: 1; }
.partnership-copy h3 {
font-family: var(--font);
font-size: 28px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--white);
margin: var(--s-3) 0;
}
.partnership-copy h3 .em { color: var(--gold-bright); }
.partnership-copy p {
font-size: 15px;
line-height: 1.65;
color: var(--slate-l);
margin-bottom: var(--s-4);
}
.partnership-copy .links {
display: flex;
gap: var(--s-5);
font-family: var(--mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.partnership-copy .links a {
color: var(--gold-bright);
display: inline-flex;
align-items: center;
gap: 6px;
}
.partnership-copy .links a:hover { color: var(--white); }
/* ===========================================================
PRICING
=========================================================== */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
}
.price-card {
padding: var(--s-8);
background: var(--bg-card);
border: 1px solid var(--rule);
border-radius: var(--r-card);
display: flex;
flex-direction: column;
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
}
.price-card:hover {
transform: translateY(-3px);
border-color: var(--rule-bright);
}
.price-card.featured {
border-color: var(--gold);
background:
linear-gradient(180deg, rgba(189, 139, 28, 0.08), transparent 60%),
var(--bg-card);
box-shadow: 0 0 60px -16px rgba(189, 139, 28, 0.35);
}
.price-card.featured .badge {
position: absolute;
top: -1px;
left: var(--s-6);
background: var(--gold);
color: var(--white);
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
padding: 5px 12px;
text-transform: uppercase;
box-shadow: 0 0 16px rgba(189, 139, 28, 0.5);
}
.price-tier {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-bright);
margin-bottom: var(--s-2);
}
.price-name {
font-family: var(--font);
font-size: 22px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--white);
margin-bottom: var(--s-3);
}
.price-amount {
font-family: var(--font);
font-size: 44px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--white);
line-height: 1;
margin-bottom: var(--s-2);
}
.price-amount span {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--slate-l);
margin-left: 4px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.price-desc {
font-size: 13px;
color: var(--slate-l);
line-height: 1.55;
padding-bottom: var(--s-5);
margin-bottom: var(--s-5);
border-bottom: 1px solid var(--rule-soft);
}
.price-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--s-3);
margin-bottom: var(--s-6);
flex-grow: 1;
}
.price-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
font-family: var(--mono);
letter-spacing: 0.02em;
color: var(--ash);
}
.price-list .check {
flex-shrink: 0;
width: 16px; height: 16px;
border: 1px solid var(--gold);
color: var(--gold-bright);
display: flex; align-items: center; justify-content: center;
margin-top: 1px;
}
.price-btn {
display: block;
text-align: center;
padding: 14px 20px;
border-radius: var(--r);
font-family: var(--mono);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.price-btn-outline {
border: 1px solid var(--rule-bright);
color: var(--white);
}
.price-btn-outline:hover { border-color: var(--gold); transform: translateY(-1px); }
.price-btn-gold {
background: var(--gold);
color: var(--white);
box-shadow: 0 0 24px rgba(189, 139, 28, 0.35);
}
.price-btn-gold:hover { background: var(--gold-bright); transform: translateY(-1px); box-shadow: 0 0 32px rgba(189, 139, 28, 0.55); }
/* ===========================================================
FAQ
=========================================================== */
.faq-list {
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.faq {
border: 1px solid var(--rule);
border-radius: var(--r);
background: var(--bg-card);
overflow: hidden;
transition: border-color 0.2s ease;
}
.faq[open] { border-color: var(--gold); }
.faq summary {
list-style: none;
cursor: pointer;
padding: var(--s-5) var(--s-6);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-4);
font-family: var(--font);
font-size: 16px;
font-weight: 600;
color: var(--white);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: '+';
font-family: var(--mono);
font-size: 22px;
font-weight: 400;
color: var(--slate-l);
transition: transform 0.2s ease, color 0.2s ease;
flex-shrink: 0;
line-height: 1;
}
.faq[open] summary::after {
content: '−';
color: var(--gold-bright);
}
.faq-body {
padding: 0 var(--s-6) var(--s-6);
color: var(--slate-l);
font-size: 14px;
line-height: 1.7;
}
/* ===========================================================
CTA
=========================================================== */
.cta {
padding: var(--s-24) 0;
}
.cta-card {
position: relative;
padding: var(--s-20) var(--s-12);
background:
radial-gradient(ellipse 60% 60% at 100% 0%, rgba(189, 139, 28, 0.25) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 0% 100%, rgba(61, 90, 254, 0.18) 0%, transparent 60%),
var(--bg-card-elev);
border: 1px solid var(--rule-bright);
border-radius: var(--r-card);
overflow: hidden;
text-align: center;
}
.cta-card::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 0%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 0%, transparent 80%);
pointer-events: none;
}
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 {
font-family: var(--font);
font-size: clamp(32px, 4vw, 52px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.05;
color: var(--white);
margin-bottom: var(--s-4);
max-width: none;
margin-left: auto;
margin-right: auto;
white-space: nowrap;
}
@media (max-width: 720px) {
.cta-card h2 {
white-space: normal;
font-size: clamp(28px, 7vw, 38px);
max-width: 100%;
}
}
.cta-card h2 .em { color: var(--gold-bright); }
.cta-card p {
font-size: 17px;
color: var(--slate-l);
max-width: 580px;
margin: 0 auto var(--s-8);
line-height: 1.6;
}
.cta-actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
justify-content: center;
}
.cta-marker {
display: inline-block;
margin-bottom: var(--s-4);
}
/* ===========================================================
FOOTER
=========================================================== */
.footer {
background: var(--bg-deepest);
color: var(--slate-l);
padding: var(--s-20) 0 var(--s-8);
border-top: 1px solid var(--rule-soft);
}
.footer-top {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
gap: var(--s-12);
margin-bottom: var(--s-16);
}
.footer-brand .lockup { margin-bottom: var(--s-5); }
.footer-brand .lockup-divider { background: var(--rule-bright); }
.footer-brand p {
font-size: 14px;
line-height: 1.65;
color: var(--slate-l);
max-width: 320px;
margin-bottom: var(--s-5);
}
.footer-contact {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--mono);
font-size: 12px;
color: var(--slate-l);
letter-spacing: 0.04em;
}
.footer-contact a { color: var(--slate-l); }
.footer-contact a:hover { color: var(--white); }
.footer-col h5 {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-bright);
margin-bottom: var(--s-4);
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.footer-col a {
font-family: var(--font);
font-size: 13px;
color: var(--slate-l);
transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
padding-top: var(--s-6);
border-top: 1px solid var(--rule-soft);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-4);
flex-wrap: wrap;
font-family: var(--mono);
font-size: 11px;
color: var(--slate);
letter-spacing: 0.10em;
}
.footer-bottom .right {
display: flex;
align-items: center;
gap: var(--s-3);
}
.footer-bottom .right img {
height: 22px;
opacity: 0.85;
}
.footer-bottom .right span {
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
}
/* ===========================================================
MOTION
=========================================================== */
@keyframes rise {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.rise { opacity: 0; animation: rise 0.7s cubic-bezier(.2,.7,.2,1) forwards; }
.d-1 { animation-delay: 0.05s; }
.d-2 { animation-delay: 0.15s; }
.d-3 { animation-delay: 0.25s; }
.d-4 { animation-delay: 0.35s; }
/* ===========================================================
RESPONSIVE
=========================================================== */
@media (max-width: 1100px) {
.hero-grid { grid-template-columns: 1fr; gap: var(--s-12); }
.hero-reticle, .hero-curves { display: none; }
.features-grid { grid-template-columns: repeat(2, 1fr); }
.split { grid-template-columns: 1fr; gap: var(--s-10); }
.split.reversed { direction: ltr; }
.workflow-steps { grid-template-columns: repeat(2, 1fr); }
.pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
.partnership-card { grid-template-columns: 1fr; gap: var(--s-8); text-align: center; padding: var(--s-8); }
.partnership-marks { justify-content: center; }
.footer-top { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.trust-grid { grid-template-columns: repeat(3, 1fr); }
.panel-stats { grid-template-columns: repeat(3, 1fr); }
.register-scene { min-height: 520px; }
.payment-device { left: 0; }
}
@media (max-width: 720px) {
.nav-links { display: none; }
.menu-btn { display: flex; }
.lockup-divider, .lockup-partner { display: none; }
.lockup-primary img { height: 48px; }
.nav-inner { height: 76px; }
.features-grid { grid-template-columns: 1fr; }
.workflow-steps { grid-template-columns: 1fr; }
.section { padding: var(--s-20) 0; }
.cta-card { padding: var(--s-12) var(--s-6); }
.footer-top { grid-template-columns: 1fr; gap: var(--s-8); }
.trust-grid { grid-template-columns: repeat(2, 1fr); }
.hero-meta { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.classification .right span:not(:last-child)::after { display: none; }
.classification-inner { font-size: 9px; height: auto; padding: 6px 0; flex-wrap: wrap; }
.hero-dots, .hero-curves { display: none; }
.hero-brand-stamp img { height: 64px; }
.hero-brand-stamp .stamp-meta-name { font-size: 15px; }
.payment-device { width: 180px; left: -10px; bottom: 20px; transform: rotate(-2deg); }
.counter-firearm { width: 220px; }
.register-scene { min-height: 480px; }
.register-scene .hero-id { right: 0; }
}
/* ===========================================================
REQUEST A DEMO — Salesforce Web-to-Lead form
=========================================================== */
.demo-form-divider {
display: flex;
align-items: center;
gap: var(--s-4);
margin: var(--s-10) 0 var(--s-6);
}
.demo-form-divider::before,
.demo-form-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--rule-bright);
}
.demo-form-divider span {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-bright);
}
.demo-form {
max-width: 580px;
margin: 0 auto;
text-align: left;
display: flex;
flex-direction: column;
gap: var(--s-4);
}
.demo-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3);
}
.demo-form-row.single { grid-template-columns: 1fr; }
.demo-form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.demo-form-field > span {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--slate-l);
}
.demo-form-field input {
background: rgba(11, 8, 32, 0.55);
border: 1px solid var(--rule-bright);
border-radius: var(--r);
padding: 13px 14px;
font-family: var(--font);
font-size: 15px;
color: var(--white);
outline: none;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.demo-form-field input::placeholder { color: var(--slate-d); }
.demo-form-field input:hover { border-color: var(--rule-bright); }
.demo-form-field input:focus {
border-color: var(--gold);
background: rgba(11, 8, 32, 0.85);
box-shadow: 0 0 0 3px rgba(189, 139, 28, 0.18);
}
.demo-form-field input:invalid:not(:placeholder-shown):not(:focus) {
border-color: rgba(239, 68, 68, 0.5);
}
.demo-form-submit {
margin-top: var(--s-3);
justify-content: center;
width: 100%;
padding-top: 16px;
padding-bottom: 16px;
}
.demo-form-foot {
margin-top: var(--s-2);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.02em;
color: var(--slate);
text-align: center;
}
@media (max-width: 720px) {
.demo-form-row { grid-template-columns: 1fr; }
}
/* ===========================================================
CALENDLY SCHEDULE-A-DEMO REVEAL
Collapsed by default; expands vertically on CTA click.
Triggered by any [data-cta="schedule-demo"] element.
Calendly widget script lazy-loads on first open.
=========================================================== */
.calendly-reveal {
background: var(--bg-alt);
position: relative;
z-index: 2;
max-height: 0;
overflow: hidden;
opacity: 0;
border-top: 1px solid var(--rule-soft);
border-bottom: 1px solid var(--rule-soft);
transition:
max-height 0.6s cubic-bezier(.2,.7,.2,1),
opacity 0.4s ease 0.05s;
}
.calendly-reveal.is-open {
max-height: 1200px;
opacity: 1;
}
.calendly-reveal::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
opacity: 0.65;
}
.calendly-reveal-inner {
padding: var(--s-12) 0;
}
.calendly-reveal-head {
text-align: center;
max-width: 720px;
margin: 0 auto var(--s-8);
position: relative;
}
.calendly-reveal-h3 {
font-family: var(--font);
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--white);
line-height: 1.1;
margin: var(--s-3) 0;
}
.calendly-reveal-h3 .em-gold { color: var(--gold-bright); }
.calendly-reveal-lede {
font-size: 16px;
line-height: 1.6;
color: var(--slate-l);
max-width: 60ch;
margin: 0 auto;
}
.calendly-close {
position: absolute;
top: 0;
right: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: transparent;
border: 1px solid var(--rule-bright);
color: var(--slate-l);
border-radius: var(--r);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.calendly-close:hover,
.calendly-close:focus-visible {
border-color: var(--gold);
color: var(--white);
background: rgba(189, 139, 28, 0.08);
outline: none;
}
.calendly-inline-widget {
border-radius: var(--r-card);
overflow: hidden;
border: 1px solid var(--rule-bright);
background: var(--bg-card);
box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.55);
}
@media (max-width: 720px) {
.calendly-reveal.is-open { max-height: 1400px; }
.calendly-reveal-inner { padding: var(--s-10) 0; }
.calendly-close { position: static; margin-top: var(--s-4); }
.calendly-reveal-head { padding-bottom: var(--s-2); }
}
/* ===========================================================
COMPLIANCE PHOTO — Floating corner trace cards
The two numbered trace data cards (Winchester Item 01 and
Glock Item 02) float in the upper corners of the photo,
offset slightly past the figure edges for a "popping off
the image" feel. Glass background + backdrop blur so they
read against the photo without obscuring the subject.
=========================================================== */
.trace-data-card.floating {
position: absolute;
z-index: 5;
max-width: 280px;
background: rgba(11, 8, 32, 0.88);
border: 1px solid rgba(214, 160, 46, 0.5);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
box-shadow:
0 18px 40px -16px rgba(0, 0, 0, 0.7),
0 4px 10px rgba(0, 0, 0, 0.35);
}
.trace-data-card.floating.top-left {
top: -16px;
left: -16px;
}
.trace-data-card.floating.top-right {
top: -16px;
right: -16px;
}
@media (max-width: 1100px) {
.trace-data-card.floating { max-width: 220px; padding: var(--s-3); }
.trace-data-card.floating.top-left { top: -10px; left: -10px; }
.trace-data-card.floating.top-right { top: -10px; right: -10px; }
.trace-data-card.floating .trace-data-value { font-size: 12px; }
}
@media (max-width: 720px) {
.trace-data-card.floating { max-width: 160px; padding: 8px 10px; }
.trace-data-card.floating.top-left { top: 8px; left: 8px; }
.trace-data-card.floating.top-right { top: 8px; right: 8px; }
.trace-data-card.floating .trace-data-value { font-size: 11px; }
.trace-data-card.floating .trace-data-meta { display: none; }
}
/* ===========================================================
CONSOLIDATED-REVISION ADDITIONS
=========================================================== */
/* --- Light-theme color tokens --- */
:root {
--bg-cream: #F5F2EC;
--bg-cream-card: #FFFFFF;
--bg-cream-rule: rgba(11, 8, 32, 0.10);
--bg-cream-rule-strong: rgba(11, 8, 32, 0.20);
--text-on-cream: var(--bg-deepest);
--text-on-cream-muted: rgba(11, 8, 32, 0.65);
--gold-deep-cream: #8E6614;
}
/* --- Edit 1 helper: H1 accent --- */
.hero h1 .em-gold {
color: var(--gold-bright);
font-weight: inherit;
text-transform: none;
font-style: normal;
}
.hero h1 .em-gold::after { content: none; }
/* --- Edit 4 helper: small sub-label beneath stat label --- */
.hero-meta-item .lbl-sub {
font-family: var(--mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--slate-d);
margin-top: 3px;
line-height: 1.3;
}
/* Edit 16: DISTRIBUTOR NETWORK → cream */
.trust-banner {
background:
radial-gradient(ellipse 60% 60% at 50% 0%, rgba(189, 139, 28, 0.06) 0%, transparent 60%),
var(--bg-cream);
border-top: 1px solid var(--bg-cream-rule);
border-bottom: 1px solid var(--bg-cream-rule);
}
.trust-banner::before {
background: linear-gradient(90deg, transparent, var(--gold-deep-cream), transparent);
opacity: 0.75;
}
.trust-banner-head .marker { color: var(--gold-deep-cream); }
.trust-banner-head h3 { color: var(--text-on-cream); }
.trust-banner-head h3 .em { color: var(--gold-deep-cream); }
.trust-tile {
background: var(--bg-cream-card);
border-color: var(--bg-cream-rule);
}
.trust-tile:hover {
border-color: var(--gold-deep-cream);
background: #FFFCF5;
box-shadow: 0 12px 28px -16px rgba(189, 139, 28, 0.35);
}
.trust-tile:hover img { filter: none; }
/* Edit 17: PRICING → cream */
#pricing.section.alt {
background: var(--bg-cream);
border-top: 1px solid var(--bg-cream-rule);
border-bottom: 1px solid var(--bg-cream-rule);
position: relative;
}
#pricing.section.alt::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-deep-cream), transparent);
opacity: 0.55;
}
#pricing .section-marker { color: var(--gold-deep-cream); }
#pricing .section-marker::before,
#pricing .section-marker::after { color: var(--gold-deep-cream); }
#pricing .h2 { color: var(--text-on-cream); }
#pricing .h2 .em-gold { color: var(--gold-deep-cream); }
#pricing .lede { color: var(--text-on-cream-muted); }
#pricing .price-card {
background: var(--bg-cream-card);
border-color: var(--bg-cream-rule);
}
#pricing .price-card:hover {
border-color: var(--bg-cream-rule-strong);
box-shadow: 0 18px 36px -22px rgba(11, 8, 32, 0.18);
}
#pricing .price-card.featured {
border-color: var(--gold);
background:
linear-gradient(180deg, rgba(189, 139, 28, 0.07), transparent 60%),
var(--bg-cream-card);
box-shadow: 0 0 60px -16px rgba(189, 139, 28, 0.28);
}
#pricing .price-card.featured .badge {
background: var(--gold);
color: var(--text-on-cream);
}
#pricing .price-tier { color: var(--gold-deep-cream); }
#pricing .price-name { color: var(--text-on-cream); }
#pricing .price-amount { color: var(--text-on-cream); }
#pricing .price-amount span { color: var(--text-on-cream-muted); }
#pricing .price-desc {
color: var(--text-on-cream-muted);
border-bottom-color: var(--bg-cream-rule);
}
#pricing .price-list li { color: var(--text-on-cream); }
#pricing .price-list .check {
background: rgba(31, 143, 78, 0.12);
color: var(--green-d);
border: 1px solid rgba(31, 143, 78, 0.25);
border-radius: 50%;
}
#pricing .price-btn-outline {
border-color: var(--bg-cream-rule-strong);
color: var(--text-on-cream);
}
#pricing .price-btn-outline:hover {
border-color: var(--text-on-cream);
background: rgba(11, 8, 32, 0.04);
}
#pricing .price-btn-gold {
background: var(--gold);
color: var(--text-on-cream);
box-shadow: 0 8px 20px -10px rgba(189, 139, 28, 0.55);
}
#pricing .price-btn-gold:hover {
background: var(--gold-bright);
color: var(--text-on-cream);
}
#pricing .pricing-foot .text-link { color: var(--gold-deep-cream); }
#pricing .pricing-foot .text-link:hover { color: var(--text-on-cream); }
/* Edit 18: FAQ → cream */
#faq.section.compact {
background: var(--bg-cream);
border-top: 1px solid var(--bg-cream-rule);
border-bottom: 1px solid var(--bg-cream-rule-strong);
}
#faq .section-marker { color: var(--gold-deep-cream); }
#faq .section-marker::before,
#faq .section-marker::after { color: var(--gold-deep-cream); }
#faq .h2 { color: var(--text-on-cream); }
#faq .faq {
background: var(--bg-cream-card);
border-color: var(--bg-cream-rule);
}
#faq .faq[open] { border-color: var(--gold-deep-cream); }
#faq .faq summary { color: var(--text-on-cream); }
#faq .faq summary::after { color: var(--text-on-cream-muted); }
#faq .faq[open] summary::after { color: var(--gold-deep-cream); }
#faq .faq-body { color: var(--text-on-cream-muted); }
/* Edit 19: Capabilities banner → cream */
.capabilities-banner {
background: var(--bg-cream);
border-top: 1px solid var(--bg-cream-rule);
border-bottom: 1px solid var(--bg-cream-rule);
}
.capabilities-banner::before {
background: linear-gradient(90deg, transparent, var(--gold-deep-cream), transparent);
opacity: 0.65;
}
.cap-tile {
background: var(--bg-cream-card);
border-color: var(--bg-cream-rule);
}
.cap-tile:hover,
.cap-tile:focus-visible {
border-color: var(--gold-deep-cream);
}
.cap-tile-headline { color: var(--text-on-cream); }
.cap-tile-detail { color: var(--text-on-cream-muted); }
.cap-tile-icon {
background: rgba(189, 139, 28, 0.12);
color: var(--gold-deep-cream);
}
.cap-tile:hover .cap-tile-icon,
.cap-tile:focus-visible .cap-tile-icon {
background: rgba(189, 139, 28, 0.20);
color: var(--gold-deep-cream);
}
/* Edit 6: HARDWARE PRODUCT SHOWCASE */
.hw-showcase {
margin-top: var(--s-16);
padding-top: var(--s-10);
border-top: 1px solid var(--rule-bright);
}
.hw-showcase-head {
text-align: center;
margin-bottom: var(--s-10);
}
.hw-showcase-head .section-marker {
display: inline-block;
margin-bottom: var(--s-3);
}
.hw-showcase-h3 {
font-family: var(--font);
font-size: clamp(26px, 3vw, 36px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--white);
line-height: 1.1;
}
.hw-showcase-h3 .em-gold { color: var(--gold-bright); }
.hw-showcase-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-6);
}
.hw-product {
display: flex;
flex-direction: column;
padding: var(--s-6);
background: var(--bg-card);
border: 1px solid var(--rule-bright);
border-radius: var(--r-card);
gap: var(--s-3);
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hw-product:hover {
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 18px 36px -22px rgba(189, 139, 28, 0.4);
}
.hw-product-img-frame {
width: 100%;
background: var(--bg-deepest);
border: 1px solid var(--rule);
border-radius: var(--r);
overflow: hidden;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
}
.hw-product-img-frame img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.hw-product-eyebrow {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-bright);
margin-top: var(--s-2);
}
.hw-product-name {
font-family: var(--font);
font-size: 26px;
font-weight: 800;
color: var(--white);
letter-spacing: -0.01em;
line-height: 1.1;
margin: 0;
}
.hw-product-price {
font-family: var(--font);
font-size: 32px;
font-weight: 800;
color: var(--gold-bright);
letter-spacing: -0.02em;
line-height: 1;
}
.hw-product-tagline {
font-size: 15px;
color: var(--slate-l);
line-height: 1.5;
margin: 0;
}
.hw-spec-table {
width: 100%;
border-collapse: collapse;
margin-top: var(--s-3);
margin-bottom: var(--s-3);
}
.hw-spec-table tr {
border-bottom: 1px dashed var(--rule);
}
.hw-spec-table tr:last-child { border-bottom: 0; }
.hw-spec-table th {
text-align: left;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--slate-l);
padding: 10px 12px 10px 0;
vertical-align: top;
width: 38%;
}
.hw-spec-table td {
font-family: var(--font);
font-size: 14px;
color: var(--ash);
padding: 10px 0;
vertical-align: top;
line-height: 1.5;
}
.hw-product-cta {
align-self: stretch;
justify-content: center;
margin-top: auto;
}
@media (max-width: 1100px) {
.hw-showcase-grid { grid-template-columns: 1fr; gap: var(--s-8); }
}
@media (max-width: 720px) {
.hw-product { padding: var(--s-4); }
.hw-product-name { font-size: 22px; }
.hw-product-price { font-size: 26px; }
.hw-spec-table th { font-size: 9px; }
.hw-spec-table td { font-size: 13px; }
}
/* ===========================================================
LIGHT-DISTRIBUTION REVISION
Edit 2: eCommerce → cream (product mockup stays dark on purpose)
Edit 3: FAQ visual separation from Pricing
Plus: footer contact info update (FinTech Payments)
=========================================================== */
#ecommerce.section.compact {
background: var(--bg-cream);
border-top: 1px solid var(--bg-cream-rule);
border-bottom: 1px solid var(--bg-cream-rule);
position: relative;
}
#ecommerce.section.compact::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-deep-cream), transparent);
opacity: 0.55;
}
#ecommerce .section-marker { color: var(--gold-deep-cream); }
#ecommerce .section-marker::before,
#ecommerce .section-marker::after { color: var(--gold-deep-cream); }
#ecommerce .h3 { color: var(--text-on-cream); }
#ecommerce .h3 .em-gold { color: var(--gold-deep-cream); }
#ecommerce .split-copy p { color: var(--text-on-cream-muted); }
#ecommerce .split-list li { color: var(--text-on-cream); }
#ecommerce .split-list .check {
background: rgba(31, 143, 78, 0.10);
border: 1px solid rgba(31, 143, 78, 0.35);
color: var(--green-d);
}
#ecommerce .btn-gold {
color: var(--text-on-cream);
box-shadow: 0 8px 20px -10px rgba(189, 139, 28, 0.55);
}
#ecommerce .btn-gold:hover {
color: var(--text-on-cream);
}
/* Store-card mockup intentionally stays dark on the cream section */
/* FAQ separation: extra breathing room + small centered hairline divider */
#faq.section.compact {
padding-top: calc(var(--s-24) + var(--s-8));
position: relative;
}
#faq.section.compact::before {
content: '';
position: absolute;
top: var(--s-12);
left: 50%;
transform: translateX(-50%);
width: 64px;
height: 2px;
background: var(--text-on-cream);
opacity: 0.18;
border-radius: 1px;
}
/* Footer contact block — FinTech Payments info */
.footer-contact-block {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: var(--s-2);
}
.footer-tagline {
font-family: var(--font);
font-size: 17px;
font-weight: 700;
color: var(--white);
letter-spacing: -0.005em;
margin-bottom: var(--s-3);
}
.footer-contact-title {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-bright);
margin-bottom: var(--s-1);
}
.footer-contact-row {
display: flex;
flex-direction: column;
gap: 2px;
}
.footer-contact-label {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--slate);
}
.footer-contact-value {
font-family: var(--font);
font-size: 14px;
color: var(--ash);
transition: color 0.2s ease;
}
.footer-contact-value:hover { color: var(--white); }