/* =========================================================
ProTools Bundle — main stylesheet
Theme: white surface, navy text, red/orange accent
========================================================= */
:root{
--navy: #0b1736;
--navy-2: #11214a;
--ink: #1a2547;
--ink-soft: #4b5879;
--muted: #6b7693;
--line: #e8ecf3;
--line-2: #eef1f7;
--bg: #ffffff;
--bg-soft: #f6f8fc;
--bg-tint: #fbf7f3;
--accent: #ff5a3c;
/* Action surface. --accent cannot carry text (white on it is 3.10:1);
this is the fill used behind button labels. Same value in dark mode:
its contrast is against its own #fffaf7 text, not the page. */
--accent-strong: #c2410c;
--accent-2: #ff8a3d;
--accent-3: #ffb648;
--wa: #25d366;
--ok: #16a34a;
--shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.05);
--shadow: 0 6px 18px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
--shadow-lg: 0 24px 60px rgba(15,23,42,.12), 0 8px 16px rgba(15,23,42,.06);
--radius: 14px;
--radius-lg: 22px;
--maxw: 1180px;
/* Surfaces. Split out so a theme can flip them without touching the 38
places where #fff is foreground text on a coloured control. */
/* Structural fill that carries #fff text. Unlike --navy (ink) it must
stay dark in both themes, or a filled control turns white-on-white. */
--frame: #0b1736;
--frame-2: #11214a;
--surface: #ffffff;
--surface-2: #f3f5fa;
--surface-3: #eceffa;
--line-strong: #d6dae5;
--header-bg: rgba(255,255,255,.85);
--hero-grad: linear-gradient(180deg,#fff 0,#fbf7f3 100%);
--hero-rule: rgba(11,23,54,.05);
--eyebrow-brd: #f3d9c9;
--panel-glow: transparent;
}
/* ============ DARK THEME ============
Navy rather than neutral black: navy is already this brand's structural
colour, and DESIGN.md's north star is "a dark structural frame … a
well-maintained professional control room". Applied via [data-theme] on
so the choice survives navigation, with prefers-color-scheme as the
default for anyone who has not chosen. */
:root[data-theme="dark"]{
/* --navy was the ink colour, not the frame, so it inverts to near-white. */
--navy: #eaf0ff;
--navy-2: #c9d5f0;
--ink: #dce4f5;
--ink-soft: #9fb0d0;
--muted: #8494b4;
--line: #1e2b4d;
--line-2: #17233f;
--bg: #070d1c;
--bg-soft: #0b142b;
--bg-tint: #101c3a;
/* The accent holds: #ff5a3c already clears 4.5:1 on this ground, and it is
the one thing that should not shift between themes. */
--frame: #101c3a;
--frame-2: #16264a;
--surface: #0e1832;
--surface-2: #131f3d;
--surface-3: #1b2950;
--line-strong: #2b3b66;
--header-bg: rgba(7,13,28,.82);
--hero-grad: radial-gradient(120% 100% at 15% 0%,#132449 0%,#0b1736 42%,#060c1c 100%);
--hero-rule: rgba(255,255,255,.055);
--eyebrow-brd: rgba(255,138,61,.32);
--panel-glow: rgba(255,255,255,.06);
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow: 0 8px 22px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
--shadow-lg: 0 30px 70px rgba(0,0,0,.55), 0 8px 18px rgba(0,0,0,.4);
}
/* Default to the visitor's OS preference until they choose explicitly. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--navy:#eaf0ff; --navy-2:#c9d5f0; --ink:#dce4f5; --ink-soft:#9fb0d0; --muted:#8494b4;
--line:#1e2b4d; --line-2:#17233f; --bg:#070d1c; --bg-soft:#0b142b; --bg-tint:#101c3a;
--frame:#101c3a; --frame-2:#16264a; --surface:#0e1832; --surface-2:#131f3d; --surface-3:#1b2950; --line-strong:#2b3b66;
--header-bg:rgba(7,13,28,.82);
--hero-grad:radial-gradient(120% 100% at 15% 0%,#132449 0%,#0b1736 42%,#060c1c 100%);
--hero-rule:rgba(255,255,255,.055); --eyebrow-brd:rgba(255,138,61,.32);
--panel-glow:rgba(255,255,255,.06);
--shadow-sm:0 1px 2px rgba(0,0,0,.4);
--shadow:0 8px 22px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
--shadow-lg:0 30px 70px rgba(0,0,0,.55), 0 8px 18px rgba(0,0,0,.4);
}
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
color:var(--ink);
background:var(--bg);
-webkit-font-smoothing:antialiased;
line-height:1.55;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,h5{font-family:'Plus Jakarta Sans','Inter',sans-serif;color:var(--navy);line-height:1.15;margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* ============ BUTTONS ============ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:13px 22px;border-radius:10px;font-weight:600;font-size:15px;
transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 8px 20px rgba(255,90,60,.28)}
.btn--primary:hover{box-shadow:0 12px 28px rgba(255,90,60,.38)}
.btn--outline{background:var(--surface);color:var(--navy);border:1.5px solid var(--line)}
.btn--outline:hover{border-color:var(--navy)}
.btn--ghost{background:transparent;color:var(--navy);border:1.5px solid transparent}
.btn--ghost:hover{background:var(--bg-soft)}
.btn--outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn--outline-light:hover{background:rgba(255,255,255,.1)}
.btn--whatsapp{background:var(--wa);color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.32)}
.btn--block{width:100%}
/* ============ TOPBAR ============ */
.topbar{background:var(--frame);color:#cbd2e0;font-size:13px}
.topbar__inner{display:flex;align-items:center;gap:18px;min-height:38px;flex-wrap:wrap}
.topbar__item{display:inline-flex;align-items:center;gap:6px;color:#cbd2e0}
.topbar__spacer{flex:1}
.topbar__link{color:#fff;font-weight:500}
.topbar__link:hover{color:var(--accent-3)}
.topbar__link--cta{color:var(--accent-3)}
@media (max-width:720px){.topbar__item--hide-sm{display:none}}
/* ============ HEADER ============ */
.header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line-2)}
.header__inner{display:flex;align-items:center;gap:24px;min-height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--navy);font-family:'Plus Jakarta Sans',sans-serif;font-size:20px}
.logo__text span{color:var(--accent)}
.logo__text--light{color:#fff}
.logo__text--light span{color:var(--accent-3)}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav__link{padding:10px 14px;border-radius:8px;font-weight:500;font-size:15px;color:var(--ink);transition:color .15s, background .15s}
.nav__link:hover{color:var(--accent);background:var(--bg-soft)}
.nav__link--active{color:var(--accent)}
.nav__link--cta{background:var(--frame);color:#fff;padding:10px 18px}
.nav__link--cta:hover{background:var(--accent);color:#fff}
.hamburger{display:none;flex-direction:column;gap:5px;padding:10px;margin-left:auto}
.hamburger span{width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s, opacity .25s}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:960px){
.nav{position:fixed;top:110px;right:16px;left:16px;flex-direction:column;align-items:stretch;
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px;
box-shadow:var(--shadow-lg);transform:translateY(-12px);opacity:0;pointer-events:none;transition:.2s}
.nav.is-open{transform:none;opacity:1;pointer-events:auto}
.nav__link{padding:12px 14px}
.nav__link--cta{text-align:center}
.hamburger{display:flex}
}
/* ============ EYEBROW / SECTION HEAD ============ */
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--bg-tint);color:var(--accent);font-weight:600;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--eyebrow-brd)}
.eyebrow__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,90,60,.18)}
.section__head{text-align:center;max-width:760px;margin:0 auto 56px}
.section__head .eyebrow{margin-bottom:18px}
.section__title{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.02em;margin:6px 0 14px}
.section__sub{color:var(--ink-soft);font-size:17px;margin:0}
.section__sub a{color:var(--accent);font-weight:600}
/* ============ HERO ============ */
.hero{position:relative;overflow:hidden;padding:80px 0 60px;background:var(--hero-grad)}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(var(--hero-rule) 1px,transparent 1px),linear-gradient(90deg,var(--hero-rule) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);pointer-events:none}
.hero__blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;pointer-events:none}
.hero__blob--1{width:480px;height:480px;background:radial-gradient(circle,#ff8a3d,transparent 60%);top:-100px;left:-120px}
.hero__blob--2{width:520px;height:520px;background:radial-gradient(circle,#5b8def,transparent 60%);bottom:-160px;right:-160px;opacity:.25}
.hero__inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero__content .eyebrow{margin-bottom:22px}
.hero__title{font-size:clamp(36px,5.2vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0 0 18px}
.grad{background:linear-gradient(135deg,var(--accent),var(--accent-2) 50%,var(--accent-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{color:var(--ink-soft);font-size:18px;max-width:560px;margin:0 0 28px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.hero__bullets{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:18px;color:var(--ink-soft);font-size:14.5px;font-weight:500}
.check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:11px;margin-right:6px;font-weight:700}
/* Hero visual (dashboard mockup) */
.hero__visual{position:relative}
/* One 3D scene, one vanishing point.
Perspective used to sit on .mockup itself, so every element owned a separate
vanishing point and the chips never shared the panel's space — it read as a
tilted picture rather than depth. Perspective now lives on the parent with
preserve-3d, so translateZ actually places things in front of the panel.
--hero-ry / --hero-rx are written by hero-3d.js while the pointer is over
the hero; both default to 0deg, so the scene rests exactly where the old
static tilt put it. */
.hero__visual{perspective:1150px;perspective-origin:58% 42%}
.hero__scene{position:relative;transform-style:preserve-3d;transform:rotateY(calc(-6deg + var(--hero-ry,0deg))) rotateX(calc(2deg + var(--hero-rx,0deg)));transition:transform .45s cubic-bezier(.16,1,.3,1)}
.hero__visual.is-tracking .hero__scene{transition:transform .12s linear}
.hero__console{transform-style:preserve-3d}
/* The mockup is a screenshot of the light-themed customer dashboard, not a
themed surface. It must resolve its own colours locally, or dark mode leaks
in and half-flips it: --navy inverts to near-white and the values "Pro",
"100+", "30d" become white text on the white panel, the sidebar and URL bar
darken while the body stays light, and the card borders turn near-black.
Redefining the tokens here means every descendant rule keeps using var()
and simply resolves light. --shadow-lg is deliberately NOT reset: the
panel's outer shadow should suit whichever ground it is sitting on. */
.mockup{
--surface:#ffffff; --surface-2:#f3f5fa; --surface-3:#eceffa;
--line:#e8ecf3; --line-2:#eef1f7; --line-strong:#d6dae5;
--navy:#0b1736; --navy-2:#11214a; --ink:#1a2547; --ink-soft:#4b5879; --muted:#6b7693;
/* #16a34a measures 3.30:1 on this white card — under AA for the small
"Active"/"Unlocked"/"Renewal" labels. Darkened locally rather than
globally, since the token reads fine on the page's own surfaces. */
--ok:#15803d; --frame:#0b1736;
--shadow-sm:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.05);
background:#fff;color:var(--ink);
border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);
overflow:hidden;transform-style:preserve-3d;
}
.mockup__bar{display:flex;align-items:center;gap:6px;padding:12px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.mockup__bar > span{width:11px;height:11px;border-radius:50%;background:var(--line-strong)}
.mockup__bar > span:nth-child(1){background:#ff5f57}
.mockup__bar > span:nth-child(2){background:#febc2e}
.mockup__bar > span:nth-child(3){background:#28c840}
.mockup__url{flex:1;margin-left:12px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:5px 12px;font-size:12px;color:var(--ink-soft);max-width:280px}
.mockup__body{display:grid;grid-template-columns:54px 1fr;min-height:280px}
.mockup__side{background:var(--surface-2);padding:14px 8px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px;align-items:center}
.mockup__navitem{width:34px;height:34px;border-radius:8px;background:var(--surface-3)}
.mockup__navitem--active{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.mockup__main{padding:18px}
.mockup__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mockup__card{background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow-sm)}
.mockup__label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.mockup__big{font-size:20px;font-weight:800;color:var(--navy);font-family:'Plus Jakarta Sans',sans-serif;margin-top:2px}
.mockup__delta{font-size:10.5px;color:var(--ok);font-weight:600}
.mockup__spark{margin-top:4px;height:24px}
.mockup__chart{height:120px;background:linear-gradient(180deg,#fff,#fbf7f3);border:1px solid var(--line-2);border-radius:10px;padding:8px}
.mockup__chart svg{width:100%;height:100%}
.mockup__main,.mockup__cards{transform-style:preserve-3d}
.mockup__card{transform:translateZ(18px)}
.mockup__chart{transform:translateZ(10px)}
/* Chips now sit genuinely in front of the panel rather than merely on top of it. */
.hero__chip{position:absolute;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;transform:translateZ(var(--chip-z,62px))}
.hero__chip--1{top:8%;left:-6%;--chip-z:78px}
.hero__chip--2{top:46%;right:-4%;--chip-z:58px}
.hero__chip--3{bottom:6%;left:8%;--chip-z:70px}
/* ---- Entrance: the console acquires its feed -------------------------------
Every rule below is gated on .hero-3d-ready, which hero-3d.js adds. The
resting CSS above IS the finished state, so if the script never runs the
hero is simply present rather than invisible. Nothing loops; the sequence
ends at 2.1s. This replaced three infinite float animations that previously
ran forever on every device, watched or not. */
.hero-3d-ready .hero__console{animation:heroConsoleSwing .76s cubic-bezier(.16,1,.3,1) .12s both}
@keyframes heroConsoleSwing{
from{opacity:0;transform:rotateY(-19deg) rotateX(7deg) translateZ(-150px)}
to{opacity:1;transform:rotateY(0) rotateX(0) translateZ(0)}
}
.hero-3d-ready .hero__card{animation:heroCardHinge .52s cubic-bezier(.16,1,.3,1) both;transform-origin:50% 100%}
.hero-3d-ready .hero__card:nth-of-type(1){animation-delay:.56s}
.hero-3d-ready .hero__card:nth-of-type(2){animation-delay:.65s}
.hero-3d-ready .hero__card:nth-of-type(3){animation-delay:.74s}
@keyframes heroCardHinge{
from{opacity:0;transform:translateZ(18px) rotateX(-38deg) translateY(6px)}
to{opacity:1;transform:translateZ(18px) rotateX(0) translateY(0)}
}
.hero-3d-ready .hero__chip{animation:heroChipZ .46s cubic-bezier(.16,1,.3,1) both}
.hero-3d-ready .hero__chip--1{animation-delay:1.42s}
.hero-3d-ready .hero__chip--2{animation-delay:1.53s}
.hero-3d-ready .hero__chip--3{animation-delay:1.64s}
@keyframes heroChipZ{
from{opacity:0;transform:translateZ(calc(var(--chip-z,62px) + 120px)) translateY(8px)}
to{opacity:1;transform:translateZ(var(--chip-z,62px)) translateY(0)}
}
/* The feed traces in. pathLength="1" normalises the draw across both curves. */
.hero-3d-ready .mockup__chart path{animation:heroTrace .8s cubic-bezier(.16,1,.3,1) both}
.hero-3d-ready .mockup__chart path:nth-of-type(1){animation-delay:1s}
.hero-3d-ready .mockup__chart path:nth-of-type(2){animation-delay:1.12s}
@keyframes heroTrace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* Depth is expression, not information — drop all of it when less motion is asked for.
The cards keep their flat lift, so hover still confirms what is being pointed at. */
@media (prefers-reduced-motion:reduce){
.hero__scene{transform:none !important}
.mockup{transform:perspective(1200px) rotateY(-6deg) rotateX(2deg) !important}
.hero__chip,.mockup__card,.mockup__chart{transform:none !important}
.hero-3d-ready .hero__console,.hero-3d-ready .hero__card,
.hero-3d-ready .hero__chip,.hero-3d-ready .mockup__chart path{animation:none !important}
.plans,.inside__grid{perspective:none}
.plan,.inside__card{transform:translateY(var(--lift,0))}
.plan--featured{--depth:0}
}
@media (max-width:960px){
.hero{padding:60px 0 40px}
.hero__inner{grid-template-columns:1fr;gap:40px}
.hero__visual{order:-1;max-width:520px;margin:0 auto}
.hero__chip{display:none}
}
/* Logo strip */
.logostrip{margin-top:80px;text-align:center}
.logostrip__label{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin:0 0 22px}
.logostrip__row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 32px;align-items:center}
.logostrip__item{padding:10px 18px;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--navy);font-weight:700;font-size:14px;letter-spacing:.02em;opacity:.75;transition:opacity .2s, transform .2s}
.logostrip__item:hover{opacity:1;transform:translateY(-2px)}
/* ============ PRICING (3 TIER) ============ */
.pricing{padding:100px 0;background:var(--surface)}
.billing-toggle{display:inline-flex;background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:4px;margin-top:24px}
.billing-toggle__opt{padding:9px 18px;border-radius:999px;font-weight:600;font-size:14px;color:var(--ink-soft);transition:background .2s, color .2s;display:inline-flex;align-items:center;gap:8px}
.billing-toggle__opt.is-active{background:var(--surface);color:var(--navy);box-shadow:var(--shadow-sm)}
.save-pill{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:11px;padding:2px 8px;border-radius:999px;font-weight:700}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
/* Depth as hierarchy. The tilt composes into the existing lift through custom
properties rather than overriding it, so the hover behaviour that shipped is
preserved and only gains a third axis. --tilt-x/--tilt-y are written by
motion-3d.js and default to 0deg, so with no JS this is exactly the old rule. */
.plans,.inside__grid{perspective:1000px}
.plan{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .25s, box-shadow .25s, border-color .25s}
.plan:hover{--lift:-4px;box-shadow:var(--shadow);border-color:var(--line-strong)}
/* The recommended tier genuinely sits forward, so the hierarchy is spatial and
not only a ribbon. */
.plan--featured{--depth:26px}
.plan--featured{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,var(--accent),var(--accent-2),var(--accent-3)) border-box;border:1.5px solid transparent;box-shadow:0 20px 50px rgba(255,90,60,.18);transform:translateY(-8px)}
.plan--featured:hover{transform:translateY(-12px);box-shadow:0 28px 60px rgba(255,90,60,.28)}
.plan__ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 6px 16px rgba(255,90,60,.32)}
.plan__name{font-size:22px;font-weight:800;margin:0 0 4px}
.plan__tag{color:var(--ink-soft);font-size:14px;margin:0 0 22px;min-height:42px}
.plan__price{display:flex;align-items:flex-start;gap:4px;color:var(--navy);font-family:'Plus Jakarta Sans',sans-serif}
.plan__currency{font-size:24px;font-weight:700;margin-top:8px}
.plan__amount{font-size:56px;font-weight:800;line-height:1;letter-spacing:-.03em;transition:opacity .2s}
.plan__per{font-size:15px;color:var(--ink-soft);font-weight:500;align-self:flex-end;padding-bottom:8px;margin-left:2px}
.plan__billed{color:var(--muted);font-size:13px;margin:6px 0 22px}
.plan__feats{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.plan__feats li{position:relative;padding-left:26px;color:var(--ink);font-size:14.5px}
.plan__feats li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:inset 0 0 0 2px #fff;background-image:linear-gradient(135deg,#22c55e,#16a34a),url("data:image/svg+xml;utf8,");background-size:auto,11px;background-position:center,center;background-repeat:no-repeat}
.pricing__foot{text-align:center;color:var(--ink-soft);margin-top:32px;font-size:14.5px}
.pricing__foot a{color:var(--accent);font-weight:600}
@media (max-width:960px){
.plans{grid-template-columns:1fr;gap:18px}
.plan--featured{transform:none}
.plan--featured:hover{transform:translateY(-4px)}
}
/* ============ SINGLE TOOLS GRID ============ */
.single-tools{padding:100px 0;background:var(--bg-soft)}
.toolgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.toolcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;transition:transform .2s, box-shadow .2s, border-color .2s;display:flex;flex-direction:column}
.toolcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.toolcard__icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;background:linear-gradient(135deg,var(--c1,#ff5a3c),var(--c2,#ff8a3d));color:#fff;margin-bottom:14px;box-shadow:0 6px 14px rgba(0,0,0,.08)}
/* :not([hidden]) matters: an author rule always beats the browser's built-in
[hidden]{display:none} regardless of selector specificity, since origin
outranks specificity in the cascade. An unconditional display:flex here
silently defeated the hidden attribute, so the logo ![]()
and the
lettermark rendered as two flex siblings squeezed into one 48px
tile — the sliver of a letter next to each real logo was that bug. */
.toolcard__mark:not([hidden]){display:flex;align-items:center;justify-content:center;width:100%;height:100%}
/* A real favicon sits on a plain light tile rather than the colour-gradient
square: favicons are drawn for a light browser-chrome context, and forcing
one onto an arbitrary accent gradient would clash more often than not.
Deliberately light in both themes for the same reason the dashboard
mockup stays light in dark mode. */
.toolcard__icon--brand{background:#fff;box-shadow:none;border:1px solid var(--line);padding:9px}
.toolcard__icon--brand img{width:100%;height:100%;object-fit:contain;display:block}
.toolcard :is(h3,h4){font-size:16px;font-weight:700;margin:0 0 6px}
.toolcard p{color:var(--ink-soft);font-size:13.5px;margin:0 0 18px;flex:1}
.toolcard__foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px dashed var(--line)}
.toolcard__price{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18px;color:var(--navy)}
.toolcard__price small{font-size:11px;font-weight:500;color:var(--ink-soft);margin-left:2px}
.toolcard__btn{font-weight:700;color:var(--accent);font-size:14px}
.toolcard__btn:hover{text-decoration:underline}
.toolcard--more{display:flex;align-items:center;justify-content:center;border:2px dashed var(--line);background:transparent;min-height:180px}
.toolcard--more .toolcard__more-content{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.toolcard__more-count{font-size:14px;font-weight:600;color:var(--navy);opacity:.6}
.single-tools__cta{text-align:center;margin-top:40px}
.single-tools__cta p{color:var(--ink-soft);margin:0 0 16px}
@media (max-width:960px){.toolgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.toolgrid{grid-template-columns:1fr}}
/* ============ CTA STRIP ============ */
.cta-strip{padding:50px 0;background:linear-gradient(135deg,var(--frame), var(--frame-2));color:#fff}
.cta-strip__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-strip__text :is(h2,h3){color:#fff;margin:0 0 4px;font-size:22px}
.cta-strip__text p{margin:0;color:#aab4ce}
.cta-strip__actions{display:flex;gap:12px;flex-wrap:wrap}
/* ============ FEATURES ============ */
.features{padding:100px 0;background:var(--surface)}
.featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:64px}
.feat{padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--surface);transition:transform .2s, box-shadow .2s, border-color .2s}
.feat:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.feat__icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;background:linear-gradient(135deg,var(--c1,#ff5a3c),var(--c2,#ff8a3d));color:#fff;margin-bottom:18px;box-shadow:0 8px 18px rgba(0,0,0,.08)}
.feat :is(h3,h4){font-size:18px;margin:0 0 8px}
.feat p{color:var(--ink-soft);margin:0;font-size:14.5px}
@media (max-width:960px){.featgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.featgrid{grid-template-columns:1fr}}
.stats{padding:42px 0;background:var(--surface)}
.stats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:linear-gradient(135deg,var(--frame),var(--frame-2));color:#fff;border-radius:24px;padding:20px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.stats__grid::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,90,60,.18),transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,138,61,.15),transparent 50%);pointer-events:none}
.stat{position:relative;z-index:1;display:flex;min-width:0;min-height:112px;padding:20px 12px;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.045)}
.stat__num{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(25px,3vw,36px);font-weight:800;line-height:1.08;color:#fff;letter-spacing:-.02em;overflow-wrap:anywhere}
.stat__label{display:block;color:#c4cce0;font-size:12px;line-height:1.35;margin-top:8px;text-transform:uppercase;letter-spacing:.075em;font-weight:700}
@media (max-width:720px){.stats__grid{grid-template-columns:1fr 1fr;padding:14px;gap:10px}.stat{min-height:100px;padding:16px 8px}}
@media (max-width:390px){.stats__grid{grid-template-columns:1fr}.stat{min-height:88px}}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid rgba(255,90,60,.45);outline-offset:3px}
/* ============ WHATSAPP BANNER ============ */
.whatsapp{padding:60px 0;background:var(--surface)}
.wa{background:linear-gradient(135deg,#075e54,#0a7d6a);color:#fff;border-radius:24px;padding:36px;display:flex;align-items:center;gap:24px;box-shadow:0 24px 48px rgba(7,94,84,.22);position:relative;overflow:hidden}
.wa::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 60%);border-radius:50%}
.wa__icon{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa__text{flex:1}
.wa__text :is(h2,h3){color:#fff;margin:0 0 6px;font-size:22px}
.wa__text p{margin:0;color:#cce8e2;font-size:15px}
.wa .btn--whatsapp{background:var(--surface);color:#075e54}
.wa .btn--whatsapp:hover{background:#f3faf7}
@media (max-width:720px){.wa{flex-direction:column;text-align:center;padding:28px}.wa__text{order:1}.wa .btn{order:2}.wa__icon{order:0}}
/* ============ TRENDING ============ */
.trending{padding:100px 0;background:var(--bg-soft)}
.trendgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.trend{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;transition:transform .2s, box-shadow .2s}
.trend:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.trend__rank{font-family:'Plus Jakarta Sans',sans-serif;font-size:36px;font-weight:800;color:transparent;-webkit-text-stroke:1.5px var(--accent);line-height:1;margin-bottom:10px;letter-spacing:-.04em}
.trend :is(h3,h4){font-size:17px;margin:0 0 4px}
.trend p{color:var(--ink-soft);font-size:13.5px;margin:0 0 14px}
.trend__bar{height:6px;background:var(--line-2);border-radius:99px;overflow:hidden}
.trend__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px}
@media (max-width:960px){.trendgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.trendgrid{grid-template-columns:1fr}}
/* ============ FAQ ============ */
.faq{padding:100px 0;background:var(--surface)}
.faq__container{max-width:880px;margin:0 auto}
.faq__list{display:flex;flex-direction:column;gap:10px}
.faq__item{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s, box-shadow .2s}
.faq__item[hidden]{display:none}
.faq__item[open]{border-color:#e1d3c7;box-shadow:var(--shadow)}
.faq__item summary{padding:20px 24px;font-weight:600;font-size:16px;color:var(--navy);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--accent)}
.faq__chev{width:24px;height:24px;border-radius:50%;background:var(--bg-soft);display:inline-block;position:relative;flex-shrink:0;transition:background .2s, transform .2s}
.faq__chev::before,.faq__chev::after{content:"";position:absolute;background:var(--navy);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .25s}
.faq__chev::before{width:10px;height:2px}
.faq__chev::after{width:2px;height:10px}
.faq__item[open] .faq__chev{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.faq__item[open] .faq__chev::before,.faq__item[open] .faq__chev::after{background:var(--surface)}
.faq__item[open] .faq__chev::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item p{padding:0 24px 22px;color:var(--ink-soft);margin:0;font-size:15px}
.faq__controls{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:10px}
.faq__toggle{width:220px;max-width:100%;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:8px;background:var(--bg-soft);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:700;transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.faq__toggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.faq__toggle:hover{background:var(--surface);border-color:var(--line-strong);color:var(--accent);box-shadow:var(--shadow-sm)}
.faq__toggle:focus-visible{outline:3px solid rgba(255,90,60,.22);outline-offset:3px;border-color:var(--accent)}
.faq__toggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(225deg)}
@media (prefers-reduced-motion:reduce){.faq__toggle,.faq__toggle::after{transition:none}}
/* ============ CONTACT ============ */
.contact{padding:100px 0;background:var(--bg-soft)}
.contact__inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;max-width:1080px;margin:0 auto;background:var(--surface);border-radius:24px;padding:48px;box-shadow:var(--shadow);border:1px solid var(--line)}
.contact__copy .eyebrow{margin-bottom:16px}
.contact__list{list-style:none;padding:0;margin:24px 0 0;color:var(--ink-soft);font-size:14.5px;display:flex;flex-direction:column;gap:6px}
.contact__list strong{color:var(--navy);font-weight:600;margin-right:8px}
.contact__form{display:grid;gap:14px}
.contact__form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--navy)}
.contact__form input,.contact__form select,.contact__form textarea{
font:inherit;font-weight:400;color:var(--ink);
padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);transition:border-color .2s, box-shadow .2s
}
.contact__form input:focus,.contact__form select:focus,.contact__form textarea:focus{
outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,90,60,.12)
}
.contact__form textarea{resize:vertical}
.contact__ok{color:var(--ok);font-weight:600;margin:0}
@media (max-width:880px){.contact__inner{grid-template-columns:1fr;padding:28px}}
/* ============ FOOTER ============ */
.footer{background:var(--frame);color:#cbd2e0;padding:72px 0 28px}
.footer__grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:36px;margin-bottom:48px}
.footer__brand p{color:#9aa6c4;font-size:14.5px;margin:14px 0 22px;max-width:380px;line-height:1.6}
.footer__news{display:flex;flex-wrap:wrap;gap:8px;max-width:380px}
.footer__news input{flex:1;padding:12px 14px;border-radius:10px;border:1.5px solid #2a3a66;background:#0f1c40;color:#fff;font:inherit}
.footer__news input::placeholder{color:#7e8aae}
.footer__news input:focus{outline:none;border-color:var(--accent)}
.footer__news button{padding:12px 18px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:600;white-space:nowrap}
.footer__news button:disabled{cursor:wait;opacity:.75}
.footer__news-status{display:block;flex-basis:100%;color:#bbf7d0;font-size:12px;line-height:1.4}
.footer__news-status--error{color:#fecaca}
.footer__col h5{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px;font-family:'Inter',sans-serif;font-weight:700}
.footer__col a{display:block;color:#9aa6c4;font-size:14.5px;padding:5px 0;transition:color .15s}
.footer__col a:hover{color:var(--accent-3)}
.footer__bottom{border-top:1px solid #1a2752;padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__bottom p{margin:0;color:#7e8aae;font-size:13.5px}
.payrow{display:flex;gap:6px;flex-wrap:wrap}
.pay{background:#0f1c40;border:1px solid #2a3a66;color:#cbd2e0;font-size:12px;font-weight:700;padding:5px 10px;border-radius:6px;letter-spacing:.04em}
.pay.razorpay-pay{background:linear-gradient(135deg,#2d5be3,#1e40af);border-color:#1e3ab8;color:#fff}
.pay.razorpay-badge{background:linear-gradient(135deg,#2d5be3,#1e40af);border-color:#1e3ab8;color:#fff}
@media (max-width:960px){
.footer__grid{grid-template-columns:1fr 1fr}
.footer__brand{grid-column:1 / -1}
}
@media (max-width:540px){.footer__grid{grid-template-columns:1fr}}
/* ============ TO TOP ============ */
.to-top{position:fixed;right:24px;bottom:24px;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 10px 24px rgba(255,90,60,.36);opacity:0;transform:translateY(20px);pointer-events:none;transition:.25s;z-index:60}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
/* ============ PAGE HERO (sub-pages) ============ */
.page-hero{position:relative;overflow:hidden;padding:90px 0 60px;background:var(--hero-grad);text-align:center}
.page-hero--compact{padding:70px 0 50px}
.page-hero__inner{position:relative;max-width:820px;margin:0 auto}
.page-hero__title{font-size:clamp(32px,4.6vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:14px 0 18px}
.page-hero__sub{color:var(--ink-soft);font-size:18px;max-width:680px;margin:0 auto 28px}
.page-hero__inner .hero__cta{justify-content:center}
.page-hero__inner .hero__bullets{justify-content:center}
/* ============ HOW IT WORKS ============ */
.howitworks{padding:90px 0;background:var(--surface)}
.howgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.how{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px 28px;transition:transform .2s, box-shadow .2s}
.how:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.how__num{font-family:'Plus Jakarta Sans',sans-serif;font-size:42px;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;letter-spacing:-.03em;margin-bottom:14px}
.how :is(h3,h4){font-size:19px;margin:0 0 8px}
.how p{color:var(--ink-soft);margin:0;font-size:14.5px}
@media (max-width:960px){.howgrid{grid-template-columns:1fr}}
/* ============ COMPARE GRID (reseller margin) ============ */
.compare{padding:90px 0;background:var(--bg-soft)}
.compare__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.compare__col{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px}
.compare__col :is(h3,h4){font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 18px;font-family:'Inter',sans-serif;font-weight:700}
.compare__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.compare__col li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14.5px;color:var(--ink);padding-bottom:10px;border-bottom:1px dashed var(--line)}
.compare__col li strong{color:var(--navy);font-weight:700;white-space:nowrap}
.compare__col--accent{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;box-shadow:0 16px 36px rgba(255,90,60,.22)}
.compare__col--accent :is(h3,h4){color:rgba(255,255,255,.85)}
.compare__col--accent li{color:#fff;border-bottom-color:rgba(255,255,255,.25)}
.compare__col--accent li strong{color:#fff}
.compare__total{margin-top:6px;padding-top:14px;border-top:2px solid currentColor !important;border-bottom:none !important;font-size:16px}
.compare__total strong{font-size:22px;font-family:'Plus Jakarta Sans',sans-serif}
@media (max-width:960px){.compare__grid{grid-template-columns:1fr}}
/* ============ STRIKE-THROUGH PRICE (reseller) ============ */
.plan__strike{color:var(--muted);font-size:13px;margin:-12px 0 18px;text-decoration:line-through;text-decoration-color:rgba(11,23,54,.35)}
/* ============ FILTERS (single tools) ============ */
.catalog{padding:90px 0;background:var(--surface)}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:36px}
.filter{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;transition:all .2s}
.filter:hover{border-color:var(--navy)}
.filter.is-active{background:var(--frame);color:#fff;border-color:var(--navy)}
.filter__count{background:rgba(255,255,255,.18);color:inherit;font-size:11px;padding:2px 8px;border-radius:99px;font-weight:700}
.filter:not(.is-active) .filter__count{background:var(--bg-soft);color:var(--ink-soft)}
/* ============ COMPARE TABLE (single tools) ============ */
.compare-table-wrap{padding:90px 0;background:var(--bg-soft)}
.ctable{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm)}
.ctable__row{display:grid;grid-template-columns:1.4fr 1fr 1fr;border-bottom:1px solid var(--line);transition:background .15s}
.ctable__row:last-child{border-bottom:none}
.ctable__row > div{padding:16px 20px;font-size:14.5px}
.ctable__row--head{background:var(--frame);color:#fff;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.ctable__row--head > div{color:#fff}
.ctable__row > div:nth-child(2),.ctable__row > div:nth-child(3){color:var(--ink-soft);text-align:center}
.ctable__row > div:first-child{color:var(--ink);font-weight:500}
.ctable__row:not(.ctable__row--head):hover{background:var(--bg-soft)}
.ctable__row--featured{background:linear-gradient(90deg,var(--surface),var(--bg-tint))}
.ctable__row--featured > div{color:var(--navy);font-weight:600}
.compare-table__cta{text-align:center;margin-top:32px}
@media (max-width:720px){.ctable__row{grid-template-columns:1fr 1fr}.ctable__row > div:last-child{display:none}}
/* ============ WHY SINGLE ============ */
.why-single{padding:90px 0;background:var(--surface)}
/* ============ CONTACT CHANNELS ============ */
.contact-channels{padding:80px 0 30px;background:var(--surface)}
.channelgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.channel{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:28px;display:block;transition:transform .2s, box-shadow .2s, border-color .2s}
.channel:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.channel__icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--c1,#ff5a3c),var(--c2,#ff8a3d));margin-bottom:16px;box-shadow:0 6px 14px rgba(0,0,0,.08)}
.channel :is(h3,h4){font-size:17px;margin:0 0 4px}
.channel p{margin:0 0 12px;color:var(--ink-soft);font-size:14.5px;font-weight:500}
.channel__meta{display:block;color:var(--muted);font-size:12.5px}
@media (max-width:960px){.channelgrid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.channelgrid{grid-template-columns:1fr}}
/* ============ CONTACT FORM SECTION (full-width) ============ */
.contact-form-section{padding:30px 0 90px;background:var(--surface)}
.contact-form-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:48px;box-shadow:var(--shadow);max-width:880px;margin:0 auto;position:relative;overflow:hidden}
.contact-form-card::before{content:"";position:absolute;top:-100px;right:-100px;width:280px;height:280px;background:radial-gradient(circle,rgba(255,90,60,.08),transparent 60%);border-radius:50%;pointer-events:none}
.contact-form-card__head{text-align:center;margin-bottom:32px;position:relative}
.contact-form-card__head h2{font-size:30px;margin:0 0 8px}
.contact-form-card__head p{color:var(--ink-soft);margin:0;font-size:15.5px}
.contact__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact__check{display:flex;flex-direction:row;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink-soft);font-weight:400}
.contact__check input{margin-top:3px;accent-color:var(--accent)}
.contact__check span em{color:var(--muted);font-style:normal}
@media (max-width:720px){.contact-form-card{padding:28px}.contact__row{grid-template-columns:1fr}}
/* ============ OFFICES ============ */
.offices{padding:90px 0;background:var(--bg-soft)}
.officegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.office{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center;transition:transform .2s, box-shadow .2s}
.office:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.office__flag{font-size:36px;margin-bottom:8px}
.office :is(h3,h4){font-size:17px;margin:0 0 10px}
.office p{margin:0 0 4px;color:var(--ink-soft);font-size:13.5px}
@media (max-width:960px){.officegrid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.officegrid{grid-template-columns:1fr}}
/* ============ BOTTOM CTA (dark band) ============ */
.bottom-cta{padding:60px 0;background:linear-gradient(135deg,var(--frame), var(--frame-2));color:#fff}
.bottom-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.bottom-cta h2{color:#fff;margin:0 0 6px;font-size:26px}
.bottom-cta p{color:#aab4ce;margin:0;font-size:15.5px}
.bottom-cta__actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:720px){.bottom-cta__inner{flex-direction:column;align-items:flex-start;text-align:left}}
/* ============ NAV: Client Area pill ============ */
.nav__link--client{display:inline-flex;align-items:center;gap:8px;background:var(--frame);color:#fff !important;padding:9px 16px !important;border-radius:10px;font-weight:600;margin-left:4px}
.nav__link--client:hover{background:var(--accent)}
.nav__link--client.nav__link--active{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
@media (max-width:960px){.nav__link--client{margin-left:0;justify-content:center}}
/* ============ INSIDE (Home: 3 path cards) ============ */
.inside{padding:90px 0;background:var(--surface)}
.inside__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.inside__card{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:20px;padding:32px 28px;display:block;transform-style:preserve-3d;transition:transform .25s, box-shadow .25s, border-color .25s;overflow:hidden}
.inside__card:hover{--lift:-4px;box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.inside__card--featured{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,var(--accent),var(--accent-2)) border-box;border:1.5px solid transparent;box-shadow:0 18px 40px rgba(255,90,60,.16)}
.inside__ribbon{position:absolute;top:14px;right:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;letter-spacing:.06em;text-transform:uppercase}
.inside__icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;background:linear-gradient(135deg,var(--c1,#ff5a3c),var(--c2,#ff8a3d));color:#fff;margin-bottom:18px;box-shadow:0 8px 18px rgba(0,0,0,.08)}
.inside__card h3{font-size:22px;margin:0 0 10px}
.inside__card p{color:var(--ink-soft);font-size:14.5px;margin:0 0 18px;line-height:1.6}
.inside__link{font-weight:700;color:var(--accent);font-size:14.5px;display:inline-block;transition:transform .2s}
.inside__card:hover .inside__link{transform:translateX(4px)}
@media (max-width:960px){.inside__grid{grid-template-columns:1fr}}
/* ============ TESTIMONIALS ============ */
.testimonials{padding:90px 0;background:var(--bg-soft)}
.testgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.test{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;margin:0;transition:transform .2s, box-shadow .2s}
.test:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.test__stars{color:var(--accent-3);font-size:16px;letter-spacing:2px;margin-bottom:12px}
.test blockquote{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--ink);font-weight:500}
.test figcaption{display:flex;align-items:center;gap:12px}
.test__avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--a1,#ff5a3c),var(--a2,#ff8a3d));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.test figcaption strong{display:block;font-size:14px;color:var(--navy);font-weight:700}
.test figcaption span{font-size:12.5px;color:var(--muted)}
@media (max-width:960px){.testgrid{grid-template-columns:1fr}}
/* ============ CATEGORY GRID (Tools Bundle "inside") ============ */
.whatsinside{padding:90px 0;background:var(--surface)}
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;transition:transform .2s, box-shadow .2s, border-color .2s;position:relative}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.cat__icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;background:linear-gradient(135deg,var(--c1,#ff5a3c),var(--c2,#ff8a3d));color:#fff;margin-bottom:14px;box-shadow:0 6px 14px rgba(0,0,0,.08)}
.cat :is(h3,h4){font-size:17px;margin:0 0 12px}
.cat ul{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:6px}
.cat li{font-size:13.5px;color:var(--ink-soft);position:relative;padding-left:16px}
.cat li::before{content:"•";position:absolute;left:2px;color:var(--accent);font-weight:800}
.cat__count{position:absolute;top:24px;right:24px;background:var(--bg-soft);color:var(--navy);font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px}
.whatsinside__cta{text-align:center;background:var(--bg-tint);border:1.5px dashed #f3d9c9;border-radius:18px;padding:32px}
.whatsinside__cta p{font-size:16px;color:var(--ink);margin:0 0 16px}
@media (max-width:960px){.catgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.catgrid{grid-template-columns:1fr}.cat__count{position:static;display:inline-block;margin-bottom:12px}}
/* ============ GUARANTEE (4-up trust row) ============ */
.guarantee{padding:60px 0;background:var(--bg-soft)}
.guarantee__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.guarantee__item{text-align:center;padding:24px 18px}
.guarantee__icon{font-size:36px;margin-bottom:10px}
.guarantee__item :is(h3,h4){font-size:16px;margin:0 0 8px}
.guarantee__item p{color:var(--ink-soft);font-size:13.5px;margin:0;line-height:1.55}
@media (max-width:960px){.guarantee__grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.guarantee__grid{grid-template-columns:1fr}}
/* ============ WHY-WINS (extra USPs for page) ============ */
.whywins{padding:90px 0;background:var(--surface)}
/* ============ PARTNER STRIP (reseller trust) ============ */
.partner-strip{padding:50px 0;background:linear-gradient(180deg,var(--surface) 0,var(--bg-soft) 100%)}
.partner-strip__inner{text-align:center}
.partner-strip__label{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin:0 0 22px}
.partner-strip__row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;align-items:center}
.partner-strip__item{padding:10px 18px;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--navy);font-weight:700;font-size:13.5px;letter-spacing:.02em;opacity:.7;transition:opacity .2s, transform .2s}
.partner-strip__item:hover{opacity:1;transform:translateY(-2px)}
/* ============ REVEAL ON SCROLL ============ */
/* .reveal composes through a custom property instead of writing `transform`
directly. It used to set `transform:none` at .reveal.is-visible, which is
specificity 0,2,0 and sits late in this file — so it silently beat any
component that owned its own transform, and a card's hover lift or 3D tilt
computed to none. Offsetting a variable leaves the transform itself to the
component. */
.reveal{opacity:0;--reveal-y:20px;transform:translateY(var(--reveal-y));transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;--reveal-y:0px}
/* Components that own a 3D transform declare it here, after .reveal, so the
cascade resolves in their favour without needing !important. Both offsets
are summed, so a card can be mid-reveal and hovered at the same time. */
.plan,.inside__card,.feat,.trend,.toolcard,.test,.logostrip__item{
transform-style:preserve-3d;
transform:translateY(calc(var(--reveal-y,0px) + var(--lift,0px)))
translateZ(var(--depth,0px))
rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
}
/* Every card grid becomes its own 3D context so tilt reads as depth rather
than as skew. Perspective is per-grid, not global, so a card's vanishing
point sits near it instead of at the page centre. */
.plans,.inside__grid,.featgrid,.trendgrid,.toolgrid,.testgrid,.logostrip__row{perspective:1000px}
.feat:hover,.trend:hover,.toolcard:hover,.test:hover{--lift:-3px}
.logostrip__item:hover{--lift:-2px}
/* ---- Section depth. Each major section hinges in from slightly behind.
The offset is small and the sections are staggered by scroll position rather
than by index, so nothing waits on a queue to become readable. Content is
fully visible without the class — .depth-in only removes an offset. ---- */
.inside,.pricing,.single-tools,.features,.trending,.testimonials,.faq,.cta-strip,.bottom-cta,.stats{
perspective:1400px;
}
.inside > .container,.pricing > .container,.single-tools > .container,
.features > .container,.trending > .container,.testimonials > .container,
.faq > .container,.cta-strip > .container,.bottom-cta > .container,.stats > .container{
transform-origin:50% 100%;
transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .7s cubic-bezier(.16,1,.3,1);
}
html.js-depth .inside:not(.depth-in) > .container,
html.js-depth .pricing:not(.depth-in) > .container,
html.js-depth .single-tools:not(.depth-in) > .container,
html.js-depth .features:not(.depth-in) > .container,
html.js-depth .trending:not(.depth-in) > .container,
html.js-depth .testimonials:not(.depth-in) > .container,
html.js-depth .faq:not(.depth-in) > .container,
html.js-depth .cta-strip:not(.depth-in) > .container,
html.js-depth .bottom-cta:not(.depth-in) > .container,
html.js-depth .stats:not(.depth-in) > .container{
opacity:.001;
transform:translateZ(-90px) rotateX(6deg);
}
@media (prefers-reduced-motion: reduce){
.reveal{opacity:1;transform:none;transition:none}
.hero__chip{animation:none}
}
/* ============ THEME TOGGLE ============ */
.theme-toggle{
display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
border-radius:8px;background:rgba(255,255,255,.1);color:#fff;font-size:13px;line-height:1;
transition:background .15s ease, transform .15s ease;
}
.theme-toggle:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
.theme-toggle:focus-visible{outline:2px solid var(--accent-3);outline-offset:2px}
/* Depth is expression, not information. Everything below resolves to the flat,
fully-visible resting state when less motion is requested. */
@media (prefers-reduced-motion:reduce){
.plans,.inside__grid,.featgrid,.trendgrid,.toolgrid,.testgrid,.logostrip__row{perspective:none}
.inside,.pricing,.single-tools,.features,.trending,.testimonials,.faq,.cta-strip,.bottom-cta,.stats{perspective:none}
.plan,.inside__card,.feat,.trend,.toolcard,.test,.logostrip__item{
transform:translateY(calc(var(--reveal-y,0px) + var(--lift,0px)))
}
.plan--featured{--depth:0px}
.hero__blob{transform:none !important}
[class] > .container{transform:none !important;opacity:1 !important}
}
/* ==========================================================================
Private (dedicated) accounts — landing section
Deliberately quieter than .toolcard: this sits directly below the shared-tool
grid, and two competing card treatments in a row would read as noise. It
borrows the same tokens so both surfaces stay one vocabulary, and uses the
theme tokens throughout so it follows dark mode like the rest of the page.
========================================================================== */
.private-accounts{padding:72px 0}
.privategrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.privatecard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;transition:transform .2s, box-shadow .2s, border-color .2s}
.privatecard:hover{transform:translateY(-1px);border-color:var(--line-strong)}
/* Featured is a border weight, not a glow: orange is reserved for actions. */
.privatecard--featured{border-color:var(--navy)}
/* The brand colour identifies the service, so it is information rather than
decoration. A fixed navy scrim sits over it because several brand colours
are far too pale to carry white text: measured, Canva cyan gives 2.15:1 and
Grammarly 2.26:1, both well under AA. At 40% every brand in the catalog
clears 4.5:1 while staying recognisably itself. A text-shadow was tried
first and does not count toward contrast. */
.privatecard__icon{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;letter-spacing:.02em;color:#fff;background:linear-gradient(rgba(11,23,54,.40),rgba(11,23,54,.40)),linear-gradient(135deg,var(--c1,#ff5a3c),var(--c2,#ff8a3d))}
.privatecard__head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.privatecard__ident{min-width:0;flex:1}
.privatecard__cat{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.privatecard__tag{flex-shrink:0;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#7c2d12;background:#ffedd5;border-radius:999px;padding:3px 9px}
.privatecard h3{margin:0;font-size:16px;line-height:1.25;color:var(--navy);overflow-wrap:anywhere}
.privatecard p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.privatecard__seats{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:4px 10px;margin-bottom:14px}
.privatecard__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.privatecard__price{display:flex;flex-direction:column;line-height:1.2}
.privatecard__price strong{font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.privatecard__price small{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px}
.privatecard__btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:9px;background:var(--accent-strong,#c2410c);color:#fffaf7;font-weight:700;font-size:13.5px;text-decoration:none;white-space:nowrap;transition:background .2s}
.privatecard__btn:hover{background:#ad3708;text-decoration:none}
.privategrid__foot{margin-top:26px;text-align:center}
@media(max-width:1000px){.privategrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.privategrid{grid-template-columns:1fr}.private-accounts{padding:52px 0}}
/* Grid sized to the content, not to a fixed column count: the catalog can
grow and the landing page shows at most six. */
.privategrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:18px}
.privatecard__btn{max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion: reduce){.privatecard{transition:none}.privatecard:hover{transform:none}}
/* ------------------------------------------------------------------ */
/* Reseller panel offer */
/* ------------------------------------------------------------------ */
/* Built on the shared tokens so it holds up in both themes: the page */
/* has a light default and a dark toggle, and this section is the first */
/* thing a prospective reseller reads in either one. */
.rpanel { padding: 64px 0 8px; }
.rpanel__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 40px;
align-items: center;
}
@media (max-width: 900px) {
.rpanel { padding: 44px 0 4px; }
.rpanel__grid { grid-template-columns: 1fr; gap: 26px; }
}
/* ---- Offer card ---------------------------------------------------- */
.rpanel__card {
position: relative;
padding: 38px 36px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface);
box-shadow: var(--shadow);
overflow: hidden;
}
/* A faint grid inside the card. Sits behind the content and is purely a
surface texture, so it never competes with the price. */
.rpanel__card::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--panel-glow) 1px, transparent 1px),
linear-gradient(90deg, var(--panel-glow) 1px, transparent 1px);
background-size: 34px 34px;
opacity: .5;
pointer-events: none;
}
.rpanel__card > * { position: relative; }
/* --accent-strong is the darkened orange meant for LIGHT grounds. The dark
theme does not redefine it, so on the dark card it measured 3.39:1 and
missed AA. No single orange clears 4.5:1 on both #ffffff and #0e1832, so
the eyebrow is set per theme: 5.18:1 light, 7.49:1 dark. */
.rpanel__eyebrow {
display: block;
font-size: 12px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent-strong);
margin-bottom: 14px;
}
:root[data-theme="dark"] .rpanel__eyebrow { color: #ff8a3d; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .rpanel__eyebrow { color: #ff8a3d; }
}
.rpanel__price {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
}
/* The number is the headline of this section, so it is set far larger
than anything near it rather than merely bold. */
.rpanel__amount {
font-family: 'Plus Jakarta Sans', Inter, sans-serif;
font-size: clamp(3rem, 6vw, 4.4rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.035em;
color: var(--navy);
}
.rpanel__currency { font-size: .62em; margin-right: 2px; }
/* Sits inside .rpanel__amount, so without its own size it would inherit the
4.4rem price and render "/month" as tall as the number. */
.rpanel__per {
font-size: .26em;
font-weight: 700;
letter-spacing: 0;
color: var(--muted);
margin-left: 4px;
}
.rpanel__unit {
font-size: 1rem;
font-weight: 700;
color: var(--muted);
}
.rpanel__copy {
font-size: 15.5px;
line-height: 1.65;
color: var(--ink-soft);
margin: 0 0 26px;
max-width: 46ch;
}
.rpanel__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
border-radius: 999px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fffaf7;
font-weight: 800;
font-size: 15.5px;
text-decoration: none;
box-shadow: 0 12px 28px rgba(255, 90, 60, .3);
transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s ease;
}
.rpanel__cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 36px rgba(255, 90, 60, .38);
text-decoration: none;
color: #fffaf7;
}
.rpanel__cta:focus-visible {
outline: 3px solid var(--navy);
outline-offset: 3px;
}
/* Says where the button goes before it is pressed. A button that silently
opens WhatsApp is a small unpleasant surprise. */
.rpanel__note {
margin: 14px 0 0;
font-size: 12.5px;
color: var(--muted);
}
/* ---- Audience ------------------------------------------------------- */
.rpanel__title {
font-family: 'Plus Jakarta Sans', Inter, sans-serif;
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -.025em;
color: var(--navy);
margin: 0 0 24px;
max-width: 18ch;
}
.rpanel__chips {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.rpanel__chip {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 18px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--ink);
font-size: 14.5px;
font-weight: 700;
transition: border-color .16s ease, transform .16s ease;
}
.rpanel__chip:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.rpanel__chip span { font-size: 17px; line-height: 1; }
.rpanel__who-note {
margin: 22px 0 0;
font-size: 14px;
line-height: 1.6;
color: var(--muted);
max-width: 42ch;
}
@media (max-width: 560px) {
.rpanel__card { padding: 28px 22px; }
.rpanel__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.rpanel__cta,
.rpanel__chip { transition: none; }
.rpanel__cta:hover,
.rpanel__chip:hover { transform: none; }
}
/* ------------------------------------------------------------------ */
/* Reseller benefits */
/* ------------------------------------------------------------------ */
.rbenefits { padding: 64px 0; }
/* auto-fit rather than a fixed count: eight cards should reflow to 4/3/2/1
without a breakpoint for each step. */
.rbenefits__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
gap: 18px;
}
.rbenefit {
padding: 24px 22px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
transition: border-color .16s ease, transform .16s ease;
}
.rbenefit:hover {
border-color: var(--accent);
transform: translateY(-2px);
}
.rbenefit__ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--bg-tint);
border: 1px solid var(--line);
font-size: 20px;
line-height: 1;
margin-bottom: 14px;
}
.rbenefit h3 {
margin: 0 0 7px;
font-size: 16.5px;
font-weight: 800;
letter-spacing: -.01em;
color: var(--navy);
}
.rbenefit p {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: var(--ink-soft);
}
@media (prefers-reduced-motion: reduce) {
.rbenefit { transition: none; }
.rbenefit:hover { transform: none; }
}