:root {
--white: #FFFFFF;
--bg-soft: #F5F8F9;
--bg-mist: #F0FAFB;
--ink: #0F1F1E;
--text: #45555B;
--muted: #7C8B92;
--line: #E6EBEC;
--line-soft: #EFF3F4;
--cyan: #00C5CD;
--cyan-dark: #00A2A8;
--cyan-deep: #006E73;
--cyan-pale: #E4F7F8;
--r: 14px;
--r-lg: 22px;
--font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--shadow: 0 1px 3px rgba(15,31,30,.04), 0 8px 24px rgba(15,31,30,.05);
--shadow-lg: 0 4px 12px rgba(15,31,30,.06), 0 20px 48px rgba(15,31,30,.09);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font);
color: var(--text);
background: var(--white);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4, h5 {
font-family: var(--font);
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
font-weight: 700;
text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -0.03em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p { margin: 0 0 1em; text-wrap: pretty; }
em { font-style: normal; color: var(--cyan-deep); }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }

section { padding: 72px 0; }
@media (min-width: 1024px) { section { padding: 104px 0; } }
.bg-soft { background: var(--bg-soft); }
.bg-dark {
background: #062E31;
background: radial-gradient(ellipse at top, #0A4045 0%, #062E31 70%);
color: rgba(255,255,255,.85);
}
.bg-dark .section-head h2 { color: var(--white); }
.bg-dark .section-head h2 em { color: var(--cyan); }
.bg-dark .section-head p { color: rgba(255,255,255,.72); }
.bg-dark .eyebrow { color: var(--cyan); }
.bg-dark .eyebrow::before { background: var(--cyan); }

/* Plan cards on dark section - light card body with dark banner for maximum text pop */
.bg-dark .plan {
background: var(--white);
border-color: transparent;
box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.12);
}
.bg-dark .plan:hover {
box-shadow: 0 26px 60px rgba(0,0,0,.36), 0 6px 16px rgba(0,0,0,.16);
transform: translateY(-4px);
border-color: transparent;
}
/* Banners stay dark (their SVG mockups are designed for dark) */
.bg-dark .plan-banner {
background: linear-gradient(135deg, #0A4045 0%, #082E32 100%);
}
.bg-dark .plan-banner.flexi {
background: linear-gradient(135deg, #082E32 0%, #0A4045 100%);
}
/* Both plans include strip - also light for consistency */
.bg-dark .plans-shared {
background: var(--white);
border-color: transparent;
box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 26px;
border-radius: 999px;
font-weight: 600;
font-size: 0.95rem;
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
white-space: nowrap;
font-family: var(--font);
}
.btn svg { transition: transform .18s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--cyan); color: var(--white); }
.btn-primary:hover { background: var(--cyan-dark); }
.btn-ghost { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan-deep); }
.btn-white { background: var(--white); color: var(--cyan-deep); }
.btn-white:hover { background: var(--bg-soft); }
.btn-sm { padding: 9px 18px; font-size: 0.86rem; }
.btn-text {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
border-radius: 999px;
font-weight: 600;
font-size: 0.9rem;
color: var(--ink);
transition: color .18s, background .18s;
font-family: var(--font);
}
.btn-text:hover { color: var(--cyan-deep); background: var(--bg-soft); }

/* Eyebrow label */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cyan-deep);
}
.eyebrow::before {
content: "";
width: 22px; height: 2px;
background: var(--cyan);
display: inline-block;
}
.eyebrow.centered { justify-content: center; }

/* Announce */
.announce {
background: var(--ink);
color: rgba(255,255,255,.85);
text-align: center;
font-size: 0.8rem;
padding: 9px 16px;
font-weight: 500;
}
.announce strong { color: var(--cyan); font-weight: 600; }

/* Nav */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255,255,255,.9);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0;
gap: 16px;
}
.logo-link { display: inline-flex; align-items: center; line-height: 0; padding: 6px 0; }
.logo-img { height: 44px; width: auto; max-width: 200px; object-fit: contain; }
@media (min-width: 768px) { .logo-img { height: 50px; max-width: 235px; } }
@media (min-width: 1180px) { .logo-img { height: 56px; max-width: 270px; } }
.nav-links { display: none; gap: 2px; align-items: center; }
@media (min-width: 1180px) { .nav-links { display: flex; } }
.nav-links a, .nav-dropdown-btn {
padding: 9px 15px;
border-radius: 999px;
font-size: 0.93rem;
font-weight: 500;
color: var(--text);
transition: background .18s, color .18s;
font-family: var(--font);
}
.nav-links a:hover, .nav-dropdown-btn:hover { background: var(--bg-soft); color: var(--ink); }
.nav-dropdown { position: relative; }
.nav-dropdown-btn {
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
}
.nav-dropdown-btn svg { transition: transform .2s; }
.nav-dropdown.open .nav-dropdown-btn { background: var(--bg-soft); color: var(--ink); }
.nav-dropdown.open .nav-dropdown-btn svg { transform: rotate(180deg); }
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 270px;
background: var(--white);
border-radius: var(--r);
border: 1px solid var(--line);
box-shadow: var(--shadow-lg);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 11px 13px;
border-radius: 10px;
}
.nav-dropdown-menu a:hover { background: var(--cyan-pale); }
.nav-dropdown-menu a svg { color: var(--cyan-deep); flex-shrink: 0; margin-top: 2px; }
.nav-dropdown-menu strong { display: block; font-size: 0.9rem; color: var(--ink); font-weight: 600; }
.nav-dropdown-menu small { font-size: 0.78rem; color: var(--muted); }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.nav-cta .btn { padding: 10px 20px; font-size: 0.88rem; }
.nav-cta .btn-text,
.nav-cta .btn-ghost,
.nav-cta .btn-primary { display: none; }
@media (min-width: 580px) { .nav-cta .btn-primary { display: inline-flex; } }
@media (min-width: 820px) { .nav-cta .btn-ghost { display: inline-flex; } }
@media (min-width: 1180px) { .nav-cta .btn-text { display: inline-flex; } }
.menu-btn { display: inline-flex; flex-direction: column; gap: 4px; padding: 10px; }
.menu-btn span { width: 22px; height: 2px; background: var(--ink); border-radius: 1px; }
@media (min-width: 1180px) { .menu-btn { display: none; } }

.mobile-menu {
display: none;
position: fixed;
inset: 0;
background: var(--white);
z-index: 100;
padding: 80px 28px 32px;
flex-direction: column;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
padding: 17px 0;
border-bottom: 1px solid var(--line-soft);
font-size: 1.1rem;
font-weight: 600;
color: var(--ink);
}
.mobile-menu .close-btn {
position: absolute;
top: 20px; right: 20px;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--bg-soft);
display: grid;
place-items: center;
}
.mobile-menu-cta { margin-top: auto; }
.mobile-menu-cta .btn { width: 100%; }

/* HERO */
.hero { padding: 40px 0 56px; overflow: hidden; }
@media (min-width: 1024px) { .hero { padding: 56px 0 72px; } }
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: center;
}
@media (min-width: 940px) {
.hero-grid { grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
}
.hero-eyebrow { margin-bottom: 18px; font-size: 0.72rem; }
.hero h1 {
margin-bottom: 22px;
font-size: clamp(1.95rem, 5vw, 3.4rem);
letter-spacing: -0.03em;
}
.hero-sub {
font-size: 1rem;
color: var(--text);
max-width: 460px;
margin-bottom: 30px;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero-ctas .btn { padding: 11px 22px; font-size: 0.88rem; }
.hero-aside {
font-size: 0.82rem;
color: var(--muted);
}
.hero-aside a { color: var(--cyan-deep); font-weight: 600; }
.hero-aside a:hover { text-decoration: underline; }

/* Phone mockup (pure HTML/CSS) */
.phone {
position: relative;
width: 290px;
margin: 0 auto;
background: #0F1F1E;
border-radius: 42px;
padding: 9px;
box-shadow: 0 30px 60px rgba(0,110,115,.16), 0 12px 24px rgba(15,31,30,.10);
}
.phone-screen {
background: var(--bg-soft);
border-radius: 34px;
overflow: hidden;
position: relative;
}
.phone-notch {
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 120px; height: 26px;
background: #0F1F1E;
border-radius: 0 0 16px 16px;
z-index: 10;
}
.phone-status {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 22px 6px;
font-size: 0.72rem;
font-weight: 700;
color: var(--ink);
}
.phone-status .dots { display: flex; gap: 3px; align-items: center; }
.phone-status .dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.phone-status .bat {
width: 22px; height: 11px;
border: 1.5px solid var(--ink);
border-radius: 3px;
position: relative;
}
.phone-status .bat::after {
content: ""; position: absolute;
left: 1.5px; top: 1.5px; bottom: 1.5px;
width: 70%;
background: var(--ink);
border-radius: 1px;
}
.phone-app { padding: 10px 16px 16px; }
.app-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.app-greeting { font-size: 0.74rem; color: var(--muted); font-weight: 500; }
.app-name { font-size: 1rem; font-weight: 700; color: var(--ink); }
.app-bell {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--white);
display: grid; place-items: center;
color: var(--cyan-deep);
box-shadow: var(--shadow);
}
.care-card {
background: linear-gradient(135deg, var(--cyan-deep), var(--cyan));
border-radius: 18px;
padding: 16px 18px;
color: var(--white);
margin-bottom: 18px;
box-shadow: 0 12px 24px rgba(0,110,115,.22);
}
.care-card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 26px;
}
.care-card-top span:first-child { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.care-card-chip {
width: 28px; height: 21px;
border-radius: 4px;
background: rgba(255,255,255,.35);
}
.care-card-id {
font-size: 0.96rem;
font-weight: 700;
letter-spacing: 0.12em;
margin-bottom: 8px;
}
.care-card-foot {
display: flex;
justify-content: space-between;
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: .85;
}
.app-label {
font-size: 0.72rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 9px;
display: flex;
justify-content: space-between;
align-items: center;
}
.app-label a { font-size: 0.66rem; color: var(--cyan-deep); font-weight: 600; }
.app-plans { display: flex; gap: 8px; margin-bottom: 18px; }
.app-plan {
flex: 1;
background: var(--white);
border-radius: 12px;
padding: 11px 12px;
box-shadow: var(--shadow);
}
.app-plan .ic {
width: 26px; height: 26px;
border-radius: 7px;
background: var(--cyan-pale);
color: var(--cyan-deep);
display: grid; place-items: center;
margin-bottom: 7px;
}
.app-plan .nm { font-size: 0.72rem; font-weight: 700; color: var(--ink); }
.app-plan .st { font-size: 0.62rem; color: var(--muted); }
.app-bills { display: flex; flex-direction: column; gap: 8px; }
.app-bill {
background: var(--white);
border-radius: 12px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: var(--shadow);
}
.app-bill .ic {
width: 30px; height: 30px;
border-radius: 8px;
display: grid; place-items: center;
flex-shrink: 0;
}
.app-bill .ic.a { background: var(--cyan-pale); color: var(--cyan-deep); }
.app-bill .ic.b { background: #FFF1DC; color: #B07A1E; }
.app-bill .info { flex: 1; min-width: 0; }
.app-bill .info .t { font-size: 0.74rem; font-weight: 700; color: var(--ink); }
.app-bill .info .d { font-size: 0.62rem; color: var(--muted); }
.app-bill .amt { font-size: 0.76rem; font-weight: 700; color: var(--ink); }
.app-bill .badge {
font-size: 0.56rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 99px;
}
.app-bill .badge.paid { background: var(--cyan-pale); color: var(--cyan-deep); }
.app-bill .badge.due { background: #FFF1DC; color: #B07A1E; }
.app-nav {
display: flex;
justify-content: space-around;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.app-nav span {
font-size: 0.6rem;
color: var(--muted);
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.app-nav span.on { color: var(--cyan-deep); }
.app-nav span i {
width: 18px; height: 18px;
display: grid; place-items: center;
}

/* TRUST */
.trust { padding: 52px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.trust-label {
text-align: center;
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--muted);
font-weight: 700;
margin-bottom: 32px;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
max-width: 1000px;
margin: 0 auto;
}
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 940px) { .trust-grid { grid-template-columns: repeat(5, 1fr); } }
.trust-item {
height: 90px;
display: grid;
place-items: center;
padding: 18px;
border-radius: var(--r);
transition: background .2s;
}
.trust-item:hover { background: var(--bg-soft); }
.trust-item img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

/* SECTION HEAD */
.section-head { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { font-size: 1.05rem; color: var(--text); margin: 0; }

/* PLANS */
.plans-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 880px) { .plans-grid { grid-template-columns: 1fr 1fr; } }
.plan {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
transition: border-color .2s, box-shadow .2s, transform .2s;
display: flex;
flex-direction: column;
}
.plan:hover {
border-color: var(--cyan);
box-shadow: var(--shadow-lg);
transform: translateY(-3px);
}
.plan-banner {
height: 200px;
background: linear-gradient(135deg, #084247, #053135);
padding: 22px 26px;
position: relative;
overflow: hidden;
}
.plan-banner svg { width: 100%; height: 100%; display: block; }
.plan-banner.flexi { background: linear-gradient(135deg, #053135, #084247); }
.plan-body {
padding: 32px 32px 32px;
display: flex;
flex-direction: column;
flex: 1;
}
.plan-tagline {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cyan-deep);
margin-bottom: 10px;
}
.plan h3 {
margin-bottom: 14px;
font-size: clamp(1.4rem, 2.1vw, 1.65rem);
color: var(--ink);
}
.plan-desc { font-size: 0.96rem; color: var(--text); margin-bottom: 24px; line-height: 1.6; }
.plan-features { list-style: none; padding: 0; margin: 0 0 28px; }
.plan-features li {
display: flex;
gap: 12px;
padding: 11px 0;
border-top: 1px solid var(--line-soft);
font-size: 0.93rem;
color: var(--text);
align-items: flex-start;
}
.plan-features li:first-child { border-top: none; padding-top: 0; }
.plan-features li strong { color: var(--cyan-deep); font-weight: 700; }
.plan-features .tick {
width: 20px; height: 20px;
border-radius: 50%;
background: var(--cyan-pale);
color: var(--cyan-deep);
display: grid; place-items: center;
flex-shrink: 0;
margin-top: 1px;
}
.plan-cta-wrap { margin-top: auto; }
.plan .btn { width: 100%; }

.plans-shared {
margin-top: 24px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 28px 34px;
display: grid;
grid-template-columns: 1fr;
gap: 18px;
align-items: center;
}
@media (min-width: 760px) { .plans-shared { grid-template-columns: auto 1fr; gap: 32px; } }
.plans-shared-label {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cyan-deep);
display: flex;
align-items: center;
gap: 10px;
}
.plans-shared-label svg {
width: 36px; height: 36px;
padding: 8px;
background: var(--cyan-pale);
border-radius: 10px;
}
.plans-shared ul {
list-style: none;
padding: 0; margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 760px) { .plans-shared ul { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.plans-shared li {
display: flex;
gap: 10px;
font-size: 0.93rem;
color: var(--text);
font-weight: 500;
align-items: flex-start;
line-height: 1.55;
}
.plans-shared li svg { color: var(--cyan); flex-shrink: 0; margin-top: 3px; }

/* SHOWCASE */
.showcase-row {
display: grid;
grid-template-columns: 1fr;
gap: 36px;
align-items: center;
margin-bottom: 64px;
}
.showcase-row:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
.showcase-row { grid-template-columns: 1fr 1fr; gap: 64px; }
.showcase-row.flip .showcase-visual { order: 2; }
}
.showcase-text .eyebrow { margin-bottom: 14px; }
.showcase-text h3 { margin-bottom: 12px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.showcase-text p { font-size: 1rem; color: var(--text); margin: 0; }
.showcase-visual { display: flex; justify-content: center; }

/* Browser mockup (pure HTML/CSS) */
.browser {
width: 100%;
max-width: 560px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.browser-bar {
background: var(--bg-soft);
border-bottom: 1px solid var(--line);
padding: 10px 14px;
display: flex;
align-items: center;
gap: 10px;
}
.browser-dots { display: flex; gap: 6px; }
.browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: #D5DDDE; }
.browser-url {
flex: 1;
background: var(--white);
border: 1px solid var(--line);
border-radius: 6px;
padding: 4px 12px;
font-size: 0.68rem;
color: var(--muted);
text-align: center;
}
.dash { padding: 18px 20px; background: var(--white); }
.dash-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.dash-top h5 { font-size: 0.98rem; font-weight: 700; margin: 0 0 3px; }
.dash-top .sub { font-size: 0.7rem; color: var(--muted); }
.dash-pill {
font-size: 0.66rem;
font-weight: 600;
color: var(--cyan-deep);
background: var(--cyan-pale);
padding: 5px 10px;
border-radius: 99px;
}
.dash-kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 14px;
}
.dash-kpi {
background: var(--bg-soft);
border-radius: 10px;
padding: 12px;
}
.dash-kpi .l {
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
font-weight: 700;
margin-bottom: 5px;
}
.dash-kpi .v { font-size: 0.98rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.dash-kpi .v.cy { color: var(--cyan-deep); }
.dash-panel {
background: var(--white);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
}
.dash-panel-title {
font-size: 0.72rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 12px;
display: flex;
justify-content: space-between;
}
.dash-panel-title small { color: var(--cyan-deep); font-weight: 600; font-size: 0.62rem; }
.dash-rowitem {
display: grid;
grid-template-columns: 1.5fr 1fr 0.7fr;
gap: 10px;
align-items: center;
padding: 8px 0;
border-top: 1px solid var(--line-soft);
font-size: 0.68rem;
}
.dash-rowitem:first-of-type { border-top: none; }
.dash-rowitem .nm {
display: flex; align-items: center; gap: 7px;
font-weight: 600; color: var(--ink);
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.dash-av {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--cyan-pale);
color: var(--cyan-deep);
display: grid; place-items: center;
font-size: 0.56rem; font-weight: 700;
flex-shrink: 0;
}
.dash-bar {
height: 5px;
background: var(--bg-soft);
border-radius: 99px;
overflow: hidden;
}
.dash-bar span { display: block; height: 100%; background: var(--cyan); border-radius: 99px; }
.dash-amt { font-weight: 700; color: var(--ink); text-align: right; }
.dash-badge {
font-size: 0.56rem; font-weight: 700;
padding: 2px 7px; border-radius: 99px;
text-align: center;
}
.dash-badge.ok { background: var(--cyan-pale); color: var(--cyan-deep); }
.dash-badge.warn { background: #FFF1DC; color: #B07A1E; }
.dash-badge.wait { background: #FCE8E8; color: #C0504D; }

/* WHO WE SERVE */
.tabs {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 36px;
flex-wrap: wrap;
}
.tab {
padding: 11px 22px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--white);
color: var(--text);
font-weight: 600;
font-size: 0.92rem;
transition: all .18s;
font-family: var(--font);
}
.tab:hover { border-color: var(--cyan); color: var(--cyan-deep); }
.tab.active { background: var(--cyan); color: var(--white); border-color: var(--cyan); }
.panel { display: none; }
.panel.active { display: block; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.panel-head {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 36px;
align-items: center;
}
@media (min-width: 800px) { .panel-head { grid-template-columns: 1fr auto; gap: 36px; } }
.panel-head h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 10px; }
.panel-head p { font-size: 1rem; color: var(--text); margin: 0; max-width: 720px; }
.panel-features {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
@media (min-width: 600px) { .panel-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .panel-features { grid-template-columns: repeat(4, 1fr); } }
.feature {
padding: 26px 22px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r);
transition: border-color .2s, transform .2s;
}
.feature:hover { border-color: var(--cyan); transform: translateY(-3px); }
.feature-icon {
width: 42px; height: 42px;
border-radius: 11px;
background: var(--cyan-pale);
color: var(--cyan-deep);
display: grid; place-items: center;
margin-bottom: 16px;
}
.feature h4 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.feature p { font-size: 0.86rem; color: var(--muted); margin: 0; line-height: 1.55; text-wrap: pretty; }

/* HOW */
.steps {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
counter-reset: s;
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { counter-increment: s; }
.step-num {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--cyan);
color: var(--white);
display: grid; place-items: center;
font-weight: 800;
font-size: 1.1rem;
margin-bottom: 16px;
}
.step-num::before { content: counter(s, decimal-leading-zero); }
.step h4 { font-size: 1.08rem; margin-bottom: 7px; }
.step p { font-size: 0.9rem; color: var(--muted); margin: 0; text-wrap: pretty; }

/* FOUNDER */
.founder-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
}
@media (min-width: 800px) { .founder-grid { grid-template-columns: 5fr 7fr; gap: 60px; } }
.founder-photo { max-width: 380px; margin: 0 auto; width: 100%; }
.founder-photo img {
width: 100%;
border-radius: var(--r-lg);
border: 1px solid var(--line);
}
.founder-quote {
font-size: clamp(1.3rem, 2.2vw, 1.7rem);
line-height: 1.4;
color: var(--ink);
font-weight: 500;
margin: 18px 0 24px;
letter-spacing: -0.01em;
text-wrap: pretty;
}
.founder-quote .mark { color: var(--cyan); font-weight: 800; }
.founder-name { font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.founder-role { color: var(--muted); font-size: 0.9rem; }

/* FINAL CTA */
.final {
background: var(--cyan-deep);
color: var(--white);
text-align: center;
padding: 80px 0;
}
.final h2 { color: var(--white); margin-bottom: 14px; }
.final h2 em { color: var(--white); }
.final p { color: rgba(255,255,255,.8); max-width: 480px; margin: 0 auto 30px; font-size: 1.05rem; }
.final .eyebrow { color: rgba(255,255,255,.7); justify-content: center; margin-bottom: 16px; }
.final .eyebrow::before { background: rgba(255,255,255,.5); }

/* FOOTER */
footer { background: var(--ink); color: rgba(255,255,255,.65); padding: 60px 0 28px; font-size: 0.9rem; }
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 36px;
margin-bottom: 44px;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; } }
.footer-brand .logo-img { height: 38px; margin-bottom: 16px; }
.footer-brand p { color: rgba(255,255,255,.55); font-size: 0.88rem; max-width: 300px; margin-bottom: 18px; }
.socials { display: flex; gap: 10px; }
.socials a {
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.14);
display: grid; place-items: center;
color: rgba(255,255,255,.7);
transition: all .18s;
}
.socials a:hover { background: var(--cyan); border-color: var(--cyan); color: var(--white); }
.footer-col h5 {
color: var(--white);
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: rgba(255,255,255,.6); transition: color .18s; }
.footer-col a:hover { color: var(--cyan); }
.footer-contact { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 9px; font-size: 0.85rem; }
.footer-contact svg { color: var(--cyan); flex-shrink: 0; margin-top: 3px; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.1);
padding-top: 22px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-size: 0.8rem;
color: rgba(255,255,255,.45);
}
.footer-bottom a { color: rgba(255,255,255,.55); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }