/* ========================================
   ReBrandCafe Landing Page Styles
   Editorial Collage Aesthetic with Professional Foundation
   ======================================== */

/* ========================================
   CSS Reset & Base Styles
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-padding-top: 80px;
}

:root {
    /* Color Palette - Swiss Design inspired: high contrast, minimal palette */
    --color-primary: #000000;
    --color-secondary: #1A1A1A;
    --color-accent: #FF3300;
    --color-accent-hover: #CC2900;
    --color-bg: #FFFFFF;
    --color-bg-alt: #FAFAFA;
    --color-bg-tier1: #FFF5F2;
    --color-bg-tier2: #F0F7FF;
    --color-bg-tier3: #F5FFF0;
    --color-text: #000000;
    --color-text-light: #4A4A4A;
    --color-text-muted: #7A7A7A;
    --color-border: #E0E0E0;
    --color-card-shadow: rgba(0, 0, 0, 0.06);

    /* Typography - Swiss Design: Grotesque sans-serif, strong hierarchy */
    --font-primary: 'Helvetica Neue', 'Helvetica', 'Arial', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

    /* Swiss Design Typography Scale - Mathematical progression */
    --type-scale-base: 1rem;
    --type-scale-small: 0.875rem;
    --type-scale-large: 1.125rem;
    --type-scale-xlarge: 1.5rem;
    --type-scale-2xl: 2rem;
    --type-scale-3xl: 3rem;
    --type-scale-4xl: 4.5rem;
    --type-scale-5xl: 6rem;

    /* Spacing - Based on 8pt grid system */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 1rem;      /* 16px */
    --space-md: 1.5rem;    /* 24px */
    --space-lg: 2rem;      /* 32px */
    --space-xl: 3rem;      /* 48px */
    --space-2xl: 4rem;     /* 64px */
    --space-3xl: 6rem;     /* 96px */
    --space-4xl: 8rem;     /* 128px */

    /* Container - Magazine-style wider for typography */
    --container-max: 1400px;
    --container-padding: 2rem;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.25s ease;
    --transition-slow: 0.4s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: var(--type-scale-base);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
}

/* ========================================
   Typography - Swiss Design / Magazine Style
   Strong hierarchy, generous spacing, grid-based
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.02em;
    text-transform: none;
}

/* Display 1 - Hero headlines */
h1 {
    font-size: var(--type-scale-5xl);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-xl);
}

/* Display 2 - Section headlines */
h2 {
    font-size: var(--type-scale-4xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
    margin-bottom: var(--space-2xl);
}

/* Display 3 - Subsection headlines */
h3 {
    font-size: var(--type-scale-3xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-lg);
}

/* Heading 4 - Component titles */
h4 {
    font-size: var(--type-scale-2xl);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
}

/* Heading 5 - Small titles */
h5 {
    font-size: var(--type-scale-xlarge);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--space-sm);
}

/* Body copy - Swiss Design prefers slightly tighter leading */
p {
    margin-bottom: var(--space-lg);
    line-height: 1.6;
    font-size: var(--type-scale-large);
    color: var(--color-text-light);
    max-width: 65ch; /* Optimal reading width */
}

/* Lead paragraphs - Magazine style introductions */
p.lead {
    font-size: var(--type-scale-xlarge);
    line-height: 1.5;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: var(--space-xl);
}

/* Small text */
small, .text-small {
    font-size: var(--type-scale-small);
    line-height: 1.4;
}

/* Strong emphasis - Swiss Design uses weight, not italic */
strong {
    font-weight: 700;
    color: var(--color-text);
}

/* ========================================
   Header / Navigation
   ======================================== */

.header {
    position: fixed;
    top: var(--space-lg);
    left: 10%;
    right: 10%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    transition: all 0.3s ease;
}

.header-container {
    padding: 12px var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-size: var(--type-scale-large);
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-link {
    font-size: var(--type-scale-small);
    font-weight: 500;
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--color-text);
}

.btn-small {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--type-scale-small);
}

/* ========================================
   Layout Components
   ======================================== */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

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

/* Tighter spacing for section 2 specifically */
.infrastructure-section {
    padding: var(--space-2xl) 0;
}

/* Swiss Design / Magazine Style Section Typography */
.section-headline {
    font-size: var(--type-scale-4xl);
    margin-bottom: var(--space-2xl);
    color: var(--color-text);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    max-width: 25ch;
}

.section-subheadline {
    font-size: var(--type-scale-xlarge);
    line-height: 1.5;
    color: var(--color-text-light);
    margin-bottom: var(--space-xl);
    font-weight: 400;
    max-width: 60ch;
}

/* Magazine-style section labels / eyebrows */
.section-label {
    font-size: var(--type-scale-small);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-md);
    display: block;
}

/* ========================================
   Buttons & CTAs
   ======================================== */

.btn {
    display: inline-block;
    padding: 1.125rem 2.5rem;
    font-size: 0.938rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    font-family: var(--font-primary);
    letter-spacing: 0.02em;
    text-transform: none;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background-color: var(--color-accent);
    color: white;
    box-shadow: 0 4px 14px rgba(255, 51, 0, 0.25);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.btn-primary:hover {
    background-color: #E62E00;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 51, 0, 0.35);
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 51, 0, 0.2);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text);
    border: 1.5px solid #D0D0D0;
}

.btn-secondary:hover {
    background-color: var(--color-text);
    color: white;
    border-color: var(--color-text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.btn-link::after {
    content: '→';
    transition: transform 0.2s ease;
}

.btn-link:hover {
    color: var(--color-accent);
}

.btn-link:hover::after {
    transform: translateX(4px);
}

/* ========================================
   Swiss Design Typography Utilities
   Magazine-style hierarchy and components
   ======================================== */

/* Display typography - Magazine style large headlines */
.display-1 {
    font-size: var(--type-scale-5xl);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.display-2 {
    font-size: var(--type-scale-4xl);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
}

.display-3 {
    font-size: var(--type-scale-3xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Eyebrow / Label text - Magazine style section markers */
.eyebrow {
    font-size: var(--type-scale-small);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
    display: block;
    margin-bottom: var(--space-sm);
}

/* Deck / Dek - Magazine style subtitle */
.deck {
    font-size: var(--type-scale-xlarge);
    line-height: 1.5;
    color: var(--color-text-light);
    font-weight: 400;
    max-width: 60ch;
}

/* Pull quote - Magazine style callouts */
.pull-quote {
    font-size: var(--type-scale-2xl);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
    border-left: 4px solid var(--color-accent);
    padding-left: var(--space-lg);
    margin: var(--space-2xl) 0;
}

/* Numbers / Stats - Swiss Design numerical emphasis */
.stat-number, .stat-highlight {
    font-size: var(--type-scale-3xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

/* Label text - Swiss grid labels */
.label-text {
    font-size: var(--type-scale-small);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ========================================
   SECTION 1: HERO SECTION
   Relume-inspired: Bold, confident, professional
   ======================================== */

.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--space-4xl) 0;
    background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(255, 51, 0, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(0, 0, 0, 0.02) 0%, transparent 50%);
    pointer-events: none;
}

/* Two-column hero layout */
.hero-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.hero-content {
    text-align: left;
    padding-right: var(--space-2xl);
}

.hero-headline {
    font-size: 3.75rem;
    font-weight: 900;
    margin-bottom: var(--space-xl);
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-transform: none;
    color: var(--color-text);
}

.hero-headline .arrow {
    color: var(--color-accent);
    display: inline-block;
}

.hero-subtext {
    font-size: 1.25rem;
    color: #666;
    margin-bottom: var(--space-3xl);
    line-height: 1.6;
    font-weight: 400;
    max-width: 90%;
}

.rotating-word {
    color: var(--color-accent);
    font-weight: 600;
    display: inline-block;
    min-width: 200px;
    text-align: left;
    transition: opacity 0.3s ease;
}

.hero-stats {
    display: flex;
    gap: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-text);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.stat-label {
    font-size: 0.813rem;
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-ctas {
    display: flex;
    gap: var(--space-xl);
    align-items: center;
    flex-wrap: wrap;
}

/* Hub and Spoke Visual */
.hub-spoke-visual {
    position: relative;
    width: 100%;
    max-width: 550px;
    height: 550px;
    margin: 0 auto;
}

.hub-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.your-brand {
    background: var(--color-text);
    color: white;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.spokes {
    position: relative;
    width: 100%;
    height: 100%;
}

.spoke-item {
    position: absolute;
    width: 120px;
    height: 120px;
}

/* Position spokes in perfect circle around hub */
.spoke-item:nth-child(1) {
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
}
.spoke-item:nth-child(2) {
    top: 22%;
    right: 8%;
}
.spoke-item:nth-child(3) {
    bottom: 22%;
    right: 8%;
}
.spoke-item:nth-child(4) {
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
}
.spoke-item:nth-child(5) {
    bottom: 22%;
    left: 8%;
}
.spoke-item:nth-child(6) {
    top: 22%;
    left: 8%;
}

.brand-logo {
    background: white;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #F0F0F0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-logo:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border-color: #E0E0E0;
}

.logo-embed {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
}

/* Connecting lines SVG */
.connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ========================================
   SECTION 2: INFRASTRUCTURE FOUNDATION
   ======================================== */

.infrastructure-section {
    background-color: var(--color-bg);
}

/* PART 1: MINDSET TRAP - Dapper-style editorial collage (PRIMARY) */
.mindset-trap {
    margin-bottom: var(--space-2xl);
}

.section-heading {
    text-align: center;
    margin-bottom: var(--space-xl);
    font-size: 2.5rem;
}

.contrast-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 400px;
}

/* Left side: Dapper-style X'd out buzzword cards */
.buzzword-cards {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.buzzword-cards .card {
    background: #FFF9E6;
    padding: 1.5rem 2rem;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    transition: all var(--transition-medium);
}

.buzzword-cards .card.tilted {
    transform-origin: center;
}

.buzzword-cards .card[data-angle="8"] { transform: rotate(8deg); }
.buzzword-cards .card[data-angle="-5"] { transform: rotate(-5deg); }
.buzzword-cards .card[data-angle="12"] { transform: rotate(12deg); }
.buzzword-cards .card[data-angle="-7"] { transform: rotate(-7deg); }
.buzzword-cards .card[data-angle="10"] { transform: rotate(10deg); }

.buzzword-cards .card:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.buzzword-cards .x-mark {
    font-size: 3rem;
    color: #D32F2F;
    font-weight: 900;
    line-height: 1;
}

.buzzword-cards .text {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: line-through;
    text-decoration-thickness: 3px;
    text-decoration-color: #D32F2F;
}

/* Right side: Clean statement */
.clean-statement {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    gap: var(--space-xl);
}

.khaby-reaction {
    width: 180px;
    height: 240px;
    flex-shrink: 0;
}

.khaby-reaction iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
}

.statement-text {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
    text-align: center;
}

/* PART 2: PROVOCATIVE PIVOT WITH ARROW */
.provocative-pivot {
    position: relative;
    text-align: center;
    margin: var(--space-3xl) 0;
    padding: var(--space-2xl) 0;
}

.connecting-arrow {
    position: absolute;
    width: 80px;
    height: 120px;
    left: 50%;
    transform: translateX(-50%);
    top: -140px;
    opacity: 0.6;
}

.pivot-headline {
    font-size: var(--type-scale-3xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin: 0;
}

/* PART 3: CHAOS NETWORK VISUALIZATION */
.chaos-network {
    margin: var(--space-3xl) 0;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
}

.chaos-container {
    display: flex;
    flex-direction: column;
}

.chaos-big-heading {
    font-size: var(--type-scale-3xl);
    font-weight: 800;
    margin-bottom: var(--space-xl);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--color-text);
}

.chaos-field {
    position: relative;
    width: 100%;
    min-height: 70vh;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.03) 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: var(--space-2xl);
    overflow: hidden;
    flex: 1;
}

/* Chaos nodes - scattered fragments */
.chaos-node {
    position: absolute;
    display: inline-block;
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-size: 0.875rem;
    color: var(--color-text-light);
    white-space: nowrap;
    transform: translateZ(0);
    transition: all var(--transition-medium);
    max-width: 280px;
}

.chaos-node:hover {
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: var(--color-accent);
    z-index: 10;
}

/* Positive nodes - visually distinct */
.chaos-node-good {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    border: 2px solid #4CAF50;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
}

.chaos-node-good:hover {
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.35);
    border-color: #66BB6A;
}

.node-icon {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.node-text {
    font-weight: 500;
    line-height: 1.3;
}

/* Create connection lines using pseudo-elements */
.chaos-field::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.3;
    pointer-events: none;
}

/* Realization line - calm statement below chaos */
.realization-line {
    grid-column: 1 / -1;
    margin-top: var(--space-3xl);
    padding: var(--space-3xl) 0;
    text-align: center;
    background: white;
    border-top: 2px solid var(--color-border);
}

.realization-text {
    font-size: var(--type-scale-3xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin: 0;
    max-width: 25ch;
    margin: 0 auto;
}

/* Floating meme element */
.meme-element {
    position: absolute;
    z-index: 5;
    opacity: 0.9;
    transition: all var(--transition-medium);
}

.meme-element:hover {
    opacity: 1;
    transform: scale(1.05);
}

.this-is-fine {
    right: -100px;
    top: 50%;
    transform: translateY(-50%) rotate(5deg);
    width: 150px;
}

.this-is-fine img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--color-card-shadow);
}

/* ========================================
   SECTION 3: CUSTOMIZATION
   Podia geometric shapes + Portal two-column
   ======================================== */

/* SECTION: REMIX ENGINES */
.remix-engines-section {
    background: white;
    padding: var(--space-xl) 0;
}

.remix-headline {
    font-size: var(--type-scale-xl);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--space-xs);
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-transform: uppercase;
}

.remix-subtext {
    font-size: var(--type-scale-small);
    color: var(--color-text-light);
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-md);
    line-height: 1.6;
}

/* Brand Tabs */
.brand-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 2px solid #E0E0E0;
}

.brand-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--type-scale-base);
    font-weight: 600;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    margin-bottom: -2px;
}

.brand-tab:hover {
    color: var(--color-text);
    background: #FAFAFA;
}

.brand-tab.active {
    color: var(--color-text);
    border-bottom-color: #1A1A1A;
    background: transparent;
}

/* Canvas Area */
.remix-canvas {
    background: white;
    padding: 0;
    position: relative;
}

.canvas-panel {
    display: none !important;
}

.canvas-panel.active {
    display: block !important;
}

/* Comparison Grid */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 2px solid #E0E0E0;
}

.comparison-side {
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
}

.comparison-side:first-child {
    border-right: 2px solid #E0E0E0;
}

.comparison-label {
    font-size: var(--type-scale-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
}

.brand-preview {
    background: #FAFAFA;
    border: 2px solid #D0D0D0;
    padding: var(--space-2xl);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px;
}

.brand-preview.remixed {
    background: white;
    border-color: #1A1A1A;
    border-width: 3px;
}

.canvas-content {
    text-align: center;
    width: 100%;
}

.canvas-content h4 {
    font-size: var(--type-scale-large);
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--color-text);
}

.canvas-content p {
    font-size: var(--type-scale-small);
    color: var(--color-text-light);
    margin-bottom: var(--space-xl);
    line-height: 1.6;
}

.sample-elements {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.sample-card {
    border: 1px solid #D0D0D0;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--type-scale-small);
    font-weight: 600;
    color: var(--color-text);
    background: white;
}

/* Brand Selector */
.brand-selector {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.selector-prompt {
    font-size: var(--type-scale-base);
    color: var(--color-text);
    margin-bottom: var(--space-lg);
    font-weight: 500;
}

.brand-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-xl);
}

.brand-chip {
    background: white;
    border: 2px solid #E5E5E5;
    padding: var(--space-xs) var(--space-md);
    border-radius: 20px;
    font-size: var(--type-scale-small);
    font-weight: 500;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.brand-chip:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

.brand-chip.selected {
    background: var(--color-text);
    border-color: var(--color-text);
    color: white;
}

.build-engine-btn {
    margin-top: var(--space-md);
}

/* SECTION 3: DELIVERABLES KITS */
.deliverables-section {
    background: white;
    padding: var(--space-4xl) 0;
}

.deliverables-headline {
    font-size: var(--type-scale-2xl);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.deliverables-subtext {
    font-size: var(--type-scale-base);
    color: var(--color-text-light);
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
    line-height: 1.6;
}

.kits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
    max-width: 1400px;
    margin: 0 auto;
}

.kit-card {
    background: #FAFAFA;
    border: 2px solid #E5E5E5;
    border-radius: 16px;
    padding: var(--space-2xl);
    transition: all 0.3s ease;
}

.kit-card:hover {
    border-color: var(--color-text);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.kit-level-title {
    font-size: var(--type-scale-large);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kit-level-desc {
    font-size: var(--type-scale-small);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
    line-height: 1.5;
}

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

/* ====== FOUNDATIONAL WIDGETS - Dashboard-like complexity ====== */
.kit-widget {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 3px solid #000;
    border-radius: 20px;
    padding: var(--space-lg);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    cursor: pointer;
}

.kit-widget:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.widget-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.widget-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
}

.widget-title {
    font-size: var(--type-scale-base);
    font-weight: 700;
    color: white;
    letter-spacing: -0.01em;
}

.widget-preview {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.preview-colors {
    display: flex;
    gap: var(--space-xs);
}

.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.preview-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
}

.text-sample {
    color: white;
    font-weight: 700;
}

.text-lg {
    font-size: 32px;
    line-height: 1;
}

.text-sm {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
    width: 100%;
}

.grid-item {
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.widget-footer {
    display: flex;
    justify-content: flex-end;
}

.widget-badge {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ====== STRATEGIC - Discord Widget Cards ====== */
.discord-widget {
    background: #2F3136;
    border-radius: 20px;
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.24),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.discord-widget::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.3), rgba(114, 137, 218, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.discord-widget:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.15);
}

.discord-widget:hover::before {
    opacity: 1;
}

.widget-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.discord-widget:hover .widget-avatar {
    transform: scale(1.1);
}

.widget-avatar svg {
    color: white;
}

.widget-avatar-1 {
    background: linear-gradient(135deg, #5865F2 0%, #7289DA 100%);
}

.widget-avatar-2 {
    background: linear-gradient(135deg, #ED4245 0%, #F26C6E 100%);
}

.widget-avatar-3 {
    background: linear-gradient(135deg, #7C3AED 0%, #9D5BF0 100%);
}

.widget-avatar-4 {
    background: linear-gradient(135deg, #ED4245 0%, #F26C6E 100%);
}

.widget-avatar-5 {
    background: linear-gradient(135deg, #57F287 0%, #72F5A0 100%);
}

.widget-avatar-6 {
    background: linear-gradient(135deg, #FEE75C 0%, #FFE86D 100%);
}

.widget-avatar-7 {
    background: linear-gradient(135deg, #EB459E 0%, #F95BAC 100%);
}

.widget-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #B9BBBE;
    text-transform: uppercase;
    text-align: center;
}

/* Widget Header */
.widget-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.widget-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #B9BBBE;
    text-transform: uppercase;
}

.widget-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 600;
    color: #B9BBBE;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #57F287;
    box-shadow: 0 0 8px rgba(87, 242, 135, 0.5);
}

.widget-badge-inline {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #B9BBBE;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
}

/* Widget Components Row */
.widget-components {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    align-items: center;
}

.component-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.component-icon:nth-child(1) {
    background: rgba(88, 101, 242, 0.2);
}

.component-icon:nth-child(2) {
    background: rgba(114, 137, 218, 0.2);
}

.component-icon:nth-child(3) {
    background: rgba(87, 242, 135, 0.2);
}

.component-icon:nth-child(4) {
    background: rgba(254, 231, 92, 0.2);
}

.discord-widget:hover .component-icon {
    transform: scale(1.1);
}

/* Slide Previews */
.slide-previews {
    display: flex;
    gap: 4px;
    position: relative;
    height: 32px;
    justify-content: center;
}

.slide-preview {
    width: 32px;
    height: 20px;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.slide-1 {
    background: rgba(40, 40, 45, 0.9);
}

.slide-2 {
    background: rgba(237, 66, 69, 0.3);
}

.slide-3 {
    background: rgba(88, 101, 242, 0.3);
}

.slide-4 {
    background: rgba(87, 242, 135, 0.3);
}

.discord-widget:hover .slide-preview {
    transform: translateY(-2px);
}

/* Doc Sections */
.doc-sections {
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
    align-items: center;
}

.doc-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.doc-icon:nth-child(1) {
    background: rgba(124, 58, 237, 0.25);
}

.doc-icon:nth-child(2) {
    background: rgba(124, 58, 237, 0.3);
}

.doc-icon:nth-child(3) {
    background: rgba(157, 91, 240, 0.25);
}

.doc-icon:nth-child(4) {
    background: rgba(157, 91, 240, 0.3);
}

.doc-icon:nth-child(5) {
    background: rgba(157, 91, 240, 0.35);
}

.discord-widget:hover .doc-icon {
    transform: scale(1.15);
}

/* Link Bars */
.link-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 80%;
    align-items: center;
}

.link-bar {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    position: relative;
}

.link-bar::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
}

.link-bar:nth-child(1) {
    background: linear-gradient(90deg, #E1306C, #F56040);
}

.link-bar:nth-child(2) {
    background: linear-gradient(90deg, #1DA1F2, #1C9CEA);
}

.link-bar:nth-child(3) {
    background: linear-gradient(90deg, #6B7280, #9CA3AF);
}

.link-bar:nth-child(4) {
    background: linear-gradient(90deg, #10B981, #34D399);
}

.discord-widget:hover .link-bar {
    transform: translateX(4px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Platform Grid */
.platform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
}

.platform-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.platform-logo:nth-child(1) {
    background: #0A66C2;
}

.platform-logo:nth-child(2) {
    background: #1DA1F2;
}

.platform-logo:nth-child(3) {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
}

.platform-logo:nth-child(4) {
    background: #1877F2;
}

.platform-logo:nth-child(5) {
    background: #24292E;
}

.platform-logo:nth-child(6) {
    background: #000000;
}

.discord-widget:hover .platform-logo {
    transform: scale(1.2);
}

.discord-widget:hover .platform-logo:nth-child(3) {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Onboarding Timeline */
.onboarding-timeline {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    position: relative;
}

.timeline-step {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #FEE75C;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

.timeline-step.filled {
    background: #FEE75C;
    box-shadow: 0 0 8px rgba(254, 231, 92, 0.5);
}

.timeline-line {
    width: 24px;
    height: 2px;
    background: rgba(254, 231, 92, 0.3);
    position: relative;
    z-index: 1;
}

.discord-widget:hover .timeline-step {
    transform: scale(1.3);
}

/* Email Preview */
.email-preview {
    width: 90%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.email-line {
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
}

.email-line:nth-child(1) {
    width: 60%;
    background: rgba(254, 231, 92, 0.4);
}

.email-line:nth-child(2) {
    width: 100%;
}

.email-line:nth-child(3) {
    width: 80%;
}

/* Character Grid */
.character-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
}

.character-pose {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(235, 69, 158, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.character-pose:nth-child(1) {
    background: rgba(235, 69, 158, 0.25);
}

.character-pose:nth-child(2) {
    background: rgba(249, 91, 172, 0.25);
}

.character-pose:nth-child(3) {
    background: rgba(235, 69, 158, 0.3);
}

.character-pose:nth-child(4) {
    background: rgba(249, 91, 172, 0.3);
}

.discord-widget:hover .character-pose {
    transform: rotate(5deg) scale(1.1);
}

.discord-widget:hover .character-pose:nth-child(2),
.discord-widget:hover .character-pose:nth-child(4) {
    transform: rotate(-5deg) scale(1.1);
}

/* Style Tags */
.style-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.style-tag {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #B9BBBE;
    background: rgba(235, 69, 158, 0.15);
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

/* Widget Badges */
.widget-badges {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    justify-content: center;
}

.widget-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #B9BBBE;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Responsive Widget Styles */
@media (max-width: 768px) {
    .discord-widget {
        padding: var(--space-lg) var(--space-md);
    }

    .widget-avatar {
        width: 48px;
        height: 48px;
    }

    .component-icon {
        width: 20px;
        height: 20px;
    }

    .widget-components {
        gap: 6px;
    }

    .platform-grid {
        gap: 6px;
    }

    .platform-logo {
        width: 18px;
        height: 18px;
    }

    .character-pose {
        width: 20px;
        height: 20px;
    }
}

/* ====== OPERATIONAL TAGS - Simple, clean ====== */
.kit-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F5F5F5;
    border: 1px solid #D0D0D0;
    border-radius: 10px;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--type-scale-small);
    font-weight: 500;
    color: var(--color-text-light);
    transition: all 0.2s ease;
    cursor: pointer;
}

.kit-tag:hover {
    background: #E8E8E8;
    border-color: var(--color-text);
    color: var(--color-text);
    transform: translateY(-1px);
}

.kit-tag svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Responsive */
@media (max-width: 768px) {
    .kits-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

/* Pricing Range - Swiss Minimal Style */
.pricing-range {
    margin-top: var(--space-2xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid #D0D0D0;
}

.pricing-headline {
    font-size: var(--type-scale-xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    letter-spacing: -0.02em;
    text-align: center;
    text-transform: uppercase;
}

.pricing-subtext {
    font-size: var(--type-scale-small);
    color: var(--color-text-light);
    text-align: center;
    margin-bottom: var(--space-xl);
}

.pricing-grid-simple {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-card {
    border: 2px solid #E0E0E0;
    padding: var(--space-lg);
    text-align: center;
    background: white;
    transition: all 0.2s ease;
}

.pricing-card:hover {
    border-color: #1A1A1A;
    transform: translateY(-2px);
}

.pricing-card-featured {
    border-color: #1A1A1A;
    background: #FAFAFA;
}

.pricing-tier {
    font-size: var(--type-scale-small);
    font-weight: 700;
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pricing-amount {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
    line-height: 1;
    letter-spacing: -0.02em;
}

.pricing-desc {
    font-size: var(--type-scale-small);
    color: var(--color-text-light);
    font-weight: 500;
}

.pricing-note {
    text-align: center;
    font-size: var(--type-scale-small);
    color: var(--color-text-light);
    max-width: 600px;
    margin: var(--space-lg) auto 0;
    font-weight: 500;
}

@media (max-width: 768px) {
    .pricing-grid-simple {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .pricing-amount {
        font-size: 2.5rem;
    }

    .pricing-headline {
        font-size: var(--type-scale-large);
    }
}
/* SECTION 4: WHY CHOOSE REBRANDCAFE */
.less-hard-section {
    padding: var(--space-2xl) 0;
    background: white;
}

.less-hard-headline {
    font-size: var(--type-scale-2xl);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--space-xs);
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.less-hard-subtext {
    font-size: var(--type-scale-base);
    color: var(--color-text-light);
    text-align: center;
    margin-bottom: var(--space-xl);
    line-height: 1.6;
}

/* New comparison grid: left column (3 items) + right column (1 item) */
.comparison-grid-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

/* Vertical separator between columns */
.comparison-grid-new::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #D0D0D0;
    transform: translateX(-50%);
}

/* Left column with 3 alternatives */
.alternatives-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-right: var(--space-xl);
}

/* Horizontal separators between alternatives */
.alternative-item:not(:last-child) {
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid #D0D0D0;
}

.alternative-item {
    display: flex;
    flex-direction: column;
}

.alternative-heading {
    font-size: var(--type-scale-large);
    font-weight: 700;
    text-align: left;
    margin-bottom: var(--space-md);
    color: #000000 !important;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    padding: var(--space-xs) 0;
    border-left: 4px solid #1A1A1A;
    padding-left: var(--space-sm);
}

.alternative-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.giphy-embed-small {
    width: 100%;
    height: 200px;
    border: none;
    background: transparent;
}

/* Right column with ReBrandCafe */
.rebrand-column {
    display: flex;
    flex-direction: column;
    padding-left: var(--space-xl);
}

.rebrand-heading {
    font-size: var(--type-scale-xl);
    font-weight: 700;
    text-align: left;
    margin-bottom: var(--space-lg);
    color: #000000 !important;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    padding: var(--space-sm) 0;
    border-left: 4px solid #1A1A1A;
    padding-left: var(--space-md);
}

.rebrand-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.rebrand-visual .giphy-embed {
    width: 100%;
    height: 480px;
    border: none;
    background: transparent;
}

/* Tape labels - smaller for alternatives */
.sticky-note-small {
    position: absolute;
    background: rgba(255, 249, 196, 0.85);
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: rotate(-3deg);
    font-family: 'Arial', 'Helvetica', sans-serif;
    z-index: 10;
    min-width: 100px;
    max-width: 180px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.sticky-note-small p {
    margin: 0;
    color: #1A1A1A;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.sticky-note-small.sticky-top-left {
    top: -5px;
    left: -20px;
    transform: rotate(-3deg);
}

.sticky-note-small.sticky-bottom-right {
    bottom: -5px;
    right: -20px;
    transform: rotate(2deg);
}

/* Tape labels - regular size for ReBrandCafe */
.sticky-note {
    position: absolute;
    background: rgba(200, 230, 201, 0.9);
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: rotate(-3deg);
    font-family: 'Arial', 'Helvetica', sans-serif;
    z-index: 10;
    min-width: 140px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sticky-note p {
    margin: 0;
    color: #1A1A1A;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.sticky-note.sticky-success {
    background: rgba(200, 230, 201, 0.9);
}

.sticky-top-left {
    top: 15%;
    left: -5%;
    transform: rotate(-2deg);
}

.sticky-top-right {
    top: 15%;
    right: -5%;
    transform: rotate(2deg);
}

.sticky-bottom-left {
    bottom: 15%;
    left: -5%;
    transform: rotate(2deg);
}

.sticky-bottom-right {
    bottom: 15%;
    right: -5%;
    transform: rotate(-2deg);
}

/* Scope section - high density grid */
.scope-section {
    margin: var(--space-3xl) 0;
}

.scope-headline {
    text-align: left;
    font-size: var(--type-scale-3xl);
    margin-bottom: var(--space-2xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 30ch;
}

/* Magazine-style Asymmetric Scope Grid - Editorial Layout */
.scope-visual-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: var(--space-md);
    margin: var(--space-xl) 0;
}

/* Large featured modules - take more space */
.scope-module.digital {
    grid-column: span 7;
    grid-row: span 2;
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    color: white;
    border: none;
}

.scope-module.social {
    grid-column: span 5;
    grid-row: span 2;
    background: var(--color-accent);
    color: white;
    border: none;
}

/* Medium modules */
.scope-module.ads {
    grid-column: span 4;
    background: white;
    border-left: 8px solid #E2A14A;
}

.scope-module.email {
    grid-column: span 4;
    background: #F0FFF0;
    border: 3px solid #4AE290;
}

.scope-module.print {
    grid-column: span 4;
    background: white;
    border-left: 8px solid #904AE2;
}

/* Small accent modules */
.scope-module.technical {
    grid-column: span 6;
    background: #FFFEF0;
    border: 3px solid #E2E24A;
}

.scope-module.pitch {
    grid-column: span 6;
    background: white;
    border-left: 8px solid #4AE2E2;
}

.scope-module.documents {
    grid-column: span 12;
    background: var(--color-text);
    color: white;
    border: none;
}

.scope-module {
    padding: var(--space-xl);
    border-radius: 0;
    box-shadow: 0 2px 8px var(--color-card-shadow);
    transition: all var(--transition-medium);
    position: relative;
}

.scope-module:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px var(--color-card-shadow);
}

/* Module headers - Swiss Design style */
.module-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: 0;
    border-bottom: none;
}

.module-icon {
    font-size: 3rem;
    line-height: 1;
}

.module-header h4 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: inherit;
    margin: 0;
    text-transform: none;
}

/* For colored background modules, ensure white text */
.scope-module.digital .module-header h4,
.scope-module.social .module-header h4,
.scope-module.documents .module-header h4 {
    color: white;
}

.module-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.module-items span {
    font-size: 1rem;
    color: inherit;
    line-height: 1.6;
    opacity: 0.9;
}

.module-items .item-main {
    font-weight: 700;
    margin-top: var(--space-sm);
    opacity: 1;
}

/* Customization details - Two Column */
.customization-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    margin: var(--space-3xl) 0;
    align-items: center;
}

.customization-left {
    display: flex;
    justify-content: center;
}

.transform-visual {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px var(--color-card-shadow);
}

.generic-box, .branded-box {
    padding: var(--space-lg) var(--space-xl);
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
}

.generic-box {
    background: #E0E0E0;
    color: var(--color-text-light);
}

.branded-box {
    background: var(--color-accent);
    color: white;
}

.arrow-icon {
    font-size: 2rem;
    color: var(--color-accent);
    font-weight: bold;
}

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

.customization-point {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: white;
    border-radius: 8px;
    border-left: 4px solid var(--color-accent);
}

.point-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.customization-point p {
    margin: 0;
    font-size: 1.125rem;
    color: var(--color-text);
}

.result-statement {
    text-align: center;
    margin-top: var(--space-3xl);
}

.bold-closing {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-accent);
}

/* ========================================
   SECTION 4: WHAT YOU GET
   Fabric-inspired: Three-column color-coded layout
   ======================================== */

.deliverables-section {
    background-color: var(--color-bg);
}

.deliverables-section .section-headline {
    text-align: center;
}

.context-note {
    text-align: center;
    font-size: 1.125rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
    font-style: italic;
}

.core-message {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-2xl);
}

/* Swiss Poster-Style Horizontal Sections - Editorial Layout */
.three-tier-diagram {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: var(--space-2xl) 0;
}

.tier {
    padding: var(--space-3xl) var(--space-2xl);
    border-radius: 0;
    box-shadow: none;
    transition: all var(--transition-medium);
    border-bottom: 8px solid var(--color-border);
    position: relative;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.tier:last-child {
    border-bottom: none;
}

.tier:hover {
    transform: none;
    box-shadow: none;
    background: var(--color-bg-alt);
}

.tier-foundational {
    background: white;
    border-left: 16px solid #FF3300;
}

.tier-strategic {
    background: var(--color-bg-alt);
    border-left: 16px solid #000000;
}

.tier-operational {
    background: white;
    border-left: 16px solid #4A90E2;
}

/* Left column - Large typography */
.tier-label {
    font-size: var(--type-scale-5xl);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    font-weight: 900;
    line-height: 0.9;
    grid-column: 1;
}

.tier-subtitle {
    font-size: var(--type-scale-xlarge);
    color: var(--color-text-light);
    margin-bottom: 0;
    font-style: normal;
    font-weight: 400;
    grid-column: 1;
}

/* Right column - Content organized horizontally */
.tier-content {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.tier-content h4 {
    font-size: var(--type-scale-xlarge);
    margin-top: 0;
    margin-bottom: var(--space-md);
    color: var(--color-text);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
}

.tier-content ul {
    list-style: none;
    margin: 0;
}

.tier-content li {
    padding: 0.4rem 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    color: var(--color-text-light);
    font-size: 0.95rem;
    line-height: 1.5;
}

.tier-content .icon {
    color: var(--color-accent);
    font-weight: 700;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.tier-example {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid var(--color-accent);
}

.tier-example .example-tag {
    font-size: var(--type-scale-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
}

.tier-example p {
    margin: var(--space-xs) 0 0 0;
    font-size: 0.95rem;
    color: var(--color-text-light);
}

/* Portfolio Link Section */
.portfolio-link {
    text-align: center;
    margin-top: var(--space-3xl);
    padding: var(--space-xl);
    background: var(--color-bg-alt);
    border-radius: 12px;
}

.portfolio-text {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}

.portfolio-supporting {
    font-size: 1rem;
    color: var(--color-text-light);
    margin-top: var(--space-md);
}

/* ========================================
   SECTION 5: PACKAGES & PRICING
   Relume Building Blocks: Card-based layout
   ======================================== */

.packages-section {
    background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
}

.packages-section .section-headline {
    text-align: center;
}

.section-subheadline {
    text-align: center;
    font-size: 1.25rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
}

.upgrade-note {
    text-align: center;
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xl);
    line-height: 1.8;
}

/* Packages Grid - Magazine-style varied layout */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

/* Launch Kit - Compact, top-left */
.package-card[data-package="launch-kit"] {
    grid-column: span 6;
    grid-row: span 2;
}

/* Brand Engine - Featured, larger */
.package-card[data-package="brand-engine"] {
    grid-column: span 6;
    grid-row: span 2;
}

/* Brand Engine Plus - Wide */
.package-card[data-package="brand-engine-plus"] {
    grid-column: span 7;
}

/* Custom Build - Accent */
.package-card[data-package="custom-build"] {
    grid-column: span 5;
}

.package-card {
    background: white;
    border-radius: 0;
    padding: var(--space-2xl);
    box-shadow: 0 2px 12px var(--color-card-shadow);
    transition: all var(--transition-medium);
    border: none;
    border-left: 8px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.package-card:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 30px var(--color-card-shadow);
}

.package-card.featured {
    border-left-color: var(--color-accent);
    border-left-width: 16px;
    background: linear-gradient(135deg, white 0%, #FFF5F2 100%);
}

.package-card.featured::before {
    content: 'POPULAR';
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    background: var(--color-accent);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.package-card.custom {
    background: var(--color-text);
    color: white;
    border-left-color: #FFD700;
}

/* Massive price typography */
.package-header {
    margin-bottom: var(--space-xl);
    border-bottom: none;
    padding-bottom: 0;
}

.package-name {
    font-size: var(--type-scale-2xl);
    margin-bottom: var(--space-md);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.package-card.custom .package-name {
    color: white;
}

.package-price {
    font-size: var(--type-scale-5xl);
    font-weight: 900;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
    line-height: 0.9;
    letter-spacing: -0.03em;
}

.package-card.featured .package-price {
    color: var(--color-accent);
}

.package-card.custom .package-price {
    color: #FFD700;
}

.package-timeline {
    font-size: var(--type-scale-large);
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
    font-weight: 600;
}

.package-card.custom .package-timeline {
    color: rgba(255, 255, 255, 0.7);
}

.upgrade-badge, .standalone-badge {
    display: inline-block;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 0;
    font-size: 0.75rem;
    color: var(--color-text);
    margin-top: var(--space-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.package-card.custom .upgrade-badge,
.package-card.custom .standalone-badge {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.package-oneliner {
    font-size: var(--type-scale-xlarge);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.package-card.custom .package-oneliner {
    color: white;
}

.package-for {
    font-size: var(--type-scale-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
    font-style: normal;
    font-weight: 400;
}

.package-card.custom .package-for {
    color: rgba(255, 255, 255, 0.6);
}

/* Package Deliverables - Compact columns */
.package-deliverables {
    flex-grow: 1;
    margin-bottom: var(--space-xl);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-lg);
}

.deliverable-tier {
    margin-bottom: 0;
}

.deliverable-tier h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
    font-weight: 700;
}

.package-card.custom .deliverable-tier h4 {
    color: rgba(255, 255, 255, 0.5);
}

.deliverable-tier ul {
    list-style: none;
}

.deliverable-tier li {
    padding: 0.35rem 0;
    font-size: 0.9rem;
    color: var(--color-text-light);
    line-height: 1.4;
}

.package-card.custom .deliverable-tier li {
    color: rgba(255, 255, 255, 0.8);
}

.btn-package {
    width: 100%;
    text-align: center;
    margin-top: auto;
}

.package-card.custom .btn-package {
    background: #FFD700;
    color: var(--color-text);
    border-color: #FFD700;
}

.package-card.custom .btn-package:hover {
    background: white;
    border-color: white;
}

/* ========================================
   SECTION 6: GRAVEYARD
   Editorial collage aesthetic (SECONDARY)
   ======================================== */

.graveyard-section {
    background: linear-gradient(180deg, #1A1A1A 0%, #2B2B2B 100%);
    color: white;
}

.graveyard-section .section-headline {
    color: white;
}

/* GRAVEYARD SECTION - Side-by-side contrast */
.graveyard-headline {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: var(--space-3xl);
    color: white;
}

/* Two-column contrast layout */
.graveyard-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    margin: var(--space-2xl) 0;
    align-items: flex-start;
}

/* Path labels */
.path-label {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding: var(--space-md);
    border-radius: 8px;
    margin-bottom: var(--space-xl);
}

.death-path {
    background: rgba(211, 47, 47, 0.2);
    color: #FF6B6B;
    border: 2px solid #D32F2F;
}

.success-path {
    background: rgba(76, 175, 80, 0.2);
    color: #81C784;
    border: 2px solid #4CAF50;
}

/* Path headings - separate headings for each column */
.path-heading {
    font-size: var(--type-scale-3xl);
    color: white;
    margin-bottom: var(--space-xl);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.025em;
}

/* LEFT COLUMN: Busy Work Trap */
.left-path {
    padding: var(--space-xl);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 2px solid #3A3A3A;
}

.trap-explanation {
    font-size: 1.125rem;
    color: #CCC;
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.trap-insight {
    font-size: 1.125rem;
    color: #FF9999;
    line-height: 1.6;
    margin-bottom: var(--space-xl);
    font-weight: 500;
}

/* Idea cards - left side showing stuck ideas */
.idea-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

.idea-card {
    background: #2A2A2A;
    padding: var(--space-md);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 2px solid #444;
    min-width: 150px;
    transition: all var(--transition-medium);
}

.idea-card.tilted {
    transform-origin: center;
}

.idea-card[data-angle="5"] { transform: rotate(5deg); }
.idea-card[data-angle="-7"] { transform: rotate(-7deg); }
.idea-card[data-angle="3"] { transform: rotate(3deg); }
.idea-card[data-angle="-5"] { transform: rotate(-5deg); }
.idea-card[data-angle="8"] { transform: rotate(8deg); }
.idea-card[data-angle="10"] { transform: rotate(10deg); }

.idea-card.active {
    border-color: #FF6B35;
    background: #333;
}

.idea-card.faded {
    opacity: 0.5;
    border-color: #333;
}

.idea-card h4 {
    font-size: 1rem;
    color: white;
    margin-bottom: var(--space-xs);
}

.idea-card .stuck {
    font-size: 0.875rem;
    color: #FF9999;
    font-style: italic;
}

.idea-card .status {
    font-size: 0.75rem;
    color: #666;
    margin-top: var(--space-xs);
}

/* RIGHT COLUMN: Cemetery scene - Magazine collage style */
.cemetery-scene {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: var(--space-md);
    margin: var(--space-xl) 0;
}

.headstone-card {
    background: linear-gradient(135deg, #3A3A3A 0%, #2A2A2A 100%);
    padding: var(--space-lg);
    border-radius: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    text-align: center;
    border: none;
    border-top: 4px solid #555;
    transition: all var(--transition-medium);
}

/* Varied grid placement for magazine layout */
.headstone-card:nth-child(1) {
    grid-column: span 2;
}

.headstone-card:nth-child(2) {
    grid-column: span 2;
}

.headstone-card:nth-child(3) {
    grid-column: span 1;
}

.headstone-card:nth-child(4) {
    grid-column: span 3;
}

.headstone-card:nth-child(5) {
    grid-column: span 2;
}

.headstone-card:nth-child(6) {
    grid-column: span 2;
}

.headstone-card:nth-child(7) {
    grid-column: span 2;
}

.headstone-card:nth-child(8) {
    grid-column: span 2;
}

.headstone-card.tilted {
    transform-origin: center;
}

.headstone-card[data-angle="3"] { transform: rotate(0.5deg); }
.headstone-card[data-angle="-4"] { transform: rotate(-0.5deg); }
.headstone-card[data-angle="5"] { transform: rotate(1deg); }
.headstone-card[data-angle="-3"] { transform: rotate(-1deg); }
.headstone-card[data-angle="6"] { transform: rotate(0.5deg); }
.headstone-card[data-angle="-2"] { transform: rotate(-0.5deg); }
.headstone-card[data-angle="4"] { transform: rotate(1deg); }
.headstone-card[data-angle="-5"] { transform: rotate(-0.5deg); }

.headstone-card:hover {
    transform: rotate(0deg) translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
    border-top-color: var(--color-accent);
}

.headstone-card h3 {
    font-size: var(--type-scale-large);
    color: white;
    margin-bottom: var(--space-xs);
    font-weight: 700;
}

.headstone-card .dates {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: var(--space-sm);
    font-weight: 600;
}

.headstone-card .epitaph {
    font-size: 0.9rem;
    color: #CCC;
    font-style: italic;
    line-height: 1.4;
}

.path-explanation {
    font-size: 1.125rem;
    color: #CCC;
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

/* RIGHT COLUMN: Graveyard + Solution */
.right-path {
    padding: var(--space-xl);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 2px solid rgba(76, 175, 80, 0.3);
}

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

.solution-headline {
    font-size: 2rem;
    color: white;
    margin-bottom: var(--space-md);
    text-align: center;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid var(--color-accent);
}

.benefit-icon {
    font-size: 1.5rem;
    color: #4CAF50;
    font-weight: bold;
    flex-shrink: 0;
}

.benefit-item p {
    margin: 0;
    color: white;
    font-size: 1.125rem;
    line-height: 1.5;
}

.benefit-item strong {
    color: var(--color-accent);
}

/* Final CTA styling */
.final-cta {
    background: rgba(255, 107, 53, 0.1);
    padding: var(--space-xl);
    border-radius: 12px;
    border: 2px solid var(--color-accent);
    text-align: center;
    margin-top: var(--space-xl);
}

.cta-box {
    background: rgba(255, 107, 53, 0.1);
    padding: var(--space-xl);
    border-radius: 12px;
    border: 2px solid var(--color-accent);
    text-align: center;
    margin-top: var(--space-lg);
}

.cta-text {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: white;
}

.cta-offer {
    font-size: 1.5rem;
    color: var(--color-accent);
    margin-bottom: var(--space-xl);
    font-weight: 600;
}

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

.cta-buttons .btn {
    width: 100%;
    text-align: center;
}

/* ========================================
   SECTION 7: FAQ - Magazine Editorial Layout
   Two-column newspaper-style with varied emphasis
   ======================================== */

.faq-section {
    background-color: #F5F5F7;
    padding: var(--space-lg) 0;
}

.faq-section .section-headline {
    font-size: var(--type-scale-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
    margin-bottom: var(--space-md);
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.faq-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.faq-item {
    margin-bottom: 0;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    background: white;
}

.faq-question {
    font-size: var(--type-scale-small);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    list-style: none;
    user-select: none;
    position: relative;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::after {
    content: '+';
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--type-scale-base);
    font-weight: 300;
    color: var(--color-text-light);
    transition: transform 0.2s ease;
}

.faq-item[open] .faq-question::after {
    content: '−';
}

.faq-question:hover {
    background-color: #FAFAFA;
}

.faq-answer {
    font-size: var(--type-scale-small);
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 0;
    padding: 0 var(--space-md) var(--space-sm) var(--space-md);
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
    background-color: var(--color-primary);
    color: white;
    padding: var(--space-md) 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.footer-bottom p {
    color: #999;
    font-size: 0.875rem;
    margin: 0;
}

.footer-connect-btn {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background-color: white;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 4px;
    transition: all var(--transition-fast);
    border: 1px solid white;
}

.footer-connect-btn:hover {
    background-color: transparent;
    color: white;
}

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

@media (max-width: 1024px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2rem; }

    .hero-headline { font-size: 3rem; }

    /* Two-column layouts become single column */
    .hero-two-column {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .hero-content {
        text-align: center;
    }

    .hero-ctas {
        justify-content: center;
    }

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

    /* Chaos network responsive */
    .chaos-network {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }

    .chaos-big-heading {
        font-size: var(--type-scale-2xl);
    }

    .chaos-field {
        min-height: 60vh;
        padding: var(--space-lg);
    }

    .chaos-node {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }

    .realization-text {
        font-size: var(--type-scale-2xl);
    }

    /* Section 3: Scope grid becomes 2 columns */
    .scope-visual-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .scope-module.digital,
    .scope-module.social {
        grid-column: span 6;
        grid-row: span 1;
    }

    .scope-module.ads,
    .scope-module.email,
    .scope-module.print {
        grid-column: span 3;
    }

    .scope-module.technical,
    .scope-module.pitch {
        grid-column: span 3;
    }

    .scope-module.documents {
        grid-column: span 6;
    }

    /* Section 4: Tiers stack vertically but keep two-column layout */
    .tier {
        grid-template-columns: 200px 1fr;
        gap: var(--space-xl);
        padding: var(--space-2xl) var(--space-lg);
    }

    .tier-label {
        font-size: var(--type-scale-4xl);
    }

    .tier-content {
        grid-template-columns: 1fr;
    }

    /* Section 5: Packages become 2 columns */
    .packages-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .package-card[data-package="launch-kit"],
    .package-card[data-package="brand-engine"] {
        grid-column: span 6;
    }

    .package-card[data-package="brand-engine-plus"],
    .package-card[data-package="custom-build"] {
        grid-column: span 6;
    }

    .customization-details {
        grid-template-columns: 1fr;
    }

    .graveyard-split {
        grid-template-columns: 1fr;
    }

    .cemetery-scene {
        grid-template-columns: repeat(2, 1fr);
    }

    .headstone-card:nth-child(1),
    .headstone-card:nth-child(2),
    .headstone-card:nth-child(3),
    .headstone-card:nth-child(4),
    .headstone-card:nth-child(5),
    .headstone-card:nth-child(6),
    .headstone-card:nth-child(7),
    .headstone-card:nth-child(8) {
        grid-column: span 1;
    }

    /* Section 7: FAQ becomes single column */
    .faq-panel.active {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --container-padding: 1rem;
    }

    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.75rem; }

    .hero-headline { font-size: 2.5rem; }
    .hero-subtext { font-size: 1.25rem; }

    .hero-ctas {
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .hub-spoke-visual {
        height: 400px;
    }

    /* Chaos network mobile */
    .chaos-field {
        min-height: 50vh;
        padding: var(--space-md);
    }

    .chaos-node {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
        white-space: normal;
        max-width: 150px;
    }

    .realization-line {
        padding: var(--space-xl) var(--space-md);
    }

    .realization-text {
        font-size: var(--type-scale-xlarge);
    }

    /* Section 3: All modules full width */
    .scope-visual-grid {
        grid-template-columns: 1fr;
    }

    .scope-module.digital,
    .scope-module.social,
    .scope-module.ads,
    .scope-module.email,
    .scope-module.print,
    .scope-module.technical,
    .scope-module.pitch,
    .scope-module.documents {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* Section 4: Tier labels stack on top */
    .tier {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: var(--space-xl) var(--space-md);
    }

    .tier-label {
        font-size: var(--type-scale-3xl);
    }

    .tier-subtitle {
        margin-bottom: var(--space-lg);
    }

    /* Section 5: All packages full width */
    .packages-grid {
        grid-template-columns: 1fr;
    }

    .package-card[data-package="launch-kit"],
    .package-card[data-package="brand-engine"],
    .package-card[data-package="brand-engine-plus"],
    .package-card[data-package="custom-build"] {
        grid-column: span 1;
    }

    .package-price {
        font-size: var(--type-scale-4xl);
    }

    .package-deliverables {
        grid-template-columns: 1fr;
    }

    .statement-text {
        font-size: 1.75rem;
    }

    .cemetery-scene {
        grid-template-columns: 1fr;
    }

    .headstone-card:nth-child(1),
    .headstone-card:nth-child(2),
    .headstone-card:nth-child(3),
    .headstone-card:nth-child(4),
    .headstone-card:nth-child(5),
    .headstone-card:nth-child(6),
    .headstone-card:nth-child(7),
    .headstone-card:nth-child(8) {
        grid-column: span 1;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .faq-tabs {
        flex-direction: column;
        gap: 0;
    }

    .faq-tab {
        border-bottom: 2px solid var(--color-border);
    }

    .faq-item:nth-child(1) .faq-answer {
        columns: 1;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }

    .hero-headline { font-size: 2rem; }

    .buzzword-cards .text {
        font-size: 1.25rem;
    }

    .statement-text {
        font-size: 1.5rem;
    }

    .package-price {
        font-size: var(--type-scale-3xl);
    }

    .tier-label {
        font-size: var(--type-scale-2xl);
    }

    .scope-module {
        padding: var(--space-lg);
    }

    .module-header h4 {
        font-size: var(--type-scale-large);
    }

    .faq-question {
        font-size: var(--type-scale-large);
    }
}