/**
 * O6 Toolkit Base - Utility classes and typography.
 *
 * These classes work standalone (no OxyMade needed) and are prefixed
 * with o6tk- to avoid collisions. All values reference --o6tk-* CSS
 * variables output by class-design-tokens.php.
 */


/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY - Heading Classes
   ═══════════════════════════════════════════════════════════ */

.o6tk-hero {
    font-size: var(--o6tk-hero);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--o6tk-heading-color);
}

.o6tk-h1 {
    font-size: var(--o6tk-h1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--o6tk-heading-color);
}

/* Intentional: h2 class uses h3 size, h3 uses h4 size (per project spec). */
.o6tk-h2 {
    font-size: var(--o6tk-h3);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--o6tk-heading-color);
}

.o6tk-h3 {
    font-size: var(--o6tk-h4);
    font-weight: 600;
    line-height: 1.2;
    color: var(--o6tk-heading-color);
}

.o6tk-h4 {
    font-size: var(--o6tk-text-2xl);
    font-weight: 600;
    line-height: 1.25;
    color: var(--o6tk-heading-color);
}

.o6tk-h5 {
    font-size: var(--o6tk-text-xl);
    font-weight: 600;
    line-height: 1.3;
    color: var(--o6tk-heading-color);
}

.o6tk-h6 {
    font-size: var(--o6tk-text-lg);
    font-weight: 600;
    line-height: 1.35;
    color: var(--o6tk-heading-color);
}


/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY - Body Text
   ═══════════════════════════════════════════════════════════ */

.o6tk-body {
    font-size: var(--o6tk-text-lg);
    line-height: 1.65;
    color: var(--o6tk-body-color);
}

.o6tk-body-sm {
    font-size: var(--o6tk-text-base);
    line-height: 1.6;
    color: var(--o6tk-body-color);
}

.o6tk-small {
    font-size: var(--o6tk-text-sm);
    line-height: 1.5;
    color: var(--o6tk-body-color);
}

.o6tk-muted {
    color: var(--o6tk-muted-color);
}

.o6tk-overline {
    font-size: var(--o6tk-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--o6tk-primary);
}


/* ═══════════════════════════════════════════════════════════
   TEXT SIZES (direct size assignment)
   ═══════════════════════════════════════════════════════════ */

.o6tk-text-xs   { font-size: var(--o6tk-text-xs); }
.o6tk-text-sm   { font-size: var(--o6tk-text-sm); }
.o6tk-text-base { font-size: var(--o6tk-text-base); }
.o6tk-text-lg   { font-size: var(--o6tk-text-lg); }
.o6tk-text-xl   { font-size: var(--o6tk-text-xl); }
.o6tk-text-2xl  { font-size: var(--o6tk-text-2xl); }
.o6tk-text-3xl  { font-size: var(--o6tk-text-3xl); }
.o6tk-text-4xl  { font-size: var(--o6tk-text-4xl); }
.o6tk-text-5xl  { font-size: var(--o6tk-text-5xl); }
.o6tk-text-6xl  { font-size: var(--o6tk-text-6xl); }


/* ═══════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════ */

.o6tk-section {
    padding-top: var(--o6tk-ss-lg);
    padding-bottom: var(--o6tk-ss-lg);
}

.o6tk-section-sm {
    padding-top: var(--o6tk-ss-sm);
    padding-bottom: var(--o6tk-ss-sm);
}

.o6tk-section-md {
    padding-top: var(--o6tk-ss-md);
    padding-bottom: var(--o6tk-ss-md);
}

.o6tk-section-xl {
    padding-top: var(--o6tk-ss-xl);
    padding-bottom: var(--o6tk-ss-xl);
}

.o6tk-inner {
    margin-left: var(--o6tk-space-8);
    margin-right: var(--o6tk-space-8);
}

.o6tk-centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.o6tk-max-prose {
    max-width: 65ch;
}

.o6tk-max-sm  { max-width: 640px; }
.o6tk-max-md  { max-width: 768px; }
.o6tk-max-lg  { max-width: 1024px; }
.o6tk-max-xl  { max-width: 1280px; }
.o6tk-max-2xl { max-width: 1440px; }


/* ═══════════════════════════════════════════════════════════
   GRID
   ═══════════════════════════════════════════════════════════ */

.o6tk-grid { display: grid; }
.o6tk-flex { display: flex; }

.o6tk-grid-1 { grid-template-columns: 1fr; }
.o6tk-grid-2 { grid-template-columns: repeat(2, 1fr); }
.o6tk-grid-3 { grid-template-columns: repeat(3, 1fr); }
.o6tk-grid-4 { grid-template-columns: repeat(4, 1fr); }
.o6tk-grid-5 { grid-template-columns: repeat(5, 1fr); }
.o6tk-grid-6 { grid-template-columns: repeat(6, 1fr); }

.o6tk-gap-2  { gap: var(--o6tk-space-2); }
.o6tk-gap-3  { gap: var(--o6tk-space-3); }
.o6tk-gap-4  { gap: var(--o6tk-space-4); }
.o6tk-gap-6  { gap: var(--o6tk-space-6); }
.o6tk-gap-8  { gap: var(--o6tk-space-8); }
.o6tk-gap-10 { gap: var(--o6tk-space-10); }
.o6tk-gap-12 { gap: var(--o6tk-space-12); }

.o6tk-items-center   { align-items: center; }
.o6tk-items-start    { align-items: flex-start; }
.o6tk-items-end      { align-items: flex-end; }
.o6tk-items-stretch  { align-items: stretch; }

.o6tk-justify-center  { justify-content: center; }
.o6tk-justify-between { justify-content: space-between; }
.o6tk-justify-start   { justify-content: flex-start; }
.o6tk-justify-end     { justify-content: flex-end; }

.o6tk-flex-col { flex-direction: column; }
.o6tk-flex-row { flex-direction: row; }
.o6tk-flex-wrap { flex-wrap: wrap; }


/* ═══════════════════════════════════════════════════════════
   SPACING (margin-bottom for vertical rhythm)
   ═══════════════════════════════════════════════════════════ */

.o6tk-mb-0  { margin-bottom: 0; }
.o6tk-mb-1  { margin-bottom: var(--o6tk-space-1); }
.o6tk-mb-2  { margin-bottom: var(--o6tk-space-2); }
.o6tk-mb-3  { margin-bottom: var(--o6tk-space-3); }
.o6tk-mb-4  { margin-bottom: var(--o6tk-space-4); }
.o6tk-mb-6  { margin-bottom: var(--o6tk-space-6); }
.o6tk-mb-8  { margin-bottom: var(--o6tk-space-8); }
.o6tk-mb-10 { margin-bottom: var(--o6tk-space-10); }
.o6tk-mb-12 { margin-bottom: var(--o6tk-space-12); }

.o6tk-mt-0  { margin-top: 0; }
.o6tk-mt-4  { margin-top: var(--o6tk-space-4); }
.o6tk-mt-8  { margin-top: var(--o6tk-space-8); }
.o6tk-mt-12 { margin-top: var(--o6tk-space-12); }

.o6tk-pt-0  { padding-top: 0; }
.o6tk-pt-4  { padding-top: var(--o6tk-space-4); }
.o6tk-pt-8  { padding-top: var(--o6tk-space-8); }

.o6tk-pb-0  { padding-bottom: 0; }
.o6tk-pb-4  { padding-bottom: var(--o6tk-space-4); }
.o6tk-pb-8  { padding-bottom: var(--o6tk-space-8); }

.o6tk-p-4   { padding: var(--o6tk-space-4); }
.o6tk-p-6   { padding: var(--o6tk-space-6); }
.o6tk-p-8   { padding: var(--o6tk-space-8); }


/* ═══════════════════════════════════════════════════════════
   COLOR UTILITIES
   ═══════════════════════════════════════════════════════════ */

/* Text colors */
.o6tk-text-primary    { color: var(--o6tk-primary); }
.o6tk-text-secondary  { color: var(--o6tk-secondary); }
.o6tk-text-accent     { color: var(--o6tk-accent); }
.o6tk-text-neutral    { color: var(--o6tk-neutral); }
.o6tk-text-dark       { color: var(--o6tk-dark); }
.o6tk-text-light      { color: var(--o6tk-light); }
.o6tk-text-white      { color: #fff; }

/* Background colors */
.o6tk-bg-primary      { background-color: var(--o6tk-primary); }
.o6tk-bg-secondary    { background-color: var(--o6tk-secondary); }
.o6tk-bg-accent       { background-color: var(--o6tk-accent); }
.o6tk-bg-dark         { background-color: var(--o6tk-dark); }
.o6tk-bg-light        { background-color: var(--o6tk-light); }
.o6tk-bg-surface      { background-color: var(--o6tk-surface); }

/* Soft backgrounds (using light shades) */
.o6tk-bg-primary-soft   { background-color: var(--o6tk-primary-bg); }
.o6tk-bg-secondary-soft { background-color: var(--o6tk-secondary-bg); }
.o6tk-bg-accent-soft    { background-color: var(--o6tk-accent-bg); }
.o6tk-bg-neutral-soft   { background-color: var(--o6tk-neutral-bg); }


/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */

/* Legacy .o6tk-btn classes removed. Use [data-btn] system instead.
   See: docs/DATA-ATTRIBUTE-SYSTEM.md for button reference. */


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    .o6tk-lg-grid-1 { grid-template-columns: 1fr; }
    .o6tk-lg-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .o6tk-lg-hidden  { display: none !important; }
}

@media (max-width: 767px) {
    .o6tk-md-grid-1 { grid-template-columns: 1fr; }
    .o6tk-md-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .o6tk-md-hidden  { display: none !important; }
    .o6tk-md-stack   { flex-direction: column; }

    .o6tk-inner {
        margin-left: var(--o6tk-space-4);
        margin-right: var(--o6tk-space-4);
    }
}

@media (max-width: 479px) {
    .o6tk-sm-hidden { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════════════════ */

.o6tk-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.o6tk-w-full  { width: 100%; }
.o6tk-h-full  { height: 100%; }
.o6tk-relative { position: relative; }
.o6tk-overflow-hidden { overflow: hidden; }


/* ═══════════════════════════════════════════════════════════
   DATA-ATTRIBUTE SECTION STYLES
   Styles applied via data attributes that survive O6 import.
   No class assignment needed after import.
   ═══════════════════════════════════════════════════════════ */


/* ── Universal Foundations ─────────────────────────────── */

[data-section] {
    padding-top: var(--o6tk-ss-lg);
    padding-bottom: var(--o6tk-ss-lg);
}

/* Hero + horizontal scroll sections: no default section padding */
[data-section="hero-slider"],
[data-section*="-hero"],
[data-section="horizontal"] {
    padding-top: 0;
    padding-bottom: 0;
}

[data-inner] {
    margin-left: var(--o6tk-space-8);
    margin-right: var(--o6tk-space-8);
}

[data-heading="section"] {
    font-size: var(--o6tk-h3);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--o6tk-heading-color);
    margin-bottom: var(--o6tk-space-8);
}

[data-heading="sub"] {
    font-size: var(--o6tk-h4);
    font-weight: 600;
    line-height: 1.2;
    color: var(--o6tk-heading-color);
    margin-bottom: var(--o6tk-space-4);
}

[data-subtext] {
    font-size: var(--o6tk-text-lg);
    line-height: 1.65;
    color: var(--o6tk-body-color);
    max-width: 65ch;
}

[data-body] {
    font-size: var(--o6tk-text-base);
    line-height: 1.65;
    color: var(--o6tk-body-color);
    max-width: 65ch;
}

[data-overline] {
    font-size: var(--o6tk-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--o6tk-primary);
    margin-bottom: var(--o6tk-space-3);
}


/* ── Buttons (unified system) ─────────────────────────── */

[data-btn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.85em 2em;
    font-size: var(--o6tk-text-base);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--o6tk-radius-sm);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

[data-btn]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-btn]:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Color variants */
[data-btn="primary"] {
    background: var(--o6tk-primary);
    color: #fff;
    border-color: var(--o6tk-primary);
}

[data-btn="primary"]:hover {
    background: var(--o6tk-primary-hover);
    border-color: var(--o6tk-primary-hover);
}

[data-btn="secondary"] {
    background: var(--o6tk-secondary);
    color: #fff;
    border-color: var(--o6tk-secondary);
}

[data-btn="secondary"]:hover {
    background: var(--o6tk-secondary-hover);
    border-color: var(--o6tk-secondary-hover);
}

[data-btn="outline"] {
    background: transparent;
    color: var(--o6tk-primary);
    border-color: var(--o6tk-primary);
}

[data-btn="outline"]:hover {
    background: var(--o6tk-primary);
    color: #fff;
}

[data-btn="light"] {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
}

[data-btn="light"]:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-btn="white"] {
    background: #fff;
    color: var(--o6tk-dark, #101010);
    border-color: #fff;
}

[data-btn="white"]:hover {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

[data-btn="outline-light"] {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

[data-btn="outline-light"]:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* Size variants */
[data-btn-size="sm"] {
    padding: 0.55em 1.25em;
    font-size: var(--o6tk-text-sm);
}

[data-btn-size="lg"] {
    padding: 1.1em 2.8em;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
}

[data-btn-size="full"] {
    width: 100%;
}


/* ── Cards ─────────────────────────────────────────────── */

[data-card] {
    background: var(--o6tk-light);
    border: 1px solid var(--o6tk-border-color);
    border-radius: var(--o6tk-radius-lg);
    padding: var(--o6tk-space-8);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[data-card]:hover {
    transform: translateY(-3px);
    box-shadow: var(--o6tk-shadow-md);
}

[data-card-icon] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--o6tk-primary);
    border-radius: var(--o6tk-radius-md);
    margin-bottom: var(--o6tk-space-4);
    color: #fff;
}

[data-card-title] {
    font-size: var(--o6tk-text-lg);
    font-weight: 600;
    color: var(--o6tk-heading-color);
    margin-bottom: var(--o6tk-space-2);
}

[data-card-text] {
    font-size: var(--o6tk-text-sm);
    line-height: 1.6;
    color: var(--o6tk-body-color);
}


/* ── Stats / Counters ──────────────────────────────────── */

[data-stat] {
    text-align: center;
    padding: var(--o6tk-space-6);
}

[data-stat-number] {
    font-size: var(--o6tk-h2);
    font-weight: 800;
    line-height: 1;
    color: var(--o6tk-primary);
    margin-bottom: var(--o6tk-space-2);
    display: block;
}

[data-stat-label] {
    font-size: var(--o6tk-text-sm);
    color: var(--o6tk-body-color);
    line-height: 1.4;
}


/* ── Accordion (generic, works in any section) ─────────── */

[data-accordion] {
    max-width: 800px;
}

[data-accordion-item] {
    border-bottom: 1px solid var(--o6tk-border-color);
}

[data-accordion-item]:last-child {
    border-bottom: none;
}

[data-accordion-header] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--o6tk-space-6) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: var(--o6tk-text-lg);
    font-weight: 600;
    color: var(--o6tk-heading-color);
    transition: color 0.2s ease;
}

[data-accordion-header]:hover {
    color: var(--o6tk-primary);
}

[data-accordion-icon] {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--o6tk-primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: var(--o6tk-space-4);
}

[data-accordion-content] p {
    padding-bottom: var(--o6tk-space-6);
    font-size: var(--o6tk-text-base);
    line-height: 1.65;
    color: var(--o6tk-body-color);
    max-width: 65ch;
}


/* ── Checklist ─────────────────────────────────────────── */

[data-check-list] {
    list-style: none;
    padding: 0;
    margin: 0;
}

[data-check-item] {
    position: relative;
    padding-left: 1.75em;
    margin-bottom: var(--o6tk-space-3);
    font-size: var(--o6tk-text-base);
    line-height: 1.5;
    color: var(--o6tk-body-color);
}

[data-check-item]::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--o6tk-secondary);
    font-weight: 700;
}


/* ── Comparison Columns ────────────────────────────────── */

[data-comparison-col] {
    padding: var(--o6tk-space-8);
    border-radius: var(--o6tk-radius-lg);
}

[data-comparison-col="without"] {
    background: var(--o6tk-neutral-bg);
    border: 1px solid var(--o6tk-border-color);
}

[data-comparison-col="with"] {
    background: var(--o6tk-primary-bg);
    border: 1px solid var(--o6tk-primary-border);
}

[data-comparison-col] [data-heading="sub"] {
    margin-bottom: var(--o6tk-space-6);
    font-size: var(--o6tk-h4);
    font-weight: 600;
    color: var(--o6tk-heading-color);
}

[data-comparison-col] [data-body] {
    margin-bottom: var(--o6tk-space-3);
    padding-left: 1.5em;
    position: relative;
    font-size: var(--o6tk-text-base);
    line-height: 1.65;
    color: var(--o6tk-body-color);
}

[data-comparison-col="without"] [data-body]::before {
    content: "\00D7";
    position: absolute;
    left: 0;
    color: var(--o6tk-neutral-muted);
    font-weight: 700;
}

[data-comparison-col="with"] [data-body]::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--o6tk-secondary);
    font-weight: 700;
}

/* Total line (last data-body in each column) */
[data-comparison-col="without"] [data-body]:last-child,
[data-comparison-col="with"] [data-body]:last-child {
    font-weight: 700;
    font-size: var(--o6tk-text-lg);
    margin-top: var(--o6tk-space-4);
}


/* ═══════════════════════════════════════════════════════════
   SECTION-SPECIFIC STYLES
   ═══════════════════════════════════════════════════════════ */


/* ── Dark Sections (hero + CTA shared) ────────────────── */

[data-hero],
[data-section="cta"],
[data-section="final-cta"] {
    background: var(--o6tk-dark);
    color: #fff;
    text-align: center;
    overflow: hidden;
    position: relative;
}

[data-hero] [data-heading="section"],
[data-section="cta"] [data-heading="section"],
[data-section="final-cta"] h2 {
    color: #fff;
    font-size: var(--o6tk-hero);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--o6tk-space-8);
}

[data-hero] [data-subtext],
[data-section="cta"] [data-subtext],
[data-section="final-cta"] p {
    color: rgba(255, 255, 255, 0.65);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: var(--o6tk-text-xl);
    line-height: 1.6;
    max-width: 50ch;
    margin-bottom: var(--o6tk-space-8);
}

/* Final CTA parallax bg */
[data-section="final-cta"] > div[data-parallax] {
    position: absolute;
    inset: -15% 0;
    z-index: 0;
}

[data-section="final-cta"] > div[data-parallax] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Final CTA content container */
[data-section="final-cta"] > div:not([data-parallax]) {
    position: relative;
    z-index: 1;
    margin-left: var(--o6tk-space-8);
    margin-right: var(--o6tk-space-8);
    padding-top: var(--o6tk-ss-xl);
    padding-bottom: var(--o6tk-ss-xl);
}

/* Final CTA / CTA buttons use [data-btn="light"] from base system */


/* ── Generic Section Padding ──────────────────────────── */

[data-section] {
    padding-top: var(--o6tk-ss-md);
    padding-bottom: var(--o6tk-ss-md);
}

/* Full-bleed sections: no default padding (they handle their own) */
[data-section="hero-slider"],
[data-section="logo-bar"] {
    padding-top: 0;
    padding-bottom: 0;
}


/* ── Hero-specific ────────────────────────────────────── */

[data-hero] {
    padding-top: var(--o6tk-ss-xl);
    padding-bottom: var(--o6tk-ss-xl);
}

[data-hero] [data-heading="section"] {
    font-size: var(--o6tk-h1);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

[data-hero] [data-subtext] {
    font-size: var(--o6tk-text-xl);
    line-height: 1.6;
}


/* ── Generic Data-Attribute Base Styles ──────────────────── */

[data-heading="section"] {
    font-size: var(--o6tk-h3);
    font-weight: 700;
    line-height: 1.15;
    color: var(--o6tk-heading-color);
    margin-bottom: var(--o6tk-space-6);
}

[data-heading="sub"] {
    font-size: var(--o6tk-h4);
    font-weight: 600;
    line-height: 1.2;
    color: var(--o6tk-heading-color);
    margin-bottom: var(--o6tk-space-4);
}

[data-subtext] {
    font-size: var(--o6tk-text-lg);
    line-height: 1.65;
    color: var(--o6tk-body-color);
    max-width: 55ch;
}

[data-body] {
    font-size: var(--o6tk-text-base);
    line-height: 1.7;
    color: var(--o6tk-body-color);
    margin-bottom: var(--o6tk-space-4);
}

/* ── Centered Heading Pattern (shared) ─────────────────── */

[data-section="features"] [data-heading="section"],
[data-section="bento"] [data-heading="section"],
[data-section="comparison"] [data-heading="section"],
[data-section="pricing"] [data-heading="section"],
[data-section="about-stats"] [data-heading="section"],
[data-section="faq"] [data-heading="section"] {
    text-align: center;
    margin-bottom: var(--o6tk-space-12);
    font-size: var(--o6tk-h3);
    font-weight: 700;
    line-height: 1.15;
    color: var(--o6tk-heading-color);
}


/* ── Header ────────────────────────────────────────────── */

header {
    transition: background 0.4s ease, backdrop-filter 0.4s ease,
                -webkit-backdrop-filter 0.4s ease !important;
}

header.header--scrolled {
    background: rgba(10, 10, 10, 0.8) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}

header [data-inner] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: var(--o6tk-space-8);
    margin-right: var(--o6tk-space-8);
    padding-top: var(--o6tk-space-4);
    padding-bottom: var(--o6tk-space-4);
}

header [data-inner] > div:last-child {
    display: flex;
    align-items: center;
    gap: var(--o6tk-space-4);
}

/* Logo stays above overlay when menu is open */
header [data-inner] > *:first-child {
    position: relative !important;
    z-index: 1001 !important;
}


/* ── Problem Section ───────────────────────────────────── */

[data-section="problem"] {
    background: var(--o6tk-dark, #0b0b0c);
}

[data-section="problem"] [data-heading="section"] {
    max-width: none;
    color: #fff;
}

[data-section="problem"] [data-body] {
    max-width: none;
    margin-bottom: var(--o6tk-space-6);
    font-size: var(--o6tk-text-lg);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.75);
}


/* ── Features Grid ─────────────────────────────────────── */

[data-section="features"] [data-grid] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--o6tk-space-6) !important;
}

[data-section="features"] [data-card] {
    min-width: 0;
    background: var(--o6tk-light);
    border: 1px solid var(--o6tk-border-color);
    border-radius: var(--o6tk-radius-lg);
    padding: var(--o6tk-space-6);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[data-section="features"] [data-card]:hover {
    transform: translateY(-3px);
    box-shadow: var(--o6tk-shadow-md);
}

[data-section="features"] [data-card] {
    text-align: center;
}

[data-section="features"] [data-card-icon] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--o6tk-primary);
    border-radius: var(--o6tk-radius-md);
    margin-bottom: var(--o6tk-space-3);
    margin-left: auto;
    margin-right: auto;
    color: #fff;
}

[data-section="features"] [data-card-title] {
    font-size: var(--o6tk-text-lg);
    font-weight: 600;
    color: var(--o6tk-heading-color);
    margin-bottom: var(--o6tk-space-2);
}

[data-section="features"] [data-card-text] {
    font-size: var(--o6tk-text-sm);
    line-height: 1.6;
    color: var(--o6tk-body-color);
}

[data-bento-grid] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(280px, auto);
    gap: var(--o6tk-space-6);
}

[data-bento-item] {
    position: relative;
    border-radius: var(--o6tk-radius-lg);
    overflow: hidden;
    min-height: 280px;
}

[data-bento-item] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

[data-bento-overlay] {
    position: relative;
    z-index: 1;
    padding: var(--o6tk-space-6);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
    color: #fff;
}

[data-bento-overlay] [data-card-title] { color: #fff; }
[data-bento-overlay] [data-card-text] { color: rgba(255, 255, 255, 0.8); }

[data-bento-item="wide"] { grid-column: span 2; }
[data-bento-item="tall"] { grid-row: span 2; }

[data-bento-item="cta"] {
    background: var(--o6tk-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--o6tk-space-8);
}

[data-bento-item="cta"] [data-card-title] {
    color: #fff;
    font-size: var(--o6tk-h4);
    margin-bottom: var(--o6tk-space-4);
}

[data-bento-item="cta"] [data-card-text] {
    color: rgba(255, 255, 255, 0.85);
}


/* ── Logo Bar ──────────────────────────────────────────── */

[data-section="logo-bar"] {
    padding-top: var(--o6tk-ss-sm);
    padding-bottom: var(--o6tk-ss-sm);
    overflow: hidden;
}

[data-section="logo-bar"] [data-heading="section"] {
    text-align: center;
    font-size: var(--o6tk-text-lg);
    font-weight: 500;
    color: var(--o6tk-muted-color);
    letter-spacing: 0;
    margin-bottom: var(--o6tk-space-8);
}

[data-logo-track] {
    display: flex;
    align-items: center;
    gap: var(--o6tk-space-12);
}

[data-logo-item] {
    flex-shrink: 0;
}

[data-logo-item] img {
    height: 40px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all var(--o6tk-dur-base) var(--o6tk-ease-default);
}

[data-logo-item]:hover img {
    filter: grayscale(0%);
    opacity: 1;
}


/* ── Comparison ────────────────────────────────────────── */

[data-section="comparison"] [data-columns] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--o6tk-space-8);
}


/* ── Pricing ───────────────────────────────────────────── */

[data-price-card] {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    background: var(--o6tk-light);
    border: 2px solid var(--o6tk-primary-border);
    border-radius: var(--o6tk-radius-xl);
    padding: var(--o6tk-space-12) var(--o6tk-space-8);
    text-align: center;
}

[data-price-amount] {
    font-size: var(--o6tk-h1);
    font-weight: 800;
    color: var(--o6tk-heading-color);
    line-height: 1;
    margin-bottom: var(--o6tk-space-2);
    display: block;
}

[data-price-period] {
    font-size: var(--o6tk-text-base);
    color: var(--o6tk-muted-color);
    margin-bottom: var(--o6tk-space-8);
    display: block;
}

[data-price-card] [data-check-list] {
    text-align: left;
    margin-bottom: var(--o6tk-space-8);
    list-style: none;
    padding: 0;
}

[data-price-card] [data-check-item] {
    position: relative;
    padding-left: 1.75em;
    margin-bottom: var(--o6tk-space-3);
    font-size: var(--o6tk-text-base);
    line-height: 1.5;
    color: var(--o6tk-body-color);
}

[data-price-card] [data-check-item]::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--o6tk-secondary);
    font-weight: 700;
}

/* Pricing buttons: full-width + spacing (color from [data-btn="primary"]) */
[data-price-card] [data-btn] {
    width: 100%;
    margin-bottom: var(--o6tk-space-4);
}

[data-price-card] [data-subtext] {
    font-size: var(--o6tk-text-sm);
    color: var(--o6tk-muted-color);
    margin-left: auto;
    margin-right: auto;
}


/* ── FAQ ───────────────────────────────────────────────── */

[data-section="faq"] {
    background: var(--o6tk-neutral-bg);
}

[data-section="faq"] [data-heading="section"],
[data-section="pricing-included"] [data-heading="section"] {
    text-align: center;
    margin-bottom: var(--o6tk-space-4);
}

[data-section="faq"] [data-subtext],
[data-section="pricing-included"] [data-subtext] {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--o6tk-space-12);
}

[data-section="faq"] [data-accordion],
[data-section="pricing-included"] [data-accordion] {
    margin-left: auto;
    margin-right: auto;
}


/* ── Final CTA (additions beyond shared dark pattern) ──── */

[data-section="cta"] [data-subtext] {
    margin-bottom: var(--o6tk-space-8);
}


/* ── About Story (two-column) ──────────────────────────── */

[data-section="about-story"] [data-columns] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--o6tk-space-16);
    align-items: start;
}

[data-section="about-story"] [data-heading="section"] {
    font-size: var(--o6tk-h1);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: var(--o6tk-space-8);
}

[data-section="about-story"] [data-body] {
    font-size: var(--o6tk-text-lg);
    line-height: 1.75;
    color: var(--o6tk-body-color);
    margin-bottom: var(--o6tk-space-6);
}

[data-section="about-story"] [data-body]:last-of-type {
    margin-bottom: 0;
}

[data-section="about-story"] [data-column="right"] {
    position: relative;
    overflow: hidden;
    border-radius: var(--o6tk-radius-lg);
    min-height: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

[data-section="about-story"] [data-column="right"] [data-parallax] {
    position: absolute;
    inset: 0;
}

[data-section="about-story"] [data-column="right"] img {
    width: 100%;
    height: 130%;
    object-fit: cover;
    position: absolute;
    top: -15%;
}


/* ── About Stats ───────────────────────────────────────── */

[data-section="about-stats"] {
    background: var(--o6tk-neutral-bg);
}

[data-section="about-stats"] [data-heading="section"] {
    margin-bottom: var(--o6tk-space-16);
}

[data-section="about-stats"] [data-grid] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--o6tk-space-8);
    margin-bottom: var(--o6tk-space-12);
}

[data-section="about-stats"] [data-stat] {
    text-align: center;
    padding: var(--o6tk-space-10) var(--o6tk-space-6);
    background: var(--o6tk-light);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--o6tk-radius-md);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[data-section="about-stats"] [data-stat]:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

[data-section="about-stats"] [data-stat-number] {
    font-size: var(--o6tk-hero);
    font-weight: 800;
    line-height: 1;
    color: var(--o6tk-primary);
    display: block;
    margin-bottom: var(--o6tk-space-3);
}

[data-section="about-stats"] [data-stat-label] {
    font-size: var(--o6tk-text-base);
    color: var(--o6tk-body-color);
    font-weight: 500;
}

[data-section="about-stats"] [data-body] {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--o6tk-text-lg);
    color: var(--o6tk-body-color);
    max-width: 55ch;
}


/* ── Contact ───────────────────────────────────────────── */

[data-section="contact"] [data-columns] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--o6tk-space-12);
}

[data-section="contact"] [data-heading="sub"] {
    margin-bottom: var(--o6tk-space-6);
}

[data-section="contact"] [data-body] {
    margin-bottom: var(--o6tk-space-4);
}


/* ── Changelog ─────────────────────────────────────────── */

[data-section="changelog"] [data-heading="section"] {
    margin-bottom: var(--o6tk-space-12);
}

[data-changelog-entry] {
    padding-bottom: var(--o6tk-space-8);
    margin-bottom: var(--o6tk-space-8);
    border-bottom: 1px solid var(--o6tk-border-color);
}

[data-changelog-entry]:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

[data-changelog-entry] [data-heading="sub"] {
    color: var(--o6tk-primary);
    margin-bottom: var(--o6tk-space-4);
}

[data-changelog-entry] [data-body] {
    margin-bottom: var(--o6tk-space-3);
}


/* ── Footer ────────────────────────────────────────────── */

[data-section="footer"] {
    background: var(--o6tk-dark);
    color: rgba(255, 255, 255, 0.7);
    padding-top: var(--o6tk-ss-lg);
    padding-bottom: var(--o6tk-space-8);
}

[data-footer-grid] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--o6tk-space-8);
    margin-bottom: var(--o6tk-space-12);
}

[data-footer-col] [data-heading="sub"] {
    color: #fff;
    font-size: var(--o6tk-text-base);
    font-weight: 600;
    margin-bottom: var(--o6tk-space-4);
}

[data-footer-col] p,
[data-footer-col] [data-body] {
    font-size: var(--o6tk-text-sm);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--o6tk-space-2);
    max-width: none;
}

[data-footer-col] a {
    display: block;
    font-size: var(--o6tk-text-sm);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    padding: var(--o6tk-space-1) 0;
    transition: color var(--o6tk-dur-fast) ease;
}

[data-footer-col] a:hover {
    color: #fff;
}

[data-footer-bottom] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--o6tk-space-6);
}

[data-footer-bottom] p {
    font-size: var(--o6tk-text-xs);
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}


/* ── Parallax Showcase ─────────────────────────────────── */

[data-section="parallax-showcase"] {
    position: relative;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
}

/* Background parallax layer -- enlarged to allow parallax movement */
[data-section="parallax-showcase"] > [data-parallax-bg] {
    position: absolute;
    inset: -80px 0;
    z-index: 0;
}

[data-section="parallax-showcase"] > [data-parallax-bg] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content layers sit above the gradient overlay */
[data-section="parallax-showcase"] > [data-inner] {
    position: relative;
    z-index: 2;
}

/* Hero content area (not the columns row) */
[data-section="parallax-showcase"] > [data-inner]:not([data-columns]) {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--o6tk-ss-xl);
    padding-bottom: var(--o6tk-ss-xl);
}

[data-section="parallax-showcase"] [data-heading="section"] {
    color: #fff;
    font-size: var(--o6tk-hero);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 15ch;
}

[data-section="parallax-showcase"] [data-subtext] {
    color: rgba(255, 255, 255, 0.85);
    max-width: 50ch;
    margin-bottom: var(--o6tk-space-10);
}

/* Parallax CTA uses [data-btn="white"] from base system */

[data-section="parallax-showcase"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Columns break out of the dark overlay with their own bg */
[data-section="parallax-showcase"] > [data-inner][data-columns] {
    background: var(--o6tk-light, #fafafa);
    z-index: 3;
}

[data-section="parallax-showcase"] [data-columns] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--o6tk-space-10);
    padding-top: var(--o6tk-ss-lg);
    padding-bottom: var(--o6tk-ss-lg);
}

[data-section="parallax-showcase"] [data-columns] [data-parallax] {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: var(--o6tk-space-6);
    aspect-ratio: 4 / 5;
}

[data-section="parallax-showcase"] [data-columns] [data-parallax] img {
    width: 100%;
    height: 140%;
    object-fit: cover;
    position: absolute;
    top: -20%;
    left: 0;
}

[data-section="parallax-showcase"] [data-columns] [data-card-title] {
    font-size: var(--o6tk-h4);
    font-weight: 700;
    margin-bottom: var(--o6tk-space-3);
}

[data-section="parallax-showcase"] [data-columns] [data-card-text] {
    max-width: 40ch;
}


/* ── Horizontal Scroll ────────────────────────────────── */

[data-section="horizontal"],
[data-section="horizontal-showcase"] {
    overflow: hidden;
    padding-top: var(--o6tk-ss-lg);
    padding-bottom: 0;
}

[data-horizontal-track] {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    overflow: visible !important;
}

[data-horizontal-panel],
[data-horizontal-track] > * {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    padding: var(--o6tk-space-12) var(--o6tk-space-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 0 !important;
}

/* Alternating panel backgrounds */
[data-horizontal-track] > *:nth-child(1) {
    background: var(--o6tk-light);
}

[data-horizontal-track] > *:nth-child(2) {
    background: var(--o6tk-neutral-bg);
}

[data-horizontal-track] > *:nth-child(3) {
    background: var(--o6tk-primary-bg);
}

[data-horizontal-track] > *:nth-child(4) {
    background: var(--o6tk-neutral-surface);
}

[data-horizontal-track] > *:nth-child(n+5) {
    background: var(--o6tk-neutral-bg);
}

/* Panel inner content container */
[data-horizontal-panel] > [data-card],
[data-horizontal-track] > * > [data-card],
[data-horizontal-panel] > div,
[data-horizontal-track] > * > div {
    max-width: 900px;
    width: 100%;
}

/* Everything inside horizontal panels: no borders, no radius, no shadows */
[data-horizontal-panel] [data-card],
[data-horizontal-track] > * [data-card] {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

[data-horizontal-panel] [data-card]:hover,
[data-horizontal-track] > * [data-card]:hover {
    transform: none;
    box-shadow: none;
}

/* No border-radius anywhere in horizontal scroll */
[data-section="horizontal"],
[data-section="horizontal-showcase"],
[data-section="horizontal"] *,
[data-section="horizontal-showcase"] *,
[data-horizontal-track],
[data-horizontal-track] * {
    border-radius: 0 !important;
}

/* No borders on the section, track, and panels (not inner content) */
[data-section="horizontal"],
[data-section="horizontal-showcase"],
[data-horizontal-track],
[data-horizontal-panel],
[data-horizontal-track] > * {
    border: none !important;
}

[data-horizontal-panel] [data-overline],
[data-horizontal-track] > * [data-overline] {
    font-size: var(--o6tk-h1);
    font-weight: 800;
    color: var(--o6tk-primary);
    opacity: 0.15;
    letter-spacing: -0.02em;
    margin-bottom: var(--o6tk-space-4);
}

[data-horizontal-panel] [data-card-title],
[data-horizontal-track] > * [data-card-title] {
    font-size: var(--o6tk-h2);
    font-weight: 700;
    color: var(--o6tk-heading-color);
    margin-bottom: var(--o6tk-space-6);
}

[data-horizontal-panel] [data-card-text],
[data-horizontal-track] > * [data-card-text] {
    font-size: var(--o6tk-text-lg);
    color: var(--o6tk-body-color);
    line-height: 1.7;
    max-width: 55ch;
    margin-bottom: var(--o6tk-space-8);
}

[data-horizontal-panel] img,
[data-horizontal-track] > * img {
    border-radius: 0;
    max-width: 100%;
    height: auto;
}

/* Panel containing parallax needs positioning context */
[data-horizontal-track] > *:has([data-parallax]) {
    position: relative;
    overflow: hidden;
    background: #000 !important;
}

/* Parallax panel inside horizontal scroll: full-bleed background */
[data-horizontal-track] [data-parallax] {
    position: absolute;
    top: 0;
    left: -15%;
    width: 130%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    max-width: none;
}

[data-horizontal-track] [data-parallax] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

[data-horizontal-track] [data-parallax-overlay] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    pointer-events: none;
    max-width: none;
}

[data-horizontal-track] [data-parallax-content] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--o6tk-space-12);
    height: 100%;
    max-width: 900px;
}

[data-horizontal-track] [data-parallax-content] [data-card-title] {
    color: #fff;
}

[data-horizontal-track] [data-parallax-content] [data-card-text] {
    color: rgba(255, 255, 255, 0.8);
}

/* Lightbox grid inside horizontal panels */
[data-horizontal-panel] [data-lightbox-grid],
[data-horizontal-track] > * [data-lightbox-grid] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--o6tk-space-4);
    max-width: 900px;
    width: 100%;
    margin-top: var(--o6tk-space-4);
}

[data-lightbox] {
    cursor: zoom-in;
    overflow: hidden;
}

[data-lightbox] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    transition: transform 0.3s ease;
}

[data-lightbox]:hover img {
    transform: scale(1.05);
}

/* Counter/stat grid inside horizontal panels */
[data-horizontal-panel] [data-stat-grid],
[data-horizontal-track] > * [data-stat-grid] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--o6tk-space-6);
    max-width: 900px;
    width: 100%;
    margin-top: var(--o6tk-space-4);
}

/* Stat items inside horizontal panels */
[data-horizontal-panel] [data-stat],
[data-horizontal-track] > * [data-stat] {
    text-align: center;
    padding: var(--o6tk-space-8) var(--o6tk-space-6);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--o6tk-space-2);
}

/* Counter numbers inside horizontal panels */
[data-horizontal-panel] [data-stat-number],
[data-horizontal-track] > * [data-stat-number] {
    font-size: var(--o6tk-h1) !important;
    font-weight: 800 !important;
    line-height: 1;
    color: var(--o6tk-primary);
    margin-bottom: var(--o6tk-space-1);
    display: block;
    text-align: center;
}

[data-horizontal-panel] [data-stat-label],
[data-horizontal-track] > * [data-stat-label] {
    font-size: var(--o6tk-text-base);
    color: var(--o6tk-body-color);
    line-height: 1.4;
    text-align: center;
    font-weight: 500;
}


/* ── Horizontal Showcase Heading ──────────────────────── */

[data-section="horizontal-showcase"] [data-heading="section"] {
    text-align: center;
    margin-bottom: var(--o6tk-space-4);
}

[data-section="horizontal-showcase"] [data-subtext] {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--o6tk-space-12);
}


/* ── Counters Section ─────────────────────────────────── */

[data-section="counters"] {
    background: var(--o6tk-neutral-bg);
}

[data-section="counters"] [data-heading="section"],
[data-section="gallery"] [data-heading="section"],
[data-section="magnetic-demo"] [data-heading="section"] {
    text-align: center;
    margin-bottom: var(--o6tk-space-4);
}

[data-section="counters"] [data-subtext],
[data-section="gallery"] [data-subtext],
[data-section="magnetic-demo"] [data-subtext] {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--o6tk-space-12);
}

[data-section="counters"] [data-stat-grid] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--o6tk-space-6);
    margin-bottom: var(--o6tk-space-12);
}

[data-section="counters"] [data-stat] {
    text-align: center;
    padding: var(--o6tk-space-8) var(--o6tk-space-4);
    background: var(--o6tk-light);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--o6tk-radius-md);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
    min-width: 0;
}

[data-section="counters"] [data-stat]:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

[data-section="counters"] [data-stat-number] {
    font-size: clamp(1.25rem, 2.5vw + 0.5rem, var(--o6tk-h2));
    font-weight: 800;
    line-height: 1;
    color: var(--o6tk-primary);
    display: block;
    margin-bottom: var(--o6tk-space-3);
}

[data-section="counters"] [data-stat-label] {
    font-size: var(--o6tk-text-base);
    color: var(--o6tk-body-color);
    font-weight: 500;
}

/* Progress ring row */
[data-section="counters"] [data-progress-ring-row],
[data-section="counters"] div:has(> [data-progress-ring]) {
    display: flex;
    justify-content: center;
    gap: var(--o6tk-space-16, 4rem);
    margin-top: var(--o6tk-space-16, 4rem);
    padding-top: var(--o6tk-space-12, 3rem);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

[data-progress-ring] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

[data-progress-ring] svg {
    width: 160px;
    height: 160px;
    margin-bottom: var(--o6tk-space-4);
}

[data-progress-ring] [data-stat-number] {
    font-size: var(--o6tk-h2);
    font-weight: 800;
    color: var(--o6tk-primary);
    margin-bottom: var(--o6tk-space-2);
}

[data-progress-ring] [data-stat-label] {
    font-size: var(--o6tk-text-base);
    color: var(--o6tk-body-color);
    font-weight: 500;
}


/* ── Gallery / Lightbox Section ──────────────────────── */

[data-section="gallery"] [data-lightbox-grid] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--o6tk-space-4);
}

[data-section="gallery"] [data-lightbox] {
    border-radius: var(--o6tk-radius-md);
}

[data-lightbox][data-lightbox-type="video"] {
    position: relative;
}

[data-lightbox-play-icon] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 1;
    pointer-events: none;
    transition: background 0.25s ease, transform 0.25s ease;
}

[data-lightbox]:hover [data-lightbox-play-icon] {
    background: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.1);
}


/* ── Magnetic Demo Section ───────────────────────────── */

/* Button group */
[data-section="magnetic-demo"] div:has(> [data-btn]) {
    display: flex;
    justify-content: center;
    gap: var(--o6tk-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--o6tk-space-12);
}

[data-section="magnetic-demo"] [data-grid] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--o6tk-space-6);
}

[data-section="magnetic-demo"] [data-card] {
    background: var(--o6tk-light);
    border: 1px solid var(--o6tk-border-color);
    border-radius: var(--o6tk-radius-lg);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[data-section="magnetic-demo"] [data-card]:hover {
    transform: translateY(-3px);
    box-shadow: var(--o6tk-shadow-md);
}

[data-hover-reveal] {
    overflow: hidden;
}

[data-hover-reveal] img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

[data-card]:hover [data-hover-reveal] img {
    transform: scale(1.05);
}

[data-section="magnetic-demo"] [data-card-title] {
    font-size: var(--o6tk-text-lg);
    font-weight: 600;
    color: var(--o6tk-heading-color);
    margin-bottom: var(--o6tk-space-2);
    padding: var(--o6tk-space-4) var(--o6tk-space-6) 0;
}

[data-section="magnetic-demo"] [data-card-text] {
    font-size: var(--o6tk-text-sm);
    line-height: 1.6;
    color: var(--o6tk-body-color);
    padding: 0 var(--o6tk-space-6) var(--o6tk-space-6);
}


/* ── Article Layout (TOC Demo + Progress Bar Demo) ───── */

[data-section="toc-demo"] [data-inner],
[data-section="progress-bar-demo"] [data-inner] {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

[data-section="toc-demo"] h1[data-heading="section"] {
    font-size: var(--o6tk-h1);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--o6tk-space-8);
}

[data-section="toc-demo"] h2[data-heading="section"],
[data-section="progress-bar-demo"] h2[data-heading="section"] {
    margin-top: var(--o6tk-space-16);
    padding-top: var(--o6tk-space-8);
    border-top: 1px solid var(--o6tk-border-color);
}

[data-section="toc-demo"] [data-heading="sub"],
[data-section="progress-bar-demo"] [data-heading="sub"] {
    margin-top: var(--o6tk-space-10);
}

[data-section="toc-demo"] [data-body],
[data-section="progress-bar-demo"] [data-body] {
    font-size: var(--o6tk-text-lg);
    line-height: 1.75;
    margin-bottom: var(--o6tk-space-6);
}

/* TOC container */
[data-toc] {
    background: var(--o6tk-neutral-bg);
    border: 1px solid var(--o6tk-border-color);
    border-radius: var(--o6tk-radius-md);
    padding: var(--o6tk-space-6);
    margin-bottom: var(--o6tk-space-12);
}

[data-toc] ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

[data-toc] ul ul {
    padding-left: var(--o6tk-space-6);
}

[data-toc] li {
    margin-bottom: var(--o6tk-space-1);
}

[data-toc] a {
    display: block;
    padding: var(--o6tk-space-1) 0;
    font-size: var(--o6tk-text-base);
    color: var(--o6tk-body-color);
    text-decoration: none;
    transition: color var(--o6tk-dur-fast) ease;
}

[data-toc] a:hover {
    color: var(--o6tk-primary);
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE - DATA ATTRIBUTE SECTIONS
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    [data-section="features"] [data-grid] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    [data-bento-grid] {
        grid-template-columns: repeat(2, 1fr);
    }

    [data-bento-item="wide"] {
        grid-column: span 1;
    }

    [data-footer-grid] {
        grid-template-columns: repeat(2, 1fr);
    }

    [data-section="about-stats"] [data-grid] {
        grid-template-columns: repeat(2, 1fr);
    }

    [data-section="counters"] [data-stat-grid] {
        grid-template-columns: repeat(2, 1fr);
    }

    [data-section="gallery"] [data-lightbox-grid] {
        grid-template-columns: repeat(2, 1fr);
    }

    [data-section="magnetic-demo"] [data-grid] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    [data-inner] {
        margin-left: var(--o6tk-space-4);
        margin-right: var(--o6tk-space-4);
    }

    [data-section="features"] [data-grid] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--o6tk-space-4) !important;
    }

    [data-section="features"] [data-card] {
        padding: var(--o6tk-space-4);
    }

    [data-section="features"] [data-card-icon] {
        width: 40px;
        height: 40px;
    }

    [data-section="features"] [data-card-title] {
        font-size: var(--o6tk-text-base);
    }

    [data-section="features"] [data-card-text] {
        font-size: var(--o6tk-text-xs);
    }

    [data-bento-grid] {
        grid-template-columns: 1fr;
    }

    [data-bento-item="tall"] {
        grid-row: span 1;
    }

    [data-section="comparison"] [data-columns],
    [data-section="about-story"] [data-columns],
    [data-section="contact"] [data-columns] {
        grid-template-columns: 1fr;
    }

    [data-section="about-stats"] [data-grid] {
        grid-template-columns: repeat(2, 1fr);
    }

    [data-footer-grid] {
        grid-template-columns: 1fr;
    }

    [data-hero] [data-heading="section"],
    [data-section="cta"] [data-heading="section"] {
        font-size: var(--o6tk-h3);
    }

    [data-section="parallax-showcase"] > [data-inner]:not([data-columns]) {
        min-height: 60vh;
    }

    [data-section="parallax-showcase"] [data-heading="section"] {
        font-size: var(--o6tk-h2);
    }

    [data-section="parallax-showcase"] [data-columns] {
        grid-template-columns: 1fr;
    }

    [data-section="parallax-showcase"] [data-columns] [data-parallax] {
        aspect-ratio: 16 / 9;
    }

    [data-section="counters"] [data-stat-grid] {
        grid-template-columns: repeat(2, 1fr);
    }

    [data-section="counters"] [data-progress-ring-row],
    [data-section="counters"] div:has(> [data-progress-ring]) {
        flex-direction: column;
        align-items: center;
        gap: var(--o6tk-space-12, 3rem);
    }

    [data-section="gallery"] [data-lightbox-grid] {
        grid-template-columns: repeat(2, 1fr);
    }

    [data-section="magnetic-demo"] [data-grid] {
        grid-template-columns: 1fr;
    }

    [data-section="toc-demo"] [data-inner],
    [data-section="progress-bar-demo"] [data-inner] {
        max-width: none;
    }

    [data-horizontal-track] {
        flex-direction: column;
    }

    [data-horizontal-panel],
    [data-horizontal-track] > * {
        width: 100% !important;
        min-height: auto;
        padding: var(--o6tk-space-12) var(--o6tk-space-4);
    }

    /* Lightbox grid on mobile: 2 columns */
    [data-horizontal-panel] [data-lightbox-grid],
    [data-horizontal-track] > * [data-lightbox-grid] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    [data-section="features"] [data-grid] {
        grid-template-columns: 1fr !important;
    }

    [data-section="about-stats"] [data-grid] {
        grid-template-columns: 1fr;
    }

    [data-section="counters"] [data-stat-grid] {
        grid-template-columns: 1fr;
    }

    [data-section="gallery"] [data-lightbox-grid] {
        grid-template-columns: 1fr;
    }

    /* Lightbox grid stacks on small phones */
    [data-horizontal-panel] [data-lightbox-grid],
    [data-horizontal-track] > * [data-lightbox-grid] {
        grid-template-columns: 1fr;
    }
}