/* ============================================================
easydsn — Easy Design & Marketing
Brand color & type tokens
Dark premium · digital/tech · conversion-focused
NOTA: As fontes Plus Jakarta Sans + Space Grotesk + JetBrains Mono
sao carregadas via no de cada pagina,
com preconnect para fonts.googleapis.com / fonts.gstatic.com.
Nao usar @import aqui (bloqueia render).
============================================================ */
:root {
/* ---------- BRAND ---------- */
--brand-primary: #5c068c;
--brand-primary-600: #6b13a3;
--brand-primary-500: #7d22b8;
--brand-primary-400: #9a3bd8;
--brand-primary-300: #b674e6;
--brand-primary-200: #d6a8f0;
--brand-primary-900: #38064f;
--brand-primary-950: #1f0530;
--brand-accent: #c084fc;
--brand-accent-glow: #b03dff;
/* ---------- BACKGROUND (DARK) ---------- */
--bg-0: #07060a;
--bg-1: #0c0a14;
--bg-2: #12101c;
--bg-3: #1a1726;
--bg-4: #251f36;
--bg-inverse: #ffffff;
/* ---------- FOREGROUND ---------- */
--fg-0: #ffffff;
--fg-1: #f5f3fa;
--fg-2: #b8b3c7;
--fg-3: #807a93;
--fg-4: #4d4860;
--fg-on-brand: #ffffff;
/* ---------- BORDERS ---------- */
--border-subtle: rgba(255, 255, 255, 0.06);
--border-default: rgba(255, 255, 255, 0.10);
--border-strong: rgba(255, 255, 255, 0.18);
--border-brand: rgba(154, 59, 216, 0.40);
/* ---------- SEMANTIC ---------- */
--success: #22c55e;
--success-bg: rgba(34, 197, 94, 0.12);
--warning: #f59e0b;
--danger: #ef4444;
--danger-bg: rgba(239, 68, 68, 0.12);
--info: #38bdf8;
--whatsapp: #25d366;
--whatsapp-hover: #1ebe5d;
/* ---------- GRADIENTS ---------- */
--grad-brand: linear-gradient(135deg, #5c068c 0%, #9a3bd8 100%);
--grad-brand-soft: linear-gradient(135deg, rgba(92,6,140,0.15) 0%, rgba(154,59,216,0.05) 100%);
--grad-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(154,59,216,0.25), transparent 60%), linear-gradient(180deg, #07060a 0%, #0c0a14 100%);
--grad-card: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
--grad-text: linear-gradient(135deg, #ffffff 0%, #d6a8f0 60%, #b674e6 100%);
--grad-divider: linear-gradient(90deg, transparent, rgba(154,59,216,0.5), transparent);
/* ---------- GLOWS / SHADOWS ---------- */
--glow-brand-sm: 0 0 24px rgba(154, 59, 216, 0.25);
--glow-brand-md: 0 0 48px rgba(154, 59, 216, 0.35);
--glow-brand-lg: 0 8px 60px rgba(92, 6, 140, 0.55);
--shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
--shadow-card-hover: 0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 48px rgba(92,6,140,0.30), 0 8px 24px rgba(0,0,0,0.55);
--shadow-button: 0 6px 20px rgba(92, 6, 140, 0.45), 0 1px 0 rgba(255,255,255,0.12) inset;
--shadow-elevated: 0 24px 80px rgba(0, 0, 0, 0.6);
/* ---------- RADII ---------- */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-pill: 9999px;
/* ---------- SPACING ---------- */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* ---------- TYPE FAMILIES ---------- */
--font-display: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
--font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* ---------- TYPE SCALE ---------- */
--fs-xs: 12px;
--fs-sm: 14px;
--fs-base: 16px;
--fs-md: 18px;
--fs-lg: 20px;
--fs-xl: 24px;
--fs-2xl: 30px;
--fs-3xl: 36px;
--fs-4xl: 48px;
--fs-5xl: 64px;
--fs-6xl: 80px;
--fs-display: clamp(48px, 7vw, 96px);
--lh-tight: 1.05;
--lh-snug: 1.2;
--lh-base: 1.5;
--lh-loose: 1.7;
--tracking-tight: -0.03em;
--tracking-snug: -0.015em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-eyebrow: 0.16em;
/* ---------- MOTION ---------- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 360ms;
--dur-hero: 600ms;
/* ---------- LAYOUT ---------- */
--container-max: 1200px;
--container-pad: clamp(20px, 4vw, 48px);
--section-y: clamp(64px, 9vw, 128px);
}
/* ============================================================
RESET / BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
background: var(--bg-1);
color: var(--fg-1);
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-base);
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
ul, ol { list-style: none; }
a { color: var(--brand-primary-300); text-decoration: none; transition: color var(--dur-base) var(--ease-out); cursor: pointer; }
a:hover { color: var(--brand-primary-200); }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; font-family: var(--font-body); }
::selection { background: var(--brand-primary-400); color: #fff; }
/* ============================================================
TYPOGRAPHY
============================================================ */
h1, h2, h3, h4 { color: var(--fg-0); text-wrap: balance; }
.h-display, h1.display {
font-family: var(--font-display);
font-size: var(--fs-display);
line-height: 0.98;
letter-spacing: -0.04em;
font-weight: 700;
}
h1, .h1 {
font-family: var(--font-display);
font-size: var(--fs-5xl);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
font-weight: 700;
}
h2, .h2 {
font-family: var(--font-display);
font-size: var(--fs-3xl);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-snug);
font-weight: 700;
}
h3, .h3 {
font-family: var(--font-display);
font-size: var(--fs-xl);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-snug);
font-weight: 600;
}
h4, .h4 {
font-family: var(--font-body);
font-size: var(--fs-lg);
line-height: var(--lh-snug);
font-weight: 600;
}
p, .body {
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--fg-1);
text-wrap: pretty;
}
.body-lg { font-size: var(--fs-md); line-height: 1.6; color: var(--fg-1); }
.body-sm { font-size: var(--fs-sm); line-height: 1.55; color: var(--fg-2); }
.caption { font-size: var(--fs-xs); line-height: 1.4; color: var(--fg-3); }
.muted { color: var(--fg-3); font-weight: 400; }
.grad-text {
background: var(--grad-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ============================================================
LAYOUT
============================================================ */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.container-narrow { max-width: 820px; }
.section { padding: var(--section-y) 0; position: relative; }
.section-alt { background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 50%, var(--bg-1) 100%); }
.section-head {
text-align: center;
max-width: 740px;
margin: 0 auto var(--space-12);
display: flex;
flex-direction: column;
gap: var(--space-4);
align-items: center;
}
.section-head-left { text-align: left; align-items: flex-start; margin-left: 0; }
.section-head h2 { font-size: clamp(32px, 4vw, 48px); }
.section-lead { color: var(--fg-2); font-size: var(--fs-md); max-width: 60ch; }
/* ============================================================
EYEBROW
============================================================ */
.eyebrow-row {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--brand-primary-300);
}
.eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand-primary-400);
box-shadow: 0 0 12px var(--brand-primary-400);
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all var(--dur-base) var(--ease-out);
white-space: nowrap;
text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
background: var(--brand-primary);
color: #fff;
box-shadow: var(--shadow-button);
}
.btn-primary:hover {
background: var(--brand-primary-500);
color: #fff;
box-shadow: 0 8px 28px rgba(154,59,216,0.55), 0 1px 0 rgba(255,255,255,0.18) inset;
transform: translateY(-1px);
}
.btn-ghost {
background: transparent;
color: var(--fg-1);
border: 1px solid var(--border-strong);
}
.btn-ghost:hover {
background: rgba(255,255,255,0.04);
border-color: var(--border-brand);
color: var(--fg-0);
}
.btn-wa {
background: var(--whatsapp);
color: #073d1c;
box-shadow: 0 6px 20px rgba(37,211,102,0.32), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.btn-wa:hover { background: var(--whatsapp-hover); color: #073d1c; transform: translateY(-1px); }
.btn-text {
background: transparent;
color: var(--brand-primary-300);
padding: 8px 4px;
}
.btn-text:hover { color: var(--brand-primary-200); }
.chip-soft {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: var(--radius-pill);
background: rgba(154,59,216,0.12);
color: var(--brand-primary-300);
border: 1px solid rgba(154,59,216,0.3);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
}
/* ============================================================
NAV
============================================================ */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
padding: 14px 0;
transition: all var(--dur-base) var(--ease-out);
}
.nav-scrolled {
background: rgba(7,6,10,0.78);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom: 1px solid var(--border-subtle);
padding: 10px 0;
}
.nav-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
display: flex;
align-items: center;
gap: 32px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
color: var(--fg-0);
letter-spacing: -0.02em;
}
.nav-logo:hover { color: var(--fg-0); }
.nav-logo img { width: 32px; height: 32px; border-radius: 8px; }
.nav-links { display: flex; gap: 28px; flex: 1; justify-content: center; }
.nav-links a {
color: var(--fg-2);
font-size: 14px;
font-weight: 500;
transition: color var(--dur-base);
}
.nav-links a:hover, .nav-links a.active { color: var(--fg-0); }
.nav-cta .btn { padding: 10px 18px; font-size: 14px; }
.nav-burger {
display: none;
background: transparent;
border: 1px solid var(--border-default);
width: 40px; height: 40px;
border-radius: 10px;
color: var(--fg-1);
align-items: center;
justify-content: center;
}
.nav-drawer {
display: none;
flex-direction: column;
gap: 16px;
padding: 20px var(--container-pad) 28px;
background: rgba(7,6,10,0.95);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border-subtle);
}
.nav-drawer.open { display: flex; }
.nav-drawer a { color: var(--fg-1); font-weight: 500; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
@media (max-width: 880px) {
.nav-links, .nav-cta { display: none; }
.nav-burger { display: inline-flex; margin-left: auto; }
}
/* ============================================================
HERO
============================================================ */
.hero { position: relative; padding: 160px 0 80px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-glow {
position: absolute;
top: -120px; left: 50%;
transform: translateX(-50%);
width: 1200px; height: 700px;
background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(154,59,216,0.32), transparent 70%);
filter: blur(20px);
}
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(154,59,216,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(154,59,216,0.04) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%);
}
.hero-inner {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 56px;
align-items: center;
position: relative;
}
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
.hero-copy h1 { font-size: clamp(44px, 6.5vw, 84px); line-height: 0.98; letter-spacing: -0.04em; font-weight: 700; }
.hero-sub { font-size: var(--fs-md); color: var(--fg-2); max-width: 56ch; line-height: 1.55; }
.hero-sub strong { color: var(--fg-0); font-weight: 600; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hero-cta .btn { padding: 14px 24px; font-size: 16px; }
.hero-cta-alt {
margin-top: -4px;
font-size: 14px;
color: var(--fg-3);
}
.hero-cta-alt a {
color: var(--brand-primary-300);
text-decoration: underline;
text-decoration-color: rgba(182, 116, 230, 0.4);
text-underline-offset: 3px;
transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.hero-cta-alt a:hover { text-decoration-color: var(--brand-primary-300); }
.hero-trust {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
color: var(--fg-2);
font-size: 13px;
margin-top: 16px;
padding-top: 24px;
border-top: 1px solid var(--border-subtle);
}
.hero-trust strong { color: var(--fg-0); font-weight: 700; }
.hero-trust .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--fg-4); }
/* mock dashboard */
.hero-mock { position: relative; perspective: 900px; }
.mock-card {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-2xl);
padding: 18px;
box-shadow: var(--shadow-elevated), 0 0 80px rgba(92,6,140,0.25);
}
.mock-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
background: linear-gradient(110deg, transparent 0%, rgba(214,168,240,0.12) 42%, rgba(255,255,255,0.18) 50%, transparent 58%);
transform: translateX(-110%);
}
.mock-head {
display: flex;
align-items: center;
gap: 6px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 14px;
}
.mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-4); }
.mock-title { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mock-tile {
position: relative;
overflow: hidden;
background: var(--bg-1);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 14px;
transform: translateZ(0);
}
.mock-tile::after {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
opacity: 0;
background: radial-gradient(circle at 76% 22%, rgba(182,116,230,0.18), transparent 38%);
}
.mock-tile.big { grid-column: 1 / 3; }
.mock-eyebrow {
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-3);
margin-bottom: 4px;
}
.mock-num {
font-family: var(--font-display);
font-weight: 700;
font-size: 28px;
color: var(--fg-0);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.mock-num span { color: var(--brand-primary-300); font-size: 18px; }
.mock-trend { font-family: var(--font-mono); font-size: 11px; margin-top: 4px; }
.mock-trend.up { color: var(--success); }
.mock-chart { display: block; width: 100%; height: 50px; margin-top: 8px; }
.mock-chart-area { transform-origin: 0 100%; }
.mock-chart-line {
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 8px rgba(182,116,230,0.45));
}
.hero-mock.mock-live .mock-card {
animation: mock-card-enter 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-mock.mock-live .mock-card::after {
animation: mock-card-sheen 1600ms var(--ease-out) 480ms both;
}
.hero-mock.mock-live .mock-dot {
animation: mock-dot-pulse 2800ms ease-in-out infinite;
}
.hero-mock.mock-live .mock-dot:nth-child(2) { animation-delay: 220ms; }
.hero-mock.mock-live .mock-dot:nth-child(3) { animation-delay: 440ms; }
.hero-mock.mock-live .mock-tile {
animation: mock-tile-enter 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-mock.mock-live .mock-tile:nth-child(1) { animation-delay: 120ms; }
.hero-mock.mock-live .mock-tile:nth-child(2) { animation-delay: 220ms; }
.hero-mock.mock-live .mock-tile:nth-child(3) { animation-delay: 320ms; }
.hero-mock.mock-live .mock-tile::after {
animation: mock-tile-glow 3600ms ease-in-out infinite;
}
.hero-mock.mock-live .mock-tile:nth-child(2)::after { animation-delay: 500ms; }
.hero-mock.mock-live .mock-tile:nth-child(3)::after { animation-delay: 1000ms; }
.hero-mock.mock-live .mock-num {
animation: mock-number-settle 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-mock.mock-live .mock-trend.up {
animation: mock-trend-pop 540ms cubic-bezier(0.16, 1, 0.3, 1) 720ms both;
}
.hero-mock.mock-live .mock-chart-area {
animation: mock-chart-area 900ms cubic-bezier(0.16, 1, 0.3, 1) 420ms both;
}
.hero-mock.mock-live .mock-chart-line {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation:
mock-chart-line 1150ms cubic-bezier(0.16, 1, 0.3, 1) 460ms both,
mock-chart-breathe 3600ms ease-in-out 1800ms infinite;
}
@keyframes mock-card-enter {
from { opacity: 0.74; transform: translate3d(0, 22px, 0) rotateX(5deg) scale(0.985); }
to { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) scale(1); }
}
@keyframes mock-card-sheen {
0% { opacity: 0; transform: translateX(-110%); }
24% { opacity: 1; }
100% { opacity: 0; transform: translateX(110%); }
}
@keyframes mock-dot-pulse {
0%, 100% { background: var(--bg-4); box-shadow: none; }
50% { background: rgba(182,116,230,0.5); box-shadow: 0 0 12px rgba(182,116,230,0.35); }
}
@keyframes mock-tile-enter {
from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); }
to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes mock-tile-glow {
0%, 100% { opacity: 0; }
45%, 60% { opacity: 1; }
}
@keyframes mock-number-settle {
from { opacity: 0.55; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes mock-trend-pop {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes mock-chart-area {
from { opacity: 0; transform: scaleY(0.08); }
to { opacity: 1; transform: scaleY(1); }
}
@keyframes mock-chart-line {
to { stroke-dashoffset: 0; }
}
@keyframes mock-chart-breathe {
0%, 100% { opacity: 0.84; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hero-mock.mock-live .mock-card,
.hero-mock.mock-live .mock-dot,
.hero-mock.mock-live .mock-tile,
.hero-mock.mock-live .mock-num,
.hero-mock.mock-live .mock-trend.up,
.hero-mock.mock-live .mock-chart-area,
.hero-mock.mock-live .mock-chart-line {
animation: none;
opacity: 1;
transform: none;
}
.hero-mock.mock-live .mock-card::after,
.hero-mock.mock-live .mock-tile::after {
animation: none;
opacity: 0;
}
.hero-mock.mock-live .mock-chart-line {
stroke-dashoffset: 0;
}
}
@media (max-width: 900px) {
.hero { padding: 120px 0 60px; }
.hero-inner { grid-template-columns: 1fr; gap: 36px; }
.hero-mock { display: none; }
}
@media (max-width: 640px) {
.hero-cta { flex-direction: column; align-items: stretch; }
.hero-cta .btn {
width: 100%;
justify-content: center;
white-space: normal;
text-align: center;
}
}
@media (max-width: 640px) {
.hero-trust {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.hero-trust .dot { display: none; }
}
/* ============================================================
METRICS BAND
============================================================ */
.metrics-band {
padding: 32px 0;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-0);
}
.metrics-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.metric {
display: flex;
flex-direction: column;
gap: 2px;
align-items: center;
flex: 1 1 0;
min-width: 140px;
}
.metric-num {
font-family: var(--font-display);
font-weight: 700;
font-size: 36px;
color: var(--fg-0);
letter-spacing: -0.025em;
line-height: 1;
}
.metric-num span { color: var(--brand-primary-300); font-size: 22px; }
.metric-label { color: var(--fg-2); font-size: 13px; }
.metric-sep { width: 1px; height: 36px; background: var(--border-subtle); }
@media (max-width: 720px) { .metric-sep { display: none; } .metrics-row { gap: 24px; } }
/* ============================================================
SERVICES
============================================================ */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.service-card {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
padding: 24px;
transition: all var(--dur-base) var(--ease-out);
display: flex;
flex-direction: column;
gap: 12px;
}
.service-card:hover {
transform: translateY(-2px);
border-color: var(--border-brand);
box-shadow: 0 16px 48px rgba(92,6,140,0.18);
}
.service-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: rgba(154,59,216,0.12);
border: 1px solid rgba(154,59,216,0.3);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--brand-primary-300);
}
.service-card h3 { font-size: 18px; }
.service-card p { color: var(--fg-2); font-size: 14px; line-height: 1.55; flex: 1; }
.service-link {
color: var(--brand-primary-300);
font-size: 13px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap var(--dur-base);
width: fit-content;
}
.service-link:hover { color: var(--brand-primary-200); gap: 10px; }
@media (max-width: 880px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } }
/* ============================================================
PROCESS
============================================================ */
.process {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.process-step { padding: 24px 0 0; position: relative; }
.process-step::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, var(--border-brand), transparent);
}
.step-num {
font-family: var(--font-display);
font-size: 14px;
color: var(--brand-primary-300);
margin-bottom: 8px;
letter-spacing: 0.06em;
}
.process-step h3 { font-size: 18px; margin-bottom: 8px; }
.process-step p { color: var(--fg-2); font-size: 14px; line-height: 1.55; }
@media (max-width: 880px) { .process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .process { grid-template-columns: 1fr; } }
/* ============================================================
CASES
============================================================ */
.cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.case-card {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-2xl);
padding: 28px;
display: flex;
flex-direction: column;
gap: 18px;
}
.case-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.case-card h3 { font-size: 22px; }
.case-headline { color: var(--fg-2); font-size: 16px; }
.case-metrics { display: flex; gap: 8px; flex-wrap: wrap; }
.case-metric {
padding: 6px 12px;
border-radius: var(--radius-pill);
background: rgba(154,59,216,0.12);
border: 1px solid rgba(154,59,216,0.3);
color: var(--brand-primary-200);
font-family: var(--font-mono);
font-size: 12px;
}
.case-quote {
background: var(--bg-1);
border-left: 2px solid var(--brand-primary-400);
padding: 14px 16px;
font-size: 14px;
line-height: 1.55;
color: var(--fg-1);
font-style: italic;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.case-quote cite { color: var(--fg-3); font-style: normal; font-size: 12px; }
@media (max-width: 880px) { .cases-grid { grid-template-columns: 1fr; } }
a.case-card { color: inherit; text-decoration: none; transition: transform 200ms ease, border-color 200ms ease; }
a.case-card:hover { transform: translateY(-2px); border-color: rgba(154,59,216,0.45); }
.case-card-cover {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, rgba(154,59,216,0.18), rgba(154,59,216,0.04));
border: 1px solid rgba(154,59,216,0.2);
}
.case-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section-cta { display: flex; justify-content: center; margin-top: 32px; }
.case-detail-article { display: flex; flex-direction: column; gap: 22px; }
.case-detail-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; color: var(--fg-3); font-size: 13px; }
.case-detail-article h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; }
.case-detail-headline { font-size: 18px; color: var(--fg-2); margin: -8px 0 4px; }
.case-detail-cover {
border-radius: var(--radius-2xl);
overflow: hidden;
border: 1px solid var(--border-default);
background: var(--bg-2);
aspect-ratio: 16 / 9;
}
.case-detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-detail-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 22px;
border-radius: var(--radius-2xl);
border: 1px solid var(--border-default);
background: linear-gradient(180deg, rgba(154,59,216,0.10), rgba(154,59,216,0.02)), var(--bg-2);
}
.case-detail-metric { display: flex; flex-direction: column; gap: 4px; }
.case-detail-metric strong {
font-family: var(--font-mono);
font-size: 22px;
color: var(--brand-primary-200);
}
.case-detail-metric span { color: var(--fg-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 720px) { .case-detail-metrics { grid-template-columns: 1fr; } }
.case-detail-summary { display: flex; flex-direction: column; gap: 12px; color: var(--fg-2); font-size: 16px; line-height: 1.65; }
.case-detail-summary p { margin: 0; }
.case-detail-quote {
background: var(--bg-1);
border-left: 3px solid var(--brand-primary-400);
padding: 22px 24px;
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
font-size: 17px;
line-height: 1.6;
color: var(--fg-1);
font-style: italic;
display: flex;
flex-direction: column;
gap: 10px;
}
.case-detail-quote p { margin: 0; }
.case-detail-quote cite { color: var(--fg-3); font-style: normal; font-size: 13px; }
/* ============================================================
PRICING
============================================================ */
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: stretch;
}
.plan {
--plan-accent: var(--brand-primary-300);
--plan-accent-soft: rgba(154,59,216,0.14);
background:
radial-gradient(circle at 20% 0%, var(--plan-accent-soft), transparent 36%),
linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
var(--bg-2);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-2xl);
padding: 28px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
overflow: hidden;
min-width: 0;
transition: all var(--dur-base) var(--ease-out);
}
.plan::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(90deg, transparent, var(--plan-accent), transparent);
opacity: 0.78;
}
.plan:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--plan-accent) 48%, rgba(255,255,255,0.18)); }
.plan-start {
--plan-accent: #5fb5ff;
--plan-accent-soft: rgba(95,181,255,0.14);
}
.plan-growth {
--plan-accent: var(--brand-primary-200);
--plan-accent-soft: rgba(214,168,240,0.18);
}
.plan-scale {
--plan-accent: #ff6b7a;
--plan-accent-soft: rgba(255,107,122,0.14);
}
.plan-popular {
border-color: rgba(214,168,240,0.42);
box-shadow: 0 18px 70px rgba(154,59,216,0.2);
}
.plan-badge {
position: absolute;
top: 16px;
right: 18px;
background: rgba(214,168,240,0.14);
border: 1px solid rgba(214,168,240,0.34);
color: var(--fg-0);
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: var(--radius-pill);
box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.plan-top {
display: flex;
align-items: center;
gap: 16px;
padding-right: 0;
min-height: 76px;
}
.plan-popular .plan-top { padding-right: 120px; }
.plan-marker {
width: 76px;
height: 76px;
border-radius: 24px;
border: 1px solid color-mix(in srgb, var(--plan-accent) 44%, rgba(255,255,255,0.16));
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.22), transparent 28%),
linear-gradient(145deg, color-mix(in srgb, var(--plan-accent) 24%, rgba(255,255,255,0.08)), rgba(255,255,255,0.03));
box-shadow:
0 18px 50px color-mix(in srgb, var(--plan-accent) 30%, transparent),
inset 0 1px 0 rgba(255,255,255,0.16);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px;
position: relative;
isolation: isolate;
flex: 0 0 auto;
animation: plan-icon-float 7s ease-in-out infinite;
}
.plan-marker::before {
content: "";
position: absolute;
inset: -10px;
border-radius: 30px;
background: radial-gradient(circle, color-mix(in srgb, var(--plan-accent) 36%, transparent), transparent 68%);
filter: blur(10px);
opacity: 0.58;
z-index: -1;
animation: plan-icon-aura 5.8s ease-in-out infinite;
}
.plan-marker::after {
content: "";
position: absolute;
inset: 8px;
border-radius: 17px;
background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,0.28) 46%, transparent 64%);
transform: translateX(-150%);
opacity: 0;
pointer-events: none;
animation: plan-icon-shine 6.4s ease-in-out infinite;
}
.plan-symbol {
width: 100%;
height: 100%;
display: block;
border-radius: 17px;
overflow: hidden;
box-shadow: 0 10px 26px rgba(0,0,0,0.34);
transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.plan-symbol * {
vector-effect: non-scaling-stroke;
}
.plan-growth .plan-marker {
animation-delay: -1.6s;
}
.plan-growth .plan-marker::before {
animation-delay: -1.1s;
}
.plan-growth .plan-marker::after {
animation-delay: 1.4s;
}
.plan-scale .plan-marker {
animation-delay: -3.2s;
}
.plan-scale .plan-marker::before {
animation-delay: -2.4s;
}
.plan-scale .plan-marker::after {
animation-delay: 2.6s;
}
.plan:hover .plan-symbol { transform: scale(1.04); }
@keyframes plan-icon-float {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
50% { transform: translate3d(0, -5px, 0) rotate(-1deg); }
}
@keyframes plan-icon-aura {
0%, 100% { opacity: 0.44; transform: scale(0.96); }
50% { opacity: 0.78; transform: scale(1.05); }
}
@keyframes plan-icon-shine {
0%, 42% { opacity: 0; transform: translateX(-150%); }
52% { opacity: 0.55; }
66%, 100% { opacity: 0; transform: translateX(150%); }
}
.plan-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-0);
}
.plan-kicker {
margin: 3px 0 0;
color: var(--fg-3);
font-size: 12px;
line-height: 1.35;
}
.plan-price {
display: flex;
align-items: baseline;
gap: 5px;
flex-wrap: wrap;
font-family: var(--font-display);
color: var(--fg-0);
font-weight: 700;
line-height: 1;
}
.plan-currency { font-size: 20px; }
.plan-scale .plan-currency { font-size: 15px; color: var(--fg-3); font-weight: 600; }
.plan-amount { font-size: 54px; letter-spacing: 0; line-height: 1; }
.plan-period { font-size: 15px; color: var(--fg-3); font-weight: 500; line-height: 1.25; }
.plan-custom { font-size: 28px; letter-spacing: 0; }
.plan-pitch { color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.plan-group {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.plan-group h3 {
font-family: var(--font-display);
color: color-mix(in srgb, var(--plan-accent) 70%, var(--fg-0));
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.35;
text-transform: uppercase;
}
.plan-features {
display: flex;
flex-direction: column;
gap: 9px;
margin: 0;
flex: 1;
}
.plan-features li {
display: flex;
gap: 9px;
align-items: flex-start;
color: var(--fg-1);
font-size: 13.5px;
line-height: 1.45;
}
.plan-features li span { min-width: 0; }
.plan-features li strong { color: var(--fg-0); font-weight: 700; }
.plan-features li.excluded {
color: var(--fg-3);
text-decoration: line-through;
text-decoration-color: rgba(255,255,255,0.2);
}
.plan-features li svg {
color: var(--plan-accent);
flex-shrink: 0;
margin-top: 3px;
}
.plan-features li.excluded svg { color: var(--fg-4); }
.plan-includes {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-top: 4px;
}
.plan-includes span {
border: 1px solid color-mix(in srgb, var(--plan-accent) 34%, rgba(255,255,255,0.12));
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--plan-accent) 12%, transparent);
color: var(--fg-1);
font-size: 12px;
line-height: 1.2;
padding: 7px 10px;
}
.plan-cta { width: 100%; justify-content: center; }
.plan-foot { color: var(--fg-3); font-size: 12px; text-align: center; margin-top: 4px; }
.pricing-note {
max-width: 720px;
margin: 22px auto 0;
color: var(--fg-3);
font-size: 13px;
line-height: 1.55;
text-align: center;
}
.plan-savings {
border: 1px solid rgba(34,197,94,0.24);
background: rgba(34,197,94,0.08);
border-radius: var(--radius-md);
padding: 12px 14px;
}
.plan-savings span {
display: block;
color: #86efac;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.plan-savings strong {
display: block;
margin-top: 4px;
color: var(--fg-0);
font-size: 20px;
line-height: 1.2;
}
.plan-savings small {
display: block;
margin-top: 3px;
color: var(--fg-2);
font-size: 12px;
line-height: 1.45;
}
@media (max-width: 1080px) {
.pricing-grid-detailed { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; }
}
@media (max-width: 880px) { .pricing-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
.plan { padding: 24px 20px; }
.plan-top { padding-right: 0; align-items: center; gap: 12px; min-height: 66px; }
.plan-popular .plan-top { padding-right: 0; }
.plan-marker { width: 66px; height: 66px; border-radius: 21px; padding: 7px; }
.plan-marker::before { inset: -7px; border-radius: 26px; }
.plan-marker::after,
.plan-symbol { border-radius: 15px; }
.plan-badge { position: static; align-self: flex-start; order: -1; }
.plan-amount { font-size: 42px; }
.plan-period { width: 100%; margin-top: -2px; }
}
@media (prefers-reduced-motion: reduce) {
.plan-marker,
.plan-marker::before,
.plan-marker::after {
animation: none;
}
.plan-marker,
.plan:hover .plan-symbol {
transform: none;
}
}
/* ============================================================
DETAIL PAGES
============================================================ */
.detail-hero {
padding: 150px 0 64px;
position: relative;
overflow: hidden;
}
.detail-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(154,59,216,0.22), transparent 65%),
linear-gradient(180deg, var(--bg-0), var(--bg-1));
pointer-events: none;
}
.detail-hero .container { position: relative; z-index: 1; }
.detail-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
gap: 48px;
align-items: end;
}
.detail-hero-grid > * { min-width: 0; }
.detail-hero h1 {
margin-top: 16px;
font-size: clamp(42px, 5.4vw, 72px);
line-height: 1;
letter-spacing: var(--tracking-tight);
overflow-wrap: break-word;
}
.detail-hero p {
max-width: 62ch;
margin-top: 18px;
color: var(--fg-2);
font-size: var(--fs-md);
overflow-wrap: normal;
}
.detail-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.detail-panel {
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-2xl);
padding: 28px;
box-shadow: var(--shadow-card);
min-width: 0;
}
.detail-panel h2,
.detail-panel h3 {
font-size: var(--fs-xl);
margin-bottom: 12px;
}
.detail-panel p {
margin-top: 0;
font-size: 14px;
}
.detail-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 24px;
}
.detail-stat {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 14px;
background: rgba(255,255,255,0.03);
}
.detail-stat strong {
display: block;
color: var(--fg-0);
font-family: var(--font-display);
font-size: 22px;
}
.detail-stat span {
display: block;
margin-top: 4px;
color: var(--fg-3);
font-size: 12px;
line-height: 1.35;
}
.detail-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.detail-card {
background: var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
padding: 24px;
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
transition: all var(--dur-base) var(--ease-out);
}
.detail-card:hover {
transform: translateY(-2px);
border-color: var(--border-brand);
box-shadow: var(--shadow-card-hover);
}
.detail-card h3 { font-size: var(--fs-lg); }
.detail-card p {
color: var(--fg-2);
font-size: 14px;
line-height: 1.55;
}
.detail-list,
.check-list {
display: flex;
flex-direction: column;
gap: 9px;
}
.detail-list li,
.check-list li {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--fg-1);
font-size: 14px;
line-height: 1.5;
}
.detail-list li::before,
.check-list li::before {
content: "";
width: 7px;
height: 7px;
margin-top: 7px;
border-radius: 50%;
background: var(--brand-primary-300);
box-shadow: 0 0 16px rgba(182,116,230,0.45);
flex: 0 0 auto;
}
.detail-card .service-link { margin-top: auto; }
.compare-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.home-compare-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.compare-card {
background: var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
padding: 24px;
}
.compare-card h3 { font-size: var(--fs-lg); margin-bottom: 16px; }
.compare-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.compare-col {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 14px;
background: rgba(255,255,255,0.03);
}
.compare-col strong {
display: block;
margin-bottom: 8px;
color: var(--fg-0);
font-size: 13px;
}
.compare-col p {
color: var(--fg-2);
font-size: 13px;
line-height: 1.5;
}
.compare-col.good {
border-color: rgba(34,197,94,0.22);
background: rgba(34,197,94,0.07);
}
.compare-col.bad {
border-color: rgba(239,68,68,0.18);
background: rgba(239,68,68,0.05);
}
.savings-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.savings-card {
background: var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
padding: 24px;
}
.savings-card h3 { font-size: var(--fs-lg); }
.savings-card p {
margin-top: 8px;
color: var(--fg-2);
font-size: 14px;
line-height: 1.55;
}
.savings-line {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 11px 0;
border-bottom: 1px solid var(--border-subtle);
color: var(--fg-2);
font-size: 14px;
}
.savings-line strong { color: var(--fg-0); }
.savings-line:last-of-type { border-bottom: 0; }
.savings-total {
margin-top: 14px;
padding: 14px;
border-radius: var(--radius-md);
background: rgba(34,197,94,0.08);
border: 1px solid rgba(34,197,94,0.22);
color: #86efac;
font-weight: 700;
}
.wide-band {
border: 1px solid var(--border-default);
border-radius: var(--radius-2xl);
padding: 28px;
background: linear-gradient(135deg, rgba(92,6,140,0.22), rgba(255,255,255,0.03));
}
.wide-band h2 { font-size: clamp(28px, 3vw, 40px); }
.wide-band p {
max-width: 72ch;
margin-top: 12px;
color: var(--fg-2);
}
.plan-compare-wrap {
overflow-x: auto;
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
background: var(--bg-2);
box-shadow: var(--shadow-card);
}
.plan-compare {
width: 100%;
min-width: 760px;
border-collapse: collapse;
}
.plan-compare th,
.plan-compare td {
padding: 16px;
border-bottom: 1px solid var(--border-subtle);
text-align: left;
vertical-align: top;
}
.plan-compare th {
color: var(--fg-0);
font-family: var(--font-display);
font-size: 14px;
background: rgba(255,255,255,0.035);
}
.plan-compare td {
color: var(--fg-2);
font-size: 14px;
line-height: 1.5;
}
.plan-compare tr:last-child td { border-bottom: 0; }
.plan-compare td:first-child {
color: var(--fg-0);
font-weight: 700;
width: 190px;
}
.plan-compare strong { color: var(--fg-0); }
.fit-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.fit-card {
background: var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
padding: 24px;
}
.fit-card h3 {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--fs-lg);
}
.fit-card p {
margin-top: 10px;
color: var(--fg-2);
font-size: 14px;
line-height: 1.55;
}
.fit-card .check-list { margin-top: 16px; }
.proof-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 16px;
align-items: stretch;
}
.proof-panel {
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-2xl);
padding: 28px;
box-shadow: var(--shadow-card);
}
.proof-panel h2 { font-size: clamp(28px, 3vw, 42px); }
.proof-panel p {
margin-top: 12px;
color: var(--fg-2);
}
.proof-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 22px;
}
.proof-metric {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 14px;
background: rgba(255,255,255,0.03);
}
.proof-metric strong {
display: block;
color: var(--fg-0);
font-family: var(--font-display);
font-size: 22px;
}
.proof-metric span {
display: block;
margin-top: 4px;
color: var(--fg-3);
font-size: 12px;
}
.proof-list {
display: grid;
gap: 12px;
}
.proof-item {
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px;
align-items: start;
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
padding: 16px;
background: var(--bg-2);
}
.proof-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: var(--radius-md);
color: var(--brand-primary-200);
background: rgba(154,59,216,0.13);
border: 1px solid rgba(154,59,216,0.26);
}
.proof-item h3 { font-size: 16px; }
.proof-item p {
margin-top: 4px;
color: var(--fg-2);
font-size: 14px;
line-height: 1.5;
}
.segment-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.segment-card {
background: var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
padding: 24px;
transition: all var(--dur-base) var(--ease-out);
}
.segment-card:hover {
transform: translateY(-2px);
border-color: var(--border-brand);
box-shadow: var(--shadow-card-hover);
}
.segment-card h3 { font-size: var(--fs-lg); }
.segment-card p {
margin-top: 10px;
color: var(--fg-2);
font-size: 14px;
line-height: 1.55;
}
.segment-card .service-link { margin-top: 16px; }
.mini-faq-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.mini-faq-card {
background: var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
padding: 22px;
}
.mini-faq-card h3 { font-size: 17px; }
.mini-faq-card p {
margin-top: 8px;
color: var(--fg-2);
font-size: 14px;
line-height: 1.55;
}
@media (max-width: 980px) {
.detail-hero-grid,
.detail-grid,
.compare-grid,
.savings-grid,
.fit-grid,
.proof-grid,
.segment-grid,
.mini-faq-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.detail-hero { padding-top: 128px; }
.detail-hero h1,
.detail-hero-actions,
.detail-panel {
width: min(100%, calc(100vw - 60px));
max-width: calc(100vw - 60px);
}
.detail-hero p {
width: min(100%, 32ch);
max-width: 32ch;
}
.detail-hero-actions .btn {
width: 100%;
justify-content: center;
white-space: normal;
text-align: center;
}
.detail-stats,
.compare-columns {
grid-template-columns: 1fr;
}
.detail-panel,
.wide-band {
padding: 22px;
}
.proof-metrics {
grid-template-columns: 1fr;
}
.proof-item {
grid-template-columns: 1fr;
}
}
/* ============================================================
FAQ
============================================================ */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
background: var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color var(--dur-base);
}
.faq-item[open] { border-color: var(--border-brand); }
.faq-q {
width: 100%;
background: transparent;
border: none;
color: var(--fg-0);
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-size: 16px;
font-weight: 600;
text-align: left;
gap: 16px;
list-style: none;
font-family: var(--font-body);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .faq-icon-plus, .faq-q .faq-icon-minus {
color: var(--brand-primary-300);
flex-shrink: 0;
transition: transform var(--dur-base);
}
.faq-item[open] .faq-icon-plus { display: none; }
.faq-item:not([open]) .faq-icon-minus { display: none; }
.faq-a {
padding: 0 22px 20px;
color: var(--fg-2);
line-height: 1.6;
font-size: 15px;
}
/* ============================================================
LEAD FORM
============================================================ */
.lead-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005)), var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-2xl);
padding: 40px;
position: relative;
overflow: hidden;
}
.lead-wrap::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(154,59,216,0.18), transparent 70%);
pointer-events: none;
}
.lead-copy { display: flex; flex-direction: column; gap: 16px; position: relative; }
.lead-copy h2 { font-size: clamp(28px, 3.5vw, 40px); }
.lead-copy p { color: var(--fg-2); font-size: 15px; line-height: 1.6; }
.lead-points {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 8px;
}
.lead-points li {
display: flex;
gap: 10px;
align-items: center;
color: var(--fg-1);
font-size: 14px;
}
.lead-points li svg { color: var(--brand-primary-300); flex-shrink: 0; }
.lead-form { display: flex; flex-direction: column; gap: 14px; position: relative; }
.hp-field {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
font-size: 12px;
font-weight: 600;
color: var(--fg-2);
letter-spacing: 0.02em;
}
.input {
background: var(--bg-3);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: 12px 14px;
color: var(--fg-1);
font-family: var(--font-body);
font-size: 14px;
outline: none;
transition: all var(--dur-fast);
width: 100%;
}
.input:focus {
border-color: var(--brand-primary-400);
box-shadow: 0 0 0 3px rgba(154,59,216,0.18);
background: var(--bg-2);
}
.input::placeholder { color: var(--fg-3); }
select.input {
appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23807a93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
}
.textarea { resize: vertical; min-height: 80px; font-family: var(--font-body); }
.form-submit { justify-content: center; margin-top: 6px; padding: 14px 22px; font-size: 16px; }
.form-foot { color: var(--fg-2); font-size: 13px; text-align: center; }
.form-wa-link {
color: var(--whatsapp);
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 600;
}
.form-wa-link:hover { color: var(--whatsapp-hover); }
.form-feedback {
padding: 12px 16px;
border-radius: var(--radius-md);
font-size: 13px;
}
.form-feedback.error { background: var(--danger-bg); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; }
.form-feedback.success { background: var(--success-bg); border: 1px solid rgba(34, 197, 94, 0.3); color: #86efac; }
@media (max-width: 880px) {
.lead-wrap { grid-template-columns: 1fr; padding: 28px; gap: 28px; }
.form-grid { grid-template-columns: 1fr; }
}
/* ============================================================
FOOTER
============================================================ */
.footer {
background: var(--bg-0);
border-top: 1px solid var(--border-subtle);
padding: 64px 0 0;
}
.footer-inner {
display: grid;
grid-template-columns: 1.4fr 2fr;
gap: 48px;
padding-bottom: 48px;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 320px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
color: var(--fg-0);
letter-spacing: -0.02em;
}
.footer-logo:hover { color: var(--fg-0); }
.footer-logo img { width: 32px; height: 32px; border-radius: 8px; }
.footer-brand p { color: var(--fg-2); font-size: 14px; line-height: 1.55; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
width: 40px;
height: 40px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fg-2);
transition: all var(--dur-base);
}
.footer-social a:hover {
color: var(--brand-primary-300);
border-color: var(--border-brand);
}
.footer-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.footer-cols a {
display: flex;
align-items: center;
gap: 6px;
color: var(--fg-2);
font-size: 14px;
padding: 4px 0;
transition: color var(--dur-base);
}
.footer-cols a:hover { color: var(--fg-0); }
.footer-col-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fg-0);
margin-bottom: 12px;
}
.footer-legal {
border-top: 1px solid var(--border-subtle);
padding: 20px 0;
color: var(--fg-3);
font-size: 13px;
}
.footer-legal-inner {
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.footer-legal a { color: var(--fg-3); }
.footer-legal a:hover { color: var(--fg-1); }
@media (max-width: 880px) {
.footer-inner { grid-template-columns: 1fr; gap: 32px; }
.footer-cols { grid-template-columns: 1fr 1fr; }
}
/* ============================================================
WHATSAPP FAB
============================================================ */
.wa-fab {
position: fixed;
right: 24px;
bottom: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--whatsapp);
color: #073d1c;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 32px rgba(37,211,102,0.5), 0 0 0 4px rgba(37,211,102,0.18);
z-index: 40;
transition: transform var(--dur-base) var(--ease-out);
}
.wa-fab:hover { transform: scale(1.06); color: #073d1c; }
.wa-fab-pulse {
position: absolute;
inset: -4px;
border-radius: 50%;
background: var(--whatsapp);
opacity: 0.45;
z-index: -1;
animation: wa-pulse 2.4s var(--ease-out) infinite;
}
@keyframes wa-pulse {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(1.6); opacity: 0; }
}
@media (max-width: 640px) {
.wa-fab {
right: 16px;
bottom: calc(18px + env(safe-area-inset-bottom, 0px));
width: 54px;
height: 54px;
}
body:has(#leadForm :focus) .wa-fab {
opacity: 0;
pointer-events: none;
transform: translateY(10px) scale(0.96);
}
}
/* ============================================================
BLOG
============================================================ */
.blog-hero { padding: 160px 0 60px; }
.blog-hero h1 { font-size: clamp(40px, 5.5vw, 64px); line-height: 1; letter-spacing: -0.03em; }
.post-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.post-card {
background: var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl);
overflow: hidden;
transition: all var(--dur-base) var(--ease-out);
display: flex;
flex-direction: column;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.post-card:hover {
transform: translateY(-2px);
border-color: var(--border-brand);
color: inherit;
}
.post-thumb {
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
}
.post-thumb-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(154,59,216,0.4), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(92,6,140,0.5), transparent 50%),
linear-gradient(135deg, #1f0530, #0c0a14);
}
.post-cat { position: absolute; bottom: 12px; left: 12px; }
.post-body {
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.post-card h3 { font-size: 18px; line-height: 1.25; }
.post-card p { color: var(--fg-2); font-size: 14px; line-height: 1.55; }
.post-meta {
color: var(--fg-3);
font-size: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-4); }
.post-large {
display: grid;
grid-template-columns: 1.1fr 1fr;
margin-bottom: 24px;
}
.post-large .post-thumb { aspect-ratio: auto; min-height: 280px; }
.post-large h3 { font-size: 28px; }
.post-large .post-body { padding: 32px; gap: 14px; justify-content: center; }
@media (max-width: 880px) {
.post-grid { grid-template-columns: 1fr 1fr; }
.post-large { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.post-grid { grid-template-columns: 1fr; }
}
/* ============================================================
BLOG READER
============================================================ */
.blog-status {
margin: -12px 0 24px;
padding: 12px 14px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-2);
color: var(--fg-2);
font-size: 14px;
}
.blog-status.warning {
border-color: rgba(245,158,11,0.36);
background: rgba(245,158,11,0.08);
color: #f8d58a;
}
.post-reader { padding-top: 140px; }
.post-back { margin-bottom: 24px; }
.post-reader-article {
display: flex;
flex-direction: column;
gap: 22px;
}
.post-reader-kicker {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
color: var(--fg-3);
font-size: 13px;
}
.post-reader-kicker .dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--fg-4);
}
.post-reader-article h1 {
font-size: var(--fs-5xl);
line-height: var(--lh-tight);
}
.post-reader-excerpt {
color: var(--fg-2);
font-size: var(--fs-md);
line-height: 1.65;
}
.post-reader-content {
display: flex;
flex-direction: column;
gap: 18px;
padding-top: 10px;
}
.post-reader-content h2 {
font-size: var(--fs-2xl);
padding-top: 18px;
}
.post-reader-content p,
.post-reader-content li {
color: var(--fg-1);
font-size: 17px;
line-height: 1.78;
}
.post-reader-content ul {
display: flex;
flex-direction: column;
gap: 10px;
padding-left: 20px;
list-style: disc;
}
@media (max-width: 640px) {
.post-reader { padding-top: 118px; }
.post-reader-article h1 { font-size: var(--fs-3xl); }
}
/* ============================================================
LEGAL
============================================================ */
.legal-page {
padding-top: 140px;
}
.legal-page h1 {
margin-top: 12px;
font-size: var(--fs-5xl);
}
.legal-updated {
margin-top: 10px;
color: var(--fg-3);
font-size: 14px;
}
.legal-content {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 34px;
}
.legal-content h2 {
padding-top: 14px;
font-size: var(--fs-xl);
}
.legal-content p {
color: var(--fg-2);
font-size: 16px;
line-height: 1.75;
}
/* ============================================================
ADMIN
============================================================ */
.admin-page {
background: var(--bg-1);
}
.admin-main {
min-height: 100vh;
padding: 132px 0 80px;
}
.admin-hero {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 28px;
}
.admin-hero h1 {
max-width: 760px;
margin-top: 10px;
font-size: var(--fs-4xl);
}
.admin-session {
min-width: 220px;
padding: 12px 14px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-2);
}
.admin-session span {
display: block;
color: var(--fg-3);
font-size: 12px;
}
.admin-session strong {
display: block;
margin-top: 2px;
overflow: hidden;
color: var(--fg-1);
font-size: 14px;
text-overflow: ellipsis;
}
.admin-panel {
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-2);
padding: 22px;
box-shadow: var(--shadow-card);
}
.admin-panel + .admin-panel,
.admin-dashboard .admin-panel {
margin-top: 18px;
}
.admin-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.admin-panel-head h2,
.admin-panel h2 {
font-size: var(--fs-xl);
}
.admin-panel-head p,
.admin-panel p {
color: var(--fg-2);
font-size: 14px;
}
.admin-auth {
max-width: 460px;
}
.admin-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.admin-full-btn {
justify-content: center;
width: 100%;
}
.admin-form-message,
.admin-notice {
padding: 11px 13px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-2);
color: var(--fg-2);
font-size: 13px;
}
.admin-form-message.error,
.admin-notice.error {
border-color: rgba(239,68,68,0.34);
background: var(--danger-bg);
color: #fca5a5;
}
.admin-notice.success {
border-color: rgba(34,197,94,0.32);
background: var(--success-bg);
color: #86efac;
}
.admin-setup {
max-width: 760px;
}
.admin-setup-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 18px;
padding-left: 20px;
color: var(--fg-2);
font-size: 14px;
list-style: decimal;
}
.admin-setup-list code {
color: var(--brand-primary-200);
font-family: var(--font-mono);
}
.admin-tabs {
display: inline-flex;
gap: 6px;
padding: 4px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-2);
margin-bottom: 18px;
}
.admin-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: var(--radius-xs);
color: var(--fg-2);
font-size: 14px;
font-weight: 600;
}
.admin-tab.active {
background: var(--bg-4);
color: var(--fg-0);
}
.admin-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.admin-stat {
padding: 16px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-2);
}
.admin-stat span {
display: block;
color: var(--fg-3);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.admin-stat strong {
display: block;
margin-top: 8px;
color: var(--fg-0);
font-family: var(--font-display);
font-size: var(--fs-2xl);
}
.admin-dashboard-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 18px;
}
.admin-dashboard-card {
padding: 16px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-3);
}
.admin-dashboard-card span {
display: block;
color: var(--fg-3);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.admin-dashboard-card strong {
display: block;
margin-top: 8px;
overflow: hidden;
color: var(--fg-0);
font-family: var(--font-display);
font-size: var(--fs-xl);
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-insights-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.admin-insight-panel {
padding: 16px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-3);
}
.admin-insight-panel h3 {
margin-bottom: 12px;
font-size: var(--fs-lg);
}
.admin-bar-list,
.admin-recent-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.admin-bar-label {
display: flex;
justify-content: space-between;
gap: 12px;
color: var(--fg-2);
font-size: 12px;
}
.admin-bar-label span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-bar-label strong {
color: var(--fg-0);
}
.admin-bar-track {
height: 7px;
margin-top: 5px;
overflow: hidden;
border-radius: var(--radius-pill);
background: var(--bg-4);
}
.admin-bar-track span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--brand-primary-400);
}
.admin-recent-item {
padding: 10px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-2);
}
.admin-recent-item strong,
.admin-recent-item span {
display: block;
}
.admin-recent-item strong {
color: var(--fg-0);
font-size: 13px;
}
.admin-recent-item span,
.admin-empty-small {
color: var(--fg-3);
font-size: 12px;
}
.admin-actions,
.admin-form-actions,
.admin-lead-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.admin-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px 180px;
gap: 12px;
margin-bottom: 16px;
}
.admin-view-switch {
display: inline-flex;
gap: 6px;
padding: 4px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-3);
margin-bottom: 16px;
}
.admin-view-btn {
padding: 8px 12px;
border-radius: var(--radius-xs);
color: var(--fg-2);
font-size: 13px;
font-weight: 700;
}
.admin-view-btn.active {
background: var(--bg-4);
color: var(--fg-0);
}
.admin-pipeline {
display: grid;
grid-template-columns: repeat(5, minmax(190px, 1fr));
gap: 12px;
overflow-x: auto;
padding-bottom: 8px;
}
.admin-pipeline-col {
min-width: 190px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-3);
padding: 12px;
}
.admin-pipeline-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.admin-pipeline-head strong {
color: var(--fg-0);
font-size: 14px;
}
.admin-pipeline-head span {
min-width: 24px;
height: 24px;
border-radius: var(--radius-pill);
background: var(--bg-4);
color: var(--fg-2);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
}
.admin-pipeline-cards {
display: flex;
flex-direction: column;
gap: 10px;
}
.admin-pipeline-card {
display: flex;
flex-direction: column;
gap: 7px;
padding: 12px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-2);
}
.admin-pipeline-card strong {
color: var(--fg-0);
font-size: 14px;
}
.admin-source-line {
color: var(--fg-3);
font-size: 12px;
}
.admin-pipeline-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-top: 4px;
}
.admin-pipeline-actions .btn {
padding: 7px 9px;
font-size: 12px;
}
.admin-pipeline-empty {
padding: 12px;
border: 1px dashed var(--border-default);
border-radius: var(--radius-sm);
color: var(--fg-3);
font-size: 12px;
}
.admin-lead-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.admin-lead-card {
display: grid;
grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 1.4fr) minmax(190px, 1fr);
gap: 14px;
align-items: start;
padding: 16px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-3);
}
.admin-lead-main,
.admin-lead-contact,
.admin-lead-meta {
display: flex;
flex-direction: column;
gap: 7px;
}
.admin-lead-main strong {
color: var(--fg-0);
font-size: 16px;
}
.admin-lead-contact a,
.admin-lead-contact span {
overflow-wrap: anywhere;
color: var(--fg-2);
font-size: 13px;
}
.admin-muted {
color: var(--fg-3);
font-size: 12px;
}
.admin-inline-input {
min-height: 38px;
padding-top: 8px;
padding-bottom: 8px;
}
.admin-notes {
grid-column: 1 / 3;
min-height: 76px;
}
.admin-attribution {
grid-column: 1 / -1;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.02);
}
.admin-attribution summary {
padding: 10px 12px;
color: var(--fg-2);
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.admin-attribution-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 0 12px 12px;
}
.admin-attribution-grid div {
min-width: 0;
}
.admin-attribution-grid span {
display: block;
color: var(--fg-3);
font-size: 11px;
text-transform: uppercase;
}
.admin-attribution-grid strong {
display: block;
overflow-wrap: anywhere;
color: var(--fg-1);
font-size: 12px;
font-weight: 600;
}
.admin-lead-actions {
justify-content: flex-end;
}
.admin-empty {
padding: 16px;
border: 1px dashed var(--border-default);
border-radius: var(--radius-sm);
color: var(--fg-3);
text-align: center;
}
.admin-post-layout {
display: grid;
grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.admin-post-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.admin-post-item {
width: 100%;
padding: 13px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-3);
text-align: left;
}
.admin-post-item:hover,
.admin-post-item.selected {
border-color: var(--border-brand);
background: var(--bg-4);
}
.admin-post-item strong {
display: block;
color: var(--fg-0);
font-size: 14px;
}
.admin-post-item span {
display: block;
margin-top: 7px;
color: var(--fg-3);
font-size: 12px;
}
.admin-status-pill {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: var(--radius-pill);
background: rgba(128,122,147,0.16);
color: var(--fg-2);
font-size: 11px;
font-weight: 700;
}
.admin-status-pill.published {
background: rgba(34,197,94,0.14);
color: #86efac;
}
.admin-content-input {
min-height: 280px;
}
.admin-seo-box {
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-3);
}
.admin-seo-head h3 {
font-size: var(--fs-lg);
}
.admin-seo-head p {
color: var(--fg-3);
font-size: 13px;
}
.admin-cover-preview {
width: min(100%, 360px);
aspect-ratio: 16 / 9;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
object-fit: cover;
background: var(--bg-2);
}
.admin-danger {
border-color: rgba(239,68,68,0.36);
color: #fca5a5;
}
.admin-danger:hover {
border-color: rgba(239,68,68,0.58);
background: rgba(239,68,68,0.08);
color: #fecaca;
}
@media (max-width: 980px) {
.admin-hero,
.admin-panel-head {
align-items: flex-start;
flex-direction: column;
}
.admin-session {
width: 100%;
}
.admin-stats {
grid-template-columns: repeat(2, 1fr);
}
.admin-dashboard-grid,
.admin-insights-grid {
grid-template-columns: 1fr;
}
.admin-toolbar,
.admin-post-layout {
grid-template-columns: 1fr;
}
.admin-pipeline {
grid-template-columns: repeat(5, 220px);
}
.admin-lead-card {
grid-template-columns: 1fr;
}
.admin-attribution-grid {
grid-template-columns: 1fr 1fr;
}
.admin-notes {
grid-column: auto;
}
.admin-lead-actions {
justify-content: flex-start;
}
}
@media (max-width: 560px) {
.admin-main {
padding-top: 112px;
}
.admin-hero h1 {
font-size: var(--fs-3xl);
}
.admin-panel {
padding: 18px;
}
.admin-stats {
grid-template-columns: 1fr;
}
.admin-tabs,
.admin-tab,
.admin-view-switch,
.admin-view-btn,
.admin-actions .btn,
.admin-form-actions .btn {
width: 100%;
}
.admin-tab,
.admin-view-btn,
.admin-actions .btn,
.admin-form-actions .btn {
justify-content: center;
}
.admin-attribution-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
THANKS
============================================================ */
.thanks { padding-top: 160px; }
.thanks-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.thanks-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(34,197,94,0.12);
border: 1px solid rgba(34,197,94,0.4);
color: var(--success);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 60px rgba(34,197,94,0.25);
}
.thanks h1 { font-size: clamp(36px, 5vw, 56px); }
.thanks p { color: var(--fg-2); max-width: 50ch; }
.thanks-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-top: 12px;
}
.thanks-extra {
width: 100%;
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
gap: 16px;
}
.thanks-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.thanks-link {
background: var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
padding: 18px;
display: flex;
gap: 14px;
align-items: flex-start;
text-align: left;
transition: all var(--dur-base);
text-decoration: none;
}
.thanks-link:hover {
border-color: var(--border-brand);
transform: translateY(-1px);
}
.thanks-link-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: rgba(154,59,216,0.12);
border: 1px solid rgba(154,59,216,0.3);
color: var(--brand-primary-300);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.thanks-link strong {
color: var(--fg-0);
display: block;
font-size: 15px;
margin-bottom: 2px;
}
.thanks-link span { color: var(--fg-2); font-size: 13px; }
@media (max-width: 600px) { .thanks-links { grid-template-columns: 1fr; } }
/* ============================================================
REVEAL ANIMATIONS
============================================================ */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity var(--dur-hero) var(--ease-out), transform var(--dur-hero) var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
main { padding-top: 0; min-height: 100vh; }
/* ============================================================
CALCULADORA DE CRESCIMENTO (calculadora.html)
============================================================ */
.calc-hero { padding: 140px 0 40px; text-align: center; }
.calc-hero h1 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 16px; }
.calc-hero p { color: var(--fg-2); max-width: 580px; margin: 0 auto; font-size: var(--fs-md); }
.calc-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005)), var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-2xl);
padding: 48px;
position: relative;
overflow: hidden;
}
.calc-wrap::before {
content: "";
position: absolute;
top: -100px; right: -100px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(154,59,216,0.18), transparent 70%);
pointer-events: none;
}
.calc-form { display: flex; flex-direction: column; gap: 18px; position: relative; min-width: 0; }
.calc-form h2 { font-size: 1.5rem; margin-bottom: 8px; }
.calc-form .field-help { font-size: 12px; color: var(--fg-3); margin-top: 4px; }
.calc-result {
background: linear-gradient(135deg, rgba(92,6,140,0.25), rgba(154,59,216,0.08));
border: 1px solid rgba(154,59,216,0.4);
border-radius: var(--radius-xl);
padding: 32px;
position: relative;
display: flex; flex-direction: column; gap: 18px;
min-width: 0;
}
.calc-result-eyebrow {
font-family: var(--font-display); font-size: 11px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--brand-primary-300);
}
.calc-big {
font-family: var(--font-display);
font-size: clamp(40px, 5vw, 64px); font-weight: 700;
letter-spacing: -0.03em; line-height: 1;
background: linear-gradient(135deg, #fff, #d6a8f0);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.calc-big-label { color: var(--fg-2); font-size: 14px; margin-top: 4px; }
.calc-rows {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
padding-top: 18px; border-top: 1px solid var(--border-subtle);
}
.calc-row strong {
font-family: var(--font-display); font-size: 22px;
color: var(--fg-0); display: block;
}
.calc-row span { font-size: 13px; color: var(--fg-3); }
.calc-disclaimer { font-size: 12px; color: var(--fg-3); line-height: 1.5; }
.calc-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.calc-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: var(--bg-4);
border-radius: 2px;
outline: none;
margin-top: 12px;
}
.calc-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px; height: 22px;
background: var(--brand-primary-400);
border-radius: 50%;
cursor: pointer;
border: 3px solid var(--bg-0);
box-shadow: 0 0 16px rgba(154,59,216,0.6);
}
.calc-range::-moz-range-thumb {
width: 22px; height: 22px;
background: var(--brand-primary-400);
border-radius: 50%;
cursor: pointer;
border: 3px solid var(--bg-0);
}
.calc-range-label {
display: flex; justify-content: space-between;
font-size: 13px; color: var(--fg-2);
margin-top: 6px;
gap: 10px;
}
.calc-range-label span { min-width: 0; }
.calc-range-label span:nth-child(2) { text-align: center; overflow-wrap: anywhere; }
.calc-range-value {
color: var(--brand-primary-300);
font-weight: 600;
font-family: var(--font-mono);
}
@media (max-width: 880px) {
.calc-wrap { grid-template-columns: 1fr; padding: 28px; gap: 32px; }
.calc-rows { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
.calc-hero {
padding: 122px 0 28px;
}
.calc-hero h1 {
font-size: clamp(32px, 10vw, 42px);
}
.calc-hero p {
max-width: 100%;
font-size: 15px;
}
.calc-wrap {
width: 100%;
max-width: 100%;
padding: 20px;
gap: 24px;
border-radius: var(--radius-lg);
}
.calc-result {
padding: 22px;
border-radius: var(--radius-lg);
}
.calc-big {
font-size: clamp(34px, 11vw, 46px);
overflow-wrap: anywhere;
}
.calc-range-label {
align-items: flex-start;
gap: 8px;
font-size: 11px;
line-height: 1.35;
}
.calc-range-label span:first-child,
.calc-range-label span:last-child {
flex: 0 0 auto;
}
.calc-range-label span:nth-child(2) {
flex: 1 1 auto;
}
.calc-cta .btn {
width: 100%;
justify-content: center;
white-space: normal;
text-align: center;
}
}
@media (max-width: 380px) {
.calc-wrap { padding: 16px; }
.calc-result { padding: 18px; }
.calc-range-label { gap: 6px; font-size: 10px; }
}
/* ============================================================
QUIZ DE QUALIFICACAO (quiz.html)
============================================================ */
.quiz-shell { max-width: 720px; margin: 0 auto; padding-top: 140px; padding-bottom: 80px; }
.quiz-progress {
height: 3px; background: var(--bg-4); border-radius: 99px;
overflow: hidden; margin-bottom: 32px;
}
.quiz-progress-bar {
height: 100%; background: var(--grad-brand);
border-radius: 99px;
transition: width 0.4s var(--ease-out);
}
.quiz-step-info {
display: flex; justify-content: space-between;
font-size: 12px; color: var(--fg-3);
text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
margin-bottom: 12px;
}
.quiz-step {
background: var(--bg-2); border: 1px solid var(--border-default);
border-radius: var(--radius-2xl); padding: 40px;
display: none; flex-direction: column; gap: 20px;
}
.quiz-step.active {
display: flex;
animation: quizFadeIn 0.4s var(--ease-out);
}
@keyframes quizFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.quiz-step h2 { font-size: clamp(24px, 3vw, 32px); }
.quiz-step p { color: var(--fg-2); font-size: 15px; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-option {
background: var(--bg-3); border: 1px solid var(--border-default);
border-radius: var(--radius-md); padding: 18px 20px;
cursor: pointer; transition: all var(--dur-base) var(--ease-out);
display: flex; align-items: center; gap: 12px;
text-align: left; color: var(--fg-1);
font-family: var(--font-body); font-size: 15px; font-weight: 500;
width: 100%;
}
.quiz-option:hover {
border-color: var(--border-brand);
background: rgba(154,59,216,0.08);
}
.quiz-option.selected {
border-color: var(--brand-primary-400);
background: rgba(154,59,216,0.12);
box-shadow: 0 0 0 3px rgba(154,59,216,0.18);
}
.quiz-option-mark {
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid var(--border-strong);
flex-shrink: 0; position: relative;
}
.quiz-option.selected .quiz-option-mark {
border-color: var(--brand-primary-400);
background: var(--brand-primary-400);
}
.quiz-option.selected .quiz-option-mark::after {
content: ""; position: absolute;
top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 6px; height: 6px; background: #fff; border-radius: 50%;
}
.quiz-actions {
display: flex; justify-content: space-between;
margin-top: 12px; gap: 12px;
}
.quiz-summary {
background: var(--bg-3); border: 1px solid var(--border-default);
border-radius: var(--radius-md); padding: 16px 18px;
display: flex; flex-direction: column; gap: 6px;
font-size: 14px; color: var(--fg-2);
}
.quiz-summary strong { color: var(--fg-0); }
@media (max-width: 600px) {
.quiz-options { grid-template-columns: 1fr; }
.quiz-step { padding: 28px 24px; }
}
/* ============================================================
CENTRO DE RECURSOS (recursos.html)
============================================================ */
.resource-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.resource-card {
background: var(--bg-2); border: 1px solid var(--border-default);
border-radius: var(--radius-xl); padding: 28px;
display: flex; flex-direction: column; gap: 14px;
transition: all var(--dur-base) var(--ease-out);
position: relative; overflow: hidden;
}
.resource-card:hover {
transform: translateY(-2px);
border-color: var(--border-brand);
box-shadow: 0 16px 48px rgba(92,6,140,0.18);
}
.resource-icon {
width: 48px; height: 48px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, rgba(92,6,140,0.3), rgba(154,59,216,0.1));
border: 1px solid rgba(154,59,216,0.3);
display: inline-flex; align-items: center; justify-content: center;
color: var(--brand-primary-300);
}
.resource-tag {
display: inline-block; padding: 3px 10px;
background: rgba(154,59,216,0.12);
border: 1px solid rgba(154,59,216,0.3);
border-radius: 9999px; color: var(--brand-primary-300);
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em;
width: fit-content;
}
.resource-card h3 { font-size: 18px; }
.resource-card p { color: var(--fg-2); font-size: 14px; line-height: 1.5; flex: 1; }
.resource-cta {
display: inline-flex; align-items: center; gap: 6px;
color: var(--brand-primary-300); font-size: 14px; font-weight: 600;
margin-top: auto;
}
@media (max-width: 880px) { .resource-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .resource-grid { grid-template-columns: 1fr; } }
/* ============================================================
CAL.COM modal
============================================================ */
.cal-modal {
position: fixed; inset: 0;
background: rgba(7,6,10,0.85);
backdrop-filter: blur(8px);
z-index: 80;
display: none; align-items: center; justify-content: center;
padding: 20px;
}
.cal-modal.open { display: flex; }
.cal-modal-inner {
background: var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-2xl);
width: 100%; max-width: 900px; height: 80vh;
position: relative; overflow: hidden;
}
.cal-modal-close {
position: absolute; top: 14px; right: 14px;
width: 36px; height: 36px;
background: rgba(0,0,0,0.5); border-radius: 50%;
color: #fff; display: inline-flex; align-items: center; justify-content: center;
z-index: 2; cursor: pointer;
transition: background var(--dur-base);
border: none;
}
.cal-modal-close:hover { background: rgba(0,0,0,0.8); }
.cal-modal iframe {
width: 100%; height: 100%; border: 0;
background: var(--bg-2);
}
/* ============================================================
KANBAN no admin
============================================================ */
.kanban-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
margin-top: 16px;
}
.kanban-col {
background: var(--bg-2); border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
display: flex; flex-direction: column;
min-height: 400px;
overflow: hidden;
transition: background var(--dur-base);
}
.kanban-col.drop-target {
background: rgba(154,59,216,0.1);
border-color: var(--brand-primary-400);
}
.kanban-col-head {
padding: 14px 16px;
border-bottom: 1px solid var(--border-subtle);
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-display); font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--fg-2);
}
.kanban-col-count {
background: var(--bg-3); padding: 2px 10px;
border-radius: 9999px; font-size: 11px;
color: var(--brand-primary-300);
border: 1px solid rgba(154,59,216,0.3);
letter-spacing: 0;
}
.kanban-cards {
padding: 10px; display: flex; flex-direction: column; gap: 8px;
flex: 1; overflow-y: auto; max-height: 600px;
}
.kanban-card {
background: var(--bg-3); border: 1px solid var(--border-default);
border-radius: var(--radius-md); padding: 12px;
cursor: grab; user-select: none;
transition: all var(--dur-fast);
display: flex; flex-direction: column; gap: 6px;
}
.kanban-card:hover {
border-color: var(--border-brand);
transform: translateY(-1px);
}
.kanban-card.dragging { opacity: 0.4; cursor: grabbing; }
.kanban-card-name { font-weight: 600; font-size: 13px; color: var(--fg-0); }
.kanban-card-meta {
display: flex; gap: 6px; flex-wrap: wrap;
font-size: 11px; color: var(--fg-3);
}
.kanban-card-source {
background: rgba(154,59,216,0.12);
color: var(--brand-primary-300);
padding: 1px 8px; border-radius: 9999px;
font-size: 10px; font-weight: 600;
border: 1px solid rgba(154,59,216,0.3);
}
.kanban-card-actions { display: flex; gap: 6px; margin-top: 4px; }
.kanban-card-actions a {
font-size: 11px; color: var(--brand-primary-300);
text-decoration: none; font-weight: 500;
}
.kanban-card-actions a:hover { text-decoration: underline; }
@media (max-width: 1100px) { .kanban-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kanban-grid { grid-template-columns: 1fr; } }
/* ============================================================
POST READER (post.html / posts/.html)
============================================================ */
.post-reader-content h2 { font-size: 1.75rem; margin-top: 32px; margin-bottom: 12px; }
.post-reader-content h3 { font-size: 1.375rem; margin-top: 28px; margin-bottom: 10px; }
.post-reader-content p {
color: var(--fg-1); font-size: 17px; line-height: 1.75;
margin-bottom: 18px;
}
.post-reader-content a {
color: var(--brand-primary-300);
border-bottom: 1px solid rgba(154,59,216,0.3);
transition: border-color var(--dur-base);
}
.post-reader-content a:hover { border-color: var(--brand-primary-300); }
.post-reader-content ul, .post-reader-content ol {
list-style: revert; padding-left: 24px; margin-bottom: 18px;
color: var(--fg-1); line-height: 1.7;
}
.post-reader-content li { margin-bottom: 6px; }
.post-reader-content blockquote {
border-left: 3px solid var(--brand-primary-400);
padding: 12px 20px; margin: 24px 0;
color: var(--fg-2); font-style: italic;
background: var(--bg-2); border-radius: 0 8px 8px 0;
}
.post-reader-content code {
background: var(--bg-4); padding: 2px 6px;
border-radius: 4px; font-size: 0.92em;
color: var(--brand-primary-200);
font-family: var(--font-mono);
}
.post-reader-content pre {
background: var(--bg-0); border: 1px solid var(--border-subtle);
padding: 16px; border-radius: var(--radius-md);
overflow-x: auto; margin: 24px 0;
}
.post-reader-content pre code { background: transparent; padding: 0; color: var(--fg-1); }
.post-reader-content img { border-radius: var(--radius-md); margin: 24px 0; }
.post-reader-content strong { color: var(--fg-0); font-weight: 700; }
/* ============================================================
SERVICES CONVERSION PAGES
============================================================ */
.services-conversion-hero {
padding: 152px 0 72px;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 16% 12%, rgba(56,189,248,0.18), transparent 30%),
radial-gradient(circle at 78% 8%, rgba(34,197,94,0.12), transparent 26%),
linear-gradient(180deg, #07060a 0%, #0c0a14 100%);
}
.services-conversion-hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(56,189,248,0.45), rgba(154,59,216,0.45), transparent);
}
.services-conversion-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
gap: clamp(28px, 5vw, 56px);
align-items: center;
}
.services-conversion-grid > * { min-width: 0; }
.services-conversion-hero h1 {
margin-top: 18px;
max-width: 900px;
font-size: clamp(42px, 5.2vw, 76px);
line-height: 0.98;
letter-spacing: var(--tracking-tight);
}
.services-conversion-hero p {
max-width: 68ch;
margin-top: 18px;
color: var(--fg-2);
font-size: var(--fs-md);
}
.hero-proof-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 24px;
}
.hero-proof-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid rgba(255,255,255,0.11);
border-radius: 8px;
background: rgba(255,255,255,0.04);
color: var(--fg-2);
font-size: 13px;
}
.hero-proof-pill strong { color: var(--fg-0); }
.services-lab {
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
#10101a;
box-shadow: var(--shadow-elevated);
padding: 18px;
overflow: hidden;
min-width: 0;
}
.services-lab-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-subtle);
}
.services-lab-brand {
display: flex;
align-items: center;
gap: 10px;
color: var(--fg-0);
font-weight: 800;
}
.services-lab-brand img {
width: 34px;
height: 34px;
object-fit: contain;
}
.services-lab-live {
padding: 6px 10px;
border-radius: 8px;
background: rgba(34,197,94,0.12);
color: #86efac;
font-size: 12px;
font-weight: 800;
}
.services-lab-flow {
display: grid;
gap: 10px;
margin-top: 16px;
}
.lab-flow-row {
display: grid;
grid-template-columns: 96px 1fr auto;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 12px;
border: 1px solid rgba(255,255,255,0.09);
border-radius: 8px;
background: rgba(255,255,255,0.035);
}
.lab-flow-row span:first-child {
color: var(--fg-3);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.lab-flow-row strong { color: var(--fg-0); }
.lab-flow-row em {
color: #7dd3fc;
font-style: normal;
font-size: 13px;
font-weight: 800;
overflow-wrap: anywhere;
}
.services-lab-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 16px;
}
.flow-band { padding: 56px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); background: rgba(255,255,255,0.015); }
.flow-band-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 480px);
gap: clamp(28px, 5vw, 56px);
align-items: center;
}
.flow-band-grid > * { min-width: 0; }
.flow-band-copy h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; letter-spacing: var(--tracking-tight); margin-top: 12px; }
.flow-band-copy .section-lead { margin-top: 14px; max-width: 48ch; }
@media (max-width: 900px) {
.flow-band-grid { grid-template-columns: 1fr; }
}
.lab-metric {
padding: 14px;
border: 1px solid rgba(255,255,255,0.09);
border-radius: 8px;
background: #0b0b12;
}
.lab-metric strong {
display: block;
color: var(--fg-0);
font-size: 22px;
line-height: 1.05;
}
.lab-metric span {
display: block;
margin-top: 5px;
color: var(--fg-3);
font-size: 12px;
}
.service-nav-strip {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.service-nav-strip a {
padding: 9px 12px;
border: 1px solid var(--border-default);
border-radius: 8px;
background: rgba(255,255,255,0.035);
color: var(--fg-2);
font-size: 13px;
font-weight: 700;
}
.service-nav-strip a:hover {
color: #fff;
border-color: rgba(56,189,248,0.45);
background: rgba(56,189,248,0.08);
}
.offer-ladder {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.offer-step {
position: relative;
min-height: 190px;
padding: 22px;
border: 1px solid var(--border-default);
border-radius: 8px;
background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
}
.offer-step::before {
content: attr(data-step);
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin-bottom: 18px;
border-radius: 8px;
background: rgba(56,189,248,0.14);
color: #7dd3fc;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 800;
}
.offer-step:nth-child(2)::before { background: rgba(245,158,11,0.14); color: #fcd34d; }
.offer-step:nth-child(3)::before { background: rgba(34,197,94,0.14); color: #86efac; }
.offer-step h3 { font-size: 18px; }
.offer-step p {
margin-top: 8px;
color: var(--fg-2);
font-size: 14px;
line-height: 1.55;
}
.product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.product-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
padding: 22px;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
var(--bg-2);
box-shadow: var(--shadow-card);
transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
overflow: hidden;
}
.product-card:hover {
transform: translateY(-2px);
border-color: rgba(56,189,248,0.35);
box-shadow: 0 18px 56px rgba(0,0,0,0.42), 0 0 28px rgba(56,189,248,0.08);
}
.product-card.featured {
border-color: rgba(34,197,94,0.42);
background:
linear-gradient(135deg, rgba(34,197,94,0.13), rgba(56,189,248,0.08) 45%, rgba(255,255,255,0.025)),
var(--bg-2);
}
.product-card.accent {
border-color: rgba(245,158,11,0.35);
}
.product-kicker {
display: inline-flex;
width: fit-content;
padding: 5px 9px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.12);
color: #7dd3fc;
background: rgba(56,189,248,0.08);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.product-card.featured .product-kicker { color: #86efac; background: rgba(34,197,94,0.1); }
.product-card.accent .product-kicker { color: #fcd34d; background: rgba(245,158,11,0.1); }
.product-card h3 {
margin-top: 16px;
font-size: 22px;
line-height: 1.15;
}
.product-desc {
margin-top: 10px;
color: var(--fg-2);
font-size: 14px;
line-height: 1.55;
}
.product-price {
margin-top: 18px;
color: #fff;
font-family: var(--font-display);
font-size: 30px;
line-height: 1;
letter-spacing: var(--tracking-snug);
}
.product-price small {
color: var(--fg-3);
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
}
.product-includes {
display: grid;
gap: 9px;
margin: 18px 0 22px;
}
.product-includes li {
position: relative;
padding-left: 20px;
color: var(--fg-2);
font-size: 13px;
line-height: 1.45;
}
.product-includes li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 7px;
height: 7px;
border-radius: 50%;
background: #7dd3fc;
box-shadow: 0 0 0 4px rgba(56,189,248,0.08);
}
.product-card.featured .product-includes li::before { background: #86efac; box-shadow: 0 0 0 4px rgba(34,197,94,0.08); }
.product-card.accent .product-includes li::before { background: #fcd34d; box-shadow: 0 0 0 4px rgba(245,158,11,0.08); }
.product-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: auto;
}
.product-actions .btn { min-height: 42px; padding-inline: 14px; }
.machine-flow {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.machine-step {
min-height: 180px;
padding: 18px;
border: 1px solid var(--border-default);
border-radius: 8px;
background: rgba(255,255,255,0.035);
}
.machine-step span {
display: inline-flex;
color: var(--fg-3);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 800;
}
.machine-step h3 {
margin-top: 28px;
font-size: 17px;
}
.machine-step p {
margin-top: 8px;
color: var(--fg-2);
font-size: 13px;
line-height: 1.5;
}
.choice-band {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 16px;
align-items: stretch;
}
.choice-copy,
.choice-card {
border: 1px solid var(--border-default);
border-radius: 8px;
background: var(--bg-2);
padding: 24px;
}
.choice-copy h2 {
font-size: clamp(28px, 3vw, 42px);
}
.choice-copy p {
margin-top: 12px;
color: var(--fg-2);
}
.choice-card {
display: grid;
gap: 14px;
background:
linear-gradient(135deg, rgba(92,6,140,0.18), rgba(56,189,248,0.06)),
var(--bg-2);
}
.choice-line {
display: grid;
grid-template-columns: 118px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
background: rgba(0,0,0,0.14);
}
.choice-line span:first-child {
color: var(--fg-3);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.choice-line strong { color: var(--fg-0); }
.choice-line em {
color: #86efac;
font-style: normal;
font-weight: 800;
font-size: 13px;
}
.service-detail-band {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.service-detail-card {
padding: 22px;
border: 1px solid var(--border-default);
border-radius: 8px;
background: var(--bg-2);
}
.service-detail-card h3 { font-size: 18px; }
.service-detail-card p {
margin-top: 9px;
color: var(--fg-2);
font-size: 14px;
line-height: 1.55;
}
.price-panel {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 16px;
}
.price-card {
padding: 24px;
border: 1px solid rgba(34,197,94,0.3);
border-radius: 8px;
background:
linear-gradient(135deg, rgba(34,197,94,0.13), rgba(255,255,255,0.025)),
var(--bg-2);
}
.price-card span {
color: #86efac;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.09em;
}
.price-card strong {
display: block;
margin-top: 12px;
color: #fff;
font-family: var(--font-display);
font-size: clamp(34px, 4vw, 54px);
line-height: 1;
}
.price-card p {
margin-top: 12px;
color: var(--fg-2);
}
.next-step-list {
display: grid;
gap: 10px;
}
.next-step-list li {
padding: 14px 16px;
border: 1px solid var(--border-default);
border-radius: 8px;
background: rgba(255,255,255,0.035);
color: var(--fg-2);
font-size: 14px;
}
.next-step-list strong { color: var(--fg-0); }
.bundle-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.bundle-card {
padding: 24px;
border: 1px solid var(--border-default);
border-radius: 8px;
background: var(--bg-2);
}
.bundle-card.featured {
border-color: rgba(34,197,94,0.35);
background: linear-gradient(180deg, rgba(34,197,94,0.1), rgba(255,255,255,0.02));
}
.bundle-card h3 { font-size: 22px; }
.bundle-price {
display: block;
margin-top: 8px;
color: #fff;
font-family: var(--font-display);
font-size: 30px;
}
.bundle-card p {
margin-top: 10px;
color: var(--fg-2);
font-size: 14px;
line-height: 1.55;
}
.bundle-card ul {
display: grid;
gap: 8px;
margin-top: 16px;
color: var(--fg-2);
font-size: 13px;
}
.bundle-card li {
position: relative;
padding-left: 18px;
}
.bundle-card li::before {
content: "";
position: absolute;
left: 0;
top: 0.65em;
width: 6px;
height: 6px;
border-radius: 50%;
background: #86efac;
}
.negative-list li::before { background: var(--fg-4); box-shadow: none; }
.negative-list li { color: var(--fg-3); }
@media (max-width: 1020px) {
.services-conversion-grid,
.choice-band,
.price-panel {
grid-template-columns: 1fr;
}
.product-grid,
.offer-ladder,
.service-detail-band,
.bundle-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.machine-flow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.services-conversion-hero { padding-top: 128px; }
.services-conversion-hero h1 {
max-width: calc(100vw - 40px);
font-size: clamp(36px, 10vw, 42px);
}
.services-conversion-hero p {
width: min(100%, 24ch);
max-width: 24ch;
}
.services-conversion-hero .detail-hero-actions,
.services-lab {
width: min(100%, 330px);
max-width: 330px;
}
.services-conversion-hero .detail-hero-actions .btn {
width: 100%;
max-width: 100%;
}
.product-grid,
.offer-ladder,
.service-detail-band,
.bundle-grid,
.machine-flow,
.services-lab-metrics {
grid-template-columns: 1fr;
}
.lab-flow-row,
.choice-line {
grid-template-columns: 1fr;
}
.product-card,
.offer-step,
.choice-copy,
.choice-card,
.service-detail-card,
.price-card,
.bundle-card {
padding: 18px;
}
}
/* ============================================================
GLOBAL STAR FIELD
============================================================ */
body::before,
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
}
body::before {
z-index: -1;
opacity: 0.46;
background-repeat: repeat-y;
background-size: 100vw 100vh;
background-image:
radial-gradient(circle at 8% 14%, rgba(255,255,255,0.34) 0 1px, transparent 1.7px),
radial-gradient(circle at 21% 43%, rgba(255,255,255,0.30) 0 1px, transparent 1.7px),
radial-gradient(circle at 34% 76%, rgba(255,255,255,0.28) 0 1px, transparent 1.7px),
radial-gradient(circle at 47% 24%, rgba(255,255,255,0.32) 0 1px, transparent 1.7px),
radial-gradient(circle at 63% 61%, rgba(255,255,255,0.28) 0 1px, transparent 1.7px),
radial-gradient(circle at 79% 35%, rgba(255,255,255,0.34) 0 1px, transparent 1.7px),
radial-gradient(circle at 92% 82%, rgba(255,255,255,0.28) 0 1px, transparent 1.7px),
radial-gradient(circle at 14% 88%, rgba(255,255,255,0.30) 0 1px, transparent 1.7px),
radial-gradient(circle at 29% 9%, rgba(255,255,255,0.26) 0 1px, transparent 1.7px),
radial-gradient(circle at 56% 91%, rgba(255,255,255,0.30) 0 1px, transparent 1.7px),
radial-gradient(circle at 72% 12%, rgba(255,255,255,0.28) 0 1px, transparent 1.7px),
radial-gradient(circle at 88% 58%, rgba(255,255,255,0.32) 0 1px, transparent 1.7px),
radial-gradient(circle at 18% 28%, rgba(214,168,240,0.24) 0 1.4px, transparent 2.4px),
radial-gradient(circle at 39% 52%, rgba(214,168,240,0.22) 0 1.4px, transparent 2.4px),
radial-gradient(circle at 52% 18%, rgba(214,168,240,0.24) 0 1.4px, transparent 2.4px),
radial-gradient(circle at 67% 79%, rgba(214,168,240,0.22) 0 1.4px, transparent 2.4px),
radial-gradient(circle at 83% 23%, rgba(214,168,240,0.24) 0 1.4px, transparent 2.4px),
radial-gradient(circle at 96% 68%, rgba(214,168,240,0.22) 0 1.4px, transparent 2.4px);
transform: translate3d(0, 0, 0);
}
body::after {
display: none;
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
body::before {
inset: 0 0 -100vh;
animation: star-field-drift 180s linear infinite;
will-change: transform;
}
}
@media (prefers-reduced-motion: reduce) {
body::before {
animation: none;
transform: none;
}
}
@media (max-width: 768px) {
body::before {
opacity: 0.34;
}
body::after {
display: none;
}
}
@keyframes star-field-drift {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, -100vh, 0); }
}