/* ============================================================
   singlePages/basicAssets/css/main.css
   Full shared design system — all colours driven by tokens.
   ============================================================ */


/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video { max-width: 100%; display: block; }


/* ══════════════════════════════════════════════════════════════
   DESIGN TOKENS  ── change colours here; every component updates automatically.
══════════════════════════════════════════════════════════════ */
:root {

    /* ── Backgrounds (cool dark navy) ───────────────────────── */
    --bg:      #050a14;
    --surface: #0c1828;
    --card:    #111f35;
    --border:  #1a2e4a;

    /* ── Primary brand (golden amber) ──────────────────────── */
    --primary:    #f5c800;
    --primary-d:  #d4a800;
    --primary-l:  #f5de0b;
    --primary-xl: #fde047;
    --amber:      var(--primary);
    --amber-d:    var(--primary-d);

    /* ── Blue (secondary / trust) ───────────────────────────── */
    --blue:   #2563eb;
    --blue-d: #1e40af;
    --blue-l: #3b82f6;
    --sky:    #38bdf8;

    /* ── Danger / live (violet) ─────────────────────────────── */
    --danger:   #8e44ef;
    --danger-l: #c4b5fd;

    /* ── Text ───────────────────────────────────────────────── */
    --text:       #eef0f8;
    --text-soft:  #a8b8cc;
    --text-dim:   #8898b0;
    --muted:      #5c6e82;
    --white:      #ffffff;
    --amber-text: #a07830;
    --stars:      var(--primary);

    /* ── Glow / opacity tokens (rgb 245 200 0 = amber) ──────── */
    --glow-b:        rgba(245,200,0,.50);
    --glow-a:        rgba(245,200,0,.28);
    --bg-nav:        rgba(5,10,20,.88);
    --primary-a10:   rgba(245,200,0,.10);
    --primary-a12:   rgba(245,200,0,.12);
    --primary-a18:   rgba(245,200,0,.18);
    --primary-a20:   rgba(245,200,0,.20);
    --primary-a22:   rgba(245,200,0,.22);
    --primary-a25:   rgba(245,200,0,.25);
    --primary-a30:   rgba(245,200,0,.30);
    --primary-a40:   rgba(245,200,0,.40);
    --primary-a45:   rgba(245,200,0,.45);
    --primary-a50:   rgba(245,200,0,.50);
    --amber-a07:     rgba(245,200,0,.07);
    --amber-a18:     rgba(245,200,0,.18);
    --danger-a10:    rgba(142,68,239,.10);
    --danger-a30:    rgba(142,68,239,.30);
    --muted-a55:     rgba(92,110,130,.55);
    --muted-a60:     rgba(92,110,130,.60);

    /* ── Typography ─────────────────────────────────────────── */
    --font-sans:        'Inter', system-ui, -apple-system, sans-serif;
    --font-size-base:   1rem;
    --line-height-base: 1.62;

    /* ── Radius scale ───────────────────────────────────────── */
    --radius:      14px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   20px;
    --radius-pill: 100px;
    --max-width:   1100px;

    /* ── Motion ─────────────────────────────────────────────── */
    --ease:     cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 380ms;

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-sm:   0 1px 4px rgba(0,0,0,.45);
    --shadow-md:   0 4px 20px rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.3);
    --shadow-lg:   0 24px 64px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.35);
    --shadow-glow: 0 8px 40px var(--glow-a);
}


/* ══════════════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.18; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 700; letter-spacing: -.01em; }
p + p { margin-top: 1rem; }


/* ── Layout helpers ──────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.section      { padding: 90px 0; }
.section--alt { background: var(--surface); }


/* ── Utilities ───────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--muted); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary-l), var(--primary), var(--primary-d));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.amber-text { color: var(--amber); }

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}


/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .75rem 1.75rem;
    border-radius: var(--radius-pill);
    font-weight: 700; font-size: 1rem; cursor: pointer; letter-spacing: .025em;
    border: 1.5px solid transparent;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
    text-decoration: none;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-primary       { background: var(--primary); color: var(--bg); box-shadow: 0 4px 16px var(--glow-a); }
.btn-primary:hover { background: var(--primary-d); box-shadow: 0 8px 28px var(--glow-a); }
.btn-outline       { background: transparent; border-color: rgba(255,255,255,.18); color: var(--text); }
.btn-outline:hover { background: var(--primary-a12); border-color: var(--primary); color: var(--primary); }
.btn-accent        { background: var(--amber); color: var(--bg); box-shadow: 0 4px 16px var(--glow-a); }
.btn-accent:hover  { background: var(--amber-d); box-shadow: 0 8px 28px var(--glow-a); }


/* ── Forms ───────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-weight: 600; font-size: .9rem; }

.form-control {
    padding: .65rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem; width: 100%;
    background: var(--card); color: var(--text);
    transition: border-color .2s;
}
.form-control:focus { outline: none; border-color: var(--primary); }


/* ══════════════════════════════════════════════════════════════
   COMPONENTS
══════════════════════════════════════════════════════════════ */


/* ── Tag / pill badge ────────────────────────────────────────── */
.tag {
    display: inline-block;
    background: var(--primary-a12);
    border: 1px solid var(--primary-a40);
    color: var(--primary);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 5px 14px; border-radius: var(--radius-pill);
    margin-bottom: 16px;
}
.tag--amber  { background: linear-gradient(135deg, var(--amber), var(--amber-d)); color: var(--bg); border: none; }
.tag--violet { background: var(--danger-a10); border: 1px solid var(--danger-a30); color: var(--danger-l); }


/* ── Section headers ─────────────────────────────────────────── */
.section-title {
    font-size: clamp(2rem, 4.5vw, 3.1rem);
    font-weight: 900; text-align: center;
    line-height: 1.15; letter-spacing: -.025em; margin-bottom: 12px;
}
.section-sub {
    text-align: center; color: var(--text-soft);
    font-size: 1.08rem; line-height: 1.72; max-width: 580px;
    margin: 0 auto 56px;
}


/* ── Compliance bar ──────────────────────────────────────────── */
.compliance-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 300;
    background: var(--amber-a07);
    border-bottom: 1px solid var(--amber-a18);
    padding: 8px 20px; text-align: center;
    font-size: .72rem; color: var(--amber-text); line-height: 1.5;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: opacity .5s ease;
}
.compliance-bar--hidden {
    opacity: 0; pointer-events: none;
}


/* ── Nav ─────────────────────────────────────────────────────── */
.sp-nav {
    position: sticky; top: 0; z-index: 200;
    padding: 14px 20px;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
    font-size: .95rem; font-weight: 800; letter-spacing: .05em;
    background: linear-gradient(135deg, var(--primary-l), var(--primary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
img.nav-logo { height: 36px; width: auto; max-width: 160px; display: block; background: none; -webkit-text-fill-color: unset; object-fit: contain; }
.nav-cta {
    background: linear-gradient(135deg, var(--amber), var(--amber-d));
    color: var(--bg); font-size: .82rem; font-weight: 800;
    padding: 10px; border-radius: var(--radius-pill); text-decoration: none;
    letter-spacing: .03em; white-space: nowrap;
    box-shadow: 0 3px 12px var(--glow-a);
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nav-cta:hover { opacity: .88; transform: translateY(-1px); text-decoration: none; }


/* ── Hero ────────────────────────────────────────────────────── */
.hero {
    min-height: 92vh; display: flex; align-items: center;
    padding: 72px 0 60px;
    background:
        radial-gradient(ellipse 75% 60% at -8% 95%,  var(--primary-a30) 0%, transparent 60%),
        radial-gradient(ellipse 55% 40% at 40% 110%, var(--primary-a18) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 105% 10%, var(--primary-a10) 0%, transparent 55%);
    position: relative; overflow: hidden;
}
.hero-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 56px; align-items: center; width: 100%;
}
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }

.live-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--danger-a10); border: 1px solid var(--danger-a30); color: var(--danger-l);
    font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 12px; border-radius: var(--radius-pill);
}
.live-dot {
    width: 7px; height: 7px; background: var(--danger); border-radius: 50%;
    animation: sp-blink 1.4s ease-in-out infinite;
}
@keyframes sp-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .35; transform: scale(.65); }
}

.hero h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 900;
    line-height: 1.1; letter-spacing: -.035em; margin-bottom: 20px;
}
.hero-sub {
    font-size: 1.05rem; color: var(--text-soft); margin-bottom: 32px;
    max-width: 500px; line-height: 1.72;
}
.hero-cta {
    display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, var(--amber), var(--amber-d));
    color: var(--bg); font-size: 1.02rem; font-weight: 800;
    padding: 16px 38px; border-radius: var(--radius-pill); text-decoration: none;
    letter-spacing: .02em; box-shadow: 0 8px 32px var(--glow-a);
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
    position: relative; overflow: hidden;
}
.hero-cta::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.2), transparent);
    opacity: 0; transition: opacity var(--dur-base) var(--ease);
}
.hero-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 56px var(--glow-a); text-decoration: none; }
.hero-cta:hover::after { opacity: 1; }

.hero-stats { display: flex; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
.stat       { display: flex; flex-direction: column; gap: 2px; }
.stat-num   { font-size: 1.5rem; font-weight: 900; color: var(--primary); }
.stat-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }


/* ── Video frame ─────────────────────────────────────────────── */
.video-frame {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; position: relative;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--primary-a22);
}
.video-frame--portrait {
    aspect-ratio: 9/16; max-width: min(320px, 100%); margin: 0 auto;
}
.video-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: linear-gradient(135deg, var(--surface), var(--card));
    color: var(--muted); font-size: .82rem; font-weight: 500; letter-spacing: .05em; cursor: pointer;
}
.play-btn {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, var(--primary), var(--primary-l));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 36px var(--glow-b); transition: transform var(--dur-fast) var(--ease);
}
.video-placeholder:hover .play-btn { transform: scale(1.1); }
.video-frame video { width: 100%; height: 100%; display: block; object-fit: cover; }


/* ── Event info bar ──────────────────────────────────────────── */
.event-info {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 24px;
    display: flex; align-items: center; justify-content: space-around;
    gap: 16px; margin-top: 16px; flex-wrap: wrap;
}
.event-item  { display: flex; align-items: center; gap: 10px; }
.event-icon  {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--primary-a12); border: 1px solid var(--primary-a20);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: var(--primary);
}
.event-label { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; line-height: 1; margin-bottom: 3px; }
.event-value { font-size: .9rem; font-weight: 700; color: var(--text); }


/* ── Countdown timer ─────────────────────────────────────────── */
.countdown-wrap {
    text-align: center; padding: 36px 20px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.countdown-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 18px; }
.countdown { display: inline-flex; align-items: flex-start; gap: 10px; }
.cd-unit   { text-align: center; }
.cd-num    {
    display: block;
    font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; line-height: 1;
    color: var(--primary); min-width: 68px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 12px 8px;
    transition: color var(--dur-fast) var(--ease);
}
.cd-sep   { font-size: 2.2rem; font-weight: 900; color: var(--primary-a40); line-height: 1; padding-top: 10px; }
.cd-label { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-top: 7px; display: block; }


/* ── Trust bar ───────────────────────────────────────────────── */
.trust-bar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 20px 20px;
    display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap;
}
.trust-item {
    display: flex; align-items: center; gap: 7px;
    font-size: .82rem; color: var(--text-dim); font-weight: 500;
}
.trust-item svg { color: var(--primary); flex-shrink: 0; }


/* ── Benefits grid ───────────────────────────────────────────── */
.benefits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

.benefit-card {
    background: linear-gradient(155deg, var(--card) 0%, rgba(9,17,30,.97) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease);
}
.benefit-card:hover { border-color: var(--primary-a40); transform: translateY(-5px); box-shadow: var(--shadow-md), 0 0 0 1px var(--primary-a20); }

.benefit-icon {
    width: 46px; height: 46px;
    background: var(--primary-a12); border: 1px solid var(--primary-a20);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; color: var(--primary);
}
.benefit-card h3 { font-size: .97rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.benefit-card p  { font-size: .86rem; color: var(--muted); line-height: 1.65; }


/* ── "Who is this for" grid ──────────────────────────────────── */
.for-whom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 760px; margin: 0 auto; }
.for-whom-item {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 15px 18px;
}
.for-whom-item .check {
    flex-shrink: 0; width: 20px; height: 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-l));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .65rem; color: var(--bg); margin-top: 1px;
}
.for-whom-item p { font-size: .88rem; font-weight: 500; color: var(--text-dim); }


/* ── Agenda (numbered) ───────────────────────────────────────── */
.agenda-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.agenda-item {
    display: flex; align-items: flex-start; gap: 16px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 18px 20px;
    transition: border-color var(--dur-fast) var(--ease);
}
.agenda-item:hover { border-color: var(--primary-a30); }
.agenda-num {
    flex-shrink: 0; width: 28px; height: 28px;
    background: var(--primary-a12); border: 1px solid var(--primary-a30);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800; color: var(--primary); margin-top: 1px;
}
.agenda-item p { font-size: .9rem; font-weight: 500; color: var(--text-dim); }

/* Keep .learn-item for backward compatibility */
.learn-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.learn-item  {
    display: flex; align-items: flex-start; gap: 13px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 17px 20px;
    transition: border-color var(--dur-fast) var(--ease);
}
.learn-item:hover { border-color: var(--primary-a30); }
.check {
    flex-shrink: 0; width: 21px; height: 21px;
    background: linear-gradient(135deg, var(--primary), var(--primary-l));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .7rem; color: var(--bg); margin-top: 2px;
}
.learn-item p { font-size: .9rem; font-weight: 500; color: var(--text-dim); }


/* ── Mid-page CTA strip ──────────────────────────────────────── */
.mid-cta {
    background: linear-gradient(135deg, var(--surface), rgba(17,31,53,.95));
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    padding: 56px 20px; text-align: center;
}
.mid-cta h3 { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 800; margin-bottom: 10px; }
.mid-cta p  { color: var(--text-soft); font-size: .96rem; margin-bottom: 28px; max-width: 500px; margin-inline: auto; }


/* ── Host card ───────────────────────────────────────────────── */
.host-card {
    display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center;
    background: linear-gradient(135deg, var(--card) 0%, rgba(9,17,30,.95) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 40px; max-width: 780px; margin: 0 auto;
    box-shadow: var(--shadow-md);
}
.host-avatar {
    width: 120px; height: 120px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-l));
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; border: 3px solid var(--primary-a45); overflow: hidden;
}
.host-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.host-name  { font-size: 1.45rem; font-weight: 800; margin-bottom: 5px; }
.host-title { font-size: .82rem; color: var(--primary); font-weight: 600; margin-bottom: 13px; letter-spacing: .05em; text-transform: uppercase; }
.host-bio   { font-size: .91rem; color: var(--muted); line-height: 1.75; }
.host-creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.host-cred  {
    font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 4px 12px; border-radius: var(--radius-pill);
    background: var(--primary-a12); border: 1px solid var(--primary-a30); color: var(--primary);
}


/* ── Text testimonials ───────────────────────────────────────── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

.testi-card {
    background: linear-gradient(155deg, var(--card) 0%, rgba(9,17,30,.97) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease);
    display: flex; flex-direction: column;
}
.testi-card:hover { border-color: var(--primary-a40); box-shadow: var(--shadow-md); }

.stars       { color: var(--stars); font-size: 1rem; margin-bottom: 14px; letter-spacing: 2px; }
.testi-text  { font-size: .9rem; color: var(--text-soft); line-height: 1.75; margin-bottom: 10px; font-style: italic; flex: 1; }
.testi-note  { font-size: .67rem; color: var(--muted-a55); margin-bottom: 14px; }
.testi-author { display: flex; align-items: center; gap: 11px; }

.author-avatar {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-l));
    display: flex; align-items: center; justify-content: center;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-name { font-size: .86rem; font-weight: 700; }
.author-role { font-size: .73rem; color: var(--muted); }


/* ── Video testimonials ──────────────────────────────────────── */
.video-testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

.video-testi-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease);
}
.video-testi-card:hover { border-color: var(--primary-a40); transform: translateY(-4px); box-shadow: var(--shadow-md); }

.vtesti-thumb {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--surface), var(--card));
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.vtesti-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.vtesti-thumb .play-btn { width: 46px; height: 46px; position: relative; z-index: 1; }
.vtesti-meta  { padding: 14px 16px; }
.vtesti-name  { font-size: .88rem; font-weight: 700; margin-bottom: 3px; }
.vtesti-desc  { font-size: .76rem; color: var(--muted); }
.video-testi-card video { width: 100%; aspect-ratio: 2/3; height: auto; display: block; object-fit: cover; background: var(--surface); }


/* ── Image testimonials carousel ──────────────────────────────── */
.img-testi-carousel { }
.itc-wrap { overflow: hidden; }
.itc-track {
    display: flex;
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
.itc-slide {
    flex-shrink: 0;
    padding: 0 7px;
    box-sizing: border-box;
}
.img-testi-card {
    border-radius: var(--radius-md); overflow: hidden;
    background: var(--card); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.img-testi-card img { width: 100%; height: auto; display: block; }
.img-testi-placeholder {
    aspect-ratio: 4/5;
    background: var(--surface-2, var(--surface));
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    color: var(--muted); font-size: .75rem; text-align: center; padding: 20px;
}
.img-testi-placeholder svg { opacity: .35; }
.itc-nav {
    display: flex; justify-content: center; align-items: center;
    gap: 18px; margin-top: 18px;
}
.itc-btn {
    width: 38px; height: 38px; border-radius: 50%; padding: 0; flex-shrink: 0;
    background: var(--card); border: 1px solid var(--border);
    color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease),
                opacity var(--dur-base);
}
.itc-btn:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: #000; }
.itc-btn:disabled { opacity: .3; cursor: default; }
.itc-dots { display: flex; align-items: center; gap: 8px; }
.itc-dot {
    width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none;
    background: var(--border); cursor: pointer;
    transition: background var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
}
.itc-dot--active { background: var(--primary); transform: scale(1.3); }


/* ── FAQ accordion ───────────────────────────────────────────── */
.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

.faq-item {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease);
}
.faq-item.open,
.faq-item:hover { border-color: var(--primary-a30); }

.faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 19px 22px; background: transparent; border: none; cursor: pointer;
    text-align: left; font-family: var(--font-sans); font-size: .96rem; font-weight: 700;
    color: var(--text);
}
.faq-icon {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary-a12); border: 1px solid var(--primary-a30);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-size: .82rem; font-weight: 700;
    transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--primary-a25); }

.faq-a {
    padding: 0 22px; max-height: 0; overflow: hidden;
    font-size: .88rem; color: var(--text-soft); line-height: 1.72;
    transition: max-height var(--dur-slow) var(--ease), padding-bottom var(--dur-base) var(--ease);
}
.faq-item.open .faq-a { max-height: 400px; padding-bottom: 18px; }


/* ── Final CTA section ───────────────────────────────────────── */
.cta-section {
    text-align: center; padding: 100px 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 50%, var(--amber-a07) 0%, transparent 70%),
        var(--surface);
}
.cta-section h2   { font-size: clamp(2rem,5vw,3.2rem); font-weight: 900; line-height: 1.15; letter-spacing: -.025em; margin-bottom: 16px; }
.cta-lead         { color: var(--text-soft); font-size: 1.03rem; max-width: 540px; margin: 0 auto 36px; line-height: 1.7; }

.cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, var(--primary-l), var(--primary), var(--primary-d));
    color: var(--bg); font-size: 1.08rem; font-weight: 800;
    padding: 18px 52px; border-radius: var(--radius-pill); text-decoration: none;
    letter-spacing: .03em; box-shadow: 0 8px 40px var(--glow-a);
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.cta-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 60px var(--glow-a); text-decoration: none; }
.cta-note { font-size: .78rem; color: var(--muted); margin-top: 14px; }

.cta-guarantees {
    display: flex; align-items: center; justify-content: center; gap: 24px;
    flex-wrap: wrap; margin-top: 28px;
}
.cta-guarantee {
    display: flex; align-items: center; gap: 7px;
    font-size: .78rem; color: var(--text-dim);
}
.cta-guarantee svg { color: var(--primary); }


/* ── Footer ──────────────────────────────────────────────────── */
.sp-footer {
    background: var(--bg); border-top: 1px solid var(--border);
    padding: 32px 20px; text-align: center;
    font-size: .78rem; color: var(--muted);
}
.sp-footer a { color: var(--primary); text-decoration: none; }
.sp-footer a:hover { text-decoration: underline; }
.footer-links { margin-bottom: 12px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.footer-disclaimer {
    max-width: 720px; margin: 12px auto 0;
    font-size: .70rem; color: var(--muted-a60); line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .hero-inner        { grid-template-columns: 1fr; gap: 28px; }
    .hero-inner > div:first-child { order: 1; } /* video first on mobile */
    .benefits-grid     { grid-template-columns: 1fr 1fr; }
    .testimonials-grid { grid-template-columns: 1fr 1fr; }
    .video-testi-grid  { grid-template-columns: 1fr 1fr; }
    .host-card         { grid-template-columns: 1fr; text-align: center; }
    .host-avatar       { margin: 0 auto; }
    .host-creds        { justify-content: center; }
    .for-whom-grid     { grid-template-columns: 1fr; }
    .event-info        { justify-content: flex-start; gap: 20px; }
    .trust-bar         { gap: 20px; }
}

@media (max-width: 600px) {
    .benefits-grid     { grid-template-columns: 1fr; }
    .agenda-grid       { grid-template-columns: 1fr; }
    .learn-grid        { grid-template-columns: 1fr; }
    .for-whom-grid     { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .video-testi-grid  { grid-template-columns: 1fr; }
    .hero-stats        { gap: 16px; }
    .section           { padding: 60px 0; }
    .hero-eyebrow .tag--amber { display: none; }
    .countdown         { gap: 7px; }
    .cd-num            { font-size: 1.8rem; min-width: 54px; }
    .cta-btn           { padding: 16px 36px; font-size: 1rem; }
    .trust-bar         { flex-direction: column; gap: 14px; align-items: flex-start; padding-inline: 1.5rem; }
    .hero              { min-height: unset; align-items: flex-start; padding: 16px 0 32px; }
    .hero-inner        { gap: 12px; }
    .hero-eyebrow      { margin-bottom: 10px; }
    .hero h1           { font-size: 1.85rem; margin-bottom: 10px; }
    .hero-sub          { font-size: .9rem; margin-bottom: 14px; }
}
:root {

    /* ── Backgrounds / surfaces (cool dark navy) ────────────── */
    --bg:          #050a14;   /* dark navy     — page bg              */
    --surface:     #0c1828;   /* navy surface  — alternate sections   */
    --card:        #111f35;   /* card bg                              */
    --border:      #1a2e4a;   /* card / divider borders               */

    /* ── Primary brand (golden amber) ───────────────────────── */
    /* ★ These are the main brand colours. Change --primary and  */
    /*   --primary-d; update the rgba glow tokens to match.      */
    --primary:     #f5c800;   /* golden yellow — CTAs, icons, brand   */
    --primary-d:   #d4a800;   /* darker gold   — hover / pressed      */
    --primary-l:   #f5de0b;   /* bright amber  — gradient light end   */
    --primary-xl:  #fde047;   /* pale gold     — subtle highlights    */

    /* ── Amber aliases (point to primary — keeps components in sync) */
    --amber:       var(--primary);    /* alias → --primary             */
    --amber-d:     var(--primary-d);  /* alias → --primary-d           */

    /* ── Blue (secondary / trust accent) ────────────────────── */
    --blue:        #2563eb;   /* blue-600  — secondary links / badges */
    --blue-d:      #1e40af;   /* blue-800  — hover                    */
    --blue-l:      #3b82f6;   /* blue-500  — gradient                 */
    --blue-xl:     #60a5fa;   /* blue-400  — subtle accent            */
    --sky:         #38bdf8;   /* sky-400   — cool highlight           */

    /* ── Danger / live ───────────────────────────────────────── */
    --danger:      #8e44ef;   /* violet    — live indicator pulse     */
    --danger-l:    #c4b5fd;   /* light violet — live badge text       */

    /* ── Text ────────────────────────────────────────────────── */
    --text:        #eef0f8;   /* cool white — body text on dark navy  */
    --text-soft:   #a8b8cc;   /* cool grey  — testimonial, captions   */
    --text-dim:    #8898b0;   /* dimmer     — agenda items            */
    --muted:       #5c6e82;   /* cool muted — secondary captions      */
    --white:       #ffffff;   /* pure white — icon text               */
    --amber-text:  #a07830;   /* warm amber text — compliance bar     */
    --stars:       var(--primary);   /* same golden — star ratings     */

    /* ── Glow / opacity helpers ──────────────────────────────── */
    /* rgb of --primary (#f5c800) = 245 200 0                      */
    /* rgb of --primary-d (#d4a800) = 212 168 0                    */
    /* rgb of --primary-l (#f5de0b) = 245 222 11                   */
    /* Update these when you change --primary above.               */
    --glow-b:           rgba(245,200,  0,.50);  /* primary strong glow      */
    --glow-a:           rgba(245,200,  0,.28);  /* primary soft glow        */
    --bg-nav:           rgba(  5, 10, 20,.88);  /* nav blur backdrop        */
    --primary-a10:      rgba(245,200,  0,.10);
    --primary-a12:      rgba(245,200,  0,.12);  /* icon bg tint             */
    --primary-a18:      rgba(245,200,  0,.18);  /* hero radial glow         */
    --primary-a20:      rgba(245,200,  0,.20);  /* icon border tint         */
    --primary-a25:      rgba(245,200,  0,.25);  /* hero bloom mid           */
    --primary-a30:      rgba(245,200,  0,.30);  /* hero bloom strong        */
    --primary-a22:      rgba(245,200,  0,.22);  /* video border glow        */
    --primary-a40:      rgba(245,200,  0,.40);  /* card hover border        */
    --primary-a45:      rgba(245,200,  0,.45);  /* avatar ring              */
    --primary-a50:      rgba(245,200,  0,.50);  /* strong card hover border */
    --primary-d-a12:    rgba(212,168,  0,.12);  /* primary-d hero glow      */
    --primary-l-a10:    rgba(245,222, 11,.10);  /* primary-l hero glow      */
    --amber-a07:        rgba(245,200,  0,.07);  /* amber bg tint            */
    --amber-a18:        rgba(245,200,  0,.18);  /* amber border tint        */
    --danger-a10:       rgba(142, 68,239,.10);  /* live badge bg            */
    --danger-a30:       rgba(142, 68,239,.30);  /* live badge border        */
    --muted-a55:        rgba( 92,110,130,.55);  /* testi disclaimer text    */
    --muted-a60:        rgba( 92,110,130,.60);  /* footer disclaimer text   */

    /* ── Typography ─────────────────────────────────────────── */
    --font-sans:        'Inter', system-ui, -apple-system, sans-serif;
    --font-size-base:   1rem;
    --line-height-base: 1.6;

    /* ── Layout ──────────────────────────────────────────────── */
    --radius:      14px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   20px;
    --radius-pill: 100px;
    --max-width:   1100px;

    /* ── Motion ────────────────────────────────────────────────── */
    --ease:     cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 380ms;

    /* ── Elevation / depth ──────────────────────────────────────── */
    --shadow-sm:   0 1px 4px rgba(0,0,0,.45);
    --shadow-md:   0 4px 20px rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.3);
    --shadow-lg:   0 24px 64px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.35);
    --shadow-glow: 0 8px 40px var(--glow-a);
}


/* ══════════════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.18; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 700; letter-spacing: -.01em; }
p + p { margin-top: 1rem; }


/* ── Layout helpers ──────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.section      { padding: 90px 0; }
.section--alt { background: var(--surface); }


/* ── Utility ─────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--muted); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary-l), var(--primary), var(--primary-d));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.amber-text { color: var(--amber); }

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}


/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .75rem 1.75rem;
    border-radius: var(--radius-pill);
    font-weight: 700; font-size: 1rem; cursor: pointer; letter-spacing: .025em;
    border: 1.5px solid transparent;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
    text-decoration: none;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-primary       { background: var(--primary); color: var(--bg); box-shadow: 0 4px 16px var(--glow-a); }
.btn-primary:hover { background: var(--primary-d); box-shadow: 0 8px 28px var(--glow-a); }
.btn-outline       { background: transparent; border-color: rgba(255,255,255,.18); color: var(--text); }
.btn-outline:hover { background: var(--primary-a12); border-color: var(--primary); color: var(--primary); }
.btn-accent        { background: var(--amber); color: var(--bg); box-shadow: 0 4px 16px var(--glow-a); }
.btn-accent:hover  { background: var(--amber-d); box-shadow: 0 8px 28px var(--glow-a); }


/* ── Forms ───────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-weight: 600; font-size: .9rem; }

.form-control {
    padding: .65rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem; width: 100%;
    background: var(--card); color: var(--text);
    transition: border-color .2s;
}
.form-control:focus { outline: none; border-color: var(--primary); }


/* ══════════════════════════════════════════════════════════════
   COMPONENTS
══════════════════════════════════════════════════════════════ */


/* ── Tag / pill badge ────────────────────────────────────────── */
.tag {
    display: inline-block;
    background: var(--primary-a12);
    border: 1px solid var(--primary-a40);
    color: var(--primary);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 5px 14px; border-radius: var(--radius-pill);
    margin-bottom: 16px;
}
.tag--amber { background: linear-gradient(135deg, var(--amber), var(--amber-d)); color: var(--bg); border: none; }


/* ── Section headers ─────────────────────────────────────────── */
.section-title {
    font-size: clamp(2rem, 4.5vw, 3.1rem);
    font-weight: 900; text-align: center;
    line-height: 1.15; letter-spacing: -.025em; margin-bottom: 12px;
}
.section-sub {
    text-align: center; color: var(--text-soft);
    font-size: 1.08rem; line-height: 1.72; max-width: 580px;
    margin: 0 auto 56px;
}


/* ── Compliance bar ──────────────────────────────────────────── */
.compliance-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 300;
    background: var(--amber-a07);
    border-bottom: 1px solid var(--amber-a18);
    padding: 8px 20px; text-align: center;
    font-size: .72rem; color: var(--amber-text); line-height: 1.5;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: opacity .5s ease;
}
.compliance-bar--hidden {
    opacity: 0; pointer-events: none;
}


/* ── Nav ─────────────────────────────────────────────────────── */
.sp-nav {
    position: sticky; top: 0; z-index: 200;
    padding: 14px 20px;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
    font-size: .95rem; font-weight: 800; letter-spacing: .05em;
    background: linear-gradient(135deg, var(--primary-l), var(--primary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nav-cta {
    background: linear-gradient(135deg, var(--amber), var(--amber-d));
    color: var(--bg); font-size: .82rem; font-weight: 800;
    padding: 10px; border-radius: 100px; text-decoration: none;
    letter-spacing: .03em; transition: opacity .2s, transform .15s; white-space: nowrap;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
}
.nav-cta:hover { opacity: .88; transform: translateY(-1px); text-decoration: none; }


/* ── Hero ────────────────────────────────────────────────────── */
.hero {
    min-height: 92vh; display: flex; align-items: center;
    padding: 72px 0 60px;
    background:
        /* dominant bottom-left amber bloom */
        radial-gradient(ellipse 75% 60% at -8% 95%,  var(--primary-a30) 0%, transparent 60%),
        /* soft secondary bloom bottom-center */
        radial-gradient(ellipse 55% 40% at 40% 110%, var(--primary-a18) 0%, transparent 55%),
        /* very subtle top-right warmth */
        radial-gradient(ellipse 40% 35% at 105% 10%, var(--primary-a10) 0%, transparent 55%);
    position: relative; overflow: hidden;
}

.hero-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 56px; align-items: center; width: 100%;
}

.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }

.live-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--danger-a10); border: 1px solid var(--danger-a30); color: var(--danger-l);
    font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 100px;
}
.live-dot {
    width: 7px; height: 7px; background: var(--danger); border-radius: 50%;
    animation: sp-blink 1.4s ease-in-out infinite;
}
@keyframes sp-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .35; transform: scale(.65); }
}

.hero h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 900;
    line-height: 1.12; letter-spacing: -.025em; margin-bottom: 20px;
}
.hero-sub {
    font-size: 1.05rem; color: var(--muted); margin-bottom: 32px;
    max-width: 500px; line-height: 1.7;
}

.hero-cta {
    display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, var(--amber), var(--amber-d));
    color: var(--bg); font-size: 1.02rem; font-weight: 800;
    padding: 16px 38px; border-radius: 100px; text-decoration: none;
    letter-spacing: .02em; box-shadow: 0 8px 32px var(--glow-a);
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
    position: relative; overflow: hidden;
}
.hero-cta::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.2), transparent);
    opacity: 0; transition: opacity var(--dur-base) var(--ease);
}
.hero-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 56px var(--glow-a); text-decoration: none; }
.hero-cta:hover::after { opacity: 1; }

.hero-stats { display: flex; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
.stat       { display: flex; flex-direction: column; gap: 2px; }
.stat-num   { font-size: 1.5rem; font-weight: 900; color: var(--primary); }
.stat-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }


/* ── Video frame ─────────────────────────────────────────────── */
.video-frame {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; position: relative;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--primary-a22);
}
.video-frame--portrait {
    aspect-ratio: 9/16; max-width: min(320px, 100%); margin: 0 auto;
}
.video-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: linear-gradient(135deg, var(--surface), var(--card));
    color: var(--muted); font-size: .82rem; font-weight: 500; letter-spacing: .05em; cursor: pointer;
}
.play-btn {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, var(--primary), var(--primary-l));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 36px var(--glow-b); transition: transform var(--dur-fast) var(--ease);
}
.video-placeholder:hover .play-btn { transform: scale(1.1); }


/* ── Benefits grid ───────────────────────────────────────────── */
.benefits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

.benefit-card {
    background: linear-gradient(155deg, var(--card) 0%, rgba(9,17,30,.97) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease);
}
.benefit-card:hover { border-color: var(--primary-a40); transform: translateY(-5px); box-shadow: var(--shadow-md), 0 0 0 1px var(--primary-a20); }

.benefit-icon {
    width: 44px; height: 44px;
    background: var(--primary-a12); border: 1px solid var(--primary-a20);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.benefit-card h3 { font-size: .97rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.benefit-card p  { font-size: .86rem; color: var(--muted); line-height: 1.65; }


/* ── Agenda / learn list ─────────────────────────────────────── */
.learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

.learn-item {
    display: flex; align-items: flex-start; gap: 13px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 17px 20px;
    transition: border-color var(--dur-fast) var(--ease);
}
.learn-item:hover { border-color: var(--primary-a30); }
.check {
    flex-shrink: 0; width: 21px; height: 21px;
    background: linear-gradient(135deg, var(--primary), var(--primary-l));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .7rem; color: var(--white); margin-top: 2px;
}
.learn-item p { font-size: .9rem; font-weight: 500; color: var(--text-dim); }


/* ── Host card ───────────────────────────────────────────────── */
.host-card {
    display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center;
    background: linear-gradient(135deg, var(--card) 0%, rgba(9,17,30,.95) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 40px; max-width: 780px; margin: 0 auto;
    box-shadow: var(--shadow-md);
}
.host-avatar {
    width: 120px; height: 120px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-l));
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; border: 3px solid var(--primary-a45); overflow: hidden;
}
.host-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.host-name  { font-size: 1.45rem; font-weight: 800; margin-bottom: 5px; }
.host-title { font-size: .82rem; color: var(--primary); font-weight: 600; margin-bottom: 13px; letter-spacing: .05em; text-transform: uppercase; }
.host-bio   { font-size: .91rem; color: var(--muted); line-height: 1.75; }


/* ── Text testimonials ───────────────────────────────────────── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

.testi-card {
    background: linear-gradient(155deg, var(--card) 0%, rgba(9,17,30,.97) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease);
    display: flex; flex-direction: column;
}
.testi-card:hover { border-color: var(--primary-a40); box-shadow: var(--shadow-md); }

.stars      { color: var(--stars); font-size: .92rem; margin-bottom: 12px; letter-spacing: 2px; }
.testi-text { font-size: .9rem; color: var(--text-soft); line-height: 1.75; margin-bottom: 10px; font-style: italic; flex: 1; }
.testi-note { font-size: .67rem; color: var(--muted-a55); margin-bottom: 14px; }
.testi-author { display: flex; align-items: center; gap: 11px; }

.author-avatar {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-l));
    display: flex; align-items: center; justify-content: center;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-name { font-size: .86rem; font-weight: 700; }
.author-role { font-size: .73rem; color: var(--muted); }


/* ── Video testimonials ──────────────────────────────────────── */
.video-testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

.video-testi-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.video-testi-card:hover { border-color: var(--primary-a40); transform: translateY(-4px); box-shadow: var(--shadow-md); }

.vtesti-thumb {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--surface), var(--card));
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.vtesti-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.vtesti-thumb .play-btn { width: 46px; height: 46px; position: relative; z-index: 1; }

.vtesti-meta { padding: 13px 15px; }
.vtesti-name { font-size: .86rem; font-weight: 700; margin-bottom: 3px; }
.vtesti-desc { font-size: .76rem; color: var(--muted); }


/* ── Image testimonials carousel (block 2) ───────────────────── */
.img-testi-carousel { }
.itc-wrap { overflow: hidden; }
.itc-track {
    display: flex;
    transition: transform .4s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
.itc-slide {
    flex-shrink: 0;
    padding: 0 7px;
    box-sizing: border-box;
}
.img-testi-card {
    border-radius: var(--radius-md); overflow: hidden;
    background: var(--card); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.img-testi-card img { width: 100%; height: auto; display: block; }
.img-testi-placeholder {
    aspect-ratio: 4/5;
    background: var(--surface-2, var(--surface));
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px;
    color: var(--muted); font-size: .75rem; text-align: center; padding: 20px;
}
.img-testi-placeholder svg { opacity: .35; }
.itc-nav {
    display: flex; justify-content: center; align-items: center;
    gap: 18px; margin-top: 18px;
}
.itc-btn {
    width: 38px; height: 38px; border-radius: 50%; padding: 0; flex-shrink: 0;
    background: var(--card); border: 1px solid var(--border);
    color: var(--text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease),
                opacity var(--dur-base);
}
.itc-btn:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: #000; }
.itc-btn:disabled { opacity: .3; cursor: default; }
.itc-dots { display: flex; align-items: center; gap: 8px; }
.itc-dot {
    width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none;
    background: var(--border); cursor: pointer;
    transition: background var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
}
.itc-dot--active { background: var(--primary); transform: scale(1.3); }


/* ── CTA section ─────────────────────────────────────────────── */
.cta-section {
    text-align: center; padding: 96px 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 50%, var(--amber-a07) 0%, transparent 70%),
        var(--surface);
}
.cta-section h2 { font-size: clamp(2rem,5vw,3.1rem); font-weight: 900; line-height: 1.15; margin-bottom: 16px; }
.cta-lead { color: var(--muted); font-size: 1.03rem; max-width: 540px; margin: 0 auto 36px; }

.cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, var(--primary-l), var(--primary), var(--primary-d));
    color: var(--bg); font-size: 1.08rem; font-weight: 800;
    padding: 18px 52px; border-radius: var(--radius-pill); text-decoration: none;
    letter-spacing: .03em; box-shadow: 0 8px 40px var(--glow-a);
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.cta-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 60px var(--glow-a); text-decoration: none; }
.cta-note { font-size: .78rem; color: var(--muted); margin-top: 14px; }


/* ── Footer ──────────────────────────────────────────────────── */
.sp-footer {
    background: var(--bg); border-top: 1px solid var(--border);
    padding: 32px 20px; text-align: center;
    font-size: .78rem; color: var(--muted);
}
.sp-footer a { color: var(--primary); text-decoration: none; }
.sp-footer a:hover { text-decoration: underline; }

.footer-links { margin-bottom: 12px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.footer-disclaimer {
    max-width: 720px; margin: 12px auto 0;
    font-size: .70rem; color: var(--muted-a60); line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .hero-inner        { grid-template-columns: 1fr; gap: 28px; }
    .hero-inner > div:first-child { order: 1; } /* video first on mobile */
    .benefits-grid     { grid-template-columns: 1fr 1fr; }
    .testimonials-grid { grid-template-columns: 1fr 1fr; }
    .video-testi-grid  { grid-template-columns: 1fr 1fr; }
    .host-card         { grid-template-columns: 1fr; text-align: center; }
    .host-avatar       { margin: 0 auto; }
}

@media (max-width: 600px) {
    .benefits-grid             { grid-template-columns: 1fr; }
    .learn-grid                { grid-template-columns: 1fr; }
    .testimonials-grid         { grid-template-columns: 1fr; }
    .video-testi-grid          { grid-template-columns: 1fr; }
    .hero-stats                { gap: 16px; }
    .section                   { padding: 60px 0; }
    .hero-eyebrow .tag--amber  { display: none; }
    .hero                      { min-height: unset; align-items: flex-start; padding: 16px 0 32px; }
    .hero-inner                { gap: 12px; }
    .hero-eyebrow              { margin-bottom: 10px; }
    .hero h1                   { font-size: 1.85rem; margin-bottom: 10px; }
    .hero-sub                  { font-size: .9rem; margin-bottom: 14px; }
}