/* =========================================
   INTQUES GLOBAL DESIGN SYSTEM
   Single source of truth for all tokens
========================================= */

/* ── Design Tokens ─────────────────────── */
:root {

    /* Brand */
    --primary-orange: #ff6a00;
    --primary-orange-dark: #e65f00;
    --primary-orange-hover: #e65f00;
    --primary-gradient: linear-gradient(135deg, #ff6a00, #ff8c3a);

    /* Dark palette */
    --dark-900: #0f172a;
    --dark-800: #1e293b;
    --dark-700: #334155;
    --secondary-dark: #1a1a1a;

    /* Neutrals */
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;

    /* Backgrounds */
    --white: #ffffff;
    --light-bg: #f8fafc;
    --surface-subtle: #f4f6fb;
    --site-gradient-start: #fffbf7;
    --site-gradient-end: #ffffff;
    --section-overlay: linear-gradient(180deg, rgba(255,106,0,0.03) 0%, rgba(255,179,71,0.015) 100%);

    /* Text */
    --text-main: #1e293b;
    --text-body: #334155;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;

    /* Borders */
    --border-color: #e2e8f0;
    --border-subtle: rgba(15, 23, 42, 0.08);

    /* ── Shadow Scale ──────────────────── */
    --shadow-xs:  0 1px 3px  rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm:  0 4px 12px rgba(15, 23, 42, 0.07);
    --shadow-md:  0 8px 24px rgba(15, 23, 42, 0.09);
    --shadow-card:0 8px 24px rgba(15, 23, 42, 0.07);
    --shadow-lg:  0 20px 48px rgba(15, 23, 42, 0.12);
    --shadow-xl:  0 32px 64px rgba(15, 23, 42, 0.16);
    --shadow-orange-sm: 0 6px 18px rgba(255, 106, 0, 0.18);
    --shadow-orange-md: 0 12px 32px rgba(255, 106, 0, 0.22);
    --shadow-orange-lg: 0 18px 44px rgba(255, 106, 0, 0.28);

    /* ── Border Radius Scale ───────────── */
    --radius-xs:  6px;
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  20px;
    --radius-2xl: 24px;
    --radius-full: 999px;

    /* ── Spacing Scale ─────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ── Section Spacing ───────────────── */
    --section-padding-lg: 72px;
    --section-padding-md: 48px;
    --section-padding-sm: 32px;

    /* ── Typography Scale ──────────────── */
    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  1.875rem;  /* 30px */
    --text-4xl:  2.25rem;   /* 36px */
    --text-5xl:  3rem;      /* 48px */

    /* ── Transitions ───────────────────── */
    --transition-fast:   all 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 340ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* =========================================
   RESET + BASE
========================================= */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

html, body {
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--text-base);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    color: var(--text-body);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fixed navbar offset */
body {
    padding-top: 68px;
}

@media (max-width: 991px) {
    body { padding-top: 60px; }
}

/* =========================================
   CONTENT VISIBILITY (performance)
========================================= */
@supports (content-visibility: auto) {
    #curriculum,
    .cp-premium-wrapper,
    #instructors,
    #testimonials,
    #certificate,
    #pricing,
    #faq {
        content-visibility: auto;
        contain-intrinsic-size: 700px;
    }
}

/* =========================================
   ACCESSIBILITY
========================================= */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link,
.visually-hidden-focusable {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
}

.skip-link:focus,
.visually-hidden-focusable:focus {
    position: static;
    left: auto;
    width: auto; height: auto;
    margin: 8px;
    padding: 10px 14px;
    background: var(--primary-orange);
    color: white;
    border-radius: var(--radius-sm);
    z-index: 1050;
    text-decoration: none;
}

*:focus { outline: none; }
*:focus-visible {
    outline: 3px solid rgba(255, 106, 0, 0.35);
    outline-offset: 2px;
}

[data-nav-url] { cursor: pointer; }

/* =========================================
   TYPOGRAPHY
========================================= */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--dark-900);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-top: 0;
    margin-bottom: 0.6rem;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.8rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 800; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }
h5 { font-size: 0.95rem; font-weight: 700; }
h6 { font-size: 0.875rem; font-weight: 700; }

p {
    color: var(--text-muted);
    margin-bottom: 0.9rem;
    line-height: 1.7;
}

a {
    color: var(--primary-orange);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover { color: var(--primary-orange-dark); }

/* =========================================
   LAYOUT
========================================= */
section {
    padding: var(--section-padding-lg) 0;
    position: relative;
}

/* subtle decorative overlay */
section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--section-overlay);
    opacity: 1;
    z-index: 0;
    mix-blend-mode: screen;
}

section > .container,
section > .cp-container,
section > .curr-container {
    position: relative;
    z-index: 1;
}

.container { max-width: 1200px; }

@media (max-width: 1200px) {
    .container { padding-left: var(--space-5); padding-right: var(--space-5); }
}

@media (max-width: 576px) {
    .container { padding-left: var(--space-4); padding-right: var(--space-4); }
    section { padding: var(--section-padding-sm) 0; }
}

/* =========================================
   BACKGROUNDS
========================================= */
.bg-light-custom  { background: var(--light-bg); }
.bg-dark-custom   { background: var(--dark-900); color: white; }
.bg-surface       { background: var(--surface-subtle); }

/* =========================================
   BUTTONS — Unified System
========================================= */

/* Base */
.btn-primary-custom,
.btn-outline-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    padding: 11px 22px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-smooth);
    white-space: nowrap;
    min-height: 44px;
    line-height: 1;
}

.btn-primary-custom {
    background: var(--primary-gradient);
    color: #ffffff;
    box-shadow: var(--shadow-orange-sm);
}

.btn-primary-custom:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange-md);
}

.btn-primary-custom:active { transform: translateY(0); }

.btn-outline-custom {
    background: transparent;
    border: 1.5px solid var(--primary-orange);
    color: var(--primary-orange);
}

.btn-outline-custom:hover {
    background: var(--primary-orange);
    color: #ffffff;
    transform: translateY(-2px);
}

/* =========================================
   CARDS — Unified System
========================================= */
.card-clean {
    border: none;
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}

.card-clean:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* =========================================
   UTILITIES
========================================= */
.text-primary-custom { color: var(--primary-orange) !important; }
.text-muted-custom   { color: var(--text-muted) !important; }
.border-custom       { border: 1px solid var(--border-color) !important; }

/* Gradient text */
.text-gradient-orange {
    background: linear-gradient(135deg, #ff6a00 0%, #ff9f1c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animated section divider */
.section-divider-wave {
    width: 64px;
    height: 3px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, #ff6a00, #ff9f1c, #ff6a00);
    background-size: 200% auto;
    animation: shimmerSlide 2.4s linear infinite;
    margin: 10px auto 0;
}

/* Badge / pill */
.badge-orange {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: rgba(255, 106, 0, 0.10);
    color: var(--primary-orange);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Live pulse dot */
.live-badge-pulse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hp-orb {
    transition: opacity 0.6s ease;
}

/* =========================================
   SPACING HELPERS
========================================= */
.mt-40  { margin-top:  40px; }
.mb-40  { margin-bottom: 40px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }

/* =========================================
   ANIMATIONS — single canonical set
========================================= */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes floatSlow {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0px); }
}

@keyframes shimmerSlide {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}

@keyframes pulseBadge {
    0%   { box-shadow: 0 0 0 0   rgba(255, 106, 0, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 106, 0, 0); }
    100% { box-shadow: 0 0 0 0   rgba(255, 106, 0, 0); }
}

@keyframes spinnerSpin {
    to { transform: rotate(360deg); }
}

/* Utility class */
.fade-up   { animation: fadeUp 520ms cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.float-slow { animation: floatSlow 6s ease-in-out infinite; }