/* ============================================
   RESET & BASE
   ============================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text-primary);
    background: var(--bg-void);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* ============================================
   AMBIENT BACKGROUND EFFECTS
   ============================================ */

.ambient-glow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    /* Clean X.com style - no ambient glow */
    background: none;
}

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

.container {
    width: min(1440px, 94vw);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.content {
    padding: 0;
    position: relative;
    z-index: 1;
}

/* ============================================
   SECTION THEMES
   ============================================ */

/* Light section - white background with emerald accents */
.section-light {
    background: var(--bg-light);
    color: var(--text-dark);
    padding: 5rem 0;
}

/* Hero section - full viewport height, white */
.section-light.section-hero {
    min-height: 100vh;
    padding-top: 5rem;
    padding-bottom: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--accent-primary-rgb), 0.06), transparent),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(var(--accent-primary-rgb), 0.04), transparent),
        #ffffff;
}

/* Full-height section variant */
.section-light.section-full {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 4rem 0;
}

.section-light .container {
    max-width: min(1440px, 94vw);
    margin: 0 auto;
    padding: 0 4%;
}

.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4 {
    color: var(--text-dark);
}

.section-light p {
    color: var(--text-dark-secondary);
}

.section-light .text-muted {
    color: var(--text-dark-muted);
}

/* Light section cards */
.section-light .base-card,
.section-light .advantage-card,
.section-light .industry-card,
.section-light .security-item,
.section-light .benefit-card,
.section-light .use-case-card {
    background: var(--bg-light-surface);
    border-color: var(--border-light-default);
}

.section-light .base-card:hover,
.section-light .advantage-card:hover,
.section-light .industry-card:hover,
.section-light .benefit-card:hover,
.section-light .use-case-card:hover {
    border-color: var(--accent-dark);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* Light section icons */
.section-light .base-icon,
.section-light .advantage-icon,
.section-light .benefit-icon,
.section-light .use-case-icon {
    background: var(--accent-dark-dim);
    border-color: rgba(0, 0, 0, 0.15);
}

.section-light .base-icon svg,
.section-light .advantage-icon svg,
.section-light .benefit-icon svg,
.section-light .use-case-icon svg,
.section-light .industry-icon,
.section-light .security-icon {
    stroke: var(--accent-dark);
}

/* Light section card text */
.section-light .advantage-card h3,
.section-light .industry-card span {
    color: var(--text-dark);
}

.section-light .advantage-card p {
    color: var(--text-dark-secondary);
}

/* Light section benefit card text */
.section-light .benefit-value {
    color: var(--accent-dark);
}

.section-light .benefit-label {
    color: var(--text-dark-secondary);
}

/* Light section use-case card text */
.section-light .use-case-card h3 {
    color: var(--text-dark);
}

.section-light .use-case-card p {
    color: var(--text-dark-secondary);
}

/* Light section buttons */
.section-light .button.primary {
    background: var(--accent-dark);
    color: var(--bg-light);
    border-color: var(--accent-dark);
}

.section-light .button.primary:hover {
    background: var(--accent-dark-hover);
    border-color: var(--accent-dark-hover);
}

.section-light .button.ghost {
    color: var(--text-dark);
    border-color: var(--border-light-default);
}

.section-light .button.ghost:hover {
    border-color: var(--accent-dark);
    color: var(--accent-dark);
    background: var(--accent-dark-dim);
}

/* Light section header */
.section-light .section-header p {
    color: var(--text-dark-secondary);
}

/* Light section accent elements */
.section-light .metric-value,
.section-light .benefit-value {
    color: var(--accent-dark);
}

/* Light section callout */
.section-light .callout {
    background: var(--bg-light-surface);
    border-color: var(--border-light-default);
}

.section-light .callout h2 {
    color: var(--text-dark);
}

.section-light .callout > p {
    color: var(--text-dark-secondary);
}

/* Off-white section variant */
.section-light-alt {
    background: var(--bg-light-surface);
    color: var(--text-dark);
    padding: 5rem 0;
}

.section-light-alt .container {
    max-width: min(1440px, 94vw);
    margin: 0 auto;
    padding: 0 4%;
}

.section-light-alt h1,
.section-light-alt h2,
.section-light-alt h3,
.section-light-alt h4 {
    color: var(--text-dark);
}

.section-light-alt p {
    color: var(--text-dark-secondary);
}

.section-light-alt .base-card,
.section-light-alt .advantage-card {
    background: var(--bg-light);
    border-color: var(--border-light-default);
}

.section-light-alt .base-card:hover,
.section-light-alt .advantage-card:hover {
    border-color: var(--accent-dark);
}

.section-light-alt .base-icon,
.section-light-alt .advantage-icon {
    background: var(--accent-dark-dim);
}

.section-light-alt .base-icon svg,
.section-light-alt .advantage-icon svg {
    stroke: var(--accent-dark);
}

/* Light-alt section card text */
.section-light-alt .advantage-card h3 {
    color: var(--text-dark);
}

.section-light-alt .advantage-card p {
    color: var(--text-dark-secondary);
}

/* Light-alt section accordion */
.section-light-alt .accordion-item {
    background: var(--bg-light);
    border-color: var(--border-light-default);
}

.section-light-alt .accordion-item:hover,
.section-light-alt .accordion-item.is-open {
    border-color: var(--accent-dark);
}

.section-light-alt .accordion-trigger {
    color: var(--text-dark);
}

.section-light-alt .accordion-trigger:hover {
    color: var(--accent-dark);
}

.section-light-alt .accordion-icon {
    background: var(--accent-dark-dim);
}

.section-light-alt .accordion-icon svg {
    stroke: var(--accent-dark);
}

.section-light-alt .accordion-arrow {
    color: var(--text-dark-muted);
}

.section-light-alt .accordion-body {
    color: var(--text-dark-secondary);
}

/* Light-alt section FAQ */
.section-light-alt .faq-item {
    background: var(--bg-light);
    border-color: var(--border-light-default);
}

.section-light-alt .faq-item:hover,
.section-light-alt .faq-item.is-open {
    border-color: var(--accent-dark);
}

.section-light-alt .faq-trigger {
    color: var(--text-dark);
}

.section-light-alt .faq-trigger:hover {
    background: var(--bg-light-hover);
}

.section-light-alt .faq-arrow {
    color: var(--text-dark-muted);
}

.section-light-alt .faq-body p {
    color: var(--text-dark-secondary);
}

/* Light-alt section header */
.section-light-alt .section-header p {
    color: var(--text-dark-secondary);
}

.section-light-alt .button.primary {
    background: var(--accent-dark);
    color: var(--bg-light);
}

.section-light-alt .button.primary:hover {
    background: var(--accent-dark-hover);
}

.section-light-alt .button.ghost {
    color: var(--text-dark);
    border-color: var(--border-light-default);
}

.section-light-alt .button.ghost:hover {
    border-color: var(--accent-dark);
    color: var(--accent-dark);
    background: var(--accent-dark-dim);
}

/* Dark section - explicit dark styling */
.section-dark {
    background: var(--bg-void);
    color: var(--text-primary);
    padding: 5rem 0;
}

.section-dark:first-child {
    min-height: 100vh;
    padding-top: 5rem;
    padding-bottom: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* Product page hero - don't use full viewport height */
.section-dark:first-child:has(.product-hero) {
    min-height: auto;
    padding: 0;
}

.section-light:has(.product-hero) {
    padding: 0;
}

.section-dark .container {
    max-width: min(1440px, 94vw);
    margin: 0 auto;
    padding: 0 4%;
}

/* Light section feature tabs */
.section-light .tab-navigation {
    background: none;
    border: none;
    padding: 0;
    gap: 1rem;
}

.section-light .tab-btn {
    color: var(--text-dark-muted);
    padding: 1.25rem 2.5rem;
}

.section-light .tab-btn:hover {
    color: var(--text-dark);
    background: var(--bg-light-hover);
}

.section-light .tab-btn.active {
    color: var(--bg-light);
    background: var(--accent-dark);
}

.section-light .panel-content {
    background: none;
    border: none;
    grid-template-columns: 1fr 4fr;
}

.section-light .panel-text h3 {
    color: var(--text-dark);
}

.section-light .panel-text > p {
    color: var(--text-dark-secondary);
}

.section-light .feature-checklist li {
    color: var(--text-dark);
}

.section-light .feature-checklist li::before {
    background: var(--accent-dark-dim);
    border-color: var(--accent-dark);
}

.section-light .feature-checklist li::after {
    border-color: var(--accent-dark);
}

.section-light .screenshot-placeholder {
    background: var(--bg-light-elevated);
    border-color: var(--border-light-default);
    color: var(--text-dark-muted);
}

/* Light section mobile showcase */
.section-light .mobile-showcase {
    background: var(--bg-light-surface);
    border-color: var(--border-light-default);
}

.section-light .mobile-copy h2 {
    color: var(--text-dark);
}

.section-light .mobile-copy > p {
    color: var(--text-dark-secondary);
}

.section-light .mobile-copy li {
    color: var(--text-dark);
}

.section-light .mobile-copy li::before {
    background: var(--accent-dark);
}

.section-light .phone-mockup {
    background: var(--text-dark);
}

.section-light .phone-screen {
    background: var(--bg-light);
    border-color: var(--border-light-subtle);
}

.section-light .phone-notch {
    background: var(--bg-light-elevated);
}

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

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}

h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.1rem; }