/* ============================================================================
   ApaOne Bundle Platform — Bespoke Design System
   Ultra-modern 2026 SaaS/agency aesthetic. Hand-built component library so
   every page shares the exact same premium look. Brand tokens are derived
   from the official ApaOne Visual Identity (Midnight #000040, Free Speech
   Red #D00707, Whisper #E6E6E6) reconciled with the deep navy #071529.
   ============================================================================ */

/* -------------------------------------------------------------------------- */
/*  1. DESIGN TOKENS                                                           */
/* -------------------------------------------------------------------------- */
:root {
    /* Brand palette */
    --navy:        #071529;   /* dominant dark brand color            */
    --navy-2:      #0c2140;   /* raised navy surface                  */
    --navy-deep:   #000040;   /* official "Midnight Express"          */
    --red:         #D00707;   /* official "Free Speech Red" (accent)  */
    --red-bright:  #FF3333;   /* glow / hover accent                  */
    --grey:        #E6E6E6;   /* official "Whisper" light section     */
    --grey-2:      #f4f6fa;   /* softer light surface                 */
    --white:       #FFFFFF;

    /* Text */
    --ink:         #0b1b30;   /* primary text on light                */
    --ink-soft:    #5b6472;   /* muted text on light                  */
    --ink-faint:   #8a94a3;
    --on-dark:     rgba(255,255,255,.92);
    --on-dark-soft:rgba(255,255,255,.66);

    /* Effects */
    --radius:      18px;
    --radius-lg:   26px;
    --radius-sm:   12px;
    --shadow-sm:   0 4px 14px rgba(7,21,41,.06);
    --shadow:      0 18px 40px rgba(7,21,41,.10);
    --shadow-lg:   0 40px 80px rgba(7,21,41,.18);
    --shadow-red:  0 16px 34px rgba(208,7,7,.28);
    --ring:        0 0 0 4px rgba(208,7,7,.16);

    --gradient-navy: linear-gradient(150deg,#071529 0%,#0a1c38 55%,#000040 100%);
    --gradient-red:  linear-gradient(135deg,#FF3333 0%,#D00707 100%);
    --gradient-text: linear-gradient(90deg,#071529 0%,#0c2140 60%,#D00707 130%);

    --container: 1200px;
    --ease: cubic-bezier(.22,.61,.36,1);
    --t: .35s var(--ease);

    --font: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* -------------------------------------------------------------------------- */
/*  2. RESET & BASE                                                            */
/* -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--white);
    line-height: 1.65;
    font-size: 16px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input,textarea,select { font-family: inherit; font-size: 1rem; }
ul { list-style: none; }
h1,h2,h3,h4 { line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
::selection { background: var(--red); color: #fff; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: 8px;
}

/* -------------------------------------------------------------------------- */
/*  3. LAYOUT PRIMITIVES                                                       */
/* -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.container-wide { max-width: 1360px; }
.container-narrow { max-width: 820px; }

.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--grey { background: var(--grey-2); }
.section--whisper { background: var(--grey); }
.section--navy { background: var(--gradient-navy); color: var(--on-dark); }
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4 { color: #fff; }
.section--tight { padding: clamp(48px,6vw,80px) 0; }

.section-head { max-width: 720px; margin: 0 auto clamp(38px,5vw,64px); text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--red); margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red); display: inline-block; }
.section--navy .eyebrow { color: var(--red-bright); }
.section-title { font-size: clamp(30px, 4vw, 46px); font-weight: 800; }
.section-subtitle { margin-top: 16px; font-size: clamp(16px,1.4vw,19px); color: var(--ink-soft); font-weight: 400; }
.section--navy .section-subtitle { color: var(--on-dark-soft); }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.text-red { color: var(--red); }
.text-center { text-align: center; }

/* -------------------------------------------------------------------------- */
/*  4. BUTTONS                                                                 */
/* -------------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--navy);
    --btn-fg: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 28px; border-radius: 999px;
    font-weight: 700; font-size: 15px; letter-spacing: .01em;
    background: var(--btn-bg); color: var(--btn-fg);
    transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
    position: relative; white-space: nowrap; cursor: pointer;
    border: 1.5px solid transparent;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; }

.btn-primary { --btn-bg: var(--red); box-shadow: var(--shadow-red); }
.btn-primary:hover { background: var(--red-bright); box-shadow: 0 22px 44px rgba(255,51,51,.42); }
.btn-dark { --btn-bg: var(--navy); box-shadow: var(--shadow); }
.btn-dark:hover { background: var(--navy-2); }
.btn-light { --btn-bg: #fff; --btn-fg: var(--navy); box-shadow: var(--shadow-sm); }
.btn-light:hover { background: var(--grey); }
.btn-outline { background: transparent; color: var(--navy); border-color: rgba(7,21,41,.18); }
.btn-outline:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-outline-light:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); padding-inline: 12px; }
.btn-ghost:hover { color: var(--red); transform: translateY(0); }
.btn-lg { padding: 17px 36px; font-size: 16px; }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-block { width: 100%; }

/* -------------------------------------------------------------------------- */
/*  5. BADGES & PILLS                                                          */
/* -------------------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    background: var(--grey); color: var(--navy);
}
.badge-red { background: var(--red); color: #fff; }
.badge-lifetime { background: var(--gradient-red); color: #fff; box-shadow: var(--shadow-red); }
.badge-new { background: #0a8f3c; color: #fff; }
.badge-best { background: var(--navy); color: #fff; }
.badge-soft { background: rgba(208,7,7,.10); color: var(--red); }
.badge-industry { background: rgba(7,21,41,.06); color: var(--navy); text-transform: none; letter-spacing: 0; font-weight: 600; }

.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* -------------------------------------------------------------------------- */
/*  6. CARDS                                                                   */
/* -------------------------------------------------------------------------- */
.card {
    background: #fff; border-radius: var(--radius);
    border: 1px solid rgba(7,21,41,.06); box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.glass-card {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

/* --- Bundle product card --- */
.bundle-card {
    background: #fff; border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid rgba(7,21,41,.07); box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
    position: relative;
}
.bundle-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(208,7,7,.25); }
.bundle-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--grey); }
.bundle-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.bundle-card:hover .bundle-card__media img { transform: scale(1.06); }
.bundle-card__tags { position: absolute; top: 14px; left: 14px; display: flex; gap: 7px; flex-wrap: wrap; z-index: 2; }
.bundle-card__demo {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(0deg, rgba(7,21,41,.72), rgba(7,21,41,.05));
    opacity: 0; transition: opacity var(--t);
}
.bundle-card:hover .bundle-card__demo { opacity: 1; }
.bundle-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.bundle-card__industry { font-size: 12.5px; font-weight: 700; color: var(--red); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.bundle-card__title { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.bundle-card__title a:hover { color: var(--red); }
.bundle-card__desc { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 16px; }
.bundle-card__features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.bundle-card__features span { font-size: 11.5px; font-weight: 600; color: var(--navy); background: var(--grey-2); padding: 4px 10px; border-radius: 999px; }
.bundle-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(7,21,41,.07); }
.bundle-card__price { display: flex; flex-direction: column; line-height: 1.1; }
.bundle-card__price small { font-size: 11px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.bundle-card__price b { font-size: 24px; font-weight: 800; color: var(--navy); }

/* --- Industry card --- */
.industry-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 26px 22px; border-radius: var(--radius); background: #fff;
    border: 1px solid rgba(7,21,41,.07); box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t), background var(--t);
    text-align: left; position: relative; overflow: hidden;
}
.industry-card::after { content: ""; position: absolute; inset: auto -40px -40px auto; width: 120px; height: 120px; background: radial-gradient(circle, rgba(208,7,7,.10), transparent 70%); opacity: 0; transition: opacity var(--t); }
.industry-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.industry-card:hover::after { opacity: 1; }
.industry-card__icon { font-size: 30px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: var(--grey-2); }
.industry-card__name { font-size: 17px; font-weight: 700; color: var(--navy); }
.industry-card__count { font-size: 13px; color: var(--ink-faint); font-weight: 600; }
.industry-card__desc { font-size: 13.5px; color: var(--ink-soft); }

/* --- Feature / why card --- */
.feature-card { padding: 30px 26px; border-radius: var(--radius); background: #fff; border: 1px solid rgba(7,21,41,.07); box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t); }
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.feature-card__icon { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; font-size: 24px; margin-bottom: 18px; background: var(--gradient-navy); color: #fff; }
.feature-card h3 { font-size: 19px; margin-bottom: 10px; }
.feature-card p { color: var(--ink-soft); font-size: 14.5px; }

/* --- Step card (How it works) --- */
.step-card { position: relative; padding: 34px 26px 28px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.step-card__num { font-size: 54px; font-weight: 900; line-height: 1; background: var(--gradient-red); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 14px; }
.step-card h3 { color: #fff; font-size: 20px; margin-bottom: 8px; }
.step-card p { color: var(--on-dark-soft); font-size: 14.5px; }

/* --- Testimonial card --- */
.testimonial-card { background: #fff; border-radius: var(--radius); padding: 30px 28px; border: 1px solid rgba(7,21,41,.07); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 18px; height: 100%; }
.testimonial-card__stars { color: #f5a623; font-size: 15px; letter-spacing: 2px; }
.testimonial-card__quote { font-size: 15.5px; color: var(--ink); font-weight: 500; line-height: 1.7; }
.testimonial-card__author { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.testimonial-card__author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testimonial-card__author b { display: block; font-size: 15px; color: var(--navy); }
.testimonial-card__author span { font-size: 13px; color: var(--ink-faint); }

/* -------------------------------------------------------------------------- */
/*  7. BENTO GRID                                                              */
/* -------------------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(160px, auto); gap: 20px; }
.bento-item { border-radius: var(--radius-lg); padding: 30px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-sm); border: 1px solid rgba(7,21,41,.07); background: #fff; transition: transform var(--t), box-shadow var(--t); }
.bento-item:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.bento-item--wide { grid-column: span 2; }
.bento-item--tall { grid-row: span 2; }
.bento-item--navy { background: var(--gradient-navy); color: #fff; border-color: transparent; }
.bento-item--navy h3, .bento-item--navy h2 { color: #fff; }
.bento-item--red { background: var(--gradient-red); color: #fff; border-color: transparent; box-shadow: var(--shadow-red); }
.bento-item--grey { background: var(--grey); }
.bento-stat { font-size: clamp(34px,4vw,52px); font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.bento-item h3 { font-size: 20px; margin-bottom: 8px; }
.bento-item p { font-size: 14.5px; color: var(--ink-soft); }
.bento-item--navy p, .bento-item--red p { color: rgba(255,255,255,.8); }

/* -------------------------------------------------------------------------- */
/*  8. HEADER / NAVIGATION                                                     */
/* -------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 900; transition: background var(--t), box-shadow var(--t), padding var(--t); }
.site-header__inner {
    display: flex; align-items: center; gap: 26px;
    padding: 16px 0; transition: padding var(--t);
}
.site-header {
    background: rgba(7,21,41,.72);
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header.scrolled { background: rgba(7,21,41,.96); box-shadow: 0 10px 30px rgba(0,0,0,.25); }

.brand-logo { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 900; font-size: 24px; letter-spacing: -.02em; color: #fff; }
.brand-logo .b-apa { color: #fff; }
.brand-logo .b-one { color: var(--red-bright); }
.brand-logo .b-dot { color: var(--red-bright); }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-link { color: var(--on-dark-soft); font-weight: 600; font-size: 14.5px; padding: 9px 14px; border-radius: 999px; transition: color var(--t), background var(--t); position: relative; }
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(255,255,255,.08); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.nav-icon-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.08); transition: background var(--t), transform var(--t); }
.nav-icon-btn:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.nav-icon-btn svg { width: 20px; height: 20px; }
.cart-badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--navy); }

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; color: #fff; background: rgba(255,255,255,.08); }
.nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; margin: 4px auto; transition: transform var(--t), opacity var(--t); }
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu drawer */
.mobile-menu { position: fixed; inset: 0 0 0 auto; width: min(360px, 86vw); background: var(--gradient-navy); z-index: 1000; transform: translateX(100%); transition: transform .4s var(--ease); padding: 90px 28px 40px; display: flex; flex-direction: column; gap: 6px; box-shadow: -20px 0 60px rgba(0,0,0,.4); overflow-y: auto; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a { color: #fff; font-weight: 600; font-size: 17px; padding: 13px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-menu .btn { margin-top: 18px; }
.menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); backdrop-filter: blur(2px); }
.menu-backdrop.open { opacity: 1; visibility: visible; }

/* -------------------------------------------------------------------------- */
/*  9. HERO                                                                    */
/* -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--gradient-navy); color: #fff; overflow: hidden; padding: clamp(70px,10vw,130px) 0 clamp(70px,9vw,120px); }
.hero::before { content: ""; position: absolute; top: -20%; right: -10%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(208,7,7,.28), transparent 62%); filter: blur(20px); }
.hero::after { content: ""; position: absolute; bottom: -30%; left: -10%; width: 560px; height: 560px; background: radial-gradient(circle, rgba(12,33,64,.9), transparent 60%); }
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero__badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: 13px; font-weight: 700; letter-spacing: .04em; margin-bottom: 26px; }
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-bright); box-shadow: 0 0 0 4px rgba(255,51,51,.25); }
.hero__title { font-size: clamp(34px, 5.4vw, 66px); font-weight: 900; line-height: 1.04; letter-spacing: -.03em; color: #fff; }
.hero__title .accent { background: var(--gradient-red); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__text { margin-top: 22px; font-size: clamp(16px,1.5vw,19px); color: var(--on-dark-soft); max-width: 560px; }
.hero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__stats { margin-top: 40px; display: flex; gap: 34px; flex-wrap: wrap; }
.hero__stat b { display: block; font-size: 28px; font-weight: 900; color: #fff; }
.hero__stat span { font-size: 13px; color: var(--on-dark-soft); font-weight: 500; }

/* Hero product preview mockup */
.hero__preview { position: relative; }
.browser-mock { border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); background: #0d1f3a; }
.browser-mock__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08); }
.browser-mock__bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.browser-mock__bar i:nth-child(1){ background:#ff5f57;} .browser-mock__bar i:nth-child(2){ background:#febc2e;} .browser-mock__bar i:nth-child(3){ background:#28c840;}
.browser-mock__url { margin-left: 12px; flex: 1; background: rgba(255,255,255,.08); border-radius: 8px; font-size: 12px; color: rgba(255,255,255,.6); padding: 5px 12px; }
.browser-mock img { width: 100%; display: block; }
.hero__float { position: absolute; padding: 14px 18px; border-radius: 14px; background: #fff; color: var(--navy); box-shadow: var(--shadow-lg); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.hero__float--tl { top: -22px; left: -26px; }
.hero__float--br { bottom: -22px; right: -20px; }
.hero__float .chip { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--gradient-red); color: #fff; }

/* -------------------------------------------------------------------------- */
/*  10. FORMS                                                                  */
/* -------------------------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field label, .form-label { display: block; font-size: 13.5px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.form-control, .input, select.form-control, textarea.form-control {
    width: 100%; padding: 13px 16px; border-radius: 12px;
    border: 1.5px solid rgba(7,21,41,.14); background: #fff; color: var(--ink);
    transition: border-color var(--t), box-shadow var(--t);
}
.form-control:focus, .input:focus { border-color: var(--red); box-shadow: var(--ring); outline: none; }
textarea.form-control { min-height: 130px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }
.field-error { font-size: 12.5px; color: var(--red); margin-top: 6px; font-weight: 600; }
.form-control.is-invalid { border-color: var(--red); }
.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--red); }

.search-bar { position: relative; }
.search-bar input { width: 100%; padding: 16px 20px 16px 52px; border-radius: 999px; border: 1.5px solid rgba(7,21,41,.12); font-size: 15px; box-shadow: var(--shadow-sm); }
.search-bar input:focus { border-color: var(--red); box-shadow: var(--ring); outline: none; }
.search-bar svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-faint); }

/* -------------------------------------------------------------------------- */
/*  11. AUTH / PANEL CARDS                                                     */
/* -------------------------------------------------------------------------- */
.auth-wrap { min-height: 78vh; display: grid; place-items: center; padding: 60px 20px; }
.auth-card { width: 100%; max-width: 460px; background: #fff; border-radius: var(--radius-lg); padding: 44px 40px; box-shadow: var(--shadow-lg); border: 1px solid rgba(7,21,41,.06); }
.auth-card h1 { font-size: 26px; margin-bottom: 6px; }
.auth-card .sub { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 28px; }
.auth-alt { text-align: center; margin-top: 22px; font-size: 14px; color: var(--ink-soft); }
.auth-alt a { color: var(--red); font-weight: 700; }

.panel { background: #fff; border-radius: var(--radius); border: 1px solid rgba(7,21,41,.07); box-shadow: var(--shadow-sm); }
.panel-head { padding: 22px 26px; border-bottom: 1px solid rgba(7,21,41,.07); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-head h2 { font-size: 18px; }
.panel-body { padding: 26px; }

/* -------------------------------------------------------------------------- */
/*  12. FLASH MESSAGES                                                         */
/* -------------------------------------------------------------------------- */
.flash { padding: 14px 18px; border-radius: 12px; font-size: 14.5px; font-weight: 600; margin-bottom: 14px; border: 1px solid; display: flex; align-items: center; gap: 10px; }
.flash::before { font-weight: 800; }
.flash-success { background: #eafaf0; color: #0a7a34; border-color: #bde9cd; }
.flash-success::before { content: "✓"; }
.flash-error { background: #fdecec; color: #b31414; border-color: #f6c9c9; }
.flash-error::before { content: "!"; }
.flash-info { background: #eaf1fb; color: #14509c; border-color: #c8dbf5; }
.flash-info::before { content: "i"; }

/* -------------------------------------------------------------------------- */
/*  13. FAQ ACCORDION                                                          */
/* -------------------------------------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid rgba(7,21,41,.08); border-radius: 14px; overflow: hidden; transition: box-shadow var(--t), border-color var(--t); }
.faq-item.open { box-shadow: var(--shadow); border-color: rgba(208,7,7,.25); }
.faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: 700; font-size: 16px; color: var(--navy); }
.faq-q .icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--grey-2); display: grid; place-items: center; transition: transform var(--t), background var(--t), color var(--t); font-size: 18px; }
.faq-item.open .faq-q .icon { background: var(--red); color: #fff; transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a > div { padding: 0 24px 22px; color: var(--ink-soft); font-size: 14.5px; }

/* -------------------------------------------------------------------------- */
/*  14. BREADCRUMB                                                             */
/* -------------------------------------------------------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-faint); font-weight: 600; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .sep { opacity: .5; }

/* -------------------------------------------------------------------------- */
/*  15. FOOTER                                                                 */
/* -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-deep); color: var(--on-dark-soft); padding: 72px 0 0; position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 54px; }
.footer-brand .brand-logo { font-size: 26px; margin-bottom: 16px; }
.footer-about { font-size: 14px; max-width: 320px; margin-bottom: 20px; }
.footer-col h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 14px; color: var(--on-dark-soft); transition: color var(--t), padding-left var(--t); }
.footer-col a:hover { color: #fff; padding-left: 5px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.06); display: grid; place-items: center; transition: background var(--t), transform var(--t); }
.footer-social a:hover { background: var(--red); transform: translateY(-3px); }
.footer-social svg { width: 18px; height: 18px; color: #fff; }
.newsletter { display: flex; gap: 8px; margin-top: 14px; max-width: 340px; }
.newsletter input { flex: 1; padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; }
.newsletter input::placeholder { color: rgba(255,255,255,.5); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.footer-bottom a:hover { color: #fff; }

/* -------------------------------------------------------------------------- */
/*  16. COOKIE BANNER                                                          */
/* -------------------------------------------------------------------------- */
.cookie-banner { position: fixed; left: 50%; transform: translateX(-50%) translateY(140%); bottom: 22px; z-index: 950; width: min(680px, calc(100% - 32px)); background: #fff; color: var(--ink); border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid rgba(7,21,41,.08); padding: 20px 24px; display: flex; align-items: center; gap: 18px; transition: transform .5s var(--ease); }
.cookie-banner.show { transform: translateX(-50%) translateY(0); }
.cookie-banner p { font-size: 13.5px; color: var(--ink-soft); flex: 1; }
.cookie-banner a { color: var(--red); font-weight: 700; }

/* -------------------------------------------------------------------------- */
/*  17. PAGE HERO (interior pages)                                             */
/* -------------------------------------------------------------------------- */
.page-hero { background: var(--gradient-navy); color: #fff; padding: clamp(56px,8vw,110px) 0 clamp(48px,6vw,80px); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; top: -30%; right: -8%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(208,7,7,.22), transparent 62%); }
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: clamp(30px,4.6vw,54px); font-weight: 900; letter-spacing: -.03em; }
.page-hero p { color: var(--on-dark-soft); font-size: clamp(15px,1.4vw,18px); max-width: 620px; margin-top: 14px; }

/* -------------------------------------------------------------------------- */
/*  18. UTILITIES                                                              */
/* -------------------------------------------------------------------------- */
.mt-0{margin-top:0!important;} .mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;} .mt-4{margin-top:32px;} .mt-5{margin-top:48px;}
.mb-0{margin-bottom:0!important;} .mb-2{margin-bottom:16px;} .mb-3{margin-bottom:24px;} .mb-4{margin-bottom:32px;}
.flex{display:flex;} .flex-between{display:flex;align-items:center;justify-content:space-between;gap:16px;} .flex-center{display:flex;align-items:center;justify-content:center;gap:10px;} .items-center{align-items:center;} .gap-2{gap:16px;} .gap-3{gap:24px;} .flex-wrap{flex-wrap:wrap;}
.divider{height:1px;background:rgba(7,21,41,.08);border:0;margin:26px 0;}
.list-check{display:flex;flex-direction:column;gap:12px;}
.list-check li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--ink-soft);}
.list-check li::before{content:"";flex-shrink:0;width:22px;height:22px;margin-top:1px;border-radius:50%;background:rgba(208,7,7,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23D00707' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;}
.section--navy .list-check li{color:var(--on-dark-soft);}
.empty-state{text-align:center;padding:60px 20px;color:var(--ink-soft);}
.empty-state svg{width:60px;height:60px;color:var(--ink-faint);margin:0 auto 18px;}

/* --- Data table (admin / account) --- */
.table-wrap{overflow-x:auto;border-radius:14px;border:1px solid rgba(7,21,41,.08);}
table.data{width:100%;border-collapse:collapse;min-width:640px;background:#fff;}
table.data th{ text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);font-weight:700;padding:15px 18px;border-bottom:1px solid rgba(7,21,41,.08);background:var(--grey-2);}
table.data td{ padding:15px 18px;border-bottom:1px solid rgba(7,21,41,.06);font-size:14px;color:var(--ink);}
table.data tr:last-child td{border-bottom:0;}
table.data tr:hover td{background:rgba(7,21,41,.02);}
.status-pill{display:inline-flex;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.status-paid{background:#eafaf0;color:#0a7a34;} .status-pending{background:#fff3e0;color:#b26a00;} .status-refunded{background:#fdecec;color:#b31414;}
.status-active{background:#eafaf0;color:#0a7a34;} .status-draft{background:#eef0f4;color:#5b6472;}

.license-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.04em;background:var(--navy);color:#fff;padding:8px 14px;border-radius:10px;display:inline-flex;align-items:center;gap:10px;font-size:13.5px;}
.copy-btn{background:rgba(255,255,255,.15);color:#fff;border-radius:6px;padding:3px 9px;font-size:11px;font-weight:700;transition:background var(--t);}
.copy-btn:hover{background:var(--red);}

/* -------------------------------------------------------------------------- */
/*  19. GSAP REVEAL — no-JS safe (JS sets the pre-animation state)             */
/* -------------------------------------------------------------------------- */
.js [data-gsap]{will-change:transform,opacity;}

/* -------------------------------------------------------------------------- */
/*  20. RESPONSIVE                                                             */
/* -------------------------------------------------------------------------- */
@media (max-width: 1024px){
    .hero__inner{grid-template-columns:1fr;gap:44px;}
    .hero__preview{max-width:560px;}
    .bento{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .grid-4{grid-template-columns:repeat(2,1fr);}
    .grid-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 820px){
    .nav-links{display:none;}
    .nav-toggle{display:block;}
    .grid-2,.grid-3,.grid-4,.grid-auto{grid-template-columns:1fr;}
    .bento{grid-template-columns:1fr;}
    .bento-item--wide,.bento-item--tall{grid-column:auto;grid-row:auto;}
    .form-row{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;gap:34px;}
    .hero__float{display:none;}
}
@media (max-width: 480px){
    .container{padding-inline:18px;}
    .btn{width:100%;}
    .hero__cta .btn{width:100%;}
    .cookie-banner{flex-direction:column;text-align:center;}
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* -------------------------------------------------------------------------- */
/*  21. TOASTS + INTERACTIVE STATES (referenced by main.js)                    */
/* -------------------------------------------------------------------------- */
#toast-wrap{position:fixed;top:22px;right:22px;z-index:1200;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.toast{pointer-events:auto;min-width:220px;max-width:340px;padding:14px 18px;border-radius:12px;font-size:14px;font-weight:600;color:#fff;box-shadow:var(--shadow-lg);opacity:0;transform:translateX(30px);transition:opacity .35s var(--ease),transform .35s var(--ease);display:flex;align-items:center;gap:10px;}
.toast.show{opacity:1;transform:translateX(0);}
.toast::before{font-weight:800;font-size:16px;}
.toast-success{background:linear-gradient(135deg,#0a9c43,#0a7a34);} .toast-success::before{content:"✓";}
.toast-error{background:var(--gradient-red);} .toast-error::before{content:"!";}
.toast-info{background:var(--gradient-navy);} .toast-info::before{content:"i";}

.btn.is-loading{opacity:.75;pointer-events:none;}
.cart-badge.pop{animation:cartPop .3s var(--ease);}
@keyframes cartPop{0%{transform:scale(.4);}60%{transform:scale(1.3);}100%{transform:scale(1);}}

#bundle-catalog{transition:opacity var(--t);position:relative;}
#bundle-catalog.is-loading{opacity:.45;pointer-events:none;}
.catalog-spinner{display:none;}
#bundle-catalog.is-loading .catalog-spinner{display:block;}

/* Small spinner used on AJAX regions */
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(7,21,41,.12);border-top-color:var(--red);animation:spin .8s linear infinite;margin:40px auto;}
@keyframes spin{to{transform:rotate(360deg);}}

/* -------------------------------------------------------------------------- */
/*  22. DOWNLOAD CENTER CARDS (downloads.php)                                  */
/* -------------------------------------------------------------------------- */
.card{padding:24px;}                         /* base padding for plain .card blocks */
.download-card__head{display:flex;gap:16px;align-items:center;margin-bottom:18px;}
.download-card__thumb{width:88px;height:66px;object-fit:cover;border-radius:12px;flex-shrink:0;}
.download-card__meta{display:flex;flex-direction:column;gap:5px;min-width:0;}
.download-card__title{font-size:18px;font-weight:800;color:var(--navy);line-height:1.25;}
.download-card__date{font-size:12.5px;color:var(--ink-faint);font-weight:600;}
.download-card__license{margin-bottom:18px;}
.download-card__license label{display:block;margin-bottom:7px;}
.download-card__actions{display:flex;gap:10px;flex-wrap:wrap;}
.download-card__actions .btn{flex:1 1 auto;}
.download-card__note{margin-top:14px;text-align:center;}

/* -------------------------------------------------------------------------- */
/*  23. RESPONSIVE COLLAPSE for inline two-column page layouts                 */
/*      (catalog sidebar, cart/checkout/product summaries, docs/legal navs)   */
/* -------------------------------------------------------------------------- */
@media (max-width: 900px){
    [style*="grid-template-columns:260px 1fr"],
    [style*="grid-template-columns: 260px 1fr"],
    [style*="grid-template-columns:240px 1fr"],
    [style*="grid-template-columns: 240px 1fr"],
    [style*="grid-template-columns:1fr 340px"],
    [style*="grid-template-columns: 1fr 340px"],
    [style*="grid-template-columns:1fr 360px"],
    [style*="grid-template-columns: 1fr 360px"],
    [style*="grid-template-columns:1fr 380px"],
    [style*="grid-template-columns: 1fr 380px"],
    [style*="grid-template-columns:1.7fr 1fr"],
    [style*="grid-template-columns: 1.7fr 1fr"],
    [style*="grid-template-columns:1.1fr .9fr"],
    [style*="grid-template-columns: 1.1fr .9fr"]{
        grid-template-columns: 1fr !important;
    }
    /* Any sticky sidebar should stop sticking once stacked. */
    [style*="position:sticky"],[style*="position: sticky"]{position:static !important;}
}

/* -------------------------------------------------------------------------- */
/*  24. PAGINATION (catalogue + blog)                                          */
/* -------------------------------------------------------------------------- */
.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:44px;}
.page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 13px;border-radius:10px;border:1px solid rgba(7,21,41,.12);background:#fff;color:var(--navy);font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;transition:border-color var(--t),background var(--t),color var(--t);font-family:inherit;}
.page-btn:hover{border-color:var(--navy);}
.page-btn.is-active{background:var(--navy);color:#fff;border-color:var(--navy);}
.page-btn[disabled]{opacity:.4;cursor:not-allowed;}