/* =====================================================
   Main CSS — "Stacked Neon Paper"
   cours-anglais-pau.fr
   ─────────────────────────────────────────────────────
   GOVERNING PHYSICS:
   Layers of cut paper stacked with soft colored shadows,
   each tinted with vibrant coral, lavender, mint, saffron.
   Clean edges, tactile depth, luminous cream background.
   Sections overlap like cards pinned to an idea wall.
   Round, friendly, but structured typography.
   ===================================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* --- Module Imports --- */
@import url('animations.css');
@import url('components.css');

/* ========= Design Tokens ========= */

:root {
    /* ── Vibrant Paper Palette ── */
    --color-primary: #FF6B6B;
    --color-primary-dark: #E85555;
    --color-primary-light: #FF8A8A;
    --accent: #FBBF24;
    --color-accent: #FBBF24;
    --color-text: #1E293B;
    --color-text-secondary: #475569;
    --color-muted: #94A3B8;
    --color-bg: #FFFBF5;
    --color-surface: #FFFFFF;
    --color-border: rgba(0, 0, 0, 0.06);

    /* ── Paper Tint Colors ── */
    --paper-coral: #FF6B6B;
    --paper-lavender: #A78BFA;
    --paper-mint: #34D399;
    --paper-saffron: #FBBF24;
    --paper-sky: #38BDF8;
    --paper-rose: #FB7185;
    --paper-peach: #FDBA74;

    /* ── Paper Shadow Tints (colored drop shadows) ── */
    --shadow-coral: rgba(255, 107, 107, 0.15);
    --shadow-lavender: rgba(167, 139, 250, 0.15);
    --shadow-mint: rgba(52, 211, 153, 0.12);
    --shadow-saffron: rgba(251, 191, 36, 0.15);
    --shadow-neutral: rgba(30, 41, 59, 0.06);

    /* ── Spacing Scale ── */
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    --space-5xl: 80px;

    /* ── Border Radius (friendly, rounded paper corners) ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-pill: 100px;

    /* ── Container ── */
    --container-width: 1200px;

    /* ── Header ── */
    --header-height: 64px;

    /* ── Paper depth shadows ── */
    --paper-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    --paper-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    --paper-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(0, 0, 0, 0.08);
    --paper-shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.05), 0 24px 56px rgba(0, 0, 0, 0.1);
}

/* ========= Base Reset ========= */

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

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

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.72;
    color: var(--color-text);
    background: var(--color-bg);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subtle dot grid pattern — like pin-board paper */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.25s ease;
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

/* ========= Container ========= */

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
    position: relative;
    z-index: 1;
}

/* ========= Typography — Friendly but structured ========= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    line-height: 1.2;
    color: var(--color-text);
    margin-top: 0;
    letter-spacing: -0.025em;
}

h1 {
    font-size: clamp(2.1rem, 4.2vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    margin-bottom: var(--space-lg);
}

h2 {
    font-size: clamp(1.4rem, 2.8vw, 1.85rem);
    font-weight: 700;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    position: relative;
}

/* Colorful paper-strip underline */
h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 4px;
    background: linear-gradient(90deg, var(--paper-coral), var(--paper-saffron));
    border-radius: var(--radius-pill);
}

h3 {
    font-size: 1.18rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

p {
    margin: 0 0 var(--space-lg);
}

ul,
ol {
    padding-left: 1.5rem;
    margin: 0 0 var(--space-lg);
}

li {
    margin-bottom: var(--space-xs);
}

.lead {
    font-size: 1.12rem;
    line-height: 1.68;
    color: var(--color-text-secondary);
}

.muted {
    font-size: 0.9rem;
    color: var(--color-muted);
}

.muted a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

.muted a:hover {
    color: var(--color-primary-dark);
}

/* ========= Site Header — Floating white paper strip ========= */

header.site {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

header.site.scrolled {
    box-shadow: var(--paper-shadow-md);
}

header.site .brand {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-xl);
}

header.site .brand-name {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: -0.03em;
}

header.site .brand-name:hover {
    color: var(--color-primary);
    text-decoration: none;
}

header.site .container.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: var(--space-sm);
    gap: var(--space-lg);
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

header.site nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding: 0;
    margin: 0;
}

header.site nav a {
    display: inline-block;
    padding: 6px 13px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: all 0.25s ease;
    text-decoration: none;
}

header.site nav a:hover,
header.site nav a.active {
    background: rgba(255, 107, 107, 0.08);
    color: var(--color-primary);
    text-decoration: none;
}

header.site nav a.active {
    font-weight: 700;
    background: rgba(255, 107, 107, 0.1);
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px var(--shadow-coral);
}

.menu-toggle:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--shadow-coral);
}

/* ========= Breadcrumb — Tiny paper strip ========= */

.breadcrumb {
    background: rgba(255, 251, 245, 0.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding: var(--space-sm) 0;
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: 0;
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.breadcrumb li+li::before {
    content: '›';
    margin-right: var(--space-xs);
    color: var(--color-muted);
}

.breadcrumb a {
    color: var(--color-muted);
    font-weight: 500;
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb [aria-current="page"] {
    font-weight: 700;
    color: var(--color-text-secondary);
}

/* ========= Buttons — Stacked colored paper tabs ========= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 11px 24px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.15;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: var(--color-primary);
    color: #fff;
    box-shadow:
        0 2px 4px var(--shadow-coral),
        0 8px 20px var(--shadow-coral);
    position: relative;
    overflow: hidden;
}

.btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 4px 8px var(--shadow-coral),
        0 14px 32px rgba(255, 107, 107, 0.25);
    text-decoration: none;
    color: #fff;
    background: var(--color-primary-dark);
}

.btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 6px var(--shadow-coral);
}

.btn-outline {
    background: rgba(255, 107, 107, 0.06);
    color: var(--color-primary);
    border: 2px solid rgba(255, 107, 107, 0.2);
    box-shadow: none;
}

.btn-outline:hover {
    background: rgba(255, 107, 107, 0.12);
    border-color: rgba(255, 107, 107, 0.4);
    color: var(--color-primary-dark);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.12);
    transform: translateY(-3px) scale(1.02);
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--paper-rose));
    color: #fff;
    border: none;
}

/* ========= Hero Section — Layered paper sheets with warm light ========= */

.hero {
    background:
        linear-gradient(175deg,
            #FFFBF5 0%,
            #FFF0E5 30%,
            #FEE8D6 60%,
            #FFFBF5 100%);
    padding: var(--space-5xl) 0 var(--space-4xl);
    position: relative;
    overflow: hidden;
}

/* Colorful decorative shapes — cut paper confetti in background */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 300px 300px at 85% 15%,
            rgba(167, 139, 250, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 250px 250px at 10% 80%,
            rgba(52, 211, 153, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 200px 200px at 50% 50%,
            rgba(255, 107, 107, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 180px 180px at 75% 75%,
            rgba(251, 191, 36, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hero-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-4xl);
    align-items: start;
    position: relative;
    z-index: 1;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.pill {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(167, 139, 250, 0.1));
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: var(--radius-pill);
    width: fit-content;
    letter-spacing: 0.01em;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.badge {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    transition: all 0.25s ease;
}

.badge:nth-child(1) {
    border-color: rgba(255, 107, 107, 0.2);
    color: var(--paper-coral);
}

.badge:nth-child(2) {
    border-color: rgba(167, 139, 250, 0.2);
    color: var(--paper-lavender);
}

.badge:nth-child(3) {
    border-color: rgba(52, 211, 153, 0.2);
    color: #0d9668;
}

.badge:nth-child(4) {
    border-color: rgba(56, 189, 248, 0.2);
    color: #0284c7;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.hero-links {
    margin-top: var(--space-sm);
}

/* Hero panel (right column) */
.hero-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.hero-profiles {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ========= Profile Cards — Colored paper cards stacked ========= */

.profile-card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

/* Colored paper edge — like a tinted sticky note */
.profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.profile-card:hover {
    transform: translateY(-6px) rotate(-0.5deg);
    box-shadow: var(--paper-shadow-lg);
}

/* Accent variants — different colored paper */
.accent-peach::before {
    background: linear-gradient(90deg, #FF6B6B, #FDBA74);
}

.accent-blue::before {
    background: linear-gradient(90deg, #38BDF8, #818CF8);
}

.accent-lilac::before {
    background: linear-gradient(90deg, #A78BFA, #F472B6);
}

.accent-mint::before {
    background: linear-gradient(90deg, #34D399, #38BDF8);
}

.accent-sun::before {
    background: linear-gradient(90deg, #FBBF24, #FB923C);
}

.accent-peach {
    border-left: 3px solid var(--paper-coral);
}

.accent-blue {
    border-left: 3px solid var(--paper-sky);
}

.accent-lilac {
    border-left: 3px solid var(--paper-lavender);
}

.accent-mint {
    border-left: 3px solid var(--paper-mint);
}

.accent-sun {
    border-left: 3px solid var(--paper-saffron);
}

.profile-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    margin-bottom: var(--space-xs);
}

.profile-list {
    padding-left: 1.2rem;
    margin: var(--space-sm) 0 0;
}

.profile-list li {
    font-size: 0.92rem;
    margin-bottom: var(--space-xs);
}

.profile-links {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.profile-links a {
    font-size: 0.88rem;
}

.profile-strip {
    margin-bottom: var(--space-xl);
}

/* ========= Hero Card (standalone) — Pinned note ========= */

.hero-card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--paper-shadow-md);
}

.hero-card-standalone {
    margin-top: var(--space-2xl);
}

.hero-list {
    padding-left: 1.2rem;
}

.hero-benefits li {
    margin-bottom: var(--space-sm);
    font-size: 0.95rem;
}

.hero-secondary {
    margin-top: var(--space-lg);
}

/* ========= Grid System ========= */

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 3vw, 28px);
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(16px, 3vw, 28px);
}

/* ========= Cards — Stacked paper sheets with colored shadows ========= */

.card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.card:hover {
    transform: translateY(-6px) rotate(-0.3deg);
    box-shadow: var(--paper-shadow-lg);
}

/* Rotating colored shadow accents on cards */
.card:nth-child(1):hover {
    box-shadow: 0 8px 30px var(--shadow-coral), var(--paper-shadow-md);
}

.card:nth-child(2):hover {
    box-shadow: 0 8px 30px var(--shadow-lavender), var(--paper-shadow-md);
}

.card:nth-child(3):hover {
    box-shadow: 0 8px 30px var(--shadow-mint), var(--paper-shadow-md);
}

.card:nth-child(4):hover {
    box-shadow: 0 8px 30px var(--shadow-saffron), var(--paper-shadow-md);
}

/* ========= Sections — Stacked paper feels ========= */

section {
    padding: var(--space-xl) 0;
    position: relative;
}

section p {
    max-width: 72ch;
}

article section {
    padding: var(--space-xl);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-lg);
    box-shadow: var(--paper-shadow-sm);
}

main#main {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--space-xl);
}

/* ========= Pricing Table — Clean paper grid ========= */

.pricing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--space-xl) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--paper-shadow-md);
    background: var(--color-surface);
}

.pricing-table th {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: linear-gradient(135deg, var(--color-primary), var(--paper-rose));
    color: #fff;
    font-weight: 700;
    padding: 14px 16px;
    text-align: center;
    font-size: 0.92rem;
}

.pricing-table td {
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 12px 16px;
    text-align: center;
    background: var(--color-surface);
    transition: background 0.2s ease;
    font-size: 0.92rem;
}

.pricing-table tr:nth-child(even) td {
    background: rgba(255, 251, 245, 0.7);
}

.pricing-table tr:hover td {
    background: rgba(255, 107, 107, 0.04);
}

/* ========= Check List — Colorful check marks ========= */

ul.check {
    list-style: none;
    padding-left: 0;
}

ul.check li {
    position: relative;
    padding-left: 30px;
    margin-bottom: var(--space-sm);
}

ul.check li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--paper-mint);
    font-weight: 800;
    font-size: 1.15rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(52, 211, 153, 0.1);
    border-radius: 50%;
    font-size: 0.85rem;
}

/* ========= Steps List — Candy-colored numbered discs ========= */

ol.steps-list {
    list-style: none;
    padding-left: 0;
    counter-reset: step-counter;
}

ol.steps-list li {
    counter-increment: step-counter;
    position: relative;
    padding-left: 52px;
    margin-bottom: var(--space-xl);
}

ol.steps-list li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-primary), var(--paper-saffron));
    color: #fff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px var(--shadow-coral);
}

ol.steps-list li:nth-child(2)::before {
    background: linear-gradient(135deg, var(--paper-lavender), var(--paper-sky));
    box-shadow: 0 3px 12px var(--shadow-lavender);
}

ol.steps-list li:nth-child(3)::before {
    background: linear-gradient(135deg, var(--paper-mint), var(--paper-sky));
    box-shadow: 0 3px 12px var(--shadow-mint);
}

ol.steps-list li:nth-child(4)::before {
    background: linear-gradient(135deg, var(--paper-saffron), var(--paper-peach));
    box-shadow: 0 3px 12px var(--shadow-saffron);
}

/* ========= CTA Buttons Row ========= */

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* ========= CTA Strip — Gradient paper band ========= */

.cta-strip {
    background:
        linear-gradient(135deg,
            rgba(255, 107, 107, 0.05) 0%,
            rgba(167, 139, 250, 0.04) 50%,
            rgba(52, 211, 153, 0.03) 100%);
    border-top: 2px solid rgba(255, 107, 107, 0.08);
    border-bottom: 2px solid rgba(167, 139, 250, 0.08);
    padding: var(--space-2xl) 0;
}

/* ========= Heritage Section ========= */

.heritage-pau {
    margin: var(--space-xl) 0;
}

/* ========= FAQ — Pinned paper panel ========= */

.faq {
    margin: var(--space-xl) 0;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--paper-shadow-sm);
}

.faq-question {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: var(--space-xl);
    font-size: 1.05rem;
    position: relative;
    padding-left: 28px;
}

.faq-question::before {
    content: '?';
    position: absolute;
    left: 0;
    top: -2px;
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    background: var(--paper-lavender);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
}

/* ========= Copy Toast ========= */

.copy-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background: var(--color-text);
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 9999;
    box-shadow: var(--paper-shadow-lg);
}

.copy-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ========= Footer — Deep navy paper stack ========= */

.site-footer {
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
    color: rgba(255, 255, 255, 0.75);
    margin-top: var(--space-3xl);
    position: relative;
}

/* Rainbow paper-strip top edge */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
            var(--paper-coral),
            var(--paper-saffron),
            var(--paper-mint),
            var(--paper-sky),
            var(--paper-lavender),
            var(--paper-coral));
    background-size: 200% 100%;
    animation: rainbowStrip 8s linear infinite;
}

@keyframes rainbowStrip {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.site-footer a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.25s ease;
}

.site-footer a:hover {
    color: var(--paper-saffron);
    text-decoration: underline;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: var(--space-3xl);
    padding: var(--space-3xl) var(--space-xl);
    max-width: var(--container-width);
    margin: 0 auto;
}

.footer-brand .brand-name {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
}

.footer-brand .muted {
    color: rgba(255, 255, 255, 0.45);
}

.footer-nav h3,
.footer-cta h3 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: var(--space-xs);
}

.footer-nav a {
    font-size: 0.88rem;
}

.footer-cta .muted {
    color: rgba(255, 255, 255, 0.45);
}

.footer-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.footer-cta-row .btn {
    font-size: 0.82rem;
    padding: 8px 16px;
}

.footer-meta {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    padding: var(--space-lg) 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.3);
}

.footer-meta a {
    color: rgba(255, 255, 255, 0.3);
}

.footer-meta a:hover {
    color: rgba(255, 255, 255, 0.6);
}

.footer-meta .container {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

/* ========= Floating Shapes — Cut paper confetti ========= */

.floating-shape {
    position: absolute;
    border: none !important;
    animation: confettiFloat 7s ease-in-out infinite;
    z-index: 0;
}

.floating-shape:nth-child(1) {
    background: rgba(255, 107, 107, 0.12) !important;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important;
}

.floating-shape:nth-child(2) {
    background: rgba(251, 191, 36, 0.1) !important;
    border-radius: 70% 30% 30% 70% / 70% 70% 30% 30% !important;
}

.floating-shape:nth-child(3) {
    background: rgba(167, 139, 250, 0.08) !important;
    border-radius: 50% !important;
}

.floating-shape:nth-child(4) {
    background: rgba(52, 211, 153, 0.08) !important;
    border-radius: 40% 60% 60% 40% / 60% 40% 60% 40% !important;
}

.floating-shape:nth-child(5) {
    background: rgba(56, 189, 248, 0.08) !important;
    border-radius: 50% !important;
}

.floating-shape:nth-child(odd) {
    animation-delay: -3.5s;
}

.floating-shape:nth-child(3n) {
    animation-delay: -1.5s;
}

@keyframes confettiFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    25% {
        transform: translateY(-8px) rotate(3deg) scale(1.05);
    }

    50% {
        transform: translateY(-4px) rotate(-2deg) scale(0.98);
    }

    75% {
        transform: translateY(-10px) rotate(1deg) scale(1.02);
    }
}

/* ========= Responsive ========= */

@media (max-width: 1024px) {
    .hero-layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }
}

@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    .menu-toggle {
        display: block;
    }

    header.site nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        padding: var(--space-lg);
        gap: var(--space-xs);
        z-index: 999;
        box-shadow: var(--paper-shadow-lg);
    }

    header.site nav ul.open {
        display: flex;
    }

    header.site nav a {
        padding: 10px 16px;
        font-size: 0.95rem;
        display: block;
    }

    .hero {
        padding: var(--space-2xl) 0;
    }

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

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .cta-row,
    .cta-buttons {
        flex-direction: column;
    }

    .cta-row .btn,
    .cta-buttons .btn,
    .cta-buttons .btn-outline {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .pricing-table {
        display: block;
        overflow-x: auto;
    }

    .pricing-table th,
    .pricing-table td {
        min-width: 110px;
        padding: 10px 8px;
        font-size: 0.88rem;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    .card {
        padding: var(--space-lg);
        border-radius: var(--radius-lg);
    }

    .profile-card {
        padding: var(--space-lg);
    }

    .badges {
        gap: var(--space-xs);
    }

    .badge {
        font-size: 0.72rem;
        padding: 3px 10px;
    }

    article section {
        padding: var(--space-lg);
        border-radius: var(--radius-lg);
    }
}

/* ========= Print ========= */

@media print {

    header.site,
    .breadcrumb,
    .cta-strip,
    .site-footer {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }

    body::before {
        display: none;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}