/* ===========================
Vakros SOC 2 Landing — Premium Cyber SaaS Style
Inspired by modern Framer/Dribbble aesthetics (no copying)
Drop-in for the HTML sections provided earlier.
=========================== */
/* ---------- Fonts (optional) ----------
Add to :
--------------------------------------- */
:root {
--bg0: #060812;
--bg1: #070A14;
--surface: rgba(255, 255, 255, .04);
--surface2: rgba(255, 255, 255, .06);
--border: rgba(255, 255, 255, .10);
--border2: rgba(255, 255, 255, .16);
--text: rgba(255, 255, 255, .92);
--muted: rgba(215, 225, 255, .70);
--muted2: rgba(215, 225, 255, .55);
--accent: #D72638;
/* Vakros Crimson */
--accent2: #4682B4;
/* Steel Blue */
--glowR: rgba(215, 38, 56, .35);
--glowB: rgba(70, 130, 180, .35);
--shadow: 0 24px 80px rgba(0, 0, 0, .45);
--shadow2: 0 16px 60px rgba(0, 0, 0, .35);
--radius-xl: 22px;
--radius-lg: 18px;
--radius-md: 14px;
--container: 1120px;
--sectionPad: 96px;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
color: var(--text);
background:
radial-gradient(1200px 900px at 15% 12%, rgba(70, 130, 180, .24), transparent 58%),
radial-gradient(900px 700px at 85% 10%, rgba(215, 38, 56, .22), transparent 55%),
radial-gradient(1100px 900px at 50% 120%, rgba(70, 130, 180, .12), transparent 55%),
linear-gradient(180deg, var(--bg0), var(--bg1));
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
.container {
width: min(var(--container), 92vw);
margin: 0 auto;
}
/* ---------- Section base ---------- */
.section {
padding: var(--sectionPad) 0;
border-bottom: 1px solid rgba(255, 255, 255, .06);
position: relative;
}
.section-alt {
background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .00));
}
/* ---------- Subtle grid overlay (hero + top sections) ---------- */
.hero::before {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
background:
linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
background-size: 56px 56px;
opacity: .06;
mask-image: radial-gradient(60% 60% at 45% 35%, #000 0%, transparent 70%);
}
/* ---------- Hero ---------- */
.hero {
padding: 110px 0 64px;
overflow: hidden;
position: relative;
}
/* Hero Grid Layout */
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
/* Hero Content */
.hero-content {
max-width: 600px;
}
/* Hero Subtitle */
.hero-subtitle {
opacity: 0.9;
font-weight: 600;
}
/* Hero Logo Container */
.hero-logo {
display: flex;
justify-content: center;
align-items: center;
}
/* Vakros Logo SVG */
.vakros-logo {
width: 100%;
max-width: 320px;
height: auto;
color: var(--text);
filter: drop-shadow(0 0 40px rgba(215, 38, 56, 0.15)) drop-shadow(0 0 80px rgba(70, 130, 180, 0.12));
opacity: 0.95;
transition: transform 0.3s ease, filter 0.3s ease;
}
.vakros-logo:hover {
transform: scale(1.02);
filter: drop-shadow(0 0 50px rgba(215, 38, 56, 0.2)) drop-shadow(0 0 100px rgba(70, 130, 180, 0.15));
}
.eyebrow {
display: inline-flex;
gap: 10px;
align-items: center;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(255, 255, 255, .10);
color: var(--muted);
font-weight: 600;
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
h1 {
margin: 18px 0 14px;
font-size: 62px;
line-height: 1.02;
letter-spacing: -0.03em;
}
.subhead {
margin: 0;
font-size: 18px;
line-height: 1.6;
color: var(--muted);
max-width: 780px;
}
.lead {
margin: 12px 0 0;
font-size: 16px;
line-height: 1.75;
color: var(--muted);
max-width: 920px;
}
/* CTA row */
.cta-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 22px;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 16px;
border-radius: 14px;
font-weight: 700;
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .03);
box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
will-change: transform;
}
.btn:hover {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, .22);
}
.btn:active {
transform: translateY(0px);
}
.btn.primary {
border-color: rgba(215, 38, 56, .50);
background: linear-gradient(180deg, rgba(215, 38, 56, .22), rgba(215, 38, 56, .10));
box-shadow:
0 22px 80px rgba(215, 38, 56, .18),
0 18px 50px rgba(0, 0, 0, .35);
}
.btn.primary:hover {
box-shadow:
0 30px 110px rgba(215, 38, 56, .22),
0 18px 50px rgba(0, 0, 0, .35);
}
.btn.secondary {
border-color: rgba(70, 130, 180, .35);
background: rgba(70, 130, 180, .08);
}
.btn:focus {
outline: none;
}
.btn:focus-visible {
outline: 2px solid rgba(70, 130, 180, .65);
outline-offset: 3px;
}
/* Badges row */
.badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}
.badge {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .03);
color: var(--muted);
font-size: 12px;
font-weight: 650;
backdrop-filter: blur(10px);
}
/* Header (Custom addition to support existing HTML) */
.site-header {
height: 80px;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(6, 8, 18, 0.8);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
z-index: 1000;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
width: min(var(--container), 92vw);
margin: 0 auto;
}
.logo {
font-weight: 800;
font-size: 20px;
letter-spacing: -0.02em;
}
.main-nav ul {
display: flex;
gap: 24px;
}
.main-nav a {
font-size: 14px;
font-weight: 500;
color: var(--muted);
}
.main-nav a:hover {
color: var(--text);
}
.mobile-menu-toggle {
display: none;
color: var(--text);
background: none;
border: none;
font-size: 24px;
}
/* ---------- Headings ---------- */
h2 {
margin: 0 0 12px;
font-size: 38px;
line-height: 1.15;
letter-spacing: -0.02em;
}
h3 {
margin: 0 0 10px;
font-size: 18px;
letter-spacing: -0.01em;
}
/* ---------- Grids ---------- */
.grid {
display: grid;
gap: 16px;
margin-top: 26px;
}
.grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* ---------- Cards (glass) ---------- */
.card {
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
border: 1px solid rgba(255, 255, 255, .10);
border-radius: var(--radius-xl);
padding: 18px 18px 16px;
box-shadow: var(--shadow2);
backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card::before {
content: "";
position: absolute;
inset: -2px;
pointer-events: none;
background:
radial-gradient(600px 200px at 15% 0%, rgba(70, 130, 180, .18), transparent 55%),
radial-gradient(500px 240px at 85% 0%, rgba(215, 38, 56, .14), transparent 60%);
opacity: .9;
}
.card>* {
position: relative;
}
.card p {
margin: 0;
color: var(--muted);
line-height: 1.7;
}
.card:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, .16);
box-shadow: 0 26px 90px rgba(0, 0, 0, .48);
}
.card-icon {
font-size: 24px;
margin-bottom: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
}
/* Lists */
.list {
margin: 10px 0 0;
padding-left: 18px;
color: var(--muted);
line-height: 1.7;
}
.list li {
margin: 6px 0;
}
/* ---------- Criteria pills ---------- */
.criteria {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.pill {
display: inline-flex;
padding: 9px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 650;
color: var(--muted);
border: 1px solid rgba(70, 130, 180, .28);
background: rgba(70, 130, 180, .08);
}
/* ---------- CTA section layout ---------- */
.cta {
padding: 92px 0;
}
.cta-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 22px;
align-items: start;
}
/* ---------- Form (premium) ---------- */
.form {
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
border: 1px solid rgba(255, 255, 255, .12);
border-radius: var(--radius-xl);
padding: 18px;
box-shadow: var(--shadow);
backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
}
.form::before {
content: "";
position: absolute;
inset: -3px;
pointer-events: none;
background:
radial-gradient(700px 240px at 20% 0%, rgba(70, 130, 180, .20), transparent 60%),
radial-gradient(700px 240px at 80% 0%, rgba(215, 38, 56, .18), transparent 60%);
}
.form>* {
position: relative;
}
label {
display: block;
margin: 12px 0;
color: var(--muted);
font-size: 13px;
font-weight: 600;
}
input,
textarea {
width: 100%;
margin-top: 7px;
padding: 12px 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(0, 0, 0, .25);
color: var(--text);
outline: none;
transition: border-color .15s ease, background .15s ease;
}
input::placeholder,
textarea::placeholder {
color: rgba(215, 225, 255, .45);
}
input:focus,
textarea:focus {
border-color: rgba(215, 38, 56, .45);
background: rgba(0, 0, 0, .32);
}
.micro {
margin: 10px 0 0;
color: var(--muted2);
font-size: 12px;
line-height: 1.5;
}
.fineprint {
margin-top: 16px;
color: var(--muted2);
font-size: 13px;
}
.fineprint a {
color: rgba(255, 255, 255, .85);
text-decoration: underline;
text-decoration-color: rgba(70, 130, 180, .45);
}
/* ===========================
FAQ — Persona-based layout
=========================== */
.faq-group {
margin-top: 28px;
}
.faq-group-title {
font-size: 20px;
font-weight: 900;
margin-bottom: 14px;
color: rgba(255, 255, 255, .92);
}
.faq-list {
margin-top: 20px;
}
.faq-item {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .03);
transition: border-color .18s ease, background .18s ease;
}
.faq-item+.faq-item {
margin-top: 16px;
/* Increased breathing room */
}
.faq-item[open] {
border-color: rgba(70, 130, 180, .35);
background: rgba(255, 255, 255, .04);
}
.faq-item summary {
cursor: pointer;
list-style: none;
padding: 16px 18px;
font-weight: 800;
color: rgba(255, 255, 255, .92);
position: relative;
transition: background .15s ease;
}
.faq-item summary:hover {
background: rgba(255, 255, 255, .02);
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: "+";
position: absolute;
right: 18px;
top: 14px;
font-size: 24px;
line-height: 1;
font-weight: 400;
/* Cleaner look */
color: rgba(255, 255, 255, .55);
transition: transform .25s ease;
/* Smooth rotation */
}
.faq-item[open] summary::after {
transform: rotate(45deg);
/* Rotates + into X */
}
.faq-item p {
padding: 0 18px 20px;
margin: 0;
color: var(--muted);
line-height: 1.75;
font-size: 15px;
}
@media (max-width: 520px) {
.faq-group-title {
font-size: 18px;
}
.faq-item p {
font-size: 14.5px;
}
}
/* ---------- Subtle separators ---------- */
.section .container {
position: relative;
}
.section .container::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
opacity: .35;
}
/* ---------- Footer ---------- */
.site-footer {
padding: 64px 0;
color: var(--muted2);
font-size: 14px;
border-top: 1px solid var(--border);
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center;
}
.footer-links {
display: flex;
gap: 24px;
}
.footer-links a:hover {
color: var(--text);
}
/* ---------- Mobile ---------- */
@media (max-width: 980px) {
:root {
--sectionPad: 72px;
}
h1 {
font-size: 44px;
}
h2 {
font-size: 30px;
}
.grid-3 {
grid-template-columns: 1fr;
}
.grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-2 {
grid-template-columns: 1fr;
}
.cta-grid {
grid-template-columns: 1fr;
}
.grid-4 {
grid-template-columns: 1fr;
}
.hero {
padding: 92px 0 52px;
}
/* Hero Grid - Stack on mobile */
.hero-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.hero-content {
max-width: 100%;
}
.vakros-logo {
max-width: 240px;
}
.site-header .main-nav ul {
display: none;
}
/* Basic mobile hide */
.mobile-menu-toggle {
display: block;
}
}
@media (max-width: 420px) {
h1 {
font-size: 40px;
}
.btn {
width: 100%;
}
.cta-row {
gap: 10px;
}
}
/* ===========================
MOBILE UX + TYPOGRAPHY PATCH
Paste at END of styles.css
=========================== */
/* Better tap targets + text rendering */
html {
-webkit-text-size-adjust: 100%;
}
body {
text-rendering: optimizeLegibility;
}
a,
button {
-webkit-tap-highlight-color: transparent;
}
/* Use a more consistent rhythm on smaller screens */
@media (max-width: 980px) {
:root {
--sectionPad: 64px;
/* reduce section padding on tablets */
}
.container {
width: min(var(--container), 92vw);
}
h1 {
font-size: 44px;
line-height: 1.08;
letter-spacing: -0.03em;
margin: 16px 0 12px;
}
h2 {
font-size: 30px;
line-height: 1.18;
margin: 0 0 10px;
}
.subhead {
font-size: 17px;
line-height: 1.65;
max-width: 100%;
}
.lead {
font-size: 15.5px;
line-height: 1.75;
max-width: 100%;
}
.hero {
padding: 86px 0 50px;
}
/* Make CTA row feel less cramped */
.cta-row {
margin-top: 18px;
gap: 12px;
}
.badges {
margin-top: 18px;
gap: 8px;
}
.badge {
font-size: 12px;
padding: 7px 10px;
}
/* Cards: slightly tighter padding on mobile, better readability */
.card {
padding: 16px 16px 14px;
border-radius: 18px;
}
.card p {
font-size: 14.5px;
line-height: 1.75;
}
.list {
font-size: 14.5px;
line-height: 1.75;
}
/* Forms: improve usability */
input,
textarea {
padding: 13px 12px;
/* slightly larger tap area */
font-size: 16px;
/* prevents iOS zoom */
line-height: 1.4;
border-radius: 14px;
}
label {
font-size: 13px;
margin: 10px 0;
}
.micro,
.fineprint {
font-size: 12px;
line-height: 1.55;
}
}
/* Phone-specific: make everything finger-friendly + scannable */
@media (max-width: 520px) {
:root {
--sectionPad: 56px;
/* phone-friendly vertical rhythm */
}
.hero {
padding: 78px 0 44px;
}
.eyebrow {
font-size: 11px;
padding: 9px 12px;
letter-spacing: .05em;
}
h1 {
font-size: 38px;
line-height: 1.1;
margin: 14px 0 10px;
}
h2 {
font-size: 26px;
line-height: 1.2;
}
.subhead {
font-size: 16px;
line-height: 1.7;
}
.lead {
font-size: 15px;
line-height: 1.8;
}
/* Buttons: full width, bigger tap targets */
.btn {
width: 100%;
padding: 14px 16px;
/* 48px-ish tap target */
border-radius: 16px;
font-size: 15px;
}
.cta-row {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
/* Reduce visual “weight” for long pages */
.card {
padding: 15px 15px 13px;
}
.grid {
gap: 14px;
}
/* Pills wrap better */
.criteria {
gap: 8px;
}
.pill {
font-size: 12px;
padding: 8px 10px;
}
/* FAQ: easier tap + less dense */
.faq summary {
padding: 14px 14px;
font-size: 15px;
}
.faq summary::after {
right: 14px;
top: 12px;
}
.faq p {
padding: 0 14px 14px;
font-size: 14.5px;
line-height: 1.75;
}
}
/* Small phones: keep headline from feeling huge */
@media (max-width: 380px) {
h1 {
font-size: 34px;
}
h2 {
font-size: 24px;
}
}
/* ===========================
NAVBAR UPDATE
=========================== */
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(6, 8, 18, 0.85);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
height: 72px;
display: flex;
align-items: center;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.brand {
font-weight: 800;
font-size: 20px;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 4px;
}
.brand-logo {
height: 32px;
width: auto;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.brand:hover .brand-logo {
opacity: 0.9;
transform: scale(1.02);
}
.brand span {
font-size: 10px;
color: var(--muted);
font-weight: 400;
margin-top: -8px;
}
.nav-links {
display: flex;
gap: 32px;
}
.nav-links a {
font-size: 14px;
font-weight: 500;
color: var(--muted);
position: relative;
padding: 8px 0;
transition: color .2s ease;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--text);
}
/* Active Highlight Underline */
.nav-links a.active::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
}
.nav-cta {
padding: 10px 18px;
font-size: 13px;
height: 40px;
}
@media (max-width: 980px) {
.nav-links {
display: none;
}
.nav-cta {
display: none;
}
/* Simplified mobile for now unless a toggle is re-added */
}
/* ===========================
LOGO STRIP + SECURITY + PRICING STYLES
Paste at END of styles.css
=========================== */
/* LOGO STRIP */
.logos {
padding-top: 44px;
padding-bottom: 44px;
}
.logos-kicker {
margin: 0 0 14px;
color: var(--muted2);
font-weight: 700;
letter-spacing: .02em;
font-size: 13px;
text-transform: uppercase;
}
.logo-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.logo-pill {
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .03);
color: rgba(255, 255, 255, .78);
font-weight: 750;
letter-spacing: .02em;
font-size: 13px;
backdrop-filter: blur(10px);
}
.logo-sub {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
color: var(--muted2);
font-size: 13px;
}
.dot-mini {
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(70, 130, 180, .55);
box-shadow: 0 0 20px rgba(70, 130, 180, .35);
}
/* SECURITY COMMITMENTS */
.security-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin-bottom: 18px;
}
.commitments {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.commit {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .03);
padding: 14px;
}
.commit-k {
font-weight: 850;
margin-bottom: 6px;
}
.commit-v {
color: var(--muted);
line-height: 1.6;
font-size: 14px;
}
/* PRICING */
.pricing-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin-bottom: 18px;
}
.toggle {
display: flex;
gap: 8px;
padding: 6px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(255, 255, 255, .03);
backdrop-filter: blur(10px);
}
.toggle-btn {
border: 0;
background: transparent;
color: var(--muted);
font-weight: 800;
padding: 10px 12px;
border-radius: 999px;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.toggle-btn:hover {
color: var(--text);
}
.toggle-btn.is-active {
color: rgba(255, 255, 255, .92);
background: rgba(255, 255, 255, .06);
box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
}
.save {
margin-left: 6px;
font-size: 11px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(70, 130, 180, .25);
background: rgba(70, 130, 180, .08);
color: rgba(255, 255, 255, .78);
}
/* Price cards */
.pricing-grid {
align-items: stretch;
}
.price-card {
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, .12);
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
box-shadow: 0 26px 90px rgba(0, 0, 0, .45);
padding: 18px;
position: relative;
overflow: hidden;
}
.price-card::before {
content: "";
position: absolute;
inset: -2px;
pointer-events: none;
background:
radial-gradient(700px 240px at 15% 0%, rgba(70, 130, 180, .16), transparent 60%),
radial-gradient(700px 240px at 85% 0%, rgba(215, 38, 56, .12), transparent 60%);
opacity: .95;
}
.price-card>* {
position: relative;
}
.price-top h3 {
margin: 0 0 6px;
font-size: 18px;
}
.price-desc {
margin: 0;
color: var(--muted);
line-height: 1.6;
}
.price {
display: flex;
align-items: baseline;
gap: 8px;
margin: 14px 0 14px;
}
.amount {
font-size: 36px;
font-weight: 900;
letter-spacing: -0.02em;
}
.per {
color: var(--muted);
font-weight: 750;
}
.price-list {
margin: 0;
padding-left: 18px;
color: var(--muted);
line-height: 1.75;
}
.price-list li {
margin: 7px 0;
}
.full {
width: 100%;
justify-content: center;
margin-top: 14px;
}
/* Featured (middle) */
.price-card.featured {
border-color: rgba(215, 38, 56, .30);
box-shadow:
0 40px 140px rgba(215, 38, 56, .12),
0 26px 90px rgba(0, 0, 0, .50);
transform: translateY(-6px);
}
.ribbon {
position: absolute;
top: 14px;
right: 14px;
font-size: 11px;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(215, 38, 56, .35);
background: rgba(215, 38, 56, .14);
color: rgba(255, 255, 255, .86);
backdrop-filter: blur(10px);
}
/* Pricing foot */
.pricing-foot {
margin-top: 18px;
display: flex;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.note-lite {
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(0, 0, 0, .18);
padding: 12px 14px;
color: var(--muted);
line-height: 1.6;
}
.smallprint {
color: var(--muted2);
font-size: 13px;
align-self: center;
}
.smallprint a {
color: rgba(255, 255, 255, .85);
text-decoration: underline;
text-decoration-color: rgba(70, 130, 180, .45);
text-underline-offset: 6px;
}
/* Responsive */
@media (max-width: 980px) {
.security-head,
.pricing-head {
align-items: flex-start;
flex-direction: column;
}
.commitments {
grid-template-columns: 1fr;
}
.price-card.featured {
transform: none;
}
}
@media (max-width: 520px) {
.toggle {
width: 100%;
justify-content: space-between;
}
.toggle-btn {
width: 100%;
}
.pricing-foot {
flex-direction: column;
}
}
/* ===========================
TRUST PORTAL SECTION
=========================== */
.trust-portal {
background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .0));
}
.trust-wrap {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 60px;
align-items: center;
}
.trust-actions {
display: flex;
flex-direction: column;
gap: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
border: 1px solid rgba(255, 255, 255, .08);
padding: 32px;
border-radius: 24px;
}
@media (max-width: 980px) {
.trust-wrap {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* FOOTER */
.footer {
padding: 80px 0 40px;
border-top: 1px solid rgba(255, 255, 255, .06);
background: linear-gradient(180deg, rgba(6, 8, 18, .6), rgba(6, 8, 18, 1));
position: relative;
}
.footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr .8fr .8fr .8fr;
gap: 40px;
margin-bottom: 60px;
}
.footer-brand .brandline {
font-weight: 800;
font-size: 24px;
letter-spacing: -0.03em;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 4px;
}
.footer-brand .brandline span {
color: var(--accent);
font-size: 40px;
line-height: 0;
margin-top: -6px;
}
.footer-desc {
margin: 0;
color: var(--muted2);
line-height: 1.7;
font-size: 15px;
max-width: 380px;
}
.footer-col {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-k {
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
font-size: 14px;
letter-spacing: -0.01em;
}
.footer-col a {
color: var(--muted);
font-size: 14px;
transition: color .2s ease;
}
.footer-col a:hover {
color: var(--text);
}
.footer-bottom {
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, .06);
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
color: var(--muted2);
font-size: 13px;
}
.footer-note {
opacity: .6;
}
.footer-social {
display: flex;
gap: 24px;
}
.footer-social a {
color: var(--muted);
font-weight: 500;
}
.footer-social a:hover {
color: var(--text);
}
@media (max-width: 980px) {
.footer {
padding: 60px 0 30px;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-bottom: 40px;
}
}
@media (max-width: 520px) {
.footer-grid {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
}
/* ===========================
COMPLIANCE — aligned spacing + hierarchy
=========================== */
.compliance-head {
max-width: 860px;
}
/* Align vertical rhythm with other sections */
.compliance-head .eyebrow {
margin-bottom: 14px;
/* same as hero rhythm */
}
.compliance-head h2 {
margin-bottom: 10px;
}
/* Strip matches Security/Pricing density */
.compliance-strip {
margin-top: 22px;
/* same “head → content” gap */
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.strip-item {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .03);
padding: 14px;
}
.strip-k {
color: var(--muted2);
font-weight: 900;
text-transform: uppercase;
letter-spacing: .06em;
font-size: 11px;
margin-bottom: 6px;
}
.strip-v {
color: rgba(255, 255, 255, .86);
font-weight: 750;
line-height: 1.55;
font-size: 13px;
}
/* Cards align with your global card style, but slightly tighter */
.compliance-grid {
margin-top: 18px;
/* reduce redundancy after strip */
}
.compliance-grid .card {
padding: 20px 18px 18px;
}
/* Badge uses your accent system */
.icon-badge {
width: 34px;
height: 34px;
border-radius: 12px;
display: grid;
place-items: center;
margin-bottom: 12px;
border: 1px solid rgba(215, 38, 56, .28);
background: rgba(215, 38, 56, .14);
color: rgba(255, 255, 255, .90);
font-weight: 900;
}
.icon-badge.blue {
border-color: rgba(70, 130, 180, .30);
background: rgba(70, 130, 180, .12);
}
/* CTA spacing matches other sections */
.compliance-cta {
margin-top: 26px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* Responsive */
@media (max-width: 980px) {
.compliance-strip {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.compliance-cta .btn {
width: 100%;
}
}
/* Global Smooth Scroll Fix */
section {
scroll-margin-top: 90px;
}
/* ============================
THEMED ICON BADGES (Vakros style)
Paste at END of styles.css
============================ */
.icon-badge {
width: 40px;
height: 40px;
border-radius: 14px;
display: grid;
place-items: center;
margin-bottom: 12px;
border: 1px solid rgba(215, 38, 56, .30);
background: linear-gradient(180deg, rgba(215, 38, 56, .16), rgba(255, 255, 255, .03));
box-shadow: 0 18px 60px rgba(215, 38, 56, .10);
color: rgba(255, 255, 255, .92);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.icon-badge.blue {
border-color: rgba(70, 130, 180, .30);
background: linear-gradient(180deg, rgba(70, 130, 180, .16), rgba(255, 255, 255, .03));
box-shadow: 0 18px 60px rgba(70, 130, 180, .10);
}
.icon-badge .icon {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .95;
}
/* Nice hover polish (matches your cards) */
.card:hover .icon-badge {
transform: translateY(-1px);
box-shadow: 0 28px 90px rgba(0, 0, 0, .40);
border-color: rgba(255, 255, 255, .16);
}
/* ============================
SCROLL BEHAVIOR
============================ */
section {
scroll-margin-top: 90px;
}
html {
scroll-behavior: smooth;
}
/* ===============================
SAFE LAYOUT UPGRADE (won't break anchors)
Paste at END of styles.css
=============================== */
:root {
--container: 1120px;
--radius-lg: 24px;
--radius-md: 18px;
--section-y: 72px;
--section-y-sm: 54px;
--shadow-lg: 0 26px 90px rgba(0, 0, 0, .45);
--shadow-md: 0 18px 60px rgba(0, 0, 0, .30);
--border: rgba(255, 255, 255, .12);
--border-soft: rgba(255, 255, 255, .10);
}
/* Container consistency */
.container {
width: min(var(--container), calc(100% - 40px));
margin-inline: auto;
}
/* Global section rhythm */
.section {
padding: var(--section-y) 0;
position: relative;
}
@media (max-width: 820px) {
.section {
padding: var(--section-y-sm) 0;
}
}
/* Smooth anchor scroll (nav links) */
html {
scroll-behavior: smooth;
}
section {
scroll-margin-top: 90px;
}
/* keep if you have sticky nav */
/* Headline hierarchy */
h1 {
letter-spacing: -0.03em;
line-height: 1.05;
}
h2 {
letter-spacing: -0.02em;
line-height: 1.15;
}
.lead {
max-width: 820px;
line-height: 1.7;
}
.subhead {
max-width: 720px;
line-height: 1.7;
}
/* Make paragraphs readable on large screens */
p {
line-height: 1.75;
}
/* Grid responsiveness (safe: doesn't require HTML changes) */
.grid {
display: grid;
gap: 14px;
}
.grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) {
.grid-3 {
grid-template-columns: 1fr;
}
}
/* Cards: better spacing + hover polish */
.card,
.price-card,
.commit,
.strip-item,
.trust-wrap,
.faq-item {
border-radius: var(--radius-md);
border: 1px solid var(--border-soft);
background: rgba(255, 255, 255, .03);
box-shadow: var(--shadow-md);
}
.card {
padding: 20px 18px;
}
.card:hover,
.price-card:hover,
.commit:hover,
.strip-item:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, .16);
box-shadow: var(--shadow-lg);
}
/* Buttons: consistent sizes */
.btn {
border-radius: 14px;
padding: 12px 14px;
font-weight: 850;
letter-spacing: .01em;
}
.btn.primary {
box-shadow: 0 18px 60px rgba(215, 38, 56, .14);
}
.btn.secondary {
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(255, 255, 255, .12);
}
/* Section separators (Framer-like) */
.section::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -1px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
opacity: .20;
}
.section::after {
content: "";
position: absolute;
left: -10vw;
right: -10vw;
bottom: -1px;
height: 120px;
pointer-events: none;
background: radial-gradient(55% 60% at 50% 0%, rgba(255, 255, 255, .06), transparent 65%);
opacity: .22;
}
/* Hero: improve spacing without changing structure */
.hero-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 18px;
align-items: center;
}
@media (max-width: 980px) {
.hero-grid {
grid-template-columns: 1fr;
}
.hero-right {
order: -1;
}
}
/* Badge pills: consistent */
.badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.badge {
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .03);
color: rgba(255, 255, 255, .78);
font-weight: 750;
font-size: 12px;
}
/* Make nav links feel clickable + consistent */
.nav a {
padding: 10px 10px;
border-radius: 12px;
}
.nav a:hover {
background: rgba(255, 255, 255, .04);
}
/* Mobile: reduce cramped text */
@media (max-width: 520px) {
h1 {
font-size: 34px;
}
h2 {
font-size: 24px;
}
.container {
width: min(var(--container), calc(100% - 28px));
}
.btn {
width: 100%;
justify-content: center;
}
.cta-row {
display: grid;
gap: 10px;
}
}
/* Motion safety */
@media (prefers-reduced-motion: reduce) {
* {
scroll-behavior: auto !important;
transition: none !important;
}
}
/* ===============================
Pricing 2.0 (VendorTrust support)
=============================== */
.pricing-head {
margin-bottom: 40px;
max-width: 700px;
}
.pricing-grid {
/* grid-4 handled by media queries */
}
.price-top {
margin-bottom: 16px;
}
.price h3 {
margin-bottom: 6px;
}
.price-desc {
font-size: 14px;
line-height: 1.5;
color: var(--muted);
min-height: 42px;
/* Alignment */
}
.price {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 6px;
}
.amount {
font-size: 32px;
font-weight: 800;
letter-spacing: -0.02em;
}
.per {
font-size: 15px;
color: var(--muted);
}
.overage {
font-size: 13px;
color: var(--accent);
/* distinct */
margin-bottom: 24px;
font-weight: 550;
}
.price-block {
margin-top: 20px;
}
.price-k {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 750;
color: rgba(255, 255, 255, .5);
margin-bottom: 10px;
}
.price-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
line-height: 1.6;
}
.price-list li {
position: relative;
padding-left: 20px;
margin-bottom: 8px;
color: rgba(255, 255, 255, .85);
}
.price-list li::before {
content: "•";
position: absolute;
left: 6px;
color: var(--accent);
}
.price-list.muted li {
color: var(--muted);
}
.micro {
font-size: 13px;
color: var(--muted);
text-align: center;
margin-top: 14px;
}
.pricing-foot {
margin-top: 50px;
text-align: center;
border-top: 1px solid var(--border);
padding-top: 30px;
}
.note-lite {
font-size: 15px;
color: rgba(255, 255, 255, .9);
margin-bottom: 8px;
}
.smallprint {
font-size: 13px;
color: var(--muted);
}
.smallprint a {
color: var(--text);
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, .2);
}
/* =========================================================
MOBILE + iPAD UX PACK (SAFE)
- Improves readability, spacing, and tap targets
- Prevents overflow issues
- Keeps anchors + functionality intact
Paste at END of styles.css
========================================================= */
/* 1) Safer sizing + prevent horizontal scroll */
* {
box-sizing: border-box;
}
html,
body {
max-width: 100%;
overflow-x: hidden;
}
img,
svg,
video {
max-width: 100%;
height: auto;
display: block;
}
.container {
width: min(var(--container, 1120px), calc(100% - 28px));
}
/* 2) Responsive typography (phones + tablets) */
:root {
--h1: clamp(34px, 5.2vw, 56px);
--h2: clamp(24px, 3.2vw, 34px);
--p: clamp(15px, 1.9vw, 16px);
--lead: clamp(15px, 2.1vw, 17px);
}
h1 {
font-size: var(--h1);
line-height: 1.06;
letter-spacing: -0.03em;
}
h2 {
font-size: var(--h2);
line-height: 1.15;
letter-spacing: -0.02em;
}
p,
li {
font-size: var(--p);
}
.lead,
.subhead {
font-size: var(--lead);
line-height: 1.75;
}
/* 3) Improve section spacing on smaller screens */
.section {
padding: 72px 0;
}
@media (max-width: 820px) {
.section {
padding: 56px 0;
}
}
/* 4) Hero: better iPad stacking + spacing */
.hero-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 18px;
align-items: center;
}
@media (max-width: 1024px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.hero-right {
order: -1;
}
/* show preview first on tablets */
}
/* 5) Buttons: bigger tap targets + better wrapping */
.btn {
min-height: 44px;
/* iOS accessibility */
padding: 12px 14px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
white-space: nowrap;
}
@media (max-width: 520px) {
.cta-row {
display: grid;
gap: 10px;
margin-top: 14px;
}
.cta-row .btn {
width: 100%;
}
}
/* 6) Nav: avoid cramped links + improve tap area */
.nav a {
padding: 10px 12px;
border-radius: 12px;
}
@media (max-width: 820px) {
.nav a {
padding: 12px 12px;
}
/* bigger tap targets */
}
/* 7) Grids: robust responsive behavior */
.grid {
display: grid;
gap: 14px;
}
.grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px) {
.grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.grid-3 {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.grid-4 {
grid-template-columns: 1fr;
}
}
/* 8) Cards: improve internal spacing on mobile */
.card,
.price-card,
.strip-item,
.commit,
.faq-item {
border-radius: 18px;
}
@media (max-width: 520px) {
.card {
padding: 16px 14px;
}
.price-card {
padding: 16px 14px;
}
.strip-item {
padding: 14px;
}
}
/* 9) Pricing: keep the “Most Popular” ribbon visible + not cut off */
.price-card {
overflow: hidden;
}
.ribbon {
top: 12px;
right: 12px;
}
.amount {
font-size: clamp(30px, 6vw, 36px);
}
/* 10) FAQ: improve readability and finger-friendly summary */
.faq-item summary {
padding: 16px 16px;
line-height: 1.35;
}
.faq-item p {
padding: 0 16px 16px;
}
@media (max-width: 520px) {
.faq-item summary::after {
right: 14px;
}
}
/* 11) Forms: better spacing and input sizes on iOS */
input,
select,
textarea {
width: 100%;
min-height: 44px;
border-radius: 14px;
padding: 12px 12px;
font-size: 16px;
/* prevents iOS zoom */
}
/* 12) Smooth scroll with sticky header offset */
section {
scroll-margin-top: 90px;
}
html {
scroll-behavior: smooth;
}
/* 13) Reduce heavy motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
html {
scroll-behavior: auto;
}
}
/* Safe area insets for notch devices */
body {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* ============================
Pricing footnote (enhanced)
Paste at END of styles.css
============================ */
.pricing-foot {
margin-top: 18px;
display: grid;
gap: 12px;
}
.pricing-note {
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px;
align-items: start;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, .12);
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
padding: 14px;
box-shadow: 0 18px 60px rgba(0, 0, 0, .30);
}
.note-icon {
width: 44px;
height: 44px;
border-radius: 16px;
display: grid;
place-items: center;
border: 1px solid rgba(70, 130, 180, .30);
background: linear-gradient(180deg, rgba(70, 130, 180, .16), rgba(255, 255, 255, .03));
color: rgba(255, 255, 255, .92);
}
.note-icon .icon {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.note-title {
font-weight: 950;
letter-spacing: -0.01em;
margin-bottom: 4px;
color: rgba(255, 255, 255, .92);
}
.note-text {
margin: 0;
color: rgba(255, 255, 255, .78);
line-height: 1.7;
font-size: 14.5px;
}
.note-grid {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.note-chip {
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(0, 0, 0, .16);
padding: 10px;
}
.chip-k {
display: block;
font-size: 11px;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
margin-bottom: 4px;
}
.chip-v {
display: block;
font-size: 13px;
font-weight: 800;
color: rgba(255, 255, 255, .84);
line-height: 1.35;
}
.pricing-foot-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
color: rgba(255, 255, 255, .60);
font-weight: 750;
font-size: 13px;
}
.pricing-foot-links a {
color: rgba(255, 255, 255, .74);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.pricing-foot-links a:hover {
color: rgba(255, 255, 255, .92);
border-bottom-color: rgba(255, 255, 255, .34);
}
.pricing-foot-links .dot {
opacity: .55;
}
@media (max-width: 980px) {
.note-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.pricing-note {
grid-template-columns: 1fr;
}
.note-icon {
width: 42px;
height: 42px;
}
}
/* =========================================================
Vendor Risk icon polish (optional)
Paste at END of styles.css
Only improves Vendor Risk icons, doesn't break anything.
========================================================= */
#vendor-risk .icon-badge {
width: 42px;
height: 42px;
border-radius: 16px;
}
#vendor-risk .icon-badge .icon {
width: 21px;
height: 21px;
}
/* =========================================================
HOW IT WORKS — layout polish
========================================================= */
.how-grid {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 980px) {
.how-grid {
grid-template-columns: 1fr;
}
}
.how-card {
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(255, 255, 255, .03);
padding: 18px;
}
.step {
display: inline-block;
margin-bottom: 6px;
font-weight: 900;
color: rgba(215, 38, 56, .9);
}
.how-list {
margin: 10px 0 0;
padding-left: 18px;
color: rgba(255, 255, 255, .78);
line-height: 1.7;
}
.how-privacy {
margin-top: 26px;
padding: 18px;
border-radius: 22px;
border: 1px solid rgba(70, 130, 180, .28);
background: linear-gradient(180deg, rgba(70, 130, 180, .14), rgba(255, 255, 255, .03));
}
/* =========================================================
HOW IT WORKS (COMPACT) — layout polish
========================================================= */
.grid-5 {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 980px) {
.grid-5 {
grid-template-columns: 1fr;
}
}
.how-mini {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(255, 255, 255, .03);
padding: 16px;
}
.how-mini h4 {
margin: 6px 0 4px;
font-size: 16px;
}
.how-mini p {
margin: 0;
font-size: 14px;
color: var(--muted);
}
/* =========================================================
PRIVACY CALLOUT — slick internal note
========================================================= */
.privacy-callout {
margin-top: 18px;
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px;
align-items: start;
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, .12);
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
padding: 16px;
box-shadow: 0 18px 60px rgba(0, 0, 0, .30);
}
.privacy-icon {
width: 44px;
height: 44px;
border-radius: 16px;
display: grid;
place-items: center;
border: 1px solid rgba(70, 130, 180, .30);
background: linear-gradient(180deg, rgba(70, 130, 180, .16), rgba(255, 255, 255, .03));
color: rgba(255, 255, 255, .92);
}
.privacy-icon .icon {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.privacy-title {
font-weight: 950;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, .92);
margin-bottom: 4px;
}
.privacy-text {
margin: 0;
color: rgba(255, 255, 255, .78);
line-height: 1.7;
font-size: 14.5px;
}
.privacy-badges {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
@media (max-width: 520px) {
.privacy-callout {
grid-template-columns: 1fr;
}
.privacy-icon {
width: 42px;
height: 42px;
}
}
/* ===========================
TRUST PORTAL PREVIEW
=========================== */
.trust-grid {
margin-top: 22px;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 18px;
align-items: center;
}
@media (max-width: 980px) {
.trust-grid {
grid-template-columns: 1fr;
}
}
.trust-list {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: grid;
gap: 12px;
color: rgba(255, 255, 255, .80);
}
.trust-list strong {
color: rgba(255, 255, 255, .95);
}
/* Mock UI */
.trust-mock {
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, .12);
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
box-shadow: 0 26px 90px rgba(0, 0, 0, .45);
overflow: hidden;
}
.mock-window {
font-size: 14px;
}
.mock-top {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, .10);
background: rgba(0, 0, 0, .18);
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, .35);
}
.mock-title {
margin-left: 10px;
font-weight: 800;
color: rgba(255, 255, 255, .75);
}
.mock-body {
padding: 14px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.mock-card {
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(0, 0, 0, .20);
padding: 12px;
}
.mock-card.wide {
grid-column: span 2;
}
.mock-k {
font-size: 12px;
color: rgba(255, 255, 255, .55);
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
}
.mock-v {
margin-top: 4px;
font-size: 18px;
font-weight: 900;
}
.mock-v.good {
color: #3ddc97;
}
.mock-list {
margin: 6px 0 0;
padding-left: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, .75);
}
.mock-foot {
grid-column: span 2;
display: flex;
gap: 8px;
margin-top: 4px;
}
/* ===========================
SOC 2 READINESS TIMELINE
=========================== */
.timeline-grid {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 1200px) {
.timeline-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.timeline-grid {
grid-template-columns: 1fr;
}
}
.timeline-card {
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(255, 255, 255, .03);
padding: 18px;
position: relative;
}
.phase {
display: inline-block;
margin-bottom: 8px;
font-size: 11px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(70, 130, 180, .9);
}
.timeline-card h3 {
margin: 0 0 6px;
font-size: 18px;
}
.timeline-card p {
margin: 0 0 10px;
color: rgba(255, 255, 255, .78);
line-height: 1.7;
}
.timeline-card ul {
margin: 0;
padding-left: 18px;
color: rgba(255, 255, 255, .80);
line-height: 1.7;
}
.timeline-foot {
margin-top: 20px;
padding: 14px;
border-radius: 20px;
border: 1px solid rgba(215, 38, 56, .28);
background: linear-gradient(180deg, rgba(215, 38, 56, .14), rgba(255, 255, 255, .03));
font-weight: 800;
color: rgba(255, 255, 255, .90);
}
/* ===========================
AUDITOR PERSPECTIVE
=========================== */
.auditor-grid {
margin-top: 22px;
}
.auditor-card h3 {
margin: 8px 0 6px;
}
.auditor-card p {
margin: 0 0 10px;
color: rgba(255, 255, 255, .78);
}
.mini-list {
margin: 0;
padding-left: 18px;
color: rgba(255, 255, 255, .80);
line-height: 1.7;
}
.auditor-foot {
margin-top: 20px;
padding: 14px;
border-radius: 20px;
border: 1px solid rgba(70, 130, 180, .28);
background: linear-gradient(180deg, rgba(70, 130, 180, .14), rgba(255, 255, 255, .03));
font-weight: 800;
color: rgba(255, 255, 255, .90);
}
/* ===========================
PLAN FIT — Premium table styling
=========================== */
.fit-head {
max-width: 920px;
}
/* Outer table */
.fit-table {
margin-top: 20px;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, .12);
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
box-shadow: 0 26px 90px rgba(0, 0, 0, .45);
overflow: hidden;
}
/* Rows */
.fit-row {
display: grid;
grid-template-columns: 170px 1.4fr 1fr;
gap: 14px;
padding: 16px;
border-top: 1px solid rgba(255, 255, 255, .08);
align-items: start;
}
.fit-row:first-child {
border-top: none;
}
/* Header row */
.fit-row--head {
background: rgba(0, 0, 0, .18);
font-weight: 950;
color: rgba(255, 255, 255, .78);
text-transform: uppercase;
letter-spacing: .07em;
font-size: 11px;
}
/* Phase pill */
.week-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(70, 130, 180, .30);
background: rgba(70, 130, 180, .12);
color: rgba(255, 255, 255, .86);
font-weight: 900;
font-size: 12px;
}
/* Text */
.fit-what {
color: rgba(255, 255, 255, .78);
line-height: 1.75;
}
.fit-plan {
color: rgba(255, 255, 255, .82);
}
.plan-stack {
display: grid;
gap: 8px;
}
.plan-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* Notes */
.fit-note {
color: rgba(255, 255, 255, .62);
font-size: 13px;
line-height: 1.6;
}
/* Pills reused */
.pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 11px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(0, 0, 0, .16);
font-weight: 950;
font-size: 12px;
}
.pill.hot {
border-color: rgba(215, 38, 56, .35);
background: rgba(215, 38, 56, .14);
color: rgba(255, 255, 255, .92);
}
.pill.inline {
padding: 6px 10px;
font-size: 12px;
transform: translateY(-1px);
margin: 0 4px;
}
/* Tip footer */
.fit-foot {
margin-top: 18px;
border-radius: 22px;
border: 1px solid rgba(215, 38, 56, .28);
background: radial-gradient(120% 80% at 20% 0%, rgba(215, 38, 56, .18), transparent 60%),
linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
padding: 14px 14px;
box-shadow: 0 18px 60px rgba(0, 0, 0, .30);
}
.fit-foot-inner {
display: flex;
gap: 10px;
align-items: flex-start;
}
.fit-tip {
display: inline-flex;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(215, 38, 56, .30);
background: rgba(215, 38, 56, .12);
font-weight: 950;
font-size: 12px;
color: rgba(255, 255, 255, .86);
white-space: nowrap;
}
.fit-foot-text {
margin: 0;
color: rgba(255, 255, 255, .84);
line-height: 1.7;
font-weight: 800;
}
/* Responsive */
@media (max-width: 980px) {
.fit-row {
grid-template-columns: 1fr;
}
.fit-row--head {
display: none;
}
}
/* ===========================
TRUST PORTAL — Real screenshot gallery
=========================== */
.trust-grid {
margin-top: 22px;
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 18px;
align-items: start;
}
@media (max-width: 980px) {
.trust-grid {
grid-template-columns: 1fr;
}
}
/* Right container (device/gallery frame) */
.portal-gallery {
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, .12);
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
box-shadow: 0 26px 90px rgba(0, 0, 0, .45);
overflow: hidden;
}
.portal-top {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid rgba(255, 255, 255, .10);
background: rgba(0, 0, 0, .18);
}
.portal-badge {
display: inline-flex;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(70, 130, 180, .30);
background: rgba(70, 130, 180, .12);
font-weight: 950;
font-size: 12px;
color: rgba(255, 255, 255, .88);
}
.portal-sub {
color: rgba(255, 255, 255, .65);
font-weight: 800;
font-size: 13px;
}
/* Desktop grid */
.portal-grid {
padding: 14px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
max-height: 520px;
overflow-y: auto;
}
.portal-grid::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.portal-grid::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, .14);
border-radius: 999px;
}
/* iPad + phone: horizontal swipe gallery */
@media (max-width: 820px) {
.portal-grid {
grid-template-columns: unset;
grid-auto-flow: column;
grid-auto-columns: 86%;
overflow-y: hidden;
/* Lock vertical */
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 16px;
max-height: none;
/* Let it flow horizontally */
}
.portal-grid::-webkit-scrollbar {
height: 6px;
/* Horizontal scrollbar height */
}
}
/* Each screenshot “card” */
.portal-shot {
margin: 0;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(0, 0, 0, .18);
overflow: hidden;
scroll-snap-align: start;
box-shadow: 0 18px 60px rgba(0, 0, 0, .30);
}
.portal-shot img {
width: 100%;
height: auto;
display: block;
transform: translateZ(0);
}
/* Footer chips */
.portal-foot {
padding: 12px 14px 14px;
border-top: 1px solid rgba(255, 255, 255, .10);
display: flex;
flex-wrap: wrap;
gap: 8px;
background: rgba(0, 0, 0, .12);
}
/* Left side minor note */
.trust-actions {
margin-top: 12px;
display: grid;
gap: 8px;
}
.trust-note {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, .62);
line-height: 1.6;
}
/* ===========================
VERTICAL TIMELINE (Vakros Path)
=========================== */
/* Container line */
.v-timeline {
position: relative;
border-left: 2px solid rgba(99, 102, 241, 0.3);
/* Indigo-200 equiv */
margin-left: 10px;
padding-left: 30px;
}
@media (min-width: 768px) {
.v-timeline {
margin-left: 0;
}
}
/* Timeline Item Container */
.v-item {
position: relative;
margin-bottom: 48px;
}
.v-item:last-child {
margin-bottom: 0;
}
/* Date Badge (floating left) */
.v-badge {
position: absolute;
top: -4px;
left: -41px;
/* adjusts to align with border */
background: #4f46e5;
/* Indigo-600 */
color: #fff;
font-size: 11px;
font-weight: 800;
padding: 4px 8px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
white-space: nowrap;
}
/* Item Content */
.v-content {
position: relative;
}
.v-title {
font-size: 20px;
font-weight: 800;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 8px;
line-height: 1.3;
}
.v-text {
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 12px;
}
/* Bullet List */
.v-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.v-list li {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
}
.v-dot {
width: 6px;
height: 6px;
background: #818cf8;
/* Indigo-400 */
border-radius: 50%;
margin-right: 10px;
flex-shrink: 0;
}
/* Featured Card (Weeks 6-12) */
.v-item.featured {
padding-left: 0;
/* Reset since wrapper handles spacing */
}
/* The card itself */
.v-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(99, 102, 241, 0.3);
border-radius: 16px;
padding: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.v-card-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-size: 20px;
font-weight: 800;
color: #fff;
margin-bottom: 8px;
}
.v-edge-badge {
background: rgba(99, 102, 241, 0.15);
color: #a5b4fc;
/* Indigo-200 */
font-size: 10px;
text-transform: uppercase;
font-weight: 800;
padding: 4px 8px;
border-radius: 4px;
letter-spacing: 0.05em;
border: 1px solid rgba(99, 102, 241, 0.2);
}
.v-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 16px;
}
@media (max-width: 640px) {
.v-grid {
grid-template-columns: 1fr;
}
}
.v-grid-item {
background: rgba(99, 102, 241, 0.1);
color: #c7d2fe;
/* Indigo-100 */
padding: 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
text-align: center;
border: 1px solid rgba(99, 102, 241, 0.15);
}
/* Green Variant (Week 12+) */
.v-badge.green {
background: #10b981;
/* Emerald-500 */
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}
.v-item.success .v-card {
background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 16px;
padding: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.v-item.success .v-title {
color: #fff;
margin-top: 0;
}
.v-item.success .v-text {
color: rgba(255, 255, 255, 0.85);
}
/* ===========================
VAKROS PATH — + plan fit + 12-week progress
=========================== */
.vakros-path .section-head {
max-width: 960px;
}
/* Progress bar */
.path-progress {
margin-top: 14px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(0, 0, 0, .16);
padding: 12px;
}
.path-track {
display: grid;
grid-template-columns: 2fr 4fr 6fr 2fr;
/* matches 0-2, 2-6, 6-12, 12+ */
gap: 8px;
}
/* Clickable progress bar (no JS) */
.path-track .path-seg {
display: block;
height: 12px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .06);
cursor: pointer;
position: relative;
transition: all 0.2s ease;
}
/* Hover/focus */
.path-track .path-seg:hover {
border-color: rgba(255, 255, 255, .18);
transform: translateY(-1px);
}
.path-track .path-seg:focus-visible {
outline: 2px solid rgba(70, 130, 180, .55);
outline-offset: 2px;
}
.path-seg.seg-1 {
background: rgba(255, 255, 255, .07);
}
.path-seg.seg-2 {
background: rgba(255, 255, 255, .07);
}
.path-seg.seg-3 {
background: rgba(215, 38, 56, .14);
border-color: rgba(215, 38, 56, .20);
}
.path-seg.seg-4 {
background: rgba(70, 130, 180, .12);
border-color: rgba(70, 130, 180, .20);
}
/* Labels become links */
.path-labels {
margin-top: 8px;
display: grid;
grid-template-columns: 2fr 4fr 6fr 2fr;
gap: 8px;
font-size: 12px;
font-weight: 800;
}
.path-labels a {
color: rgba(255, 255, 255, .62);
text-decoration: none;
font-weight: 800;
transition: color 0.2s ease;
}
.path-labels a:hover {
color: rgba(255, 255, 255, .86);
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, .26);
}
/* Make sure anchor scroll doesn't hide under sticky header */
#phase-0-2,
#phase-2-6,
#phase-6-12,
#phase-12-plus {
scroll-margin-top: 100px;
}
/* Active highlight */
.path-seg.is-active {
border-color: rgba(255, 255, 255, .28);
box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
transform: translateY(-1px);
}
.path-labels a.is-active {
color: rgba(255, 255, 255, .92);
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, .30);
text-underline-offset: 3px;
}
/* Make active segment feel “lit” without changing your color theme */
.path-seg.is-active::after {
content: "";
position: absolute;
inset: -8px;
border-radius: 999px;
background: radial-gradient(60% 60% at 50% 50%, rgba(255, 255, 255, .12), transparent 70%);
pointer-events: none;
opacity: .55;
}
/* Grid */
.path-grid {
margin-top: 22px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 1100px) {
.path-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 680px) {
.path-grid {
grid-template-columns: 1fr;
}
}
/* Cards */
.path-card {
border-radius: 22px;
padding: 18px;
border: 1px solid rgba(255, 255, 255, .12);
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
box-shadow: 0 20px 70px rgba(0, 0, 0, .45);
display: flex;
flex-direction: column;
gap: 10px;
}
.path-card.edge {
border-color: rgba(215, 38, 56, .35);
}
.path-card.revenue {
border-color: rgba(70, 130, 180, .35);
}
/* Meta row */
.path-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Week pill */
.week-pill {
display: inline-flex;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .14);
background: rgba(0, 0, 0, .18);
font-weight: 900;
font-size: 12px;
color: rgba(255, 255, 255, .85);
}
/* Vakros edge badge */
.edge-badge {
display: inline-flex;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(215, 38, 56, .40);
background: rgba(215, 38, 56, .14);
font-weight: 900;
font-size: 12px;
color: rgba(255, 255, 255, .9);
}
/* Best fit mini */
.plan-fit-mini {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
}
@media (max-width: 680px) {
.plan-fit-mini {
margin-left: 0;
}
}
.fit-k {
font-size: 11px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
}
/* Pills */
.plan-pills {
display: inline-flex;
gap: 8px;
flex-wrap: wrap;
}
.pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 11px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(0, 0, 0, .16);
font-weight: 950;
font-size: 12px;
color: rgba(255, 255, 255, .86);
}
.pill.hot {
border-color: rgba(215, 38, 56, .35);
background: rgba(215, 38, 56, .14);
color: rgba(255, 255, 255, .92);
}
/* Copy */
.path-card h3 {
margin: 4px 0 2px;
font-size: 18px;
line-height: 1.3;
}
.path-desc {
margin: 0;
color: rgba(255, 255, 255, .75);
line-height: 1.7;
font-size: 14px;
}
.path-list {
margin: 6px 0 0;
padding-left: 18px;
color: rgba(255, 255, 255, .82);
line-height: 1.7;
font-weight: 700;
font-size: 13px;
}
/* Mobile labels: tighten */
@media (max-width: 680px) {
.path-labels {
font-size: 11px;
}
}
/* =========================
Pricing Intro Section
========================= */
/* Anchor targets: offset so sticky headers don't cover content */
.anchor-target {
position: relative;
top: -96px;
height: 1px;
}
/* Pricing intro layout */
.pricing-intro {
padding: 5.5rem 0 3.5rem;
}
.pricing-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 3.5rem;
align-items: center;
}
.pricing-label {
display: inline-block;
font-size: .72rem;
letter-spacing: .16em;
padding: .65rem 1.05rem;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(255, 255, 255, .06);
border-radius: 999px;
color: rgba(255, 255, 255, .70);
}
.pricing-title {
margin: 1.25rem 0 1.25rem;
font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-size: clamp(2.4rem, 4vw, 3.4rem);
line-height: 1.05;
letter-spacing: -0.02em;
color: rgba(255, 255, 255, .86);
}
.pricing-right {
color: rgba(255, 255, 255, .70);
max-width: 44ch;
}
.pricing-block {
margin-bottom: 1.4rem;
}
.pricing-block h4 {
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: .55rem;
color: rgba(255, 255, 255, .88);
}
.pricing-block p {
line-height: 1.65;
margin: 0;
}
.pricing-micro {
margin-top: 1.25rem;
font-size: .95rem;
color: rgba(255, 255, 255, .80);
}
/* Plan scroll pills */
.pricing-pills {
display: flex;
gap: .6rem;
flex-wrap: wrap;
margin-top: .6rem;
}
.pricing-pills .pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .55rem .85rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(0, 0, 0, .18);
color: rgba(255, 255, 255, .82);
text-decoration: none;
font-size: .9rem;
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.pricing-pills .pill:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .22);
}
/* Scroll anchor highlighting (no JS) */
.pricing-card:target {
outline: 1px solid rgba(255, 255, 255, .18);
box-shadow: 0 0 0 3px rgba(215, 38, 56, .12);
border-radius: 18px;
}
/* Highlight matching pill when on hash */
body:has(#starter:target) .pill[href="#starter"],
body:has(#growth:target) .pill[href="#growth"],
body:has(#business:target) .pill[href="#business"],
body:has(#enterprise:target) .pill[href="#enterprise"] {
background: rgba(215, 38, 56, .16);
border-color: rgba(215, 38, 56, .36);
color: rgba(255, 255, 255, .92);
}
/* Subtle CSS fade-in (no JS) */
.section-fade {
opacity: 1;
transform: none;
}
@supports (animation-timeline: view()) {
.section-fade {
opacity: 0;
transform: translateY(12px);
animation: fadeUp linear both;
animation-timeline: view();
animation-range: entry 15% cover 25%;
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
}
/* Responsive */
@media (max-width: 980px) {
.pricing-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.pricing-right {
max-width: 60ch;
}
}
/* Pricing Grid Cards Layout */
.pricing-grid-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
align-items: start;
}
@media (max-width:980px) {
.pricing-grid-cards {
grid-template-columns: 1fr;
}
}
/* Fade-in on scroll (no JS) */
.reveal {
opacity: 1;
transform: none;
}
@supports (animation-timeline: view()) {
.reveal {
opacity: 0;
transform: translateY(10px);
animation: revealUp .7s ease forwards;
animation-timeline: view();
animation-range: entry 10% cover 22%;
}
.reveal-1 {
animation-delay: 0ms;
}
.reveal-2 {
animation-delay: 80ms;
}
.reveal-3 {
animation-delay: 160ms;
}
.reveal-4 {
animation-delay: 240ms;
}
@keyframes revealUp {
to {
opacity: 1;
transform: translateY(0);
}
}
}
/* =========================
Global Scroll Behavior
========================= */
/* Smooth scroll */
html {
scroll-behavior: smooth;
}
/* Offset for sticky header when jumping to anchors */
section[id] {
scroll-margin-top: 112px;
}
/* Active pill highlight (no JS) — uses :has() */
@supports selector(body:has(#x:target)) {
body:has(#how-it-works:target) .builtfor-pills a[href="#how-it-works"],
body:has(#timeline:target) .builtfor-pills a[href="#timeline"],
body:has(#pricing:target) .builtfor-pills a[href="#pricing"],
body:has(#trust:target) .builtfor-pills a[href="#trust"],
body:has(#ai-governance:target) .builtfor-pills a[href="#ai-governance"] {
background: rgba(215, 38, 56, 0.18);
border-color: rgba(215, 38, 56, 0.45);
color: rgba(255, 255, 255, 0.92);
box-shadow: 0 0 0 3px rgba(215, 38, 56, 0.12);
}
}
/* Optional: highlight the section itself when targeted */
:target {
outline: 1px solid rgba(255, 255, 255, .12);
box-shadow: 0 0 0 3px rgba(215, 38, 56, .08);
border-radius: 18px;
}
/* =========================
Built For Section
========================= */
.builtfor-pills {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.builtfor-pills .pill {
display: inline-flex;
align-items: center;
padding: 8px 20px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease;
}
.builtfor-pills .pill:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.proof-line {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 24px;
color: rgba(255, 255, 255, 0.7);
}
.proof-dot {
display: inline-block;
width: 8px;
height: 8px;
margin-top: 8px;
border-radius: 50%;
background: #38bdf8;
flex-shrink: 0;
}
.proof-line p {
max-width: 768px;
line-height: 1.7;
margin: 0;
}
.micro-proof {
display: flex;
flex-wrap: wrap;
gap: 24px 24px;
margin-top: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 0.55);
}
/* =========================
How It Works - Simplified
========================= */
.how-card {
padding: 32px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
}
.how-step {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.6);
margin: 0 0 12px 0;
}
.how-card h3 {
font-size: 18px;
font-weight: 600;
margin: 0 0 8px 0;
color: rgba(255, 255, 255, 0.9);
}
.how-card p {
line-height: 1.7;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
/* =========================
New Pricing Section
========================= */
.pricing-new {
padding: 96px 0;
}
.pricing-header-new {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: flex-start;
margin-bottom: 56px;
}
.pricing-header-left h2 {
margin: 24px 0 16px 0;
font-size: clamp(2.4rem, 4vw, 3.4rem);
line-height: 1.05;
letter-spacing: -0.02em;
}
.pricing-lead {
max-width: 560px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.7);
}
/* 12-week timeline */
.pricing-timeline {
padding: 24px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
}
.timeline-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.6);
margin: 0 0 8px 0;
}
.timeline-desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
margin: 0 0 20px 0;
}
.timeline-bar {
display: flex;
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.timeline-seg {
flex: 1;
}
.timeline-seg.seg-1 {
background: #dc2626;
}
.timeline-seg.seg-2 {
background: #ef4444;
}
.timeline-seg.seg-3 {
background: #f87171;
}
.timeline-seg.seg-4 {
background: #fca5a5;
}
.timeline-links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-top: 20px;
}
.timeline-link {
padding: 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.2);
text-decoration: none;
transition: background 0.2s ease;
}
.timeline-link:hover {
background: rgba(255, 255, 255, 0.05);
}
.timeline-week {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 4px 0;
}
.timeline-phase {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
/* Pricing cards grid */
.pricing-cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.pricing-card-new {
padding: 32px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
position: relative;
scroll-margin-top: 112px;
}
.pricing-card-new.featured {
border-color: rgba(239, 68, 68, 0.4);
box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4);
}
.card-badge {
position: absolute;
right: 16px;
top: 16px;
padding: 6px 12px;
border-radius: 999px;
background: #dc2626;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
}
.pricing-card-new h3 {
font-size: 18px;
font-weight: 600;
margin: 0 0 4px 0;
}
.card-desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 24px 0;
}
.card-price {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
}
.price-amount {
font-size: 36px;
font-weight: 700;
}
.price-per {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
.card-overage {
font-size: 14px;
color: #f87171;
margin: 0 0 24px 0;
}
.card-features {
list-style: none;
padding: 0;
margin: 0 0 16px 0;
}
.card-features li {
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.8;
margin-bottom: 8px;
}
.card-limits-label {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
margin: 16px 0 4px 0;
}
.card-limits {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 24px 0;
}
.card-note {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
text-align: center;
margin: 12px 0 0 0;
}
/* Responsive */
@media (max-width: 1200px) {
.pricing-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 980px) {
.pricing-header-new {
grid-template-columns: 1fr;
gap: 40px;
}
.timeline-links {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.pricing-cards-grid {
grid-template-columns: 1fr;
}
.timeline-links {
grid-template-columns: repeat(2, 1fr);
}
}
/* =========================
Simple CTA Sections
========================= */
.cta-simple {
padding: 96px 0;
}
.cta-simple-content {
max-width: 640px;
margin: 0 auto;
text-align: center;
}
.cta-simple-content h2 {
font-size: 30px;
font-weight: 600;
margin: 0 0 12px 0;
}
.cta-simple-content p {
color: rgba(255, 255, 255, 0.7);
margin: 0 0 32px 0;
}
/* =========================
Simplified FAQ
========================= */
.faq-simple {
padding: 80px 0;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 40px;
}
.faq-card {
padding: 32px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
}
.faq-card h3 {
font-size: 18px;
font-weight: 600;
margin: 0 0 8px 0;
}
.faq-card p {
line-height: 1.7;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
@media (max-width: 980px) {
.faq-grid {
grid-template-columns: 1fr;
}
}
/* Proof line updates */
.proof-content {
max-width: 768px;
}
.proof-content p {
line-height: 1.7;
margin: 0;
}
.proof-secondary {
margin-top: 12px;
color: rgba(255, 255, 255, 0.6) !important;
}
.proof-highlight {
color: #f87171;
font-weight: 600;
}
.cta-note {
margin-top: 12px;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
/* =========================
Light-themed Business Card
========================= */
.pricing-card-light {
position: relative;
padding: 32px;
border-radius: 16px;
border: 1px solid #e2e8f0;
background: #ffffff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
scroll-margin-top: 112px;
}
.card-badge-light {
position: absolute;
top: -12px;
right: 24px;
padding: 6px 16px;
border-radius: 999px;
background: #4f46e5;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
color: #ffffff;
}
.pricing-card-light h3 {
font-size: 20px;
font-weight: 600;
color: #0f172a;
margin: 0 0 8px 0;
}
.card-desc-light {
font-size: 14px;
color: #475569;
margin: 0 0 24px 0;
}
.card-price-light {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 8px;
}
.price-amount-light {
font-size: 36px;
font-weight: 700;
color: #0f172a;
}
.price-per-light {
font-size: 14px;
color: #64748b;
}
.card-includes {
font-size: 14px;
color: #64748b;
margin: 0 0 24px 0;
}
.card-includes strong {
font-weight: 600;
color: #0f172a;
}
.card-features-light {
list-style: none;
padding: 0;
margin: 0 0 16px 0;
}
.card-features-light li {
font-size: 14px;
color: #334155;
line-height: 1.8;
margin-bottom: 12px;
}
.card-overage-light {
font-size: 12px;
color: #64748b;
margin: 0 0 32px 0;
}
.btn-light {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px 16px;
border-radius: 12px;
background: #4f46e5;
color: #ffffff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease;
}
.btn-light:hover {
background: #4338ca;
}
.card-note-light {
font-size: 12px;
color: #64748b;
text-align: center;
margin: 16px 0 0 0;
}
/* Enterprise card variations */
.enterprise-card {
border-color: #cbd5e1;
opacity: 0.9;
}
.card-badge-enterprise {
position: absolute;
top: -12px;
right: 24px;
padding: 6px 16px;
border-radius: 999px;
background: #1e293b;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
color: #ffffff;
}
/* Vendor count nudges */
.card-nudge {
font-size: 13px;
color: rgba(255, 255, 255, 0.65);
margin: 8px 0 0 0;
font-style: italic;
}
.card-nudge strong {
color: #f87171;
font-weight: 600;
font-style: normal;
}
.card-nudge-light {
font-size: 13px;
color: #64748b;
margin: 8px 0 0 0;
font-style: italic;
}
.card-nudge-light strong {
color: #4f46e5;
font-weight: 600;
font-style: normal;
}
/* Business card dark theme badge */
.card-badge-business {
position: absolute;
right: 16px;
top: 16px;
padding: 6px 12px;
border-radius: 999px;
background: #4f46e5;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
color: #ffffff;
}
.featured-business {
border-color: rgba(79, 70, 229, 0.3);
box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.2);
}
.card-includes-dark {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 24px 0;
}
.card-includes-dark strong {
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}