/* =========================================================================
   Monee.ae — site styles
   -------------------------------------------------------------------------
   The palette is lifted verbatim from the app's design tokens
   (src/theme/index.ts), so the site and the product are the same brand:
   the icon's dark navy plate carries the identity, and the mark's teal is
   an accent used sparingly.

   No framework. The previous site loaded Bootstrap, jQuery, Owl, Slick,
   AOS, Fancybox and Font Awesome to render one page of static content.
   ========================================================================= */

/* ---------- Tokens ---------- */

:root {
    --navy-950: #061227;
    --navy-900: #0C1C38;
    --navy-800: #16294F;
    --navy-700: #284475;
    --navy-500: #34548A;

    --tint: #E9EEF7;
    --tint-strong: #D3DDF0;

    --aqua: #0BB8A2;
    --aqua-bright: #2FD9C0;
    --aqua-glow: rgba(11, 184, 162, 0.35);

    --ink: #0F1C1F;
    --ink-muted: #5A6B6F;
    --ink-faint: #8A9A9E;

    --ground: #F4F7F8;
    --surface: #FFFFFF;
    --sunk: #EEF3F4;

    --line: #E2EAEC;
    --line-soft: #EFF4F5;

    --income: #1B8F5A;
    --expense: #C4553D;
    --warning: #B07D18;

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    --shadow-card: 0 2px 8px rgba(15, 28, 31, 0.06);
    --shadow-raised: 0 12px 32px rgba(15, 28, 31, 0.10);
    --shadow-deep: 0 24px 60px rgba(6, 18, 39, 0.28);

    --nav-h: 76px;
    --measure: 68ch;

    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
    outline: 3px solid var(--aqua);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--navy-900);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- Layout ---------- */

.wrap {
    width: min(1180px, 100% - 48px);
    margin-inline: auto;
}

.section { padding: clamp(72px, 9vw, 128px) 0; }
.section--tint { background: var(--ground); }
.section--dark { background: var(--navy-950); color: #fff; }

.lede {
    max-width: var(--measure);
    color: var(--ink-muted);
    font-size: clamp(17px, 1.6vw, 19px);
}

.head { max-width: 760px; margin-bottom: clamp(44px, 5vw, 68px); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .lede { margin-inline: auto; }

/* ---------- Type ---------- */

h1, h2, h3 {
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 800;
}

h1 { font-size: clamp(38px, 6.4vw, 68px); }
h2 { font-size: clamp(30px, 4.2vw, 46px); }
h3 { font-size: clamp(19px, 1.8vw, 22px); letter-spacing: -0.015em; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy-700);
    margin-bottom: 18px;
}
.eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--aqua);
}
.section--dark .eyebrow { color: var(--aqua-bright); }

.head h2 + .lede { margin-top: 20px; }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border: 0;
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
    white-space: nowrap;
}

.btn--primary {
    background: linear-gradient(100deg, var(--navy-900), var(--navy-500));
    color: #fff;
    box-shadow: 0 10px 26px rgba(12, 28, 56, 0.30);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(12, 28, 56, 0.38); }

.btn--aqua {
    background: var(--aqua);
    color: #04231F;
    box-shadow: 0 10px 26px rgba(11, 184, 162, 0.30);
}
.btn--aqua:hover { transform: translateY(-2px); background: var(--aqua-bright); }

.btn--ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
}
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); }

.btn--quiet {
    background: var(--surface);
    color: var(--navy-700);
    border: 1.5px solid var(--line);
}
.btn--quiet:hover { border-color: var(--navy-700); transform: translateY(-2px); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* App Store badge, drawn rather than bitmapped so it stays sharp. */
.appstore {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 22px 11px 18px;
    border-radius: 14px;
    background: #fff;
    color: #0B0B0C;
    box-shadow: 0 10px 28px rgba(6, 18, 39, 0.24);
    transition: transform .18s ease, box-shadow .18s ease;
}
.appstore:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(6, 18, 39, 0.32); }
.appstore svg { width: 26px; height: 32px; flex: none; }
.appstore span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .62; line-height: 1.3; }
.appstore strong { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.appstore--dark { background: #0B0B0C; color: #fff; }

/* ---------- Navigation ---------- */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    transition: background-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}
.nav.is-stuck {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(15, 28, 31, 0.05);
}

.nav__inner {
    width: min(1180px, 100% - 48px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand img { width: 40px; height: 40px; border-radius: 11px; }
.brand__word {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    transition: color .28s ease;
}
.brand__word i { font-style: normal; color: var(--aqua-bright); }
.nav.is-stuck .brand__word { color: var(--navy-900); }
.nav.is-stuck .brand__word i { color: var(--aqua); }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
    padding: 9px 15px;
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    transition: color .2s ease, background-color .2s ease;
}
.nav__links a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.nav.is-stuck .nav__links a { color: var(--ink-muted); }
.nav.is-stuck .nav__links a:hover { color: var(--navy-900); background: var(--tint); }

.nav__cta {
    padding: 11px 22px;
    border-radius: var(--r-pill);
    font-size: 14px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #fff;
    transition: all .2s ease;
}
.nav__cta:hover { background: #fff; color: var(--navy-900); border-color: #fff; }
.nav.is-stuck .nav__cta {
    background: linear-gradient(100deg, var(--navy-900), var(--navy-500));
    border-color: transparent;
    color: #fff;
}

.nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
}
.nav__toggle span {
    position: absolute;
    left: 11px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .24s ease, opacity .18s ease, background-color .28s ease;
}
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 22px; }
.nav__toggle span:nth-child(3) { top: 28px; }
.nav.is-stuck .nav__toggle span { background: var(--navy-900); }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
    .nav__toggle { display: block; }
    .nav__menu {
        position: fixed;
        inset: var(--nav-h) 0 auto 0;
        background: rgba(6, 18, 39, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 20px 24px 32px;
        display: grid;
        gap: 6px;
        transform: translateY(-12px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease, transform .22s ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .nav.is-open .nav__menu { opacity: 1; transform: none; pointer-events: auto; }
    .nav__links { flex-direction: column; align-items: stretch; gap: 2px; }
    .nav__links a,
    .nav.is-stuck .nav__links a {
        color: rgba(255, 255, 255, 0.86);
        padding: 14px 16px;
        font-size: 17px;
    }
    .nav__cta,
    .nav.is-stuck .nav__cta {
        margin-top: 12px;
        text-align: center;
        background: var(--aqua);
        color: #04231F;
        border-color: transparent;
        padding: 15px;
    }
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    isolation: isolate;
    padding: calc(var(--nav-h) + clamp(64px, 9vw, 118px)) 0 clamp(96px, 11vw, 150px);
    background:
        radial-gradient(120% 90% at 82% 8%, rgba(11, 184, 162, 0.20), transparent 58%),
        radial-gradient(90% 80% at 8% 92%, rgba(52, 84, 138, 0.42), transparent 62%),
        linear-gradient(168deg, var(--navy-900) 0%, var(--navy-950) 62%, #030A19 100%);
    color: #fff;
    overflow: hidden;
}

/* Faint dot grid, so the flat navy has some depth without any imagery. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(70% 65% at 50% 30%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(70% 65% at 50% 30%, #000 30%, transparent 78%);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 8px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 26px;
}
.hero__badge b {
    background: var(--aqua);
    color: #04231F;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    padding: 3px 10px;
    border-radius: var(--r-pill);
}

.hero h1 { max-width: 12ch; }
.hero h1 em { font-style: normal; color: var(--aqua-bright); }

.hero__lede {
    margin-top: 24px;
    max-width: 52ch;
    font-size: clamp(17px, 1.7vw, 20px);
    color: rgba(255, 255, 255, 0.76);
}

.hero__actions {
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.hero__note {
    margin-top: 26px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
}

/* The hero artwork: an abstract spend line that draws itself into the
   silhouette of the mark. Not a screenshot, and nothing to keep in sync
   with the app's UI. */
.hero__art {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}

.hero__art-glow {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--aqua-glow), transparent 66%);
    filter: blur(28px);
}

.hero__rings { position: absolute; inset: 0; }
.hero__rings i {
    position: absolute;
    inset: 0;
    margin: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}
.hero__rings i:nth-child(1) { width: 96%; height: 96%; }
.hero__rings i:nth-child(2) { width: 74%; height: 74%; border-color: rgba(11, 184, 162, 0.16); }
.hero__rings i:nth-child(3) { width: 52%; height: 52%; }

/* The mark alone, lifted off its plate, so it glows against the navy
   instead of sitting on a darker square. */
.hero__logo {
    position: relative;
    width: min(78%, 400px);
    height: auto;
    filter: drop-shadow(0 22px 54px rgba(11, 184, 162, 0.32));
    animation: float 7s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

.hero__spark {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.hero__spark path {
    fill: none;
    stroke: var(--aqua-bright);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    opacity: .75;
    animation: draw 6s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes draw {
    0% { stroke-dashoffset: 700; opacity: 0; }
    14% { opacity: .8; }
    55% { stroke-dashoffset: 0; opacity: .8; }
    86%, 100% { stroke-dashoffset: -700; opacity: 0; }
}

/* Floating stat chips give the artwork something concrete to say. */
.chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 14px 34px rgba(3, 10, 25, 0.4);
    animation: float 8s ease-in-out infinite;
}
.chip small { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.chip strong { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.chip__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chip--a { top: 8%; left: -4%; animation-delay: -1.4s; }
.chip--b { bottom: 12%; right: -3%; animation-delay: -3.2s; }

@media (max-width: 980px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero h1 { max-width: 16ch; }
    .hero__art { max-width: 440px; margin-inline: auto; order: -1; }
    .chip--a { left: 0; }
    .chip--b { right: 0; }
}
@media (max-width: 560px) {
    .chip { display: none; }
    .hero__art { max-width: 300px; }
}

/* ---------- Trust bar ---------- */

.trust {
    background: var(--navy-950);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 26px 0;
    color: rgba(255, 255, 255, 0.7);
}
.trust ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px clamp(20px, 4vw, 52px);
    font-size: 14px;
    font-weight: 500;
}
.trust li { display: flex; align-items: center; gap: 10px; }
.trust svg { width: 17px; height: 17px; flex: none; color: var(--aqua); }

/* ---------- Feature cards ---------- */

/* 300px rather than 280: at the 1180px content width the smaller minimum
   fits four columns exactly, which leaves the six cards as 4 + 2. Three
   across reads as two even rows. */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.card {
    position: relative;
    padding: 32px 30px 34px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-raised);
    border-color: var(--tint-strong);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-muted); font-size: 15.5px; }

.card__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--tint);
    color: var(--navy-700);
    margin-bottom: 20px;
}
.card__icon svg { width: 26px; height: 26px; }
.card--accent .card__icon { background: rgba(11, 184, 162, 0.12); color: #068A79; }

.tag-pro {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    background: var(--navy-900);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    vertical-align: 3px;
}

/* ---------- How it works ---------- */

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    position: relative;
}

.step {
    position: relative;
    padding: 34px 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.step__n {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--navy-900), var(--navy-500));
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 20px;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--ink-muted); font-size: 15.5px; }

.flow {
    margin-top: 40px;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--r-xl);
    background: var(--navy-950);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: clamp(12px, 2vw, 26px);
}
.flow__node {
    padding: 20px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}
.flow__node svg { width: 26px; height: 26px; margin: 0 auto 12px; color: var(--aqua-bright); }
.flow__node strong { display: block; font-size: 15px; font-weight: 700; }
.flow__node span { display: block; margin-top: 5px; font-size: 13px; color: rgba(255, 255, 255, 0.58); line-height: 1.5; }
.flow__arrow { color: rgba(255, 255, 255, 0.3); }
.flow__arrow svg { width: 26px; height: 26px; }
.flow__caption {
    grid-column: 1 / -1;
    margin-top: 10px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

@media (max-width: 860px) {
    .flow { grid-template-columns: 1fr; }
    .flow__arrow { transform: rotate(90deg); justify-self: center; }
}

/* ---------- Privacy ---------- */

.privacy { position: relative; overflow: hidden; }
.privacy::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto auto;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(11, 184, 162, 0.14), transparent 62%);
    pointer-events: none;
}
.privacy .lede { color: rgba(255, 255, 255, 0.72); }

.claim {
    max-width: 20ch;
    font-size: clamp(30px, 4.6vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
}
.claim em { font-style: normal; color: var(--aqua-bright); }

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 12px;
}
.fact {
    padding: 28px 26px;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.11);
}
.fact h3 { font-size: 17px; margin-bottom: 9px; }
.fact p { font-size: 15px; color: rgba(255, 255, 255, 0.68); }
.fact__mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(11, 184, 162, 0.14);
    color: var(--aqua-bright);
    margin-bottom: 16px;
}
.fact__mark svg { width: 18px; height: 18px; }

.rights {
    margin-top: 34px;
    padding: 30px clamp(24px, 3vw, 36px);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.11);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 26px;
}
.rights > div h4 { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.rights > div p { font-size: 14px; color: rgba(255, 255, 255, 0.64); margin: 0; }

.privacy__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}
@media (max-width: 900px) { .privacy__grid { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */

.plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px;
    max-width: 880px;
    margin-inline: auto;
}

.plan {
    padding: 36px 32px 40px;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}
.plan__name { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.plan__price { margin: 14px 0 4px; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.plan__price small { font-size: 16px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0; }
.plan__meta { font-size: 14px; color: var(--ink-muted); min-height: 44px; }
.plan ul { margin: 26px 0 32px; display: grid; gap: 13px; }
.plan li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.plan li svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--income); }
.plan li.is-off { color: var(--ink-faint); }
.plan li.is-off svg { color: var(--line); }
.plan .btn { margin-top: auto; }

.plan--pro {
    background: linear-gradient(168deg, var(--navy-900), var(--navy-950));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-deep);
    position: relative;
}
.plan--pro .plan__name { color: var(--aqua-bright); }
/* "Monthly or yearly" is a phrase, not a figure, so it does not want the
   size a price wants. */
.plan--pro .plan__price { font-size: 30px; }
.plan--pro .plan__price small,
.plan--pro .plan__meta { color: rgba(255, 255, 255, 0.66); }
.plan--pro li svg { color: var(--aqua-bright); }

.plan__flag {
    position: absolute;
    top: 22px;
    right: 24px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    background: rgba(11, 184, 162, 0.16);
    color: var(--aqua-bright);
}

.plan__foot {
    max-width: 880px;
    margin: 26px auto 0;
    font-size: 13.5px;
    color: var(--ink-faint);
    text-align: center;
}

/* ---------- FAQ ---------- */

.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.faq details[open] { border-color: var(--tint-strong); box-shadow: var(--shadow-card); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16.5px;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    width: 11px;
    height: 11px;
    flex: none;
    border-right: 2px solid var(--ink-faint);
    border-bottom: 2px solid var(--ink-faint);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq .faq__body { padding: 0 24px 22px; color: var(--ink-muted); font-size: 15.5px; }
.faq .faq__body p + p { margin-top: 12px; }

/* ---------- Contact ---------- */

.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: start;
}
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

.contact__aside {
    padding: 34px 30px;
    border-radius: var(--r-xl);
    background: linear-gradient(168deg, var(--navy-900), var(--navy-950));
    color: #fff;
}
.contact__aside h3 { margin-bottom: 12px; }
.contact__aside > p { font-size: 15px; color: rgba(255, 255, 255, 0.68); }
.contact__aside ul { margin-top: 26px; display: grid; gap: 4px; }
.contact__aside a,
.contact__aside li > span {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    margin: 0 -14px;
    border-radius: var(--r-sm);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.86);
    transition: background-color .2s ease;
}
.contact__aside a:hover { background: rgba(255, 255, 255, 0.08); }
.contact__aside svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--aqua-bright); }

.form {
    padding: clamp(28px, 3.4vw, 40px);
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { margin-bottom: 18px; }
.field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 8px;
    color: var(--ink);
}
.field input,
.field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--sunk);
    font-size: 15.5px;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--navy-700);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(40, 68, 117, 0.10);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.field__hint { margin-top: 7px; font-size: 12.5px; color: var(--ink-faint); }

/* Honeypots. Off-screen rather than display:none, which some bots skip. */
.trap {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Above the button, not below it: telling someone what happens to their
   message after they have already sent it is not much of a notice. */
.form__legal {
    margin: 0 0 20px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-faint);
}
.form__legal a { color: var(--navy-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.form__status {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: var(--r-sm);
    font-size: 14.5px;
    font-weight: 600;
    display: none;
}
.form__status.is-ok { display: block; background: #E4F4EC; color: #12603D; border: 1px solid #BDE3CE; }
.form__status.is-bad { display: block; background: #FBEBE7; color: #93402E; border: 1px solid #F2CFC6; }

/* ---------- Footer ---------- */

.footer {
    background: var(--navy-950);
    color: rgba(255, 255, 255, 0.62);
    padding: clamp(56px, 6vw, 80px) 0 32px;
    font-size: 14.5px;
}
.footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }

.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer__brand img { width: 42px; height: 42px; border-radius: 12px; }
.footer__brand span { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.footer__brand i { font-style: normal; color: var(--aqua-bright); }
.footer__about { max-width: 34ch; font-size: 14.5px; }

.footer h4 {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    margin-bottom: 16px;
}
.footer li + li { margin-top: 10px; }
.footer li a { transition: color .18s ease; }
.footer li a:hover { color: var(--aqua-bright); }

.footer__bottom {
    padding-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.42);
}

/* ---------- Scroll reveal ---------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Back to top ---------- */

.totop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--navy-900);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    box-shadow: var(--shadow-raised);
    transition: opacity .24s ease, transform .24s ease;
}
.totop.is-on { opacity: 1; pointer-events: auto; transform: none; }
.totop svg { width: 18px; height: 18px; }