/* ==========================================================================
   screenpager.com — DigiRecord
   --------------------------------------------------------------------------
   Identity: ink dark, with a "record red" signature. The product is a recorder,
   so the record dot is the motif: it appears in the logo, on the buttons, and
   as the pulse in the hero. Indigo to violet carries over from the app's own
   brand mark, used for surfaces and depth rather than as the loud colour.
   ========================================================================== */

:root {
    /* ink */
    --ink-900: #06070C;
    --ink-850: #090B12;
    --ink-800: #0D1018;
    --ink-700: #12151F;
    --ink-600: #191D2A;
    --line: rgba(255, 255, 255, .07);
    --line-strong: rgba(255, 255, 255, .14);

    /* type */
    --fg: #F2F4F8;
    --fg-dim: #A7B0C0;
    --fg-faint: #6B7488;

    /* signature */
    --rec: #FF4D5A;
    --rec-glow: rgba(255, 77, 90, .45);
    --indigo: #6366F1;
    --violet: #A855F7;
    --cyan: #22D3EE;
    --green: #34D399;
    --amber: #FBBF24;

    --grad: linear-gradient(135deg, #6366F1 0%, #A855F7 55%, #FF4D5A 100%);
    --grad-soft: linear-gradient(135deg, rgba(99,102,241,.16), rgba(168,85,247,.10));

    /* Indirection so the light theme can swap surfaces without touching layout. */
    --page: var(--ink-900);
    --surface: var(--ink-850);
    --card: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
    --card-lift: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    --nav-bg: rgba(6, 7, 12, .72);
    --ghost-bg: rgba(255,255,255,.04);
    --ghost-bg-hover: rgba(255,255,255,.08);
    --ambient-1: rgba(99, 102, 241, .16);
    --ambient-2: rgba(255, 77, 90, .10);
    --grid-line: rgba(255,255,255,.022);
    --shot-shadow: 0 40px 100px rgba(0,0,0,.6);
    --link: #C7D2FE;

    --r: 12px;
    --r-lg: 20px;
    --wrap: 1160px;
    --font: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif;
    --mono: 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;
}

/* ==========================================================================
   Light theme. Same layout, different surfaces. The gradient and the record
   red carry across so the brand does not change with the lights.
   ========================================================================== */
:root[data-theme="light"] {
    --ink-900: #FBFCFE;
    --ink-850: #F3F5F9;
    --ink-800: #FFFFFF;
    --ink-700: #FFFFFF;
    --ink-600: #EEF1F6;
    --line: rgba(15, 23, 42, .10);
    --line-strong: rgba(15, 23, 42, .17);

    --fg: #0B1020;
    --fg-dim: #4A5568;
    --fg-faint: #78839A;

    --rec: #E11D48;
    --rec-glow: rgba(225, 29, 72, .35);

    --card: linear-gradient(180deg, #FFFFFF, #FBFCFE);
    --card-lift: linear-gradient(180deg, #FFFFFF, #F7F9FC);
    --nav-bg: rgba(251, 252, 254, .8);
    --ghost-bg: #FFFFFF;
    --ghost-bg-hover: #F3F5F9;
    --ambient-1: rgba(99, 102, 241, .13);
    --ambient-2: rgba(225, 29, 72, .08);
    --grid-line: rgba(15, 23, 42, .035);
    --shot-shadow: 0 24px 60px rgba(15, 23, 42, .14);
    --link: #4338CA;
    --grad-soft: linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.08));
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
    font-family: var(--font);
    background: var(--ink-900);
    color: var(--fg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Ambient light. Two soft pools so the page is not flat black. */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
      radial-gradient(760px 520px at 12% -8%, var(--ambient-1), transparent 62%),
      radial-gradient(680px 460px at 92% 4%, var(--ambient-2), transparent 60%);
}
/* Fine grid, barely visible, gives the dark surface some texture. */
body::after {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 68%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 68%);
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--fg); text-decoration: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 780px; }
.small { font-size: 13px; color: var(--fg-faint); }
.mono { font-family: var(--mono); white-space: nowrap; }

/* ==========================================================================
   nav
   ========================================================================== */
.nav {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 30px;
    padding: 14px 24px;
    background: var(--nav-bg);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
    position: relative; width: 30px; height: 30px; border-radius: 9px;
    background: var(--grad);
    display: grid; place-items: center;
    box-shadow: 0 4px 16px rgba(99, 102, 241, .4);
}
.brand-mark i {
    width: 9px; height: 9px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}
.brand-name { font-weight: 650; font-size: 17px; letter-spacing: -.02em; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--fg-dim); font-size: 14.5px; font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--fg); }

/* ==========================================================================
   buttons
   ========================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 12px 24px; border-radius: var(--r);
    font-size: 15px; font-weight: 600; letter-spacing: -.01em;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s;
    white-space: nowrap;
}
.btn-primary {
    background: var(--rec); color: #fff;
    box-shadow: 0 6px 24px rgba(255, 77, 90, .32);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(255, 77, 90, .42); }
.btn-primary .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.btn-ghost { background: var(--ghost-bg); color: var(--fg); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--ghost-bg-hover); border-color: var(--fg-faint); }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-lg { padding: 15px 32px; font-size: 16.5px; }
.btn-block { width: 100%; margin-top: auto; }

/* ==========================================================================
   hero
   ========================================================================== */
.hero { padding: 92px 0 40px; text-align: center; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 6px 15px 6px 11px; margin-bottom: 26px;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: rgba(255,255,255,.03);
    font-size: 12.5px; font-weight: 600; color: var(--fg-dim); letter-spacing: .01em;
}
.rec-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--rec);
    box-shadow: 0 0 0 0 var(--rec-glow);
    animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 var(--rec-glow); }
    70%  { box-shadow: 0 0 0 9px rgba(255, 77, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 90, 0); }
}
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }

.hero h1 {
    font-size: clamp(38px, 6.2vw, 66px); line-height: 1.05;
    letter-spacing: -.035em; font-weight: 700; margin-bottom: 22px;
}
.grad {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.lead { font-size: clamp(16px, 2vw, 19.5px); color: var(--fg-dim); max-width: 660px; margin: 0 auto 32px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--fg-faint); }

/* screenshot frame */
.shot {
    position: relative; margin: 64px auto 0; max-width: 1060px;
    border-radius: var(--r-lg); border: 1px solid var(--line-strong);
    background: var(--ink-800);
    box-shadow: var(--shot-shadow), 0 0 0 1px rgba(255,255,255,.03) inset;
    overflow: hidden;
}
.shot::before {
    content: ''; position: absolute; inset: -1px -1px auto; height: 2px;
    background: var(--grad); opacity: .8;
}
.shot-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 15px; border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.02);
}
.shot-bar s { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.shot-bar span { margin-left: 10px; font-size: 12px; color: var(--fg-faint); font-family: var(--mono); }
.shot img { width: 100%; height: auto; }
.shot-caption { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--fg-faint); }

/* ==========================================================================
   sections
   ========================================================================== */
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-line { border-top: 1px solid var(--line); }

.kicker {
    display: block; text-align: center; margin-bottom: 12px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    background: var(--grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
h2 {
    font-size: clamp(28px, 3.8vw, 42px); letter-spacing: -.03em;
    font-weight: 700; text-align: center; line-height: 1.15; margin-bottom: 16px;
}
.section-lead { text-align: center; color: var(--fg-dim); max-width: 640px; margin: 0 auto 56px; font-size: 16.5px; }

/* ==========================================================================
   how it works
   ========================================================================== */
.flow3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.flow3 article {
    padding: 30px 26px; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--card);
    position: relative;
}
.flow3 .n {
    display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 18px;
    border-radius: 11px; background: var(--grad-soft); border: 1px solid var(--line-strong);
    font-weight: 700; font-size: 15px; color: var(--fg);
}
.flow3 h3 { font-size: 19px; letter-spacing: -.015em; margin-bottom: 9px; }
.flow3 p { color: var(--fg-dim); font-size: 15px; }
.flow3 .out { margin-top: 16px; display: flex; gap: 7px; flex-wrap: wrap; }

.chip {
    padding: 4px 11px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
    font-family: var(--mono); border: 1px solid var(--line-strong);
}
.chip-i { color: #C7D2FE; background: rgba(99,102,241,.14); }
.chip-a { color: #FDE68A; background: rgba(251,191,36,.12); }
.chip-g { color: #A7F3D0; background: rgba(52,211,153,.12); }

/* ==========================================================================
   feature grid
   ========================================================================== */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
    padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--card);
    transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--line-strong); background: var(--card-lift); transform: translateY(-2px); }
.card .ico {
    width: 38px; height: 38px; border-radius: 10px; margin-bottom: 16px;
    display: grid; place-items: center;
    background: var(--grad-soft); border: 1px solid var(--line-strong);
}
.card .ico svg { width: 19px; height: 19px; stroke: #C7D2FE; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 16.5px; letter-spacing: -.015em; margin-bottom: 7px; }
.card p { font-size: 14.5px; color: var(--fg-dim); }

/* ==========================================================================
   split feature rows with screenshots
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; margin-bottom: 96px; }
.split:last-child { margin-bottom: 0; }
.split.rev > .split-text { order: 2; }
.split h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.025em; margin-bottom: 14px; line-height: 1.2; }
.split p { color: var(--fg-dim); font-size: 16px; margin-bottom: 18px; }
.split ul { list-style: none; display: grid; gap: 10px; }
.split li { padding-left: 26px; position: relative; font-size: 15px; color: var(--fg-dim); }
.split li::before {
    content: ''; position: absolute; left: 0; top: 9px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--rec);
}
.split .shot { margin: 0; max-width: none; }

/* ==========================================================================
   pricing
   ========================================================================== */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan {
    display: flex; flex-direction: column; position: relative;
    padding: 32px 28px; border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--card);
}
.plan-featured {
    border-color: rgba(255, 77, 90, .5);
    background: linear-gradient(180deg, rgba(255,77,90,.09), rgba(255,255,255,.015));
    box-shadow: 0 22px 60px rgba(255, 77, 90, .12);
}
.tag {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    padding: 5px 14px; border-radius: 999px; background: var(--rec); color: #fff;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.plan h3 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 4px; }
.plan .who { font-size: 13.5px; color: var(--fg-faint); margin-bottom: 20px; }
.price { display: flex; align-items: baseline; gap: 3px; }
.price .cur { font-size: 21px; font-weight: 600; color: var(--fg-dim); }
.price .amt { font-size: 48px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.price-note { color: var(--fg-faint); font-size: 13.5px; margin: 8px 0 24px; }
.plan ul { list-style: none; display: grid; gap: 11px; margin-bottom: 28px; }
.plan li { font-size: 14.5px; padding-left: 26px; position: relative; color: var(--fg-dim); }
.plan li.y::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.plan li.n { color: var(--fg-faint); opacity: .62; }
.plan li.n::before { content: '—'; position: absolute; left: 0; color: var(--fg-faint); }

.buy {
    margin-top: 48px; padding: 34px; text-align: center;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(99,102,241,.09), rgba(255,255,255,.012));
}
.buy h3 { font-size: 19px; margin-bottom: 10px; letter-spacing: -.02em; }
.buy p { color: var(--fg-dim); max-width: 580px; margin: 0 auto 18px; font-size: 15.5px; }

/* ==========================================================================
   spec strip
   ========================================================================== */
.spec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line);
        border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.spec div { background: var(--ink-850); padding: 26px 22px; }
.spec dt { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-faint); margin-bottom: 8px; }
.spec dd { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.spec dd small { display: block; font-size: 13px; font-weight: 400; color: var(--fg-dim); margin-top: 3px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.qa { border-top: 1px solid var(--line); padding: 24px 0; }
.qa:last-of-type { border-bottom: 1px solid var(--line); }
.qa h3 { font-size: 17px; letter-spacing: -.015em; margin-bottom: 8px; }
.qa p { color: var(--fg-dim); font-size: 15.5px; }
.qa a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   CTA + footer
   ========================================================================== */
.cta {
    text-align: center; padding: 96px 0;
    border-top: 1px solid var(--line);
    background: radial-gradient(700px 320px at 50% 0%, rgba(255,77,90,.13), transparent 70%);
}
.cta p { color: var(--fg-dim); margin-bottom: 30px; font-size: 17px; }

.footer { border-top: 1px solid var(--line); padding: 52px 0 30px; background: var(--ink-850); }
.footer-inner { display: flex; justify-content: space-between; gap: 44px; flex-wrap: wrap; }
.footer .small { max-width: 400px; margin-top: 10px; }
.footer-links { display: flex; gap: 40px; flex-wrap: wrap; }
.footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-faint); margin-bottom: 12px; }
.footer-col a { display: block; color: var(--fg-dim); font-size: 14.5px; padding: 4px 0; }
.footer-col a:hover { color: var(--fg); }
.footer-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ==========================================================================
   legal pages
   ========================================================================== */
.doc { padding: 60px 0 88px; }
.doc h1 { font-size: 38px; letter-spacing: -.03em; margin-bottom: 8px; }
.doc .updated { color: var(--fg-faint); font-size: 14px; margin-bottom: 32px; }
.doc h2 { font-size: 20px; text-align: left; margin: 34px 0 10px; letter-spacing: -.02em; }
.doc p, .doc li { color: var(--fg-dim); font-size: 15.5px; }
.doc a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.doc ul { margin: 12px 0 12px 22px; display: grid; gap: 8px; }
.notice {
    padding: 17px 19px; border-radius: var(--r); margin-bottom: 32px;
    background: rgba(251, 191, 36, .09); border: 1px solid rgba(251, 191, 36, .3);
    color: #FDE68A; font-size: 14.5px;
}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1000px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
    .flow3, .plans { grid-template-columns: 1fr; }
    .plan-featured { order: -1; }
    .split { grid-template-columns: 1fr; gap: 32px; margin-bottom: 68px; }
    .split.rev > .split-text { order: 0; }
    .spec { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 660px) {
    .nav { padding: 12px 16px; gap: 12px; }
    .nav-links { display: none; }
    .grid { grid-template-columns: 1fr; }
    .hero { padding: 62px 0 30px; }
    .section { padding: 66px 0; }
    .spec { grid-template-columns: 1fr; }
    .footer-links { gap: 28px; }
}

/* ==========================================================================
   theme toggle
   --------------------------------------------------------------------------
   A slider, not a button, so the two states are visible at once. Follows the
   system preference until the visitor expresses one, which is then remembered.
   ========================================================================== */
.theme-toggle {
    position: relative; flex: none;
    width: 58px; height: 30px; padding: 0;
    border-radius: 999px; cursor: pointer;
    background: var(--ghost-bg);
    border: 1px solid var(--line-strong);
    transition: background .2s ease, border-color .2s ease;
}
.theme-toggle:hover { border-color: var(--fg-faint); }

/* The travelling knob. */
.theme-toggle .knob {
    position: absolute; top: 2px; left: 2px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--grad);
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
:root[data-theme="light"] .theme-toggle .knob { transform: translateX(28px); }

.theme-toggle svg {
    position: absolute; top: 50%; width: 14px; height: 14px;
    transform: translateY(-50%);
    stroke: var(--fg-faint); fill: none; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
    transition: opacity .2s ease;
}
.theme-toggle .i-moon { right: 7px; }
.theme-toggle .i-sun { left: 7px; }
/* Dim whichever icon the knob is covering. */
:root:not([data-theme="light"]) .theme-toggle .i-sun { opacity: 0; }
:root[data-theme="light"] .theme-toggle .i-moon { opacity: 0; }

@media (prefers-reduced-motion: reduce) { .theme-toggle .knob { transition: none; } }

/* The screenshots are of a light-themed application, so on a dark page they
   benefit from a slightly softened edge rather than glaring white. */
:root:not([data-theme="light"]) .shot img { filter: saturate(1.02) brightness(.97); }

@media (max-width: 660px) {
    .theme-toggle { width: 52px; height: 28px; }
    .theme-toggle .knob { width: 22px; height: 22px; }
    :root[data-theme="light"] .theme-toggle .knob { transform: translateX(24px); }
}