@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --surface: #07111f;
    --surface-elevated: rgba(10, 21, 38, 0.78);
    --surface-muted: #0f1b2d;
    --surface-card: rgba(12, 23, 40, 0.72);
    --surface-soft: rgba(148, 163, 184, 0.08);
    --border-subtle: rgba(148, 163, 184, 0.16);
    --border-strong: rgba(148, 163, 184, 0.3);
    --text-primary: #e5edf8;
    --text-secondary: #97a6ba;
    --text-muted: #6f7f95;
    --accent: #d6b36a;
    --accent-strong: #f1d39b;
    --success: #7dd3a7;
    --shadow-soft: 0 24px 80px rgba(2, 8, 23, 0.35);
    --shadow-card: 0 16px 40px rgba(2, 8, 23, 0.22);
}

@layer base {
    [x-cloak] {
        display: none !important;
    }

    html {
        font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
    }

    body {
        background:
            radial-gradient(circle at top left, rgba(214, 179, 106, 0.14), transparent 24rem),
            radial-gradient(circle at 85% 10%, rgba(125, 211, 167, 0.08), transparent 18rem),
            linear-gradient(180deg, #07111f 0%, #091524 45%, #07111f 100%);
        color: var(--text-primary);
    }

    ::selection {
        background: rgba(214, 179, 106, 0.32);
        color: #fff7e7;
    }

    h1,
    h2,
    h3,
    h4 {
        color: var(--text-primary);
        letter-spacing: -0.03em;
    }

    p {
        color: var(--text-secondary);
    }
}

@layer components {
    .page-shell {
        @apply relative overflow-hidden;
    }

    .shell-container {
        @apply mx-auto w-full max-w-7xl px-6 lg:px-10;
    }

    .site-header {
        @apply fixed inset-x-0 top-0 z-50 transition-all duration-300;
    }

    .site-header.is-scrolled {
        background: rgba(7, 17, 31, 0.76);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-card);
    }

    .brand-mark {
        @apply inline-flex items-center gap-3 text-sm font-semibold tracking-[0.24em] uppercase text-[var(--text-secondary)];
    }

    .brand-dot {
        @apply h-2.5 w-2.5 rounded-full;
        background: linear-gradient(135deg, var(--accent), var(--accent-strong));
        box-shadow: 0 0 0 6px rgba(214, 179, 106, 0.12);
    }

    .nav-link {
        @apply text-sm font-medium text-[var(--text-secondary)] transition-colors duration-200 hover:text-white;
    }

    .mobile-nav-link {
        @apply block rounded-2xl border border-white/5 bg-white/[0.03] px-4 py-3 text-sm font-medium text-[var(--text-secondary)] transition hover:border-[var(--border-subtle)] hover:text-white;
    }

    .hero-section {
        @apply relative pt-32 pb-20 md:pt-40 md:pb-28;
    }

    .section {
        @apply relative py-20 md:py-24;
    }

    .section-kicker {
        @apply mb-5 inline-flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.28em] text-[var(--accent-strong)];
    }

    .section-kicker::before {
        content: "";
        @apply h-px w-12;
        background: linear-gradient(90deg, rgba(214, 179, 106, 0), rgba(214, 179, 106, 0.9));
    }

    .section-title {
        @apply max-w-3xl text-4xl font-semibold leading-tight md:text-5xl;
    }

    .section-copy {
        @apply mt-6 max-w-3xl text-base leading-8 text-[var(--text-secondary)] md:text-lg;
    }

    .eyebrow-pill {
        @apply inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.22em];
        border-color: rgba(214, 179, 106, 0.2);
        background: rgba(214, 179, 106, 0.08);
        color: var(--accent-strong);
    }

    .hero-title {
        @apply max-w-5xl text-5xl font-semibold leading-[1.02] sm:text-6xl lg:text-7xl;
    }

    .hero-title em {
        font-family: "Instrument Serif", Georgia, serif;
        font-style: italic;
        font-weight: 400;
        color: var(--accent-strong);
    }

    .hero-copy {
        @apply mt-8 max-w-2xl text-lg leading-8 text-[var(--text-secondary)] md:text-xl;
    }

    .hero-grid {
        @apply grid items-start gap-12 lg:grid-cols-[minmax(0,1.2fr)_minmax(360px,0.8fr)];
    }

    .hero-actions {
        @apply mt-10 flex flex-col gap-4 sm:flex-row;
    }

    .btn-primary {
        @apply inline-flex items-center justify-center rounded-full px-6 py-3.5 text-sm font-semibold transition duration-200;
        background: linear-gradient(135deg, var(--accent), var(--accent-strong));
        color: #101826;
        box-shadow: 0 18px 40px rgba(214, 179, 106, 0.18);
    }

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 22px 44px rgba(214, 179, 106, 0.24);
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center rounded-full border px-6 py-3.5 text-sm font-semibold text-white transition duration-200;
        border-color: var(--border-subtle);
        background: rgba(255, 255, 255, 0.03);
    }

    .btn-secondary:hover {
        border-color: var(--border-strong);
        background: rgba(255, 255, 255, 0.06);
    }

    .panel {
        @apply rounded-[2rem] border;
        border-color: var(--border-subtle);
        background: var(--surface-card);
        backdrop-filter: blur(18px);
        box-shadow: var(--shadow-card);
    }

    .panel-soft {
        @apply rounded-[1.75rem] border p-6;
        border-color: rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.03);
    }

    .metric-grid {
        @apply mt-14 grid gap-4 sm:grid-cols-3;
    }

    .metric-card {
        @apply rounded-[1.5rem] border p-6;
        border-color: rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.03);
    }

    .metric-value {
        @apply text-3xl font-semibold text-white md:text-4xl;
    }

    .metric-label {
        @apply mt-2 text-sm uppercase tracking-[0.18em] text-[var(--text-muted)];
    }

    .executive-grid {
        @apply grid gap-8 lg:grid-cols-[minmax(0,1.15fr)_minmax(280px,0.85fr)];
    }

    .list-detail {
        @apply space-y-4 text-sm leading-7 text-[var(--text-secondary)];
    }

    .list-detail li {
        @apply flex gap-3;
    }

    .list-detail li::before {
        content: "";
        @apply mt-3 h-1.5 w-1.5 shrink-0 rounded-full;
        background: var(--accent);
    }

    .venture-grid,
    .product-grid,
    .impact-grid,
    .trust-grid,
    .contact-options {
        @apply mt-12 grid gap-6 lg:grid-cols-3;
    }

    .venture-card,
    .product-card,
    .impact-card,
    .trust-card,
    .contact-card {
        @apply rounded-[1.75rem] border p-7 transition duration-300;
        border-color: var(--border-subtle);
        background: rgba(255, 255, 255, 0.03);
        box-shadow: var(--shadow-card);
    }

    .venture-card:hover,
    .product-card:hover,
    .impact-card:hover,
    .trust-card:hover,
    .contact-card:hover {
        transform: translateY(-4px);
        border-color: var(--border-strong);
        background: rgba(255, 255, 255, 0.05);
    }

    .logo-chip {
        @apply flex h-16 w-16 items-center justify-center rounded-2xl border p-3;
        border-color: rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
    }

    .meta-badge {
        @apply inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em];
        border-color: rgba(214, 179, 106, 0.2);
        background: rgba(214, 179, 106, 0.07);
        color: var(--accent-strong);
    }

    .card-title {
        @apply mt-5 text-2xl font-semibold text-white;
    }

    .card-copy {
        @apply mt-4 text-sm leading-7 text-[var(--text-secondary)];
    }

    .timeline {
        @apply relative mt-14 space-y-8 before:absolute before:left-[1.125rem] before:top-0 before:h-full before:w-px before:bg-white/10 lg:before:left-1/2;
    }

    .timeline-item {
        @apply relative grid gap-6 lg:grid-cols-2 lg:gap-12;
    }

    .timeline-item::before {
        content: "";
        @apply absolute left-3 top-7 h-3.5 w-3.5 rounded-full border-4 border-[var(--surface)] bg-[var(--accent)] lg:left-1/2 lg:-translate-x-1/2;
        box-shadow: 0 0 0 10px rgba(214, 179, 106, 0.08);
    }

    .timeline-year {
        @apply pl-12 text-sm font-semibold uppercase tracking-[0.24em] text-[var(--accent-strong)] lg:pl-0 lg:pr-12 lg:text-right;
    }

    .timeline-card {
        @apply ml-12 rounded-[1.75rem] border p-6 lg:ml-0;
        border-color: var(--border-subtle);
        background: rgba(255, 255, 255, 0.03);
    }

    .quote-mark {
        font-family: "Instrument Serif", Georgia, serif;
        @apply text-5xl leading-none text-[var(--accent)];
    }

    .input-field,
    .textarea-field,
    .select-field {
        @apply w-full rounded-2xl border px-4 py-3.5 text-sm text-white placeholder:text-[var(--text-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-0;
        border-color: rgba(148, 163, 184, 0.12);
        background: rgba(255, 255, 255, 0.03);
    }

    .footer-rule {
        @apply mt-20 border-t pt-8 text-sm text-[var(--text-muted)];
        border-color: rgba(148, 163, 184, 0.12);
    }
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }

    .bg-mesh {
        background:
            linear-gradient(180deg, rgba(214, 179, 106, 0.08), rgba(214, 179, 106, 0)),
            linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 45%);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
