/* ============================================================
ezee - shared design system
------------------------------------------------------------
Extracted from scam-prevention-redesign.html and design-tokens.md
so every page inherits one token set (redesign-synthesis rec. #1).
Every visual property in this file resolves to a token in :root.
No ad-hoc colour, spacing, radius or type values in component rules.
============================================================ */
:root{
/* ---- Colour: primary / brand ---- */
--primary-50:#e7f3f0;
--primary-100:#b5d9d1;
--primary-200:#91c7bb;
--primary-300:#5eae9d;
--primary-400:#3f9e89;
--primary-500:#0f866c;
--primary-600:#0e7a62;
--primary-700:#0b5f4d;
--primary-800:#084a3b;
--primary-900:#06382d;
/* ---- Colour: neutrals ---- */
--gray-50:#f0f1f3;
--gray-100:#d0d3d9;
--gray-200:#b9bdc7;
--gray-300:#989fad;
--gray-400:#858d9d;
--gray-500:#667085;
--gray-600:#5d6679;
--gray-700:#48505e;
--gray-800:#383e49;
--gray-900:#2b2f38;
--white:#ffffff;
--black:#202020;
/* ---- Colour: feedback ---- */
--success-50:#e7f8f0;
--success-500:#12b76a;
--success-700:#0d824b;
--warning-50:#fef4e6;
--warning-500:#f79009;
--warning-700:#af6606;
--error-50:#feeceb;
--error-500:#f04438;
--error-700:#aa3028;
/* ---- Colour: semantic roles ---- */
--text-primary:var(--gray-900);
--text-secondary:var(--gray-600);
--text-muted:var(--gray-500);
--surface:var(--white);
--surface-subtle:var(--gray-50);
--surface-brand-subtle:var(--primary-50);
--surface-inverse:var(--gray-900);
--border:var(--gray-100);
--border-strong:var(--gray-200);
/* ---- Focus ---- */
--focus:var(--primary-500);
--focus-on-brand:#ffffff; /* white ring for teal surfaces, 4.2:1 on primary-500 */
--focus-on-dark:#ffffff;
/* ---- Type: families ---- */
--font-head:"Barlow","Segoe UI",Arial,Helvetica,sans-serif;
--font-body:"Roboto","Segoe UI",Arial,Helvetica,sans-serif;
--font-logo:"Poppins","Barlow",sans-serif;
/* ---- Type: weights ---- */
--fw-regular:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
/* ---- Type: scale (size / line-height / tracking per role) ---- */
--fs-display:60px; --lh-display:62px; --ls-display:-1.2px;
--fs-h2:36px; --lh-h2:40px; --ls-h2:-.72px;
--fs-h2-lg:48px; --lh-h2-lg:52px; --ls-h2-lg:-.96px;
--fs-h3:20px; --lh-h3:28px; --ls-h3:-.2px;
--fs-h4:18px; --lh-h4:28px; --ls-h4:-.18px;
--fs-h5:16px; --lh-h5:24px; --ls-h5:-.16px;
--fs-num-lg:32px; --lh-num-lg:34px; --ls-num-lg:-.5px;
--fs-num:14px; --lh-num:20px; --ls-num:.8px;
--fs-lead:18px; --lh-lead:28px;
--fs-base:16px; --lh-base:26px; --lh-base-tight:24px;
--fs-sm:14px; --lh-sm:20px;
--fs-caption:12px; --lh-caption:16px; --ls-eyebrow:1.2px;
/* ---- Spacing: 4px scale ---- */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-section:96px;
--space-hero-top:88px;
--gutter:24px;
/* ---- Radius ---- */
--radius-xs:8px;
--radius-sm:12px;
--radius-md:16px;
--radius-lg:20px;
--radius-xl:28px;
--radius-pill:999px;
/* ---- Elevation ---- */
--shadow-card:0 1px 2px 0 rgba(18,33,28,.06);
--shadow-raised:0 12px 32px -12px rgba(18,33,28,.10);
--shadow-cta:0 8px 22px -10px rgba(15,134,108,.55);
/* ---- Layout ---- */
--container:1192px;
--header-h:72px;
--tap:44px;
--ease:cubic-bezier(.32,.72,0,1);
--ease-out:cubic-bezier(.23,1,.32,1);
}
/* ============================================================
Base
============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;
font-family:var(--font-body);
font-size:var(--fs-base);
line-height:var(--lh-base);
color:var(--text-secondary);
background:var(--surface);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-head);color:var(--text-primary)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.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}
.skip-link{
position:absolute;left:var(--space-3);top:-64px;z-index:200;
background:var(--primary-500);color:var(--white);
padding:var(--space-3) var(--space-6);border-radius:var(--radius-pill);
font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--fs-sm);
transition:top .3s var(--ease);
}
.skip-link:focus{top:var(--space-3)}
/* ============================================================
Type roles
============================================================ */
.t-display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-bold)}
.t-h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:var(--fw-bold)}
.t-h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--fw-semibold)}
.t-h4{font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);font-weight:var(--fw-semibold)}
.t-h5{font-size:var(--fs-h5);line-height:var(--lh-h5);letter-spacing:var(--ls-h5);font-weight:var(--fw-semibold)}
.t-lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-secondary)}
.t-sm{font-size:var(--fs-sm);line-height:var(--lh-sm)}
.t-caption{font-size:var(--fs-caption);line-height:var(--lh-caption)}
.t-eyebrow{
font-family:var(--font-body);font-weight:var(--fw-bold);
font-size:var(--fs-caption);line-height:var(--lh-caption);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
color:var(--primary-700);
}
.measure{max-width:62ch}
/* ============================================================
Section rhythm
============================================================ */
.section{padding-block:var(--space-section)}
.section--tight{padding-block:var(--space-20)}
.section--subtle{background:var(--surface-subtle)}
.section--brand-subtle{background:var(--surface-brand-subtle)}
.section__head{margin-bottom:var(--space-12);max-width:62ch}
.section__head > * + *{margin-top:var(--space-4)}
/* ============================================================
Buttons
============================================================ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:var(--fw-bold);
white-space:nowrap;min-height:var(--tap);
transition:background .18s var(--ease),color .18s var(--ease),
border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.5;pointer-events:none}
.btn--brand{
background:var(--primary-500);color:var(--white);
padding:var(--space-3) var(--space-8);
font-size:var(--fs-base);line-height:var(--lh-base-tight);
}
.btn--brand:hover{background:var(--primary-700);box-shadow:var(--shadow-cta)}
.btn--brand:focus-visible{outline:2px solid var(--focus-on-brand);outline-offset:2px;box-shadow:0 0 0 4px rgba(11,95,77,.45)}
.btn--ghost{
background:var(--white);color:var(--text-primary);border:1px solid var(--border);
padding:var(--space-3) var(--space-8);
font-size:var(--fs-base);line-height:var(--lh-base-tight);
}
.btn--ghost:hover{border-color:var(--primary-500);color:var(--primary-700)}
/* Outline button for dark surfaces. White on gray-900 is 12.6:1. */
.btn--on-dark{
background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.38);
padding:var(--space-3) var(--space-8);
font-size:var(--fs-base);line-height:var(--lh-base-tight);
}
.btn--on-dark:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.btn--on-dark:focus-visible{outline:2px solid var(--focus-on-dark);outline-offset:2px}
.btn--sm{padding:var(--space-2) var(--space-6);font-size:var(--fs-sm);line-height:var(--lh-sm);min-height:36px}
.btn--block{width:100%}
.btn i,.btn svg{font-size:18px;line-height:1}
/* Text link with trailing chevron */
.link-arrow{
display:inline-flex;align-items:center;gap:var(--space-2);
font-weight:var(--fw-bold);font-size:var(--fs-sm);line-height:var(--lh-sm);
color:var(--primary-700);
}
.link-arrow i,.link-arrow svg{font-size:16px;flex:none;transition:transform .18s var(--ease)}
.link-arrow:hover i,.link-arrow:hover svg{transform:translateX(3px)}
/* ============================================================
Global navigation
------------------------------------------------------------
IA source: redesign-synthesis.md "Proposed Information
Architecture" + "Navigation & CTA system".
Logo | Products v Why ezee Pricing Download Support v
| Language v . Log in . [Get ezee]
Three zones so the bar reads in one pass: brand (left),
wayfinding (middle), account + the single primary CTA (right).
Everything except "Get ezee" is deliberately quiet - one filled
element in the bar means the eye always lands on the same place.
============================================================ */
.site-header{
position:sticky;top:0;z-index:100;
background:var(--white);
border-bottom:1px solid var(--border);
transition:box-shadow .2s var(--ease),background-color .2s var(--ease);
}
/* Scrolled: the bar lifts off the page instead of changing size,
so nothing below it reflows. */
.site-header[data-scrolled="true"]{
background:rgba(255,255,255,.88);
box-shadow:var(--shadow-card);
}
@supports (backdrop-filter:blur(1px)){
.site-header[data-scrolled="true"]{backdrop-filter:saturate(180%) blur(12px)}
}
.header__inner{height:var(--header-h);display:flex;align-items:center;gap:var(--space-8)}
/* The full lockup is the default brand signature (design-logo.md
§1) and 120px is its stated web-header minimum. */
.logo{display:inline-flex;align-items:center;gap:var(--space-2);flex:none;border-radius:var(--radius-xs)}
.logo__lockup{width:120px;height:42px;flex:none}
.logo__mark{width:28.6px;height:32px;flex:none}
.logo__word{font-family:var(--font-logo);font-weight:var(--fw-medium);font-size:25.9px;line-height:1;color:var(--black);letter-spacing:-.01em}
/* ---- Primary nav ------------------------------------------- */
/* flex:none — the row of labels must never be squeezed. German
labels run 20-30% longer than English, so the bar is spaced to
leave headroom rather than to fill the width exactly. */
.nav{margin-right:auto;flex:none}
.nav__list{display:flex;align-items:center;gap:var(--space-4)}
.nav__item{position:relative}
/* Links and dropdown triggers are one visual role, so they share
every rule apart from the chevron. */
.nav__link,.nav__trigger{
position:relative;display:inline-flex;align-items:center;gap:var(--space-1);
height:40px;padding-inline:var(--space-3);
font-family:var(--font-body);font-weight:var(--fw-medium);
font-size:var(--fs-sm);line-height:var(--lh-sm);
color:var(--text-primary);white-space:nowrap;
border-radius:var(--radius-xs);
transition:color .15s var(--ease),background-color .15s var(--ease);
}
.nav__link:hover,.nav__trigger:hover,
.nav__trigger[aria-expanded="true"]{color:var(--primary-700);background:var(--surface-brand-subtle)}
.nav__link:active,.nav__trigger:active{background:var(--primary-100)}
/* Current page: colour alone is not a safe signal, so it also
carries weight and a rule anchored to the bottom of the bar. */
.nav__link[aria-current],.nav__trigger[aria-current]{color:var(--primary-700);font-weight:var(--fw-bold)}
.nav__link[aria-current]::after,.nav__trigger[aria-current]::after{
content:"";position:absolute;left:var(--space-3);right:var(--space-3);
bottom:calc((var(--header-h) - 40px) / -2 - 1px);
height:2px;background:var(--primary-500);border-radius:var(--radius-pill);
}
.nav__chev{width:14px;height:14px;flex:none;transition:transform .2s var(--ease)}
[aria-expanded="true"] > .nav__chev{transform:rotate(180deg)}
/* ---- Dropdown panels --------------------------------------- */
.nav__panel{
position:absolute;top:calc(100% + var(--space-4));left:0;
background:var(--white);
border:1px solid var(--border);border-radius:var(--radius-md);
box-shadow:var(--shadow-raised);
overflow:hidden;
opacity:0;transform:translateY(-6px);
transition:opacity .18s var(--ease),transform .18s var(--ease);
}
/* [hidden] until the controller opens it, so a closed menu is
inert for keyboard and screen readers, not just invisible. */
.nav__panel[hidden]{display:none}
.nav__item[data-open="true"] > .nav__panel{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
.nav__panel{transition:none;transform:none}
}
/* Mega panel - Products. Two columns: the product list carries
the choice, the aside carries the one thing we want noticed. */
.nav__panel--mega{width:720px;left:calc(var(--space-3) * -1)}
.mega{display:grid;grid-template-columns:1fr 268px;gap:var(--space-6);padding:var(--space-5)}
.mega__eyebrow{
font-family:var(--font-body);font-weight:var(--fw-bold);
font-size:var(--fs-caption);line-height:var(--lh-caption);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
color:var(--text-muted);padding-inline:var(--space-3);margin-bottom:var(--space-3);
}
.mega__list{display:flex;flex-direction:column;gap:var(--space-1)}
.mega__link{
display:grid;grid-template-columns:40px 1fr;gap:var(--space-4);align-items:start;
padding:var(--space-3);border-radius:var(--radius-sm);
transition:background-color .15s var(--ease);
}
.mega__link:hover{background:var(--surface-subtle)}
.mega__link:hover .mega__ico{background:var(--primary-500);color:var(--white)}
.mega__link[aria-current]{background:var(--surface-brand-subtle)}
.mega__ico{
width:40px;height:40px;display:grid;place-items:center;flex:none;
border-radius:var(--radius-xs);
background:var(--surface-brand-subtle);color:var(--primary-600);
transition:background-color .15s var(--ease),color .15s var(--ease);
}
.mega__ico svg{width:20px;height:20px}
.mega__name{
display:flex;align-items:center;gap:var(--space-2);
font-family:var(--font-head);font-weight:var(--fw-semibold);
font-size:var(--fs-h5);line-height:var(--lh-h5);letter-spacing:var(--ls-h5);
color:var(--text-primary);
}
.mega__desc{margin-top:var(--space-1);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted)}
/* Not-yet-shipped entry. Still reachable - the page exists and
captures interest - but visibly held back from the others. */
.mega__link--soon .mega__ico{background:var(--gray-50);color:var(--text-muted)}
.mega__link--soon:hover .mega__ico{background:var(--gray-100);color:var(--text-secondary)}
.mega__link--soon .mega__name{color:var(--text-secondary)}
.mega__aside{
display:flex;flex-direction:column;
padding:var(--space-5);border-radius:var(--radius-sm);
background:var(--surface-brand-subtle);
}
.mega__aside-title{
margin-top:var(--space-3);
font-family:var(--font-head);font-weight:var(--fw-semibold);
font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);
color:var(--text-primary);
}
.mega__aside-copy{margin-top:var(--space-2);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
.mega__aside .link-arrow{margin-top:auto;padding-top:var(--space-5)}
.mega__foot{
display:flex;align-items:center;gap:var(--space-8);
padding:var(--space-4) var(--space-8);
background:var(--surface-subtle);border-top:1px solid var(--border);
}
/* Simple panel - Support, Language. One column of plain rows. */
.nav__panel--list{min-width:248px;padding:var(--space-2)}
.nav__row{
display:flex;align-items:center;gap:var(--space-3);
padding:var(--space-3);border-radius:var(--radius-xs);
font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-primary);
transition:background-color .15s var(--ease),color .15s var(--ease);
}
.nav__row:hover{background:var(--surface-subtle);color:var(--primary-700)}
.nav__row svg{width:18px;height:18px;flex:none;color:var(--text-muted)}
.nav__row:hover svg{color:var(--primary-600)}
.nav__row[aria-current]{color:var(--primary-700);font-weight:var(--fw-medium)}
.nav__row-check{margin-left:auto;color:var(--primary-500)}
/* ---- Utility rail ------------------------------------------ */
.header__actions{display:flex;align-items:center;gap:var(--space-4);flex:none}
.header__rule{width:1px;height:24px;background:var(--border);flex:none}
.lang{position:relative}
.lang__trigger{
display:inline-flex;align-items:center;gap:var(--space-1);
height:36px;padding-inline:var(--space-2);border-radius:var(--radius-xs);
font-family:var(--font-body);font-weight:var(--fw-medium);
font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-secondary);
transition:color .15s var(--ease),background-color .15s var(--ease);
}
.lang__trigger:hover,.lang__trigger[aria-expanded="true"]{color:var(--text-primary);background:var(--surface-subtle)}
.lang__globe{width:16px;height:16px}
.lang .nav__panel{left:auto;right:0;top:calc(100% + var(--space-3))}
.lang[data-open="true"] > .nav__panel{opacity:1;transform:translateY(0)}
.header__login{
font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:var(--fw-medium);
color:var(--text-primary);white-space:nowrap;
padding:var(--space-2) var(--space-1);border-radius:var(--radius-xs);
transition:color .15s var(--ease);
}
.header__login:hover{color:var(--primary-700)}
/* ---- Drawer ------------------------------------------------
Desktop (1440) is the design target this phase. The drawer
keeps the bar usable on narrow screens rather than leaving a
logo with no way through the site; full mobile navigation is
a later phase and is not designed here.
------------------------------------------------------------ */
.nav__burger{
display:none;width:var(--tap);height:var(--tap);
place-items:center;border-radius:var(--radius-xs);color:var(--text-primary);
}
.nav__burger:hover{background:var(--surface-subtle)}
.nav__burger svg{width:22px;height:22px}
.drawer{
position:fixed;inset:var(--header-h) 0 0;z-index:99;
background:var(--white);overflow-y:auto;
padding:var(--space-6) 0 var(--space-12);
}
.drawer[hidden]{display:none}
.drawer__group + .drawer__group{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--border)}
.drawer__h{
font-family:var(--font-body);font-weight:var(--fw-bold);
font-size:var(--fs-caption);line-height:var(--lh-caption);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted);
margin-bottom:var(--space-2);
}
.drawer a{
display:flex;align-items:center;gap:var(--space-2);
min-height:var(--tap);font-size:var(--fs-base);line-height:var(--lh-base-tight);
font-weight:var(--fw-medium);color:var(--text-primary);
}
.drawer a[aria-current]{color:var(--primary-700);font-weight:var(--fw-bold)}
.drawer__cta{margin-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
/* ============================================================
Badges
============================================================ */
.badge{
display:inline-flex;align-items:center;gap:var(--space-1);
padding:2px var(--space-2);border-radius:var(--radius-pill);
font-family:var(--font-body);font-weight:var(--fw-bold);
font-size:10px;line-height:16px;letter-spacing:.6px;text-transform:uppercase;
}
.badge--brand{background:var(--primary-500);color:var(--white)}
.badge--subtle{background:var(--surface-brand-subtle);color:var(--primary-700)}
.badge--soon{background:var(--warning-50);color:var(--warning-700)}
.badge--success{background:var(--success-50);color:var(--success-700)}
.badge--muted{background:var(--gray-50);color:var(--text-muted)}
/* ============================================================
Accordion (FAQ)
============================================================ */
.acc{border-top:1px solid var(--border)}
.acc__item{border-bottom:1px solid var(--border)}
.acc__btn{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
padding:var(--space-6) 0;text-align:left;
font-family:var(--font-head);font-weight:var(--fw-semibold);
font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);
color:var(--text-primary);transition:color .15s var(--ease);
}
.acc__btn:hover{color:var(--primary-700)}
.acc__btn i,.acc__btn svg{font-size:20px;width:20px;height:20px;color:var(--primary-600);flex:none;transition:transform .22s var(--ease)}
.acc__btn[aria-expanded="true"] i,.acc__btn[aria-expanded="true"] svg{transform:rotate(45deg)}
.acc__panel{overflow:hidden;height:0;transition:height .26s var(--ease)}
.acc__panel > div{padding-bottom:var(--space-6);max-width:70ch;color:var(--text-secondary)}
/* ============================================================
Forms
============================================================ */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field__label{
font-family:var(--font-body);font-weight:var(--fw-medium);
font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-primary);
}
.field__control{
width:100%;min-height:var(--tap);
padding:var(--space-3) var(--space-4);
border:1px solid var(--border-strong);border-radius:var(--radius-sm);
background:var(--white);color:var(--text-primary);
font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-base-tight);
transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
/* gray-500 on white is 4.9:1, passes AA for placeholder text */
.field__control::placeholder{color:var(--text-muted)}
.field__control:hover{border-color:var(--gray-300)}
.field__control:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(15,134,108,.18)}
.field__help{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted)}
.field__error{
display:none;align-items:center;gap:var(--space-2);
font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--error-700);
}
.field__error i{font-size:14px}
.field.is-invalid .field__control{border-color:var(--error-500)}
.field.is-invalid .field__control:focus{box-shadow:0 0 0 3px rgba(240,68,56,.18)}
.field.is-invalid .field__error{display:flex}
/* ============================================================
Footer
============================================================ */
.footer{background:var(--surface-inverse);color:var(--gray-200);padding-block:var(--space-20) var(--space-10)}
.footer__cols{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:var(--space-16)}
.footer .logo__word{color:var(--white)}
.footer__addr{margin-top:var(--space-6);font-size:var(--fs-sm);line-height:var(--lh-base);color:var(--gray-300)}
.footer__note{margin-top:var(--space-4);font-size:var(--fs-caption);line-height:var(--lh-base-tight);color:var(--gray-400);max-width:42ch}
.footer__h{
font-family:var(--font-body);font-weight:var(--fw-bold);
font-size:var(--fs-caption);line-height:var(--lh-caption);letter-spacing:var(--ls-eyebrow);
text-transform:uppercase;color:var(--white);
}
.footer__links{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-5)}
.footer__links a{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--gray-300);transition:color .15s var(--ease)}
.footer__links a:hover{color:var(--white)}
.footer__links :focus-visible,.footer__legal :focus-visible{outline-color:var(--focus-on-dark)}
.footer__divider{height:1px;background:rgba(255,255,255,.12);margin-block:var(--space-16) var(--space-8)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--gray-400)}
.footer__legal{display:flex;gap:var(--space-8)}
.footer__legal a:hover{color:var(--white)}
/* ============================================================
Closing CTA band (shared across pages)
============================================================ */
/* ---- Closing CTA: split card (copy + button left, product cards right) ---- */
.cta{padding-block:var(--space-section)}
.cta__card{position:relative;z-index:0;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding:var(--space-12) var(--space-16);border-radius:var(--radius-xl);background:var(--primary-50)}
.cta__shape{position:absolute;z-index:-1;top:0;bottom:0;right:-110px;width:62%;pointer-events:none;
background:radial-gradient(circle at 60% 50%,transparent 0 118px,rgba(15,134,108,.10) 119px 120px,transparent 121px 196px,rgba(15,134,108,.08) 197px 198px,transparent 199px 276px,rgba(15,134,108,.06) 277px 278px,transparent 279px)}
.cta__left{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:486px}
.cta__tag{display:inline-block;transform:rotate(-6deg);padding:2px var(--space-4);border-radius:var(--radius-md);background:var(--white);color:var(--text-primary);font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:var(--fw-medium);box-shadow:var(--shadow-card)}
.cta__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-8);margin-top:var(--space-2)}
.cta__copy{display:flex;flex-direction:column;gap:var(--space-3)}
.cta h2{font-size:var(--fs-h2-lg);line-height:var(--lh-h2-lg);letter-spacing:var(--ls-h2-lg);font-weight:var(--fw-bold)}
.cta__copy p{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-secondary);max-width:44ch}
.cta__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.cta__right{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-4);width:100%;max-width:497px}
.cta__stack{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-4);max-width:170px}
.cta__note{position:relative;left:24px;display:flex;justify-content:center}
.cta__note p{transform:rotate(-7deg);font-family:var(--font-head);font-size:var(--fs-h4);line-height:1.1;font-weight:var(--fw-bold);color:var(--text-primary);text-align:center}
.cta__note svg{position:relative;left:-6px;top:18px;transform:rotate(40deg);width:28px;height:28px;color:var(--primary-500);flex:none}
.cta__group{display:flex;flex-direction:column;gap:var(--space-4);width:300px;flex:none}
/* mini product cards: built from tokens, not screenshots */
.cta-app{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-raised);border:1px solid var(--border)}
.cta-app__head{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-head);font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:var(--fw-semibold);color:var(--text-primary)}
.cta-app__ico{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-xs);background:var(--primary-50);color:var(--primary-600);flex:none}
.cta-app__ico svg{width:18px;height:18px}
.cta-app__meta{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted)}
.cta-app--vpn{width:170px;align-items:center;text-align:center;padding-block:var(--space-6)}
.cta-app__ring{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--primary-500);color:var(--white);box-shadow:0 0 0 10px var(--primary-50),0 0 0 20px rgba(15,134,108,.08)}
.cta-app__ring svg{width:40px;height:40px}
.cta-app__status{margin-top:var(--space-4);display:inline-flex;align-items:center;gap:6px;padding:2px var(--space-3);border-radius:var(--radius-pill);background:var(--success-50);color:var(--success-700);font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:var(--fw-medium)}
.cta-app__status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success-500)}
.cta-app__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);background:var(--surface-subtle);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-primary)}
.cta-app__row span{color:var(--text-muted);letter-spacing:2px}
.cta-app__bar{height:6px;border-radius:var(--radius-pill);background:var(--gray-50);overflow:hidden}
.cta-app__bar i{display:block;width:38%;height:100%;border-radius:inherit;background:var(--primary-500)}
/* ============================================================
Product UI placeholder
------------------------------------------------------------
Real app screenshots are not available yet. These slots are
sized to the final asset so layout does not shift when the
real image is dropped in. Swap the whole .ui-slot element for
an ![]()
at the stated dimensions.
============================================================ */
.ui-slot{
position:relative;display:grid;place-items:center;
border:1px dashed var(--border-strong);border-radius:var(--radius-lg);
background:var(--surface-subtle);color:var(--text-muted);
text-align:center;padding:var(--space-8);
}
.ui-slot i{font-size:32px;color:var(--gray-300)}
.ui-slot__label{margin-top:var(--space-3);font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:var(--fw-medium);color:var(--text-secondary)}
.ui-slot__spec{margin-top:var(--space-1);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted)}
/* ============================================================
Reveal on scroll (MOTION_INTENSITY 4)
Communicates reading order as a section enters. Content is
visible without JS and static under reduced motion.
============================================================ */
@media (prefers-reduced-motion: no-preference){
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.07s}
[data-reveal][data-delay="2"]{transition-delay:.14s}
[data-reveal][data-delay="3"]{transition-delay:.21s}
}
/* Word-by-word reveal for a single statement headline. ezee.js
wraps each word in .w with --i set to its index; without JS the
heading is plain text. Values match the Figma Text Stagger on
Home / 07 Tagline: 450ms per word, 55ms apart, rise 18px, blur 6px. */
@media (prefers-reduced-motion: no-preference){
[data-reveal-words] .w{
display:inline-block;opacity:0;transform:translateY(18px);filter:blur(6px);
transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),filter .45s var(--ease-out);
transition-delay:calc(var(--i) * 55ms);
}
[data-reveal-words].is-in .w{opacity:1;transform:none;filter:none}
}
/* ============================================================
Responsive
Desktop (1440) is the design target this phase. These rules
keep the pages usable below it rather than shipping a broken
layout; full mobile design is a later phase.
============================================================ */
/* Below 1080 the bar no longer fits five links, a utility rail and
a 720px mega panel. Rather than crushing them, the whole of the
nav moves into the drawer and the CTA stays in the bar. */
@media (max-width:1080px){
.nav,.lang,.header__rule,.header__login{display:none}
.nav__burger{display:grid}
.header__actions{gap:var(--space-2)}
}
@media (max-width:1024px){
:root{--fs-display:44px;--lh-display:48px;--fs-h2:30px;--lh-h2:36px;--fs-h2-lg:36px;--lh-h2-lg:40px;--space-section:72px}
.footer__cols{grid-template-columns:1fr 1fr}
.cta__card{flex-direction:column;text-align:center;padding-inline:var(--space-10)}
.cta__left,.cta__body{align-items:center;max-width:100%}
.cta__actions{justify-content:center}
.cta__right{justify-content:center;max-width:100%}
.cta__shape{left:0;right:0;width:100%}
}
@media (max-width:768px){
:root{--fs-display:36px;--lh-display:42px;--space-section:56px;--gutter:20px}
.cta__card{padding:var(--space-10) var(--space-6);border-radius:var(--radius-lg)}
.cta__right{flex-direction:column}
.cta__stack{max-width:100%;align-items:center}
.cta__note{left:0}
.cta__group{width:100%}
.cta-app--vpn{width:100%}
.cta__shape{display:none}
.footer__cols{grid-template-columns:1fr;gap:var(--space-10)}
.footer__bottom{flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.footer__legal{flex-wrap:wrap;gap:var(--space-5)}
}
/* ============================================================
Icon-font compatibility
------------------------------------------------------------
The header icon slots are sized as inline