/* ── 0. Variables ── */
:root {
    /* Brand */
    --primary:           #98e3da;
    --primary-dim:       rgba(102, 221, 183, .20);
    --primary-glow:      rgba(102, 221, 183, .04);

    /* Dark tones — background → cards → inner */
    --dark:              #22282f;
    --dark-end:          #2c3440;
    --dark-card:         #333b45;
    --dark-card-inner:   #3f4852;
    --dark-deep:         #1a1f25;
    --dark-deepest:      #141920;
    --dark-border:       #434c56;
    --dark-border-inner: #515b66;

    /* Light tones — content cards */
    --light-card:        #c2c9d1;
    --light-card-inner:  #cdd3da;
    --light-border:      #a9b1bb;

    /* Text — dark surfaces */
    --text-heading:      #ffffff;
    --text-body:         #c5cdd6;
    --text-muted:        #8a949f;

    /* Text — light surfaces */
    --text-dark:         #1a2028;
    --text-dark-muted:   #384350;
    --text-dark-light:   #586270;

    /* Radii */
    --radius:            10px;
    --radius-sm:         6px;
    --radius-lg:         14px;

    /* Shadows */
    --shadow-sm:         0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow:            0 2px 6px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
    --shadow-lg:         0 4px 12px rgba(0,0,0,.10), 0 16px 40px rgba(0,0,0,.10);
}

/* ── 1. Reset & Base ── */
*,
*::before,
*::after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    width: 100%; max-width: 100%; min-height: 100%;
    overflow-x: hidden;
    scrollbar-width: thin;
    background: linear-gradient(180deg, var(--dark) 0%, var(--dark-end) 100%);
}

html::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--dark);
    color: var(--light);
    background-image: linear-gradient(to bottom, var(--dark), #2c3440);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


body::before, body::after { content: none; }

header, main, footer { position: relative; z-index: 1; }

.safe-min-w-0 { min-width: 0; }

/* ── 2. Scrollbar ── */
::-webkit-scrollbar           { width: 7px; }
::-webkit-scrollbar-track     { background: rgba(0,0,0,.18); }
::-webkit-scrollbar-thumb     {
    background: linear-gradient(180deg, rgba(102,221,183,.35), rgba(102,221,183,.18));
    border-radius: 8px;
    border: 1.5px solid rgba(0,0,0,.25);
}

.nav-scroll { overflow-x: auto; }
@media (max-width: 767px) {
    .nav-scroll { -ms-overflow-style: none; scrollbar-width: none; }
    .nav-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

.table-scroll, .custom-scrollbar { background: transparent !important; }
.table-scroll::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track { background: transparent !important; }
.table-scroll::-webkit-scrollbar-corner,
.custom-scrollbar::-webkit-scrollbar-corner { background: transparent !important; }
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: var(--primary-dim) transparent; }

/* ── 3. Header & Footer ── */
.header-shell {
    background-color: var(--dark-deepest);
    border-bottom: 1px solid var(--dark-border);
    box-shadow: 0 1px 0 rgba(102,221,183,.03);
}

.footer-shell {
    background-color: var(--dark-deepest);
    border-top: 1px solid var(--dark-border);
    box-shadow: 0 -1px 0 rgba(102,221,183,.03);
}

/* ── 4. Brand — white→teal gradient, NO italic ── */
.brand-wordmark {
    font-weight: 900;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-style: normal;
    color: transparent;
    background: linear-gradient(90deg, #f8fbfc 0%, #f1f7f5 45%, #dcf8ef 78%, #c7f7e8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── 5. Navigation ── */
.ygg-nav-link {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ygg-nav-link.active-link {
    color: var(--primary);
}

/* ── 6. Pills & Avatars ── */
.lang-pill,
.avatar-pill {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
}

/* ── 7. Form Controls ── */
.ygg-control {
    background: rgba(26, 31, 37, .65);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius);
}

.ygg-control:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-dim);
}

/* ── 8. UI Chips ── */
.ui-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    min-height: 1.9rem;
    font-size: .78rem;
    font-weight: 500;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-sm);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   9. CARD SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* ── 9a. Hero Cards ── */
.ygg-surface,
.ygg-surface-soft,
.hero-card {
    background-color: var(--dark-card) !important;
    border: 1px solid var(--dark-border) !important;
    border-top: 4px solid var(--primary) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
    color: var(--text-body);
}

.ygg-surface h1, .ygg-surface h2, .ygg-surface h3,
.ygg-surface-soft h1, .ygg-surface-soft h2, .ygg-surface-soft h3,
.hero-card h1, .hero-card h2, .hero-card h3 {
    color: var(--text-heading);
}

/* ── 9b. Nested cards inside hero ── */
.hero-card .hero-card,
.hero-card .ygg-surface,
.hero-card .ygg-surface-soft,
.ygg-surface .ygg-surface,
.ygg-surface .ygg-surface-soft,
.ygg-surface-soft .ygg-surface,
.hero-card .hero-card-inner {
    background-color: var(--dark-card-inner) !important;
    border: 1px solid var(--dark-border-inner) !important;
    border-top: 2px solid rgba(102, 221, 183, .28) !important;
    box-shadow: var(--shadow-sm) !important;
}

.hero-card [class*="!border-t-2"],
.ygg-surface [class*="!border-t-2"] {
    background-color: var(--dark-card-inner) !important;
    border: 1px solid var(--dark-border-inner) !important;
    border-top: 2px solid rgba(102, 221, 183, .28) !important;
}

/* ── 9c. Content Cards ── */
.content-card {
    background-color: var(--light-card);
    border: 1px solid var(--light-border);
    border-top: 4px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text-dark);
}

.content-card h1, .content-card h2, .content-card h3,
.content-card h4, .content-card h5, .content-card h6 {
    color: var(--text-dark);
}

.content-card p, .content-card span, .content-card li,
.content-card td, .content-card th {
    color: var(--text-dark-muted);
}

.content-card a {
    color: #006b55;
    text-decoration: none;
}

/* Dividers inside content cards */
.content-card .border-b,
.content-card [class*="border-b"],
.content-card [class*="border-gray"] {
    border-color: var(--light-border) !important;
}

/* Inner zones */
.content-card .bg-gray-50,
.content-card [class*="bg-gray-50"] {
    background-color: var(--light-card-inner) !important;
    border-color: var(--light-border) !important;
}

.content-card .bg-white,
.content-card [class*="bg-white"] {
    background-color: var(--light-card-inner) !important;
}

/* Warning boxes */
.content-card .bg-amber-50,
.content-card [class*="bg-amber-50"] {
    background-color: #d8cdb2 !important;
    border-color: #c4b696 !important;
}

.content-card .bg-amber-50 p,
.content-card [class*="bg-amber-50"] p,
.content-card .bg-amber-50 strong,
.content-card [class*="bg-amber-50"] strong {
    color: #5c4813 !important;
}

.content-card [class*="text-amber-500"] { color: #8a6d2b !important; }
.content-card [class*="text-amber-800"] { color: #5c4813 !important; }

/* Emerald accents */
.content-card .bg-emerald-50,
.content-card [class*="bg-emerald-50"] {
    background-color: #a8d6c2 !important;
}

.content-card .bg-emerald-100,
.content-card [class*="bg-emerald-100"] {
    background-color: #9aceb6 !important;
}

.content-card [class*="text-emerald-600"],
.content-card [class*="text-emerald-700"] {
    color: #006b55 !important;
}

/* Tailwind dark overrides inside content cards */
.content-card .bg-dark-950,
.content-card .bg-dark-950\/50,
.content-card .bg-dark-950\/35,
.content-card .bg-dark-950\/25,
.content-card .bg-dark-900 {
    background-color: #b4bbc5 !important;
    color: var(--text-dark) !important;
}

/* ── 11. Legacy surface overrides ── */
.bg-dark-950,
.bg-dark-950\/50,
.bg-dark-950\/35,
.bg-dark-950\/25,
.bg-dark-900.border,
.bg-dark-900.border-dark-800,
.bg-dark-900.border-dark-800\/50 {
    background: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
    box-shadow: var(--shadow) !important;
}

.shadow-xl, .shadow-2xl, .shadow-lg {
    box-shadow: var(--shadow) !important;
}

.ring-1, .ring-white\/5 {
    --tw-ring-color: rgba(255,255,255,.06) !important;
}

.divide-dark-800\/50 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dark-border) !important;
}

.border-dark-800\/35 { border-color: rgba(67,76,86,.6) !important; }
.border-dark-800\/25 { border-color: rgba(67,76,86,.4) !important; }
.border-dark-800     { border-color: var(--dark-border) !important; }
.border-dark-700     { border-color: var(--dark-border-inner) !important; }

/* ── 12. Row Hover ── */
.row-hover { transition: background-color .15s ease; }
.row-hover:hover { background-color: rgba(102, 221, 183, 0.04); }

/* ── 13. Hero Section ── */
.hero-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.hero-shell::before,
.hero-shell::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(38rem, 82%);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(102,221,183,.22), transparent);
}

.hero-shell::before { top: 1rem; }
.hero-shell::after  { bottom: 1rem; }

.content-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;  /* 16px */
}

/* ── 14. Hero Typography — white→teal gradient, NO italic ── */
.ygg-logo-mark {
    display: inline-block;
    padding-right: .22em;
    margin-right: .04em;
    font-size: clamp(1.5rem, 3vw, 3.5rem);
    line-height: 1.25;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -.04em;
    color: transparent;
    background: linear-gradient(90deg, #f8fbfc 0%, #eef6f3 42%, #dff7ef 72%, #c9f6e9 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow: visible;
}

.ygg-hero-kicker,
.ygg-hero-caption,
.ygg-feature-title,
.ygg-feature-copy {
    text-transform: uppercase;
    letter-spacing: .3em;
}

.ygg-hero-kicker {
    font-size: .84rem;
    color: var(--text-muted);
}

/* Strike decoration — REMOVED */
.ygg-hero-kicker .accent-strike {
    color: var(--text-body);
}

.ygg-hero-kicker .accent-strike::after {
    content: none;
}

.ygg-hero-caption {
    display: inline-block;
    padding-right: .35em;
    font-size: 1rem;
    color: var(--primary);
    overflow: visible;
}

/* ── 15. Feature Icons & Blocks ── */
.ygg-feature-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(102, 221, 183, .22);
    background: radial-gradient(circle at 50% 35%, rgba(102,221,183,.08), transparent);
    color: var(--primary);
}

.ygg-feature-title {
    font-size: .84rem;
    color: var(--primary);
}

.ygg-feature-copy {
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: none;
    color: var(--text-muted);
    line-height: 1.7;
}

.hero-subtle {
    font-size: .9rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.9;
}

.hero-latin {
    padding-block: 1rem;
    font-size: .94rem;
    letter-spacing: .05em;
    font-style: normal;
    color: var(--primary);
}

/* ── 16. Highlight ── */
.highlight {
    color: var(--primary);
    font-weight: 600;
}

/* ── 17. Buttons ── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #72e2c0 0%, var(--primary) 100%);
    color: var(--dark-deepest);
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    padding: .6rem 1.5rem;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.15);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--primary);
    font-weight: 500;
    border: 1px solid rgba(102,221,183,.35);
    border-radius: var(--radius);
    padding: .6rem 1.5rem;
}

/* ── 18. Tables inside content cards ── */
.content-card table {
    width: 100%;
    border-collapse: collapse;
}

.content-card th {
    background-color: #b4bcc6;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dark-muted);
    border-bottom: 2px solid var(--light-border);
}

.content-card td {
    border-bottom: 1px solid var(--light-border);
}

/* ── 19. Selection ── */
::selection {
    background: rgba(102,221,183,.25);
    color: #fff;
}

/* ── 20. Focus visible ── */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.logo-container {
            text-align: center;
        }