/* ==========================================================================
   ChillDown — "Iris & Ink" design system
   A single, self-contained stylesheet for the public website.
   It replaces the previously stacked stylesheets so every measurement comes
   from one predictable cascade. Page structure, ids and JS hooks are untouched.

   01. Tokens
   02. Reset & base
   03. Layout primitives
   04. Typography
   05. Buttons & links
   06. Forms
   07. Chrome: alert bar, navbar, drawer, footer
   08. Home page
   09. Auth pages (signin / signup / create-account)
   10. Purchase pages
   11. Account page
   12. Terms page
   13. Compatibility check
   14. Maintenance & 404
   15. Runtime widgets (toasts, modals, overlays)
   16. Motion preferences
   ========================================================================== */

/* ==========================================================================
   01. Tokens
   ========================================================================== */

:root {
    color-scheme: dark;

    /* Brand ---------------------------------------------------------- */
    --iris-400: #8d95ff;
    --iris-500: #6e7bff;
    --iris-600: #5a63f0;
    --violet-500: #9b7bff;

    /* Surfaces & ink (dark is the default theme) ---------------------- */
    --bg: #0a0c12;
    --bg-tint: #0d1017;
    --surface: #12151e;
    --surface-2: #171b26;
    --surface-3: #1d2230;
    --line: rgba(255, 255, 255, 0.075);
    --line-strong: rgba(255, 255, 255, 0.14);
    --ink: #edeff5;
    --ink-2: #a6adbe;
    --ink-3: #737b8d;

    --accent: var(--iris-500);
    --accent-hover: var(--iris-400);
    --accent-soft: rgba(110, 123, 255, 0.13);
    --accent-line: rgba(110, 123, 255, 0.30);
    --accent-grad: linear-gradient(135deg, #5a63f0, #9b7bff);

    --success: #35d39b;
    --success-soft: rgba(53, 211, 155, 0.12);
    --warning: #f2b64c;
    --warning-soft: rgba(242, 182, 76, 0.12);
    --danger: #f26a75;
    --danger-soft: rgba(242, 106, 117, 0.12);
    --telegram: #35a6e0;

    /* Elevation ------------------------------------------------------ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.28), 0 14px 34px -18px rgba(0, 0, 0, 0.75);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.30), 0 32px 64px -28px rgba(0, 0, 0, 0.80);
    --ring: 0 0 0 3px rgba(110, 123, 255, 0.28);
    --glow: 0 14px 30px -14px rgba(110, 123, 255, 0.70);

    /* Geometry ------------------------------------------------------- */
    --r-xs: 8px;
    --r-sm: 11px;
    --r-md: 15px;
    --r-lg: 20px;
    --r-xl: 26px;
    --r-full: 999px;

    --gutter: clamp(1.15rem, 3.4vw, 2.25rem);
    --page-max: 1180px;
    --section-y: clamp(3.5rem, 6.2vw, 6.5rem);
    --stack: clamp(1.75rem, 3.4vw, 3rem);

    /* Type ----------------------------------------------------------- */
    --font: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

    --fs-display: clamp(2.05rem, 1.15rem + 3.6vw, 3.6rem);
    --fs-h1: clamp(1.8rem, 1.15rem + 2.5vw, 2.9rem);
    --fs-h2: clamp(1.45rem, 1.08rem + 1.55vw, 2.15rem);
    --fs-h3: clamp(1.1rem, 0.99rem + 0.5vw, 1.35rem);
    --fs-h4: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
    --fs-body: clamp(0.95rem, 0.91rem + 0.2vw, 1.04rem);
    --fs-sm: 0.875rem;
    --fs-xs: 0.79rem;

    --nav-h: 68px;

    --ease: cubic-bezier(0.32, 0.72, 0.29, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 0.24s;

    /* Reading direction, resolved once and reused by every directional effect.
       --flow is +1 when "forward" means moving left on screen (RTL). */
    --flow: 1;
    --flow-origin: right;
    --flow-from: 160% 0;
    --flow-to: -60% 0;
    --progress-origin: right;
}

html[dir="ltr"] {
    --flow: -1;
    --flow-origin: left;
    --flow-from: -60% 0;
    --flow-to: 160% 0;
    --progress-origin: left;
}

[data-theme="light"] {
    color-scheme: light;

    --bg: #f6f7fa;
    --bg-tint: #f1f3f8;
    --surface: #ffffff;
    --surface-2: #fbfcfe;
    --surface-3: #f2f4f9;
    --line: rgba(17, 22, 38, 0.085);
    --line-strong: rgba(17, 22, 38, 0.16);
    --ink: #151925;
    --ink-2: #555d70;
    --ink-3: #838b9c;

    --accent: #4f5be0;
    --accent-hover: #414ed6;
    --accent-soft: rgba(79, 91, 224, 0.09);
    --accent-line: rgba(79, 91, 224, 0.24);
    --accent-grad: linear-gradient(135deg, #4f5be0, #7a57e8);

    --success: #12a97a;
    --success-soft: rgba(18, 169, 122, 0.10);
    --warning: #b57b12;
    --warning-soft: rgba(181, 123, 18, 0.10);
    --danger: #d94452;
    --danger-soft: rgba(217, 68, 82, 0.09);
    --telegram: #1e8fcc;

    --shadow-sm: 0 1px 2px rgba(19, 24, 40, 0.05);
    --shadow-md: 0 1px 3px rgba(19, 24, 40, 0.05), 0 12px 28px -16px rgba(19, 24, 40, 0.22);
    --shadow-lg: 0 2px 6px rgba(19, 24, 40, 0.06), 0 30px 60px -30px rgba(19, 24, 40, 0.30);
    --ring: 0 0 0 3px rgba(79, 91, 224, 0.20);
    --glow: 0 14px 30px -14px rgba(79, 91, 224, 0.55);
}

/* ==========================================================================
   02. Reset & base
   ========================================================================== */

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

* { margin: 0; }

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

body {
    min-height: 100vh;
    font-family: var(--font);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.75;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* A calm aurora wash behind every page. Fixed, so it never affects layout. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(58rem 32rem at 78% -12%, rgba(110, 123, 255, 0.16), transparent 62%),
        radial-gradient(46rem 28rem at 8% 4%, rgba(155, 123, 255, 0.11), transparent 60%),
        radial-gradient(40rem 30rem at 50% 108%, rgba(53, 211, 155, 0.06), transparent 62%);
}

[data-theme="light"] body::before {
    background:
        radial-gradient(58rem 32rem at 78% -12%, rgba(79, 91, 224, 0.10), transparent 62%),
        radial-gradient(46rem 28rem at 8% 4%, rgba(122, 87, 232, 0.07), transparent 60%),
        radial-gradient(40rem 30rem at 50% 108%, rgba(18, 169, 122, 0.05), transparent 62%);
}

img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }

ul, ol { padding: 0; list-style: none; }

table { border-collapse: collapse; width: 100%; }

hr { border: none; border-top: 1px solid var(--line); }

::selection { background: var(--accent-soft); color: var(--ink); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Scrollbars ------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--r-full);
    border: 3px solid transparent;
    background-clip: content-box;
}

/* Language swap should never flash half-translated copy. ------------------ */
html.i18n-pending body { opacity: 0; }
html.theme-refresh * { transition: none !important; }

/* ==========================================================================
   03. Layout primitives
   ========================================================================== */

.container {
    width: 100%;
    max-width: calc(var(--page-max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

section { position: relative; }

/* Grid and flex items default to `min-width: auto`, so one wide child (a table,
   a licence key, a code block) can push its track past the viewport. Opting
   every layout child out of that is what keeps the page from scrolling
   sideways on narrow screens. */
.account-container > *,
.compatibility-container > *,
.payment-wrapper > *,
.signup-container > *,
.footer-content > *,
.features-grid > *,
.reasons-grid > *,
.pricing-grid > *,
.steps-horizontal > *,
.faq-grid > *,
.terms-content > *,
.licenses-grid > *,
.form-grid > *,
.screenshot-showcase > *,
.plan-selector > * { min-width: 0; }

.hero,
.features,
.pricing,
.how-it-works,
.why-choose,
.all-features,
.cta,
.tutorial-videos,
.tool-screenshot-section,
.faq-section,
.payment-section,
.purchase-hero,
.features-section,
.account-section,
.terms-section,
.compatibility-section,
.signup-section {
    padding-block: var(--section-y);
}

.section-header {
    max-width: 46rem;
    margin-inline: auto;
    margin-block-end: var(--stack);
    text-align: center;
}

.section-header h2 { margin-block-end: 0.6rem; }

.section-header p {
    color: var(--ink-2);
    font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
}

/* A quiet hairline flourish under section titles. */
.section-header h2::after {
    content: "";
    display: block;
    width: 3rem;
    height: 2px;
    margin: 0.85rem auto 0;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.section-title {
    text-align: center;
    margin-block-end: var(--stack);
    font-size: var(--fs-h2);
}

/* ==========================================================================
   04. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}

h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-sm); }

strong, b { font-weight: 700; color: var(--ink); }

small { font-size: var(--fs-xs); }

code { font-family: var(--font-mono); font-size: 0.85em; }

.gradient-text {
    background: linear-gradient(112deg, var(--accent) 0%, var(--violet-500) 55%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[data-theme="light"] .gradient-text {
    background: linear-gradient(112deg, #4f5be0 0%, #7a57e8 55%, #4f5be0 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ==========================================================================
   05. Buttons & links
   ========================================================================== */

a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--accent-hover); }

.btn,
.btn-purchase,
.btn-cta-primary,
.btn-submit,
.btn-payment,
.btn-verify,
.check-btn,
.btn-back,
.btn-404,
.copy-btn,
.copy-link-btn,
.purchase-link,
.purchase-link-btn,
.renew-btn,
.alert-btn,
.telegram-button,
.btn-tg,
.btn-mail,
.btn-account,
.btn-retry,
.dohaplus-btn {
    --btn-bg: var(--surface-2);
    --btn-ink: var(--ink);
    --btn-line: var(--line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.72rem 1.4rem;
    border: 1px solid var(--btn-line);
    border-radius: var(--r-full);
    background: var(--btn-bg);
    color: var(--btn-ink);
    font-family: var(--font);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn:hover,
.btn-purchase:hover,
.btn-cta-primary:hover,
.btn-submit:hover,
.btn-payment:hover,
.btn-verify:hover,
.check-btn:hover,
.btn-back:hover,
.btn-404:hover,
.copy-btn:hover,
.copy-link-btn:hover,
.purchase-link:hover,
.purchase-link-btn:hover,
.renew-btn:hover,
.alert-btn:hover,
.telegram-button:hover,
.btn-tg:hover,
.btn-mail:hover,
.btn-account:hover,
.btn-retry:hover,
.dohaplus-btn:hover { transform: translateY(-2px); }

.btn:active,
.btn-purchase:active,
.btn-submit:active,
.btn-payment:active,
.check-btn:active { transform: translateY(0); }

/* Primary — the one saturated surface on the page. */
.btn-primary,
.btn-purchase,
.btn-cta-primary,
.btn-submit,
.btn-payment,
.btn-verify,
.check-btn,
.btn-404-primary,
.purchase-link,
.purchase-link-btn,
.renew-btn,
.btn-account,
.dohaplus-btn {
    --btn-bg: var(--accent-grad);
    --btn-ink: #fff;
    --btn-line: transparent;
    color: #fff;
}

.btn-primary:hover,
.btn-purchase:hover,
.btn-cta-primary:hover,
.btn-submit:hover,
.btn-payment:hover,
.btn-verify:hover,
.check-btn:hover,
.btn-404-primary:hover,
.purchase-link:hover,
.purchase-link-btn:hover,
.renew-btn:hover,
.btn-account:hover,
.dohaplus-btn:hover { box-shadow: var(--glow); color: #fff; }

/* Secondary / ghost */
.btn-secondary,
.btn-404-secondary,
.btn-back,
.btn-mail,
.btn-retry {
    --btn-bg: transparent;
    --btn-ink: var(--ink);
    --btn-line: var(--line-strong);
}

.btn-secondary:hover,
.btn-404-secondary:hover,
.btn-back:hover,
.btn-mail:hover,
.btn-retry:hover {
    --btn-bg: var(--surface-2);
    border-color: var(--accent-line);
    color: var(--ink);
}

/* Full-width form actions */
.btn-submit,
.btn-payment,
.btn-verify,
.check-btn {
    width: 100%;
    padding-block: 0.95rem;
    font-size: 1rem;
    border-radius: var(--r-md);
}

.btn-submit:disabled,
.btn-payment:disabled,
.check-btn:disabled,
.btn-verify:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Small utility buttons */
.copy-btn,
.copy-link-btn {
    padding: 0.42rem 0.9rem;
    font-size: var(--fs-xs);
    border-radius: var(--r-sm);
}

/* Telegram */
.telegram-button,
.btn-tg {
    --btn-bg: color-mix(in srgb, var(--telegram) 14%, transparent);
    --btn-ink: var(--telegram);
    --btn-line: color-mix(in srgb, var(--telegram) 34%, transparent);
}

.telegram-button:hover,
.btn-tg:hover {
    --btn-bg: color-mix(in srgb, var(--telegram) 22%, transparent);
    color: var(--telegram);
}

.telegram-link { display: inline-flex; align-items: center; gap: 0.45rem; }
.telegram-link i { color: var(--telegram); }

/* Navbar auth pill */
.btn-signup {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1.15rem;
    border-radius: var(--r-full);
    background: var(--accent-grad);
    color: #fff !important;
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn-signup:hover { transform: translateY(-1px); box-shadow: var(--glow); }

.btn-signup.logout-btn,
.nav-logout-btn { background: linear-gradient(135deg, #e2555f, #cf3f4c); }
.btn-signup.logout-btn:hover,
.nav-logout-btn:hover { box-shadow: 0 12px 26px -14px rgba(217, 68, 82, 0.9); }

/* ==========================================================================
   06. Forms
   ========================================================================== */

.form-group { margin-block-end: 1.35rem; }

.form-group > label,
.specs-form label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 0.5rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
}

.form-group > label i,
.specs-form label i { color: var(--accent); font-size: 0.9em; }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 0.82rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
    appearance: none;
}

input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
    background: var(--surface);
}

input:disabled, select:disabled { opacity: 0.6; cursor: not-allowed; }

select,
.form-select {
    padding-inline-end: 2.6rem;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: left 1.15rem top 55%, left 0.85rem top 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

html[dir="ltr"] select,
html[dir="ltr"] .form-select {
    background-position: right 0.85rem top 55%, right 1.15rem top 55%;
}

select option, select optgroup { background: var(--surface); color: var(--ink); }

.input-hint {
    display: block;
    margin-block-start: 0.5rem;
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--ink-3);
}

/* Input with a leading icon ---------------------------------------------- */
.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-group > i {
    position: absolute;
    inset-inline-start: 1rem;
    color: var(--ink-3);
    font-size: 0.95rem;
    pointer-events: none;
    transition: color var(--dur) var(--ease);
}

.input-group input { padding-inline-start: 2.85rem; }
.input-group:focus-within > i { color: var(--accent); }

/* Phone inputs ----------------------------------------------------------- */
.phone-input-wrapper,
.phone-input,
.phone-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.34rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface-2);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.phone-input-wrapper { padding-inline-start: 0.85rem; }

.phone-input-wrapper:focus-within,
.phone-input:focus-within,
.phone-input-group:focus-within {
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.phone-input-wrapper input,
.phone-input input,
.phone-input-group input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.5rem 0.6rem;
    letter-spacing: 0.04em;
}

.phone-input-wrapper input:focus,
.phone-input input:focus,
.phone-input-group input:focus { box-shadow: none; background: transparent; }

.phone-input-wrapper img,
.country-code img {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
}

.country-code {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.5rem 0.8rem;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink-2);
    direction: ltr;
}

.country-code .flag { font-size: 1rem; line-height: 1; }

/* Checkboxes ------------------------------------------------------------- */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.checkbox-group > label {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.7;
    color: var(--ink-2);
}

.checkbox-group > input[type="checkbox"] { margin-block-start: 0.35rem; }

input[type="checkbox"],
input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    appearance: auto;
}

/* Custom checkmark variant used on the purchase forms */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    cursor: pointer;
    font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkmark {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-block-start: 0.22rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 6px;
    background: var(--surface-2);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.checkmark::after {
    content: "";
    position: absolute;
    inset-inline-start: 6.5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0.4);
    opacity: 0;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}

.checkbox-label input:checked ~ .checkmark { background: var(--accent); border-color: var(--accent); }
.checkbox-label input:checked ~ .checkmark::after { opacity: 1; transform: rotate(45deg) scale(1); }
.checkbox-label input:focus-visible ~ .checkmark { box-shadow: var(--ring); }

.checkbox-text { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-2); }
.checkbox-text a,
.checkbox-group a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   07. Chrome: alert bar, navbar, drawer, footer
   ========================================================================== */

/* --- Notice strip pinned above the navbar (alert-bar.js measures it) ----- */
.windows-alert {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1000;
    background: var(--warning-soft);
    border-block-end: 1px solid color-mix(in srgb, var(--warning) 26%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

[data-theme="dark"] .windows-alert { background: rgba(30, 24, 10, 0.86); }
[data-theme="light"] .windows-alert { background: rgba(255, 250, 240, 0.92); }

.windows-alert .container { padding-block: 0.5rem; }

.alert-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-content > i {
    flex-shrink: 0;
    color: var(--warning);
    font-size: 0.95rem;
}

.alert-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    flex: 1;
    min-width: 0;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--ink-2);
}

.alert-text strong { color: var(--warning); }

.alert-btn {
    --btn-bg: color-mix(in srgb, var(--warning) 16%, transparent);
    --btn-ink: var(--warning);
    --btn-line: color-mix(in srgb, var(--warning) 34%, transparent);
    padding: 0.4rem 0.85rem;
    font-size: var(--fs-xs);
}

.alert-btn:hover { --btn-bg: color-mix(in srgb, var(--warning) 24%, transparent); color: var(--warning); }

.alert-close {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-full);
    color: var(--ink-3);
    font-size: 0.8rem;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.alert-close:hover { background: var(--surface-3); color: var(--ink); }

/* --- Navbar ------------------------------------------------------------- */
/* Sticky (in flow) so alert-bar.js only reserves the alert height and the
   page never gets a phantom gap or an overlapped first section. */
.navbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 900;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-block-end: 1px solid var(--line);
    transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.navbar.scrolled { box-shadow: var(--shadow-md); }

.navbar .container {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.6vw, 1.25rem);
    min-height: var(--nav-h);
    padding-block: 0.6rem;
}

/* The brand absorbs the free space so the menu, the theme/language controls and
   the hamburger always sit together at the end, whatever order the scripts
   inject them in. */
.nav-brand { order: 0; margin-inline-end: auto; }
.nav-menu { order: 1; }
.site-controls,
.home-controls { order: 2; }
.mobile-menu-toggle { order: 3; }

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.nav-brand .custom-lock-logo { display: grid; place-items: center; }
.nav-brand .lock-svg { width: 30px; height: 35px; }
.nav-brand .logo-icon { font-size: 1.4rem; color: var(--accent); }

/* Keyholes are drawn with a hard-coded dark fill in the markup; recolour them
   so the mark stays legible on the light theme too. */
[data-theme="light"] .keyhole-circle,
[data-theme="light"] .keyhole-slot { fill: #f6f7fa; }

/* Menu ------------------------------------------------------------------- */
.nav-menu {
    display: flex;
    align-items: center;
    gap: clamp(0.15rem, 0.9vw, 0.5rem);
    list-style: none;
}

.nav-menu > li { display: flex; }

.nav-menu > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--r-full);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav-menu > li > a:hover { color: var(--ink); background: var(--surface-2); }
.nav-menu > li > a.btn-signup:hover { background: var(--accent-grad); }

/* Theme / language controls (injected by site-theme.js or home-redesign.js) */
.site-controls,
.home-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.2rem;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    background: var(--surface-2);
}

.site-control,
.home-control {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--ink-2);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.site-control:hover,
.home-control:hover { background: var(--surface-3); color: var(--ink); }

.site-controls-floating {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    z-index: 950;
    box-shadow: var(--shadow-md);
    background: var(--surface);
}

/* Hamburger (created by mobile-menu.js) ---------------------------------- */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 10px;
    margin-inline-start: 0.35rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: var(--r-full);
    background: var(--ink);
    transition: transform var(--dur) var(--ease), opacity 0.15s linear;
}

.mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(4, 6, 12, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.menu-overlay.active { opacity: 1; visibility: visible; }

/* The drawer hides the hamburger while it is open, so the dimmed strip shows a
   close button of its own. Clicking anywhere on the overlay already closes. */
.menu-overlay::after {
    content: "";
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.14)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")
        center / 16px 16px no-repeat;
}

/* Drawer mode. mobile-menu.js relocates .nav-menu to <body> at <= 1320px,
   so these rules must stand on their own without a .navbar ancestor. */
@media (max-width: 1320px) {
    .mobile-menu-toggle { display: flex; }

    .nav-menu {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: 1200;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        width: min(320px, 80vw);
        margin: 0;
        padding: calc(var(--nav-h) + 1.5rem) 1.25rem 2rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--surface);
        border-inline-start: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        transform: translateX(var(--drawer-hidden, 110%));
        /* Parked off-canvas is not the same as gone: without these the closed
           drawer keeps taking tab focus and stays exposed to screen readers.
           visibility flips only after the slide-out finishes, so the panel is
           still animated on the way out. */
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.32s var(--ease), visibility 0s linear 0.32s;
    }

    html[dir="rtl"] .nav-menu { --drawer-hidden: -110%; }
    html[dir="ltr"] .nav-menu { --drawer-hidden: 110%; }

    .nav-menu.active {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.32s var(--ease), visibility 0s;
    }

    .nav-menu > li { width: 100%; }

    .nav-menu > li > a {
        width: 100%;
        justify-content: flex-start;
        padding: 0.85rem 1rem;
        border-radius: var(--r-sm);
        font-size: 0.95rem;
    }

    .nav-menu > li > a.btn-signup,
    .nav-menu > li > a.nav-account-btn {
        justify-content: center;
        margin-block-start: 0.85rem;
        padding-block: 0.85rem;
    }
}

@media (min-width: 1321px) {
    .nav-menu { transform: none !important; }
}

/* --- Footer ------------------------------------------------------------- */
.footer {
    margin-block-start: var(--section-y);
    padding-block: clamp(2.5rem, 5vw, 4rem) 0;
    border-block-start: 1px solid var(--line);
    background: var(--bg-tint);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(1.75rem, 4vw, 3rem);
    padding-block-end: clamp(2rem, 4vw, 3rem);
}

.footer-section h4 {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-block-end: 0.6rem;
}

.footer-section h5 {
    margin-block-end: 1rem;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.footer-section p { font-size: var(--fs-sm); line-height: 1.85; color: var(--ink-2); }

.footer-section ul { display: grid; gap: 0.55rem; }

.footer-section ul a {
    font-size: var(--fs-sm);
    color: var(--ink-2);
    transition: color var(--dur) var(--ease), padding-inline-start var(--dur) var(--ease);
}

.footer-section ul a:hover { color: var(--accent); padding-inline-start: 0.3rem; }

.contact-methods { margin-block-start: 1rem; display: grid; gap: 0.75rem; justify-items: start; }
.contact-methods p { display: flex; align-items: center; gap: 0.55rem; margin: 0; }
.contact-methods p i { color: var(--accent); }
.contact-methods a:not(.telegram-button) {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    color: var(--ink-2);
}
.contact-methods a:not(.telegram-button):hover { color: var(--accent); }

.footer-bottom {
    padding-block: 1.35rem;
    border-block-start: 1px solid var(--line);
    text-align: center;
}

.footer-bottom p { font-size: var(--fs-xs); color: var(--ink-3); }

/* ==========================================================================
   08. Home page
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */
.hero {
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(3rem, 6vw, 5.5rem);
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.55;
}

/* Soft radial fills rather than blur() filters: the hero background is
   transform-parallaxed on scroll, and a large blurred layer repaints every
   frame. Gradients give the same softness for none of the cost. */
.shape-1 {
    width: clamp(20rem, 42vw, 38rem);
    aspect-ratio: 1;
    inset-block-start: -16%;
    inset-inline-end: -10%;
    background: radial-gradient(circle closest-side, rgba(110, 123, 255, 0.32), rgba(110, 123, 255, 0) 72%);
}

.shape-2 {
    width: clamp(16rem, 32vw, 29rem);
    aspect-ratio: 1;
    inset-block-end: -22%;
    inset-inline-start: -8%;
    background: radial-gradient(circle closest-side, rgba(155, 123, 255, 0.28), rgba(155, 123, 255, 0) 72%);
}

.shape-3 {
    width: clamp(12rem, 24vw, 21rem);
    aspect-ratio: 1;
    inset-block-start: 42%;
    inset-inline-start: 42%;
    background: radial-gradient(circle closest-side, rgba(53, 211, 155, 0.18), rgba(53, 211, 155, 0) 72%);
}

[data-theme="light"] .floating-shape { opacity: 0.75; }
[data-theme="light"] .shape-1 { background: radial-gradient(circle closest-side, rgba(79, 91, 224, 0.18), rgba(79, 91, 224, 0) 72%); }
[data-theme="light"] .shape-2 { background: radial-gradient(circle closest-side, rgba(122, 87, 232, 0.16), rgba(122, 87, 232, 0) 72%); }
[data-theme="light"] .shape-3 { background: radial-gradient(circle closest-side, rgba(18, 169, 122, 0.12), rgba(18, 169, 122, 0) 72%); }

/* Oversized lock mark, used as a quiet watermark rather than a focal point. */
.hero-decor {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.floating-logo-wrapper {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: clamp(3rem, 9vw, 9rem);
    z-index: -1;
    opacity: 0.13;
    transform: translateY(-50%);
    pointer-events: none;
}

.floating-logo-wrapper .custom-lock-logo { transform: scale(2.3); }

/* On narrow screens it moves behind the headline instead of disappearing, so
   the break still plays where there is no room for a side watermark. */
@media (max-width: 900px) {
    .floating-logo-wrapper {
        inset-inline-end: auto;
        left: 50%;
        right: auto;
        opacity: 0.085;
        transform: translate(-50%, -50%);
    }

    .floating-logo-wrapper .custom-lock-logo { transform: scale(1.7); }
}

.hero-content {
    position: relative;
    display: grid;
    justify-items: center;
    max-width: 56rem;
    text-align: center;
}

/* A single hairline above the headline — the only ornament in the hero. */
.hero-content::before {
    content: "";
    width: 1px;
    height: clamp(2rem, 5vw, 3.5rem);
    margin-block-end: clamp(1.25rem, 2.5vw, 2rem);
    background: linear-gradient(to bottom, transparent, var(--accent-line), var(--accent));
}

.hero-title {
    font-size: var(--fs-display);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.03em;
    margin-block-end: 1.15rem;
}

.hero-title .gradient-text { display: inline-block; }

.hero-subtitle {
    max-width: 40rem;
    font-size: clamp(1rem, 0.94rem + 0.5vw, 1.2rem);
    line-height: 1.85;
    color: var(--ink-2);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem);
}

.hero-buttons .btn { padding: 0.9rem 1.8rem; font-size: 0.95rem; }

/* Stats strip */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    max-width: 40rem;
    margin-block-start: clamp(2.5rem, 5vw, 4rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}

.hero-stats .stat {
    display: grid;
    gap: 0.25rem;
    padding: clamp(1rem, 2.5vw, 1.5rem) 0.6rem;
    border-inline-start: 1px solid var(--line);
}

.hero-stats .stat:first-child { border-inline-start: none; }

.stat-number {
    font-size: clamp(1.25rem, 1rem + 1.2vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.2;
}

.stat-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-3);
    line-height: 1.5;
}

@media (max-width: 460px) {
    .hero-stats { grid-template-columns: 1fr; }
    .hero-stats .stat { border-inline-start: none; border-block-start: 1px solid var(--line); }
    .hero-stats .stat:first-child { border-block-start: none; }
    .hero-buttons { flex-direction: column; align-self: stretch; }
    .hero-buttons .btn { width: 100%; }
}

/* --- Shared surface: the card ------------------------------------------- */
.feature-card,
.reason,
.pricing-card,
.faq-item,
.steps-horizontal .step,
.mobile-feature-card,
.features-list,
.video-container,
.showcase-item,
.terms-card,
.powershell-box,
.specs-form,
.specs-card,
.rating-card,
.order-summary,
.payment-form-container,
.compact-features,
.included-features,
.signup-form-container,
.user-info-card,
.license-card,
.transactions-section,
.annotation-content {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* --- Tutorial videos ---------------------------------------------------- */
.video-carousel { max-width: 56rem; margin-inline: auto; }

.video-container { padding: clamp(1rem, 2.5vw, 1.75rem); }

.video-title {
    margin-block-end: 1rem;
    font-size: var(--fs-h3);
    text-align: center;
    transition: opacity 0.3s var(--ease);
}

.video-wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface-3);
}

.video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-block-start: 1.15rem;
}

.video-nav-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--ink-2);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.video-nav-btn:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

.video-indicators { display: flex; align-items: center; gap: 0.5rem; }

.indicator {
    width: 7px;
    height: 7px;
    border-radius: var(--r-full);
    background: var(--line-strong);
    cursor: pointer;
    transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.indicator.active { width: 22px; background: var(--accent); }

/* --- Feature grid ------------------------------------------------------- */
.features-grid,
.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(0.85rem, 2vw, 1.35rem);
}

.feature-card,
.reason {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    padding: clamp(1.35rem, 2.6vw, 1.85rem);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.feature-card:hover,
.reason:hover {
    transform: translateY(-3px);
    border-color: var(--accent-line);
    box-shadow: var(--shadow-md);
}

.feature-icon,
.card-icon,
.annotation-icon,
.terms-icon,
.step-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.feature-card h3,
.reason h4 { font-size: var(--fs-h3); }

.feature-card p,
.reason p { font-size: var(--fs-sm); line-height: 1.85; color: var(--ink-2); }

.reason > i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.15rem;
}

/* --- Tool screenshot showcase ------------------------------------------ */
.screenshot-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: center;
}

.screenshot-annotations { display: none; }

.annotation-item { display: flex; align-items: center; gap: 0.5rem; }

.annotation-content {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    flex: 1;
    padding: 1rem 1.1rem;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.annotation-item:hover .annotation-content { border-color: var(--accent-line); transform: translateY(-2px); }

.annotation-icon { width: 38px; height: 38px; font-size: 0.95rem; border-radius: var(--r-sm); }

.annotation-text h4 { font-size: 0.95rem; margin-block-end: 0.2rem; }
.annotation-text p { font-size: var(--fs-xs); line-height: 1.7; color: var(--ink-2); }

.annotation-arrow { color: var(--line-strong); font-size: 1rem; flex-shrink: 0; }

.screenshot-image-wrapper { display: grid; justify-items: center; }

.screenshot-frame {
    position: relative;
    width: 100%;
    max-width: 46rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    cursor: zoom-in;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.screenshot-frame:hover { transform: translateY(-3px); }

.screenshot-header-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    border-block-end: 1px solid var(--line);
    background: var(--surface-3);
}

.screenshot-dot { width: 9px; height: 9px; border-radius: var(--r-full); flex-shrink: 0; }
.screenshot-dot.red { background: #ec6a5e; }
.screenshot-dot.yellow { background: #f4bf4f; }
.screenshot-dot.green { background: #61c554; }

.screenshot-title {
    margin-inline-start: auto;
    margin-inline-end: auto;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-3);
    direction: ltr;
}

.screenshot-img { width: 100%; display: block; }

.screenshot-zoom-hint {
    position: absolute;
    inset-block-end: 0.85rem;
    inset-inline-end: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: var(--r-full);
    background: rgba(10, 12, 18, 0.72);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Annotations only earn their space when there is room for three columns. */
@media (min-width: 1080px) {
    .screenshot-showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
    .screenshot-annotations { display: grid; gap: 0.85rem; }
    .left-annotations .annotation-item { flex-direction: row; }
    .right-annotations .annotation-item { flex-direction: row; }
}

/* Lightbox */
.screenshot-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(4, 6, 12, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.screenshot-lightbox.show { opacity: 1; visibility: visible; }

.screenshot-lightbox img {
    max-width: 100%;
    max-height: 88vh;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    object-fit: contain;
}

.screenshot-lightbox-close {
    position: absolute;
    inset-block-start: clamp(0.75rem, 3vw, 1.75rem);
    inset-inline-end: clamp(0.75rem, 3vw, 1.75rem);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1rem;
}

.screenshot-lightbox-close:hover { background: rgba(255, 255, 255, 0.16); }

/* Mobile swipe cards for the same content */
.mobile-features-carousel {
    display: flex;
    gap: 0.75rem;
    margin-block-start: clamp(1.25rem, 3vw, 2rem);
    padding-block-end: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.mobile-features-carousel::-webkit-scrollbar { display: none; }

.mobile-feature-card {
    flex: 0 0 min(78%, 260px);
    scroll-snap-align: center;
    display: grid;
    align-content: start;
    gap: 0.55rem;
    padding: 1.25rem;
}

.mobile-feature-card h4 { font-size: 1rem; }
.mobile-feature-card p { font-size: var(--fs-xs); line-height: 1.75; color: var(--ink-2); }
.card-icon { width: 40px; height: 40px; font-size: 1rem; }

.mobile-scroll-hint {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-block-start: 0.9rem;
}

.mobile-scroll-hint .dot {
    width: 6px;
    height: 6px;
    border-radius: var(--r-full);
    background: var(--line-strong);
    transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.mobile-scroll-hint .dot.active { width: 18px; background: var(--accent); }

@media (min-width: 1080px) {
    .mobile-features-carousel,
    .mobile-scroll-hint { display: none; }
}

/* --- Pricing ------------------------------------------------------------ */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: clamp(1rem, 2.2vw, 1.5rem);
    align-items: stretch;
    max-width: 62rem;
    margin-inline: auto;
}

.pricing-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 1rem;
    padding: clamp(1.5rem, 3vw, 2.15rem);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.pricing-card:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow-md); }

.pricing-card > h3 { font-size: var(--fs-h3); }

.pricing-card.special-offer {
    border-color: var(--accent-line);
    background:
        linear-gradient(180deg, var(--accent-soft), transparent 42%),
        var(--surface);
    box-shadow: var(--shadow-md);
}

.offer-badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: clamp(1.5rem, 3vw, 2.15rem);
    transform: translateY(-50%);
    padding: 0.28rem 0.9rem;
    border-radius: var(--r-full);
    background: var(--accent-grad);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: var(--glow);
}

.pricing-card .price { display: flex; align-items: baseline; gap: 0.4rem; }

.pricing-card .current-price {
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ink);
}

.pricing-card .current-price small {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0;
}

.pricing-features { display: grid; gap: 0.6rem; align-content: start; }

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-2);
}

.pricing-features li i {
    margin-block-start: 0.42rem;
    font-size: 0.7rem;
    color: var(--success);
    flex-shrink: 0;
}

.pricing-card .btn-purchase { width: 100%; padding-block: 0.85rem; }

/* --- How it works ------------------------------------------------------- */
.steps-horizontal {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}

/* Four cards separated by three connectors: an explicit alternating track so
   the arrows sit between the steps instead of wrapping as grid items. */
@media (min-width: 900px) {
    .steps-horizontal {
        grid-template-columns:
            minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0.35rem;
    }
}

.steps-horizontal .step {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 0.6rem;
    padding: clamp(1.5rem, 2.8vw, 2rem) 1.25rem;
    text-align: center;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.steps-horizontal .step:hover { transform: translateY(-3px); border-color: var(--accent-line); }

.steps-horizontal .step-icon { width: 52px; height: 52px; font-size: 1.25rem; border-radius: var(--r-md); }

.step-number {
    position: absolute;
    inset-block-start: 0.85rem;
    inset-inline-end: 0.95rem;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
    opacity: 0.07;
}

.steps-horizontal .step h3 { font-size: 1.05rem; }
.steps-horizontal .step p { font-size: var(--fs-xs); line-height: 1.8; color: var(--ink-2); }

/* Connector between two steps: a track that draws itself in on reveal, a slow
   pulse travelling along it, and the arrow riding in the middle. Everything
   that has a direction is expressed through --flow, so switching to English
   re-aims the whole thing without a second rule. */
.step-arrow {
    position: relative;
    display: grid;
    place-items: center;
    align-self: center;
    min-width: 3.5rem;
    min-height: 3rem;
    color: var(--ink-3);
    font-size: 0.9rem;
}

.step-arrow::before,
.step-arrow::after {
    content: "";
    position: absolute;
    inset-inline: 0.2rem;
    height: 2px;
    border-radius: 2px;
}

.step-arrow::before {
    background: linear-gradient(to right, var(--line-strong), var(--accent-line));
    transform: scaleX(0);
    transform-origin: var(--flow-origin);
    transition: transform 0.85s var(--ease);
    transition-delay: calc(var(--reveal-delay, 0ms) + 120ms);
}

.step-arrow.is-revealed::before { transform: scaleX(1); }

.step-arrow::after {
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    background-size: 45% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: cd-flow 3.4s var(--ease) infinite;
    animation-delay: calc(var(--reveal-delay, 0ms) + 700ms);
    animation-play-state: paused;
}

.step-arrow.is-revealed::after { animation-play-state: running; }

@keyframes cd-flow {
    0% { background-position: var(--flow-from); opacity: 0; }
    18% { opacity: 0.85; }
    78% { opacity: 0.85; }
    100% { background-position: var(--flow-to); opacity: 0; }
}

/* The arrow glyph masks the track it sits on. */
.step-arrow i {
    position: relative;
    z-index: 1;
    padding-inline: 0.45rem;
    background: var(--bg);
    transform: var(--arrow-transform, none);
}

html[dir="ltr"] .steps-horizontal .step-arrow i { --arrow-transform: scaleX(-1); }

/* Stacked layout: the connector turns into a vertical run between the cards. */
@media (max-width: 899px) {
    .step-arrow {
        min-height: 2.75rem;
        min-width: 0;
    }

    .step-arrow::before,
    .step-arrow::after {
        inset-inline: auto;
        inset-block: 0.2rem;
        inset-inline-start: calc(50% - 1px);
        width: 2px;
        height: auto;
    }

    .step-arrow::before {
        background: linear-gradient(to bottom, var(--line-strong), var(--accent-line));
        transform: scaleY(0);
        transform-origin: top;
    }

    .step-arrow.is-revealed::before { transform: scaleY(1); }
    .step-arrow::after { display: none; }

    html[dir="rtl"] .steps-horizontal .step-arrow i { --arrow-transform: rotate(-90deg); }
    html[dir="ltr"] .steps-horizontal .step-arrow i { --arrow-transform: rotate(90deg) scaleX(-1); }
}

/* --- Requirements checklist -------------------------------------------- */
.all-features { padding-block-start: 0; }

.features-list {
    max-width: 46rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.features-list h3 { margin-block-end: 1.25rem; font-size: var(--fs-h3); text-align: center; }

.features-checklist { display: grid; gap: 0.7rem; }

.features-checklist .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: var(--fs-sm);
    line-height: 1.75;
    color: var(--ink-2);
}

.features-checklist .feature-item i {
    margin-block-start: 0.4rem;
    font-size: 0.72rem;
    color: var(--success);
    flex-shrink: 0;
}

.features-checklist .feature-item a,
.dohaplus-link { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* --- Closing call to action -------------------------------------------- */
.cta .container {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background:
        radial-gradient(38rem 18rem at 50% -30%, var(--accent-soft), transparent 70%),
        var(--surface);
    text-align: center;
    box-shadow: var(--shadow-md);
}

.cta h2 { max-width: 30rem; }
.cta p { color: var(--ink-2); }
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; margin-block-start: 0.85rem; }
.cta .btn-cta-primary { padding: 0.9rem 2rem; font-size: 0.95rem; }

/* ==========================================================================
   09. Auth pages — signin / signup / create-account
   ========================================================================== */

.signup-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    width: 100%;
    max-width: calc(var(--page-max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

@media (min-width: 900px) {
    .signup-container { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
}

.signup-form-container { padding: clamp(1.5rem, 3.5vw, 2.75rem); }

.signup-form-container > h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem); }

.signup-subtitle {
    margin-block: 0.35rem 1.85rem;
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.signup-form { display: grid; }

.login-link {
    margin-block-start: 1.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--line);
    font-size: var(--fs-sm);
    text-align: center;
    color: var(--ink-2);
}

.login-link a { font-weight: 700; }

/* Showcase column -------------------------------------------------------- */
.features-showcase { display: grid; gap: 1.25rem; }

.features-showcase > h2 {
    font-size: var(--fs-h2);
    letter-spacing: -0.02em;
}

.showcase-list { display: grid; gap: 0.75rem; }

.showcase-item {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    padding: 1.1rem 1.25rem;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.showcase-item:hover { transform: translateX(0); border-color: var(--accent-line); }

.showcase-item > i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.showcase-item h4 { font-size: 0.98rem; margin-block-end: 0.15rem; }
.showcase-item p { font-size: var(--fs-xs); line-height: 1.7; color: var(--ink-2); }

/* OTP modal -------------------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    place-items: center;
    padding: 1.25rem;
    background: rgba(4, 6, 12, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal.show { display: grid; }

.modal-content {
    width: 100%;
    max-width: 26rem;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.modal-content h3 { margin-block-end: 0.5rem; }
.modal-content > p { font-size: var(--fs-sm); color: var(--ink-2); }

.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-block: 1.5rem;
    direction: ltr;
}

.otp-input {
    width: clamp(2.35rem, 11vw, 3rem);
    aspect-ratio: 1;
    padding: 0;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: var(--r-sm);
}

.resend-code { margin-block-start: 0.7rem; font-size: var(--fs-sm); color: var(--ink-2); }
.resend-code a { font-weight: 700; }

/* While the cooldown runs the link stays in place but stops reading as an
   action, and the remaining seconds sit next to it. */
.resend-code a.is-disabled {
    color: var(--ink-3);
    font-weight: 600;
    pointer-events: none;
    text-decoration: none;
    cursor: default;
}

.resend-timer {
    margin-inline-start: 0.4rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

.resend-timer:empty { display: none; }

/* ==========================================================================
   10. Purchase pages
   ========================================================================== */

.purchase-hero { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.purchase-hero .hero-content { max-width: 44rem; }
.purchase-hero .hero-content::before { display: none; }
.purchase-hero .hero-subtitle { color: var(--ink-2); }
.purchase-hero h1 i { color: var(--accent); }

.purchase-header {
    max-width: 44rem;
    margin-inline: auto;
    margin-block-end: var(--stack);
    text-align: center;
}

.purchase-header h1 { margin-block-end: 0.6rem; }
.purchase-header p { color: var(--ink-2); font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem); }

.payment-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: start;
}

@media (min-width: 940px) {
    .payment-wrapper { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
    .features-summary-combined,
    .payment-wrapper > .order-summary { position: sticky; top: calc(var(--nav-h) + 1.25rem); }
}

.payment-form-container { padding: clamp(1.5rem, 3.5vw, 2.5rem); }

.form-header { margin-block-end: 1.85rem; }

.form-header h2 { margin-block-end: 0.35rem; font-size: var(--fs-h2); }
.form-header > p { font-size: var(--fs-sm); color: var(--ink-2); }

.secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-end: 1rem;
    padding: 0.32rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
    border-radius: var(--r-full);
    background: var(--success-soft);
    color: var(--success);
    font-size: var(--fs-xs);
    font-weight: 700;
}

/* Plan chooser (purchase-ios) ------------------------------------------- */
.plan-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 0.75rem;
}

.plan-option {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: 1.25rem 1rem 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface-2);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.plan-option:hover { border-color: var(--accent-line); transform: translateY(-2px); }

.plan-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.plan-check {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-full);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.plan-option input:checked ~ .plan-check {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 4px var(--accent);
}

.plan-option:has(input:checked),
.plan-option.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.plan-name { font-weight: 700; }

.plan-price { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.plan-price small { font-size: 0.72rem; font-weight: 600; color: var(--ink-3); }

.plan-option.recommended { border-color: color-mix(in srgb, var(--success) 34%, transparent); }
.plan-option.recommended:has(input:checked),
.plan-option.recommended.selected { border-color: var(--accent); }

.plan-badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0.9rem;
    transform: translateY(-50%);
    padding: 0.2rem 0.7rem;
    border-radius: var(--r-full);
    background: var(--accent-grad);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Order summary --------------------------------------------------------- */
.order-summary { padding: clamp(1.35rem, 3vw, 1.85rem); }

.order-summary > h3 {
    margin-block-end: 1.15rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--line);
    font-size: var(--fs-h3);
}

.summary-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.5rem;
    font-size: var(--fs-sm);
    color: var(--ink-2);
}

.summary-item .price { font-weight: 700; color: var(--ink); white-space: nowrap; }

.summary-divider { height: 1px; margin-block: 0.85rem; background: var(--line); }

.summary-item.total { font-size: 1rem; font-weight: 700; color: var(--ink); }

.summary-item.total .price {
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--accent);
}

.included-features,
.compact-features {
    margin-block-start: 1.5rem;
    padding: 1.25rem;
    border-radius: var(--r-md);
    background: var(--surface-2);
    box-shadow: none;
}

.included-features h4,
.compact-features h4 {
    margin-block-end: 0.9rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.included-features ul,
.compact-features .compact-list { display: grid; gap: 0.6rem; }

.included-features li,
.compact-features .compact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-2);
}

.included-features li i,
.compact-features .compact-item i {
    margin-block-start: 0.4rem;
    font-size: 0.72rem;
    color: var(--success);
    flex-shrink: 0;
}

.compact-features .compact-item i { margin-block-start: 0.28rem; font-size: 0.85rem; color: var(--accent); }

.payment-methods { margin-block-start: 1.5rem; }

.payment-methods h4,
.payment-methods > p {
    margin-block-end: 0.75rem;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.methods { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Card-scheme marks come from the icon font that is already loaded, so they
   always render and cost no extra request. They replaced hotlinked Wikimedia
   SVGs, one of which had gone dead and left a blank gap on the page. */
.methods i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    background: var(--surface-3);
    color: var(--ink-2);
    font-size: 1.5rem;
    line-height: 1;
}

.methods span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-3);
    color: var(--ink-2);
    font-size: var(--fs-xs);
}

/* Trust badges ---------------------------------------------------------- */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-block-start: 1.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--line);
}

.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-3);
}

.trust-item i { color: var(--success); }

/* DohaPlus notice ------------------------------------------------------- */
.dohaplus-notice {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    margin-block-end: 1.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-md);
    background: var(--accent-soft);
    text-align: center;
}

.dohaplus-notice p { margin: 0; font-size: var(--fs-xs); line-height: 1.75; color: var(--ink-2); }

.dohaplus-btn { padding: 0.5rem 1.1rem; font-size: var(--fs-xs); }

/* FAQ ------------------------------------------------------------------- */
.faq-section { padding-block-start: 0; }

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: clamp(0.85rem, 2vw, 1.25rem);
}

.faq-item {
    display: grid;
    gap: 0.5rem;
    padding: clamp(1.35rem, 2.6vw, 1.75rem);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.faq-item:hover { border-color: var(--accent-line); transform: translateY(-2px); }

.faq-item h3 {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 1.02rem;
}

.faq-item h3 i { margin-block-start: 0.25rem; color: var(--accent); font-size: 0.9rem; flex-shrink: 0; }
.faq-item p { font-size: var(--fs-sm); line-height: 1.85; color: var(--ink-2); }

/* purchase-new hero mark ------------------------------------------------- */
.animated-lock-hero { display: grid; place-items: center; margin-block-end: 1.25rem; }
.animated-lock-hero .lock-svg { width: 74px; height: 86px; }

.price-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-block-start: 1.25rem;
    padding: 0.6rem 1.4rem;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-full);
    background: var(--accent-soft);
}

.price-tag .amount { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.price-tag .currency,
.price-tag .period { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); }

.features-section { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* ==========================================================================
   11. Account page
   ========================================================================== */

.account-container {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    width: 100%;
    max-width: calc(920px + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.user-info-card {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: clamp(1.75rem, 4vw, 2.75rem) 1.25rem;
    text-align: center;
    background:
        radial-gradient(30rem 14rem at 50% -20%, var(--accent-soft), transparent 70%),
        var(--surface);
}

.user-avatar {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-block-end: 0.6rem;
    border-radius: var(--r-full);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 2.1rem;
}

.user-avatar i { line-height: 1; }

.user-info-card h2 { font-size: var(--fs-h2); }
.user-phone { font-size: var(--fs-sm); color: var(--ink-3); direction: ltr; }

.card-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.15rem clamp(1.25rem, 3vw, 1.75rem);
    border-block-end: 1px solid var(--line);
}

.card-header i { color: var(--accent); font-size: 1rem; }
.card-header h3 { font-size: var(--fs-h3); }

.card-body { padding: clamp(1.25rem, 3vw, 1.75rem); }

/* The outer license panel and the per-key cards share a class name. */
.account-container > .license-card { padding: 0; }

.license-key-container { display: grid; gap: 1.25rem; }

.licenses-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.licenses-header h3 { font-size: var(--fs-h3); }
.purchase-link-btn { padding: 0.5rem 1.1rem; font-size: var(--fs-xs); }

.licenses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 0.9rem;
}

.licenses-grid .license-card {
    display: grid;
    align-content: start;
    gap: 0.7rem;
    padding: 1.25rem;
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.licenses-grid .license-card.expired { border-color: color-mix(in srgb, var(--danger) 32%, transparent); }
.licenses-grid .license-card.active { border-color: color-mix(in srgb, var(--success) 28%, transparent); }
.licenses-grid .license-card.lifetime { border-color: var(--accent-line); }

.license-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.license-number {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.license-number i { color: var(--accent); font-size: 0.85rem; }

.license-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.7rem;
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--ink-2);
    font-size: 0.72rem;
    font-weight: 700;
}

.license-type-badge.lifetime { background: var(--accent-soft); color: var(--accent); }
/* account.js emits the raw plan id as a class, so "4month" needs the digit escaped. */
.license-type-badge.monthly,
.license-type-badge.\34 month { background: var(--warning-soft); color: var(--warning); }

.license-key-display {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.55rem 0.55rem 0.85rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-3);
}

.key-value {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--ink);
    direction: ltr;
    text-align: start;
    overflow-wrap: anywhere;
}

.license-status-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.sub-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.7rem;
    border-radius: var(--r-full);
    font-size: 0.74rem;
    font-weight: 700;
}

.sub-status.valid { background: var(--success-soft); color: var(--success); }
.sub-status.expired { background: var(--danger-soft); color: var(--danger); }

.license-info {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: var(--ink-2);
}

.license-info i { margin-block-start: 0.35rem; color: var(--ink-3); font-size: 0.75rem; flex-shrink: 0; }

.renew-btn { width: 100%; margin-block-start: 0.35rem; padding-block: 0.6rem; font-size: var(--fs-xs); }
.renew-btn.urgent { --btn-bg: linear-gradient(135deg, #e2555f, #d94452); }

.empty-license {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: clamp(2rem, 5vw, 3rem) 1.25rem;
    text-align: center;
}

.empty-license > i { font-size: 2.25rem; color: var(--ink-3); opacity: 0.5; }
.empty-license p { font-size: var(--fs-sm); color: var(--ink-2); max-width: 26rem; }
.empty-license .purchase-link { margin-block-start: 0.6rem; }

.loading {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    color: var(--ink-3);
    font-size: var(--fs-sm);
}

.loading i { font-size: 1.4rem; color: var(--accent); }

/* Usage notice ----------------------------------------------------------- */
.app-usage-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.15rem 1.35rem;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-lg);
    background: var(--accent-soft);
}

.app-usage-icon { color: var(--accent); font-size: 1.15rem; margin-block-start: 0.15rem; }
.app-usage-text strong { display: block; margin-block-end: 0.2rem; }
.app-usage-text p { font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-2); }

.pending-notice {
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 clamp(1.25rem, 3vw, 1.75rem) 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
    border-radius: var(--r-md);
    background: var(--warning-soft);
}

.pending-notice i { color: var(--warning); margin-block-start: 0.3rem; }
.pending-notice p { font-size: var(--fs-xs); line-height: 1.75; color: var(--ink-2); }

/* Transactions ----------------------------------------------------------- */
.transactions-section { padding-block-end: 0.5rem; }

.transactions-section { min-width: 0; }

.transactions-container {
    min-width: 0;
    padding-inline: clamp(1.25rem, 3vw, 1.75rem);
    padding-block-end: clamp(1.25rem, 3vw, 1.75rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.transactions-table { min-width: 30rem; font-size: var(--fs-sm); }

.transactions-table th {
    padding: 0.75rem 0.85rem;
    border-block-end: 1px solid var(--line);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: start;
    white-space: nowrap;
}

.transactions-table td {
    padding: 0.85rem;
    border-block-end: 1px solid var(--line);
    color: var(--ink-2);
    vertical-align: middle;
}

.transactions-table tbody tr:last-child td { border-block-end: none; }
.transactions-table tbody tr { transition: background-color var(--dur) var(--ease); }
.transactions-table tbody tr:hover { background: var(--surface-2); }

.transaction-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--ink-2);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.transaction-status.completed,
.transaction-status.paid { background: var(--success-soft); color: var(--success); }
.transaction-status.pending { background: var(--warning-soft); color: var(--warning); }
.transaction-status.failed,
.transaction-status.cancelled,
.transaction-status.expired { background: var(--danger-soft); color: var(--danger); }

.no-transactions {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem;
    color: var(--ink-3);
    text-align: center;
}

.no-transactions i { font-size: 2rem; opacity: 0.5; }
.no-transactions p { font-size: var(--fs-sm); }


/* ==========================================================================
   12. Terms page
   ========================================================================== */

.terms-hero {
    max-width: 46rem;
    margin-inline: auto;
    margin-block-end: var(--stack);
    padding-inline: var(--gutter);
    text-align: center;
}

.terms-hero h1 { margin-block-end: 0.7rem; }
.terms-hero p { color: var(--ink-2); font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem); }

.terms-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    gap: clamp(0.9rem, 2vw, 1.35rem);
    align-items: start;
}

.terms-card {
    padding: clamp(1.35rem, 2.8vw, 1.85rem);
    transition: border-color var(--dur) var(--ease);
}

.terms-card:hover { border-color: var(--accent-line); }

.terms-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-block-end: 1.15rem;
    padding-block-end: 1.15rem;
    border-block-end: 1px solid var(--line);
}

.terms-card-header h3 { font-size: 1.05rem; }

.terms-icon { width: 42px; height: 42px; font-size: 1rem; border-radius: var(--r-sm); }
.terms-icon.primary { background: var(--accent-soft); color: var(--accent); }
.terms-icon.warning { background: var(--warning-soft); color: var(--warning); }
.terms-icon.danger { background: var(--danger-soft); color: var(--danger); }
.terms-icon.info { background: var(--success-soft); color: var(--success); }

.terms-card ul { display: grid; gap: 0.8rem; }

.terms-card li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: var(--fs-sm);
    line-height: 1.85;
    color: var(--ink-2);
}

.terms-card li > i {
    margin-block-start: 0.45rem;
    font-size: 0.75rem;
    flex-shrink: 0;
    color: var(--ink-3);
}

.terms-card li > i.fa-check { color: var(--success); }
.terms-card li > i.fa-times { color: var(--danger); }
.terms-card li > i.fa-exclamation-circle { color: var(--warning); }
.terms-card li > i.fa-info-circle,
.terms-card li > i.fa-university { color: var(--accent); }

.terms-final-note {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-xl);
    background:
        radial-gradient(34rem 16rem at 50% -25%, var(--accent-soft), transparent 70%),
        var(--surface);
    text-align: center;
    box-shadow: var(--shadow-md);
}

.terms-final-note > i { color: var(--accent); font-size: 1.5rem; }
.terms-final-note h2 { font-size: var(--fs-h3); }
.terms-final-note p { max-width: 46rem; font-size: var(--fs-sm); line-height: 1.95; color: var(--ink-2); }

.terms-back { display: flex; justify-content: center; margin-block-start: var(--stack); }

/* ==========================================================================
   13. Compatibility check
   ========================================================================== */

.compatibility-container {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    width: 100%;
    max-width: calc(920px + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.compatibility-header { max-width: 44rem; margin-inline: auto; text-align: center; }
.compatibility-header h1 { margin-block-end: 0.7rem; }
.compatibility-header p { color: var(--ink-2); }

.powershell-box { padding: clamp(1.35rem, 3vw, 1.85rem); }

.powershell-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-block-end: 1.15rem;
}

.powershell-header i { color: var(--accent); }
.powershell-header h3 { font-size: 1.02rem; }

.powershell-instructions { font-size: var(--fs-sm); color: var(--ink-2); }
.powershell-instructions p { margin-block-end: 0.6rem; font-weight: 700; color: var(--ink); }

.powershell-instructions ol {
    display: grid;
    gap: 0.45rem;
    padding-inline-start: 1.35rem;
    list-style: decimal;
}

.powershell-instructions li { line-height: 1.8; }

.powershell-command {
    position: relative;
    display: grid;
    gap: 0.75rem;
    margin-block: 1.15rem;
    padding: 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface-3);
}

.powershell-command code {
    display: block;
    max-height: 9.5rem;
    overflow: auto;
    font-size: 0.72rem;
    line-height: 1.8;
    color: var(--ink-2);
    direction: ltr;
    text-align: start;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.powershell-command .copy-btn { justify-self: start; }

.powershell-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: var(--fs-xs);
    line-height: 1.75;
    color: var(--ink-3);
}

.powershell-note i { margin-block-start: 0.35rem; color: var(--accent); flex-shrink: 0; }

.specs-form { padding: clamp(1.35rem, 3vw, 1.85rem); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 0 1.15rem;
}

.check-button-container { margin-block-start: 0.6rem; }

/* Results ---------------------------------------------------------------- */
.results-container { display: none; gap: clamp(1rem, 2.5vw, 1.5rem); }
.results-container.active { display: grid; }

.rating-card {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    text-align: center;
    border-width: 1px;
}

.rating-icon { font-size: 2.6rem; color: var(--accent); }
.rating-title { font-size: var(--fs-h2); }
.rating-message { max-width: 40rem; font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-2); }

.rating-card.excellent { border-color: color-mix(in srgb, var(--success) 34%, transparent); background: linear-gradient(180deg, var(--success-soft), transparent 55%), var(--surface); }
.rating-card.excellent .rating-icon { color: var(--success); }
.rating-card.good { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), transparent 55%), var(--surface); }
.rating-card.good .rating-icon { color: var(--accent); }
.rating-card.minimum,
.rating-card.poor { border-color: color-mix(in srgb, var(--warning) 34%, transparent); background: linear-gradient(180deg, var(--warning-soft), transparent 55%), var(--surface); }
.rating-card.minimum .rating-icon,
.rating-card.poor .rating-icon { color: var(--warning); }
.rating-card.incompatible { border-color: color-mix(in srgb, var(--danger) 34%, transparent); background: linear-gradient(180deg, var(--danger-soft), transparent 55%), var(--surface); }
.rating-card.incompatible .rating-icon { color: var(--danger); }

.specs-card { padding: clamp(1.35rem, 3vw, 1.85rem); }

.specs-card > h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-block-end: 1rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--line);
    font-size: var(--fs-h3);
}

.specs-card > h3 i { color: var(--accent); }

.spec-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.65rem;
    border-block-end: 1px solid var(--line);
    font-size: var(--fs-sm);
}

.spec-item:last-of-type { border-block-end: none; }
.spec-label { color: var(--ink-3); }
.spec-value { font-weight: 700; color: var(--ink); text-align: end; }

.vt-warning-box,
.windows-warning-box {
    display: grid;
    gap: 0.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    border-radius: var(--r-md);
    background: var(--warning-soft);
    font-size: var(--fs-sm);
    line-height: 1.85;
    color: var(--ink-2);
}

.vt-warning-box h4,
.windows-warning-box h4 { color: var(--warning); }

.disclaimer {
    padding: 1.15rem 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.disclaimer p {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: var(--fs-xs);
    line-height: 1.85;
    color: var(--ink-2);
}

.disclaimer p i { margin-block-start: 0.4rem; color: var(--accent); flex-shrink: 0; }
.disclaimer a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.back-button { display: flex; justify-content: center; }

/* ==========================================================================
   14. Maintenance & 404
   ========================================================================== */

.orb {
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    opacity: 0.85;
    pointer-events: none;
}

.orb.one { width: 34rem; aspect-ratio: 1; inset-block-start: -14%; inset-inline-end: -10%; background: radial-gradient(circle closest-side, rgba(110, 123, 255, 0.30), rgba(110, 123, 255, 0) 72%); }
.orb.two { width: 28rem; aspect-ratio: 1; inset-block-end: -18%; inset-inline-start: -8%; background: radial-gradient(circle closest-side, rgba(155, 123, 255, 0.26), rgba(155, 123, 255, 0) 72%); }
.orb.three { width: 20rem; aspect-ratio: 1; inset-block-start: 40%; inset-inline-start: 44%; background: radial-gradient(circle closest-side, rgba(53, 211, 155, 0.16), rgba(53, 211, 155, 0) 72%); }

[data-theme="light"] .orb.one { background: radial-gradient(circle closest-side, rgba(79, 91, 224, 0.16), rgba(79, 91, 224, 0) 72%); }
[data-theme="light"] .orb.two { background: radial-gradient(circle closest-side, rgba(122, 87, 232, 0.15), rgba(122, 87, 232, 0) 72%); }
[data-theme="light"] .orb.three { background: radial-gradient(circle closest-side, rgba(18, 169, 122, 0.11), rgba(18, 169, 122, 0) 72%); }

.maintenance-container,
.error-404-container {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    width: min(100% - 2 * var(--gutter), 40rem);
    margin: clamp(3rem, 12vh, 7rem) auto;
    padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 2.75rem);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.error-404-section { display: grid; place-items: center; min-height: 100vh; }

.logo-badge {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin-block-end: 0.5rem;
    border-radius: var(--r-lg);
    background: var(--accent-grad);
    box-shadow: var(--glow);
}

.logo-badge .lock-svg { width: 42px; height: 49px; }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.32rem 0.95rem;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-full);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.tag i { animation: cd-spin 3.5s linear infinite; }

@keyframes cd-spin { to { transform: rotate(360deg); } }

.maintenance-container h1,
.error-404-title { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.35rem); }

.lead {
    display: grid;
    gap: 0.4rem;
    max-width: 30rem;
    font-size: var(--fs-body);
    line-height: 1.9;
    color: var(--ink-2);
}

.progress {
    width: min(100%, 22rem);
    height: 6px;
    margin-block: 0.6rem 0.5rem;
    border-radius: var(--r-full);
    background: var(--surface-3);
    overflow: hidden;
}

.progress span {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: var(--r-full);
    background: var(--accent-grad);
    animation: cd-slide 1.9s ease-in-out infinite;
}

@keyframes cd-slide {
    0% { transform: translateX(-130%); }
    100% { transform: translateX(330%); }
}

.contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }

.footer-brand { margin-block-start: 1.25rem; font-size: var(--fs-xs); color: var(--ink-3); }
.footer-brand strong { color: var(--ink); }

.error-404-icon { font-size: clamp(2.5rem, 8vw, 3.5rem); color: var(--warning); }

.error-404-code {
    font-size: clamp(3.5rem, 3rem + 6vw, 6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.error-404-message { max-width: 32rem; font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-2); }

.error-404-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-block-start: 0.85rem; }

@media (max-width: 480px) {
    .error-404-buttons { flex-direction: column; align-self: stretch; }
    .btn-404 { width: 100%; }
}

/* ==========================================================================
   15. Runtime widgets — toasts, modals, payment overlays
   ========================================================================== */

.toast {
    position: fixed;
    inset-block-start: 1.25rem;
    inset-inline: auto;
    left: 50%;
    z-index: 6000;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: min(92vw, 26rem);
    padding: 0.85rem 1.25rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    transform: translate(-50%, -140%);
    opacity: 0;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.success { border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.toast.success i { color: var(--success); }
.toast.error,
.toast.toast-error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.toast.error i,
.toast.toast-error i { color: var(--danger); }
.toast.toast-success i { color: var(--success); }
.toast i { font-size: 1rem; flex-shrink: 0; }

/* Shared overlay shell --------------------------------------------------- */
.choice-modal-overlay,
.acct-modal-overlay,
.processing-overlay,
.payment-waiting-overlay,
.renewal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5500;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(4, 6, 12, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}

.choice-modal-overlay.show,
.acct-modal-overlay.show,
.processing-overlay.show,
.payment-waiting-overlay.show,
.renewal-overlay.show { opacity: 1; }

.choice-modal,
.acct-modal,
.processing-content,
.waiting-content,
.renewal-content {
    position: relative;
    width: 100%;
    max-width: 27rem;
    max-height: 88vh;
    overflow-y: auto;
    padding: clamp(1.75rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    text-align: center;
    color: var(--ink);
}

.choice-modal h2,
.acct-modal h2 { margin-block-end: 0.35rem; font-size: var(--fs-h3); }

.choice-sub,
.acct-modal-sub { margin-block-end: 1.35rem; font-size: var(--fs-xs); color: var(--ink-2); }

.choice-close,
.acct-modal-close {
    position: absolute;
    inset-block-start: 0.85rem;
    inset-inline-start: 0.85rem;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-full);
    color: var(--ink-3);
    font-size: 0.9rem;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.choice-close:hover,
.acct-modal-close:hover { background: var(--surface-3); color: var(--ink); }

/* Sits in the flow at the bottom of the renewal dialog, not as a corner "X". */
.renewal-close-btn {
    margin-block-start: 1.15rem;
    padding: 0.55rem 1.5rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 700;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.renewal-close-btn:hover { background: var(--surface-3); border-color: var(--accent-line); }

.choice-options { display: grid; gap: 0.6rem; }

.choice-option {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    padding: 1.25rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface-2);
    text-align: center;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.choice-option:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.choice-option > i { font-size: 1.35rem; color: var(--accent); }
.choice-title { font-weight: 700; }
.choice-desc { font-size: var(--fs-xs); line-height: 1.7; color: var(--ink-2); }

.renew-list,
.acct-plan-list {
    display: grid;
    gap: 0.6rem;
    margin-block-end: 1.25rem;
    text-align: start;
}

.renew-item,
.acct-plan {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.renew-item:hover,
.acct-plan:hover { border-color: var(--accent-line); }
.renew-item:has(input:checked),
.acct-plan:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.renew-item-body,
.acct-plan-body { display: grid; gap: 0.2rem; flex: 1; min-width: 0; }

.renew-key,
.acct-plan-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 700;
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

.renew-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.rk-type,
.acct-plan-desc { font-size: var(--fs-xs); color: var(--ink-3); }

.rk-active { font-size: var(--fs-xs); font-weight: 700; color: var(--success); }
.rk-expired { font-size: var(--fs-xs); font-weight: 700; color: var(--danger); }

.acct-plan-price,
.plan-option .plan-price { color: var(--accent); font-weight: 800; }

.acct-plan.recommended,
.renew-item.recommended {
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
    background: var(--success-soft);
}

.acct-plan.recommended .acct-plan-price { color: var(--success); }

.choice-confirm,
.acct-plan-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem;
    border: none;
    border-radius: var(--r-md);
    background: var(--accent-grad);
    color: #fff;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.choice-confirm:hover,
.acct-plan-confirm:hover { box-shadow: var(--glow); transform: translateY(-2px); }

/* Spinners --------------------------------------------------------------- */
.spinner,
.renewal-spinner {
    width: 42px;
    height: 42px;
    margin-inline: auto;
    margin-block-end: 1.15rem;
    border: 3px solid var(--line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: cd-spin 0.9s linear infinite;
}

.processing-content p,
.renewal-content p { font-size: var(--fs-sm); color: var(--ink-2); }

.waiting-spinner {
    position: relative;
    width: 68px;
    height: 68px;
    margin-inline: auto;
    margin-block-end: 1.35rem;
}

.spinner-ring {
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: cd-spin 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring:nth-child(2) { inset: 8px; border-top-color: var(--violet-500); animation-duration: 1.8s; animation-direction: reverse; }
.spinner-ring:nth-child(3) { inset: 16px; border-top-color: var(--success); animation-duration: 2.2s; }

.waiting-content h2 { font-size: var(--fs-h3); margin-block-end: 0.5rem; }
.waiting-content > p { font-size: var(--fs-sm); color: var(--ink-2); }

.invoice-info {
    margin-block: 0.85rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    font-size: var(--fs-xs);
    color: var(--ink-2);
}

.invoice-info strong { font-family: var(--font-mono); color: var(--ink); }

.waiting-steps {
    display: grid;
    gap: 0.5rem;
    margin-block: 1.35rem;
    text-align: start;
}

.waiting-steps .step {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: var(--fs-xs);
    color: var(--ink-3);
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.waiting-steps .step i { flex-shrink: 0; }
.waiting-steps .step.active { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.waiting-steps .step.active i { color: var(--accent); }

.waiting-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--fs-xs);
    line-height: 1.75;
    color: var(--ink-3);
    text-align: start;
}

.waiting-note i { margin-block-start: 0.3rem; color: var(--accent); flex-shrink: 0; }

.success-icon,
.renewal-success-icon { font-size: 3rem; color: var(--success); margin-block-end: 0.85rem; }
.failed-icon { font-size: 3rem; color: var(--danger); margin-block-end: 0.85rem; }
.timeout-icon { font-size: 3rem; color: var(--warning); margin-block-end: 0.85rem; }

.license-key-box {
    display: grid;
    gap: 0.5rem;
    margin-block: 1.15rem;
    padding: 1rem;
    border: 1px dashed var(--accent-line);
    border-radius: var(--r-md);
    background: var(--accent-soft);
}

.key-display {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ink);
    direction: ltr;
    overflow-wrap: anywhere;
}

.redirect-msg,
.renewal-redirect { font-size: var(--fs-xs); color: var(--ink-3); }

/* Inserted at the top of .account-container, so it flows with the page. */
.maintenance-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent);
    border-radius: var(--r-lg);
    background: var(--warning-soft);
}

.maintenance-banner i { margin-block-start: 0.3rem; color: var(--warning); font-size: 1.15rem; flex-shrink: 0; }
.maintenance-banner p { margin: 0; font-size: var(--fs-sm); line-height: 1.8; color: var(--ink-2); }

.disabled-maintenance {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.4);
}

/* ==========================================================================
   16. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        /* Delays have to go too, or a staggered reveal still waits its turn
           and the drawer's visibility flip stays queued behind a slide. */
        transition-delay: 0ms !important;
        animation-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   17. Motion — scroll reveals, the hero lock break, and the small flourishes
   site-motion.js tags elements with data-reveal, so nothing here can hide
   content unless the script is alive to reveal it again.
   ========================================================================== */

/* --- Reveal primitives -------------------------------------------------- */
/* The transition lives on the revealed state, never on the hidden one: tagging
   an element must drop it out of sight instantly, or the page would visibly
   fade its own content away before fading it back in. */
[data-reveal] { opacity: 0; }

[data-reveal="up"] { transform: translateY(22px); }
[data-reveal="step"] { transform: translateY(22px) scale(0.985); }
[data-reveal="scale"] { transform: scale(0.965); filter: blur(3px); }
[data-reveal="in-start"] { transform: translateX(calc(30px * var(--flow))); }
[data-reveal="in-end"] { transform: translateX(calc(-30px * var(--flow))); }

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
    transition:
        opacity 0.75s var(--ease-out) var(--reveal-delay, 0ms),
        transform 0.75s var(--ease-out) var(--reveal-delay, 0ms),
        filter 0.75s var(--ease-out) var(--reveal-delay, 0ms);
}

/* The connector track is the reveal for .step-arrow; the box itself just fades. */
.step-arrow[data-reveal] { transform: none; }

/* Section rules draw themselves rather than simply appearing. */
.section-header[data-reveal] h2::after { width: 0; }
.section-header[data-reveal].is-revealed h2::after {
    width: 3rem;
    transition: width 0.8s var(--ease-out) calc(var(--reveal-delay, 0ms) + 220ms);
}

/* --- Reading progress --------------------------------------------------- */
.scroll-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1400;
    height: 2px;
    pointer-events: none;
}

.scroll-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--iris-600), var(--violet-500), var(--iris-400));
    transform: scaleX(0);
    transform-origin: var(--progress-origin);
}

/* --- Hero lock mark ----------------------------------------------------- */
/* .lk-solid is the whole lock; .lk-pieces is the same silhouette cut into
   shards. Only one is ever visible, and they are swapped on the frame the
   bullet lands, so an intact lock is always a single path with no seams. */
.lock-mark { overflow: visible; }

.lk-shackle-art {
    fill: none;
    stroke: var(--accent);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lk-body-art { fill: var(--accent); stroke: none; }
.lk-keyhole { fill: var(--bg); }

/* A hairline in the page colour along every cut. Adjacent shards are one flat
   colour, so without it they melt back into a single blob the moment they
   overlap; with it, the crack pattern appears on impact and each falling piece
   keeps its own edge. */
.lk-pieces .lk-body-art {
    stroke: var(--bg);
    stroke-width: 0.5;
    stroke-linejoin: round;
}

.lk-frag {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.lk-pieces { visibility: hidden; }
.lock-mark.is-shattered .lk-pieces { visibility: visible; }
.lock-mark.is-shattered .lk-solid { visibility: hidden; }

/* The watermark lifts while the sequence plays and settles back afterwards. */
.hero .floating-logo-wrapper {
    opacity: var(--lock-alpha, 0.15);
    transition: opacity 0.55s var(--ease-out);
}

.hero .floating-logo-wrapper.is-broken { --lock-alpha: 0.24; }
.hero .floating-logo-wrapper.is-firing { --lock-alpha: 0.42; }

@media (max-width: 900px) {
    .hero .floating-logo-wrapper { --lock-alpha: 0.1; }
    .hero .floating-logo-wrapper.is-broken { --lock-alpha: 0.17; }
    .hero .floating-logo-wrapper.is-firing { --lock-alpha: 0.3; }
}

/* --- The C's hand, its pistol, and the shot ----------------------------- */
/* Two overlay layers, both absolutely positioned, transform-only and
   pointer-transparent, so the headline never moves and the hero never grows.
   The hand sits above the wordmark because it has to read as coming out of the
   C; the bullet sits below it, so a shot that crosses the word in English
   passes behind the letters instead of over them. */
.cd-shot-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint;
}

.cd-shot-layer.cd-under { z-index: 0; }
.hero .hero-content { z-index: 1; }

.cd-anchor {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    transform-origin: 0 0;
}

/* Sized from the cap height of the C it grows out of, so it stays in
   proportion at every breakpoint without a hard-coded pixel anywhere. */
.cd-hand {
    position: absolute;
    left: 0;
    top: 0;
    /* Both axes are stated outright. An absolutely positioned inline SVG with
       width:auto does not reliably take its width from the viewBox ratio — it
       collapsed to a 9px sliver, which is what made the hand look like a dot. */
    height: var(--cd-hand-h, 22px);
    width: calc(var(--cd-hand-h, 22px) * 1.625);
    /* The anchor is a zero-size point, and the base sheet gives every svg
       max-width:100% — which resolves against that zero and collapsed the hand
       to nothing. This is what reduced it to a dot next to the C. */
    max-width: none;
    margin-block-start: calc(var(--cd-hand-h, 22px) / -2);
    transform-origin: 0 50%;
    transform: translateX(-6%) scale(0.12);
    opacity: 0;
}

/* The hand shares the wordmark's colour and sits right on top of the C, so
   without a hairline of page colour behind each shape the fist melts into the
   letter and the pistol reads as one grey smudge. paint-order draws that
   hairline behind the fill, so it separates the parts without thinning them. */
.cd-hand .cd-skin,
.cd-hand .cd-steel {
    stroke: var(--bg);
    stroke-width: 1.2;
    stroke-linejoin: round;
    paint-order: stroke;
}

.cd-hand .cd-skin { fill: var(--accent); }
.cd-hand .cd-steel { fill: var(--ink-2); }

.cd-flash,
.cd-bullet,
.cd-spark {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

/* Deliberately smaller than the hand: it is a flash at the muzzle, not the
   thing you look at. */
.cd-flash {
    width: calc(var(--cd-hand-h, 22px) * 0.5);
    height: calc(var(--cd-hand-h, 22px) * 0.5);
    margin: calc(var(--cd-hand-h, 22px) * -0.25) 0 0 calc(var(--cd-hand-h, 22px) * -0.25);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--accent) 55%, transparent 72%);
}

/* A tracer: bright head, fading tail, aimed along the flight path. */
.cd-bullet {
    width: calc(var(--cd-hand-h, 22px) * 1.5);
    height: 3px;
    margin: -1.5px 0 0 calc(var(--cd-hand-h, 22px) * -0.75);
    border-radius: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 55%, #fff 100%);
    box-shadow: 0 0 6px 1px var(--accent-line);
}

.cd-spark {
    width: calc(var(--cd-hand-h, 22px) * 1.9);
    height: calc(var(--cd-hand-h, 22px) * 1.9);
    margin: calc(var(--cd-hand-h, 22px) * -0.95) 0 0 calc(var(--cd-hand-h, 22px) * -0.95);
    border-radius: 50%;
    border: 2px solid var(--accent);
}

/* None of the sequence exists for visitors who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    .cd-shot-layer { display: none; }
    .lk-pieces { visibility: hidden !important; }
    .lock-mark .lk-solid { visibility: visible !important; }
}

/* --- Directional glyphs ------------------------------------------------- */
/* These icons all mean "onward" or "back" in reading order, so they mirror
   when the page switches to English. The step connectors opt out: they set
   their own --arrow-transform, which also has to survive the stacked layout. */
html[dir="ltr"] .fa-arrow-left,
html[dir="ltr"] .fa-arrow-right,
html[dir="ltr"] .fa-long-arrow-alt-left,
html[dir="ltr"] .fa-long-arrow-alt-right,
html[dir="ltr"] .fa-chevron-left,
html[dir="ltr"] .fa-chevron-right,
html[dir="ltr"] .fa-angle-left,
html[dir="ltr"] .fa-angle-right { transform: scaleX(-1); }

/* --- Flourishes --------------------------------------------------------- */

/* A hairline of accent light along the top edge of a card on hover. */
.feature-card,
.reason,
.pricing-card,
.faq-item,
.terms-card,
.showcase-item,
.steps-horizontal .step { position: relative; }

.feature-card::before,
.reason::before,
.pricing-card::before,
.faq-item::before,
.terms-card::before,
.showcase-item::before,
.steps-horizontal .step::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
    transition: opacity var(--dur) var(--ease),
                inset-inline-start var(--dur) var(--ease),
                inset-inline-end var(--dur) var(--ease);
}

.feature-card:hover::before,
.reason:hover::before,
.pricing-card:hover::before,
.faq-item:hover::before,
.terms-card:hover::before,
.showcase-item:hover::before,
.steps-horizontal .step:hover::before { opacity: 1; inset-inline: 0; }

.pricing-card.special-offer::before { opacity: 1; inset-inline: 0; }

/* Icon chips lift with their card. */
.feature-card .feature-icon,
.reason > i,
.showcase-item > i,
.steps-horizontal .step-icon { transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }

.feature-card:hover .feature-icon,
.reason:hover > i,
.showcase-item:hover > i,
.steps-horizontal .step:hover .step-icon { transform: translateY(-2px) scale(1.06); }

/* A light sweep across primary buttons on hover. */
.btn-primary,
.btn-purchase,
.btn-cta-primary,
.btn-submit,
.btn-payment,
.check-btn { position: relative; overflow: hidden; }

.btn-primary::after,
.btn-purchase::after,
.btn-cta-primary::after,
.btn-submit::after,
.btn-payment::after,
.check-btn::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -60%;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}


.btn-primary:hover::after,
.btn-purchase:hover::after,
.btn-cta-primary:hover::after,
.btn-submit:hover::after,
.btn-payment:hover::after,
.check-btn:hover::after { animation: cd-sweep 0.7s var(--ease-out); }

@keyframes cd-sweep {
    0% { transform: translateX(0) skewX(-18deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateX(calc(280% * var(--flow) * -1)) skewX(-18deg); opacity: 0; }
}

/* The "best value" badge breathes very slightly. */
.offer-badge,
.plan-badge { animation: cd-breathe 4.5s var(--ease) infinite; }

@keyframes cd-breathe {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.045); }
}

/* Screenshot frame: a slow glint across the glass on hover. */
.screenshot-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.14) 50%, transparent 62%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
}

.screenshot-frame:hover::after { opacity: 1; }

/* Nav links grow a hairline underline instead of only tinting. */
.nav-menu > li > a:not(.btn-signup):not(.nav-account-btn) { position: relative; }

.nav-menu > li > a:not(.btn-signup):not(.nav-account-btn)::after {
    content: "";
    position: absolute;
    inset-block-end: 0.3rem;
    inset-inline: 0.75rem;
    height: 1.5px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: var(--flow-origin);
    transition: transform var(--dur) var(--ease);
}

.nav-menu > li > a:not(.btn-signup):not(.nav-account-btn):hover::after { transform: scaleX(1); }

@media (max-width: 1320px) {
    .nav-menu > li > a::after { display: none; }
}

/* Checklist ticks land with a small pop. */
.features-checklist .feature-item i,
.pricing-features li i,
.included-features li i { transition: transform var(--dur) var(--ease); }

.features-checklist .feature-item:hover i,
.pricing-features li:hover i { transform: scale(1.25); }

/* --- Overlays and notices ---------------------------------------------- */
/* The dialogs the payment flow raises now share the page's easing so an
   invoice, a renewal or a toast feels like part of the same product. */
.choice-modal,
.acct-modal,
.processing-content,
.waiting-content,
.renewal-content {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}

.choice-modal-overlay.show .choice-modal,
.acct-modal-overlay.show .acct-modal,
.processing-overlay.show .processing-content,
.payment-waiting-overlay.show .waiting-content,
.renewal-overlay.show .renewal-content {
    opacity: 1;
    transform: none;
}

/* The waiting steps read as a progress run, with the live one pulsing. */
.waiting-steps .step { position: relative; }

.waiting-steps .step + .step::before {
    content: "";
    position: absolute;
    inset-block-start: -0.5rem;
    inset-inline-start: 1.55rem;
    width: 2px;
    height: 0.5rem;
    background: var(--line-strong);
}

.waiting-steps .step.active { animation: cd-pulse 2.4s var(--ease) infinite; }

@keyframes cd-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(110, 123, 255, 0); }
    50% { box-shadow: 0 0 0 4px rgba(110, 123, 255, 0.12); }
}

.success-icon,
.renewal-success-icon { animation: cd-pop 0.55s var(--ease-out) both; }
.failed-icon,
.timeout-icon { animation: cd-pop 0.55s var(--ease-out) both; }

@keyframes cd-pop {
    0% { opacity: 0; transform: scale(0.6); }
    60% { transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

.license-key-box { animation: cd-pop 0.5s var(--ease-out) 0.15s both; }

/* --- Reduced motion ----------------------------------------------------- */
/* site-motion.js also stops tagging elements, but this covers the CSS-only
   sequences and anything already tagged before the preference changed. */
html.motion-reduced [data-reveal] { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
    .section-header[data-reveal] h2::after { width: 3rem; }
    .step-arrow::before { transform: none !important; }
    .step-arrow::after,
    .offer-badge,
    .plan-badge,
    .waiting-steps .step.active { animation: none !important; }
    .hero .floating-logo-wrapper { transition: none !important; }
}