/* ───────────────────────────────────────────────────────────────
SafePay — Production website CSS
Hebrew RTL · Navy + Copper + Cream
─────────────────────────────────────────────────────────────── */
:root {
/* Brand */
--ink-900: #1A2342;
--ink-800: #232E54;
--ink-700: #2E3A66;
--ink-600: #475283;
--ink-500: #6B7798;
--ink-400: #94A3B8;
--ink-300: #BBC4D4;
--ink-200: #DDE2EB;
--ink-100: #EBEEF4;
--ink-050: #F4F6F9;
--copper-700: #8C6A22;
--copper-600: #A8842F;
--copper-500: #C49A3C;
--copper-400: #D6B26A;
--copper-300: #E3C892;
--copper-200: #EFDDB7;
--copper-100: #F7EDD7;
--copper-050: #FBF6E9;
--peach-500: #EE8B60;
--peach-100: #FDE9DB;
--success-700: #156B62;
--success-500: #249689;
--success-100: #C8E8E3;
--success-050: #E5F3F0;
--warning-700: #9C7E1F;
--warning-500: #F9CF58;
--warning-100: #FCEFC6;
--danger-700: #B23341;
--danger-500: #FF5963;
--danger-100: #FFD5D8;
--surface-bg: #F7F3EE;
--surface-card: #FFFFFF;
--surface-sunk: #EFEBE4;
--surface-tint: #F2EEE7;
--border-soft: #E8E3DA;
--border-default: #DDD6C9;
--border-strong: #C9C1B0;
--font-display: "Assistant", "Heebo", -apple-system, system-ui, sans-serif;
--font-ui: "Heebo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 20px;
--r-2xl: 24px;
--shadow-sm: 0 1px 2px rgba(11, 27, 58, 0.04), 0 1px 1px rgba(11, 27, 58, 0.03);
--shadow-md: 0 2px 6px rgba(11, 27, 58, 0.05), 0 8px 24px rgba(11, 27, 58, 0.06);
--shadow-lg: 0 6px 16px rgba(11, 27, 58, 0.07), 0 20px 48px rgba(11, 27, 58, 0.10);
--container: 1180px;
--pad-page: 56px;
}
/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-ui);
font-size: 15px;
color: var(--ink-900);
background: var(--surface-bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
letter-spacing: -0.005em;
}
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.022em;
color: var(--ink-900);
margin: 0;
text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; }
input, textarea, select {
font-family: inherit; font-size: inherit; color: inherit;
}
img { display: block; max-width: 100%; }
[data-num] {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.mono { font-family: var(--font-mono); }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--pad-page);
}
/* ── Top bar ─────────────────────────────────────────────────── */
.topbar {
background: var(--ink-900);
color: rgba(255,255,255,0.75);
font-size: 12px;
}
.topbar-row {
display: flex; align-items: center; gap: 18px;
height: 36px;
}
.topbar a { color: rgba(255,255,255,0.75); }
.topbar .left { display: flex; align-items: center; gap: 14px; }
.topbar .right { margin-inline-start: auto; display: flex; gap: 16px; align-items: center; }
.topbar .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--success-500); display: inline-block; vertical-align: middle; margin-inline-end: 6px; }
/* ── Header / Nav ────────────────────────────────────────────── */
.site-header {
background: var(--surface-card);
border-bottom: 1px solid var(--border-soft);
position: sticky; top: 0; z-index: 50;
}
.nav-row {
display: flex; align-items: center; gap: 36px;
height: 68px;
}
.brand {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-display);
font-weight: 600;
font-size: 19px;
letter-spacing: -0.018em;
color: var(--ink-900);
}
.brand-mark {
width: 30px; height: 30px; flex-shrink: 0;
}
.nav-links {
display: flex; align-items: center; gap: 28px;
font-size: 14px; color: var(--ink-700);
}
.nav-links a {
position: relative; padding: 6px 0;
transition: color .15s ease;
}
.nav-links a:hover { color: var(--ink-900); }
.nav-links a.active {
color: var(--ink-900); font-weight: 600;
}
.nav-links a.active::after {
content: ''; position: absolute; right: 0; left: 0; bottom: -4px;
height: 2px; background: var(--copper-500); border-radius: 2px;
}
.nav-actions {
margin-inline-start: auto;
display: flex; align-items: center; gap: 10px;
}
.nav-phone {
font-size: 12.5px; color: var(--ink-500);
display: inline-flex; align-items: center; gap: 6px;
}
/* dropdown for verticals */
.nav-has-menu { position: relative; }
.nav-menu {
position: absolute;
top: calc(100% + 6px); right: 0;
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: 14px;
box-shadow: var(--shadow-lg);
padding: 10px;
min-width: 280px;
opacity: 0; pointer-events: none; transform: translateY(-4px);
transition: opacity .15s ease, transform .15s ease;
z-index: 60;
}
.nav-has-menu:hover .nav-menu,
.nav-has-menu:focus-within .nav-menu { opacity: 1; pointer-events: auto; transform: none; }
.nav-menu-item {
display: flex; gap: 10px; padding: 10px 12px;
border-radius: 10px; text-align: right;
}
.nav-menu-item:hover { background: var(--surface-tint); }
.nav-menu-item .ico { font-size: 22px; line-height: 1; flex-shrink: 0; }
.nav-menu-item .ttl { font-size: 14px; font-weight: 600; color: var(--ink-900); display: block; }
.nav-menu-item .sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
/* mobile menu toggle */
.nav-toggle { display: none; width: 40px; height: 40px;
border-radius: 10px; border: 1px solid var(--border-default);
align-items: center; justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; stroke: var(--ink-900); }
/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 44px; padding: 0 18px; border-radius: 12px;
font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em;
border: 1px solid transparent;
cursor: pointer;
transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
background: var(--ink-900); color: #fff;
box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(11,27,58,0.2);
}
.btn--primary:hover { background: var(--ink-800); }
.btn--accent {
/* Brushed-metallic gradient: light copper at top-right, deep
copper at bottom-left. Inset highlight + ambient drop. */
background: linear-gradient(135deg, #D6B26A 0%, #C49A3C 50%, #A8842F 100%);
color: #fff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.30),
inset 0 -1px 0 rgba(0,0,0,0.10),
0 4px 16px rgba(196,154,60,0.25);
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn--accent::after {
/* Shine-sweep — diagonal white band parked off-screen by
default, swept across on hover for the brushed-metal
"catch the light" effect. */
content: '';
position: absolute;
top: 0; bottom: 0;
left: -60%;
width: 60%;
background: linear-gradient(
120deg,
transparent 30%,
rgba(255,255,255,0.42) 50%,
transparent 70%
);
transform: skewX(-18deg);
pointer-events: none;
z-index: -1;
transition: left 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn--accent:hover {
background: linear-gradient(135deg, #E1BD75 0%, #C49A3C 50%, #946F26 100%);
}
.btn--accent:hover::after { left: 120%; }
.btn--accent:active {
transform: translateY(0);
box-shadow:
inset 0 2px 4px rgba(0,0,0,0.18),
inset 0 -1px 0 rgba(0,0,0,0.20),
0 1px 4px rgba(196,154,60,0.18);
}
@media (prefers-reduced-motion: reduce) {
.btn--accent::after { transition: none; }
.btn--accent:hover::after { left: -60%; }
}
.btn--ghost {
background: transparent; color: var(--ink-900);
border-color: var(--border-default);
}
.btn--ghost:hover { background: var(--surface-tint); }
.btn--ghost-dark {
background: rgba(255,255,255,0.06); color: #fff;
border: 1px solid rgba(255,255,255,0.14);
}
.btn--ghost-dark:hover { background: rgba(255,255,255,0.1); }
.btn--lg { height: 52px; padding: 0 24px; font-size: 15px; border-radius: 12px; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn .ico { width: 16px; height: 16px; }
/* ── Cards ───────────────────────────────────────────────────── */
.card {
position: relative;
background: var(--surface-card);
border: 1px solid transparent;
/* Gradient-border trick: paint the border via a subtle copper
→ink→copper sweep, with an inner white fill so the body is
unaffected. */
background-image:
linear-gradient(var(--surface-card), var(--surface-card)),
linear-gradient(135deg, rgba(196,154,60,0.25), rgba(26,35,66,0.10), rgba(196,154,60,0.25));
background-origin: border-box;
background-clip: padding-box, border-box;
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
transition:
transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.card::before {
/* Glass top-edge highlight — gives the card a "lit from above"
feel without altering background contrast. */
content: '';
position: absolute;
top: 0; left: 12%; right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
pointer-events: none;
border-radius: 1px;
}
.card:hover {
transform: translateY(-2px);
box-shadow:
0 1px 2px rgba(11,27,58,0.05),
0 8px 24px rgba(11,27,58,0.08),
0 0 0 1px rgba(196,154,60,0.18),
0 0 24px -8px rgba(196,154,60,0.30);
}
.card-pad { padding: 22px; }
/* ── Pills ───────────────────────────────────────────────────── */
.pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px; border-radius: 999px;
font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
}
.pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill--copper { background: var(--copper-050); color: var(--copper-700); border: 1px solid var(--copper-200); }
.pill--success { background: var(--success-050); color: var(--success-700); border: 1px solid var(--success-100); }
.pill--ink { background: rgba(255,255,255,0.06); color: var(--copper-300); border: 1px solid rgba(255,255,255,0.14); }
.pill--danger { background: var(--danger-100); color: var(--danger-700); }
/* ── Eyebrow / section label ─────────────────────────────────── */
.eyebrow {
font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
color: var(--copper-700);
text-transform: uppercase;
display: inline-block;
}
.eyebrow--light { color: var(--copper-300); }
/* ── Section spacing ─────────────────────────────────────────── */
section { position: relative; }
.section { padding: 80px 0; }
.section--tight { padding: 56px 0; }
.section--dark { background: var(--ink-900); color: #fff; }
/* Cream sections — a 3-stop mesh gradient + paper-grain overlay
+ copper hair-line dividers replace the flat white. The mesh
reads as parchment under cream-yellow light; the hairlines
give it banknote-band rhythm. */
.section--cream {
position: relative;
background: linear-gradient(135deg, #FFFFFF 0%, #FAF6EE 55%, #F4EDDE 100%);
border-top: 0;
border-bottom: 0;
isolation: isolate;
}
.section--cream::before,
.section--cream::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(196,154,60,0.45) 50%, transparent 100%);
pointer-events: none;
z-index: 1;
}
.section--cream::before { top: 0; }
.section--cream::after { bottom: 0; }
/* Paper-grain overlay on cream sections — sits behind the
content (z-index 0) so text remains crisp. Same SVG noise
recipe as the hero, just lighter. */
.section--cream > .container {
position: relative;
z-index: 2;
}
.section--cream::after {
/* Override the simple hairline with a stacked: grain + hairline.
This works because background-image accepts a comma list and
the gradient layer is drawn LAST (i.e. on top of grain). */
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(90deg, transparent 0%, rgba(196,154,60,0.45) 50%, transparent 100%);
background-size: 140px 140px, auto;
background-repeat: repeat, no-repeat;
background-position: top left, bottom;
/* Stretch grain across the whole section, not just the bottom
1px. Use a custom property pattern: paint the grain via a
separate pseudo-element instead. */
}
/* Dedicated grain layer — sits at z-index 0 over the section
background but UNDER the content. */
.section--cream {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(135deg, #FFFFFF 0%, #FAF6EE 55%, #F4EDDE 100%);
background-size: 140px 140px, auto;
}
/* Re-state the bottom hairline as a clean linear gradient
(the earlier override is harmless but spec'd extra grain
in case future Safari fallbacks miss the section bg). */
.section--cream::after {
background-image: linear-gradient(90deg, transparent 0%, rgba(196,154,60,0.45) 50%, transparent 100%);
background-size: auto;
background-repeat: no-repeat;
background-position: center;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-head--start { text-align: right; margin-inline: 0; }
.section-head h2 {
font-size: 40px; line-height: 1.12; margin-top: 12px;
}
.section-head p {
font-size: 16px; color: var(--ink-500); line-height: 1.55; margin-top: 14px;
}
.section--dark .section-head p { color: rgba(255,255,255,0.72); }
/* ── Hero ────────────────────────────────────────────────────── */
.hero {
background: var(--ink-900);
color: #fff;
position: relative; overflow: hidden;
padding: 88px 0 96px;
}
/* Living aurora — three independently-drifting blurred orbs +
a faint SVG-turbulence grain. Each orb is its own absolutely-
positioned span injected by site.js into the hero on load,
so the static CSS fallback (two ::before/::after radial
gradients) still looks intentional when JS is disabled OR
the user prefers reduced motion. Below: orbs are visually
hidden by default and revealed only by the script. */
.hero::before, .hero::after {
content: ''; position: absolute; pointer-events: none;
border-radius: 50%;
}
.hero::before {
top: -160px; right: -100px; width: 600px; height: 600px;
background: radial-gradient(circle, rgba(200,152,90,0.22), transparent 60%);
filter: blur(0px);
}
.hero::after {
bottom: -180px; left: 180px; width: 460px; height: 460px;
background: radial-gradient(circle, rgba(36,150,137,0.14), transparent 65%);
}
/* ───── Aurora layers (JS-injected) ───── */
.hero .aurora {
position: absolute; inset: 0;
pointer-events: none; overflow: hidden;
z-index: 0;
}
.hero .aurora-orb {
position: absolute;
width: 62vw; height: 62vw;
max-width: 720px; max-height: 720px;
border-radius: 50%;
filter: blur(80px);
will-change: transform;
opacity: 1;
}
.hero .aurora-orb-1 {
top: -22%; right: -12%;
background: radial-gradient(circle, rgba(196,154,60,0.18), transparent 62%);
animation: sp-aurora-drift-1 52s ease-in-out infinite;
}
.hero .aurora-orb-2 {
bottom: -28%; left: -8%;
background: radial-gradient(circle, rgba(36,150,137,0.12), transparent 62%);
animation: sp-aurora-drift-2 46s ease-in-out infinite;
}
.hero .aurora-orb-3 {
top: 10%; left: 28%;
width: 48vw; height: 48vw;
max-width: 560px; max-height: 560px;
background: radial-gradient(circle, rgba(59,46,102,0.14), transparent 65%);
animation: sp-aurora-drift-3 58s ease-in-out infinite;
}
.hero .aurora-noise {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
opacity: 0.04;
mix-blend-mode: overlay;
pointer-events: none;
}
.hero .aurora-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(196,154,60,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(196,154,60,0.04) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
/* When aurora is injected, the static fallback orbs would
double-up — hide them. JS adds .has-aurora to the .hero
element after injection. */
.hero.has-aurora::before,
.hero.has-aurora::after { display: none; }
@keyframes sp-aurora-drift-1 {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-6%, 4%, 0) scale(1.08); }
100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes sp-aurora-drift-2 {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(5%, -3%, 0) scale(1.05); }
100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes sp-aurora-drift-3 {
0% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(-3%, 6%, 0) scale(0.95); }
66% { transform: translate3d(4%, -2%, 0) scale(1.04); }
100% { transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.hero .aurora-orb-1,
.hero .aurora-orb-2,
.hero .aurora-orb-3 { animation: none; }
}
.hero-grid {
position: relative;
display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center;
}
.hero h1 {
font-size: 64px; font-weight: 500;
line-height: 1.05;
letter-spacing: -0.03em;
color: #fff;
}
.hero h1 em { font-style: normal; }
.hero h1 .strike { text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.4); }
.hero h1 .gold { color: var(--copper-300); }
.hero h1 .teal { color: var(--success-500); }
.hero-sub {
margin-top: 22px;
font-size: 18px; line-height: 1.55;
color: rgba(255,255,255,0.78);
max-width: 540px;
}
.hero-ctas { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust {
margin-top: 28px;
display: flex; gap: 24px; flex-wrap: wrap;
font-size: 12.5px; color: rgba(255,255,255,0.68);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
/* hero product card */
.hero-product { position: relative; display: flex; justify-content: center; }
.hero-card-back {
position: absolute; top: 36px; right: -10px;
transform: rotate(3deg);
width: 320px; padding: 18px; border-radius: 18px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(8px);
}
.hero-card-back .label { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.hero-card-back .amount {
font-family: var(--font-display); font-size: 26px; font-weight: 500;
color: rgba(255,255,255,0.85); letter-spacing: -0.02em;
}
.hero-card-back .meta { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.hero-card {
position: relative; z-index: 2;
width: 340px; padding: 24px; border-radius: 18px;
background: linear-gradient(180deg, #1F2A4E 0%, #1A2342 100%);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.hero-card-eyebrow {
display: flex; align-items: center; gap: 6px;
color: rgba(255,255,255,0.65); font-size: 11.5px;
margin-bottom: 12px;
}
.hero-card .title {
font-family: var(--font-display); font-size: 19px; font-weight: 500;
color: #fff; letter-spacing: -0.015em;
}
.hero-card .subtitle {
font-size: 11.5px; color: rgba(255,255,255,0.55);
margin-top: 4px;
}
.hero-card .timeline {
display: flex; align-items: center; gap: 4px; margin: 20px 0;
}
.hero-card .timeline div {
flex: 1; height: 4px; border-radius: 2px;
background: rgba(255,255,255,0.1);
}
.hero-card .timeline .full { background: var(--copper-500); }
.hero-card .timeline .half { background: rgba(200,154,60,0.5); }
.hero-card .row {
display: flex; justify-content: space-between; align-items: baseline;
}
.hero-card .row .lbl { font-size: 11.5px; color: rgba(255,255,255,0.55); }
.hero-card .row .val {
font-family: var(--font-display); font-size: 24px; font-weight: 500; color: #fff;
letter-spacing: -0.02em;
}
/* ── How it works (steps) ────────────────────────────────────── */
.steps {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.step {
position: relative;
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 24px;
box-shadow: var(--shadow-sm);
}
.step .num {
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
color: var(--copper-700); margin-bottom: 14px;
}
.step .icon-tile {
width: 46px; height: 46px; border-radius: 12px;
background: var(--copper-050); border: 1px solid var(--copper-200);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 14px;
color: var(--copper-700);
}
.step h3 {
font-size: 17px; font-weight: 600; margin-bottom: 6px;
letter-spacing: -0.015em;
}
.step p { font-size: 13.5px; color: var(--ink-600); line-height: 1.55; }
.step .arrow {
position: absolute; top: 64px; left: -16px;
color: var(--border-strong);
}
/* ── Use cases grid ──────────────────────────────────────────── */
.usecases {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.usecase {
padding: 24px;
border-radius: var(--r-lg);
background: var(--surface-bg);
border: 1px solid var(--border-soft);
display: flex; flex-direction: column; gap: 12px;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.usecase:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--copper-200); }
.usecase .emoji { font-size: 34px; line-height: 1; }
.usecase h3 { font-size: 19px; }
.usecase p { font-size: 13px; color: var(--ink-600); line-height: 1.55; }
.usecase .stat {
padding-top: 12px; margin-top: auto;
border-top: 1px dashed var(--border-default);
font-size: 11.5px; color: var(--ink-500);
}
.usecase .stat .v { color: var(--ink-900); font-weight: 600; font-family: var(--font-mono); }
/* ── Stat strip ──────────────────────────────────────────────── */
.stats-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.stat-cell {
padding: 18px 22px;
border-inline-end: 1px solid var(--border-soft);
}
.stat-cell:last-child { border-inline-end: none; }
.stat-cell .v {
font-family: var(--font-display); font-size: 40px; font-weight: 500;
letter-spacing: -0.025em; line-height: 1.05; color: var(--ink-900);
}
.stat-cell .l {
font-size: 13px; font-weight: 500; color: var(--ink-700); margin-top: 4px;
}
.stat-cell .sub { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
/* dark version */
.section--dark .stat-cell { border-color: rgba(255,255,255,0.12); }
.section--dark .stat-cell .v { color: #fff; }
.section--dark .stat-cell .l { color: rgba(255,255,255,0.8); }
.section--dark .stat-cell .sub { color: rgba(255,255,255,0.5); }
/* ── Brands strip ────────────────────────────────────────────── */
.brand-strip {
background: var(--surface-card);
border-bottom: 1px solid var(--border-soft);
padding: 22px 0;
}
.brand-strip-row {
display: flex; align-items: center; gap: 48px; flex-wrap: wrap;
}
.brand-strip .label {
font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
color: var(--ink-500); text-transform: uppercase;
}
.brand-strip .name {
font-family: var(--font-display); font-size: 18px; font-weight: 600;
color: var(--ink-400); letter-spacing: -0.015em;
opacity: .8;
}
/* ── Big CTA banner ──────────────────────────────────────────── */
.cta-banner {
padding: 48px 56px;
border-radius: var(--r-2xl);
background: var(--ink-900); color: #fff;
display: flex; align-items: center; justify-content: space-between; gap: 32px;
position: relative; overflow: hidden;
}
.cta-banner::before {
content: ''; position: absolute;
top: -60px; right: -40px; width: 380px; height: 380px;
background: radial-gradient(circle, rgba(200,152,90,0.22), transparent 60%);
pointer-events: none;
}
.cta-banner > * { position: relative; }
.cta-banner h2 { font-size: 38px; line-height: 1.15; margin-top: 12px; }
.cta-banner p {
font-size: 15px; color: rgba(255,255,255,0.72); line-height: 1.55;
margin-top: 10px; max-width: 480px;
}
.cta-banner--copper { background: var(--copper-500); }
.cta-banner--copper::before { background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%); }
.cta-banner--copper p { color: rgba(255,255,255,0.88); }
/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
background: var(--ink-900);
color: rgba(255,255,255,0.7);
padding: 56px 0 32px;
}
.footer-grid {
display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px;
padding-bottom: 36px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-about p {
font-size: 13px; line-height: 1.6; margin-top: 14px;
color: rgba(255,255,255,0.6); max-width: 280px;
}
.footer-col .h {
font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
color: var(--copper-300); text-transform: uppercase;
margin-bottom: 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.footer-col a { color: rgba(255,255,255,0.72); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
padding-top: 24px;
display: flex; align-items: center; gap: 18px; font-size: 12px;
color: rgba(255,255,255,0.55);
flex-wrap: wrap;
}
.footer-bottom .right { margin-inline-start: auto; display: inline-flex; gap: 6px; align-items: center; color: rgba(255,255,255,0.7); }
.footer-socials {
display: flex; gap: 10px;
}
.footer-socials a {
width: 32px; height: 32px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.72);
}
.footer-socials a:hover { background: rgba(255,255,255,0.06); color: #fff; }
/* ── Page header (non-homepage hero) ─────────────────────────── */
.page-head {
background: var(--surface-card);
border-bottom: 1px solid var(--border-soft);
padding: 64px 0 48px;
text-align: center;
}
.page-head h1 {
font-size: 56px; line-height: 1.05;
margin-top: 16px;
letter-spacing: -0.03em;
}
.page-head p {
font-size: 18px; color: var(--ink-500); line-height: 1.5;
max-width: 620px; margin: 16px auto 0;
}
.page-head--dark {
background: var(--ink-900); color: #fff;
border-color: transparent;
}
.page-head--dark h1 { color: #fff; }
.page-head--dark p { color: rgba(255,255,255,0.72); }
/* ── Pricing tiers ───────────────────────────────────────────── */
.tiers {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.tier {
padding: 30px 26px;
border-radius: var(--r-lg);
background: var(--surface-card);
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-sm);
position: relative;
display: flex; flex-direction: column;
}
.tier--featured {
background: var(--ink-900);
color: #fff;
border: none;
box-shadow: 0 24px 56px rgba(11,27,58,0.22);
}
.tier--featured h3 { color: #fff; }
.tier .tag {
position: absolute; top: -12px; right: 24px;
padding: 5px 12px; border-radius: 999px;
background: var(--copper-500); color: #fff;
font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.tier h3 { font-size: 22px; font-weight: 500; }
.tier .sub {
font-size: 12.5px; color: var(--ink-500); margin-top: 4px;
}
.tier--featured .sub { color: rgba(255,255,255,0.6); }
.tier .price {
margin: 18px 0 6px;
display: flex; align-items: baseline; gap: 8px;
}
.tier .price .rate {
font-family: var(--font-display); font-size: 40px; font-weight: 500;
letter-spacing: -0.025em;
color: var(--copper-700);
}
.tier--featured .price .rate { color: var(--copper-300); }
.tier .price .of {
font-size: 13px; color: var(--ink-500);
}
.tier--featured .price .of { color: rgba(255,255,255,0.55); }
.tier .min {
font-size: 11.5px; color: var(--ink-500); margin-bottom: 22px;
}
.tier--featured .min { color: rgba(255,255,255,0.5); }
.tier ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
margin-bottom: 24px;
}
.tier li {
font-size: 13px;
display: flex; align-items: flex-start; gap: 8px;
color: var(--ink-700);
}
.tier--featured li { color: rgba(255,255,255,0.92); }
.tier li.off {
color: var(--ink-400);
text-decoration: line-through;
text-decoration-color: var(--ink-300);
}
.tier--featured li.off { color: rgba(255,255,255,0.4); }
.tier li .tick {
width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
border-radius: 50%;
background: var(--success-100);
display: inline-flex; align-items: center; justify-content: center;
}
.tier--featured li .tick { background: var(--copper-500); }
.tier li.off .tick {
background: transparent;
border: 1.5px dashed currentColor;
}
.tier li .tick svg { width: 9px; height: 9px; stroke: var(--success-700); stroke-width: 3; fill: none; }
.tier--featured li .tick svg { stroke: #fff; }
.tier li.off .tick svg { display: none; }
.tier .cta { margin-top: auto; width: 100%; height: 46px; border-radius: 12px; font-weight: 600; font-size: 14px; }
/* ── Comparison table ────────────────────────────────────────── */
.cmp {
width: 100%; border-collapse: collapse; font-size: 13.5px;
background: var(--surface-card);
border-radius: var(--r-lg);
overflow: hidden;
border: 1px solid var(--border-soft);
}
.cmp thead th {
background: var(--surface-tint); color: var(--ink-500);
font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; padding: 14px 16px;
}
.cmp thead th.sp { background: var(--copper-050); color: var(--copper-700); }
.cmp tbody td { padding: 14px 16px; text-align: center; }
.cmp tbody td:first-child { text-align: right; font-weight: 500; color: var(--ink-900); }
.cmp tbody td.sp { background: var(--copper-050); font-weight: 600; color: var(--copper-700); }
.cmp tbody tr + tr td { border-top: 1px solid var(--border-soft); }
.cmp .yes { color: var(--success-500); }
.cmp .no { color: var(--danger-500); }
/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.faq-q {
width: 100%; display: flex; align-items: center; justify-content: space-between;
padding: 18px 22px;
font-family: var(--font-display); font-size: 16px; font-weight: 500;
text-align: right; letter-spacing: -0.01em; color: var(--ink-900);
}
.faq-q svg { transition: transform .2s ease; }
.faq-item[open] .faq-q svg { transform: rotate(180deg); }
.faq-a {
padding: 0 22px 18px;
font-size: 14px; color: var(--ink-600); line-height: 1.65;
}
/* ── Forms ───────────────────────────────────────────────────── */
.form-card {
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 32px;
box-shadow: var(--shadow-md);
}
.form-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label {
font-size: 12.5px; font-weight: 600; color: var(--ink-700);
}
.field label .req { color: var(--danger-500); }
.field input, .field textarea, .field select {
height: 46px;
padding: 0 14px;
background: var(--surface-bg);
border: 1px solid var(--border-default);
border-radius: 10px;
font-size: 14px;
transition: border-color .15s ease, background .15s ease;
width: 100%;
}
.field textarea { padding: 12px 14px; min-height: 120px; height: auto; line-height: 1.5; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
outline: none;
border-color: var(--ink-900);
background: #fff;
}
.field .hint { font-size: 11.5px; color: var(--ink-500); }
.radio-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.radio-card {
border: 1px solid var(--border-default);
border-radius: 12px;
padding: 14px;
cursor: pointer;
background: var(--surface-bg);
transition: border-color .15s ease, background .15s ease;
display: flex; gap: 10px; align-items: flex-start;
}
.radio-card:hover { border-color: var(--ink-700); }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card .dot {
width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
border-radius: 50%;
border: 1.5px solid var(--border-strong);
background: #fff;
transition: border-color .15s ease, background .15s ease;
}
.radio-card.selected { border-color: var(--ink-900); background: #fff; }
.radio-card.selected .dot {
border-color: var(--ink-900);
box-shadow: inset 0 0 0 4px var(--ink-900);
background: #fff;
}
.radio-card .lbl { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.radio-card .sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.radio-card .emoji { font-size: 22px; line-height: 1; }
/* ── Timeline (used on vertical pages) ───────────────────────── */
.timeline {
position: relative; padding: 20px 0;
}
.timeline .line {
position: absolute; top: 56px; right: 56px; left: 56px;
height: 3px;
background: linear-gradient(90deg, var(--success-500), var(--copper-500));
border-radius: 999px;
}
.timeline-row {
position: relative;
display: grid; gap: 18px;
}
.tl-step { text-align: center; }
.tl-step .day {
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
color: var(--copper-700); letter-spacing: 0.04em; margin-bottom: 6px;
}
.tl-step .dot {
width: 36px; height: 36px; border-radius: 50%;
background: var(--ink-900); color: #fff;
margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px;
border: 4px solid var(--surface-bg);
position: relative; z-index: 1;
}
.tl-step.last .dot { background: var(--copper-500); }
.tl-step .t {
font-family: var(--font-display); font-size: 14px; font-weight: 600;
letter-spacing: -0.01em; margin-bottom: 4px; color: var(--ink-900);
}
.tl-step .d { font-size: 11.5px; color: var(--ink-500); line-height: 1.5; }
/* ── Quote / Testimonial ─────────────────────────────────────── */
.quote-card {
padding: 48px 56px;
border-radius: var(--r-2xl);
background: var(--surface-card);
border: 1px solid var(--border-soft);
display: grid; grid-template-columns: 60px 1fr; gap: 22px;
}
.quote-card .mark {
font-family: var(--font-display); font-size: 88px; font-weight: 500;
line-height: .9; color: var(--copper-500); letter-spacing: -0.04em;
}
.quote-card p {
font-family: var(--font-display); font-size: 24px; font-weight: 500;
letter-spacing: -0.02em; line-height: 1.4; color: var(--ink-900);
margin-bottom: 20px;
}
.quote-meta { display: flex; align-items: center; gap: 12px; }
.avatar {
width: 44px; height: 44px; flex-shrink: 0;
border-radius: 50%;
background: var(--copper-500); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 14px;
}
.avatar--ink { background: var(--ink-700); }
.avatar--success { background: var(--success-500); }
.quote-meta .name { font-size: 14px; font-weight: 600; }
.quote-meta .role { font-size: 12px; color: var(--ink-500); }
.quote-meta .stars { margin-inline-start: auto; color: var(--copper-500); letter-spacing: 2px; }
/* ── Risk grid (dark) ────────────────────────────────────────── */
.risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.risk-card {
padding: 24px;
border-radius: var(--r-lg);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
}
.risk-card .icon { font-size: 28px; margin-bottom: 12px; }
.risk-card h3 { font-size: 18px; color: #fff; margin-bottom: 6px; }
.risk-card p { font-size: 13.5px; color: rgba(255,255,255,0.66); line-height: 1.55; }
/* ── Feature row (security page etc.) ────────────────────────── */
.feature-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
align-items: center;
}
.feature-row.flip { direction: ltr; }
.feature-row.flip > * { direction: rtl; }
.feature-row + .feature-row { margin-top: 80px; }
.feature-row .body h3 { font-size: 32px; margin-top: 10px; line-height: 1.15; }
.feature-row .body p { font-size: 16px; color: var(--ink-600); line-height: 1.6; margin-top: 14px; }
.feature-row .body ul { padding-inline-start: 18px; margin-top: 16px; font-size: 14px; color: var(--ink-700); line-height: 1.8; }
.feature-row .visual {
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-2xl);
padding: 28px;
min-height: 280px;
box-shadow: var(--shadow-md);
}
/* ── Mini deal card (for visuals) ────────────────────────────── */
.mini-deal {
background: var(--surface-tint);
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 18px;
}
.mini-deal .row {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 13px; color: var(--ink-600); margin-bottom: 6px;
}
.mini-deal .row .v {
font-family: var(--font-mono); font-weight: 500; color: var(--ink-900);
}
.mini-deal .divider {
height: 1px; background: var(--border-default); margin: 10px 0;
}
.mini-deal .total {
font-family: var(--font-display); font-size: 22px; font-weight: 500;
color: var(--ink-900); letter-spacing: -0.02em;
}
/* ── Lists / Bullets ─────────────────────────────────────────── */
.bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.bullets li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-700); line-height: 1.6; }
.bullets li::before {
content: ''; width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
border-radius: 50%; background: var(--success-050);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23156B62' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
background-size: 12px; background-position: center; background-repeat: no-repeat;
}
/* ── Calculator (pricing) ────────────────────────────────────── */
.calc {
display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px;
align-items: center;
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
padding: 32px 36px;
}
.calc-slider {
position: relative; height: 8px;
background: var(--ink-100);
border-radius: 999px;
margin: 14px 0 18px;
}
.calc-slider .fill {
position: absolute; top: 0; right: 0; bottom: 0;
background: var(--ink-900); border-radius: 999px;
}
.calc-slider input[type="range"] {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; cursor: pointer;
}
.calc-slider .thumb {
position: absolute; top: -6px;
width: 20px; height: 20px;
background: #fff; border: 2px solid var(--ink-900);
border-radius: 50%;
box-shadow: 0 2px 6px rgba(11,27,58,0.18);
transform: translateX(50%);
}
.calc-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.calc-presets button {
padding: 6px 12px; border-radius: 8px;
background: var(--surface-bg);
border: 1px solid var(--border-soft);
font-size: 12px; color: var(--ink-700);
font-family: var(--font-mono);
}
.calc-presets button.on { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.calc-result {
padding: 24px;
border-radius: 14px;
background: var(--ink-900); color: #fff;
position: relative; overflow: hidden;
}
.calc-result::before {
content: ''; position: absolute; top: -30px; right: -30px;
width: 160px; height: 160px;
background: radial-gradient(circle, rgba(200,152,90,0.18), transparent 65%);
pointer-events: none;
}
.calc-result > * { position: relative; }
.calc-result .lbl { font-size: 12px; color: rgba(255,255,255,0.6); }
.calc-result .big {
font-family: var(--font-display); font-size: 32px; font-weight: 500;
letter-spacing: -0.022em;
}
.calc-result .divider { height: 1px; background: rgba(255,255,255,0.12); margin: 16px 0; }
.calc-result .row { display: flex; justify-content: space-between; align-items: baseline; }
.calc-result .row .lbl2 { font-size: 12px; color: rgba(255,255,255,0.7); }
.calc-result .row .v {
font-family: var(--font-display); font-size: 22px; font-weight: 500;
color: var(--copper-300);
}
.calc-result .footnote {
font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 8px;
}
/* ── Help center cards ───────────────────────────────────────── */
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.help-card {
padding: 22px;
border-radius: var(--r-lg);
background: var(--surface-card);
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-sm);
transition: transform .15s ease, box-shadow .15s ease;
}
.help-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.help-card .icon-tile { margin-bottom: 14px; }
.help-card h3 { font-size: 17px; }
.help-card p { font-size: 13px; color: var(--ink-600); margin-top: 6px; line-height: 1.55; }
.help-card .arrow { color: var(--ink-500); font-size: 13px; margin-top: 12px; display: inline-flex; align-items: center; gap: 4px; }
/* ── Trust callout (security badges) ─────────────────────────── */
.trust-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.trust-tile {
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 22px;
display: flex; gap: 14px; align-items: flex-start;
}
.trust-tile .icon-tile { flex-shrink: 0; margin-bottom: 0; }
.trust-tile h3 { font-size: 15.5px; }
.trust-tile p { font-size: 13px; color: var(--ink-600); margin-top: 4px; line-height: 1.55; }
.icon-tile {
width: 44px; height: 44px; border-radius: 12px;
background: var(--copper-050); border: 1px solid var(--copper-200);
display: inline-flex; align-items: center; justify-content: center;
color: var(--copper-700);
flex-shrink: 0;
}
/* ── Banner / inline note ────────────────────────────────────── */
.note {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 14px;
background: var(--copper-050);
border: 1px solid var(--copper-200);
color: var(--copper-700);
border-radius: 999px;
font-size: 12.5px; font-weight: 600;
letter-spacing: 0.01em;
}
.note--success { background: var(--success-050); color: var(--success-700); border-color: var(--success-100); }
.note--dark { background: rgba(200,152,90,0.12); color: var(--copper-300); border-color: rgba(200,152,90,0.25); }
/* ── Article (terms/legal) ───────────────────────────────────── */
.article {
max-width: 760px; margin: 0 auto;
font-size: 15px; line-height: 1.75; color: var(--ink-700);
}
.article h2 { font-size: 26px; margin-top: 36px; margin-bottom: 12px; color: var(--ink-900); }
.article h3 { font-size: 18px; margin-top: 24px; margin-bottom: 8px; color: var(--ink-900); }
.article p, .article ul { margin-bottom: 12px; }
.article ul { padding-inline-start: 22px; }
.article .toc {
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
padding: 20px 24px;
margin-bottom: 40px;
list-style: decimal-leading-zero;
font-size: 14px;
font-family: var(--font-mono);
}
.article .toc li { margin: 4px 0; }
.article .toc a { color: var(--ink-700); }
.article .toc a:hover { color: var(--copper-700); }
/* ── Yad2 mockup card (used on car vertical) ─────────────────── */
.yad2-card {
background: var(--surface-tint);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 20px;
}
.yad2-card .url {
font-size: 11px; color: var(--ink-500); font-family: var(--font-mono);
margin-bottom: 12px;
}
.yad2-card .listing {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 14px;
}
.yad2-card .listing-title { font-size: 16px; font-weight: 600; }
.yad2-card .listing-meta { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.yad2-card .listing-price {
font-family: var(--font-display); font-size: 20px; font-weight: 500;
letter-spacing: -0.015em;
}
/* ═══════════════════════════════════════════════════════════════
v2 — Editorial upgrades
═══════════════════════════════════════════════════════════════ */
/* ── Top eyebrow rule (subtle horizontal divider for eyebrows) ── */
.eyebrow--rule {
display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow--rule::before {
content: ''; width: 28px; height: 1px; background: currentColor;
opacity: .5;
}
/* ── Hero v2 refinements ─────────────────────────────────────── */
.hero--v2 { padding: 96px 0 120px; }
.hero--v2::before {
top: -200px; right: -120px; width: 720px; height: 720px;
background: radial-gradient(circle, rgba(196,154,60,0.20), transparent 62%);
}
.hero--v2 .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; }
.hero--v2 h1 {
font-size: 72px; line-height: 1.02; letter-spacing: -0.035em; font-weight: 500;
}
.hero--v2 h1 .gold { color: var(--copper-300); }
.hero--v2 h1 .teal { color: #4FBEAE; }
.hero--v2 .hero-sub { font-size: 19px; max-width: 560px; color: rgba(255,255,255,0.82); }
/* tiny meta line under headline (kicker) */
.hero-kicker {
margin-top: 26px;
display: inline-flex; align-items: center; gap: 14px;
padding: 8px 14px 8px 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 999px;
font-size: 12.5px; color: rgba(255,255,255,0.78);
}
.hero-kicker .badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 9px; background: rgba(196,154,60,0.18);
color: var(--copper-300); border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
/* Cinematic deal stack (replaces hero-product) */
.deal-stack {
position: relative; min-height: 460px;
display: flex; align-items: center; justify-content: center;
}
.deal-card {
position: absolute;
width: 360px; padding: 24px; border-radius: 20px;
background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,255,255,0.10);
backdrop-filter: blur(10px);
box-shadow: 0 30px 80px rgba(0,0,0,0.35);
color: #fff;
}
.deal-card.dc-back {
top: 0; right: -36px; transform: rotate(4deg) scale(.86);
opacity: .55;
}
.deal-card.dc-back2 {
bottom: 0; left: -28px; transform: rotate(-3deg) scale(.82);
opacity: .42;
}
.deal-card.dc-front {
z-index: 3;
background: linear-gradient(180deg, #1F2A4E 0%, #161E3A 100%);
border: 1px solid rgba(196,154,60,0.30);
}
.deal-card .dc-eyebrow {
display: flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--copper-300);
margin-bottom: 14px;
}
.deal-card .dc-eyebrow .pulse {
width: 7px; height: 7px; border-radius: 50%; background: #4FBEAE;
box-shadow: 0 0 0 0 rgba(79,190,174,0.6);
animation: pulse 1.8s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(79,190,174,0.45); }
70% { box-shadow: 0 0 0 9px rgba(79,190,174,0); }
100% { box-shadow: 0 0 0 0 rgba(79,190,174,0); }
}
.deal-card .dc-title {
font-family: var(--font-display); font-size: 21px; font-weight: 500;
letter-spacing: -0.018em; line-height: 1.25;
}
.deal-card .dc-sub {
font-size: 12.5px; color: rgba(255,255,255,0.55); margin-top: 4px;
}
.deal-card .dc-tl {
display: flex; gap: 4px; margin: 22px 0 18px;
}
.deal-card .dc-tl > div {
flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08);
}
.deal-card .dc-tl .ok { background: var(--copper-500); }
.deal-card .dc-tl .live {
background: linear-gradient(90deg, var(--copper-500) 60%, rgba(196,154,60,0.2));
position: relative; overflow: hidden;
}
.deal-card .dc-tl .live::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 1.8s infinite;
}
@keyframes shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
.deal-card .dc-amt-label {
font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 4px;
}
.deal-card .dc-amt {
font-family: var(--font-display); font-size: 32px; font-weight: 500;
letter-spacing: -0.022em; color: #fff;
}
.deal-card .dc-meta-row {
margin-top: 16px; padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex; justify-content: space-between; font-size: 11.5px;
}
.deal-card .dc-meta-row span:first-child { color: rgba(255,255,255,0.5); }
.deal-card .dc-meta-row span:last-child { color: rgba(255,255,255,0.85); font-family: var(--font-mono); }
/* dashed lines connecting hero cards (decorative svg overlay) */
.deal-stack svg.deal-connect {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none;
opacity: .35;
}
/* ── Activity strip (live escrow ticker) ──────────────────────── */
.activity-strip {
background: var(--surface-card);
border-bottom: 1px solid var(--border-soft);
padding: 18px 0;
overflow: hidden;
}
.activity-row {
display: flex; align-items: center; gap: 28px;
}
.activity-headline {
display: flex; align-items: center; gap: 10px;
flex-shrink: 0;
font-size: 12.5px;
font-weight: 500; color: var(--ink-700);
}
.activity-headline .live-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--success-500);
position: relative;
}
.activity-headline .live-dot::after {
content: ''; position: absolute; inset: -2px; border-radius: 50%;
background: var(--success-500); opacity: .4;
animation: livepulse 1.6s infinite;
}
@keyframes livepulse {
0% { transform: scale(1); opacity: .5; }
100% { transform: scale(2.6); opacity: 0; }
}
.activity-headline .label { color: var(--ink-500); }
.activity-headline .num {
font-family: var(--font-display); font-weight: 600; color: var(--ink-900);
font-size: 15px; letter-spacing: -0.012em;
}
.activity-feed {
flex: 1; overflow: hidden; position: relative;
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.activity-feed-track {
display: inline-flex; gap: 36px;
animation: tickerScroll 60s linear infinite;
white-space: nowrap;
font-size: 12.5px; color: var(--ink-600);
}
.activity-feed-track:hover { animation-play-state: paused; }
@keyframes tickerScroll {
from { transform: translateX(0); }
to { transform: translateX(50%); }
}
.activity-item {
display: inline-flex; align-items: center; gap: 8px;
}
.activity-item .tag {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
color: var(--copper-700); background: var(--copper-050);
padding: 2px 8px; border-radius: 999px;
}
.activity-item .tag.t-rel { color: var(--success-700); background: var(--success-050); }
.activity-item .tag.t-new { color: var(--ink-700); background: var(--surface-tint); }
.activity-item .amt { font-family: var(--font-mono); font-weight: 500; color: var(--ink-900); }
.activity-item .sep { color: var(--ink-300); }
.activity-item .city { color: var(--ink-500); }
/* ── Problem section (editorial dark) ─────────────────────────── */
.problem {
background: #0F1530;
color: #fff;
position: relative; overflow: hidden;
padding: 96px 0 100px;
}
.problem::before {
content: ''; position: absolute;
inset: 0;
background-image:
radial-gradient(ellipse at top right, rgba(255,89,99,0.10), transparent 50%),
radial-gradient(ellipse at bottom left, rgba(196,154,60,0.08), transparent 55%);
pointer-events: none;
}
.problem > .container { position: relative; }
.problem-head {
display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px;
align-items: end; margin-bottom: 56px;
}
.problem-head h2 {
font-size: 56px; line-height: 1.05; letter-spacing: -0.03em;
color: #fff;
}
.problem-head h2 .danger {
color: #FF8088;
display: inline-block;
}
.problem-head .lede {
font-size: 17px; line-height: 1.7;
color: rgba(255,255,255,0.78);
max-width: 480px;
}
.problem-head .lede + .lede { margin-top: 14px; }
.problem-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border-top: 1px solid rgba(255,255,255,0.10);
border-bottom: 1px solid rgba(255,255,255,0.10);
}
.p-stat {
padding: 32px 28px;
border-inline-end: 1px solid rgba(255,255,255,0.10);
position: relative;
}
.p-stat:last-child { border-inline-end: none; }
.p-stat .label {
font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.5); margin-bottom: 16px;
}
.p-stat .v {
font-family: var(--font-display); font-size: 64px; font-weight: 500;
letter-spacing: -0.035em; line-height: 1;
color: #fff;
}
.p-stat .v.danger { color: #FF8088; }
.p-stat .v .unit {
font-size: 28px; color: rgba(255,255,255,0.4);
font-weight: 400; margin-inline-start: 4px;
}
.p-stat .d {
font-size: 13.5px; line-height: 1.55;
color: rgba(255,255,255,0.72); margin-top: 14px;
max-width: 280px;
}
.p-stat .src {
margin-top: 14px; font-family: var(--font-mono);
font-size: 10.5px; color: rgba(255,255,255,0.4);
}
.problem-foot {
margin-top: 56px;
display: flex; align-items: center; gap: 18px;
font-size: 14px; color: rgba(255,255,255,0.7);
}
.problem-foot .turn {
font-family: var(--font-display); font-size: 22px; font-weight: 500;
letter-spacing: -0.015em; color: #fff;
}
.problem-foot .arrow {
width: 36px; height: 1px; background: rgba(255,255,255,0.4);
}
/* ── Comparison module ────────────────────────────────────────── */
.compare {
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-2xl);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.compare-head {
display: grid; grid-template-columns: 1.4fr repeat(4, 1fr);
background: var(--surface-tint);
border-bottom: 1px solid var(--border-default);
}
.compare-head .cell {
padding: 22px 18px; text-align: center;
font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-500);
border-inline-end: 1px solid var(--border-soft);
}
.compare-head .cell:last-child { border-inline-end: none; }
.compare-head .cell:first-child { text-align: right; text-transform: none; letter-spacing: 0; color: var(--ink-700); font-size: 13px; font-weight: 500; }
.compare-head .cell.sp {
background: var(--ink-900); color: #fff;
position: relative;
}
.compare-head .cell.sp::after {
content: 'מומלץ';
position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
background: var(--copper-500); color: #fff;
padding: 2px 8px; border-radius: 999px;
font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
}
.compare-row {
display: grid; grid-template-columns: 1.4fr repeat(4, 1fr);
border-top: 1px solid var(--border-soft);
}
.compare-row:first-child { border-top: none; }
.compare-row .cell {
padding: 20px 18px; text-align: center; font-size: 13.5px;
color: var(--ink-700);
border-inline-end: 1px solid var(--border-soft);
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.compare-row .cell:last-child { border-inline-end: none; }
.compare-row .cell.crit {
text-align: right; justify-content: flex-start;
font-weight: 500; color: var(--ink-900); font-size: 14px;
}
.compare-row .cell.crit small {
display: block; font-size: 11.5px; color: var(--ink-500); margin-top: 2px; font-weight: 400;
}
.compare-row .cell.sp {
background: rgba(196,154,60,0.06);
color: var(--ink-900); font-weight: 600;
}
.compare-row .cell .mark {
width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
}
.compare-row .cell .mark.yes { background: var(--success-050); color: var(--success-700); }
.compare-row .cell .mark.no { background: var(--danger-100); color: var(--danger-700); }
.compare-row .cell .mark.mid { background: var(--warning-100); color: var(--warning-700); }
.compare-row .cell .mark svg { width: 11px; height: 11px; }
/* ── Voices wall (testimonials grid) ──────────────────────────── */
.voices {
display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 18px;
}
.voice {
background: var(--surface-card);
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
padding: 26px;
display: flex; flex-direction: column; gap: 14px;
box-shadow: var(--shadow-sm);
}
.voice--lg {
grid-row: span 2;
background: var(--ink-900); color: #fff; border: none;
padding: 32px;
}
.voice--lg .stars { color: var(--copper-300); }
.voice--lg .quote { font-size: 22px; }
.voice .stars { color: var(--copper-500); letter-spacing: 2px; font-size: 14px; }
.voice .quote {
font-family: var(--font-display); font-size: 16px; font-weight: 500;
line-height: 1.5; letter-spacing: -0.012em;
color: var(--ink-900);
margin: 0;
}
.voice--lg .quote { color: #fff; }
.voice .meta {
margin-top: auto; display: flex; align-items: center; gap: 10px;
padding-top: 14px;
border-top: 1px solid var(--border-soft);
font-size: 12.5px;
}
.voice--lg .meta { border-color: rgba(255,255,255,0.12); }
.voice .meta .nm { font-weight: 600; color: var(--ink-900); }
.voice--lg .meta .nm { color: #fff; }
.voice .meta .rl { color: var(--ink-500); }
.voice--lg .meta .rl { color: rgba(255,255,255,0.6); }
.voice .meta .v {
margin-inline-start: auto;
font-family: var(--font-mono); font-size: 11px;
color: var(--ink-500);
}
.voice--lg .meta .v { color: rgba(255,255,255,0.5); }
.voice .deal-tag {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
background: var(--copper-050); color: var(--copper-700);
border: 1px solid var(--copper-200);
font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
align-self: flex-start;
}
.voice--lg .deal-tag {
background: rgba(196,154,60,0.16); color: var(--copper-300);
border-color: rgba(196,154,60,0.28);
}
/* ── Credibility wall ─────────────────────────────────────────── */
.certs {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
border: 1px solid var(--border-soft);
border-radius: var(--r-lg);
background: var(--surface-card);
overflow: hidden;
}
.cert {
padding: 28px 26px;
border-inline-end: 1px solid var(--border-soft);
border-top: 1px solid var(--border-soft);
display: flex; flex-direction: column; gap: 8px;
}
.cert:nth-child(-n+4) { border-top: none; }
.cert:nth-child(4n) { border-inline-end: none; }
.cert .h {
font-family: var(--font-display); font-size: 17px; font-weight: 600;
letter-spacing: -0.015em; color: var(--ink-900);
}
.cert .d {
font-size: 12.5px; color: var(--ink-500); line-height: 1.5;
}
.cert .id {
margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px;
color: var(--ink-400); letter-spacing: 0.02em;
}
.cert .ico {
width: 38px; height: 38px; border-radius: 10px;
background: var(--surface-tint);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 6px;
color: var(--ink-700);
}
/* ── FAQ preview (homepage) ───────────────────────────────────── */
.faq-preview-grid {
display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px;
align-items: start;
}
.faq-preview-grid .side h2 { font-size: 38px; line-height: 1.1; }
.faq-preview-grid .side p { font-size: 15px; color: var(--ink-500); margin-top: 12px; line-height: 1.6; }
.faq-preview-grid .side .more {
margin-top: 22px; display: inline-flex; align-items: center; gap: 8px;
font-weight: 600; color: var(--copper-700);
border-bottom: 1px solid var(--copper-300); padding-bottom: 2px;
}
/* ── Section variants ─────────────────────────────────────────── */
.section--inkdeep {
background: #0F1530; color: #fff;
}
.section--inkdeep h1,.section--inkdeep h2,.section--inkdeep h3 { color: #fff; }
.section--inkdeep .section-head p { color: rgba(255,255,255,0.7); }
.section--inkdeep .eyebrow { color: var(--copper-300); }
/* ── Section eyebrow with rule (centered) ─────────────────────── */
.section-head .eyebrow--rule { color: var(--copper-700); }
.section--dark .section-head .eyebrow--rule,
.section--inkdeep .section-head .eyebrow--rule { color: var(--copper-300); }
/* ── Responsive overrides for v2 ──────────────────────────────── */
@media (max-width: 980px) {
.hero--v2 h1 { font-size: 44px; }
.deal-stack { display: none; }
.problem-head { grid-template-columns: 1fr; gap: 24px; }
.problem-head h2 { font-size: 36px; }
.problem-stats { grid-template-columns: 1fr; }
.p-stat { border-inline-end: none; border-bottom: 1px solid rgba(255,255,255,0.10); }
.p-stat:last-child { border-bottom: none; }
.p-stat .v { font-size: 48px; }
.compare-head, .compare-row { grid-template-columns: 1.2fr repeat(4, 1fr); font-size: 11px; }
.compare-head .cell, .compare-row .cell { padding: 12px 8px; font-size: 11.5px; }
.voices { grid-template-columns: 1fr 1fr; }
.voice--lg { grid-row: auto; grid-column: 1 / -1; }
.certs { grid-template-columns: 1fr 1fr; }
.cert { border-inline-end: 1px solid var(--border-soft) !important; }
.cert:nth-child(2n) { border-inline-end: none !important; }
.cert:nth-child(-n+2) { border-top: none; }
.cert:nth-child(n+3) { border-top: 1px solid var(--border-soft); }
.faq-preview-grid { grid-template-columns: 1fr; gap: 24px; }
.activity-headline { font-size: 11.5px; }
.activity-headline .num { font-size: 13px; }
}
@media (max-width: 620px) {
.voices { grid-template-columns: 1fr; }
.certs { grid-template-columns: 1fr; }
.cert { border-inline-end: none !important; border-top: 1px solid var(--border-soft); }
.cert:first-child { border-top: none; }
.compare { overflow-x: auto; }
.compare-head, .compare-row { min-width: 640px; }
}
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 980px) {
:root { --pad-page: 24px; }
.hero { padding: 56px 0 72px; }
.hero-grid { grid-template-columns: 1fr; gap: 32px; }
.hero h1 { font-size: 44px; }
.hero-product { display: none; }
.nav-links { display: none; }
.nav-actions .nav-phone { display: none; }
.nav-toggle { display: inline-flex; }
.steps, .usecases, .stats-row, .tiers, .risk-grid, .help-grid, .trust-grid { grid-template-columns: 1fr 1fr; }
.section-head h2 { font-size: 30px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.calc { grid-template-columns: 1fr; padding: 22px; }
.cta-banner { padding: 32px; flex-direction: column; align-items: flex-start; }
.feature-row { grid-template-columns: 1fr; }
.timeline-row { grid-template-columns: repeat(3, 1fr) !important; gap: 22px; }
.timeline .line { display: none; }
.form-grid { grid-template-columns: 1fr; }
.quote-card { padding: 28px; grid-template-columns: 1fr; }
.quote-card p { font-size: 18px; }
.cmp { font-size: 12px; }
.cmp thead th, .cmp tbody td { padding: 10px 8px; }
.page-head h1 { font-size: 38px; }
.brand-strip-row { gap: 24px; }
}
@media (max-width: 620px) {
.steps, .usecases, .stats-row, .tiers, .risk-grid, .help-grid, .trust-grid, .footer-grid { grid-template-columns: 1fr; }
.timeline-row { grid-template-columns: 1fr !important; }
.hero h1 { font-size: 36px; }
.page-head h1 { font-size: 32px; }
.stat-cell { border-inline-end: none; border-bottom: 1px solid var(--border-soft); padding-bottom: 16px; }
}
/* ═════════════════════════════════════════════════════════════════
AUTH MODAL — Email + Google + Facebook + Apple via Supabase
Injected by site.js when [data-auth] is clicked.
═════════════════════════════════════════════════════════════════ */
[data-auth-modal] {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(11, 27, 58, 0.6);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
[data-auth-modal].is-open {
opacity: 1;
pointer-events: auto;
}
[data-auth-modal] .am-card {
background: var(--surface-card);
border-radius: 18px;
padding: 32px 28px;
max-width: 420px;
width: 100%;
max-height: calc(100vh - 48px);
overflow-y: auto;
box-shadow: var(--shadow-lg);
position: relative;
transform: translateY(8px);
transition: transform .2s ease;
}
[data-auth-modal].is-open .am-card { transform: translateY(0); }
[data-auth-modal] .am-close {
position: absolute;
top: 14px; left: 14px;
width: 32px; height: 32px;
border-radius: 8px;
background: var(--surface-tint);
color: var(--ink-700);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
border: 0;
font-size: 20px;
line-height: 1;
}
[data-auth-modal] .am-close:hover { background: var(--ink-200); }
[data-auth-modal] .am-logo {
width: 56px; height: 56px;
margin: 0 auto 14px;
}
[data-auth-modal] .am-title {
font-family: var(--font-display);
font-size: 24px; font-weight: 600;
text-align: center;
color: var(--ink-900);
margin-bottom: 6px;
letter-spacing: -0.02em;
}
[data-auth-modal] .am-subtitle {
font-size: 13.5px;
color: var(--ink-500);
text-align: center;
margin-bottom: 20px;
line-height: 1.5;
}
[data-auth-modal] .am-tabs {
display: flex;
background: var(--surface-tint);
border-radius: 10px;
padding: 3px;
margin-bottom: 16px;
}
[data-auth-modal] .am-tab {
flex: 1;
padding: 9px;
border-radius: 8px;
text-align: center;
font-size: 13.5px;
font-weight: 600;
color: var(--ink-500);
cursor: pointer;
border: 0;
background: transparent;
}
[data-auth-modal] .am-tab.active {
background: var(--surface-card);
color: var(--ink-900);
box-shadow: var(--shadow-sm);
}
[data-auth-modal] .am-field {
display: block;
margin-bottom: 12px;
}
[data-auth-modal] .am-field input {
width: 100%;
height: 44px;
padding: 0 14px;
border-radius: 10px;
border: 1px solid var(--border-default);
background: var(--surface-card);
font-size: 14.5px;
color: var(--ink-900);
box-sizing: border-box;
}
[data-auth-modal] .am-field input:focus {
outline: none;
border-color: var(--ink-700);
box-shadow: 0 0 0 3px rgba(36, 47, 92, 0.08);
}
[data-auth-modal] .am-submit {
width: 100%;
height: 46px;
border-radius: 10px;
background: var(--ink-900);
color: #fff;
font-size: 14.5px;
font-weight: 600;
border: 0;
cursor: pointer;
margin-top: 4px;
transition: background .15s ease;
}
[data-auth-modal] .am-submit:hover:not(:disabled) { background: var(--ink-800); }
[data-auth-modal] .am-submit:disabled { opacity: .6; cursor: progress; }
[data-auth-modal] .am-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 18px 0;
font-size: 12px;
color: var(--ink-500);
}
[data-auth-modal] .am-divider::before,
[data-auth-modal] .am-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-soft);
}
[data-auth-modal] .am-oauth {
width: 100%;
height: 44px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
gap: 10px;
font-size: 14px; font-weight: 600;
cursor: pointer;
margin-bottom: 8px;
border: 1px solid var(--border-default);
background: var(--surface-card);
color: var(--ink-900);
transition: background .15s ease, border-color .15s ease;
}
[data-auth-modal] .am-oauth:hover:not(:disabled) {
background: var(--surface-tint);
border-color: var(--ink-400);
}
[data-auth-modal] .am-oauth:disabled { opacity: .55; cursor: not-allowed; }
[data-auth-modal] .am-oauth--apple {
background: #000; color: #fff; border-color: #000;
}
[data-auth-modal] .am-oauth--apple:hover:not(:disabled) { background: #1a1a1a; }
[data-auth-modal] .am-oauth--facebook {
background: #1877F2; color: #fff; border-color: #1877F2;
}
[data-auth-modal] .am-oauth--facebook:hover:not(:disabled) { background: #166FE5; }
[data-auth-modal] .am-oauth svg { width: 18px; height: 18px; }
[data-auth-modal] .am-error {
margin-top: 12px; padding: 10px 12px;
background: #FEE2E2; border: 1px solid #FCA5A5;
color: #991B1B; border-radius: 8px;
font-size: 13px; line-height: 1.5;
}
[data-auth-modal] .am-success {
margin-top: 12px; padding: 10px 12px;
background: #DCFCE7; border: 1px solid #86EFAC;
color: #14532D; border-radius: 8px;
font-size: 13px; line-height: 1.5;
}
[data-auth-modal] .am-foot {
margin-top: 18px;
text-align: center;
font-size: 12.5px;
color: var(--ink-500);
line-height: 1.6;
}
[data-auth-modal] .am-foot a {
color: var(--copper-700);
text-decoration: underline;
}
@media (max-width: 480px) {
[data-auth-modal] .am-card {
padding: 24px 18px;
border-radius: 14px;
}
[data-auth-modal] .am-title { font-size: 21px; }
}
/* ═════════════════════════════════════════════════════════════════
MOBILE FIXES — added 2026-05-25
The earlier responsive section above hides .nav-links and shows
.nav-toggle, but it never declared what happens when site.js
toggles `.is-open` on the menu, so the hamburger looked dead.
This block also tightens spacing on phones, allows the topbar
to wrap instead of clipping, and reserves space at the bottom
for the privacy notice so it doesn't cover content.
═════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
/* Mobile menu — drawer that slides down from below the sticky header */
.nav-links.is-open {
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 0;
position: fixed;
top: 68px;
inset-inline: 0;
background: var(--surface-card);
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
padding: 6px 0;
box-shadow: var(--shadow-lg);
max-height: calc(100vh - 68px);
overflow-y: auto;
z-index: 49;
font-size: 15.5px;
}
.nav-links.is-open > a,
.nav-links.is-open .nav-has-menu > a {
padding: 14px 24px;
border-bottom: 1px solid var(--border-soft);
}
.nav-links.is-open > a:last-child,
.nav-links.is-open .nav-has-menu:last-child > a { border-bottom: 0; }
/* Nested vertical menu when drawer is open — show items inline,
not as a hover-popup */
.nav-links.is-open .nav-has-menu { display: block; }
.nav-links.is-open .nav-menu {
position: static;
opacity: 1; pointer-events: auto; transform: none;
box-shadow: none; border: 0; border-radius: 0;
padding: 0; margin: 0;
background: var(--surface-tint);
min-width: 0;
}
.nav-links.is-open .nav-menu-item {
padding: 12px 36px;
border-bottom: 1px solid var(--border-soft);
}
.nav-links.is-open .nav-menu-item:last-child { border-bottom: 0; }
}
@media (max-width: 620px) {
/* Tighter section vertical padding on phones */
.section { padding: 56px 0; }
.section--tight { padding: 40px 0; }
.hero { padding: 48px 0 56px; }
.page-head { padding: 36px 0; }
/* Topbar — allow wrap and shrink, hide the rightmost language tag */
.topbar { font-size: 11.5px; }
.topbar-row {
height: auto;
min-height: 36px;
padding: 8px 0;
flex-wrap: wrap;
gap: 10px;
}
.topbar .right { gap: 12px; }
.topbar .right span:last-child { display: none; }
/* Header — slightly tighter */
.nav-row { gap: 12px; }
.nav-actions { gap: 6px; }
/* Hide secondary "login" CTA on phones so primary action is clear */
.nav-actions .btn--ghost { display: none; }
.btn--sm { height: 34px; padding: 0 12px; font-size: 12.5px; }
/* Footer — vertical layout */
.footer-bottom {
flex-direction: column;
gap: 10px;
text-align: center;
align-items: center;
}
.footer-bottom .right { margin-inline: 0; }
/* Compact heading on very narrow */
.quote-card p { font-size: 16px; }
/* Extra-tight horizontal page padding on phones */
:root { --pad-page: 18px; }
}
@media (max-width: 380px) {
/* Smallest phones (older / "mini" devices, ~iPhone SE) */
.hero h1 { font-size: 30px; }
.page-head h1 { font-size: 28px; }
.section-head h2 { font-size: 24px; }
.btn--lg { height: 46px; font-size: 14px; padding: 0 18px; }
.topbar .right a:first-child { display: none; } /* drop "מרכז עזרה" on tiny screens; keep "צור קשר" */
}
/* Reserve space at page bottom while the privacy notice is visible
so its sticky bar doesn't obscure the last CTA. site.js adds the
class on body when the bar is in the DOM and removes it on dismiss. */
body.has-privacy-banner { padding-bottom: 96px; }
@media (max-width: 620px) {
body.has-privacy-banner { padding-bottom: 140px; }
}
/* ═════════════════════════════════════════════════════════════════
PREMIUM POLISH — animations + micro-interactions
Inspired by Stripe / Linear / Apple Pay landing pages.
═════════════════════════════════════════════════════════════════ */
/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }
/* Custom selection color = brand */
::selection { background: var(--copper-700); color: #fff; }
/* Subtle scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }
/* Fade-in-up reveal animation triggered by JS .is-visible class.
Stagger via inline `--stagger` integer on each child (0, 1, 2, …).
Legacy `.reveal-delay-N` classes still work for older markup. */
.reveal {
opacity: 0;
transform: translateY(16px);
filter: blur(4px);
transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
filter 600ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: calc(var(--stagger, 0) * 80ms);
will-change: opacity, transform, filter;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
.reveal-delay-1.is-visible { transition-delay: 80ms; }
.reveal-delay-2.is-visible { transition-delay: 160ms; }
.reveal-delay-3.is-visible { transition-delay: 240ms; }
.reveal-delay-4.is-visible { transition-delay: 320ms; }
/* Buttons: subtle lift on hover, press effect, ripple-ish */
.btn {
transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 180ms ease,
background 180ms ease,
color 180ms ease,
border-color 180ms ease;
will-change: transform, box-shadow;
}
.btn:hover {
transform: translateY(-1px);
}
.btn:active {
transform: translateY(0) scale(0.98);
}
.btn--primary:hover,
.btn--accent:hover {
box-shadow: 0 8px 24px rgba(196, 154, 60, 0.25),
0 2px 6px rgba(26, 35, 66, 0.08);
}
.btn--lg:hover { box-shadow: 0 12px 32px rgba(196, 154, 60, 0.3); }
/* Cards: hover lifts with a soft shadow expansion */
.card {
transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 250ms ease,
border-color 250ms ease;
}
.card-pad:hover,
.usecase:hover,
.tier:hover,
.help-card:hover,
.risk-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(26, 35, 66, 0.08),
0 2px 6px rgba(26, 35, 66, 0.04);
}
/* Hero numbers: subtle pulse when in view */
@keyframes sp-pulse-glow {
0%, 100% { text-shadow: 0 0 0 rgba(196, 154, 60, 0); }
50% { text-shadow: 0 0 32px rgba(196, 154, 60, 0.12); }
}
.stat-num.is-visible {
animation: sp-pulse-glow 4s ease-in-out infinite;
}
/* Counter — JS injects the data-target and animates to it */
.count-up[data-target] { font-variant-numeric: tabular-nums; }
/* Section dividers — gradient line for premium feel */
.section + .section::before {
content: "";
display: block;
width: 64px;
height: 2px;
margin: 0 auto 32px;
background: linear-gradient(90deg, transparent, var(--copper-300), transparent);
border-radius: 1px;
}
/* CTA hero — subtle gradient breath behind the main button */
.btn--accent {
position: relative;
overflow: hidden;
}
.btn--accent::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg,
transparent 0%, transparent 35%,
rgba(255, 255, 255, 0.18) 50%,
transparent 65%, transparent 100%);
transform: translateX(-100%);
transition: transform 800ms ease;
}
.btn--accent:hover::after {
transform: translateX(100%);
}
/* Nav active link — animated underline */
.nav-links a {
position: relative;
transition: color 200ms ease;
}
.nav-links a::after {
content: "";
position: absolute;
bottom: -4px;
inset-inline-start: 0;
width: 100%;
height: 2px;
background: var(--copper-700);
transform: scaleX(0);
transform-origin: right;
transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover::after,
.nav-links a.active::after {
transform: scaleX(1);
transform-origin: left;
}
/* Brand mark — gentle infinite rotation on the SafePay logo */
@keyframes sp-mark-spin {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(2deg); }
}
.brand:hover .brand-mark {
animation: sp-mark-spin 3s ease-in-out infinite;
}
/* Activity strip — fade in/out at edges */
.activity-feed {
position: relative;
}
.activity-feed::before,
.activity-feed::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 80px;
pointer-events: none;
z-index: 2;
}
.activity-feed::before {
inset-inline-start: 0;
background: linear-gradient(90deg, var(--cream-100), transparent);
}
.activity-feed::after {
inset-inline-end: 0;
background: linear-gradient(-90deg, var(--cream-100), transparent);
}
/* Deal-stack — subtle float animation on hero product cards */
@keyframes sp-float {
0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
50% { transform: translateY(-6px) rotate(var(--rot, 0deg)); }
}
.deal-card { transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1); }
.deal-card.dc-front { --rot: 0deg; animation: sp-float 5s ease-in-out infinite; }
.deal-card.dc-mid { --rot: -1.5deg; animation: sp-float 5s ease-in-out infinite; animation-delay: -1.5s; }
.deal-card.dc-back { --rot: -3deg; animation: sp-float 5s ease-in-out infinite; animation-delay: -3s; }
.deal-stack:hover .deal-card.dc-front { transform: translateY(-4px) rotate(0deg) scale(1.02); }
/* Trust pillars — icons gently rotate on hover */
.trust-card .icon-tile,
.usecase .ico,
.help-card .icon-tile {
transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.trust-card:hover .icon-tile,
.usecase:hover .ico,
.help-card:hover .icon-tile {
transform: scale(1.08) rotate(-3deg);
}
/* FAQ items — smoother expansion */
.faq-item {
transition: background 200ms ease, box-shadow 200ms ease;
}
.faq-item[open] {
background: rgba(196, 154, 60, 0.04);
box-shadow: inset 4px 0 0 var(--copper-300);
}
.faq-item summary {
transition: color 200ms ease;
cursor: pointer;
}
.faq-item summary:hover {
color: var(--copper-700);
}
.faq-item summary svg {
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item[open] summary svg {
transform: rotate(180deg);
}
/* Form inputs — focused state with gold glow */
.field input,
.field select,
.field textarea {
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--copper-500);
box-shadow: 0 0 0 4px rgba(196, 154, 60, 0.12);
}
/* Radio-card — premium selected state */
.radio-card {
cursor: pointer;
transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.radio-card:hover {
border-color: var(--copper-300);
transform: translateY(-1px);
}
.radio-card.selected {
border-color: var(--copper-700);
background: rgba(196, 154, 60, 0.05);
box-shadow: 0 0 0 1px var(--copper-500), 0 4px 12px rgba(196, 154, 60, 0.12);
}
/* Topbar pulse — the green dot for "system operational" */
.topbar .dot {
position: relative;
display: inline-block;
width: 6px;
height: 6px;
background: #15803d;
border-radius: 50%;
margin-inline-end: 4px;
animation: sp-pulse-dot 2s ease-in-out infinite;
}
@keyframes sp-pulse-dot {
0%, 100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.6); }
70% { box-shadow: 0 0 0 6px rgba(21, 128, 61, 0); }
}
/* Reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; filter: none; }
.scroll-progress__fill { transition: none !important; }
}
/* ─── Liquid scroll-progress bar ──────────────────────────────
2px high, fixed at the very top, copper gradient. The fill
spans the full width and is squeezed via scaleX(0..1) so we
never re-layout while scrolling. Hidden on phones (< 600px)
where the bar would compete with the address bar. */
.scroll-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
z-index: 1000;
pointer-events: none;
background: rgba(26, 35, 66, 0.05);
}
.scroll-progress__fill {
display: block;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: right center; /* RTL: bar grows from right */
background: linear-gradient(90deg,
#D6B26A 0%,
#C49A3C 50%,
#A8842F 100%);
box-shadow: 0 0 8px rgba(196, 154, 60, 0.45);
transition: transform 80ms linear;
will-change: transform;
}
html[dir="ltr"] .scroll-progress__fill { transform-origin: left center; }
@media (max-width: 599px) { .scroll-progress { display: none; } }
/* ╔═══════════════════════════════════════════════════════════════════════════╗
║ ║
║ SOVEREIGN · VAULT · redesign 2026 ║
║ ║
║ Layered on top of the luxury-bank base. Variables at the bottom ║
║ of :root cascade and rewrite the theme; every component is given ║
║ a new skin without touching the existing markup. ║
║ ║
║ Philosophy: a private vault in a future Israeli bank. ║
║ Deep void, smoked glass, electric gold circuitry, Hebrew letters ║
║ treated as ceremony, slow-breathing atmospherics. ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════╝ */
:root {
/* ── Void (backgrounds) ─────────────────────────────────────────────── */
--void-1000: #02020a;
--void-950: #050511;
--void-900: #0a0a1f;
--void-850: #10102a;
--void-800: #14142e;
--void-750: #1a1a3a;
--void-700: #1c1c3d;
/* ── Mist (text on dark) ────────────────────────────────────────────── */
--mist-50: #f5f3ff;
--mist-100: #e8e4f5;
--mist-200: #c7c0e6;
--mist-300: #a39bcd;
--mist-400: #8b85b5;
--mist-500: #6b6594;
/* ── Electric gold (signature) ──────────────────────────────────────── */
--gold-200: #fcf3d4;
--gold-300: #f5e3a8;
--gold-400: #f1d896;
--gold-500: #d4af37;
--gold-600: #b8941f;
--gold-700: #8a6e17;
/* ── Plasma (chart / highlight) ─────────────────────────────────────── */
--plasma-300: #c4b5fd;
--plasma-400: #a78bfa;
--plasma-500: #7c3aed;
--plasma-600: #6d28d9;
/* ── Aqua (success / positive) ──────────────────────────────────────── */
--aqua-300: #99f6e4;
--aqua-400: #5eead4;
--aqua-500: #06d6c4;
--aqua-600: #0d9488;
/* ── Coral (warning / dispute) ──────────────────────────────────────── */
--coral-300: #fecdd3;
--coral-400: #fda4af;
--coral-500: #ff6e7f;
--coral-600: #e11d48;
/* ── Override legacy tokens — every existing component inherits ─────── */
--surface-bg: var(--void-950);
--surface-card: rgba(20, 20, 46, 0.5);
--surface-sunk: var(--void-900);
--surface-tint: rgba(255, 255, 255, 0.03);
--border-soft: rgba(255, 255, 255, 0.06);
--border-default: rgba(255, 255, 255, 0.10);
--border-strong: rgba(212, 175, 55, 0.25);
--ink-900: var(--mist-50);
--ink-800: var(--mist-100);
--ink-700: var(--mist-200);
--ink-600: var(--mist-300);
--ink-500: var(--mist-400);
--ink-400: var(--mist-500);
--ink-300: rgba(255,255,255,0.08);
--ink-200: rgba(255,255,255,0.05);
--ink-100: rgba(255,255,255,0.03);
--ink-050: rgba(255,255,255,0.02);
--copper-700: var(--gold-600);
--copper-600: var(--gold-500);
--copper-500: var(--gold-500);
--copper-400: var(--gold-400);
--copper-300: var(--gold-300);
--copper-200: rgba(212, 175, 55, 0.2);
--copper-100: rgba(212, 175, 55, 0.12);
--copper-050: rgba(212, 175, 55, 0.06);
--success-500: var(--aqua-500);
--success-700: var(--aqua-600);
--success-100: rgba(6, 214, 196, 0.18);
--warning-500: var(--gold-500);
--warning-100: rgba(212, 175, 55, 0.18);
--danger-500: var(--coral-500);
--danger-700: var(--coral-600);
--danger-100: rgba(255, 110, 127, 0.18);
--font-display: 'Frank Ruhl Libre', 'Heebo', Georgia, serif;
--font-ui: 'Heebo', 'Assistant', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
/* ── BODY: deep void with three breathing radial fields ─────────────── */
html, body { background: var(--void-950); }
body {
color: var(--mist-50);
position: relative;
min-height: 100vh;
font-feature-settings: "kern" 1, "liga" 1;
}
body::before {
content: '';
position: fixed; inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 70% 50% at 18% 22%, rgba(212, 175, 55, 0.14), transparent 62%),
radial-gradient(ellipse 60% 50% at 82% 78%, rgba(124, 58, 237, 0.11), transparent 60%),
radial-gradient(ellipse 50% 45% at 50% 110%, rgba(6, 214, 196, 0.08), transparent 60%);
animation: vault-breathe 18s cubic-bezier(0.45, 0, 0.55, 1) infinite;
z-index: 0;
}
body::after {
content: '';
position: fixed; inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
opacity: 0.045;
mix-blend-mode: overlay;
z-index: 1;
}
@keyframes vault-breathe {
0%, 100% { opacity: 0.55; transform: translate3d(0, 0, 0) scale(1); }
50% { opacity: 1.0; transform: translate3d(0, -24px, 0) scale(1.07); }
}
.container, .section, header, footer, main, nav, section,
.site-header, .site-footer, .topbar { position: relative; z-index: 2; }
/* ── HEADER: thin spine over the void ───────────────────────────────── */
.site-header {
background: rgba(5, 5, 17, 0.4);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border-bottom: 1px solid rgba(212, 175, 55, 0.12);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
position: sticky; top: 0;
z-index: 100;
}
.site-header.scrolled {
background: rgba(5, 5, 17, 0.78);
border-bottom-color: rgba(212, 175, 55, 0.22);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 32px rgba(2, 2, 10, 0.5);
}
.brand { color: var(--mist-50); letter-spacing: 0.02em; font-weight: 600; }
.nav-links a { color: var(--mist-300); transition: color 200ms ease; }
.nav-links a:hover { color: var(--gold-400); }
.nav-links a.active { color: var(--gold-500); }
.topbar { background: transparent; color: var(--mist-400); border-bottom: 1px solid rgba(255,255,255,0.04); }
.topbar .dot { background: var(--aqua-500); box-shadow: 0 0 8px var(--aqua-500); }
/* ── HERO: ceremonial, asymmetric ────────────────────────────────────── */
.hero { background: transparent; overflow: hidden; }
.hero h1 {
font-family: var(--font-display);
font-size: clamp(44px, 7vw, 82px);
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--mist-50);
font-weight: 700;
}
.hero h1 .accent,
.hero h1 em,
.hero h1 i {
color: var(--gold-500);
font-style: italic;
font-weight: 400;
text-shadow: 0 0 32px rgba(212, 175, 55, 0.35);
}
.hero p, .hero .lede, .lede {
color: var(--mist-200);
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.72;
max-width: 58ch;
}
/* ── TYPOGRAPHY ──────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
color: var(--mist-50);
letter-spacing: -0.015em;
font-weight: 700;
}
h2 { font-size: clamp(30px, 4.5vw, 52px); line-height: 1.1; }
h3 { font-size: clamp(20px, 2.6vw, 28px); font-weight: 600; }
h4 { font-size: clamp(16px, 1.8vw, 20px); font-weight: 600; }
p { color: var(--mist-200); line-height: 1.7; }
.eyebrow, [class*="eyebrow"] {
color: var(--gold-500);
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
}
a { color: var(--gold-400); }
a:hover { color: var(--gold-300); }
/* Numeric values get tabular monospace + a faint glow */
.num, [data-num], .stat-num, .amount, .md-amount, .dash-stat .num, .adm-kpi .num {
font-family: var(--font-mono);
font-feature-settings: "tnum" 1, "lnum" 1;
letter-spacing: -0.01em;
}
/* ── SMOKED GLASS CARD — applied to every card-like surface ─────────── */
.card,
.dash-card,
.adm-kpi,
.adm-card,
.adm-nav,
.prof-card,
.notif-list,
.md-card,
.deal-card,
.nd-card,
.nd-review,
section .container > .stat,
.tier, .usecase, .trust-card, .risk-card, .help-card, .faq-item,
.problem-card, .testimonial, .partner-card {
background:
linear-gradient(135deg, rgba(20, 20, 46, 0.62), rgba(10, 10, 31, 0.42)) padding-box,
linear-gradient(135deg, rgba(212, 175, 55, 0.38), rgba(124, 58, 237, 0.14) 50%, rgba(212, 175, 55, 0.05)) border-box;
border: 1px solid transparent;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.07) inset,
0 24px 60px -22px rgba(2, 2, 10, 0.7),
0 0 0 1px rgba(255, 255, 255, 0.02);
color: var(--mist-100);
border-radius: 18px;
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 320ms ease,
border-color 240ms ease;
}
.card:hover,
.dash-card:hover,
.adm-kpi:hover,
.md-card:hover,
.tier:hover, .usecase:hover, .trust-card:hover, .help-card:hover,
.problem-card:hover, .testimonial:hover, .partner-card:hover,
.nd-card:hover, .deal-card:hover {
transform: translateY(-3px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.12) inset,
0 32px 80px -22px rgba(2, 2, 10, 0.88),
0 0 0 1px rgba(212, 175, 55, 0.22),
0 0 48px -12px rgba(212, 175, 55, 0.28);
}
/* ── BUTTONS: electric gold with shine sweep ────────────────────────── */
.btn { border-radius: 12px; font-family: var(--font-ui); }
.btn--primary, .btn--accent {
background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 45%, var(--gold-600) 100%);
color: var(--void-1000);
border: 0;
font-weight: 700;
letter-spacing: 0.01em;
position: relative;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.5) inset,
0 0 0 1px rgba(212, 175, 55, 0.65),
0 10px 28px -8px rgba(212, 175, 55, 0.55);
}
.btn--primary::after, .btn--accent::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, 0.55) 50%, transparent 72%);
transform: translateX(-100%);
transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn--primary:hover::after, .btn--accent:hover::after { transform: translateX(100%); }
/* RTL: sweep right-to-left to match Hebrew reading direction */
html[dir="rtl"] .btn--primary::after,
html[dir="rtl"] .btn--accent::after { transform: translateX(100%); }
html[dir="rtl"] .btn--primary:hover::after,
html[dir="rtl"] .btn--accent:hover::after { transform: translateX(-100%); }
.btn--primary:hover, .btn--accent:hover {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 0 0 1px rgba(212, 175, 55, 0.85),
0 14px 36px -8px rgba(212, 175, 55, 0.7),
0 0 0 4px rgba(212, 175, 55, 0.15);
}
.btn--ghost,
.btn--outline {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.14);
color: var(--mist-100);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover, .btn--outline:hover {
background: rgba(212, 175, 55, 0.10);
border-color: rgba(212, 175, 55, 0.5);
color: var(--gold-300);
box-shadow: 0 0 24px -8px rgba(212, 175, 55, 0.35);
}
/* ── SCANNING LINE on first page load (mounted by JS) ───────────────── */
.vault-scan {
position: fixed; inset: 0;
pointer-events: none;
z-index: 9990;
overflow: hidden;
}
.vault-scan::before {
content: '';
position: absolute;
left: 0; right: 0;
top: -10px;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(212, 175, 55, 0.12) 18%,
rgba(212, 175, 55, 0.95) 50%,
rgba(212, 175, 55, 0.12) 82%,
transparent 100%);
box-shadow: 0 0 28px rgba(212, 175, 55, 0.7), 0 0 56px rgba(212, 175, 55, 0.3);
animation: vault-scan-sweep 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes vault-scan-sweep {
0% { top: -10px; opacity: 0; }
12% { opacity: 1; }
88% { opacity: 1; }
100% { top: 105vh; opacity: 0; }
}
/* ── PARTICLE FIELD (canvas mounted by JS) ──────────────────────────── */
.vault-particles {
position: fixed; inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.75;
}
/* ── CURSOR LIGHT (mounted by JS, hover-capable only) ───────────────── */
.vault-cursor {
position: fixed;
width: 22px; height: 22px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 175, 55, 0.75), rgba(212, 175, 55, 0) 70%);
pointer-events: none;
z-index: 9998;
transform: translate(-50%, -50%);
mix-blend-mode: plus-lighter;
}
/* ── STATUS BADGES with monospace caps ──────────────────────────────── */
.dash-status, .badge, .md-status {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 500;
padding: 4px 10px;
border-radius: 999px;
}
.dash-status.ok, .badge.ok, .md-status.active, .md-status.done {
background: rgba(6, 214, 196, 0.14);
color: var(--aqua-400);
border: 1px solid rgba(6, 214, 196, 0.35);
box-shadow: 0 0 12px -2px rgba(6, 214, 196, 0.3);
}
.dash-status.pending, .badge.warn {
background: rgba(212, 175, 55, 0.14);
color: var(--gold-400);
border: 1px solid rgba(212, 175, 55, 0.4);
box-shadow: 0 0 12px -2px rgba(212, 175, 55, 0.3);
}
.dash-status.todo, .badge.muted, .md-status.draft {
background: rgba(255, 255, 255, 0.05);
color: var(--mist-300);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.badge.err, .md-status.dispute {
background: rgba(255, 110, 127, 0.14);
color: var(--coral-400);
border: 1px solid rgba(255, 110, 127, 0.4);
box-shadow: 0 0 12px -2px rgba(255, 110, 127, 0.3);
}
/* Pulse ring on .dash-stat dots */
.dash-stat .dot { box-shadow: none; position: relative; }
.dash-stat .dot.ok { background: var(--aqua-500); }
.dash-stat .dot.warn { background: var(--gold-500); }
.dash-stat .dot.muted { background: var(--mist-500); }
.dash-stat .dot.ok::before,
.dash-stat .dot.warn::before {
content: '';
position: absolute; inset: -4px;
border-radius: 50%;
border: 1px solid currentColor;
opacity: 0.6;
animation: vault-pulse 2.4s ease-in-out infinite;
}
.dash-stat .dot.ok::before { color: var(--aqua-500); }
.dash-stat .dot.warn::before { color: var(--gold-500); }
@keyframes vault-pulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.8); opacity: 0; }
}
/* ── DASHBOARD specific ──────────────────────────────────────────────── */
.dash-hello {
background:
linear-gradient(135deg, rgba(20, 20, 46, 0.78), rgba(10, 10, 31, 0.52)) padding-box,
linear-gradient(135deg, rgba(212, 175, 55, 0.55), rgba(124, 58, 237, 0.28), rgba(6, 214, 196, 0.3)) border-box;
border: 1px solid transparent;
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
color: var(--mist-50);
position: relative;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.1) inset,
0 32px 70px -20px rgba(2, 2, 10, 0.7);
}
.dash-hello::before {
content: '';
position: absolute;
top: -50%; inset-inline-end: -10%;
width: 360px; height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 175, 55, 0.45), transparent 70%);
filter: blur(48px);
animation: vault-breathe 14s ease-in-out infinite;
pointer-events: none;
}
.dash-hello h1 { color: var(--mist-50); font-family: var(--font-display); }
.dash-hello .sub { color: var(--mist-200); }
.dash-hello .admin-badge,
.admin-badge {
background: rgba(212, 175, 55, 0.15);
border: 1px solid rgba(212, 175, 55, 0.45);
color: var(--gold-300);
font-family: var(--font-mono);
letter-spacing: 0.14em;
text-transform: uppercase;
box-shadow: 0 0 18px -4px rgba(212, 175, 55, 0.4);
}
.dash-stat { padding: 18px 16px; }
.dash-stat .num {
color: var(--gold-400);
font-size: 28px;
text-shadow: 0 0 28px rgba(212, 175, 55, 0.4);
}
.dash-stat .lbl {
color: var(--mist-300); /* was --mist-400 — bump for AA */
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 500;
}
.dash-card-ico {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.dash-card-ico.ok { background: rgba(6, 214, 196, 0.15); color: var(--aqua-400); border-color: rgba(6, 214, 196, 0.35); }
.dash-card-ico.warn { background: rgba(212, 175, 55, 0.15); color: var(--gold-400); border-color: rgba(212, 175, 55, 0.35); }
.dash-card-ico.muted { background: rgba(255, 255, 255, 0.04); color: var(--mist-300); }
.dash-card h3 { color: var(--mist-50); }
.dash-card .desc { color: var(--mist-300); }
/* ── QUICK LINKS ─────────────────────────────────────────────────────── */
.dash-ql {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--mist-100);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.dash-ql:hover {
background: rgba(212, 175, 55, 0.09);
border-color: rgba(212, 175, 55, 0.4);
color: var(--gold-300);
box-shadow: 0 0 30px -10px rgba(212, 175, 55, 0.4);
}
.dash-ql .badge {
background: var(--gold-500);
color: var(--void-1000);
box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}
/* ── ADMIN NAV & TABLES ──────────────────────────────────────────────── */
.adm-shell .star { color: var(--gold-500); text-shadow: 0 0 16px rgba(212, 175, 55, 0.5); }
.adm-nav { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.adm-nav a { color: var(--mist-300); }
.adm-nav a:hover { background: rgba(212, 175, 55, 0.1); color: var(--gold-400); }
.adm-nav a.is-active {
background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
color: var(--void-1000);
box-shadow: 0 6px 22px -6px rgba(212, 175, 55, 0.55);
}
.adm-kpi .num {
color: var(--gold-400);
text-shadow: 0 0 36px rgba(212, 175, 55, 0.4);
font-size: 38px;
}
.adm-kpi .lbl, .adm-kpi .sub { color: var(--mist-400); font-family: var(--font-mono); letter-spacing: 0.08em; }
.adm-kpi.warn .num { color: var(--gold-400); }
.adm-kpi.danger .num { color: var(--coral-400); text-shadow: 0 0 36px rgba(255, 110, 127, 0.4); }
.adm-kpi.ok .num { color: var(--aqua-400); text-shadow: 0 0 36px rgba(6, 214, 196, 0.4); }
.adm-table { color: var(--mist-100); }
.adm-table thead th {
background: rgba(255, 255, 255, 0.03);
color: var(--mist-400);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 500;
border-bottom: 1px solid rgba(212, 175, 55, 0.22);
}
.adm-table tbody td { color: var(--mist-100); border-bottom-color: rgba(255, 255, 255, 0.05); }
.adm-table tbody tr:hover { background: rgba(212, 175, 55, 0.04); }
.adm-table .row-actions button {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--mist-200);
}
.adm-table .row-actions button:hover {
background: rgba(212, 175, 55, 0.15);
border-color: rgba(212, 175, 55, 0.5);
color: var(--gold-300);
}
.adm-table .row-actions button.danger { color: var(--coral-400); border-color: rgba(255, 110, 127, 0.3); }
.adm-table .row-actions button.danger:hover { background: rgba(255, 110, 127, 0.15); border-color: var(--coral-500); color: var(--coral-300); }
/* ── FORMS ──────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="password"], input[type="url"],
select, textarea,
.prof-input, .nd-input, .nd-select, .nd-textarea, .adm-search input {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--mist-50);
font-family: var(--font-ui);
transition: all 220ms ease;
}
input::placeholder, textarea::placeholder { color: var(--mist-500); }
input:focus, select:focus, textarea:focus,
.prof-input:focus, .nd-input:focus, .nd-select:focus, .nd-textarea:focus {
outline: none;
border-color: var(--gold-500);
background: rgba(212, 175, 55, 0.05);
box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.14), 0 0 32px -10px rgba(212, 175, 55, 0.4);
}
label, .prof-field label, .nd-field label { color: var(--mist-200); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; }
/* ── DEAL WIZARD: progress + type cards ─────────────────────────────── */
.nd-step { background: rgba(255, 255, 255, 0.06); }
.nd-step::after { background: linear-gradient(90deg, var(--gold-400), var(--gold-500), var(--plasma-500)); }
.nd-type { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.12); color: var(--mist-100); }
.nd-type:hover { border-color: rgba(212, 175, 55, 0.5); }
.nd-type.is-selected {
border-color: var(--gold-500);
background: rgba(212, 175, 55, 0.08);
box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.14), 0 0 30px -8px rgba(212, 175, 55, 0.4);
}
.nd-type .name { color: var(--mist-50); }
.nd-type .desc { color: var(--mist-400); }
.nd-review { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
.nd-review .row .lbl { color: var(--mist-400); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }
.nd-review .row .val { color: var(--mist-50); }
.nd-msg.ok { background: rgba(6,214,196,0.14); color: var(--aqua-300); border: 1px solid rgba(6,214,196,0.35); }
.nd-msg.err { background: rgba(255,110,127,0.14); color: var(--coral-300); border: 1px solid rgba(255,110,127,0.35); }
/* ── DEAL DETAIL ─────────────────────────────────────────────────────── */
.deal-head {
background:
linear-gradient(135deg, rgba(20, 20, 46, 0.85), rgba(10, 10, 31, 0.6)) padding-box,
linear-gradient(135deg, rgba(212, 175, 55, 0.55), rgba(124, 58, 237, 0.25)) border-box;
border: 1px solid transparent;
backdrop-filter: blur(28px);
color: var(--mist-50);
}
.deal-head .amt .n {
color: var(--gold-400);
text-shadow: 0 0 28px rgba(212, 175, 55, 0.4);
font-family: var(--font-mono);
}
.deal-head .amt .c { color: var(--mist-400); font-family: var(--font-mono); letter-spacing: 0.16em; }
.deal-timeline::before { background: rgba(255, 255, 255, 0.1); }
.tl-item { color: var(--mist-300); }
.tl-item.is-active { color: var(--gold-400); }
.tl-item.is-done { color: var(--aqua-400); }
.tl-item.is-active::before { background: var(--gold-500); box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.22), 0 0 16px rgba(212, 175, 55, 0.55); }
.tl-item.is-done::before { background: var(--aqua-500); box-shadow: 0 0 12px rgba(6, 214, 196, 0.6); }
.deal-row .lbl { color: var(--mist-400); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; }
.deal-row .val { color: var(--mist-50); }
.status-pill {
background: rgba(212, 175, 55, 0.14) !important;
color: var(--gold-300) !important;
border: 1px solid rgba(212, 175, 55, 0.4) !important;
font-family: var(--font-mono);
}
/* ── NOTIFICATIONS ───────────────────────────────────────────────────── */
.notif-item { border-color: rgba(255, 255, 255, 0.05); }
.notif-item:hover { background: rgba(212, 175, 55, 0.04); }
.notif-item.is-unread { background: rgba(212, 175, 55, 0.06); }
.notif-item.is-unread::before { background: var(--gold-500); box-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }
.notif-ico { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.notif-subject { color: var(--mist-50); }
.notif-snippet { color: var(--mist-300); }
.notif-time { color: var(--mist-500); font-family: var(--font-mono); }
.notif-count { background: rgba(212, 175, 55, 0.14); color: var(--gold-300); border: 1px solid rgba(212, 175, 55, 0.35); font-family: var(--font-mono); }
/* ── PROFILE EDITOR ──────────────────────────────────────────────────── */
.prof-head {
background:
linear-gradient(135deg, rgba(20, 20, 46, 0.85), rgba(10, 10, 31, 0.6)) padding-box,
linear-gradient(135deg, rgba(212, 175, 55, 0.5), rgba(124, 58, 237, 0.25)) border-box;
border: 1px solid transparent;
backdrop-filter: blur(24px);
}
.prof-avatar {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.35), rgba(124, 58, 237, 0.2));
color: var(--gold-300);
border: 1px solid rgba(212, 175, 55, 0.5);
text-shadow: 0 0 18px rgba(212, 175, 55, 0.55);
}
.prof-card h3 { color: var(--mist-50); }
.prof-row { border-top-color: rgba(255, 255, 255, 0.05); }
.prof-row .lbl { color: var(--mist-400); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.prof-row .val { color: var(--mist-50); }
.prof-msg.ok { background: rgba(6,214,196,0.14); color: var(--aqua-300); border: 1px solid rgba(6,214,196,0.35); }
.prof-msg.err { background: rgba(255,110,127,0.14); color: var(--coral-300); border: 1px solid rgba(255,110,127,0.35); }
.danger-zone {
background: linear-gradient(135deg, rgba(255, 110, 127, 0.07), rgba(20, 20, 46, 0.6)) padding-box,
linear-gradient(135deg, rgba(255, 110, 127, 0.45), rgba(255, 110, 127, 0.15)) border-box !important;
border: 1px solid transparent !important;
}
.danger-zone h3 { color: var(--coral-400) !important; }
/* ── MY-DEALS LIST ───────────────────────────────────────────────────── */
.md-tab {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--mist-300);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
}
.md-tab:hover { border-color: rgba(212, 175, 55, 0.4); color: var(--gold-300); }
.md-tab.is-active {
background: linear-gradient(135deg, var(--gold-400), var(--gold-500), var(--gold-600));
color: var(--void-1000);
border-color: var(--gold-500);
box-shadow: 0 4px 18px -4px rgba(212, 175, 55, 0.5);
}
.md-ico { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.md-info .title { color: var(--mist-50); }
.md-info .meta { color: var(--mist-400); font-family: var(--font-mono); font-size: 11.5px; }
.md-amount { color: var(--gold-400); text-shadow: 0 0 24px rgba(212, 175, 55, 0.35); font-family: var(--font-mono); }
/* ── FOOTER ──────────────────────────────────────────────────────────── */
.site-footer {
background: rgba(2, 2, 10, 0.5);
border-top: 1px solid rgba(212, 175, 55, 0.15);
color: var(--mist-400);
backdrop-filter: blur(8px);
}
.site-footer h4, .site-footer h5 { color: var(--mist-100); }
.site-footer a { color: var(--mist-300); }
.site-footer a:hover { color: var(--gold-400); }
.footer-bottom { color: var(--mist-500); border-top: 1px solid rgba(255, 255, 255, 0.05); }
/* ── SCROLLBAR / SELECTION ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.4));
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(212, 175, 55, 0.5), rgba(212, 175, 55, 0.7)); }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: rgba(212, 175, 55, 0.4); color: var(--mist-50); }
/* ── REVEAL: stronger blur ──────────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(28px);
filter: blur(14px);
}
.reveal.is-visible { filter: blur(0); }
/* ── SCROLL PROGRESS: gold-plasma ───────────────────────────────────── */
.scroll-progress { background: rgba(255, 255, 255, 0.04); height: 2px; }
.scroll-progress__fill {
background: linear-gradient(90deg, var(--gold-300), var(--gold-500), var(--plasma-500));
box-shadow: 0 0 14px rgba(212, 175, 55, 0.8), 0 0 28px rgba(212, 175, 55, 0.4);
}
/* ── HELP BUBBLE ─────────────────────────────────────────────────────── */
.sp-help__btn {
background: linear-gradient(135deg, var(--gold-300), var(--gold-500), var(--gold-600));
color: var(--void-1000);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.5) inset,
0 0 0 1px rgba(212, 175, 55, 0.5),
0 0 32px -2px rgba(212, 175, 55, 0.55),
0 10px 28px -8px rgba(2, 2, 10, 0.85);
}
.sp-help__btn:hover {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 0 0 1px rgba(212, 175, 55, 0.8),
0 0 44px -2px rgba(212, 175, 55, 0.8),
0 14px 32px -8px rgba(2, 2, 10, 0.9);
}
.sp-help__panel {
background: rgba(10, 10, 31, 0.94);
border-color: rgba(212, 175, 55, 0.3);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: 0 12px 40px rgba(2, 2, 10, 0.8), 0 0 0 1px rgba(212, 175, 55, 0.18);
}
.sp-help__panel a { color: var(--mist-100); }
.sp-help__panel a:hover { background: rgba(212, 175, 55, 0.12); color: var(--gold-300); }
.sp-help__title { color: var(--mist-50); border-bottom-color: rgba(255, 255, 255, 0.08); }
/* ── PRIVACY BANNER ──────────────────────────────────────────────────── */
[data-privacy-banner] {
background: rgba(5, 5, 17, 0.95) !important;
border-top: 1px solid rgba(212, 175, 55, 0.3) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* ── 404 PAGE ────────────────────────────────────────────────────────── */
.f-num {
background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 50%, var(--gold-700) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 80px rgba(212, 175, 55, 0.5);
}
.f-search-list a { background: rgba(255, 255, 255, 0.04); color: var(--mist-200); border: 1px solid rgba(255, 255, 255, 0.08); }
.f-search-list a:hover { background: rgba(212, 175, 55, 0.12); color: var(--gold-300); border-color: rgba(212, 175, 55, 0.4); }
/* ── AURORA orbs (existing) get repainted in the new palette ────────── */
.aurora-orb { mix-blend-mode: screen; opacity: 0.85; }
.aurora-orb-1 { background: radial-gradient(circle, rgba(212, 175, 55, 0.55) 0%, transparent 70%); }
.aurora-orb-2 { background: radial-gradient(circle, rgba(6, 214, 196, 0.45) 0%, transparent 70%); }
.aurora-orb-3 { background: radial-gradient(circle, rgba(124, 58, 237, 0.50) 0%, transparent 70%); }
.aurora-grid, .aurora-noise { opacity: 0.4; }
/* ── SECTIONS background tweak: kill old creams ─────────────────────── */
.section--cream, .section--tint {
background: transparent !important;
}
/* ── REDUCED-MOTION ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
body::before { animation: none; }
.vault-scan, .vault-particles, .vault-cursor { display: none; }
.dash-hello::before { animation: none; }
.dash-stat .dot::before { animation: none; }
.reveal { filter: none; }
}
/* ╔═══════════════════════════════════════════════════════════════════════════╗
║ PAGE-OVERRIDE LAYER ║
║ Several customer/admin pages ship inline