/*
* =============================================================================
* ValueIX.ai — Homepage Stylesheet (v5)
* =============================================================================
*
* FONTS (add this to your before this stylesheet):
*
*
* USAGE:
*
*
* TABLE OF CONTENTS:
* 1. Design Tokens (CSS Variables)
* 2. Reset & Base
* 3. Navigation
* 4. Hero Section
* 5. Before / After Band
* 6. Product Screen Section (Rotating Screenshots)
* 7. Logo Bar
* 8. Section Base Styles
* 9. Feature Strips
* 10. Quotes / Testimonials
* 11. Personas (Who It's For)
* 12. Pricing
* 13. FAQ / GEO / AEO Section
* 14. CTA Band
* 15. Footer
* 16. Animations & Scroll Reveals
* 17. Responsive / Media Queries
* =============================================================================
*/
/* =============================================================================
1. DESIGN TOKENS
============================================================================= */
:root {
/* Teal ramp */
--t9: #041212;
--t8: #0a2828;
--t7: #0f3c3c;
--t6: #154e4e;
--t5: #1a8080;
--t4: #1fa8a8;
--t3: #2dcece;
--t2: #72e0e0;
--t1: #b8f0f0;
--t0: #e8fafa;
/* Blue ramp */
--b6: #1e52a8;
--b5: #2563eb;
--b4: #4d8ef0;
/* Orange accent */
--orange: #f4793a;
--orange-lt: #f69060;
/* Semantic colours */
--red: #dc2626;
--amber: #d97706;
--green: #16a34a;
/* Nav */
--nav-h: 80px;
}
/* ── Light theme (default) ── */
[data-theme="light"], :root {
--bg: #ffffff;
--bg2: #f0f8f8;
--card: #ffffff;
--txt: #041414;
--txt2: #1a5050;
--txt3: #3a8080;
--bd: rgba(26,110,110,.12);
--nav-bg: rgba(255,255,255,.97);
--nav-bd: rgba(26,110,110,.1);
--nav-tx: #041414;
--alt: #f0f8f8;
/* Section backgrounds */
--s1: #ffffff;
--s2: #f0f8f8;
--s3: #0f3c3c; /* dark — product screen */
--s4: #f5fafa;
--s6: #041414; /* near-black — quotes */
--hero: linear-gradient(160deg, #0a2828 0%, #0f4242 45%, #0d2840 100%);
}
/* ── Dark theme ── */
[data-theme="dark"] {
--bg: #081616;
--bg2: #0b2020;
--card: #0d2626;
--txt: #e4f6f6;
--txt2: #7ec8c8;
--txt3: #2e8080;
--bd: rgba(31,168,168,.14);
--nav-bg: rgba(8,22,22,.96);
--nav-bd: rgba(31,168,168,.15);
--nav-tx: #e4f6f6;
--alt: #0b1f1f;
--s1: #081616;
--s2: #0b1e1e;
--s3: #041010;
--s4: #0d2828;
--s6: #081616;
--hero: linear-gradient(160deg, #081616 0%, #0b2c2c 55%, #081a2a 100%);
}
/* =============================================================================
2. RESET & BASE
============================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { overflow-x: hidden; }
body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--txt);
line-height: 1.6;
transition: background .3s, color .3s;
overflow-x: hidden;
}
h1, h2, h3 { font-family: 'Playfair Display', serif; }
/* =============================================================================
3. NAVIGATION
============================================================================= */
nav {
position: fixed; top: 0; left: 0; right: 0;
height: var(--nav-h);
background: var(--nav-bg);
border-bottom: 1px solid var(--nav-bd);
backdrop-filter: blur(16px);
z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 0 5%;
}
.logo {
font-family: "Helvetica Now", "Helvetica Neue", Helvetica, Arial, sans-serif;
/* font-family: 'Playfair Display', serif; */
font-size: 1.45rem; font-weight: 700;
color: var(--nav-tx); text-decoration: none;
display: flex; flex-direction: column; line-height: 1.1;
}
.logo .ix { color: var(--t4); }
.logo .ai { font-size: .82rem; color: var(--t4); font-weight: 400; font-family: 'Inter', sans-serif; }
.logo .tagline { font-size: .58rem; font-weight: 400; font-family: 'Inter', sans-serif; color: var(--txt3); letter-spacing: .01em; margin-top: .2rem; font-style: italic; white-space: nowrap; }
.tagline {
font-size: .58rem;
font-weight: 400;
font-family: 'Inter', sans-serif;
color: var(--txt3);
letter-spacing: .01em;
margin-top: .2rem;
font-style: italic;
white-space: nowrap;
}
.logo .ix { color: var(--t4); letter-spacing: 0.01em; }
.logo .brand2 { color: var(--txt); letter-spacing: 0.04em; }
.logo .brand { white-space: nowrap; }
.logo-img {
width: 200px;
height: auto;
display: block;
}
.logo { gap: 0.2rem; } /* optional spacing between image and tagline */
.nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav-links a {
color: var(--nav-tx); text-decoration: none;
font-size: .875rem; font-weight: 500; opacity: .65;
transition: opacity .2s, color .2s;
}
.nav-links a:hover { opacity: 1; color: var(--t5); }
.nav-r { display: flex; align-items: center; gap: .6rem; }
.btn-ghost {
background: transparent; border: none;
color: var(--nav-tx); font-family: 'Inter', sans-serif;
font-size: .875rem; font-weight: 500;
cursor: pointer; padding: .5rem .9rem; opacity: .6;
transition: opacity .2s; text-decoration: none;
}
.btn-ghost:hover { opacity: 1; }
.btn-demo {
background: transparent; color: var(--nav-tx);
border: 1.5px solid var(--bd);
font-family: 'Inter', sans-serif; font-size: .875rem; font-weight: 500;
cursor: pointer; padding: .55rem 1.2rem; border-radius: 6px;
transition: border-color .2s, color .2s; text-decoration: none;
}
.btn-demo:hover { border-color: var(--t5); color: var(--t5); }
.btn-trial {
background: var(--orange); color: #fff; border: none;
font-family: 'Inter', sans-serif; font-size: .875rem; font-weight: 600;
cursor: pointer; padding: .6rem 1.4rem; border-radius: 6px;
transition: background .2s, transform .15s; text-decoration: none;
}
.btn-trial:hover { background: var(--orange-lt); transform: translateY(-1px); }
.tbtn {
background: transparent; border: 1.5px solid var(--bd);
border-radius: 6px; width: 34px; height: 34px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
font-size: .85rem; color: var(--nav-tx);
transition: border-color .2s;
}
.tbtn:hover { border-color: var(--t5); }
.vx-nav-burger {
display: none;
background: transparent;
border: 1.5px solid var(--bd);
border-radius: 10px;
width: 44px;
height: 44px;
cursor: pointer;
align-items: center;
justify-content: center;
}
.vx-burger {
display: block;
width: 18px;
height: 2px;
background: var(--nav-tx);
position: relative;
}
.vx-burger::before,
.vx-burger::after {
content: "";
position: absolute;
left: 0;
width: 18px;
height: 2px;
background: var(--nav-tx);
}
.vx-burger::before { top: -6px; }
.vx-burger::after { top: 6px; }
.vx-nav-overlay {
position: fixed;
inset: 0;
background: rgba(4,20,20,.55);
backdrop-filter: blur(2px);
z-index: 140;
}
.vx-nav-drawer {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: min(420px, 92vw);
background: rgba(255,255,255,.98);
border-left: 1px solid var(--nav-bd);
box-shadow: -18px 0 60px rgba(4,20,20,.28);
z-index: 150;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform .22s ease;
}
.vx-nav-drawer[data-open="true"] {
transform: translateX(0);
}
.vx-drawer-head {
height: var(--nav-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.1rem;
border-bottom: 1px solid rgba(26,110,110,.12);
}
.vx-drawer-title {
font-family: 'Inter', sans-serif;
font-weight: 800;
color: rgba(4,20,20,.92);
}
.vx-drawer-close {
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid rgba(26,110,110,.16);
background: rgba(255,255,255,.9);
color: rgba(4,20,20,.88);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
.vx-drawer-scroll {
padding: 1.05rem 1.1rem;
overflow: auto;
-webkit-overflow-scrolling: touch;
flex: 1 1 auto;
}
.vx-drawer-link {
display: block;
padding: .9rem .25rem;
text-decoration: none;
color: rgba(4,20,20,.92);
font-family: 'Inter', sans-serif;
font-weight: 700;
border-bottom: 1px solid rgba(26,110,110,.10);
}
.vx-drawer-link:last-child {
border-bottom: 0;
}
.vx-drawer-cta {
position: sticky;
bottom: 0;
padding: 1rem 1.1rem;
background: rgba(255,255,255,.98);
border-top: 1px solid rgba(26,110,110,.12);
}
.vx-drawer-trial {
display: block;
text-align: center;
background: var(--orange);
color: #fff;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-weight: 800;
padding: .85rem 1rem;
border-radius: 12px;
}
.vx-drawer-trial:hover {
background: var(--orange-lt);
}
@media (max-width: 900px) {
nav { padding: 0 1.05rem; }
.nav-links,
.nav-r .btn-ghost,
.nav-r .btn-demo,
.nav-r .tbtn {
display: none;
}
.nav-r { gap: .65rem; }
.nav-r .btn-trial {
font-size: .8rem;
padding: .45rem .85rem;
border-radius: 999px;
white-space: nowrap;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
}
.logo-img { width: 170px; }
.vx-nav-burger {
display: inline-flex;
}
}
/* =============================================================================
4. HERO SECTION
============================================================================= */
.hero {
background: var(--hero);
display: flex; flex-direction: column; align-items: center;
padding: calc(var(--nav-h) + 5rem) 5% 5rem;
position: relative; overflow: visible; text-align: center;
}
@media (max-width: 900px) {
.hero {
overflow-x: clip;
}
}
.hero--half {
padding: calc(var(--nav-h) + 2.6rem) 5% 2.6rem;
}
.hero--half .hero-inner {
grid-template-columns: 1fr;
max-width: 1160px;
}
.hero--half .hero-left {
padding-right: 0;
}
.hero--half .hero-left .hero-ctas {
justify-content: flex-start;
}
.hero::before {
content: '';
position: absolute; top: -5%; left: 50%; transform: translateX(-50%);
width: 1000px; height: 700px;
background: radial-gradient(ellipse, rgba(31,168,168,.2) 0%, transparent 65%);
pointer-events: none;
}
.hero-pill {
display: inline-flex; align-items: center; gap: .45rem;
background: rgba(31,168,168,.1); border: 1px solid rgba(31,168,168,.22);
border-radius: 100px; padding: .32rem .95rem;
font-size: .7rem; font-weight: 700; color: var(--t3);
letter-spacing: .08em; text-transform: uppercase;
margin-bottom: 1.75rem;
animation: fadeUp .5s .1s both;
}
.hero-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--t4); animation: pulse 2s infinite;
}
.hero h1 {
font-size: clamp(2.8rem, 6vw, 5.4rem);
font-weight: 800; line-height: 1.05; letter-spacing: -.028em;
color: #fff; margin-bottom: 1.25rem;
animation: fadeUp .5s .2s both; max-width: 860px;
}
.hero h1 .white { color: #ffffff; }
.hero h1 .orange { color: var(--orange); }
.hero h1 em { font-style: normal; color: var(--t3); } /* fallback */
.hero-sub {
font-size: clamp(.95rem, 1.7vw, 1.1rem); color: rgba(255,255,255,.5);
max-width: 500px; margin: 0 auto 2.25rem; line-height: 1.75; font-weight: 300;
animation: fadeUp .5s .3s both;
}
.hero-ctas {
display: flex; gap: .85rem; align-items: center;
justify-content: center; flex-wrap: wrap;
margin-bottom: 1.5rem; animation: fadeUp .5s .4s both;
}
.page-body {
background: var(--s1);
padding: 4rem 5%;
}
.page-body-inner {
max-width: 1160px;
margin: 0 auto;
}
.page-body h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.6rem, 3.2vw, 2.2rem);
color: var(--txt);
margin-bottom: .75rem;
}
.page-body p {
color: var(--txt2);
max-width: 120ch;
line-height: 1.75;
}
@media (max-width: 900px) {
.page-body {
padding: 3rem 6%;
}
.page-body-inner {
max-width: 680px;
}
.page-body p {
max-width: 70ch;
}
}
.hero-inner {
width: 100%;
max-width: 1160px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 2.6rem;
align-items: start;
position: relative;
z-index: 2;
text-align: left;
}
.hero-left {
padding-right: 1rem;
}
.hero-left .hero-sub {
margin-left: 0;
margin-right: 0;
}
.hero-left .hero-ctas {
justify-content: flex-start;
}
.vx-index-card {
width: 100%;
max-width: 500px;
justify-self: end;
background: rgba(255,255,255,.96);
border: 1px solid rgba(26,110,110,.16);
border-radius: 26px;
box-shadow:
0 30px 80px rgba(4,20,20,.24),
0 10px 22px rgba(4,20,20,.12);
padding: 0;
position: relative;
transform: translateY(.7rem);
overflow: hidden;
}
@media (max-width: 900px) {
.hero-inner {
grid-template-columns: 1fr;
gap: 1.65rem;
text-align: center;
}
.hero-left {
padding-right: 0;
}
.hero-left .hero-sub {
margin-left: auto;
margin-right: auto;
}
.hero-left .hero-ctas {
justify-content: center;
}
.vx-index-card {
justify-self: stretch;
max-width: 680px;
width: 100%;
transform: translateY(0);
margin: 0 auto;
}
}
.vx-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0;
background: rgba(255,255,255,.96);
border-bottom: 1px solid rgba(26,110,110,.14);
}
.vx-tab {
appearance: none;
width: 100%;
border: 0;
background: transparent;
color: rgba(4,20,20,.88);
border-radius: 0;
padding: .78rem .85rem;
font-size: .86rem;
font-weight: 800;
letter-spacing: .01em;
cursor: pointer;
transition: background .18s ease, color .18s ease, filter .18s ease, box-shadow .18s ease;
}
.vx-tab:hover {
filter: brightness(1.04);
}
.vx-tab[data-vx-tab-btn="assessment"] {
border-top-left-radius: 26px;
}
.vx-tab[data-vx-tab-btn="demo"] {
border-top-right-radius: 26px;
}
.vx-tab[aria-selected="false"] {
background: rgba(255,255,255,.96);
}
.vx-tab[data-vx-tab-btn="demo"][aria-selected="false"] {
background: rgba(12,46,46,.92);
color: rgba(255,255,255,.96);
}
.vx-tab[data-vx-tab-btn="assessment"][aria-selected="true"] {
background: rgba(255,255,255,.96);
box-shadow: inset 0 -2px 0 rgba(31,168,168,.72);
}
.vx-tab[data-vx-tab-btn="demo"][aria-selected="true"] {
background: rgba(31,168,168,.92);
color: rgba(255,255,255,.96);
}
.vx-index-card[data-vx-active-tab="assessment"] .vx-tab[data-vx-tab-btn="demo"] {
display: none;
}
.vx-index-card[data-vx-active-tab="assessment"] .vx-tab[data-vx-tab-btn="assessment"] {
background: rgba(31,168,168,.92);
color: rgba(255,255,255,.96);
text-align: left;
padding-left: 1.1rem;
}
.vx-index-card[data-vx-active-tab="demo"] .vx-tab[data-vx-tab-btn="assessment"] {
background: transparent;
color: rgba(4,20,20,.70);
text-align: left;
padding-left: 1.1rem;
}
.vx-demo-success {
padding: .7rem .8rem;
border-radius: 14px;
border: 1px solid rgba(26,110,110,.22);
background: rgba(31,168,168,.08);
color: rgba(4,20,20,.86);
font-weight: 700;
font-size: .88rem;
}
.vx-survey,
.vx-results {
display: flex;
flex-direction: column;
}
.vx-survey[hidden],
.vx-results[hidden] {
display: none !important;
}
.vx-survey {
min-height: 540px;
}
.vx-card-head {
padding: 1.15rem 1.25rem .95rem;
background:
radial-gradient(900px 220px at 15% 0%, rgba(114,224,224,.22) 0%, rgba(114,224,224,0) 62%),
radial-gradient(640px 260px at 85% 10%, rgba(77,142,240,.18) 0%, rgba(77,142,240,0) 60%),
linear-gradient(160deg, rgba(10,40,40,.96) 0%, rgba(15,60,60,.94) 55%, rgba(13,40,64,.94) 100%);
border-bottom: 1px solid rgba(255,255,255,.10);
}
.vx-card-body {
padding: 1.05rem 1.25rem 1.15rem;
display: flex;
flex-direction: column;
gap: .9rem;
}
.vx-index-badge {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .62rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.78);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.16);
padding: .28rem .62rem;
border-radius: 100px;
}
.vx-index-title {
font-family: 'Playfair Display', serif;
font-size: 1.55rem;
font-weight: 800;
color: rgba(255,255,255,.96);
margin-top: .65rem;
line-height: 1.15;
}
.vx-index-sub {
margin-top: .45rem;
font-size: .88rem;
color: rgba(255,255,255,.62);
line-height: 1.65;
}
.vx-index-progress {
margin-top: .9rem;
background: rgba(255,255,255,.12);
height: 6px;
border-radius: 999px;
overflow: hidden;
}
.vx-index-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, rgba(31,168,168,.95), rgba(77,142,240,.92));
transition: width .25s ease;
}
.vx-index-q {
margin-top: 0;
}
.vx-index-q {
padding: 0;
}
.vx-index-q-k {
font-size: .62rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(4,20,20,.58);
}
.vx-index-q-t {
margin-top: .35rem;
font-size: 1.03rem;
font-weight: 700;
color: rgba(4,20,20,.92);
line-height: 1.35;
}
.vx-index-answers {
margin-top: .7rem;
display: grid;
grid-template-columns: 1fr;
gap: .6rem;
}
.vx-ans {
width: 100%;
text-align: left;
border: 1px solid rgba(26,110,110,.18);
background: rgba(255,255,255,.94);
border-radius: 16px;
padding: .72rem .85rem;
font-size: .86rem;
font-weight: 600;
color: rgba(4,20,20,.84);
cursor: pointer;
transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.vx-ans:hover {
transform: translateY(-1px);
border-color: rgba(31,168,168,.45);
box-shadow: 0 10px 24px rgba(4,20,20,.08);
}
.vx-ans:focus-visible {
outline: none;
box-shadow:
0 10px 24px rgba(4,20,20,.08),
0 0 0 4px rgba(31,168,168,.14);
border-color: rgba(31,168,168,.55);
}
.vx-ans.active {
border-color: rgba(31,168,168,.70);
background: linear-gradient(180deg, rgba(232,250,250,.95), rgba(255,255,255,.92));
box-shadow:
0 14px 34px rgba(31,168,168,.16),
inset 0 0 0 1px rgba(31,168,168,.14);
}
.vx-index-controls {
margin-top: auto;
padding-top: .9rem;
border-top: 1px solid rgba(26,110,110,.10);
display: flex;
gap: .65rem;
align-items: center;
}
.vx-btn-secondary,
.vx-btn-primary {
border-radius: 14px;
padding: .78rem 1rem;
font-size: .92rem;
font-weight: 800;
cursor: pointer;
transition: transform .12s ease, filter .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.vx-btn-secondary {
flex: 0 0 120px;
background: rgba(4,20,20,.02);
border: 1px solid rgba(26,110,110,.18);
color: rgba(4,20,20,.82);
}
.vx-btn-secondary:hover {
transform: translateY(-1px);
background: rgba(4,20,20,.04);
border-color: rgba(31,168,168,.35);
}
.vx-btn-secondary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.vx-btn-secondary:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(31,168,168,.14);
border-color: rgba(31,168,168,.45);
}
.vx-btn-primary {
flex: 1;
border: none;
color: #fff;
background: linear-gradient(135deg, rgba(244,121,58,.96), rgba(246,144,96,.96));
box-shadow: 0 14px 30px rgba(244,121,58,.18);
}
.vx-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.03); }
.vx-btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.vx-btn-primary:focus-visible {
outline: none;
box-shadow:
0 14px 30px rgba(244,121,58,.18),
0 0 0 4px rgba(244,121,58,.18);
}
.vx-index-status {
margin-top: .1rem;
font-size: .82rem;
font-weight: 700;
min-height: 1.15em;
}
.vx-results-h {
font-family: 'Playfair Display', serif;
font-size: 1.35rem;
font-weight: 800;
color: rgba(255,255,255,.96);
margin-top: .55rem;
line-height: 1.15;
}
.vx-results-sub {
margin-top: .35rem;
font-size: .86rem;
color: rgba(255,255,255,.62);
line-height: 1.5;
}
.vx-results-intro {
margin-top: .05rem;
margin-bottom: .15rem;
font-size: .88rem;
font-weight: 700;
color: rgba(4,20,20,.70);
background: rgba(4,20,20,.04);
border: 1px solid rgba(26,110,110,.10);
border-radius: 14px;
padding: .75rem .85rem;
line-height: 1.45;
}
.vx-index-fw {
margin-top: 0;
display: grid;
grid-template-columns: 1fr;
gap: .75rem;
}
.vx-fw-group {
border: 1px solid rgba(26,110,110,.12);
background: linear-gradient(135deg, rgba(240,248,248,.9), rgba(255,255,255,.9));
border-radius: 16px;
padding: .75rem .8rem;
}
.vx-fw-ttl {
font-size: .7rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(4,20,20,.72);
margin-bottom: .55rem;
}
.vx-fw-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
font-size: .82rem;
color: rgba(4,20,20,.78);
padding: .35rem 0;
border-bottom: 1px solid rgba(26,110,110,.08);
}
.vx-fw-row:last-child {
border-bottom: none;
}
.vx-pill {
font-size: .7rem;
font-weight: 800;
padding: .18rem .5rem;
border-radius: 999px;
border: 1px solid rgba(26,110,110,.18);
background: rgba(255,255,255,.75);
color: rgba(4,20,20,.78);
white-space: nowrap;
}
.vx-pill[data-vx-band="Foundational"],
.vx-pill[data-vx-band="Developing"],
.vx-pill[data-vx-band="Mid-Field"],
.vx-pill[data-vx-band="Upper Quartile"],
.vx-pill[data-vx-band="Leading Tier"] {
border-color: rgba(31,168,168,.22);
background: rgba(31,168,168,.08);
color: rgba(6,90,90,.95);
}
.vx-pill[data-vx-band="Leading Tier"],
.vx-pill[data-vx-band="Upper Quartile"] {
border-color: rgba(31,168,168,.30);
background: rgba(31,168,168,.10);
color: rgba(6,90,90,.95);
}
.vx-pill[data-vx-band="Mid-Field"] {
border-color: rgba(31,168,168,.18);
background: rgba(31,168,168,.06);
color: rgba(6,90,90,.88);
}
.vx-pill[data-vx-band="Developing"],
.vx-pill[data-vx-band="Foundational"] {
border-color: rgba(26,110,110,.18);
background: rgba(4,20,20,.03);
color: rgba(4,20,20,.70);
}
.vx-pill[data-vx-band="Low"],
.vx-pill[data-vx-band="Guarded"],
.vx-pill[data-vx-band="Elevated"],
.vx-pill[data-vx-band="High"],
.vx-pill[data-vx-band="Critical"] {
border-color: rgba(244,121,58,.22);
background: rgba(244,121,58,.10);
color: rgba(140,50,10,.92);
}
.vx-pill[data-vx-band="Low"] {
border-color: rgba(31,168,168,.18);
background: rgba(31,168,168,.06);
color: rgba(6,90,90,.88);
}
.vx-pill[data-vx-band="Guarded"] {
border-color: rgba(217,119,6,.22);
background: rgba(217,119,6,.10);
color: rgba(120,60,10,.92);
}
.vx-pill[data-vx-band="Elevated"] {
border-color: rgba(217,119,6,.28);
background: rgba(217,119,6,.14);
color: rgba(120,60,10,.95);
}
.vx-pill[data-vx-band="High"],
.vx-pill[data-vx-band="Critical"] {
border-color: rgba(244,121,58,.35);
background: rgba(244,121,58,.12);
color: rgba(140,50,10,.92);
}
.vx-index-readout {
margin-top: 0;
border: 1px solid rgba(26,110,110,.12);
border-radius: 16px;
padding: .8rem .85rem;
}
.vx-index-readout-ttl {
font-size: .7rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(4,20,20,.72);
margin-bottom: .55rem;
}
.vx-index-readout-row {
display: grid;
grid-template-columns: 120px 1fr;
gap: .65rem;
font-size: .82rem;
color: rgba(4,20,20,.78);
margin-top: .35rem;
}
.vx-index-readout-row span:first-child {
color: rgba(4,20,20,.55);
font-weight: 700;
}
.vx-index-interpret {
margin-top: .7rem;
font-size: .84rem;
color: rgba(4,20,20,.76);
line-height: 1.55;
}
.vx-index-follow {
margin-top: 0;
border-top: 1px solid rgba(26,110,110,.12);
padding-top: 1rem;
}
.vx-index-follow-ttl {
font-size: .95rem;
font-weight: 800;
color: rgba(4,20,20,.92);
}
.vx-index-follow-sub {
margin-top: .35rem;
font-size: .84rem;
color: rgba(4,20,20,.68);
line-height: 1.5;
}
.vx-index-email {
margin-top: .75rem;
display: grid;
grid-template-columns: 1fr;
gap: .55rem;
}
.vx-index-email .vx-btn-primary {
width: 100%;
}
.vx-reset {
width: 100%;
margin-top: .65rem;
flex: initial;
}
.vx-input {
width: 100%;
border: 1px solid rgba(26,110,110,.18);
border-radius: 14px;
padding: .75rem .8rem;
font-size: .9rem;
outline: none;
}
.vx-input:focus {
border-color: rgba(31,168,168,.55);
box-shadow: 0 0 0 4px rgba(31,168,168,.12);
}
.vx-btn {
width: 100%;
border: none;
border-radius: 14px;
padding: .8rem .9rem;
font-size: .95rem;
font-weight: 800;
cursor: pointer;
color: #fff;
background: linear-gradient(135deg, rgba(244,121,58,.95), rgba(246,144,96,.95));
transition: transform .12s ease, filter .2s ease;
}
.vx-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.vx-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.vx-index-note {
margin-top: .65rem;
font-size: .74rem;
color: rgba(4,20,20,.52);
line-height: 1.45;
}
.vx-index-support {
margin-top: .85rem;
border: 1px solid rgba(26,110,110,.12);
border-radius: 16px;
padding: .75rem .85rem;
background: rgba(240,248,248,.55);
}
.vx-index-support-ttl {
font-size: .72rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(4,20,20,.72);
margin-bottom: .55rem;
}
.vx-index-support ul {
list-style: none;
display: flex;
flex-direction: column;
gap: .4rem;
}
.vx-index-support li {
font-size: .82rem;
color: rgba(4,20,20,.72);
display: flex;
gap: .5rem;
}
.vx-index-support li::before {
content: '✓';
font-weight: 900;
color: rgba(26,110,110,.72);
}
.vx-index-status {
margin-top: .75rem;
font-size: .82rem;
font-weight: 700;
}
.vx-index-status[data-vx-kind="success"] { color: rgba(22,120,60,.95); }
.vx-index-status[data-vx-kind="error"] { color: rgba(200,60,60,.95); }
.hero-tagline {
font-size: .85rem; color: rgba(255,255,255,.28);
font-style: italic; animation: fadeUp .5s .45s both;
}
.hero-tagline strong { color: rgba(255,255,255,.5); font-style: normal; font-weight: 500; }
/* Primary hero CTA */
.btn-hp {
background: var(--orange); color: #fff; border: none;
font-family: 'Inter', sans-serif; font-size: .975rem; font-weight: 600;
padding: .85rem 2.1rem; border-radius: 8px; cursor: pointer;
text-decoration: none; transition: background .2s, transform .15s;
}
.btn-hp:hover { background: var(--orange-lt); transform: translateY(-2px); }
/* Secondary hero CTA */
.btn-hs {
background: transparent; color: rgba(255,255,255,.72);
border: 1.5px solid rgba(255,255,255,.18);
font-family: 'Inter', sans-serif; font-size: .975rem; font-weight: 400;
padding: .85rem 1.85rem; border-radius: 8px; cursor: pointer;
text-decoration: none; transition: border-color .2s, color .2s;
}
.btn-hs:hover { border-color: rgba(255,255,255,.42); color: #fff; }
/* =============================================================================
5. BEFORE / AFTER BAND
============================================================================= */
.ba-band { background: var(--s1); border-bottom: 1px solid var(--bd); padding: 3.5rem 5%; }
.ba-inner {
display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem;
align-items: center; max-width: 1100px; margin: 0 auto;
}
.ba-side { display: flex; flex-direction: column; gap: 1.25rem; }
.ba-head { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; font-family: 'Inter', sans-serif; }
.ba-head.before { color: var(--red); }
.ba-head.after { color: var(--t5); }
.ba-stat { display: flex; align-items: flex-start; gap: .85rem; }
.ba-stat-num { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; line-height: 1; flex-shrink: 0; min-width: 64px; }
.ba-stat-num.red { color: var(--red); }
.ba-stat-num.teal { color: var(--t5); }
.ba-stat-text { display: flex; flex-direction: column; }
.ba-stat-label { font-size: .875rem; font-weight: 600; color: var(--txt); line-height: 1.2; }
.ba-stat-sub { font-size: .78rem; color: var(--txt3); font-weight: 300; margin-top: .15rem; }
.ba-divider { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.ba-arrow { font-size: 1.5rem; color: var(--orange); }
.ba-pill {
background: var(--orange); color: #fff;
font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: .3rem .85rem; border-radius: 100px; white-space: nowrap;
font-family: 'Inter', sans-serif;
}
/* =============================================================================
6. PRODUCT SCREEN SECTION
============================================================================= */
.screen-section { background: var(--s3); padding: 4rem 5% 0; }
.screen-section-head { text-align: center; margin-bottom: 2rem; }
.screen-section-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; color: #fff; margin-bottom: .6rem; }
.screen-section-head p { font-size: .975rem; color: rgba(255,255,255,.45); max-width: 500px; margin: 0 auto; font-weight: 300; font-family: 'Inter', sans-serif; }
.screen-wrap { width: 100%; max-width: 1060px; margin: 0 auto; position: relative; }
.screen-progress { display: flex; gap: .35rem; margin-bottom: .65rem; }
.prog-seg { flex: 1; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; cursor: pointer; }
.prog-fill { height: 100%; width: 0%; background: var(--t4); border-radius: 2px; transition: width .05s linear; }
.screen-tabs { display: flex; gap: .45rem; justify-content: center; margin-bottom: .85rem; flex-wrap: wrap; }
.stab {
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.45); font-family: 'Inter', sans-serif;
font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
padding: .38rem .95rem; border-radius: 100px; cursor: pointer; transition: all .2s;
}
.stab:hover { border-color: rgba(31,168,168,.38); color: rgba(255,255,255,.75); }
.stab.active { background: rgba(31,168,168,.16); border-color: rgba(31,168,168,.38); color: var(--t3); }
.screen-chrome {
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
border-radius: 14px 14px 0 0; padding: .65rem 1rem;
display: flex; align-items: center; gap: .6rem;
}
.chrome-dots { display: flex; gap: .35rem; }
.chrome-dot { width: 9px; height: 9px; border-radius: 50%; }
.chrome-dot.r { background: #ff5f57; }
.chrome-dot.y { background: #ffbd2e; }
.chrome-dot.g { background: #28c840; }
.chrome-bar {
flex: 1; background: rgba(255,255,255,.07); border-radius: 4px; height: 21px;
display: flex; align-items: center; padding: 0 .75rem;
font-size: .68rem; color: rgba(255,255,255,.28); font-family: 'Inter', sans-serif;
}
.chrome-lbl { font-size: .68rem; color: rgba(255,255,255,.3); font-family: 'Inter', sans-serif; white-space: nowrap; margin-left: .5rem; }
.screens-container {
position: relative;
background: linear-gradient(180deg, #0d2828 0%, #081818 100%);
border: 1px solid rgba(255,255,255,.07); border-top: none;
border-radius: 0 0 12px 12px; overflow: hidden; min-height: 420px;
}
.screen-panel { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; display: grid; grid-template-columns: 200px 1fr; pointer-events: none; }
.screen-panel.active { opacity: 1; pointer-events: auto; }
.screen-fade { height: 55px; background: linear-gradient(transparent, #081818); margin-top: -55px; position: relative; z-index: 3; border-radius: 0 0 12px 12px; pointer-events: none; }
/* App sidebar */
.app-sb { background: rgba(4,12,12,.65); border-right: 1px solid rgba(31,168,168,.1); padding: 1.2rem 0; display: flex; flex-direction: column; }
.sb-logo { padding: .15rem 1.1rem .85rem; font-family: 'Playfair Display', serif; font-size: .9rem; font-weight: 700; color: #fff; }
.sb-logo span { color: var(--t4); }
.sb-sec { padding: .2rem 1rem .05rem; font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.16); margin-top: .4rem; font-family: 'Inter', sans-serif; }
.sb-item { display: flex; align-items: center; gap: .5rem; padding: .38rem 1.1rem; font-size: .7rem; color: rgba(255,255,255,.38); cursor: pointer; border-left: 2px solid transparent; font-family: 'Inter', sans-serif; }
.sb-item.on { background: rgba(31,168,168,.1); color: var(--t3); border-left-color: var(--t4); }
.sb-d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; flex-shrink: 0; }
/* App main area */
.app-main { padding: 1.35rem 1.5rem; overflow: hidden; }
.app-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.app-ttl { font-family: 'Inter', sans-serif; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.82); }
.app-pil { font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: rgba(31,168,168,.14); color: var(--t3); border: 1px solid rgba(31,168,168,.2); padding: .17rem .52rem; border-radius: 100px; font-family: 'Inter', sans-serif; }
/* Maturity score cards */
.sc-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; margin-bottom: 1rem; }
.sc-card { background: rgba(255,255,255,.04); border: 1px solid rgba(31,168,168,.1); border-radius: 9px; padding: .8rem .85rem; }
.sc-lbl { font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .3rem; font-family: 'Inter', sans-serif; }
.sc-lbl.mk { color: var(--t4); } .sc-lbl.sl { color: #4d8ef0; } .sc-lbl.cs { color: #7dd3b8; }
.sc-big { font-family: 'Playfair Display', serif; font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1; }
.sc-big span { font-size: 1rem; color: rgba(255,255,255,.28); }
.sc-trend { font-size: .6rem; margin-top: .18rem; font-family: 'Inter', sans-serif; }
.sc-trend.up { color: #4ade80; } .sc-trend.warn { color: #f59e0b; }
.sc-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.06); margin-top: .42rem; overflow: hidden; }
.sc-fill { height: 100%; border-radius: 2px; }
.sc-fill.mk { background: linear-gradient(90deg, var(--t7), var(--t4)); }
.sc-fill.sl { background: linear-gradient(90deg, #1e52a8, #4d8ef0); }
.sc-fill.cs { background: linear-gradient(90deg, #0f6e56, #7dd3b8); }
/* Capability rows */
.cap-hdr2 { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.2); margin-bottom: .6rem; font-family: 'Inter', sans-serif; }
.cap-rows { display: flex; flex-direction: column; gap: .4rem; }
.cap-row { display: flex; align-items: center; gap: .6rem; padding: .42rem .6rem; background: rgba(255,255,255,.025); border-radius: 6px; border: 1px solid rgba(255,255,255,.04); }
.cap-nm { font-size: .68rem; color: rgba(255,255,255,.58); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Inter', sans-serif; }
.cap-trk { height: 4px; border-radius: 2px; background: rgba(255,255,255,.06); width: 85px; overflow: hidden; flex-shrink: 0; }
.cap-fl { height: 100%; border-radius: 2px; }
.cap-fl.hi { background: linear-gradient(90deg, var(--t7), var(--t4)); }
.cap-fl.md { background: linear-gradient(90deg, #1e52a8, #4d8ef0); }
.cap-fl.lo { background: linear-gradient(90deg, #7c3d0d, #f59e0b); }
.cap-pc { font-size: .64rem; font-weight: 600; width: 26px; text-align: right; flex-shrink: 0; font-family: 'Inter', sans-serif; }
.cap-pc.hi { color: var(--t4); } .cap-pc.md { color: #4d8ef0; } .cap-pc.lo { color: #f59e0b; }
.cap-fg { font-size: .56rem; padding: .1rem .4rem; border-radius: 100px; border: 1px solid; flex-shrink: 0; font-family: 'Inter', sans-serif; }
.cap-fg.ok { border-color: rgba(31,168,168,.3); color: var(--t4); background: rgba(31,168,168,.06); }
.cap-fg.warn { border-color: rgba(245,158,11,.3); color: #f59e0b; background: rgba(245,158,11,.05); }
.cap-fg.block { border-color: rgba(239,68,68,.3); color: #ef4444; background: rgba(239,68,68,.05); }
/* Roadmap panel */
.rm-main { padding: 1.2rem 1.4rem; overflow: hidden; }
.wave-tabs { display: flex; gap: .32rem; margin-bottom: .9rem; }
.wtab { font-size: .62rem; font-weight: 600; padding: .26rem .65rem; border-radius: 100px; border: 1px solid rgba(255,255,255,.11); color: rgba(255,255,255,.38); cursor: pointer; font-family: 'Inter', sans-serif; transition: all .2s; }
.wtab.on { background: rgba(31,168,168,.14); border-color: rgba(31,168,168,.28); color: var(--t3); }
.wgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; }
.wcol-h { font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .5rem; padding: .22rem .55rem; border-radius: 5px; display: flex; align-items: center; gap: .35rem; font-family: 'Inter', sans-serif; }
.wcol-h.mk { color: var(--t4); background: rgba(31,168,168,.08); }
.wcol-h.sl { color: #4d8ef0; background: rgba(37,99,235,.08); }
.wcol-h.cs { color: #7dd3b8; background: rgba(29,158,117,.08); }
.wi { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 7px; padding: .52rem .65rem; margin-bottom: .4rem; }
.wi-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .22rem; }
.wi-nm { font-size: .7rem; font-weight: 500; color: rgba(255,255,255,.72); line-height: 1.3; font-family: 'Inter', sans-serif; }
.wi-tag { font-size: .56rem; padding: .1rem .38rem; border-radius: 100px; border: 1px solid; flex-shrink: 0; margin-left: .25rem; font-family: 'Inter', sans-serif; }
.wi-tag.gr { border-color: rgba(31,168,168,.3); color: var(--t4); background: rgba(31,168,168,.06); }
.wi-tag.ef { border-color: rgba(37,99,235,.25); color: #4d8ef0; background: rgba(37,99,235,.05); }
.wi-tag.re { border-color: rgba(74,222,128,.25); color: #4ade80; background: rgba(74,222,128,.05); }
.wi-bar { height: 2px; background: rgba(255,255,255,.05); border-radius: 1px; overflow: hidden; }
.wi-fill { height: 100%; border-radius: 1px; }
.wi-fill.t { background: linear-gradient(90deg, var(--t7), var(--t4)); }
.wi-fill.b { background: linear-gradient(90deg, #1e52a8, #4d8ef0); }
.wi-fill.g { background: linear-gradient(90deg, #0f6e56, #4ade80); }
/* Dependency panel */
.dep-main { padding: 1.2rem 1.45rem; overflow: hidden; }
.dep-sum { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; margin-bottom: .9rem; }
.dep-sc { background: rgba(255,255,255,.04); border-radius: 8px; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.06); text-align: center; }
.dep-sc-n { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 700; }
.dep-sc-l { font-size: .58rem; color: rgba(255,255,255,.28); font-family: 'Inter', sans-serif; margin-top: .1rem; }
.dep-hdr { display: grid; grid-template-columns: 82px 70px 1fr 72px; gap: .4rem; padding: .25rem .6rem; font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.18); font-family: 'Inter', sans-serif; margin-bottom: .28rem; }
.dep-row { display: flex; align-items: center; gap: .42rem; padding: .48rem .6rem; background: rgba(255,255,255,.03); border-radius: 7px; border: 1px solid rgba(255,255,255,.05); margin-bottom: .38rem; }
.dep-from { font-size: .66rem; font-weight: 600; padding: .2rem .52rem; border-radius: 5px; white-space: nowrap; flex-shrink: 0; font-family: 'Inter', sans-serif; min-width: 72px; text-align: center; }
.dep-from.mk { background: rgba(31,168,168,.1); color: var(--t4); }
.dep-from.sl { background: rgba(37,99,235,.1); color: #4d8ef0; }
.dep-from.cs { background: rgba(29,158,117,.1); color: #7dd3b8; }
.dep-to { font-size: .64rem; font-weight: 600; padding: .2rem .52rem; border-radius: 5px; white-space: nowrap; flex-shrink: 0; font-family: 'Inter', sans-serif; min-width: 56px; text-align: center; }
.dep-to.mk { background: rgba(31,168,168,.07); color: var(--t3); }
.dep-to.sl { background: rgba(37,99,235,.07); color: #93b8f7; }
.dep-to.cs { background: rgba(29,158,117,.07); color: #9de8d0; }
.dep-arr { font-size: .66rem; color: rgba(255,255,255,.18); flex-shrink: 0; }
.dep-desc { font-size: .68rem; color: rgba(255,255,255,.52); flex: 1; line-height: 1.3; font-family: 'Inter', sans-serif; }
.dep-st { font-size: .58rem; padding: .13rem .42rem; border-radius: 100px; border: 1px solid; flex-shrink: 0; font-family: 'Inter', sans-serif; white-space: nowrap; }
.dep-st.ok { border-color: rgba(31,168,168,.3); color: var(--t4); background: rgba(31,168,168,.06); }
.dep-st.warn { border-color: rgba(245,158,11,.3); color: #f59e0b; background: rgba(245,158,11,.05); }
.dep-st.block { border-color: rgba(239,68,68,.3); color: #ef4444; background: rgba(239,68,68,.05); }
/* Initiative panel */
.init-main { padding: 1.2rem 1.45rem; overflow: hidden; }
.init-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: .6rem; margin-bottom: .9rem; }
.ist { background: rgba(255,255,255,.04); border-radius: 8px; padding: .6rem .7rem; border: 1px solid rgba(255,255,255,.06); text-align: center; }
.ist-n { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: #fff; }
.ist-l { font-size: .56rem; color: rgba(255,255,255,.26); font-family: 'Inter', sans-serif; margin-top: .1rem; }
.init-list { display: flex; flex-direction: column; gap: .42rem; }
.init-card { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.065); border-radius: 8px; padding: .62rem .8rem; display: flex; align-items: center; gap: .7rem; }
.isc { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Playfair Display', serif; font-size: .82rem; font-weight: 700; }
.isc.hi { background: rgba(31,168,168,.14); color: var(--t4); border: 1px solid rgba(31,168,168,.28); }
.isc.md { background: rgba(37,99,235,.12); color: #4d8ef0; border: 1px solid rgba(37,99,235,.24); }
.isc.lo { background: rgba(245,158,11,.1); color: #f59e0b; border: 1px solid rgba(245,158,11,.24); }
.init-info { flex: 1; min-width: 0; }
.init-nm { font-size: .73rem; font-weight: 600; color: rgba(255,255,255,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Inter', sans-serif; margin-bottom: .22rem; }
.init-tags { display: flex; gap: .28rem; flex-wrap: wrap; }
.itag { font-size: .58rem; padding: .1rem .4rem; border-radius: 100px; border: 1px solid; font-family: 'Inter', sans-serif; }
.itag.mk { border-color: rgba(31,168,168,.3); color: var(--t4); background: rgba(31,168,168,.06); }
.itag.sl { border-color: rgba(37,99,235,.25); color: #4d8ef0; background: rgba(37,99,235,.05); }
.itag.cs { border-color: rgba(74,222,128,.25); color: #4ade80; background: rgba(74,222,128,.05); }
.itag.okr { border-color: rgba(168,174,234,.3); color: #a8aeea; background: rgba(168,174,234,.06); }
.itag.am { border-color: rgba(245,158,11,.25); color: #f59e0b; background: rgba(245,158,11,.05); }
.init-meta { text-align: right; flex-shrink: 0; }
.init-wave { font-size: .6rem; color: rgba(255,255,255,.26); font-family: 'Inter', sans-serif; }
.init-status { font-size: .58rem; padding: .13rem .46rem; border-radius: 100px; border: 1px solid; font-family: 'Inter', sans-serif; white-space: nowrap; margin-top: .18rem; display: inline-block; }
.ist-ok { border-color: rgba(31,168,168,.3); color: var(--t4); background: rgba(31,168,168,.06); }
.ist-pen { border-color: rgba(245,158,11,.3); color: #f59e0b; background: rgba(245,158,11,.05); }
.ist-blk { border-color: rgba(239,68,68,.3); color: #ef4444; background: rgba(239,68,68,.05); }
/* =============================================================================
7. LOGO BAR
============================================================================= */
.logo-bar { background: var(--s2); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); padding: 1.5rem 5%; text-align: center; }
.logo-bar-lbl { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); margin-bottom: 1.1rem; font-family: 'Inter', sans-serif; }
.logo-row { display: flex; align-items: center; justify-content: center; gap: 3.5rem; flex-wrap: wrap; }
.logo-item { font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 600; color: var(--txt3); opacity: .4; }
/* =============================================================================
8. SECTION BASE STYLES
============================================================================= */
.sec { padding: 5.5rem 5%; }
.sec-dark { background: var(--s3); padding: 5.5rem 5%; }
.sec-teal { background: var(--s4); padding: 5.5rem 5%; border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.sec-mid { background: var(--s2); padding: 5.5rem 5%; }
.gtm-intel { max-width: 1100px; margin: 0 auto; }
.gtm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.25rem; }
.gtm-card {
border-radius: 16px;
border: 1px solid rgba(26,110,110,.18);
background-image:
linear-gradient(135deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.66) 45%, rgba(240,248,248,.90) 100%),
var(--gtm-bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 10px 32px rgba(4,20,20,.10);
overflow: hidden;
position: relative;
height: 260px;
}
.gtm-card::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 85% 85% at 15% 25%, var(--gtm-tint, rgba(31,168,168,.18)) 0%, transparent 55%);
pointer-events: none;
}
.gtm-card-body {
position: relative;
padding: 1.65rem 1.65rem 1.55rem;
display: flex;
flex-direction: column;
gap: .75rem;
height: 100%;
}
.gtm-k {
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(4,20,20,.72);
font-family: 'Inter', sans-serif;
}
.gtm-card h3 {
font-family: 'Inter', sans-serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--txt);
line-height: 1.25;
}
.gtm-card ul { list-style: none; display: flex; flex-direction: column; gap: .45rem; margin-top: .15rem; }
.gtm-card ul li {
font-size: .86rem;
color: rgba(4,20,20,.72);
font-weight: 400;
font-family: 'Inter', sans-serif;
display: flex;
align-items: flex-start;
gap: .5rem;
}
.gtm-card ul li::before { content: '✓'; color: rgba(4,20,20,.65); font-weight: 800; margin-top: .02rem; }
.gtm-btn {
margin-top: .55rem;
align-self: flex-start;
margin-top: auto;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: .85rem;
font-weight: 600;
padding: .65rem 1.05rem;
border-radius: 10px;
border: 1px solid rgba(0,0,0,.12);
background: rgba(4,20,20,.05);
color: rgba(4,20,20,.86);
transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.gtm-btn:hover { transform: translateY(-1px); border-color: rgba(0,0,0,.18); background: rgba(4,20,20,.08); }
.gtm-cmo { --gtm-bg: url("../img/GTMbyDesign_Home_TileBG1.png"); --gtm-tint: rgba(244,121,58,.22); }
.gtm-cro { --gtm-bg: url("../img/GTMbyDesign_Home_TileBG2.png"); --gtm-tint: rgba(37,99,235,.20); }
.gtm-cco { --gtm-bg: url("../img/GTMbyDesign_Home_TileBG3.png"); --gtm-tint: rgba(22,163,74,.20); }
.gtm-coo { --gtm-bg: url("../img/GTMbyDesign_Home_TileBG4.png"); --gtm-tint: rgba(31,168,168,.22); }
.gtm-cmo .gtm-btn { background: linear-gradient(135deg, rgba(244,121,58,.92) 0%, rgba(246,144,96,.92) 100%); border-color: rgba(244,121,58,.38); color: #fff; }
.gtm-cro .gtm-btn { background: linear-gradient(135deg, rgba(37,99,235,.92) 0%, rgba(77,142,240,.92) 100%); border-color: rgba(37,99,235,.35); color: #fff; }
.gtm-cco .gtm-btn { background: linear-gradient(135deg, rgba(22,163,74,.90) 0%, rgba(74,222,128,.85) 100%); border-color: rgba(22,163,74,.35); color: #fff; }
.gtm-coo .gtm-btn { background: linear-gradient(135deg, rgba(31,168,168,.92) 0%, rgba(45,206,206,.82) 100%); border-color: rgba(31,168,168,.35); color: #fff; }
.gtm-cmo .gtm-btn:hover,
.gtm-cro .gtm-btn:hover,
.gtm-cco .gtm-btn:hover,
.gtm-coo .gtm-btn:hover { background-position: 100% 0; }
.ey { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t5); margin-bottom: .85rem; font-family: 'Inter', sans-serif; }
.ey-light { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-bottom: .85rem; font-family: 'Inter', sans-serif; }
.ey-orange { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-bottom: .85rem; font-family: 'Inter', sans-serif; }
.st { font-size: clamp(1.85rem, 3.2vw, 2.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 1.15rem; color: var(--txt); }
.st-light { font-size: clamp(1.85rem, 3.2vw, 2.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 1.15rem; color: #fff; }
.sb-txt { font-size: 1rem; color: var(--txt2); max-width: 520px; line-height: 1.75; font-weight: 300; font-family: 'Inter', sans-serif; }
.sb-light { font-size: 1rem; color: rgba(255,255,255,.5); max-width: 520px; line-height: 1.75; font-weight: 300; font-family: 'Inter', sans-serif; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
/* =============================================================================
9. FEATURE STRIPS
============================================================================= */
.fstrip { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; padding: 5rem 5%; border-bottom: 1px solid var(--bd); }
.fstrip.alt-bg { background: var(--s4); }
.fstrip.flip { direction: rtl; }
.fstrip.flip > * { direction: ltr; }
.ft h2 { font-size: clamp(1.55rem, 2.5vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--txt); margin-bottom: .9rem; }
.ft p { font-size: .95rem; color: var(--txt2); line-height: 1.75; font-weight: 300; max-width: 420px; margin-bottom: 1.35rem; font-family: 'Inter', sans-serif; }
.ft-link { font-size: .85rem; font-weight: 600; color: var(--t5); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; transition: gap .2s; font-family: 'Inter', sans-serif; }
.ft-link:hover { gap: .55rem; }
.fv { border-radius: 14px; overflow: hidden; border: 1px solid var(--bd); background: var(--card); box-shadow: 0 4px 24px rgba(31,168,168,.06); }
/* Mini feature panels */
.mp { padding: 1.4rem; }
.mp-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; }
.mp-t { font-size: .85rem; font-weight: 600; color: var(--txt); font-family: 'Inter', sans-serif; }
.mp-p { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: rgba(31,168,168,.1); color: var(--t5); border: 1px solid rgba(31,168,168,.2); padding: .18rem .55rem; border-radius: 100px; font-family: 'Inter', sans-serif; }
.br { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .7rem; }
.bm { display: flex; justify-content: space-between; font-size: .72rem; color: var(--txt2); font-family: 'Inter', sans-serif; }
.bt { height: 5px; border-radius: 3px; background: rgba(31,168,168,.07); overflow: hidden; }
.bf { height: 100%; border-radius: 3px; }
.bf.t { background: linear-gradient(90deg, var(--t6), var(--t4)); }
.bf.b { background: linear-gradient(90deg, #1e52a8, #4d8ef0); }
.bf.a { background: linear-gradient(90deg, #92400e, #f59e0b); }
/* Dependency mini panel */
.dm { padding: 1.35rem; }
.dm-lbl { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txt3); margin-bottom: .85rem; font-family: 'Inter', sans-serif; }
.dm-row { display: flex; align-items: center; gap: .42rem; margin-bottom: .55rem; }
.dm-team { font-size: .66rem; font-weight: 600; padding: .22rem .52rem; border-radius: 5px; white-space: nowrap; flex-shrink: 0; font-family: 'Inter', sans-serif; }
.dm-team.mk { background: rgba(31,168,168,.1); color: var(--t5); }
.dm-team.sl { background: rgba(37,99,235,.1); color: #2563eb; }
.dm-team.cs { background: rgba(22,163,74,.1); color: #16a34a; }
.dm-arrow { font-size: .68rem; color: var(--txt3); flex-shrink: 0; }
.dm-desc { font-size: .7rem; color: var(--txt2); font-weight: 300; font-family: 'Inter', sans-serif; }
.dm-st { font-size: .6rem; padding: .12rem .42rem; border-radius: 100px; border: 1px solid; flex-shrink: 0; margin-left: auto; font-family: 'Inter', sans-serif; }
.dm-st.ok { border-color: rgba(31,168,168,.3); color: var(--t5); background: rgba(31,168,168,.06); }
.dm-st.warn { border-color: rgba(245,158,11,.3); color: #d97706; background: rgba(245,158,11,.05); }
.dm-st.block { border-color: rgba(239,68,68,.3); color: #dc2626; background: rgba(239,68,68,.05); }
/* =============================================================================
10. QUOTES / TESTIMONIALS
============================================================================= */
.quotes-section { background: var(--s6); padding: 5.5rem 5%; }
.quotes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.quote-card {
background: rgba(255,255,255,.04); border: 1px solid rgba(31,168,168,.14);
border-radius: 16px; padding: 2.25rem; position: relative;
transition: border-color .25s, transform .25s;
}
.quote-card:hover { border-color: rgba(31,168,168,.3); transform: translateY(-2px); }
.quote-mark { font-family: 'Playfair Display', serif; font-size: 3.5rem; color: var(--t5); line-height: .8; margin-bottom: .75rem; opacity: .6; }
.quote-text { font-size: 1rem; color: rgba(255,255,255,.75); line-height: 1.75; font-weight: 300; font-style: italic; margin-bottom: 1.5rem; font-family: 'Inter', sans-serif; }
.quote-author { display: flex; align-items: center; gap: .85rem; }
.quote-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--t7), var(--t5)); display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.quote-name { font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.85); font-family: 'Inter', sans-serif; }
.quote-title { font-size: .775rem; color: rgba(255,255,255,.38); font-family: 'Inter', sans-serif; margin-top: .1rem; }
.quote-coming { position: absolute; top: .75rem; right: .85rem; font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); padding: .18rem .5rem; border-radius: 100px; font-family: 'Inter', sans-serif; }
/* =============================================================================
11. PERSONAS (WHO IT'S FOR)
============================================================================= */
.pg { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem; margin-top: 3rem; }
.pc {
background: rgba(255,255,255,.04); border: 1px solid rgba(31,168,168,.12);
border-radius: 14px; padding: 2rem; position: relative; overflow: hidden;
transition: border-color .25s, transform .25s;
}
.pc:hover { border-color: rgba(31,168,168,.3); transform: translateY(-2px); }
.pc-top { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.pc-top.t { background: linear-gradient(90deg, var(--t6), var(--t3)); }
.pc-top.b { background: linear-gradient(90deg, var(--b6), var(--b4)); }
.pc-top.g { background: linear-gradient(90deg, #16a34a, #4ade80); }
.pc-ico { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 1.15rem; }
.pc-ico.t { background: rgba(31,168,168,.12); }
.pc-ico.b { background: rgba(37,99,235,.1); }
.pc-ico.g { background: rgba(22,163,74,.1); }
.pc-role { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .4rem; font-family: 'Inter', sans-serif; }
.pc-role.t { color: var(--t4); } .pc-role.b { color: #4d8ef0; } .pc-role.g { color: #4ade80; }
.pc h3 { font-family: 'Inter', sans-serif; font-size: .975rem; font-weight: 700; color: #fff; margin-bottom: .7rem; }
.pc p { font-size: .84rem; color: rgba(255,255,255,.5); line-height: 1.65; font-weight: 300; margin-bottom: 1.15rem; font-family: 'Inter', sans-serif; }
.pc-list { list-style: none; display: flex; flex-direction: column; gap: .42rem; }
.pc-list li { font-size: .79rem; color: rgba(255,255,255,.48); display: flex; align-items: flex-start; gap: .42rem; font-family: 'Inter', sans-serif; }
.pc-list li::before { content: '→'; color: var(--t5); font-size: .75rem; flex-shrink: 0; padding-top: .04rem; }
/* =============================================================================
12. PRICING
============================================================================= */
.prg { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 1.15rem; margin-top: 3rem; align-items: start; }
.prc { background: var(--card); border: 1px solid var(--bd); border-radius: 14px; padding: 1.65rem; position: relative; transition: border-color .2s, transform .2s; }
.prc:hover { transform: translateY(-2px); }
.prc.hot { border-color: var(--t5); background: linear-gradient(160deg, rgba(31,168,168,.06) 0%, var(--card) 60%); }
.hot-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--orange); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .8rem; border-radius: 100px; white-space: nowrap; font-family: 'Inter', sans-serif; }
.prc-tier { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t5); margin-bottom: .45rem; font-family: 'Inter', sans-serif; }
.prc h3 { font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--txt); margin-bottom: .35rem; }
.prc-amt { display: flex; align-items: baseline; gap: .15rem; margin: .8rem 0 .2rem; }
.prc-num { font-family: 'Playfair Display', serif; font-size: 2.1rem; font-weight: 700; color: var(--txt); }
.prc-per { font-size: .75rem; color: var(--txt3); font-family: 'Inter', sans-serif; }
.prc-note { font-size: .67rem; color: var(--txt3); margin-bottom: 1.1rem; font-family: 'Inter', sans-serif; }
.prc-div { height: 1px; background: var(--bd); margin: 1.1rem 0; }
.prc-feats { list-style: none; display: flex; flex-direction: column; gap: .48rem; margin-bottom: 1.4rem; }
.prc-feats li { font-size: .78rem; color: var(--txt2); display: flex; align-items: flex-start; gap: .42rem; font-family: 'Inter', sans-serif; }
.prc-feats li::before { content: '✓'; color: var(--t5); font-weight: 700; flex-shrink: 0; }
.btn-prc { width: 100%; padding: .68rem; border-radius: 7px; font-family: 'Inter', sans-serif; font-size: .85rem; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; display: block; transition: background .2s, transform .1s; }
.btn-prc:hover { transform: translateY(-1px); }
.btn-prc.p { background: var(--orange); color: #fff; border: none; }
.btn-prc.p:hover { background: var(--orange-lt); }
.btn-prc.o { background: transparent; color: var(--txt); border: 1.5px solid var(--bd); }
.btn-prc.o:hover { border-color: var(--t5); color: var(--t5); }
/* =============================================================================
13. FAQ / GEO / AEO SECTION
============================================================================= */
.faq-section { background: var(--s1); padding: 5.5rem 5%; border-top: 1px solid var(--bd); }
.faq-inner { max-width: 1200px; margin: 0 auto; }
.faq-header { text-align: center; margin-bottom: 3.5rem; }
.faq-title { font-size: clamp(1.85rem, 3.2vw, 2.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--txt); margin-bottom: .75rem; }
.faq-sub { font-size: .9rem; color: var(--txt3); font-family: 'Inter', sans-serif; }
.faq-contact { color: var(--orange); text-decoration: none; font-weight: 600; }
.faq-contact:hover { text-decoration: underline; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bd); }
.faq-col { display: flex; flex-direction: column; gap: 1px; background: transparent; }
.faq-item { background: var(--s1); padding: 1.85rem 1.75rem; border: 0; }
.faq-q {
list-style: none;
display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
padding: 1.35rem 1.5rem; cursor: pointer;
font-size: .975rem; font-weight: 600; color: var(--txt);
font-family: 'Inter', sans-serif; line-height: 1.4;
transition: color .2s, background .2s;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '＋'; flex-shrink: 0; font-size: 1.1rem; font-weight: 300; color: var(--orange); margin-top: .05rem; transition: transform .25s; }
details[open] > .faq-q { color: var(--orange); background: rgba(244,121,58,.04); }
details[open] > .faq-q::after { content: '－'; }
.faq-q:hover { color: var(--orange); background: rgba(244,121,58,.03); }
.faq-a { padding: 0 1.5rem 1.35rem 1.5rem; border-top: 1px solid var(--bd); background: rgba(244,121,58,.02); }
.faq-a p { font-size: .9rem; color: var(--txt2); line-height: 1.8; font-weight: 300; font-family: 'Inter', sans-serif; padding-top: 1rem; }
/* =============================================================================
14. CTA BAND
============================================================================= */
.cta-band {
background: linear-gradient(135deg, var(--t8) 0%, var(--t7) 40%, #0d2840 100%);
text-align: center; padding: 7rem 5%; position: relative; overflow: hidden;
}
.cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(31,168,168,.13) 0%, transparent 70%); pointer-events: none; }
.cta-band h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 700; color: #fff; letter-spacing: -.025em; margin-bottom: 1.1rem; max-width: 620px; margin-left: auto; margin-right: auto; }
.cta-band h2 em { font-style: normal; color: var(--orange); }
.cta-band p { font-size: 1rem; color: rgba(255,255,255,.46); max-width: 410px; margin: 0 auto 2.25rem; font-weight: 300; line-height: 1.75; font-family: 'Inter', sans-serif; }
/* =============================================================================
15. FOOTER
============================================================================= */
footer { background: #030e0e; padding: 4.5rem 5% 2.5rem; border-top: 1px solid rgba(31,168,168,.1); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.foot-brand p { font-size: .82rem; color: rgba(255,255,255,.3); line-height: 1.75; font-weight: 300; margin-top: .7rem; max-width: 265px; font-family: 'Inter', sans-serif; }
.foot-tagline { font-size: .75rem; color: var(--t5); font-style: italic; margin-top: .65rem; font-family: 'Inter', sans-serif; }
.foot-col h4 { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.18); margin-bottom: .85rem; font-family: 'Inter', sans-serif; }
.foot-col ul { list-style: none; }
.foot-col ul li { margin-bottom: .5rem; }
.foot-col ul li a { font-size: .82rem; color: rgba(255,255,255,.36); text-decoration: none; transition: color .2s; font-family: 'Inter', sans-serif; }
.foot-col ul li a:hover { color: var(--t4); }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.05); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; }
.foot-bottom p { font-size: .75rem; color: rgba(255,255,255,.16); font-family: 'Inter', sans-serif; }
.foot-brand .logo { align-items: flex-start;}
.foot-img {
width: 150px;
height: 30px;
display: block;
}
/* =============================================================================
16. ANIMATIONS & SCROLL REVEALS
============================================================================= */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .4; transform: scale(1.5); }
}
.reveal {
opacity: 1; transform: translateY(0);
transition: opacity .55s ease, transform .55s ease;
}
.js-loaded .reveal { opacity: 0; transform: translateY(16px); }
.js-loaded .reveal.in { opacity: 1; transform: translateY(0); }
/* =============================================================================
17. RESPONSIVE / MEDIA QUERIES
============================================================================= */
@media (max-width: 960px) {
.nav-links { display: none; }
.fstrip { grid-template-columns: 1fr; gap: 2.5rem; padding: 3.5rem 5%; }
.fstrip.flip { direction: ltr; }
.screen-panel { grid-template-columns: 1fr; }
.app-sb { display: none; }
.foot-grid { grid-template-columns: 1fr 1fr; }
.ba-inner { grid-template-columns: 1fr; gap: 1.5rem; }
.ba-divider { flex-direction: row; }
.faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.gtm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.foot-grid { grid-template-columns: 1fr; }
.prg { grid-template-columns: 1fr; }
.pg { grid-template-columns: 1fr; }
.quotes-grid { grid-template-columns: 1fr; }
.ba-side { gap: 1rem; }
.ba-stat-num { font-size: 1.6rem; }
.sc-row { grid-template-columns: 1fr; }
.init-stats { grid-template-columns: repeat(2,1fr); }
}
/* =============================================================================
18. CONTACT US FORM
============================================================================= */
.contact-section {
padding: 2.5rem 0;
}
.contact-wrap {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 2.5rem;
align-items: start;
}
.contact-copy h2 {
margin-bottom: .75rem;
}
.contact-copy p {
margin-bottom: .85rem;
}
.eyebrow {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
opacity: .75;
font-family: 'Inter', sans-serif;
}
.contact-form {
display: grid;
gap: 1.05rem;
padding: 1.25rem;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.12);
background:
radial-gradient(900px 220px at 15% 0%, rgba(114,224,224,.18) 0%, rgba(114,224,224,0) 62%),
radial-gradient(640px 260px at 85% 10%, rgba(77,142,240,.16) 0%, rgba(77,142,240,0) 60%),
linear-gradient(160deg, rgba(10,40,40,.96) 0%, rgba(15,60,60,.94) 55%, rgba(13,40,64,.94) 100%);
box-shadow: 0 18px 46px rgba(4,20,20,.18);
color: rgba(255,255,255,.92);
}
.contact-form .form-field label {
color: rgba(255,255,255,.76);
}
.contact-form .form-field input,
.contact-form .form-field select,
.contact-form .form-field textarea {
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.18);
color: rgba(255,255,255,.92);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.contact-form .form-field input::placeholder,
.contact-form .form-field textarea::placeholder {
color: rgba(255,255,255,.55);
}
.contact-form .form-status[data-kind="success"] {
color: rgba(255,255,255,.92);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-field {
display: grid;
gap: .5rem;
}
.form-field label {
font-size: .8rem;
font-weight: 600;
color: var(--txt2);
font-family: 'Inter', sans-serif;
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
padding: .75rem .9rem;
border: 1px solid rgba(26,110,110,.22);
border-radius: 14px;
background: var(--card);
color: var(--txt);
font-family: 'Inter', sans-serif;
font-size: .92rem;
outline: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 0 rgba(4,20,20,.03);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: rgba(31,168,168,.55);
box-shadow: 0 0 0 4px rgba(31,168,168,.12);
}
.form-field textarea {
resize: vertical;
}
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea {
border-color: rgba(31,168,168,.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.35);
}
[data-theme="dark"] .contact-form {
border-color: rgba(255,255,255,.12);
box-shadow: 0 18px 46px rgba(0,0,0,.35);
}
.form-actions button {
min-height: 48px;
padding: 0 1.1rem;
border: 0;
border-radius: 12px;
cursor: pointer;
background: var(--orange);
color: #fff;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: .95rem;
transition: background .2s, transform .15s;
}
.form-actions button:hover {
background: var(--orange-lt);
transform: translateY(-1px);
}
.form-status {
min-height: 24px;
font-size: .95rem;
color: var(--txt2);
font-family: 'Inter', sans-serif;
}
.form-status[data-kind="success"] {
color: var(--green);
}
.form-status[data-kind="error"] {
color: var(--red);
}
@media (max-width: 820px) {
.contact-wrap,
.form-row {
grid-template-columns: 1fr;
}
}