/* Self-hosted Google Fonts — latin subset only */
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('lib/fonts/figtree-400.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('lib/fonts/figtree-500.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('lib/fonts/figtree-600.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('lib/fonts/figtree-700.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('lib/fonts/figtree-800.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('lib/fonts/fraunces-500.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('lib/fonts/fraunces-700.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('lib/fonts/jetbrains-mono-400.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('lib/fonts/jetbrains-mono-500.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('lib/fonts/jetbrains-mono-600.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--bg: #ffffff;
--bg-soft: #f7f9fc;
--bg-muted: #eef2f7;
--text: #102a43;
--text-muted: #486581;
--text-faint: #829ab1;
--border: #d9e2ec;
--border-soft: #e6ebf1;
--brand: #1d4ed8;
--brand-hover: #1e40af;
--brand-soft: #eef4ff;
--brand-dark: #1e3a8a;
--accent: #f59e0b;
--success: #059669;
--radius: 10px;
--radius-sm: 8px;
--radius-lg: 14px;
--nav-height: 68px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16.5px;
line-height: 1.65;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Figtree', sans-serif;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--text);
line-height: 1.25;
margin: 0 0 0.6em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1.1em; color: var(--text-muted); }
a {
color: var(--brand);
text-decoration: none;
transition: color 0.15s ease;
}
a:hover { color: var(--brand-hover); }
img { max-width: 100%; height: auto; }
.section { padding: 80px 0; }
.section-sm { padding: 56px 0; }
@media (max-width: 768px) {
.section { padding: 56px 0; }
.section-sm { padding: 40px 0; }
}
.eyebrow {
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand);
background: var(--brand-soft);
padding: 5px 12px;
border-radius: 999px;
margin-bottom: 1rem;
}
/* ============ Navbar (Frosted) ============ */
.site-nav {
position: sticky;
top: 0;
z-index: 1030;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border-bottom: 1px solid var(--border-soft);
}
.site-nav.scrolled {
background: rgba(255, 255, 255, 0.92);
}
.site-nav .navbar-brand {
display: flex;
align-items: center;
padding: 4px 0;
}
.site-nav .brand-logo {
height: 46px;
width: auto;
display: block;
}
.site-nav .nav-link {
color: var(--text);
font-weight: 500;
font-size: 0.95rem;
padding: 0.5rem 0.95rem;
border-radius: 8px;
transition: background 0.15s ease, color 0.15s ease;
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active {
color: var(--brand);
background: var(--brand-soft);
}
.site-nav .dropdown-menu {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.4rem;
margin-top: 0.4rem;
box-shadow: none;
}
.site-nav .dropdown-item {
border-radius: 6px;
padding: 0.55rem 0.8rem;
font-size: 0.95rem;
color: var(--text);
}
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
background: var(--brand-soft);
color: var(--brand);
}
.site-nav .navbar-toggler {
border: 1px solid var(--border);
padding: 0.4rem 0.6rem;
border-radius: 8px;
}
.site-nav .navbar-toggler:focus { box-shadow: none; }
/* ============ Desktop: space the dropdown caret ============ */
@media (min-width: 992px) {
.site-nav .dropdown-toggle::after {
margin-left: 0.55em;
vertical-align: 0.15em;
}
}
/* ============ Desktop: hybrid hover + click dropdown ============ */
/* (hover: hover) restricts to true-mouse devices — touch-screen laptops stay click-only */
@media (min-width: 992px) and (hover: hover) {
/* Always render the menu so opacity transitions can run */
.site-nav .nav-item.dropdown > .dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
margin-top: 10px;
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
pointer-events: none;
}
/* Show on hover, keyboard focus-within, or Bootstrap's click-applied .show */
.site-nav .nav-item.dropdown:hover > .dropdown-menu,
.site-nav .nav-item.dropdown:focus-within > .dropdown-menu,
.site-nav .nav-item.dropdown > .dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
pointer-events: auto;
}
/* Invisible bridge above the menu catches the mouse while it travels from trigger to menu */
.site-nav .nav-item.dropdown > .dropdown-menu::before {
content: '';
position: absolute;
top: -14px;
left: 0;
right: 0;
height: 14px;
}
}
/* ============ Desktop: Services submenu — single column, coloured icons,
hover arrow on the right (V4 colours + V2 arrow). ============
Desktop only (>=992px). The mobile full-screen stacked menu in the
max-width:991.98px block below is intentionally left untouched. */
@media (min-width: 992px) {
.site-nav .nav-item.dropdown > .dropdown-menu {
width: 248px; /* single column, comfortably snug */
grid-template-columns: 1fr;
row-gap: 2px;
padding: 8px;
}
/* Make it a grid when shown. On hover-capable devices the hover block
above keeps it display:block (hidden via opacity); the rule below
promotes that to grid. On click-only desktops Bootstrap toggles the
.show class, so grid it there too. */
.site-nav .nav-item.dropdown > .dropdown-menu.show { display: grid; }
/* Each item: icon + label on the left, hover arrow pushed to the right. */
.site-nav .dropdown-item {
display: flex;
align-items: center;
gap: 9px;
padding: 11px 13px;
}
.site-nav .dropdown-item i {
width: 18px;
text-align: center;
font-size: 1rem;
margin: 0 !important; /* drop Bootstrap's me-2 so the gap is uniform */
}
/* Right-side chevron, revealed on hover (V2 behaviour). Border-drawn so it
doesn't depend on an icon-font codepoint. margin-left:auto pushes it to
the far right of the flex row. */
.site-nav .dropdown-item::after {
content: "";
width: 6px; height: 6px;
border-top: 2px solid var(--text-faint);
border-right: 2px solid var(--text-faint);
transform: rotate(45deg);
margin-left: auto;
margin-right: 3px;
opacity: 0;
flex-shrink: 0;
transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.site-nav .dropdown-item:hover::after,
.site-nav .dropdown-item:focus::after {
opacity: 1;
transform: translateX(3px) rotate(45deg); /* nudge right as it appears */
border-color: var(--brand);
}
/* Per-service icon colours. Order = Promotional, Transactional,
Virtual Number, RCS, SMS API. nth-child keeps markup untouched. */
.site-nav .dropdown-menu > li:nth-child(1) .dropdown-item i { color: #b45309; } /* amber */
.site-nav .dropdown-menu > li:nth-child(2) .dropdown-item i { color: #1d4ed8; } /* blue */
.site-nav .dropdown-menu > li:nth-child(3) .dropdown-item i { color: #047857; } /* green */
.site-nav .dropdown-menu > li:nth-child(4) .dropdown-item i { color: #0057cb; } /* blue */
.site-nav .dropdown-menu > li:nth-child(5) .dropdown-item i { color: #6d28d9; } /* violet */
}
@media (min-width: 992px) and (hover: hover) {
/* Promote the always-rendered (for transitions) menu from block to grid. */
.site-nav .nav-item.dropdown > .dropdown-menu { display: grid; }
}
/* ============ Mobile: dropdown card below the floating bar ============ */
@media (max-width: 991.98px) {
/* Anchor the dropdown panel to the bar's row */
.site-nav .navbar { position: relative; }
/* The menu drops down as a floating white card; the bar stays exactly as it
is. Bootstrap still toggles .collapse / .show — we only restyle the panel. */
.site-nav .navbar-collapse {
position: absolute;
top: 100%; /* touch the bar — no gap, one unified box */
left: 0;
right: 0;
background: #fff;
border: 0; /* shadow + page dim define the panel edge */
border-radius: 0 0 18px 18px; /* square top (meets the bar), rounded bottom */
box-shadow: 0 18px 44px rgba(16, 42, 67, 0.18);
/* Final padding lives on the BASE rule (not just .show) so it's identical
during Bootstrap's .collapsing animation — no reflow/jump when .show lands. */
padding: 12px 18px 16px;
max-height: calc(100vh - 96px);
overflow-y: auto;
z-index: 1031;
}
/* Gentle page dim behind the open card (page stays visible, not white-out).
Reuses the :has() approach the old full-screen rules relied on. */
body:has(.site-nav .navbar-collapse.show)::before,
body.nav-open::before {
content: "";
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.28);
z-index: 1020; /* below the sticky bar (1030) and the card (1031) */
}
/* Toggler stays on top, swap hamburger → X when menu is open */
.site-nav .navbar-toggler {
position: relative;
z-index: 1060;
border-color: transparent;
}
.site-nav .navbar-toggler[aria-expanded="true"] .bi-list::before {
content: "\f659"; /* bi-x-lg */
}
/* Stacked menu items, large, with right chevron */
.site-nav .navbar-nav {
margin: 0 !important;
width: 100%;
}
.site-nav .navbar-nav .nav-link {
font-size: 1.15rem !important;
font-weight: 500;
padding: 13px 38px 13px 16px !important;
display: block !important;
position: relative;
color: var(--text) !important;
background: transparent !important;
border-radius: 0 !important;
}
/* Chevron arrow on regular (non-dropdown) items — absolute, right-aligned */
.site-nav .navbar-nav > .nav-item:not(.dropdown) > .nav-link::after {
content: "";
display: block;
position: absolute;
right: 10px;
top: 50%;
width: 13px;
height: 13px;
border-top: 2.5px solid var(--text-faint);
border-right: 2.5px solid var(--text-faint);
transform: translateY(-50%) rotate(45deg);
margin: 0;
}
/* Kill the tap focus ring on menu links. Bootstrap draws a blue box
(.nav-link:focus-visible { box-shadow: 0 0 0 .25rem ... }) that lingered
as a box around "Services" while its submenu was open. Mobile only —
desktop keeps its keyboard focus ring for accessibility. */
.site-nav .navbar-nav .nav-link {
-webkit-tap-highlight-color: transparent;
}
.site-nav .navbar-nav .nav-link:focus,
.site-nav .navbar-nav .nav-link:focus-visible {
outline: 0 !important;
box-shadow: none !important;
}
/* Services dropdown trigger: replace Bootstrap's caret with a CSS-drawn + */
.site-nav .nav-item.dropdown { position: relative; }
.site-nav .nav-item.dropdown > .nav-link { position: relative; }
/* Horizontal bar of the plus — right edge matches chevron right edge */
.site-nav .dropdown-toggle::after {
content: "" !important;
display: block !important;
position: absolute;
right: 6px;
top: 50%;
width: 18px;
height: 2.5px;
background: var(--text-faint) !important;
border: 0 !important;
margin: 0 !important;
transform: translateY(-50%);
}
/* Vertical bar of the plus (centered on the horizontal bar) */
.site-nav .nav-item.dropdown > .nav-link::before {
content: "";
position: absolute;
right: 14px;
top: 50%;
width: 2.5px;
height: 18px;
background: var(--text-faint);
transform: translateY(-50%);
transition: opacity 0.2s ease;
}
/* When open, hide the vertical bar so the plus becomes a minus.
Bootstrap puts .show on the toggle link itself (not the .dropdown wrapper). */
.site-nav .nav-item.dropdown > .nav-link.show::before,
.site-nav .nav-item.dropdown > .nav-link[aria-expanded="true"]::before {
opacity: 0;
}
/* Sub-menu rendered inline (no absolute positioning, white bg) */
.site-nav .dropdown-menu {
position: static !important;
transform: none !important;
float: none;
width: 100%;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
border-radius: 0;
margin: 4px 0 8px;
padding: 0;
display: none;
}
.site-nav .dropdown-menu.show {
display: block;
}
/* Sub-menu items: indented from main items, larger text, with right chevron */
.site-nav .dropdown-item {
font-size: 1.05rem !important;
font-weight: 500;
padding: 12px 40px 12px 28px !important;
color: var(--text) !important;
background: transparent !important;
border-radius: 0;
display: block;
position: relative;
}
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
background: transparent !important;
color: var(--brand) !important;
}
.site-nav .dropdown-item .bi {
color: var(--text-faint);
margin-right: 14px !important;
}
/* Chevron arrow on sub-items, smaller than main, same right anchor */
.site-nav .dropdown-item::after {
content: "";
display: block;
position: absolute;
right: 12px;
top: 50%;
width: 10px;
height: 10px;
border-top: 2px solid var(--text-faint);
border-right: 2px solid var(--text-faint);
transform: translateY(-50%) rotate(45deg);
}
/* CTA button block in the collapse footer */
.site-nav .navbar-collapse > .d-flex {
margin-top: 16px;
flex-direction: column;
width: 100%;
}
.site-nav .navbar-collapse > .d-flex .btn {
width: 100%;
justify-content: center;
padding: 14px 24px;
font-size: 1rem;
font-weight: 600;
border-radius: 999px;
gap: 14px;
}
/* Bigger arrow circle on mobile CTA */
.site-nav .navbar-collapse > .d-flex .btn .arrow-circle {
width: 38px;
height: 38px;
font-size: 1rem;
}
/* Override has-hero-nav font size on mobile so menu items match the card */
body.has-hero-nav .site-nav.v5 .nav-link {
font-size: 1.15rem !important;
padding: 13px 38px 13px 16px !important;
color: var(--text) !important;
}
}
/* ============ Infyne-style hero + nav (body.has-hero-nav) ============ */
/* Nav — absolute over the hero, transparent, no border */
body.has-hero-nav .site-nav.v5 {
position: absolute;
top: 0; left: 0; right: 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: none;
padding: 16px 0;
transition: all 0.35s ease;
z-index: 1030;
}
body.has-hero-nav .site-nav.v5 > .container > .navbar {
background: transparent;
border-color: transparent;
min-height: 0;
padding: 0 !important;
transition: all 0.35s ease;
}
/* Menu links — Infyne sizing: 18px, weight 500, generous padding */
body.has-hero-nav .site-nav.v5 .nav-link {
font-size: 18px;
font-weight: 500;
color: #090B0E;
padding: 0 20px !important;
background: transparent !important;
border-radius: 0;
}
body.has-hero-nav .site-nav.v5 .nav-link:hover,
body.has-hero-nav .site-nav.v5 .nav-link.active {
color: var(--brand) !important;
background: transparent !important;
}
/* CTA pill button (Infyne style) */
body.has-hero-nav .site-nav.v5 .btn-primary {
font-size: 16px;
font-weight: 600;
border-radius: 30px;
padding: 6px 6px 6px 20px;
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--brand);
border-color: var(--brand);
transition: transform 0.35s ease, background 0.2s ease;
}
body.has-hero-nav .site-nav.v5 .btn-primary:hover {
transform: translateY(-3px);
background: var(--brand-hover);
}
body.has-hero-nav .site-nav.v5 .btn-primary .arrow-circle {
width: 32px; height: 32px;
border-radius: 50%;
background: white;
color: var(--brand);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
transform: rotate(-45deg);
transition: transform 0.35s ease;
}
body.has-hero-nav .site-nav.v5 .btn-primary:hover .arrow-circle { transform: rotate(0deg); }
/* Scrolled state — slim frosted bar with capsule feel */
body.has-hero-nav .site-nav.v5.scrolled {
position: fixed;
background: rgba(255, 255, 255, 0.65);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
padding: 10px 0;
}
/* Hero background — Infyne-style: soft lavender base, pink top-left, lavender-violet right */
body.has-hero-nav .page-header,
body.has-hero-nav .hero {
padding-top: 140px;
background:
radial-gradient(circle 420px at 4% 25%, #f7d7e6 0%, rgba(247, 215, 230, 0.4) 30%, transparent 60%),
radial-gradient(circle 360px at 96% 75%, #d8d1f2 0%, rgba(216, 209, 242, 0.4) 32%, transparent 60%),
linear-gradient(135deg, #ecebf7 0%, #efeaf7 50%, #ebe8f5 100%) !important;
border-bottom: none !important;
position: relative;
overflow: hidden;
}
body.has-hero-nav .page-header::before,
body.has-hero-nav .hero::before {
display: none !important;
}
/* Hero H1 — match Infyne's 56px / 32px mobile, weight 600 */
body.has-hero-nav .page-header h1,
body.has-hero-nav .hero h1 {
font-size: 56px;
line-height: 68px;
font-weight: 600;
margin-bottom: 16px;
}
@media (max-width: 767px) {
body.has-hero-nav .page-header h1,
body.has-hero-nav .hero h1 {
font-size: 32px;
line-height: 40px;
}
}
@media (max-width: 991px) {
body.has-hero-nav .page-header,
body.has-hero-nav .hero {
padding-top: 120px;
}
body.has-hero-nav .site-nav.v5 .nav-link {
font-size: 17px;
padding: 10px 0 !important;
}
}
/* ============ V5: Floating capsule nav (modifier) ============ */
.site-nav.v5 {
background: rgba(243,245,250,0.78);
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border-bottom: none;
padding: 12px 0;
}
.site-nav.v5.scrolled { background: rgba(243,245,250,0.92); }
.site-nav.v5 > .container > .navbar {
background: white;
border: 1px solid var(--border-soft);
border-radius: 16px;
padding: 6px 14px 6px 20px !important;
min-height: 64px;
}
.site-nav.v5 .navbar-nav { margin-left: auto !important; margin-right: 0 !important; gap: 2px; }
@media (min-width: 992px) {
.site-nav.v5 .navbar-nav + .d-flex { margin-left: 28px !important; }
}
@media (max-width: 991px) {
.site-nav.v5 > .container > .navbar { padding: 8px 14px !important; min-height: 56px; }
.site-nav.v5 .navbar-nav { margin: 12px 0 !important; }
}
/* ============ Buttons ============ */
.btn {
font-weight: 600;
font-size: 0.95rem;
padding: 0.6rem 1.3rem;
border-radius: 8px;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
border: 1px solid transparent;
}
.btn-primary {
background: var(--brand);
border-color: var(--brand);
color: white;
}
.btn-primary:hover,
.btn-primary:focus {
background: var(--brand-hover);
border-color: var(--brand-hover);
color: white;
}
.btn-outline {
background: transparent;
border-color: var(--border);
color: var(--text);
}
.btn-outline:hover {
background: var(--bg-soft);
color: var(--text);
border-color: var(--text-faint);
}
.btn-ghost {
background: transparent;
color: var(--brand);
padding: 0.5rem 0.75rem;
}
.btn-ghost:hover {
background: var(--brand-soft);
color: var(--brand-hover);
}
.btn-lg {
font-size: 1rem;
padding: 0.85rem 1.7rem;
}
/* ============ Hero ============ */
.hero {
position: relative;
padding: 80px 0 70px;
background: var(--bg);
border-bottom: 1px solid var(--border-soft);
}
.hero h1 { margin-bottom: 1.2rem; }
.hero .lead {
font-size: 1.15rem;
color: var(--text-muted);
margin-bottom: 1.75rem;
max-width: 600px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 1.75rem; }
.hero-trust {
display: flex;
gap: 24px;
flex-wrap: wrap;
align-items: center;
font-size: 0.9rem;
color: var(--text-muted);
}
.hero-trust .dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; display: inline-block; margin-right: 6px; }
.hero-visual {
position: relative;
border-radius: var(--radius-lg);
background: var(--bg-soft);
border: 1px solid var(--border-soft);
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 24px;
}
/* ============ Hero code block (API-focused hero) ============ */
.hero-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.8);
color: var(--brand);
padding: 6px 14px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 18px;
}
.hero-pill .dot {
width: 7px; height: 7px;
background: var(--success);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(5,150,105,0.2);
display: inline-block;
}
.hero-code {
background: #0f172a;
color: #e2e8f0;
border-radius: 14px;
padding: 22px 24px;
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 0.86rem;
line-height: 1.65;
overflow-x: auto;
margin: 0;
border: 1px solid #1e293b;
}
.hero-code .kw { color: #c4b5fd; }
.hero-code .str { color: #86efac; }
.hero-code .key { color: #93c5fd; }
.hero-code .num { color: #fbbf24; }
.hero-code .com { color: #64748b; }
.hero-code-window {
background: #0f172a;
border-radius: 14px;
overflow: hidden;
border: 1px solid #1e293b;
}
.hero-code-window .titlebar {
background: #1e293b;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
color: #94a3b8;
}
.hero-code-window .titlebar .dots { display: inline-flex; gap: 5px; }
.hero-code-window .titlebar .dots i {
width: 11px; height: 11px;
border-radius: 50%;
background: #475569;
display: inline-block;
}
.hero-code-window .hero-code { border-radius: 0; border: none; padding: 18px 22px; }
.hero-svc-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 22px;
}
.hero-svc-chips a {
padding: 7px 14px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.7);
backdrop-filter: blur(6px);
border-radius: 999px;
font-size: 0.85rem;
font-weight: 500;
color: var(--text-muted);
text-decoration: none;
transition: all 0.15s ease;
}
.hero-svc-chips a:hover {
border-color: var(--brand);
color: var(--brand);
background: white;
}
.hero-visual .device-mock {
width: 78%;
background: white;
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 16px;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 0.78rem;
color: var(--text);
}
.hero-visual .msg {
background: var(--bg-muted);
color: var(--text);
padding: 8px 12px;
border-radius: 8px;
margin-bottom: 8px;
}
.hero-visual .msg.sent { background: var(--brand); color: white; margin-left: 20%; }
/* ============ Logo strip ============ */
.logo-strip {
padding: 40px 0;
background: var(--bg-soft);
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
}
.logo-strip .label {
text-align: center;
font-size: 0.82rem;
color: var(--text-faint);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 26px;
}
.logo-strip .logos {
display: flex;
justify-content: space-between;
align-items: center;
gap: 28px;
flex-wrap: nowrap;
max-width: 85%;
margin: 0 auto;
}
.logo-strip .logos img {
height: 42px;
width: auto;
max-width: 100%;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.55;
transition: filter .25s ease, opacity .25s ease;
flex: 0 1 auto;
}
.logo-strip .logos img:hover {
filter: grayscale(0);
opacity: 1;
}
/* Tablet — let logos wrap into 2 rows */
@media (max-width: 991px) {
.logo-strip .logos {
flex-wrap: wrap;
justify-content: center;
gap: 32px 40px;
}
.logo-strip .logos img {
height: 38px;
}
}
/* Mobile — smaller logos, tighter gap */
@media (max-width: 575px) {
.logo-strip .logos {
gap: 22px 28px;
}
.logo-strip .logos img {
height: 30px;
}
}
/* ============ Cards ============ */
.feature-card {
background: white;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 26px;
height: 100%;
transition: border-color 0.18s ease;
}
.feature-card:hover {
border-color: var(--border);
}
.feature-card .icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--brand-soft);
color: var(--brand);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
font-size: 1.25rem;
}
.feature-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.feature-card p { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.95rem; }
.feature-card .read-more {
font-size: 0.9rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
}
.feature-card .read-more:hover { gap: 8px; }
/* ============ Service cards (V6 trio: lavender / slate / sage) ============ */
.service-card {
border: 0;
border-radius: 18px;
padding: 30px;
height: 100%;
display: grid;
grid-template-columns: 68px 1fr;
gap: 22px;
transition: transform .25s ease, box-shadow .25s ease;
color: #fff;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: -30%;
right: -20%;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 60%);
pointer-events: none;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(40,30,80,.18);
}
.service-card .ico {
width: 64px;
height: 64px;
border-radius: 16px;
display: grid;
place-items: center;
font-size: 1.75rem;
background: rgba(255,255,255,0.16);
color: #fff;
border: 1px solid rgba(255,255,255,0.22);
backdrop-filter: blur(8px);
position: relative;
}
.service-card h3 {
font-size: 1.15rem;
margin: 0 0 8px;
color: #fff;
position: relative;
}
.service-card p {
color: rgba(255,255,255,0.85);
font-size: 0.94rem;
line-height: 1.55;
margin: 0 0 14px;
position: relative;
}
.service-card .read-more {
color: #fff;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
opacity: 0.95;
transition: gap .2s ease, opacity .2s ease;
}
.service-card .read-more:hover {
gap: 10px;
color: #fff;
opacity: 1;
}
.service-card.lavender { background: linear-gradient(155deg, #908faf 0%, #4a4870 100%); }
.service-card.slate { background: linear-gradient(155deg, #6d7d99 0%, #2c3a55 100%); }
.service-card.sage { background: linear-gradient(155deg, #87a09a 0%, #46615c 100%); }
/* ============ Stat blocks ============ */
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 24px;
text-align: center;
}
.stat .num {
font-size: 2.4rem;
font-weight: 800;
color: var(--brand);
letter-spacing: -0.02em;
line-height: 1;
}
.stat .label { color: var(--text-muted); font-size: 0.93rem; margin-top: 6px; }
/* ============ Stats Bento (V4 dark lavender) ============ */
.stats-bento {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 14px;
max-width: 1080px;
margin: 0 auto;
}
.stats-bento .tile {
background: #fff;
border: 1px solid #eef1f6;
border-radius: 16px;
padding: 26px 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 18px;
}
.stats-bento .tile .num {
font-size: clamp(1.7rem, 3vw, 2.2rem);
font-weight: 800;
color: var(--text);
letter-spacing: -0.02em;
line-height: 1;
margin: 0;
}
.stats-bento .tile .label {
font-size: 0.88rem;
color: var(--text-muted);
font-weight: 500;
}
.stats-bento .tile .ico {
width: 46px;
height: 46px;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 1.4rem;
align-self: flex-start;
}
.stats-bento .tile.tile-primary {
grid-row: span 2;
border: 0;
padding: 36px 32px;
color: #fff;
position: relative;
overflow: hidden;
background: linear-gradient(155deg, #908faf 0%, #4a4870 100%);
backdrop-filter: blur(12px);
}
.stats-bento .tile.tile-primary::before {
content: '';
position: absolute;
top: -40%;
right: -15%;
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 60%);
pointer-events: none;
}
.stats-bento .tile.tile-primary .num {
font-family: 'Fraunces', Georgia, serif;
font-size: clamp(3rem, 6vw, 4.4rem);
font-weight: 700;
color: #fff;
line-height: 1;
letter-spacing: -0.02em;
margin: 0;
position: relative;
}
.stats-bento .tile.tile-primary .label {
color: rgba(255,255,255,0.88);
font-size: 1rem;
margin-top: 8px;
max-width: 240px;
position: relative;
}
.stats-bento .tile.tile-primary .meta {
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.65);
position: relative;
}
@media (max-width: 800px) {
.stats-bento { grid-template-columns: 1fr 1fr; }
.stats-bento .tile.tile-primary { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 480px) {
.stats-bento { grid-template-columns: 1fr; }
.stats-bento .tile.tile-primary { grid-column: auto; }
}
/* ============ Pricing ============ */
.price-card {
background: white;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 32px 28px;
height: 100%;
position: relative;
}
.price-card.featured {
border: 2px solid var(--brand);
}
.price-card .tag {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--brand);
color: white;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 5px 12px;
border-radius: 999px;
}
.price-card h3 { font-size: 1.2rem; margin-bottom: 0.25rem; }
.price-card .desc { font-size: 0.9rem; color: var(--text-muted); min-height: 42px; }
.price-card .price {
font-size: 2.6rem;
font-weight: 800;
color: var(--text);
letter-spacing: -0.025em;
line-height: 1;
margin: 18px 0 4px;
}
.price-card .price .unit { font-size: 0.95rem; font-weight: 500; color: var(--text-muted); }
.price-card ul.features {
list-style: none;
padding: 0;
margin: 22px 0;
}
.price-card ul.features li {
padding: 7px 0 7px 26px;
position: relative;
color: var(--text);
font-size: 0.95rem;
}
.price-card ul.features li::before {
content: "";
position: absolute;
left: 0;
top: 13px;
width: 16px;
height: 16px;
background: var(--brand-soft);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
/* ============ Why SmsHorizon (V7: visual mock + pills) ============ */
.why-section .why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.why-section h2 {
font-size: clamp(1.8rem, 3.4vw, 2.4rem);
color: var(--text);
margin-bottom: 16px;
line-height: 1.2;
}
.why-section .lead {
color: var(--text-muted);
margin-bottom: 28px;
font-size: 1.02rem;
}
.why-section .pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.why-section .pill {
background: #fff;
border: 1px solid #e6ebf1;
border-radius: 999px;
padding: 10px 18px 10px 14px;
font-size: 0.92rem;
color: #2a3a52;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 500;
transition: border-color .2s ease, box-shadow .2s ease;
}
.why-section .pill:hover {
border-color: #c7d4e6;
box-shadow: 0 4px 12px rgba(16,42,67,0.06);
}
.why-section .pill i {
color: var(--brand);
font-size: 1rem;
}
.why-section .mock {
background: linear-gradient(160deg, #eef4ff 0%, #f7f9fc 100%);
border-radius: 24px;
padding: 36px;
position: relative;
min-height: 380px;
display: flex;
flex-direction: column;
gap: 14px;
justify-content: center;
}
.why-section .mock .sms {
background: #fff;
border-radius: 16px;
padding: 16px 18px;
box-shadow: 0 8px 20px rgba(16,42,67,0.06);
display: flex;
gap: 12px;
align-items: flex-start;
}
.why-section .mock .sms .av {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--brand);
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
font-size: 0.78rem;
flex-shrink: 0;
letter-spacing: 0.02em;
}
.why-section .mock .sms .body { flex: 1; min-width: 0; }
.why-section .mock .sms .sender {
font-size: 0.78rem;
color: var(--text-faint);
font-weight: 600;
margin-bottom: 2px;
letter-spacing: 0.02em;
}
.why-section .mock .sms .msg {
font-size: 0.92rem;
color: #2a3a52;
line-height: 1.5;
}
.why-section .mock .sms .time {
font-size: 0.72rem;
color: var(--text-faint);
margin-top: 4px;
}
.why-section .mock .sms.delayed {
opacity: 0.55;
transform: translateX(-12px);
}
.why-section .mock .badge-tag {
position: absolute;
top: 18px;
right: 18px;
background: var(--success);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
padding: 6px 12px;
border-radius: 999px;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.05em;
}
@media (max-width: 991px) {
.why-section .why-grid { grid-template-columns: 1fr; gap: 40px; }
.why-section .mock { min-height: auto; padding: 28px; }
}
/* ============ Testimonials (V1: quote-mark led) ============ */
.testimonial {
background: #fff;
border: 1px solid #eef1f6;
border-radius: 18px;
padding: 36px 32px 30px;
height: 100%;
box-shadow: 0 1px 2px rgba(16,42,67,0.04);
transition: transform .25s ease, box-shadow .25s ease;
}
.testimonial:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(16,42,67,0.08);
}
.testimonial .quote-mark {
font-family: 'Fraunces', Georgia, serif;
font-size: 4rem;
line-height: 0.6;
color: var(--brand);
margin-bottom: 18px;
display: block;
}
.testimonial .quote {
font-size: 1rem;
color: var(--text);
line-height: 1.65;
margin: 0 0 24px;
}
.testimonial .author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 20px;
border-top: 1px solid #eef1f6;
}
.testimonial .avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--brand-soft);
color: var(--brand);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.95rem;
}
.testimonial .meta strong { display: block; font-size: 0.95rem; color: var(--text); }
.testimonial .meta span { font-size: 0.82rem; color: var(--text-faint); }
/* ============ Google Reviews compact pill ============ */
.google-reviews-pill {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 12px 22px 12px 18px;
background: #fff;
border: 1px solid #e6ebf1;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(16,42,67,0.05);
font-family: 'Figtree', sans-serif;
}
.google-reviews-pill .g-logo {
width: 30px;
height: 30px;
flex-shrink: 0;
}
.google-reviews-pill .rating {
font-weight: 700;
font-size: 1.1rem;
color: var(--text);
letter-spacing: -0.01em;
}
.google-reviews-pill .stars {
display: inline-flex;
align-items: center;
gap: 3px;
color: #f5b400;
font-size: 1rem;
line-height: 1;
}
.google-reviews-pill .stars i { display: inline-block; }
.google-reviews-pill .divider {
width: 1px;
height: 22px;
background: #d9e2ec;
}
.google-reviews-pill .count {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
color: var(--text-muted);
font-weight: 500;
}
.google-reviews-pill .count strong { color: var(--text); font-weight: 600; }
.google-reviews-pill .verified-ico {
color: #1a73e8;
font-size: 1.05rem;
line-height: 1;
}
/* ============ FAQ ============ */
.faq .accordion-item {
border: 1px solid var(--border-soft);
border-radius: var(--radius) !important;
margin-bottom: 10px;
overflow: hidden;
background: white;
}
.faq .accordion-button {
font-weight: 600;
font-size: 1rem;
color: var(--text);
padding: 1rem 1.2rem;
}
.faq .accordion-button:not(.collapsed) {
background: var(--brand-soft);
color: var(--brand);
box-shadow: none;
}
.faq .accordion-button:focus { box-shadow: none; }
.faq .accordion-body { color: var(--text-muted); padding: 0 1.2rem 1.2rem; }
/* ============ Footer ============ */
.site-footer {
background: var(--bg-soft);
border-top: 1px solid var(--border-soft);
/* No margin-top: the last section before the footer already carries its
own bottom padding (typically 32-48px). A margin-top here stacks on top
of that, producing a 140px+ dead gap. The footer's own 48px top padding
is enough breathing room, and the bg-soft + border-top already separate
it visually from the white section above. */
padding: 48px 0 28px;
}
/* Footer column titles use (visually small) so the document outline
doesn't skip from the page's h1/h2 straight to h5 (a11y heading-order). */
.site-footer h2 {
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-faint);
margin-bottom: 14px;
font-weight: 700;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: var(--text-muted); font-size: 0.95rem; }
.site-footer a:hover { color: var(--brand); }
.site-footer .brand-block { margin-bottom: 18px; }
.site-footer .brand-block .brand-logo {
height: 44px;
width: auto;
}
.site-footer .social { display: flex; gap: 10px; margin-top: 14px; }
.site-footer .social a {
width: 34px; height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: white;
border: 1px solid var(--border);
color: var(--text-muted);
}
.site-footer .social a:hover { color: var(--brand); border-color: var(--brand); }
.site-footer .legal {
border-top: 1px solid var(--border-soft);
padding-top: 22px;
margin-top: 36px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 0.87rem;
color: var(--text-faint);
}
.site-footer .legal .legal-badges {
flex: 1 1 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
order: 2;
}
@media (min-width: 768px) {
.site-footer .legal .legal-badges {
flex: 1;
order: 0;
}
}
/* Mobile: center the whole legal row. The TRAI/DLT badges are already centered;
put the copyright line and the policy links on their own full-width rows and
center them too (they were defaulting to left-aligned). */
@media (max-width: 767.98px) {
.site-footer .legal {
justify-content: center;
text-align: center;
}
.site-footer .legal > div {
flex: 1 1 100%;
}
/* Roomy left indent on the two link columns (Services, Company) so they don't
sit flush against the screen edge on phones. Only the .col-6 columns are
these two; the brand/contact columns aren't col-6. ~28px leaves the longest
label ("Transactional SMS") comfortably on one line. */
.site-footer .row > .col-6 {
padding-left: 28px;
}
/* Center the brand column (logo, tagline, social icon). It's the FIRST footer
column; the contact column is also col-lg-4, so target by position not class.
text-align centers the logo (inline-block) and the tagline; the social row is
flex, so it needs justify-content. */
.site-footer .row > div:first-child {
text-align: center;
}
.site-footer .social {
justify-content: center;
}
}
.badge-trust {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.76rem;
font-weight: 500;
color: var(--text-muted);
background: transparent;
border: 1px solid var(--border);
padding: 4px 11px;
border-radius: 999px;
white-space: nowrap;
}
.badge-trust i { color: var(--text-faint); font-size: 0.85rem; }
/* ============ Article / Content pages ============ */
/* Selector intentionally scoped to `body.has-hero-nav .page-header`
(specificity 0,2,1) to match the L539 rule that previously won the
cascade and pinned padding-top to 140px on every page-header. With
matching specificity, this rule (later in source order) wins. The
plain `.page-header` selector LOST silently — every previous bump
I made to this value was a no-op. */
body.has-hero-nav .page-header {
/* TRUE symmetry. The floating island occupies the top ~92px of the
viewport (top:28px + ~64px tall), so the VISIBLE gap above the
eyebrow = padding-top - 92. To make that equal the bottom gap:
padding-top = padding-bottom + 92
164 - 92 = 72 == 72 below → symmetric. */
padding: 164px 0 72px;
background: white;
border-bottom: 1px solid var(--border-soft);
text-align: center;
position: relative;
overflow: hidden;
}
/* Tablet + mobile. Island sits at top:18px and is shorter (~64px),
so it clears ~82px. padding-top = 56 + 82 = 138 → ~56 above == 56
below. Covers the full 0-991px range so the 768-991px band doesn't
fall back to the L571 rule's 120px. */
@media (max-width: 991px) {
body.has-hero-nav .page-header {
padding-top: 138px;
padding-bottom: 56px;
}
}
.page-header::before {
content: '';
position: absolute;
inset: -40px;
background:
radial-gradient(at 18% 30%, #4f46e5 0%, transparent 35%),
radial-gradient(at 80% 60%, #0ea5e9 0%, transparent 35%);
filter: blur(90px);
opacity: 0.12;
z-index: 0;
pointer-events: none;
}
.page-header .container { position: relative; z-index: 2; }
.page-header h1 { margin-bottom: 0.55rem; line-height: 1.15; }
.page-header p { font-size: 1.05rem; max-width: 580px; margin: 0 auto; color: var(--text-muted); }
.page-header .header-meta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
padding: 7px 14px 7px 10px;
background: white;
border: 1px solid var(--border-soft);
border-radius: 999px;
font-size: 0.88rem;
color: var(--text);
font-weight: 500;
}
.page-header .header-meta .live-dot {
width: 8px; height: 8px;
background: var(--success);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(5,150,105,0.18);
display: inline-block;
}
.prose {
max-width: 760px;
margin: 0 auto;
}
.prose p, .prose ul, .prose ol { font-size: 1.02rem; color: var(--text-muted); line-height: 1.75; }
.prose h2 { margin-top: 1.6em; margin-bottom: 0.7em; }
.prose h3 { margin-top: 1.8em; margin-bottom: 0.6em; }
.prose ul li, .prose ol li { margin-bottom: 0.4em; }
.prose img { border-radius: var(--radius); margin: 1.5em 0; }
.prose table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
font-size: 0.95rem;
}
.prose table th,
.prose table td {
text-align: left;
padding: 12px 16px;
border-bottom: 1px solid var(--border-soft);
}
.prose table th {
background: var(--bg-soft);
font-weight: 600;
color: var(--text);
}
/* ============ Contact ============ */
.contact-card {
background: white;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 30px;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-info .item { display: flex; gap: 14px; align-items: flex-start; }
.contact-info .item .icon {
width: 38px; height: 38px;
border-radius: 8px;
background: var(--brand-soft);
color: var(--brand);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-info .item strong { display: block; color: var(--text); font-size: 0.95rem; margin-bottom: 2px; }
.contact-info .item span, .contact-info .item a { color: var(--text-muted); font-size: 0.95rem; }
.form-control, .form-select {
border-radius: 8px;
border: 1px solid var(--border);
padding: 0.65rem 0.85rem;
font-size: 0.95rem;
background: white;
}
.form-control:focus, .form-select:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.form-label { font-weight: 500; font-size: 0.9rem; color: var(--text); margin-bottom: 5px; }
/* ============ Material outlined inputs (Style 2) ============ */
.mat-field {
position: relative;
}
.mat-field .mat-input,
.mat-field .mat-select,
.mat-field .mat-textarea {
width: 100%;
border: 1px solid var(--border);
border-radius: 6px;
background: white;
padding: 16px 14px;
font-size: 1rem;
font-family: inherit;
color: var(--text);
outline: none;
transition: border-color 0.15s ease, padding 0.15s ease;
appearance: none;
-webkit-appearance: none;
}
.mat-field .mat-textarea { min-height: 110px; resize: vertical; }
.mat-field .mat-select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 14px;
padding-right: 38px;
}
.mat-field label {
position: absolute;
left: 12px;
top: 16px;
color: var(--text-muted);
font-size: 1rem;
pointer-events: none;
transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
background: white;
padding: 0 5px;
font-weight: 400;
}
.mat-field .mat-input:focus,
.mat-field .mat-select:focus,
.mat-field .mat-textarea:focus {
border: 2px solid var(--brand);
padding: 15px 13px;
}
.mat-field .mat-textarea:focus { padding: 15px 13px; }
.mat-field .mat-input:focus + label,
.mat-field .mat-input:not(:placeholder-shown) + label,
.mat-field .mat-textarea:focus + label,
.mat-field .mat-textarea:not(:placeholder-shown) + label,
.mat-field .mat-select:focus + label,
.mat-field .mat-select.has-value + label,
.mat-field.always-up label {
top: -8px;
font-size: 0.78rem;
color: var(--brand);
font-weight: 500;
}
.mat-field .mat-input:not(:focus):not(:placeholder-shown) + label,
.mat-field .mat-textarea:not(:focus):not(:placeholder-shown) + label,
.mat-field .mat-select:not(:focus).has-value + label {
color: var(--text-muted);
}
/* ============ CTA strip ============ */
.cta-strip {
background: var(--brand);
color: white;
border-radius: var(--radius-lg);
padding: 50px 44px;
text-align: center;
margin: 0 auto;
}
.cta-strip h2 { color: white; margin-bottom: 0.8rem; }
.cta-strip p { color: rgba(255,255,255,0.88); font-size: 1.05rem; margin-bottom: 1.4rem; }
.cta-strip .btn-primary {
background: white;
color: var(--brand);
border-color: white;
}
.cta-strip .btn-primary:hover { background: #f1f5fb; color: var(--brand-hover); }
@media (max-width: 768px) {
.cta-strip { padding: 36px 22px; }
.hero { padding: 50px 0; text-align: center; }
.hero-cta { justify-content: center; }
.hero-trust { justify-content: center; }
}
/* ============================================================
CTA — frosted lavender (V1)
============================================================ */
.cta-frosted {
position: relative;
border-radius: 26px;
overflow: hidden;
padding: 56px 56px;
text-align: center;
color: #fff;
background:
radial-gradient(circle 460px at 16% 12%, rgba(255,255,255,0.18) 0%, transparent 55%),
radial-gradient(circle 420px at 88% 85%, rgba(180, 110, 140, 0.28) 0%, transparent 55%),
radial-gradient(circle 320px at 90% 18%, rgba(210, 140, 170, 0.09) 0%, transparent 60%),
linear-gradient(135deg, #645877 0%, #3a3251 100%);
border: 1px solid rgba(255,255,255,0.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.32),
inset 0 -1px 0 rgba(0,0,0,0.08),
inset 0 0 80px rgba(255,255,255,0.04),
0 24px 60px -28px rgba(40,30,80,0.55);
}
/* Subtle SVG grain for the "frosted" surface texture */
.cta-frosted::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.35;
mix-blend-mode: overlay;
pointer-events: none;
border-radius: inherit;
}
/* Top edge shimmer — light catching the glass */
.cta-frosted::after {
content: "";
position: absolute;
top: 0;
left: 8%;
width: 50%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
pointer-events: none;
}
.cta-frosted > * { position: relative; z-index: 1; }
.cta-frosted h2 {
color: #fff;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.6rem;
}
.cta-frosted p {
color: rgba(255, 255, 255, 0.86);
font-size: 1.08rem;
margin-bottom: 1.8rem;
}
.cta-frosted .cta-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
font-size: 0.82rem;
font-weight: 600;
margin-bottom: 16px;
}
.cta-frosted .btn-ink {
background: #fff;
border-color: #fff;
color: #3a3865;
font-weight: 700;
font-size: 1.05rem;
padding: 0.95rem 2.1rem;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 6px 20px rgba(40, 30, 80, 0.18);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-frosted .btn-ink:hover {
background: #fff;
border-color: #fff;
color: #3a3865;
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(40, 30, 80, 0.26);
}
.cta-frosted .btn-ink .bi-chevron-right {
font-size: 1rem;
transition: transform 0.2s ease;
}
.cta-frosted .btn-ink:hover .bi-chevron-right {
transform: translateX(3px);
}
.cta-frosted .btn-glass {
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
font-weight: 600;
padding: 0.85rem 1.7rem;
}
.cta-frosted .btn-glass:hover {
background: rgba(255, 255, 255, 0.24);
color: #fff;
border-color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 640px) {
.cta-frosted { padding: 44px 24px; }
.cta-frosted h2 { font-size: 1.7rem; }
}
/* ============================================================
CTA — frosted dusk (V3) · deep indigo with glow under glass
============================================================ */
.cta-dusk {
position: relative;
border-radius: 26px;
overflow: hidden;
padding: 70px 56px;
text-align: center;
color: #e0e7ff;
background:
radial-gradient(circle 500px at 18% 25%, rgba(99, 102, 241, 0.55) 0%, transparent 55%),
radial-gradient(circle 460px at 90% 80%, rgba(236, 72, 153, 0.35) 0%, transparent 55%),
linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
}
.cta-dusk::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
pointer-events: none;
}
.cta-dusk > * { position: relative; z-index: 1; }
.cta-dusk h2 {
color: #f5f3ff;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.6rem;
}
.cta-dusk p {
color: #c7d2fe;
opacity: 0.88;
font-size: 1.08rem;
margin-bottom: 1.8rem;
}
.cta-dusk .cta-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #c7d2fe;
font-size: 0.82rem;
font-weight: 600;
margin-bottom: 16px;
}
.cta-dusk .btn-light {
background: #fff;
border: 0;
color: #312e81;
font-weight: 600;
padding: 0.85rem 1.7rem;
}
.cta-dusk .btn-light:hover { background: #f5f3ff; color: #312e81; }
.cta-dusk .btn-glass {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #f5f3ff;
font-weight: 600;
padding: 0.85rem 1.7rem;
}
.cta-dusk .btn-glass:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
@media (max-width: 640px) {
.cta-dusk { padding: 56px 28px; }
.cta-dusk h2 { font-size: 1.7rem; }
}
/* ============================================================
Hero phone mockup — SMS notifications visual
============================================================ */
.hero-phone {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
}
.hero-phone::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle 220px at 20% 20%, rgba(236, 72, 153, 0.25), transparent 60%),
radial-gradient(circle 240px at 80% 80%, rgba(139, 92, 246, 0.25), transparent 60%);
filter: blur(20px);
pointer-events: none;
z-index: 0;
}
.phone-frame {
position: relative;
z-index: 1;
width: 300px;
height: 600px;
background: #0f172a;
border-radius: 48px;
padding: 14px;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.06) inset,
0 30px 60px -15px rgba(15, 23, 42, 0.4),
0 18px 36px -10px rgba(99, 102, 241, 0.25);
transform: rotate(-1.5deg);
}
.phone-screen {
position: relative;
width: 100%;
height: 100%;
border-radius: 36px;
background:
radial-gradient(circle 200px at 50% 0%, rgba(167, 139, 250, 0.25), transparent 70%),
linear-gradient(180deg, #1e1b4b 0%, #312e81 60%, #1e1b4b 100%);
overflow: hidden;
padding: 56px 14px 18px;
}
.phone-notch {
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 26px;
background: #000;
border-radius: 14px;
z-index: 2;
}
.phone-time {
text-align: center;
font-size: 3.4rem;
font-weight: 200;
color: #fff;
letter-spacing: -0.02em;
line-height: 1;
margin: 8px 0 4px;
font-family: 'Figtree', sans-serif;
}
.phone-date {
text-align: center;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
margin-bottom: 18px;
letter-spacing: 0.02em;
}
.sms-notif {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 14px;
padding: 11px 13px;
margin-bottom: 8px;
color: #fff;
font-size: 0.78rem;
line-height: 1.4;
animation: notifSlideIn 0.6s ease-out backwards;
}
.sms-notif:nth-child(3) { animation-delay: 0.15s; }
.sms-notif:nth-child(4) { animation-delay: 0.3s; }
.sms-notif:nth-child(5) { animation-delay: 0.45s; }
@keyframes notifSlideIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.sms-notif .notif-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.sms-notif .notif-head .left {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 0.74rem;
letter-spacing: 0.02em;
}
.sms-notif .notif-head .left .icon {
width: 18px; height: 18px;
border-radius: 5px;
background: #4f46e5;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
color: #fff;
}
.sms-notif .notif-head .icon.green { background: #10b981; }
.sms-notif .notif-head .icon.orange { background: #f59e0b; }
.sms-notif .notif-head .time {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.65);
font-weight: 500;
}
.sms-notif .msg {
color: rgba(255, 255, 255, 0.92);
font-size: 0.78rem;
line-height: 1.45;
}
.sms-notif .msg strong { font-weight: 600; color: #fff; }
@media (max-width: 991px) {
.hero-phone { margin-top: 30px; }
.phone-frame { transform: rotate(0deg); width: 260px; height: 520px; }
.phone-time { font-size: 2.8rem; }
}
/* ============================================================
Hero MacBook mockup — analytics dashboard
============================================================ */
.hero-macbook {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;
}
.hero-macbook::before {
content: "";
position: absolute;
inset: 10% -5%;
background:
radial-gradient(circle 260px at 18% 30%, rgba(236, 72, 153, 0.22), transparent 60%),
radial-gradient(circle 280px at 82% 75%, rgba(139, 92, 246, 0.22), transparent 60%);
filter: blur(24px);
pointer-events: none;
z-index: 0;
}
.mb-screen {
position: relative;
z-index: 1;
width: 100%;
max-width: 560px;
background: #1a1a1a;
border-radius: 14px 14px 4px 4px;
padding: 22px 14px 14px;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 24px 50px -12px rgba(15, 23, 42, 0.35),
0 14px 30px -8px rgba(99, 102, 241, 0.18);
}
.mb-notch {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 11px;
background: #000;
border-radius: 0 0 8px 8px;
z-index: 2;
}
.mb-notch::after {
content: "";
position: absolute;
top: 4px; left: 50%;
transform: translateX(-50%);
width: 4px; height: 4px;
border-radius: 50%;
background: #2a2a2a;
}
.mb-display {
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 16 / 10;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 4px;
overflow: hidden;
font-family: 'Figtree', sans-serif;
color: #0f172a;
}
.mb-hinge {
position: relative;
z-index: 1;
width: 105%;
max-width: 588px;
height: 5px;
margin-top: -2px;
background: linear-gradient(180deg, #2a2a2a 0%, #3a3a3a 50%, #1a1a1a 100%);
border-radius: 0 0 4px 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.mb-base {
position: relative;
z-index: 1;
width: 112%;
max-width: 628px;
height: 8px;
background: linear-gradient(180deg, #c0c0c0 0%, #9a9a9a 100%);
border-radius: 0 0 18px 18px;
box-shadow: 0 14px 24px -10px rgba(15, 23, 42, 0.3);
}
.mb-base::after {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 60px; height: 3px;
background: #6b7280;
border-radius: 0 0 6px 6px;
}
/* Dashboard inside MacBook */
.dash {
display: flex;
flex-direction: column;
height: 100%;
padding: 12px 16px;
}
.dash-topbar {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.7rem;
color: #64748b;
padding-bottom: 10px;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 14px;
}
.dash-topbar .brand {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: #1d4ed8;
}
.dash-topbar .brand .logo {
width: 14px; height: 14px;
border-radius: 4px;
background: linear-gradient(135deg, #1d4ed8, #6366f1);
}
.dash-topbar .range {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
background: #f1f5f9;
border-radius: 999px;
font-weight: 500;
font-size: 0.65rem;
}
.dash-main {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 14px;
flex: 1;
min-height: 0;
}
.dash-chart-wrap {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.dash-chart {
position: relative;
width: 100%;
max-width: 180px;
}
.dash-chart svg { width: 100%; height: auto; display: block; }
.dash-chart .center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.dash-chart .center .big {
font-size: 1.5rem;
font-weight: 700;
color: #0f172a;
line-height: 1;
letter-spacing: -0.02em;
}
.dash-chart .center .lbl {
font-size: 0.62rem;
color: #64748b;
margin-top: 3px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.dash-right {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.7rem;
}
.dash-right .legend-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 8px;
border-radius: 6px;
background: #fff;
border: 1px solid #e2e8f0;
}
.dash-right .legend-row .lab {
display: inline-flex;
align-items: center;
gap: 6px;
color: #334155;
font-weight: 500;
}
.dash-right .legend-row .dot {
width: 8px; height: 8px; border-radius: 50%;
}
.dash-right .legend-row .val {
font-weight: 600;
color: #0f172a;
font-variant-numeric: tabular-nums;
}
.dash-right .legend-row .dot.g { background: #22c55e; }
.dash-right .legend-row .dot.r { background: #ef4444; }
.dash-right .legend-row .dot.p { background: #a855f7; }
.dash-right .legend-row .dot.b { background: #3b82f6; }
.dash-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e2e8f0;
}
.dash-stats .stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.dash-stats .stat .k {
font-size: 0.62rem;
color: #64748b;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.dash-stats .stat .v {
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.dash-stats .stat .v .up {
font-size: 0.62rem;
color: #16a34a;
font-weight: 600;
margin-left: 4px;
}
@media (max-width: 991px) {
.hero-macbook { margin-top: 40px; }
}
@media (max-width: 520px) {
.dash-main { grid-template-columns: 1fr; }
.dash-chart { max-width: 130px; }
.dash-right { font-size: 0.65rem; }
}
/* ============================================================
Hero MacBook dashboard — refined (browser chrome + solid pie)
============================================================ */
.mb-display .browser-bar {
background: #e8eaed;
padding: 6px 10px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #d1d5db;
}
.mb-display .browser-bar .traffic {
display: inline-flex;
gap: 4px;
}
.mb-display .browser-bar .traffic i {
width: 8px; height: 8px;
border-radius: 50%;
display: inline-block;
}
.mb-display .browser-bar .traffic i:nth-child(1) { background: #ff5f57; }
.mb-display .browser-bar .traffic i:nth-child(2) { background: #febc2e; }
.mb-display .browser-bar .traffic i:nth-child(3) { background: #28c840; }
.mb-display .browser-bar .url {
flex: 1;
background: #fff;
border-radius: 5px;
padding: 2px 10px;
font-size: 0.65rem;
color: #4b5563;
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Figtree', sans-serif;
}
.mb-display .browser-bar .url i { color: #6b7280; font-size: 0.65rem; }
.dash-pie {
position: relative;
width: 100%;
max-width: 175px;
}
.dash-pie svg { width: 100%; height: auto; display: block; overflow: visible; }
.dash-pie .pct-tag {
position: absolute;
top: 62%; left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.dash-spark {
margin-top: 12px;
padding: 10px 12px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
}
.dash-spark .head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.65rem;
color: #64748b;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: uppercase;
margin-bottom: 6px;
}
.dash-spark .head .val {
font-size: 0.78rem;
color: #0f172a;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
}
.dash-spark svg { width: 100%; height: 32px; display: block; }
/* ============================================================
Hero dashboard — live message activity feed
============================================================ */
.dash-topbar .live {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 999px;
font-size: 0.62rem;
color: #047857;
font-weight: 600;
}
.dash-topbar .live .pulse {
width: 6px; height: 6px;
border-radius: 50%;
background: #10b981;
position: relative;
}
.dash-topbar .live .pulse::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
background: rgba(16, 185, 129, 0.4);
animation: livePulse 1.6s ease-out infinite;
}
@keyframes livePulse {
0% { transform: scale(0.6); opacity: 0.9; }
100% { transform: scale(2.2); opacity: 0; }
}
.feed-list {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-height: 0;
overflow: hidden;
}
.feed-row {
display: grid;
grid-template-columns: 26px 1fr auto;
gap: 9px;
align-items: flex-start;
padding: 8px 10px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
animation: feedSlideIn 0.5s ease-out backwards;
}
.feed-row:nth-child(2) { animation-delay: 0.12s; }
.feed-row:nth-child(3) { animation-delay: 0.24s; }
.feed-row:nth-child(4) { animation-delay: 0.36s; }
@keyframes feedSlideIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.feed-row .icon {
width: 26px; height: 26px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.02em;
}
.feed-row .icon.idg { background: #4f46e5; } /* indigo */
.feed-row .icon.org { background: #f59e0b; } /* orange */
.feed-row .icon.grn { background: #10b981; } /* green */
.feed-row .icon.red { background: #ef4444; } /* red */
.feed-row .icon.pur { background: #a855f7; } /* purple */
.feed-row .body { min-width: 0; }
.feed-row .meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.68rem;
color: #475569;
font-weight: 500;
margin-bottom: 2px;
}
.feed-row .meta .sender {
color: #0f172a;
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.02em;
}
.feed-row .meta .arrow { color: #94a3b8; }
.feed-row .meta .recipient {
font-family: 'JetBrains Mono', ui-monospace, monospace;
color: #64748b;
font-size: 0.65rem;
}
.feed-row .msg {
font-size: 0.7rem;
color: #64748b;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.feed-row .right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.feed-row .status {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 7px;
border-radius: 4px;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.feed-row .status.delivered {
background: #dcfce7; color: #166534;
}
.feed-row .status.queued {
background: #fef3c7; color: #92400e;
}
.feed-row .status.sent {
background: #dbeafe; color: #1e40af;
}
.feed-row .time {
font-size: 0.6rem;
color: #94a3b8;
font-variant-numeric: tabular-nums;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.feed-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #e2e8f0;
font-size: 0.65rem;
color: #64748b;
}
.feed-footer strong {
color: #0f172a;
font-weight: 700;
margin: 0 2px;
}
/* ============================================================
Hero bento grid — non-mockup creative visual
============================================================ */
.hero-bento {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 20px 0;
}
.hero-bento::before {
content: "";
position: absolute;
inset: -10%;
background:
radial-gradient(circle 260px at 18% 25%, rgba(236, 72, 153, 0.18), transparent 60%),
radial-gradient(circle 280px at 85% 75%, rgba(139, 92, 246, 0.20), transparent 60%);
filter: blur(28px);
pointer-events: none;
z-index: 0;
}
.bento-tile {
position: relative;
z-index: 1;
background: white;
border: 1px solid #e6e8f0;
border-radius: 18px;
padding: 20px;
box-shadow: 0 6px 20px -10px rgba(15, 23, 42, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bento-tile:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.12);
}
.bento-tile.span-2 { grid-column: 1 / -1; }
/* — Counter tile (hero stat) — */
.tile-counter {
background:
radial-gradient(circle 200px at 90% 30%, rgba(167, 139, 250, 0.25), transparent 70%),
linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
border-color: rgba(167, 139, 250, 0.35);
padding: 24px 26px;
}
.tile-counter .lbl {
font-size: 0.7rem;
color: #6d28d9;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 6px;
}
.tile-counter .num {
font-size: clamp(2.4rem, 5vw, 3.2rem);
font-weight: 800;
line-height: 1;
color: #1e1b4b;
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
margin: 0 0 10px;
}
.tile-counter .row-bottom {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 0.82rem;
}
.tile-counter .sub { color: #5b4d7a; }
.tile-counter .trend {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.14);
color: #15803d;
font-size: 0.74rem;
font-weight: 700;
}
/* — SMS bubble tile — */
.tile-bubble {
padding: 18px;
background: linear-gradient(180deg, #fafbff 0%, #f4f6fb 100%);
}
.tile-bubble .bubble {
position: relative;
background: #2a8d4f;
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
color: #fff;
border-radius: 16px 16px 16px 4px;
padding: 12px 14px 13px;
box-shadow: 0 4px 14px -4px rgba(16, 185, 129, 0.35);
}
.tile-bubble .bubble::before {
content: "";
position: absolute;
bottom: -1px;
left: -6px;
width: 16px;
height: 16px;
background: linear-gradient(135deg, #34d399, #10b981);
clip-path: path('M16 0 Q 4 4 0 16 L 16 16 Z');
}
.tile-bubble .from {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 6px;
opacity: 0.92;
}
.tile-bubble .from .time { font-weight: 500; opacity: 0.8; font-size: 0.65rem; }
.tile-bubble .text {
font-size: 0.86rem;
line-height: 1.45;
color: #ffffff;
font-weight: 500;
}
.tile-bubble .text strong { font-weight: 700; }
.tile-bubble .delivered {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.7rem;
color: #047857;
font-weight: 600;
margin-top: 8px;
}
/* — Stat tile (speed / compliance) — */
.tile-stat {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 130px;
padding: 18px 20px;
}
.tile-stat .icon-wrap {
width: 40px;
height: 40px;
border-radius: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
margin-bottom: auto;
}
.tile-stat .v {
font-size: 1.7rem;
font-weight: 800;
color: #0f172a;
line-height: 1;
letter-spacing: -0.02em;
margin-top: 14px;
margin-bottom: 4px;
font-variant-numeric: tabular-nums;
}
.tile-stat .k {
font-size: 0.82rem;
color: #64748b;
font-weight: 500;
line-height: 1.35;
}
.tile-stat.speed .icon-wrap { background: #fef3c7; color: #b45309; }
.tile-stat.dlt .icon-wrap { background: #dcfce7; color: #166534; }
.tile-stat.throughput .icon-wrap { background: #dbeafe; color: #1e40af; }
@media (max-width: 991px) {
.hero-bento { margin-top: 40px; }
}
@media (max-width: 480px) {
.hero-bento { grid-template-columns: 1fr; }
.bento-tile.span-2 { grid-column: 1; }
}
/* ============================================================
Hero — centered layout (no right-side visual)
============================================================ */
body.has-hero-nav .hero.hero-center {
padding-top: 160px;
padding-bottom: 110px;
text-align: center;
}
.hero.hero-center .hero-pill {
margin-left: auto;
margin-right: auto;
}
.hero.hero-center h1 {
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
.hero.hero-center .lead {
max-width: 640px;
margin-left: auto;
margin-right: auto;
font-size: 1.18rem;
color: #4a4a6a;
}
.hero.hero-center .hero-cta {
margin-top: 28px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.hero.hero-center .hero-trust {
margin-top: 28px;
display: flex;
gap: 22px;
flex-wrap: wrap;
}
@media (max-width: 767px) {
body.has-hero-nav .hero.hero-center {
padding-top: 130px;
padding-bottom: 70px;
}
.hero.hero-center .lead { font-size: 1.05rem; }
}
/* ============================================================
Pricing — horizontal strip rows
============================================================ */
.price-list {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 16px;
overflow: hidden;
}
.price-row {
display: grid;
grid-template-columns: 1.5fr 1fr 0.9fr 1fr auto;
gap: 20px;
align-items: center;
padding: 20px 26px;
border-bottom: 1px solid var(--border-soft);
transition: background 0.15s ease;
}
.price-row:last-child { border-bottom: none; }
.price-row:hover { background: #fafbff; }
.price-row.featured {
background: linear-gradient(90deg, #f5f3ff 0%, #fff 100%);
border-left: 3px solid var(--brand);
padding-left: 23px;
}
.price-row .label-row {
display: flex;
align-items: center;
gap: 12px;
}
.price-row .icon {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--brand-soft);
color: var(--brand);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.price-row.tier-free .icon { background: #ecfdf5; color: #047857; }
.price-row.tier-business .icon { background: #fef3c7; color: #b45309; }
.price-row.tier-enterprise .icon { background: #fde2e8; color: #be185d; }
.price-row .plan {
font-weight: 700;
font-size: 1.05rem;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.2;
}
.price-row .plan small {
display: block;
font-weight: 500;
color: var(--text-muted);
font-size: 0.78rem;
margin-top: 3px;
}
.price-row .plan .popular {
display: inline-block;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--brand);
background: var(--brand-soft);
padding: 2px 7px;
border-radius: 4px;
margin-left: 6px;
vertical-align: 2px;
}
.price-row .col-label {
font-size: 0.7rem;
color: var(--text-faint);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
display: block;
margin-bottom: 4px;
}
.price-row .col-val {
font-size: 1rem;
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.price-row .col-val.rate { color: var(--brand); }
.price-row .col-val.total { font-size: 1.12rem; }
.price-row .col-val .sm { font-weight: 500; color: var(--text-muted); font-size: 0.78rem; }
.price-row .cta {
padding: 9px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
background: #fff;
border: 1px solid var(--brand);
color: var(--brand);
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.price-row .cta:hover { background: var(--brand); color: #fff; }
.price-row.featured .cta { background: var(--brand); color: #fff; }
.price-row.featured .cta:hover { background: var(--brand-hover); }
.price-callout {
margin-top: 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
background: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 12px;
padding: 16px 22px;
font-size: 0.94rem;
color: var(--text-muted);
flex-wrap: wrap;
}
.price-callout strong { color: var(--text); }
.price-callout a { color: var(--brand); font-weight: 600; text-decoration: none; white-space: nowrap; }
.price-callout a:hover { color: var(--brand-hover); }
@media (max-width: 991px) {
.price-row {
grid-template-columns: 1fr;
gap: 14px;
padding: 20px 22px;
}
.price-row.featured { padding-left: 19px; }
.price-row .cta { width: 100%; text-align: center; }
}
.price-row.tier-premium .icon { background: #ede9fe; color: #6d28d9; }
.price-wrap {
max-width: 880px;
margin: 0 auto;
}
/* Free-trial banner CTA below pricing table */
.trial-cta {
margin-top: 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
background:
radial-gradient(circle 220px at 8% 50%, rgba(167, 139, 250, 0.25), transparent 70%),
linear-gradient(135deg, #f5f3ff 0%, #eef4ff 100%);
border: 1px solid #ddd6fe;
border-radius: 16px;
padding: 18px 24px;
flex-wrap: wrap;
}
.trial-cta .left {
display: flex;
align-items: center;
gap: 14px;
}
.trial-cta .icon-tile {
width: 46px;
height: 46px;
border-radius: 12px;
background: #fff;
color: #6d28d9;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
box-shadow: 0 4px 14px -4px rgba(109, 40, 217, 0.25);
}
.trial-cta .copy strong {
display: block;
color: #1e1b4b;
font-size: 1.02rem;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 2px;
}
.trial-cta .copy span {
color: #5b4d7a;
font-size: 0.92rem;
}
.trial-cta .copy span strong {
display: inline;
font-weight: 700;
color: #4c1d95;
}
.trial-cta .btn-trial {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
background: #4c1d95;
color: #fff;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease;
}
.trial-cta .btn-trial:hover { background: #3b1480; color: #fff; }
@media (max-width: 640px) {
.trial-cta { padding: 18px 20px; }
.trial-cta .btn-trial { width: 100%; justify-content: center; }
}
/* "Applies to" chip row — centered in hero */
.applies-to {
margin: 20px auto 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
text-align: center;
}
.applies-to .label {
font-size: 0.88rem;
color: #5b4d7a;
font-weight: 500;
}
.applies-to .chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 13px;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 999px;
font-size: 0.88rem;
font-weight: 600;
color: #1e1b4b;
}
.applies-to .chip i { font-size: 0.95rem; }
.applies-to .chip.txn i { color: #1d4ed8; }
.applies-to .chip.promo i { color: #ec4899; }
/* ============================================================
FAQ — V1 minimal line list (no border at start/end)
============================================================ */
.faq-list details {
border-bottom: 1px solid var(--border-soft);
}
.faq-list details:last-child {
border-bottom: none;
}
.faq-list details > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 4px;
font-size: 1.05rem;
font-weight: 600;
color: var(--text);
transition: color 0.15s ease;
outline: none;
}
.faq-list details > summary::-webkit-details-marker { display: none; }
.faq-list details > summary:focus-visible {
outline: 2px solid #93c5fd;
outline-offset: 2px;
border-radius: 4px;
}
.faq-list details > summary:hover { color: var(--brand); }
.faq-list details > summary .plus {
width: 22px; height: 22px;
position: relative;
flex-shrink: 0;
transition: transform 0.25s ease;
color: var(--text-muted);
}
.faq-list details > summary .plus::before,
.faq-list details > summary .plus::after {
content: "";
position: absolute;
background: currentColor;
border-radius: 1px;
}
.faq-list details > summary .plus::before {
left: 50%; top: 2px; bottom: 2px; width: 2px;
transform: translateX(-50%);
}
.faq-list details > summary .plus::after {
top: 50%; left: 2px; right: 2px; height: 2px;
transform: translateY(-50%);
}
.faq-list details[open] > summary { color: var(--brand); }
.faq-list details[open] > summary .plus {
transform: rotate(45deg);
color: var(--brand);
}
.faq-list details .answer {
padding: 0 4px 22px;
font-size: 0.96rem;
line-height: 1.65;
color: var(--text-muted);
}
.faq-list details .answer a { color: var(--brand); font-weight: 600; }
/* "Included in every plan" — asymmetric bento mosaic (V3) */
.plan-bento {
max-width: 970px;
margin: 0 auto;
}
.plan-bento .header {
text-align: center;
margin-bottom: 36px;
}
.plan-bento .header h2 {
font-size: 2.1rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--text);
margin: 14px 0 10px;
line-height: 1.15;
}
.plan-bento .header p {
color: var(--text-muted);
font-size: 1.05rem;
margin: 0;
line-height: 1.55;
}
.plan-bento .mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(120px, auto);
gap: 14px;
}
.plan-bento .tile {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 16px;
padding: 22px;
transition: transform 0.2s ease, border-color 0.15s ease;
}
.plan-bento .tile:hover {
transform: translateY(-3px);
border-color: #c7d2fe;
}
.plan-bento .tile.big {
grid-column: span 2;
grid-row: span 2;
background: linear-gradient(135deg, #eef4ff 0%, #f5f3ff 100%);
border-color: rgba(167, 139, 250, 0.3);
padding: 28px;
}
.plan-bento .tile.wide { grid-column: span 2; }
.plan-bento .tile .icon-tile {
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--brand-soft);
color: var(--brand);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
margin-bottom: 12px;
}
.plan-bento .tile.big .icon-tile {
width: 56px;
height: 56px;
font-size: 1.6rem;
border-radius: 14px;
background: #fff;
color: var(--brand);
}
.plan-bento .tile h4 {
font-size: 1rem;
font-weight: 700;
color: var(--text);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.plan-bento .tile.big h4 {
font-size: 1.35rem;
line-height: 1.25;
}
.plan-bento .tile p {
font-size: 0.88rem;
color: var(--text-muted);
margin: 0;
line-height: 1.5;
}
.plan-bento .tile.big p { font-size: 1rem; }
.plan-bento .tile.minimal {
background: transparent;
border: 1px dashed #cbd5e1;
}
.plan-bento .tile.minimal .icon-tile {
background: transparent;
color: var(--text-muted);
}
@media (max-width: 900px) {
.plan-bento .mosaic { grid-template-columns: repeat(2, 1fr); }
.plan-bento .tile.big,
.plan-bento .tile.wide { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 520px) {
.plan-bento .mosaic { grid-template-columns: 1fr; }
.plan-bento .tile.big,
.plan-bento .tile.wide { grid-column: span 1; }
}
/* ============================================================
Split CTA — 3:1 (signup + support), V9 dark lavender + slate
============================================================ */
.cta-split {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 14px;
}
.cta-split > div {
border-radius: 20px;
padding: 36px 36px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 260px;
color: #fff;
}
.cta-split > div::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle 360px at 18% 22%, rgba(255, 255, 255, 0.22), transparent 60%);
pointer-events: none;
}
.cta-split > div > * { position: relative; z-index: 1; }
.cta-split .small { padding: 28px 24px; }
.cta-split h3 {
font-size: 1.7rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 8px;
color: #fff;
}
.cta-split .small h3 { font-size: 1.12rem; }
.cta-split p {
font-size: 1.02rem;
margin: 0 0 22px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.88);
}
.cta-split .small p { font-size: 0.9rem; margin: 0 0 16px; }
.cta-split .ico {
font-size: 1.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 12px;
margin-bottom: 18px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
}
.cta-split .small .ico {
width: 38px;
height: 38px;
font-size: 1.15rem;
margin-bottom: 12px;
border-radius: 10px;
}
.cta-split .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 38px;
border-radius: 12px;
font-weight: 700;
font-size: 1.02rem;
text-decoration: none;
align-self: flex-start;
background: #fff;
transition: background 0.15s ease, transform 0.15s ease;
box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.25);
}
.cta-split .btn:hover { background: #f1f5f9; transform: translateY(-1px); }
.cta-split .small .btn {
padding: 11px 20px;
font-size: 0.92rem;
}
/* V9 palette: dark lavender left + slate-blue right */
.cta-split .cta-signup {
background: linear-gradient(135deg, #908faf 0%, #66648c 100%);
}
.cta-split .cta-support {
background: linear-gradient(135deg, #6d7d99 0%, #4a5b77 100%);
}
.cta-split .cta-signup .btn { color: #3a3865; }
.cta-split .cta-support .btn { color: #2a3b58; }
@media (max-width: 800px) {
.cta-split { grid-template-columns: 1fr; }
}
/* ============================================================
Payment methods strip (above footer)
============================================================ */
/* Trust band — "elevated panel" treatment (variant V5). A soft-tint band
holds a centered white card; the label sits above the logo row. The
card's shadow + border do the separating, so no full-width borders are
needed on the band itself. */
.payment-strip {
padding: 26px 0;
background: transparent;
}
.pmt-panel {
max-width: 560px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 16px;
padding: 22px 26px;
text-align: center;
box-shadow: 0 16px 40px -22px rgba(40, 30, 80, 0.22);
}
.pmt-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
font-weight: 700;
color: var(--text);
margin-bottom: 16px;
}
.pmt-label i { color: #047857; font-size: 1.1rem; }
.pmt-logos {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.pmt-card {
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #e8edf3;
border-radius: 9px;
padding: 7px 15px;
height: 44px;
min-width: 66px;
box-shadow: 0 2px 6px -3px rgba(15, 23, 42, 0.08);
}
.pmt-card svg { display: block; height: 22px; width: auto; }
@media (max-width: 600px) {
.pmt-panel { padding: 18px 16px; }
.pmt-logos { gap: 10px; }
.pmt-card { padding: 5px 12px; height: 40px; min-width: 58px; }
}
/* ============================================================
Signup page (/signup/) — minimal chrome + split layout
============================================================ */
.signup-page-body {
background: #f3f4f6;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Figtree', sans-serif;
}
/* ---- Minimal header ---- */
.signup-header {
padding: 18px 0;
border-bottom: 1px solid var(--border-soft);
background: #fff;
}
.signup-header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
}
.signup-logo img {
height: 42px;
width: auto;
display: block;
}
/* Header aux: two stacked lines, right-aligned. Avoids crowding the
logo on mobile where a one-liner would shrink-wrap awkwardly. */
.signup-header-aux {
font-size: 0.9rem;
color: var(--text-muted);
text-align: right;
line-height: 1.3;
}
.signup-header-aux .signup-header-aux-line {
display: block;
font-size: 0.78rem;
color: var(--text-faint);
}
.signup-header-aux a {
display: inline-block;
color: var(--brand);
font-weight: 600;
text-decoration: none;
}
.signup-header-aux a:hover { text-decoration: underline; }
/* ---- Main single-column layout ---- */
.signup-main { flex: 1; padding: 40px 0; display: flex; align-items: flex-start; justify-content: center; }
/* ---- Form column — centered, normal width ---- */
.signup-form-col {
width: 100%;
max-width: 460px;
margin: 0 auto;
padding: 0 18px;
}
/* White card holding title + form, sits on the tinted body */
.signup-form-card {
background: #fff;
border: 1px solid #e6ebf1;
border-radius: 16px;
padding: 32px 32px;
box-shadow: 0 4px 24px rgba(16, 42, 67, 0.05);
}
/* ---- Progress stepper (V9 layout) ---- */
.signup-stepper {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 22px;
}
.signup-step {
display: flex;
align-items: center;
gap: 7px;
color: var(--text-faint);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.signup-step .num {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--bg-soft);
color: var(--text-faint);
display: grid;
place-items: center;
font-size: 0.72rem;
font-weight: 700;
transition: background 0.15s ease, color 0.15s ease;
}
.signup-step.active { color: var(--brand); }
.signup-step.active .num { background: var(--brand); color: #fff; }
.signup-step.done .num {
background: var(--success);
color: #fff;
}
.signup-step.done { color: var(--success); }
.signup-stepper .bar {
flex: 1;
height: 2px;
background: var(--border-soft);
border-radius: 999px;
}
.signup-stepper .bar.done { background: var(--brand); }
.signup-title {
font-size: clamp(1.5rem, 2.4vw, 1.85rem);
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
margin: 0 0 8px;
line-height: 1.2;
}
.signup-subtitle {
font-size: 0.95rem;
color: var(--text-muted);
margin: 0 0 22px;
}
/* Form fields — Material/Google-style floating labels via .mat-field.
No height override: the base .mat-input is sized via padding (16px) so the
absolutely-positioned label aligns vertically with the input text. */
.signup-form .signup-form-field { margin-bottom: 16px; }
.signup-form .signup-form-field .mat-hint {
display: block;
margin: 6px 0 0 4px;
font-size: 0.78rem;
color: var(--text-faint);
}
/* ToS checkbox */
.signup-form .signup-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 16px 0 18px;
}
.signup-form .signup-checkbox input[type="checkbox"] {
margin-top: 3px;
width: 18px;
height: 18px;
accent-color: var(--brand);
flex-shrink: 0;
}
.signup-form .signup-checkbox label {
margin: 0;
font-size: 0.9rem;
font-weight: 400;
color: var(--text-muted);
line-height: 1.5;
}
.signup-form .signup-checkbox a {
color: var(--brand);
text-decoration: none;
font-weight: 600;
}
.signup-form .signup-checkbox a:hover { text-decoration: underline; }
/* Submit */
.signup-submit {
width: 100%;
height: 52px;
font-size: 1rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 6px;
}
.signup-submit:disabled { opacity: 0.7; cursor: not-allowed; }
/* CTA callouts directly below the submit button */
.signup-callouts {
list-style: none;
padding: 0;
margin: 14px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 14px;
}
.signup-callouts li {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
color: var(--text-muted);
font-weight: 500;
line-height: 1.3;
}
.signup-callouts li i {
color: var(--success, #16a34a);
font-size: 0.92rem;
}
/* Status messages */
.signup-status {
margin-top: 14px;
font-size: 0.95rem;
color: var(--text-muted);
text-align: center;
min-height: 0;
}
.signup-status.success {
color: #047857;
background: #ecfdf5;
border: 1px solid #6ee7b7;
border-radius: 10px;
padding: 12px 14px;
}
.signup-status.error {
color: #b91c1c;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 10px;
padding: 12px 14px;
}
.signup-form-card .signup-status:empty { margin-top: 0; }
/* ---- Minimal footer ---- */
.signup-footer {
border-top: 1px solid var(--border-soft);
background: #fff;
padding: 20px 0;
}
.signup-footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.signup-footer-copy {
font-size: 0.85rem;
color: var(--text-faint);
}
.signup-footer-links {
display: flex;
gap: 22px;
}
.signup-footer-links a {
font-size: 0.85rem;
color: var(--text-muted);
text-decoration: none;
}
.signup-footer-links a:hover { color: var(--brand); }
.signup-footer-support {
font-size: 0.85rem;
color: var(--text-faint);
}
.signup-footer-support a {
color: var(--brand);
font-weight: 600;
text-decoration: none;
}
.signup-footer-support a:hover { text-decoration: underline; }
/* ---- Hide the default reCAPTCHA badge — we show inline notice instead ---- */
.grecaptcha-badge { visibility: hidden !important; }
/* ---- Responsive ---- */
@media (max-width: 575px) {
/* Header: keep logo + aux side-by-side. The aux is now a compact
2-line right-aligned block so it doesn't crowd the logo. */
.signup-header { padding: 12px 0; }
.signup-header-inner { padding: 0 16px; gap: 12px; }
.signup-logo img { height: 36px; }
.signup-header-aux { font-size: 0.82rem; }
.signup-header-aux .signup-header-aux-line { font-size: 0.72rem; }
.signup-main { padding: 28px 0; }
.signup-form-col { padding: 0 14px; }
.signup-form-card { padding: 26px 22px; border-radius: 14px; }
.signup-stepper { gap: 6px; margin-bottom: 18px; }
.signup-step .label { display: none; }
.signup-title { font-size: 1.4rem; }
.signup-callouts { gap: 6px 12px; }
.signup-callouts li { font-size: 0.78rem; }
/* Footer: stack copy + links row, both centred. Links wrap if needed. */
.signup-footer-inner {
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
padding: 0 18px;
}
.signup-footer-links {
flex-wrap: wrap;
justify-content: center;
gap: 6px 16px;
}
}
/* ====================================================================
ISLAND NAV (canonical)
Floating, rounded, frosted nav bar. Applies site-wide to every page
with body.has-hero-nav (every content page in this site, per the
nav v5 migration). Adds !important on the geometry properties so it
wins against the older .scrolled and hover rules above without
needing to rewrite them. Lifted from the preview block that lived
in index-island-nav.html — see that earlier commit's inline style
for the iteration history.
==================================================================== */
/* Outer wrapper — invisible, just a positioning anchor. */
body.has-hero-nav .site-nav.v5,
.site-nav {
position: fixed !important;
top: 28px !important; /* gap from viewport edge */
left: 0 !important;
right: 0 !important;
z-index: 1030;
padding: 0 !important; /* kill v5's padding:16px 0 */
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
border-bottom: none !important;
box-shadow: none !important;
pointer-events: none; /* clicks pass through gutter */
}
body.has-hero-nav .site-nav > .container,
.site-nav > .container {
pointer-events: none;
}
/* The inner