/*
 * ============================================================
 * PUSK DESIGN SYSTEM V1
 * SITE INTEGRATION BUNDLE - CANDIDATE ONLY
 * ============================================================
 *
 * ORDER:
 * 1. Design tokens
 * 2. Component primitives
 * 3. Site V2 adapter
 *
 * IMPORTANT VISUAL CONTRACT:
 * - Existing site body owns the global background.
 * - New sections remain foreground layers.
 * - Generated visual assets must not contain baked page backgrounds.
 * - Transparent or controlled translucent foreground surfaces only.
 *
 * NOT CONNECTED TO SITE.
 * NOT PRODUCTION.
 * ============================================================
 */


/* ============================================================
   01 - TOKENS
   ============================================================ */

/*
 * PUSK Design System v1
 * Canonical token candidate
 *
 * STATUS:
 * - Candidate only
 * - Not connected to production
 * - Not connected to site-web
 * - Not connected to cabinet-web
 *
 * DESIGN CONTRACT:
 * - Main content max-width: 1280px
 * - Optional wide section max-width: 1320px
 * - Do not scale UI proportionally on 2K / 4K displays
 * - Full-bleed backgrounds are allowed
 * - Primary text, controls and content stay on the common grid
 */

:root {
    /* =========================================================
       TYPOGRAPHY
       ========================================================= */

    --pusk-font-display: "Russo One", sans-serif;
    --pusk-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --pusk-font-size-h1-desktop: 60px;
    --pusk-font-size-h1-tablet: 44px;
    --pusk-font-size-h1-mobile: 34px;

    --pusk-font-size-body: 17px;
    --pusk-line-height-body: 1.65;

    --pusk-line-height-display: 1.05;

    /* =========================================================
       LAYOUT
       ========================================================= */

    --pusk-content-max: 1280px;
    --pusk-content-wide-max: 1320px;

    --pusk-page-gutter-desktop: 20px;
    --pusk-page-gutter-mobile: 14px;

    /* Documentation tokens.
       CSS custom properties are not used directly in @media rules. */
    --pusk-breakpoint-tablet: 1100px;
    --pusk-breakpoint-mobile: 720px;

    /* =========================================================
       SECTION RHYTHM
       ========================================================= */

    --pusk-section-space-desktop: 96px;
    --pusk-section-space-tablet: 72px;
    --pusk-section-space-mobile: 56px;

    /* =========================================================
       CONTROLS
       ========================================================= */

    --pusk-control-height-default: 48px;
    --pusk-touch-target-min: 44px;

    /* =========================================================
       SPACING
       ========================================================= */

    --pusk-space-1: 4px;
    --pusk-space-2: 8px;
    --pusk-space-3: 12px;
    --pusk-space-4: 16px;
    --pusk-space-5: 20px;
    --pusk-space-6: 24px;
    --pusk-space-8: 32px;
    --pusk-space-10: 40px;
    --pusk-space-12: 48px;
    --pusk-space-16: 64px;
    --pusk-space-18: 72px;
    --pusk-space-24: 96px;

    /* =========================================================
       RADIUS
       ========================================================= */

    --pusk-radius-sm: 10px;
    --pusk-radius-md: 14px;
    --pusk-radius-lg: 18px;
    --pusk-radius-xl: 24px;
    --pusk-radius-2xl: 28px;
    --pusk-radius-pill: 999px;

    /* =========================================================
       CORE COLORS
       Preserved from the current PUSK V2 visual language.
       ========================================================= */

    --pusk-color-bg: #02030a;

    --pusk-color-panel: rgba(9, 13, 31, 0.68);
    --pusk-color-panel-strong: rgba(12, 18, 42, 0.90);

    --pusk-color-text: #f8f9ff;
    --pusk-color-text-soft: rgba(225, 233, 255, 0.68);
    --pusk-color-text-muted: rgba(196, 207, 235, 0.55);

    --pusk-color-line: rgba(143, 177, 255, 0.16);
    --pusk-color-line-strong: rgba(88, 218, 255, 0.36);

    --pusk-color-blue: #5c8cff;
    --pusk-color-cyan: #66e9ff;
    --pusk-color-violet: #a267ff;

    /* =========================================================
       MOTION
       ========================================================= */

    --pusk-motion-fast: 140ms;
    --pusk-motion-base: 220ms;
    --pusk-motion-slow: 360ms;

    --pusk-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* ============================================================
   02 - COMPONENT PRIMITIVES
   ============================================================ */

/*
 * PUSK Design System v1
 * Layout and component primitives
 *
 * IMPORTANT:
 * The website owns the global background.
 *
 * Components in this layer MUST NOT:
 * - provide page backgrounds
 * - contain background images
 * - contain generated section artwork
 * - cover the global PUSK background with opaque surfaces
 *
 * Transparent and controlled translucent foreground surfaces are allowed.
 *
 * Requires:
 * pusk-design-system-v1.tokens.css
 */

/* ============================================================
   PAGE / CONTENT GRID
   ============================================================ */

.pusk-page {
    width: 100%;
    min-width: 320px;
}

.pusk-container {
    width: min(
        calc(100% - (var(--pusk-page-gutter-desktop) * 2)),
        var(--pusk-content-max)
    );
    margin-inline: auto;
}

.pusk-container--wide {
    width: min(
        calc(100% - (var(--pusk-page-gutter-desktop) * 2)),
        var(--pusk-content-wide-max)
    );
    margin-inline: auto;
}

/* ============================================================
   SECTIONS

   Sections remain transparent.
   The site's global background remains visible.
   ============================================================ */

.pusk-section {
    position: relative;
    padding-block: var(--pusk-section-space-desktop);
    background: transparent;
}

.pusk-section--compact {
    padding-block: var(--pusk-section-space-tablet);
}

.pusk-section__inner {
    position: relative;
    z-index: 1;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.pusk-display {
    margin: 0;
    font-family: var(--pusk-font-display);
    font-weight: 400;
    line-height: var(--pusk-line-height-display);
    letter-spacing: -0.02em;
}

.pusk-display--hero {
    font-size: var(--pusk-font-size-h1-desktop);
}

.pusk-body {
    margin: 0;
    font-family: var(--pusk-font-body);
    font-size: var(--pusk-font-size-body);
    line-height: var(--pusk-line-height-body);
    color: var(--pusk-color-text-soft);
}

/* ============================================================
   FOREGROUND SURFACES

   Default block has NO background.
   Glass is opt-in and translucent only.
   ============================================================ */

.pusk-block {
    position: relative;
    background: transparent;
}

.pusk-surface {
    position: relative;
    border: 1px solid var(--pusk-color-line);
    border-radius: var(--pusk-radius-xl);
    background: transparent;
}

.pusk-surface--glass {
    border-color: var(--pusk-color-line);
    background: rgba(9, 13, 31, 0.48);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.pusk-surface--glass-strong {
    border-color: var(--pusk-color-line-strong);
    background: rgba(12, 18, 42, 0.62);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

/* ============================================================
   CARDS
   ============================================================ */

.pusk-card {
    position: relative;
    padding: var(--pusk-space-6);
    border: 1px solid var(--pusk-color-line);
    border-radius: var(--pusk-radius-xl);
    background: transparent;
}

.pusk-card--glass {
    background: rgba(9, 13, 31, 0.44);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.pusk-button {
    min-height: var(--pusk-control-height-default);
    padding-inline: var(--pusk-space-6);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pusk-space-2);

    border: 1px solid transparent;
    border-radius: var(--pusk-radius-md);

    font-family: var(--pusk-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;
    cursor: pointer;

    transition:
        transform var(--pusk-motion-fast) var(--pusk-ease-standard),
        border-color var(--pusk-motion-base) var(--pusk-ease-standard),
        background-color var(--pusk-motion-base) var(--pusk-ease-standard),
        box-shadow var(--pusk-motion-base) var(--pusk-ease-standard);
}

.pusk-button--primary {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--pusk-color-blue),
        var(--pusk-color-violet)
    );
}

.pusk-button--ghost {
    color: var(--pusk-color-text);
    border-color: var(--pusk-color-line-strong);
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pusk-button:hover {
    transform: translateY(-1px);
}

.pusk-button:focus-visible {
    outline: 2px solid var(--pusk-color-cyan);
    outline-offset: 3px;
}

/* ============================================================
   GRID PRIMITIVES
   ============================================================ */

.pusk-grid {
    display: grid;
    gap: var(--pusk-space-6);
}

.pusk-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pusk-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ============================================================
   DECORATIVE FOREGROUND ELEMENTS

   These are overlays only.
   They do not replace the global background.
   ============================================================ */

.pusk-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.22;
}

.pusk-divider {
    width: 100%;
    height: 1px;
    background: var(--pusk-color-line);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .pusk-section {
        padding-block: var(--pusk-section-space-tablet);
    }

    .pusk-display--hero {
        font-size: var(--pusk-font-size-h1-tablet);
    }

    .pusk-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .pusk-container,
    .pusk-container--wide {
        width: calc(
            100% - (var(--pusk-page-gutter-mobile) * 2)
        );
    }

    .pusk-section {
        padding-block: var(--pusk-section-space-mobile);
    }

    .pusk-display--hero {
        font-size: var(--pusk-font-size-h1-mobile);
    }

    .pusk-button {
        min-height: var(--pusk-touch-target-min);
    }

    .pusk-grid--2,
    .pusk-grid--3 {
        grid-template-columns: 1fr;
    }

    .pusk-card {
        padding: var(--pusk-space-5);
    }
}


/* ============================================================
   03 - SITE V2 ADAPTER
   ============================================================ */

/*
 * PUSK Design System v1
 * Site V2 adapter candidate
 *
 * STATUS:
 * - Candidate only
 * - Not connected to site-web
 * - Not connected to production
 *
 * IMPORTANT:
 * The existing website body owns the global background.
 * This adapter MUST NOT replace or recreate that background.
 *
 * New generated visual assets must be foreground assets
 * without baked page/section backgrounds.
 */

/* ============================================================
   V2 TOKEN BRIDGE
   ============================================================ */

:root {
    --v2-page-max: var(--pusk-content-max);

    --v2-line: var(--pusk-color-line);
    --v2-line-strong: var(--pusk-color-line-strong);

    --v2-soft: var(--pusk-color-text-soft);
    --v2-muted: var(--pusk-color-text-muted);

    --v2-cyan: var(--pusk-color-cyan);
    --v2-blue: var(--pusk-color-blue);
    --v2-violet: var(--pusk-color-violet);
}

/* ============================================================
   COMMON SITE GRID
   ============================================================ */

.topbar-v8,
.hero-content-v7 {
    width: min(
        calc(100% - (var(--pusk-page-gutter-desktop) * 2)),
        var(--pusk-content-wide-max)
    );
    margin-inline: auto;
}

.v2-section,
.v2-footer {
    width: min(
        calc(100% - (var(--pusk-page-gutter-desktop) * 2)),
        var(--pusk-content-max)
    );
    margin-inline: auto;
}

/* ============================================================
   GLOBAL BACKGROUND PROTECTION

   Sections are foreground layout only.
   The body background remains visible.
   ============================================================ */

.v2-section {
    background: transparent;
    padding-block: var(--pusk-section-space-desktop);
}

/*
 * Existing .v2-section::before divider is intentionally preserved.
 * It is a foreground separator, not a section background.
 */

/* ============================================================
   HERO SCALE
   ============================================================ */

.hero-copy-v7 h1 {
    font-size: var(--pusk-font-size-h1-desktop);
    line-height: var(--pusk-line-height-display);
}

/*
 * Existing hero-media glow is intentionally preserved.
 * It is a localized foreground visual effect.
 */

/* ============================================================
   V2 SECTION TYPOGRAPHY
   ============================================================ */

.v2-section-head h2,
.v2-price-copy h2,
.v2-device-story-copy h2,
.v2-support h2 {
    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.08;
}

.v2-section-head p,
.v2-price-copy > p,
.v2-device-story-copy > p,
.v2-support p {
    font-size: var(--pusk-font-size-body);
    line-height: var(--pusk-line-height-body);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .topbar-v8,
    .hero-content-v7,
    .v2-section,
    .v2-footer {
        width: min(
            calc(100% - (var(--pusk-page-gutter-desktop) * 2)),
            var(--pusk-content-max)
        );
    }

    .hero-copy-v7 h1 {
        font-size: var(--pusk-font-size-h1-tablet);
    }

    .v2-section {
        padding-block: var(--pusk-section-space-tablet);
    }
}

@media (max-width: 720px) {
    .topbar-v8,
    .hero-content-v7,
    .v2-section,
    .v2-footer {
        width: calc(
            100% - (var(--pusk-page-gutter-mobile) * 2)
        );
    }

    .hero-copy-v7 h1 {
        font-size: var(--pusk-font-size-h1-mobile);
    }

    .v2-section {
        padding-block: var(--pusk-section-space-mobile);
    }

    .v2-section-head h2,
    .v2-price-copy h2,
    .v2-device-story-copy h2,
    .v2-support h2 {
        font-size: 34px;
    }
}