/* Veslate marketing site.
   One light ground, white cards, hairline borders, and a single teal accent
   taken from the application's own palette. */

:root {
    /* The brand palette, the same five colours the application draws from:
       SLATE #1E2933, CREAM #F4F6F8, VESLATE TEAL #2DD4C8, ACCENT CORAL #FF8A65,
       ACCENT GOLD #E6B663. The tints below are derived from those and nothing
       here is an invention of the website's. */
    --bg: #f4f6f8;
    --bg-deep: #e9edf1;
    --surface: #ffffff;
    --surface-sunken: #f7f9fb;
    --border: #e2e7ec;
    --border-strong: #cbd3da;

    --text: #1e2933;
    --text-soft: #4a5661;
    --muted: #6c7883;

    --brand-300: #7ee6dd;
    --brand-400: #2dd4c8;
    --brand-500: #22b3a8;
    --brand-600: #199289;
    --brand-700: #12716b;
    --accent: #ff8a65;
    --accent-deep: #e56a45;
    --gold: #e6b663;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 22px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 2px 6px rgba(16, 24, 40, .06);
    --shadow: 0 10px 30px rgba(16, 24, 40, .08);
    --shadow-lg: 0 26px 60px rgba(16, 24, 40, .14);

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --header-height: 68px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.022em; line-height: 1.15; }
h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); font-weight: 800; letter-spacing: -.032em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -.028em; }
h3 { font-size: 1.125rem; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* Content that reads better short, inside a section that is the same width as
   every other section. Narrowing the container instead moves the page's left and
   right edges from one section to the next, which is what made some sections
   look pinched beside their neighbours. */
.measure { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-height);
    background: rgba(238, 241, 246, .82);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, background .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--border); background: rgba(238, 241, 246, .94); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; }
/* 35 by 30 is the mark's own 168:145, not a square. A square box letterboxes
   it and the glyph reads noticeably smaller than the type beside it. */
.brand-mark { width: 35px; height: 30px; flex: none; }
.brand-name { font-size: 1.06rem; }
.brand-name span { color: var(--brand-600); }

.site-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.site-nav a {
    font-size: .925rem;
    font-weight: 500;
    color: var(--text-soft);
    transition: color .15s ease;
}
.site-nav a:hover { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.menu-toggle {
    display: none;
    margin-left: auto;
    width: 38px; height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    padding: 0;
    position: relative;
}
.menu-toggle span {
    position: absolute; left: 10px; width: 18px; height: 1.8px;
    background: var(--text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle span:nth-child(1) { top: 14px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 20px;
    border: 1px solid transparent; border-radius: 999px;
    font: inherit; font-size: .95rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.btn-primary {
    background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
    color: #fff;
    box-shadow: 0 6px 18px rgba(25, 146, 137, .3);
}
.btn-primary:hover { box-shadow: 0 10px 26px rgba(25, 146, 137, .38); }

.btn-ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { border-color: var(--border-strong); }

.btn-sm { height: 38px; padding: 0 16px; font-size: .9rem; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 1rem; }

/* ---------- hero ---------- */

.hero { padding: clamp(56px, 8vw, 104px) 0 0; }
.hero-inner { text-align: center; max-width: 800px; margin: 0 auto; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    height: 30px; padding: 0 14px 0 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    font-size: .8rem; font-weight: 600; letter-spacing: .01em;
    color: var(--text-soft);
}
.eyebrow b { color: var(--brand-700); font-weight: 700; }
.eyebrow::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(45, 212, 200, .25);
}

.hero h1 { margin: 22px 0 0; }
.hero h1 em {
    font-style: normal;
    background: linear-gradient(120deg, var(--brand-500), var(--brand-700));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead {
    margin: 20px auto 0;
    max-width: 620px;
    font-size: clamp(1.02rem, 1.6vw, 1.16rem);
    color: var(--text-soft);
}
.hero-actions { margin-top: 30px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero-note { margin-top: 14px; font-size: .85rem; color: var(--muted); }

/* the framed screenshot */
.shot {
    margin: clamp(38px, 6vw, 64px) auto 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.shot-bar {
    display: flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 15px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-sunken);
}
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.shot-bar b {
    margin-left: 10px; font-size: .74rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.shot img { width: 100%; }
.shot-caption {
    padding: 13px 18px;
    border-top: 1px solid var(--border);
    font-size: .84rem; color: var(--muted);
    background: var(--surface-sunken);
}

/* ---------- facts strip ---------- */

.facts { margin-top: clamp(38px, 5vw, 56px); }
.facts-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.fact { padding: 20px 22px; border-left: 1px solid var(--border); }
.fact:first-child { border-left: 0; }
.fact b { display: block; font-size: .95rem; }
.fact span { display: block; margin-top: 2px; font-size: .845rem; color: var(--muted); }

/* ---------- sections ---------- */

.section { padding: clamp(64px, 9vw, 108px) 0; }
.section-alt { background: var(--bg-deep); border-block: 1px solid var(--border); }

.section-head { max-width: 640px; }
.section-head.centred { margin: 0 auto; text-align: center; }
.section-tag {
    display: block; margin-bottom: 12px;
    font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-600);
}
.section-head p { margin-top: 14px; color: var(--text-soft); font-size: 1.04rem; }

.cards { display: grid; gap: 20px; margin-top: 42px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow-xs);
}
.card-icon {
    width: 40px; height: 40px; margin-bottom: 18px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: linear-gradient(140deg, rgba(79, 209, 197, .2), rgba(31, 154, 144, .12));
    color: var(--brand-700);
}
.card-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card p { margin-top: 9px; color: var(--text-soft); font-size: .95rem; }

/* split: copy beside a picture */
.split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 60px); align-items: center; }
.split.flip > :first-child { order: 2; }
.split-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.split-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-soft); font-size: .96rem; }
.split-list svg {
    flex: none; width: 19px; height: 19px; margin-top: 2px;
    fill: none; stroke: var(--brand-600); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.split-list b { color: var(--text); font-weight: 600; }

/* ---------- code and command blocks ---------- */

.command {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 16px 15px 20px;
    background: #101a24;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.command code {
    flex: 1; min-width: 0;
    font-family: var(--mono); font-size: .9rem; color: #dbe7ef;
    white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.command code::-webkit-scrollbar { display: none; }
.command code .prompt { color: #4fd1c5; user-select: none; }
.copy {
    flex: none; height: 34px; padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px;
    background: rgba(255, 255, 255, .06); color: #e6eef4;
    font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.copy:hover { background: rgba(255, 255, 255, .13); }
.copy.is-done { background: var(--brand-500); border-color: transparent; color: #04211f; }

.code-panel {
    background: #101a24; border-radius: var(--radius); box-shadow: var(--shadow);
    overflow: hidden;
}
.code-panel header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px; border-bottom: 1px solid rgba(255, 255, 255, .09);
    font-family: var(--mono); font-size: .78rem; color: #8ba3b4;
}
.code-panel pre {
    margin: 0; padding: 18px 20px; overflow-x: auto;
    font-family: var(--mono); font-size: .82rem; line-height: 1.65; color: #cddbe6;
}
.code-panel .k { color: #7fe0d6; }
.code-panel .s { color: #ffb59b; }
.code-panel .n { color: #b8c6f0; }

/* ---------- download ---------- */

.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.dl-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-xs);
}
.dl-card-head { display: flex; align-items: center; gap: 13px; }
.dl-logo {
    width: 42px; height: 42px; flex: none;
    display: grid; place-items: center;
    border-radius: 12px; background: var(--surface-sunken); border: 1px solid var(--border);
    color: var(--text-soft);
}
.dl-logo svg { width: 22px; height: 22px; }
.dl-card h3 { font-size: 1.05rem; }
.dl-card-head span { display: block; font-size: .85rem; color: var(--muted); }
.dl-meta {
    margin: 20px 0 22px; padding-top: 18px; border-top: 1px solid var(--border);
    display: grid; gap: 7px; font-size: .87rem; color: var(--text-soft);
}
.dl-meta div { display: flex; justify-content: space-between; gap: 16px; }
.dl-meta span { color: var(--muted); }
.dl-meta code { font-family: var(--mono); font-size: .78rem; }
.dl-card .btn { width: 100%; margin-top: auto; }
.dl-hint { margin-top: 12px; font-size: .8rem; color: var(--muted); text-align: center; }

.dl-empty {
    grid-column: 1 / -1; padding: 34px; text-align: center;
    border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted);
}

.checksum-note { margin-top: 26px; font-size: .85rem; color: var(--muted); }
.checksum-note code { font-family: var(--mono); }

/* ---------- signup ---------- */

.signup {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: clamp(30px, 5vw, 46px); text-align: center;
}
.signup-form { margin: 26px auto 0; max-width: 460px; display: flex; gap: 10px; }
.signup-form input {
    flex: 1; min-width: 0; height: 48px; padding: 0 16px;
    border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--surface-sunken); font: inherit; color: var(--text);
}
.signup-form input:focus { outline: 2px solid var(--brand-400); outline-offset: 1px; border-color: transparent; }
.form-note { margin-top: 14px; font-size: .88rem; min-height: 1.3em; color: var(--brand-700); }
.form-note.is-error { color: var(--accent-deep); }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--border); background: var(--bg-deep); }
.footer-inner { padding: 44px 0 34px; display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.footer-inner > div:first-child { margin-right: auto; max-width: 300px; }
.site-footer p { margin-top: 10px; font-size: .88rem; color: var(--muted); }
.footer-col { display: grid; gap: 9px; min-width: 140px; }
.footer-col b { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.footer-col a { font-size: .9rem; color: var(--text-soft); }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 18px 0 30px;
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
    font-size: .84rem; color: var(--muted);
}

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

/* Only hidden when scripting is available to bring it back. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
    .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .cards-3 { grid-template-columns: 1fr 1fr; }
    .facts-grid { grid-template-columns: 1fr 1fr; }
    .fact:nth-child(3) { border-left: 0; }
    .fact:nth-child(n + 3) { border-top: 1px solid var(--border); }
    .split { grid-template-columns: 1fr; }
    .split.flip > :first-child { order: 0; }
}

@media (max-width: 760px) {
    .menu-toggle { display: block; }
    .site-nav {
        position: absolute; top: var(--header-height); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px 24px 18px;
        background: var(--bg); border-bottom: 1px solid var(--border);
        display: none;
    }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--border); }
    .header-actions { display: none; }
    .cards-3, .cards-2, .dl-grid { grid-template-columns: 1fr; }
    .facts-grid { grid-template-columns: 1fr; }
    .fact { border-left: 0; }
    .fact + .fact { border-top: 1px solid var(--border); }
    .signup-form { flex-direction: column; }
    .signup-form .btn { width: 100%; }
    .shot-caption { font-size: .8rem; }
}