/* ============================================================
MyCustomerClub — Master Stylesheet
Location: /css/styles.css
Used by: index.php, clientregister.php, register-complete.php,
client portal, advocate portal, admin site
EDITING GUIDE:
── Section 1: CSS variables (colors, fonts, spacing)
── Section 2: Reset & base
── Section 3: Background atmosphere
── Section 4: Utility classes (container, buttons, tags, etc.)
── Section 5: Navigation
── Section 6: Typography helpers
── Section 7: Form elements (inputs, selects, labels)
── Section 8: Cards
── Section 9: Marketing page sections (hero, stats, how, compare, pricing, faq, signup)
── Section 10: ROI calculator (index.php)
── Section 11: Registration wizard (clientregister.php)
── Section 12: Thank-you / completion page
── Section 13: Footer
── Section 14: Responsive breakpoints
── Section 15: Animations & scroll reveal
============================================================ */
/* ============================================================
SECTION 1 — CSS VARIABLES
Change colors, fonts, or spacing here once for the whole site
============================================================ */
:root {
/* ── FONT NOTE ─────────────────────────────────────────────────
Google Fonts loads Syne + DM Sans (see the in each page's ).
The variables below currently use Montserrat to match your original design.
To switch to Syne headings + DM Sans body, change the values below and
update the Google Fonts in each page to include Montserrat,
OR just change the values here to 'Syne' and 'DM Sans' to use what's loaded.
─────────────────────────────────────────────────────────────── */
/* ── Brand colors ── */
--orange: #ff6b35;
--orange-2: #f7931e;
--amber: #fbbf24;
--green: #22c55e;
--green-light: #4ade80;
--red: #ef4444;
--blue-acc: #63b3ed;
/* ── Background palette ── */
--navy: #0e1628;
--navy-mid: #132040;
--navy-light: #1a2d50;
--navy-card: #1a2845;
--card-bg: rgba(255,255,255,0.03);
/* ── Text ── */
--white: #ffffff;
--off-white: #f8f7f4;
--text-muted: #94a3b8;
--text-faint: rgba(255,255,255,0.25);
/* ── Borders ── */
--border: rgba(255,255,255,0.08);
--border-hi: rgba(255,255,255,0.14);
/* ── Typography ── */
--font-head: 'Montserrat', sans-serif; /* Change to 'Syne' if you prefer Syne headings */
--font-body: 'Montserrat', sans-serif; /* Change to 'DM Sans' if you prefer DM Sans body */
--font-mono: 'DM Mono', monospace;
/* ── Radius ── */
--radius: 16px;
--radius-sm: 10px;
--radius-lg: 24px;
}
/* ============================================================
SECTION 2 — RESET & BASE
============================================================ */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--navy);
color: var(--white);
overflow-x: hidden;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
/* ============================================================
SECTION 3 — BACKGROUND ATMOSPHERE
============================================================ */
.bg-mesh {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 80% 50% at 10% 10%, rgba(255,107,53,0.07) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 90% 80%, rgba(99,179,237,0.06) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 50% 50%, rgba(19,32,64,0.8) 0%, transparent 100%);
}
.bg-dots {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 24px 24px;
}
/* ============================================================
SECTION 4 — UTILITY CLASSES
============================================================ */
/* Layout */
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
position: relative;
z-index: 2;
}
.page-wrap {
position: relative;
z-index: 2;
max-width: 1100px;
margin: 0 auto;
padding: 32px 24px 80px;
}
/* Tag / pill label */
.tag {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(255,107,53,0.12);
border: 1px solid rgba(255,107,53,0.28);
border-radius: 30px;
padding: 6px 16px;
font-family: var(--font-head);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--orange);
}
/* Gradient text */
.gradient-text {
background: linear-gradient(135deg, var(--orange), var(--amber));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: var(--radius-sm);
font-family: var(--font-head);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
border: none;
transition: all 0.2s ease;
}
.btn-primary {
background: linear-gradient(135deg, var(--orange), var(--orange-2));
color: #fff;
box-shadow: 0 4px 24px rgba(255,107,53,0.35);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(255,107,53,0.45);
}
.btn-primary:active { transform: scale(0.99); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-outline {
background: transparent;
color: rgba(255,255,255,0.7);
border: 1px solid rgba(255,255,255,0.2);
}
.btn-outline:hover {
border-color: var(--orange);
color: var(--orange);
}
.btn-ghost {
background: none;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-muted);
font-family: var(--font-head);
font-weight: 700;
font-size: 13px;
padding: 10px 18px;
transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.25); color: var(--white); }
.btn-large {
padding: 18px 36px;
font-size: 14px;
}
/* Trust badges */
.trust-badges {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.trust-badge {
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
color: rgba(255,255,255,0.35);
}
.trust-badge span { font-size: 14px; }
/* Check / cross icons */
.check { color: var(--green-light); font-size: 16px; }
.cross { color: #f87171; font-size: 16px; }
.partial { color: var(--amber); font-size: 13px; }
/* ============================================================
SECTION 5 — NAVIGATION
============================================================ */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(14,22,40,0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
max-width: 1140px;
margin: 0 auto;
}
.nav-logo {
font-family: var(--font-head);
font-weight: 800;
font-size: 20px;
color: var(--white);
letter-spacing: -0.02em;
}
.nav-logo span { color: var(--orange); }
.nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
}
.nav-links a {
font-size: 12px;
color: var(--text-muted);
font-weight: 400;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--white); }
.nav-cta {
display: flex;
align-items: center;
gap: 12px;
}
/* Registration page top bar */
.top-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 28px;
border-bottom: 1px solid var(--border);
margin-bottom: 36px;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-head);
font-weight: 800;
font-size: 18px;
color: var(--white);
}
.logo-mark {
width: 36px; height: 36px;
border-radius: 9px;
background: linear-gradient(135deg, var(--orange), var(--orange-2));
display: flex; align-items: center; justify-content: center;
font-size: 18px;
}
.logo span { color: var(--orange); }
.top-bar-right { font-size: 13px; color: var(--text-muted); }
.top-bar-right a { color: var(--orange); }
/* ============================================================
SECTION 6 — TYPOGRAPHY HELPERS
============================================================ */
.section-heading {
font-family: var(--font-head);
font-weight: 800;
font-size: clamp(32px, 5vw, 52px);
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--white);
}
.section-sub {
font-size: 17px;
color: var(--text-muted);
font-weight: 300;
line-height: 1.7;
max-width: 600px;
}
/* ============================================================
SECTION 7 — FORM ELEMENTS
============================================================ */
input[type=text], input[type=email], input[type=tel],
input[type=number], input[type=password], select, textarea {
width: 100%;
padding: 12px 15px;
background: rgba(255,255,255,0.05);
border: 1.5px solid rgba(255,255,255,0.1);
border-radius: var(--radius-sm);
color: var(--white);
font-family: var(--font-body);
font-size: 15px;
outline: none;
transition: border-color 0.2s, background 0.2s;
-webkit-appearance: none;
}
input:focus, select:focus, textarea:focus {
border-color: var(--orange);
background: rgba(255,107,53,0.05);
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.2); }
select option { background: var(--navy-card); color: var(--white); }
input.error-field, select.error-field { border-color: var(--red) !important; }
/* Field layout helpers */
.field-row { display: grid; gap: 16px; margin-bottom: 16px; }
.field-row.cols-2 { grid-template-columns: 1fr 1fr; }
.field-row.cols-3 { grid-template-columns: 80px 1fr 100px; }
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-label {
font-family: var(--font-head);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
}
.field-label .req { color: var(--orange); margin-left: 2px; }
/* Section divider label */
.section-label {
font-family: var(--font-head);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin: 24px 0 14px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.section-label:first-child { border-top: none; padding-top: 0; margin-top: 0; }
/* Error box */
.error-box {
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.25);
border-radius: var(--radius-sm);
padding: 14px 16px;
margin-bottom: 20px;
}
.error-box ul { padding-left: 18px; }
.error-box li { font-size: 13px; color: #fca5a5; line-height: 1.8; }
.error-box a { color: var(--orange); }
/* Terms checkbox */
.terms-check {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 20px;
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.6;
}
.terms-check input[type=checkbox] {
accent-color: var(--orange);
width: 16px; height: 16px;
flex-shrink: 0;
margin-top: 2px;
}
.terms-check a { color: var(--orange); }
/* Submit note */
.submit-note {
font-size: 11px;
color: rgba(255,255,255,0.25);
text-align: center;
margin-top: 12px;
line-height: 1.5;
}
/* ============================================================
SECTION 8 — CARDS
============================================================ */
.form-card {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.form-card-header {
padding: 26px 30px 22px;
border-bottom: 1px solid var(--border);
background: rgba(255,255,255,0.02);
}
.form-card-title {
font-family: var(--font-head);
font-weight: 800;
font-size: 21px;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.form-card-sub { font-size: 13.5px; color: var(--text-muted); font-weight: 300; }
.form-card-body { padding: 28px 30px; }
/* Order / summary card */
.order-card {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
position: sticky;
top: 24px;
}
.order-card-header {
padding: 20px 22px 16px;
border-bottom: 1px solid var(--border);
background: rgba(255,255,255,0.02);
font-family: var(--font-head);
font-weight: 700;
font-size: 13px;
color: rgba(255,255,255,0.5);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.order-card-body { padding: 20px 22px; }
.order-line {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: var(--text-muted);
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.order-line:last-child { border-bottom: none; }
.order-line.total {
color: var(--white);
font-weight: 600;
font-size: 14px;
padding-top: 12px;
border-top: 1px solid var(--border);
border-bottom: none;
}
.order-line-val { font-family: var(--font-head); font-weight: 700; color: var(--white); }
.order-line.total .order-line-val { color: var(--orange); font-size: 16px; }
.order-voucher {
margin-top: 12px;
padding: 10px 12px;
background: rgba(251,191,36,0.08);
border: 1px solid rgba(251,191,36,0.2);
border-radius: 8px;
font-size: 12px;
color: rgba(255,255,255,0.6);
}
.order-voucher strong { color: var(--amber); }
.order-note {
font-size: 11px;
color: rgba(255,255,255,0.25);
line-height: 1.6;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.order-change-plan {
font-size: 11.5px;
color: var(--orange);
margin-top: 12px;
display: block;
text-align: center;
}
/* ============================================================
SECTION 9 — MARKETING PAGE SECTIONS
============================================================ */
/* ── Hero ── */
#hero {
padding: 160px 0 100px;
position: relative;
overflow: hidden;
}
.hero-orb {
position: absolute;
top: -100px; right: -100px;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(255,107,53,0.12) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 420px;
gap: 80px;
align-items: center;
}
.hero-tag { margin-bottom: 24px; }
.hero-headline {
font-family: var(--font-head);
font-weight: 800;
font-size: clamp(42px, 6vw, 72px);
line-height: 1.0;
letter-spacing: -0.04em;
margin-bottom: 24px;
}
.hero-sub {
font-size: 18px;
color: var(--text-muted);
font-weight: 300;
line-height: 1.7;
max-width: 480px;
margin-bottom: 40px;
}
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero-trust {
margin-top: 48px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--text-muted);
}
.trust-dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; }
/* Hero card mockup */
.hero-card-wrap { position: relative; }
.hero-card {
width: 100%;
max-width: 360px;
background: linear-gradient(150deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08), 0 0 60px rgba(255,107,53,0.08);
animation: cardRise 0.8s cubic-bezier(0.22,1,0.36,1) both;
transform: rotate(3deg);
margin-left: auto;
}
@keyframes cardRise {
from { opacity:0; transform: rotate(3deg) translateY(40px); }
to { opacity:1; transform: rotate(3deg) translateY(0); }
}
.hc-banner { background:#fff; padding:14px 18px; display:flex; align-items:center; gap:11px; border-bottom:3px solid var(--orange); }
.hc-logo { width:40px; height:40px; background:linear-gradient(135deg,#e8421a,#f97316); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.hc-biz-name { font-family:var(--font-head); font-weight:800; font-size:14px; color:#111; }
.hc-biz-sub { font-size:10px; color:#999; font-style:italic; }
.hc-body { padding:20px 20px 16px; }
.hc-headline { font-family:var(--font-head); font-weight:800; font-size:24px; color:#fff; line-height:1.15; letter-spacing:-0.02em; margin-bottom:12px; }
.hc-sub { font-size:12px; color:rgba(255,255,255,0.5); line-height:1.65; font-weight:300; margin-bottom:18px; }
.hc-bottom { display:flex; align-items:center; justify-content:space-between; }
.hc-pill { background:linear-gradient(135deg,var(--orange),var(--orange-2)); border-radius:20px; padding:7px 14px; font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#fff; }
.hc-qr { background:#fff; border-radius:10px; padding:7px; width:60px; height:60px; display:flex; align-items:center; justify-content:center; }
.hc-powered { background:rgba(0,0,0,0.25); border-top:1px solid rgba(255,255,255,0.06); padding:7px 18px; display:flex; align-items:center; justify-content:flex-end; gap:5px; }
.hc-powered-text { font-size:8px; color:rgba(255,255,255,0.25); font-family:var(--font-head); text-transform:uppercase; letter-spacing:0.1em; }
.hc-powered-brand { font-family:var(--font-head); font-size:9px; font-weight:700; color:rgba(255,255,255,0.4); }
.hc-powered-brand span { color:rgba(255,107,53,0.7); }
.card-badge { position:absolute; bottom:-20px; left:-30px; background:var(--navy-mid); border:1px solid rgba(255,107,53,0.25); border-radius:14px; padding:14px 18px; box-shadow:0 12px 40px rgba(0,0,0,0.4); animation:cardRise 0.8s 0.2s cubic-bezier(0.22,1,0.36,1) both; }
.badge-num { font-family:var(--font-head); font-weight:800; font-size:28px; color:var(--orange); line-height:1; }
.badge-label { font-size:11px; color:var(--text-muted); font-weight:300; }
/* ── Stats bar ── */
#stats { padding:60px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; z-index:2; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat-item { text-align:center; padding:20px; border-right:1px solid var(--border); }
.stat-item:last-child { border-right:none; }
.stat-num { font-family:var(--font-head); font-weight:800; font-size:42px; color:var(--white); letter-spacing:-0.03em; line-height:1; margin-bottom:6px; }
.stat-num span { color:var(--orange); }
.stat-label { font-size:13px; color:var(--text-muted); font-weight:300; }
/* ── How it works ── */
#how { padding:120px 0; position:relative; z-index:2; }
.how-header { text-align:center; margin-bottom:80px; }
.how-header .section-sub { margin:16px auto 0; }
.flow-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.flow-connector { position:absolute; top:40px; left:calc(12.5% + 40px); right:calc(12.5% + 40px); height:1px; background:linear-gradient(90deg,var(--orange),var(--orange-2),var(--blue-acc)); opacity:0.3; z-index:0; }
.flow-step { padding:0 20px; text-align:center; position:relative; z-index:1; }
.flow-icon { font-size:32px; margin:0 auto 20px; display:flex; width:80px; height:80px; background:rgba(255,107,53,0.08); border:1px solid rgba(255,107,53,0.2); border-radius:20px; align-items:center; justify-content:center; }
.flow-title { font-family:var(--font-head); font-weight:700; font-size:16px; color:var(--white); margin-bottom:10px; }
.flow-desc { font-size:13px; color:var(--text-muted); line-height:1.65; font-weight:300; }
/* Audience tabs */
.audience-section { margin-top:100px; }
.audience-tabs { display:flex; gap:8px; margin-bottom:40px; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:12px; padding:6px; width:fit-content; }
.aud-tab { padding:10px 22px; border-radius:8px; font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; border:none; background:transparent; color:var(--text-muted); transition:all 0.2s; }
.aud-tab.active { background:linear-gradient(135deg,var(--orange),var(--orange-2)); color:#fff; }
.aud-content { display:none; }
.aud-content.active { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.aud-steps { display:flex; flex-direction:column; gap:24px; }
.aud-step { display:flex; gap:16px; align-items:flex-start; }
.aud-step-num { width:32px; height:32px; min-width:32px; background:linear-gradient(135deg,var(--orange),var(--orange-2)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:13px; color:#fff; flex-shrink:0; }
.aud-step-title { font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--white); margin-bottom:4px; }
.aud-step-desc { font-size:13px; color:var(--text-muted); line-height:1.6; font-weight:300; }
.aud-visual { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:32px; }
.aud-visual-title { font-family:var(--font-head); font-weight:700; font-size:20px; color:var(--white); margin-bottom:20px; }
.aud-metrics { display:flex; flex-direction:column; gap:14px; }
.aud-metric { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:rgba(255,255,255,0.03); border-radius:10px; border:1px solid var(--border); }
.aud-metric-label { font-size:13px; color:var(--text-muted); }
.aud-metric-val { font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--orange); }
/* ── Comparison ── */
#compare { padding:120px 0; position:relative; z-index:2; background:linear-gradient(180deg,transparent,rgba(255,107,53,0.03),transparent); }
.compare-header { text-align:center; margin-bottom:60px; }
.compare-header .section-sub { margin:16px auto 0; }
.compare-table { width:100%; border-collapse:collapse; background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.compare-table th { padding:20px 24px; font-family:var(--font-head); font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; text-align:left; border-bottom:1px solid var(--border); background:rgba(255,255,255,0.02); }
.compare-table th.highlight { background:linear-gradient(135deg,rgba(255,107,53,0.15),rgba(247,147,30,0.08)); color:var(--orange); border-bottom-color:rgba(255,107,53,0.3); }
.compare-table td { padding:16px 24px; font-size:13.5px; color:var(--text-muted); border-bottom:1px solid rgba(255,255,255,0.04); vertical-align:middle; }
.compare-table td.highlight { background:rgba(255,107,53,0.04); color:var(--white); font-weight:500; }
.compare-table tr:last-child td { border-bottom:none; }
.compare-table td:first-child { color:var(--white); font-weight:400; font-size:14px; }
/* ── Pricing ── */
#pricing { padding:120px 0; position:relative; z-index:2; }
.pricing-header { text-align:center; margin-bottom:20px; }
.pricing-toggle { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:60px; }
.toggle-label { font-size:13px; color:var(--text-muted); font-weight:400; }
.toggle-label.active { color:var(--white); font-weight:500; }
.toggle-switch { position:relative; width:50px; height:26px; background:rgba(255,255,255,0.1); border-radius:13px; cursor:pointer; border:1px solid rgba(255,255,255,0.15); transition:background 0.2s; }
.toggle-switch.annual-active { background:linear-gradient(135deg,var(--orange),var(--orange-2)); }
.toggle-knob { position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform 0.2s; }
.toggle-switch.annual-active .toggle-knob { transform:translateX(24px); }
.save-badge { background:rgba(74,222,128,0.15); border:1px solid rgba(74,222,128,0.3); color:var(--green-light); border-radius:20px; padding:3px 10px; font-size:11px; font-family:var(--font-head); font-weight:700; letter-spacing:0.06em; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
.plan-card { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:20px; overflow:hidden; transition:transform 0.2s,box-shadow 0.2s; }
.plan-card:hover { transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.plan-card.popular { border-color:rgba(255,107,53,0.4); background:rgba(255,107,53,0.04); transform:scale(1.03); box-shadow:0 20px 60px rgba(255,107,53,0.12); }
.plan-card.popular:hover { transform:scale(1.03) translateY(-4px); }
.plan-top-bar { height:4px; background:var(--border); }
.plan-card.popular .plan-top-bar { background:linear-gradient(90deg,var(--orange),var(--orange-2),var(--amber)); }
.popular-badge { background:linear-gradient(135deg,var(--orange),var(--orange-2)); color:#fff; font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; text-align:center; padding:7px; }
.plan-body { padding:28px 28px 32px; }
.plan-name { font-family:var(--font-head); font-weight:800; font-size:22px; color:var(--white); margin-bottom:4px; }
.plan-desc { font-size:12.5px; color:var(--text-muted); margin-bottom:24px; font-style:italic; }
.plan-price { display:flex; align-items:baseline; gap:6px; margin-bottom:6px; }
.plan-amount { font-family:var(--font-head); font-weight:800; font-size:48px; color:var(--white); letter-spacing:-0.03em; line-height:1; }
.plan-amount span { font-size:22px; font-weight:600; }
.plan-per { font-size:13px; color:var(--text-muted); }
.plan-setup { font-size:12px; color:var(--text-muted); margin-bottom:24px; }
.plan-setup strong { color:rgba(255,255,255,0.6); }
.plan-divider { height:1px; background:var(--border); margin:20px 0; }
.plan-features { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.plan-features li { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:rgba(255,255,255,0.75); line-height:1.4; }
.plan-features li .feat-icon { flex-shrink:0; margin-top:1px; }
.feat-yes { color:var(--green-light); }
.feat-no { color:rgba(255,255,255,0.2); }
.plan-missing { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.plan-missing li { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:rgba(255,255,255,0.25); }
.plan-btn { width:100%; text-align:center; justify-content:center; padding:14px; }
.plan-locations { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.05); border-radius:8px; padding:6px 12px; font-size:12px; color:var(--text-muted); margin-bottom:8px; }
/* ── Testimonials ── */
#testimonials { padding:120px 0; position:relative; z-index:2; background:linear-gradient(180deg,transparent,rgba(99,179,237,0.03),transparent); }
.test-header { text-align:center; margin-bottom:64px; }
.test-header .section-sub { margin:16px auto 0; }
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.test-card { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:var(--radius); padding:28px; position:relative; transition:border-color 0.2s; }
.test-card:hover { border-color:rgba(255,107,53,0.25); }
.test-quote-mark { font-size:60px; line-height:1; color:rgba(255,107,53,0.2); font-family:Georgia,serif; position:absolute; top:16px; right:20px; }
.test-stars { color:var(--amber); font-size:14px; letter-spacing:2px; margin-bottom:16px; }
.test-text { font-size:14px; color:rgba(255,255,255,0.75); line-height:1.7; font-weight:300; margin-bottom:24px; font-style:italic; }
.test-author { display:flex; align-items:center; gap:12px; border-top:1px solid var(--border); padding-top:16px; }
.test-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; background:linear-gradient(135deg,rgba(255,107,53,0.2),rgba(247,147,30,0.1)); border:1px solid rgba(255,107,53,0.2); flex-shrink:0; }
.test-name { font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--white); }
.test-biz { font-size:12px; color:var(--text-muted); font-style:italic; }
.test-result { margin-top:16px; background:rgba(255,107,53,0.08); border:1px solid rgba(255,107,53,0.2); border-radius:8px; padding:10px 14px; font-size:12.5px; color:var(--orange); font-weight:500; }
/* ── FAQ ── */
#faq { padding:100px 0; position:relative; z-index:2; }
.faq-header { text-align:center; margin-bottom:60px; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:900px; margin:0 auto; }
.faq-item { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.faq-q { padding:18px 22px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--white); gap:12px; user-select:none; }
.faq-arrow { color:var(--orange); font-size:18px; transition:transform 0.2s; flex-shrink:0; }
.faq-item.open .faq-arrow { transform:rotate(45deg); }
.faq-a { display:none; padding:0 22px 18px; font-size:13.5px; color:var(--text-muted); line-height:1.7; font-weight:300; }
.faq-item.open .faq-a { display:block; }
/* ── CTA / Signup section ── */
#signup { padding:120px 0; position:relative; z-index:2; }
.signup-orb { position:absolute; bottom:-100px; left:-150px; width:500px; height:500px; background:radial-gradient(circle,rgba(99,179,237,0.07) 0%,transparent 65%); border-radius:50%; pointer-events:none; z-index:0; }
.signup-grid { display:grid; grid-template-columns:420px 1fr; gap:80px; align-items:start; }
.signup-left h2 { font-family:var(--font-head); font-weight:800; font-size:42px; line-height:1.1; letter-spacing:-0.03em; margin-bottom:20px; }
.signup-left p { font-size:16px; color:var(--text-muted); line-height:1.7; font-weight:300; margin-bottom:36px; }
.signup-perks { display:flex; flex-direction:column; gap:14px; }
.signup-perk { display:flex; align-items:flex-start; gap:13px; }
.perk-icon { width:36px; height:36px; min-width:36px; background:rgba(255,107,53,0.1); border:1px solid rgba(255,107,53,0.2); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.perk-title { font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--white); margin-bottom:2px; }
.perk-desc { font-size:12.5px; color:var(--text-muted); line-height:1.5; }
/* ============================================================
SECTION 10 — ROI CALCULATOR — THREE-TIER COMPARISON
============================================================ */
#roi-calculator {
padding: 100px 0 80px;
background: linear-gradient(180deg, transparent 0%, rgba(255,107,53,0.03) 50%, transparent 100%);
}
.roi-header { text-align: center; margin-bottom: 48px; }
.roi-header .section-sub { margin: 14px auto 0; text-align: center; }
/* Input row — stacked groups */
.roi-inputs-row {
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px 32px;
margin-bottom: 36px;
}
/* 3-column input layout: Business Type | Frequency | Spend */
.roi-inputs-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media(max-width:900px) { .roi-inputs-3col { grid-template-columns: 1fr 1fr; } }
@media(max-width:600px) { .roi-inputs-3col { grid-template-columns: 1fr; } }
.roi-input-group {}
.roi-input-label {
font-family: var(--font-head);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-bottom: 12px;
}
.roi-radio-grid { display: flex; flex-wrap: wrap; gap: 7px; }
/* Stacked variant — full-width buttons in a column, used inside 3-col layout */
.roi-radio-grid-col {
display: flex;
flex-direction: column;
gap: 6px;
}
.roi-radio-grid-col .roi-radio {
width: 100%;
padding: 9px 14px;
}
/* Radio inputs are visually hidden — labels are styled as buttons.
Selection state driven by CSS :checked — no JS needed, no race conditions. */
#roi-calculator input[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.roi-radio {
display: flex; align-items: center; gap: 7px;
padding: 9px 14px;
background: rgba(255,255,255,0.03); border: 1.5px solid var(--border);
border-radius: 8px; cursor: pointer; font-size: 12.5px;
color: var(--text-muted); transition: all 0.15s; user-select: none;
}
.roi-radio:hover { border-color: rgba(255,107,53,0.4); color: var(--white); }
/* :checked drives selected state — completely JS-free, always accurate */
#roi-calculator input[type=radio]:checked + .roi-radio {
border-color: var(--orange);
background: rgba(255,107,53,0.1);
color: var(--white);
}
/* Empty state */
.roi-empty-state {
text-align: center;
padding: 48px 24px;
background: rgba(255,255,255,0.02);
border: 1px dashed var(--border);
border-radius: var(--radius);
}
/* LTV context bar */
.roi-ltv-bar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
padding: 12px 16px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
flex-wrap: wrap;
}
.roi-ltv-val {
font-family: var(--font-head);
font-weight: 800;
font-size: 18px;
color: var(--orange);
}
/* Three-tier grid */
.roi-tier-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 20px;
}
@media(max-width:900px) { .roi-tier-grid { grid-template-columns: 1fr; } }
/* Individual tier card */
.roi-tier-card {
background: rgba(255,255,255,0.02);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 24px 20px;
position: relative;
display: flex;
flex-direction: column;
gap: 0;
transition: border-color 0.2s;
}
.roi-tier-card:hover { border-color: rgba(255,107,53,0.3); }
/* Featured / recommended tier */
.roi-tier-featured {
border-color: rgba(255,107,53,0.45);
background: rgba(255,107,53,0.05);
box-shadow: 0 0 0 1px rgba(255,107,53,0.15), 0 12px 40px rgba(255,107,53,0.08);
}
.roi-tier-recommended {
position: absolute;
top: -1px; left: 50%; transform: translateX(-50%);
background: linear-gradient(135deg, var(--orange), var(--orange-2));
color: #fff;
font-family: var(--font-head);
font-size: 9px; font-weight: 800;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 4px 14px;
border-radius: 0 0 8px 8px;
white-space: nowrap;
}
/* Tier header */
.roi-tier-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
margin-top: 12px;
}
.roi-tier-name {
font-family: var(--font-head);
font-weight: 800;
font-size: 16px;
color: var(--white);
}
.roi-tier-price {
font-family: var(--font-head);
font-weight: 800;
font-size: 22px;
color: var(--orange);
line-height: 1;
}
.roi-tier-price span { font-size: 13px; font-weight: 400; color: var(--text-muted); }
/* Cap / feature note */
.roi-tier-cap-note {
font-size: 12px;
color: rgba(255,255,255,0.45);
line-height: 1.5;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.roi-tier-cap-pro {
color: rgba(255,107,53,0.7);
}
/* NET REVENUE — lead metric */
.roi-net-lead {
text-align: center;
margin-bottom: 12px;
}
.roi-net-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-bottom: 6px;
}
.roi-net-y1 {
font-family: var(--font-head);
font-weight: 800;
font-size: 40px;
color: var(--green-light);
line-height: 1;
letter-spacing: -0.02em;
}
.roi-tier-featured .roi-net-y1 {
font-size: 46px;
}
.roi-net-sublabel {
font-size: 11px;
color: rgba(255,255,255,0.3);
margin-top: 4px;
}
/* Year 2 row */
.roi-net-y2-row {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.roi-net-y2-label { font-size: 11px; color: rgba(255,255,255,0.35); }
.roi-net-y2-val {
font-family: var(--font-head);
font-weight: 700;
font-size: 16px;
color: var(--white);
}
.roi-growth-badge {
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
background: rgba(34,197,94,0.12);
color: var(--green-light);
border: 1px solid rgba(34,197,94,0.2);
}
.roi-growth-featured {
background: rgba(255,107,53,0.12);
color: var(--orange);
border-color: rgba(255,107,53,0.25);
}
/* Stats row */
.roi-tier-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
}
.roi-tier-stat {
background: rgba(255,255,255,0.03);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 8px;
text-align: center;
}
.roi-tier-stat-val {
font-family: var(--font-head);
font-weight: 800;
font-size: 18px;
color: var(--white);
display: block;
line-height: 1;
margin-bottom: 4px;
}
.roi-tier-stat-label {
font-size: 10px;
color: rgba(255,255,255,0.3);
line-height: 1.3;
}
/* Contextual notes */
.roi-tier-note {
font-size: 11px;
color: rgba(255,255,255,0.25);
line-height: 1.5;
margin-bottom: 16px;
flex-grow: 1;
}
.roi-tier-conversion-note {
font-size: 11.5px;
color: rgba(255,107,53,0.7);
line-height: 1.5;
margin-bottom: 16px;
flex-grow: 1;
}
/* CTA button per tier */
.roi-tier-btn {
display: block;
text-align: center;
padding: 12px 16px;
border-radius: var(--radius-sm);
font-family: var(--font-head);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
background: rgba(255,255,255,0.05);
border: 1.5px solid var(--border);
color: var(--text-muted);
transition: all 0.15s;
text-decoration: none;
margin-top: auto;
}
.roi-tier-btn:hover { border-color: rgba(255,107,53,0.4); color: var(--white); }
.roi-tier-btn-featured {
background: linear-gradient(135deg, var(--orange), var(--orange-2));
border-color: transparent;
color: #fff;
box-shadow: 0 4px 16px rgba(255,107,53,0.3);
}
.roi-tier-btn-featured:hover {
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(255,107,53,0.4);
color: #fff;
}
/* Disclaimer bar */
.roi-disclaimer-bar {
font-size: 11px;
color: rgba(255,255,255,0.2);
line-height: 1.6;
text-align: center;
padding: 12px 0;
}
/* ============================================================
SECTION 11 — REGISTRATION WIZARD (clientregister.php)
============================================================ */
/* Progress stepper */
.stepper { display:flex; align-items:center; justify-content:center; margin-bottom:44px; flex-wrap:wrap; gap:4px; }
.step-item { display: flex; align-items: center; }
.step-dot { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:14px; transition:all 0.3s; }
.step-dot.done { background: var(--green); color: #fff; }
.step-dot.active { background: var(--orange); color: #fff; box-shadow: 0 0 0 4px rgba(255,107,53,0.2); }
.step-dot.pending { background: rgba(255,255,255,0.07); color: var(--text-muted); border: 1.5px solid var(--border); }
.step-label { font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin:0 8px; }
.step-label.active { color: var(--white); }
.step-label.done { color: var(--green); }
.step-label.pending { color: var(--text-muted); }
.step-connector { width:40px; height:1.5px; background:var(--border); flex-shrink:0; }
.step-connector.done { background: var(--green); }
/* Two-column form grid */
.reg-grid { display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; }
/* Billing toggle (step 2) */
.billing-toggle { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding:14px 16px; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:var(--radius-sm); }
.billing-opt { display:flex; align-items:center; gap:8px; cursor:pointer; flex:1; }
.billing-opt input[type=radio] { accent-color: var(--orange); }
.billing-opt-label { font-size:14px; color:var(--text-muted); font-weight:300; }
.billing-opt input:checked ~ .billing-opt-label { color: var(--white); }
.billing-save { font-size:10px; font-weight:700; color:var(--green); background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.2); border-radius:20px; padding:2px 8px; white-space:nowrap; }
/* Tier cards (step 2) */
.tier-grid { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.tier-card { position:relative; border:2px solid var(--border); border-radius:14px; padding:18px 20px; cursor:pointer; transition:all 0.2s; overflow:hidden; }
.tier-card:hover { border-color: rgba(255,107,53,0.4); }
.tier-card.selected { border-color:var(--orange); background:rgba(255,107,53,0.07); }
.tier-card.popular-tier { border-color: rgba(255,107,53,0.4); }
.tier-card input[type=radio] { position:absolute; opacity:0; pointer-events:none; }
.tier-popular-badge { position:absolute; top:0; right:0; background:linear-gradient(135deg,var(--orange),var(--orange-2)); color:#fff; font-family:var(--font-head); font-weight:800; font-size:9px; letter-spacing:0.08em; padding:4px 12px; border-radius:0 14px 0 8px; }
.tier-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.tier-card-name { font-family:var(--font-head); font-weight:800; font-size:15px; }
.tier-card-price { font-family:var(--font-head); font-weight:800; font-size:20px; color:var(--orange); text-align:right; line-height:1; }
.tier-card-price span { font-size:12px; font-weight:400; color:var(--text-muted); }
.tier-card-locs { font-size:11.5px; color:var(--text-muted); margin-bottom:8px; }
.tier-feats { display:flex; flex-wrap:wrap; gap:6px; }
.tier-feat { font-size:10.5px; color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:20px; padding:2px 9px; }
/* Stripe card element wrapper */
.stripe-card-wrap { background:rgba(255,255,255,0.05); border:1.5px solid rgba(255,255,255,0.1); border-radius:var(--radius-sm); padding:14px 15px; min-height:46px; transition:border-color 0.2s; }
.stripe-card-wrap.StripeElement--focus { border-color: var(--orange); }
.stripe-card-wrap.StripeElement--invalid { border-color: var(--red); }
.stripe-error { font-size:12px; color:#fca5a5; margin-top:6px; min-height:18px; }
.stripe-secure { font-size:11.5px; color:rgba(255,255,255,0.3); text-align:center; margin-top:10px; display:flex; align-items:center; justify-content:center; gap:6px; }
/* Offer / reward selectors (step 3) */
.offer-options { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.offer-opt { display:flex; align-items:center; gap:12px; padding:12px 14px; background:rgba(255,255,255,0.03); border:1.5px solid var(--border); border-radius:10px; cursor:pointer; transition:all 0.15s; }
.offer-opt:hover { border-color: rgba(255,107,53,0.4); }
.offer-opt.selected { border-color:var(--orange); background:rgba(255,107,53,0.07); }
.offer-opt input[type=radio] { accent-color:var(--orange); flex-shrink:0; }
.offer-opt-label { font-size:13.5px; color:rgba(255,255,255,0.8); }
.offer-opt-type { margin-left:auto; font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:20px; }
.type-perc { background:rgba(255,107,53,0.15); color:var(--orange); }
.type-fixe { background:rgba(34,197,94,0.12); color:var(--green); }
.type-free { background:rgba(139,92,246,0.12); color:#a78bfa; }
.type-cust { background:rgba(100,116,139,0.12); color:#94a3b8; }
.custom-offer-wrap { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:10px; padding:16px; margin-top:8px; }
/* Threshold selector (step 3) */
.threshold-row { display:flex; gap:8px; margin-bottom:6px; }
.threshold-btn { flex:1; padding:10px 6px; border:1.5px solid var(--border); border-radius:10px; background:rgba(255,255,255,0.03); color:var(--text-muted); font-family:var(--font-head); font-weight:700; font-size:14px; text-align:center; cursor:pointer; transition:all 0.15s; }
.threshold-btn:hover { border-color:rgba(255,107,53,0.4); color:var(--white); }
.threshold-btn.active { border-color:var(--orange); background:rgba(255,107,53,0.1); color:var(--white); }
.threshold-recommend { font-size:11px; color:rgba(255,255,255,0.3); text-align:center; margin-top:4px; }
.threshold-recommend strong { color: var(--green); }
/* Spend quick-select (step 3) */
.spend-quick { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.spend-btn { padding:7px 12px; background:rgba(255,255,255,0.03); border:1.5px solid var(--border); border-radius:8px; color:var(--text-muted); font-family:var(--font-head); font-weight:700; font-size:12px; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.spend-btn:hover { border-color:rgba(255,107,53,0.4); color:var(--white); }
.spend-btn.active { border-color:var(--orange); background:rgba(255,107,53,0.1); color:var(--white); }
.spend-exact-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.spend-exact-row input[type=number] { -moz-appearance:textfield; }
.spend-exact-row input[type=number]::-webkit-outer-spin-button,
.spend-exact-row input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; }
.spend-display { font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--orange); min-height:22px; margin-top:4px; }
/* ROI nudge banners (step 3) */
.roi-nudge { background:rgba(255,107,53,0.07); border:1px solid rgba(255,107,53,0.2); border-radius:10px; padding:12px 16px; margin-bottom:20px; font-size:12.5px; color:rgba(255,255,255,0.6); line-height:1.7; }
.roi-nudge strong { color: var(--white); }
.roi-nudge a { color: var(--orange); }
.roi-nudge.roi-nudge-update { background:rgba(34,197,94,0.06); border-color:rgba(34,197,94,0.2); }
.roi-nudge.roi-nudge-update strong { color: var(--green-light); }
/* ROI preview panel (step 3 sidebar) */
.roi-preview { background:rgba(34,197,94,0.06); border:1px solid rgba(34,197,94,0.2); border-radius:14px; padding:20px; margin-top:16px; }
.roi-preview-title { font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--green); margin-bottom:14px; }
.roi-preview-line { display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-muted); padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.roi-preview-line:last-child { border-bottom: none; }
.roi-preview-line.total { color:var(--white); font-weight:600; padding-top:10px; border-top:1px solid rgba(255,255,255,0.08); border-bottom:none; }
.roi-preview-big { text-align:center; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.07); }
.roi-preview-pct { font-family:var(--font-head); font-size:44px; font-weight:800; color:var(--green); line-height:1; }
.roi-preview-pct-label { font-size:11px; color:rgba(255,255,255,0.3); margin-top:4px; }
/* Two-column step 3 layout */
.step3-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
/* Voucher input */
.voucher-input-wrap { position:relative; }
.voucher-input-wrap input { letter-spacing:0.12em; text-transform:uppercase; font-family:var(--font-head); font-weight:700; font-size:16px; text-align:center; padding-right:80px; }
.voucher-verify-badge { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; pointer-events:none; }
.voucher-verify-badge.valid { background:rgba(34,197,94,0.15); color:var(--green); }
.voucher-verify-badge.invalid { background:rgba(239,68,68,0.15); color:#fca5a5; }
/* ============================================================
SECTION 12 — THANK-YOU / COMPLETION PAGE
============================================================ */
.complete-wrap {
max-width: 780px;
margin: 0 auto;
padding: 60px 24px 80px;
position: relative;
z-index: 2;
text-align: center;
}
.complete-icon {
font-size: 72px;
margin-bottom: 24px;
display: block;
}
.complete-headline {
font-family: var(--font-head);
font-weight: 800;
font-size: clamp(32px, 5vw, 48px);
line-height: 1.1;
letter-spacing: -0.03em;
margin-bottom: 16px;
}
.complete-sub {
font-size: 17px;
color: var(--text-muted);
font-weight: 300;
line-height: 1.7;
margin-bottom: 48px;
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.complete-roi-box {
background: rgba(34,197,94,0.07);
border: 1px solid rgba(34,197,94,0.25);
border-radius: var(--radius);
padding: 28px 32px;
margin-bottom: 32px;
text-align: left;
}
.complete-roi-title {
font-family: var(--font-head);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 16px;
}
.complete-roi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.complete-roi-stat {
text-align: center;
}
.complete-roi-stat-val {
font-family: var(--font-head);
font-weight: 800;
font-size: 28px;
color: var(--green-light);
line-height: 1;
margin-bottom: 4px;
}
.complete-roi-stat-label {
font-size: 11px;
color: rgba(255,255,255,0.4);
line-height: 1.4;
}
.complete-steps {
text-align: left;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px 32px;
margin-bottom: 32px;
}
.complete-steps-title {
font-family: var(--font-head);
font-weight: 700;
font-size: 14px;
color: var(--white);
margin-bottom: 20px;
}
.complete-step {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.complete-step:last-child { border-bottom: none; }
.complete-step-num {
width: 28px; height: 28px;
min-width: 28px;
background: linear-gradient(135deg, var(--orange), var(--orange-2));
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-head);
font-weight: 800;
font-size: 12px;
color: #fff;
flex-shrink: 0;
}
.complete-step-text {
font-size: 14px;
color: rgba(255,255,255,0.75);
line-height: 1.5;
}
.complete-step-text strong { color: var(--white); }
/* ============================================================
SECTION 13 — FOOTER
============================================================ */
footer {
border-top: 1px solid var(--border);
padding: 48px 0 32px;
position: relative;
z-index: 2;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:40px; }
.footer-logo { font-family:var(--font-head); font-weight:800; font-size:22px; color:var(--white); margin-bottom:12px; }
.footer-logo span { color: var(--orange); }
.footer-tagline { font-size:13px; color:var(--text-muted); line-height:1.65; max-width:240px; }
.footer-col h4 { font-family:var(--font-head); font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:16px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col a { font-size:13.5px; color:var(--text-muted); transition:color 0.2s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; align-items:center; }
.footer-copy { font-size:12px; color:rgba(255,255,255,0.2); }
.footer-links { display:flex; gap:24px; }
.footer-links a { font-size:12px; color:rgba(255,255,255,0.25); transition:color 0.2s; }
.footer-links a:hover { color: var(--text-muted); }
/* ============================================================
SECTION 14 — RESPONSIVE BREAKPOINTS
============================================================ */
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-card-wrap { display: none; }
.pricing-grid { grid-template-columns: 1fr; gap: 16px; }
.plan-card.popular { transform: none; }
.signup-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.roi-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.reg-grid { grid-template-columns: 1fr; }
.tier-feats { display: none; }
}
@media (max-width: 768px) {
.nav-links { display: none; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.stat-item { border-right: none; border-bottom: 1px solid var(--border); }
.flow-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.flow-connector { display: none; }
.test-grid { grid-template-columns: 1fr; }
.faq-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
.compare-table { font-size: 12px; }
.compare-table th, .compare-table td { padding: 12px 14px; }
.aud-content.active { grid-template-columns: 1fr; }
.step3-grid { grid-template-columns: 1fr; }
.complete-roi-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.page-wrap { padding: 20px 16px 60px; }
.form-card-body { padding: 20px; }
.form-card-header { padding: 20px; }
.field-row.cols-2 { grid-template-columns: 1fr; }
.field-row.cols-3 { grid-template-columns: 1fr; }
.stepper .step-label { display: none; }
.stepper .step-connector { width: 24px; }
.complete-roi-grid { grid-template-columns: 1fr; }
}
/* ============================================================
SECTION 15 — ANIMATIONS & SCROLL REVEAL
============================================================ */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.5s ease both; }