:root{
    /* Surfaces */
    --bg: #FFFFFF;
    --surface-card: #FAFAFA;
    --ink: #1A1A1A;
    --ink-strong: #0A0A0A;
    --ink-muted: #3A3A3A;
    --ink-lead: #2C2C2C;
    --hairline: rgba(0,0,0,0.08);
    --hairline-soft: rgba(0,0,0,0.06);

    /* Brand lime — sampled from character jacket #D8ED08 */
    --accent-acid: #D8ED08;
    --accent-acid-shadow: rgba(216,237,8,0.35);
    --accent-acid-tint: rgba(216,237,8,0.10);
    --accent-ink: #0A0A0A;
    --portrait-placeholder: #E5E7EB;

    /* Type families */
    --font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-accent: 'Lora', 'Source Serif Pro', Georgia, serif;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-display);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  a{text-decoration:none;color:inherit}

  /* ===== Header (Figma 148:1049) ===== */
  header.site{
    position:sticky;top:0;z-index:100;
    padding-top:16px;
    background:transparent;
  }
  /* Blur strip ABOVE the pill only. Slightly wider than pill with soft horizontal fade
     so edges don't cut sharply. Height = 16px (padding-top only) — does NOT overlap pill body. */
  header.site::before{
    content:'';
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:0;
    width:min(calc(100% - 32px), 1280px);
    height:16px;
    -webkit-backdrop-filter:blur(11px);
    backdrop-filter:blur(11px);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    pointer-events:none;
  }
  .header-pill{
    width:min(calc(100% - 64px), 1208px);
    margin:0 auto;
    padding:8px 22.67px;
    background:rgba(240,240,242,0.65);
    border:1px solid var(--hairline-soft);
    border-radius:22px;
    box-shadow:0 1px 2px rgba(14,14,14,0.04), 0 10px 30px -12px rgba(14,14,14,0.14);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    transition:transform 0.3s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.3s;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
  }
  .header-pill:hover{
    transform:translateY(-2px);
    box-shadow:0 2px 4px rgba(14,14,14,0.06), 0 14px 40px -12px rgba(14,14,14,0.20);
  }
  /* Left cluster — logo + nav (swapped per operator request) */
  .h-left{display:flex;align-items:center;gap:22px}
  /* Brand logo: full GIF (letters + drips) — no crop, letters big, drips flow.
     Height ≈ pill height so it dominates visually (pill height auto-grows). */
  .brand-logo{
    display:block;
    overflow:visible;
    flex-shrink:0;
  }
  .brand-logo img,
  .brand-logo video{
    display:block;
    height:44px;
    width:auto;
  }
  /* Video asset: letter body at y=127-335 of 533 (center ≈ 43% from top).
     With 10px empty padding above letters inside the 44px box, letter-center sits
     3-4px above box center → shift down 4px so letter-center aligns with nav-text center. */
  .brand-logo video{
    transform:translateY(4px);
  }
  nav.top{display:flex;align-items:center;gap:22px}
  nav.top a{
    font-family:var(--font-display);
    font-weight:500;
    font-size:14px;
    line-height:21px;
    color:var(--ink);
    opacity:0.75;
    transition:opacity 0.12s;
  }
  nav.top a:hover{opacity:1}
  /* Right cluster — course name + CTA (swapped per operator request) */
  .h-right{display:flex;align-items:center;gap:22px}
  .brand-pill{
    font-family:var(--font-display);
    font-weight:700;
    font-size:15px;
    line-height:22.5px;
    color:var(--ink);
  }
  .nav-cta{
    background:var(--accent-acid);
    color:var(--accent-ink);
    padding:9.165px 18px 10.085px 18px;
    border-radius:999px;
    font-family:var(--font-display);
    font-weight:600;
    font-size:13.5px;
    line-height:20.25px;
    letter-spacing:0.135px;
    transition:transform 0.15s, box-shadow 0.15s;
  }
  .nav-cta:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(14,14,14,0.12);
  }
  @media (max-width:920px){
    .header-pill{flex-direction:column;align-items:flex-start;gap:14px;border-radius:18px;padding:16px 18px}
    .h-left,.h-right{flex-wrap:wrap}
  }

  /* ===== Hero Section (Figma 148:3) ===== */
  section.hero{padding:48px 0 50px}
  .hero-container{
    width:min(calc(100% - 64px), 1208px);
    margin:0 auto;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:24px;
  }

  /* Trigger — plain italic caption. No pill, no bar, no label, no dot. */
  .trigger{
    max-width:880px;
    padding:0;
    font-family:var(--font-display);
    font-style:italic;
    font-weight:500;
    font-size:14.5px;
    line-height:22px;
    letter-spacing:-0.067px;
    color:var(--ink-muted);
    display:block;
  }
  .trigger-dot{display:none}

  /* Hero grid (Figma 148:8): 1.45fr / 1fr, gap 48 */
  .hero-grid{
    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:48px;
    width:100%;
    align-items:start;
  }
  @media (max-width:920px){
    .hero-grid{grid-template-columns:1fr}
  }

  /* Left col (Figma 148:9): gap 27.4, pb 18 */
  .hero-left{
    display:flex;
    flex-direction:column;
    gap:27.4px;
    padding-bottom:18px;
  }
  /* H1 (Figma 148:11): Inter Bold 60, leading 63, tracking -1.5 */
  h1.hero-h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size:60px;
    line-height:63px;
    letter-spacing:-1.5px;
    color:var(--ink);
  }
  h1.hero-h1 .accent{
    font-family:var(--font-accent);
    font-style:italic;
    font-weight:700;
    color:var(--accent-acid);
    /* Thicken italic serif strokes so its lime reads at the same visual weight as the CTA fill. */
    -webkit-text-stroke:1.5px var(--accent-acid);
    letter-spacing:-0.005em;
  }
  h1.hero-h1 .accent .nowrap{white-space:nowrap}

  /* Lead (Figma 148:13): Inter 19, leading 28.5, max-w 540 */
  .lead{
    max-width:540px;
    font-family:var(--font-display);
    font-weight:400;
    font-size:19px;
    line-height:28.5px;
    color:var(--ink-lead);
  }

  /* CTA row (Figma 148:14): gap 18, pt 4.6 */
  .ctas{
    display:flex;
    align-items:center;
    gap:18px;
    padding-top:4.6px;
    flex-wrap:wrap;
  }
  /* Primary CTA (Figma 148:15): #c7f33d → operator overlay #D8ED08 */
  .cta-primary{
    background:var(--accent-acid);
    color:var(--accent-ink);
    padding:18px 36px;
    border-radius:999px;
    font-family:var(--font-display);
    font-weight:700;
    font-size:16px;
    line-height:24px;
    letter-spacing:-0.16px;
    box-shadow:0 4px 9px rgba(14,14,14,0.10);
    transition:transform 0.15s, box-shadow 0.15s;
  }
  .cta-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(14,14,14,0.14);
  }
  /* Secondary (Figma 148:18) */
  .cta-secondary{
    font-family:var(--font-display);
    font-weight:600;
    font-size:15px;
    line-height:22.5px;
    color:var(--ink-muted);
  }

  /* Character (Figma 148:19/20): min-h 520, h 659.03, rounded 18 */
  .hero-photo{
    min-height:520px;
    height:659px;
    border-radius:18px;
    overflow:visible;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    background:transparent;
  }
  .hero-photo img{
    display:block;
    width:auto;
    max-width:none;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    transform:scale(1.1);
    transform-origin:center bottom;
  }
  @media (max-width:920px){
    .hero-photo{height:auto;min-height:0}
    .hero-photo img{max-height:480px;height:auto}
  }

  /* Focus jobs (Figma 148:21): gap 18, pt 24 */
  .focus-jobs{
    display:flex;
    gap:18px;
    padding-top:24px;
    justify-content:center;
  }
  @media (max-width:920px){
    .focus-jobs{flex-direction:column}
  }
  /* Card (Figma 148:22/28/35): bg #f8f4ec→operator white, border, rounded 10, pad 26.667/24.667, min-h 170 */
  .fj{
    flex:1 0 0;
    min-width:0;
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:10px;
    padding:26.667px 24.667px;
    min-height:170px;
    display:flex;
    flex-direction:column;
  }
  /* H3 (Figma 148:25/31/38): Inter Bold 21, leading 26.25, tracking -0.315, pb 14 */
  .fj h3{
    font-family:var(--font-display);
    font-weight:700;
    font-size:21px;
    line-height:26.25px;
    letter-spacing:-0.315px;
    color:var(--ink);
    padding-bottom:14px;
  }
  /* Body (Figma 148:27/34/41): Inter Regular 14.5, leading 22.48 */
  .fj p{
    font-family:var(--font-display);
    font-weight:400;
    font-size:14.5px;
    line-height:22.48px;
    color:var(--ink-lead);
  }

  /* Focus / a11y */
  a:focus-visible,
  summary:focus-visible,
  button:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:3px;
    border-radius:6px;
  }

  /* Hover-card: shared lift+shadow effect for all card-like blocks
     (rec, skill, price, focus-jobs, testi, proof, auto, faculty, program).
     Ref: zamesin.ru — translateY(-3px) + expanded shadow, cubic-bezier ease. */
  .rec-card,
  .skill-card,
  .price-card,
  .fj,
  .testi-card,
  .proof-card,
  .auto-card,
  .fac-card,
  .price-choose,
  .program-list details{
    box-shadow:0 2px 12px rgba(14,14,14,0.05);
    transition:transform 0.3s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.3s;
  }
  .rec-card:hover,
  .skill-card:hover,
  .price-card:hover,
  .fj:hover,
  .testi-card:hover,
  .proof-card:hover,
  .auto-card:hover,
  .fac-card:hover,
  .price-choose:hover,
  .program-list details:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 32px rgba(14,14,14,0.12);
  }
  @media (prefers-reduced-motion:reduce){
    .rec-card,.skill-card,.price-card,.fj,.testi-card,
    .proof-card,.auto-card,.fac-card,.price-choose,.program-list details{
      transition:none;
    }
    .rec-card:hover,.skill-card:hover,.price-card:hover,.fj:hover,
    .testi-card:hover,.proof-card:hover,.auto-card:hover,.fac-card:hover,
    .price-choose:hover,.program-list details:hover{
      transform:none;
    }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;animation:none !important}
    html{scroll-behavior:auto}
  }

  /* ===== Shared section pattern ===== */
  .section{padding:100px 0 80px}
  .section-container{width:min(calc(100% - 64px), 1208px);margin:0 auto;padding:0}
  .section h2{
    font-family:var(--font-display);
    font-weight:700;
    font-size:56px;
    line-height:60px;
    letter-spacing:-1.4px;
    color:var(--ink);
    max-width:1000px;
    margin-bottom:24px;
  }
  .section .lead-2{
    font-family:var(--font-display);
    font-weight:400;
    font-size:19px;
    line-height:28.5px;
    color:var(--ink-lead);
    max-width:780px;
    margin-bottom:56px;
  }
  .section .lead-2 strong{font-weight:600;color:var(--ink)}

  /* ===== Recognize ===== */
  .recognize-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  @media (max-width:960px){.recognize-grid{grid-template-columns:1fr}}
  .rec-card{
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:14px;
    padding:32px 28px;
  }
  .rec-card h3{
    font-family:var(--font-display);
    font-weight:700;
    font-size:22px;
    line-height:28px;
    letter-spacing:-0.4px;
    color:var(--ink);
    margin-bottom:20px;
  }
  .rec-card ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
  .rec-card li{
    position:relative;
    padding-left:22px;
    font-family:var(--font-display);
    font-weight:400;
    font-size:15px;
    line-height:22.5px;
    color:var(--ink-lead);
  }
  .rec-card li::before{
    content:'';
    position:absolute;
    left:0;top:9px;
    width:6px;height:6px;
    background:var(--accent-acid);
    border-radius:50%;
  }

  /* ===== Automate ===== */
  .automate-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }
  @media (max-width:960px){.automate-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:600px){.automate-grid{grid-template-columns:1fr}}
  .auto-card{
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:12px;
    padding:24px 24px;
    display:flex;
    align-items:center;
    min-height:96px;
  }
  .auto-card h3{
    font-family:var(--font-display);
    font-weight:600;
    font-size:17px;
    line-height:24px;
    letter-spacing:-0.255px;
    color:var(--ink);
  }

  /* ===== Skills ===== */
  .skills-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  @media (max-width:960px){.skills-grid{grid-template-columns:1fr}}
  .skill-card{
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:14px;
    padding:32px 28px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .skill-card h3{
    font-family:var(--font-display);
    font-weight:700;
    font-size:21px;
    line-height:27px;
    letter-spacing:-0.35px;
    color:var(--ink);
    margin-bottom:6px;
  }
  .skill-card p{
    font-family:var(--font-display);
    font-weight:400;
    font-size:15px;
    line-height:22.5px;
    color:var(--ink-lead);
    padding-left:20px;
    position:relative;
  }
  .skill-card p::before{
    content:'';
    position:absolute;
    left:0;top:8px;
    width:8px;height:8px;
    background:var(--accent-acid);
    border-radius:2px;
  }

  /* ===== Authors-proof ===== */
  .authors-proof-grid{
    display:grid;
    grid-template-columns:0.62fr 1fr;
    gap:32px;
    align-items:stretch;
  }
  @media (max-width:960px){.authors-proof-grid{grid-template-columns:1fr}}
  .authors-photo{
    border-radius:18px;
    overflow:hidden;
    background:var(--surface-card);
    display:flex;align-items:center;justify-content:center;
    align-self:stretch;
    min-height:100%;
  }
  .authors-photo img{display:block;width:100%;height:100%;object-fit:cover}
  .proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start;align-self:start;}
  .proof-card{
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:14px;
    padding:24px 22px;
  }
  .proof-card.wide{grid-column:1 / -1;align-self:start}
  .proof-card h3{
    font-family:var(--font-display);
    font-weight:700;
    font-size:18px;
    line-height:24px;
    letter-spacing:-0.2px;
    color:var(--ink);
    margin-bottom:12px;
  }
  .proof-card ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
  .proof-card li{
    font-family:var(--font-display);
    font-weight:400;
    font-size:14.5px;
    line-height:21px;
    color:var(--ink-lead);
  }
  .proof-card li strong{font-weight:700;color:var(--ink)}
  .proof-card p{
    font-family:var(--font-display);
    font-weight:400;
    font-size:15px;
    line-height:22px;
    color:var(--ink-lead);
  }
  .proof-card p strong{font-weight:700;color:var(--ink)}

  /* ===== Faculty ===== */
  .faculty-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:48px;
  }
  @media (max-width:760px){.faculty-stats{grid-template-columns:repeat(2,1fr)}}
  .faculty-stats .s{
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:12px;
    padding:22px 20px;
    display:flex;
    flex-direction:column;
    gap:6px;
    font-family:var(--font-display);
    font-size:14px;
    color:var(--ink-lead);
    line-height:18px;
  }
  .faculty-stats .s strong{
    font-weight:700;
    font-size:36px;
    line-height:42px;
    color:var(--ink);
    letter-spacing:-0.7px;
  }
  .faculty-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
  }
  @media (max-width:960px){.faculty-grid{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:760px){.faculty-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:480px){.faculty-grid{grid-template-columns:1fr}}
  .fac-card{
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:14px;
    padding:22px 20px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .fac-card .portrait{
    width:110px;height:110px;
    border-radius:50%;
    overflow:hidden;
    background:var(--portrait-placeholder);
  }
  .fac-card .portrait img{
    display:block;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center 22%;
    transform:scale(1.7);
    transform-origin:center 30%;
  }
  .fac-card .name{
    font-family:var(--font-display);
    font-weight:700;
    font-size:17px;
    line-height:22px;
    letter-spacing:-0.2px;
    color:var(--ink);
  }
  .fac-card .role-mini{
    font-family:var(--font-display);
    font-weight:400;
    font-size:13.5px;
    line-height:19.5px;
    color:var(--ink-lead);
  }
  .fac-card .role-mini strong{font-weight:700;color:var(--ink)}
  .fac-card .role-mini a{color:var(--ink);text-decoration:underline}

  /* ===== Testimonials ===== */
  .testi-grid{
    columns:3;
    column-gap:18px;
  }
  @media (max-width:960px){.testi-grid{columns:2}}
  @media (max-width:640px){.testi-grid{columns:1}}
  .testi-card{
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:14px;
    padding:24px 22px;
    margin-bottom:18px;
    break-inside:avoid;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .testi-card .pic{
    width:52px;height:52px;
    border-radius:50%;
    overflow:hidden;
    background:var(--accent-acid);
    color:var(--accent-ink);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-display);
    font-weight:700;
    font-size:18px;
    letter-spacing:-0.2px;
    flex-shrink:0;
  }
  .testi-card .pic img{
    display:block;
    width:100%;height:100%;
    object-fit:cover;
  }
  .testi-card .name{
    font-family:var(--font-display);
    font-weight:700;
    font-size:16px;
    line-height:21px;
    letter-spacing:-0.15px;
    color:var(--ink);
  }
  .testi-card .role{
    font-family:var(--font-display);
    font-weight:500;
    font-size:13px;
    line-height:18px;
    color:var(--ink-muted);
    margin-top:-8px;
  }
  .testi-card .quote{
    font-family:var(--font-display);
    font-weight:400;
    font-size:14.5px;
    line-height:22px;
    color:var(--ink-lead);
  }
  .testi-more{margin-top:18px}
  .testi-more summary{
    cursor:pointer;
    display:inline-block;
    padding:14px 28px;
    border-radius:999px;
    border:1px solid var(--ink);
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-display);
    font-weight:600;
    font-size:15px;
    list-style:none;
    transition:background 0.15s,color 0.15s;
  }
  .testi-more summary::-webkit-details-marker{display:none}
  .testi-more summary:hover{background:var(--ink);color:var(--bg)}
  .testi-more[open] summary{margin-bottom:18px}
  .testi-more .testi-grid{margin-top:18px}

  /* ===== Program ===== */
  .program-note{
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:14px;
    padding:24px 28px;
    margin-bottom:32px;
  }
  .program-note strong{
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    font-size:18px;
    line-height:24px;
    color:var(--ink);
    margin-bottom:8px;
  }
  .program-note p{
    font-family:var(--font-display);
    font-weight:400;
    font-size:15px;
    line-height:22.5px;
    color:var(--ink-lead);
  }
  .program-list{display:flex;flex-direction:column;gap:12px}
  .program-list details{
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:14px;
    overflow:hidden;
  }
  .program-list details[open]{background:var(--bg);border-color:var(--ink)}
  .program-list summary{
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:20px;
    padding:24px 28px;
    list-style:none;
  }
  .program-list summary::-webkit-details-marker{display:none}
  .program-list summary::after{
    content:'+';
    margin-left:auto;
    font-family:var(--font-display);
    font-weight:400;
    font-size:28px;
    line-height:1;
    color:var(--ink);
    transition:transform 0.2s;
  }
  .program-list details[open] summary::after{content:'−'}
  .program-list .num{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;height:42px;
    border-radius:50%;
    background:var(--accent-acid);
    color:var(--accent-ink);
    font-family:var(--font-display);
    font-weight:700;
    font-size:17px;
    flex-shrink:0;
  }
  .program-list summary > div{flex:1;display:flex;flex-direction:column;gap:4px}
  .program-list summary h3{
    font-family:var(--font-display);
    font-weight:700;
    font-size:19px;
    line-height:25px;
    letter-spacing:-0.25px;
    color:var(--ink);
  }
  .program-list summary .par-badge{
    display:inline-block;
    padding:2px 10px;
    border-radius:999px;
    background:var(--accent-acid);
    color:var(--accent-ink);
    font-family:var(--font-display);
    font-weight:600;
    font-size:11.5px;
    letter-spacing:0.3px;
    text-transform:uppercase;
    margin-left:8px;
    vertical-align:middle;
  }
  .program-list summary .meta-line{
    font-family:var(--font-display);
    font-weight:500;
    font-size:13.5px;
    line-height:19px;
    color:var(--ink-muted);
  }
  .program-list .body{
    padding:0 28px 28px 28px;
    border-top:1px solid var(--hairline);
    margin-top:0;
    padding-top:24px;
  }
  .program-list .body p{
    font-family:var(--font-display);
    font-weight:400;
    font-size:15px;
    line-height:22.5px;
    color:var(--ink-lead);
    margin-bottom:18px;
  }
  .program-list .body h4{
    font-family:var(--font-display);
    font-weight:700;
    font-size:15px;
    line-height:21px;
    letter-spacing:-0.15px;
    color:var(--ink);
    margin:18px 0 10px;
  }
  .program-list .body ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
  .program-list .body li{
    position:relative;
    padding-left:20px;
    font-family:var(--font-display);
    font-weight:400;
    font-size:14.5px;
    line-height:21px;
    color:var(--ink-lead);
  }
  .program-list .body li::before{
    content:'';
    position:absolute;
    left:0;top:8px;
    width:6px;height:6px;
    background:var(--accent-acid);
    border-radius:50%;
  }
  .parallel-tracks{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    padding-top:8px;
  }
  @media (max-width:760px){.parallel-tracks{grid-template-columns:1fr}}
  .parallel-tracks .track{
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:12px;
    padding:20px 22px;
  }
  .parallel-tracks .track h4{margin-top:0;margin-bottom:6px}
  .parallel-tracks .track .who{
    font-family:var(--font-display);
    font-weight:500;
    font-size:13.5px;
    color:var(--ink-muted);
    margin-bottom:14px;
  }
  .parallel-note{
    background:var(--accent-acid-tint);
    border-left:3px solid var(--accent-acid);
    padding:14px 16px;
    border-radius:6px;
    margin-bottom:18px !important;
  }

  /* ===== Pricing ===== */
  /* Two-row subgrid: row 1 = price-cards (align to tallest), row 2 = price-choose
     (align to tallest). Fixes the "разной высоты столбцы" issue where the middle
     featured card has 7 bullets and pushes its "выбирай, если" down. */
  .pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:auto auto;
    column-gap:18px;
    row-gap:14px;
  }
  .price-col{
    display:grid;
    grid-template-rows:subgrid;
    grid-row:span 2;
    row-gap:14px;
  }
  @media (max-width:960px){
    .pricing-grid{grid-template-columns:1fr;grid-template-rows:none}
    .price-col{display:flex;flex-direction:column;grid-row:auto}
  }
  .price-card{
    position:relative;
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:18px;
    padding:32px 28px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .price-card.featured{
    background:var(--bg);
    border:2px solid var(--ink);
  }
  .price-card .badge{
    position:absolute;
    top:-12px;left:28px;
    background:var(--accent-acid);
    color:var(--accent-ink);
    padding:5px 14px;
    border-radius:999px;
    font-family:var(--font-display);
    font-weight:700;
    font-size:12px;
    letter-spacing:0.3px;
    text-transform:uppercase;
  }
  .price-card .price-name{
    font-family:var(--font-display);
    font-weight:600;
    font-size:15px;
    line-height:21px;
    color:var(--ink-muted);
  }
  .price-card h3{
    font-family:var(--font-display);
    font-weight:700;
    font-size:36px;
    line-height:42px;
    letter-spacing:-0.9px;
    color:var(--ink);
  }
  .price-card .price-mo{
    font-family:var(--font-display);
    font-weight:400;
    font-size:13.5px;
    line-height:19.5px;
    color:var(--ink-muted);
  }
  .price-card ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
  .price-card li{
    position:relative;
    padding-left:22px;
    font-family:var(--font-display);
    font-weight:400;
    font-size:14.5px;
    line-height:21px;
    color:var(--ink);
  }
  .price-card li::before{
    content:'✓';
    position:absolute;
    left:0;top:0;
    color:var(--accent-ink);
    background:var(--accent-acid);
    width:16px;height:16px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:700;
  }
  /* Plus-list variant for tiers 2/3 — new items are "+" not "✓" */
  .price-card ul.plus-list li::before{
    content:'+';
    background:var(--accent-acid);
    color:var(--accent-ink);
    width:16px;height:16px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    line-height:1;
    font-weight:700;
  }
  .price-card details.inherited{
    position:relative;
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:12px;
    padding:12px 44px 12px 16px;
    margin:6px 0 12px;
  }
  .price-card details.inherited summary{
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    list-style:none;
    font-family:var(--font-display);
    font-weight:600;
    font-size:14px;
    line-height:19px;
    color:var(--ink);
  }
  .price-card details.inherited summary::-webkit-details-marker{display:none}
  /* CSS-drawn chevron (border technique) — reliable across fonts, no glyph fallback. */
  .price-card details.inherited summary::after{
    content:'';
    position:absolute;
    right:18px;
    top:22px;
    width:8px;
    height:8px;
    border-right:1.75px solid var(--ink-muted);
    border-bottom:1.75px solid var(--ink-muted);
    transform:translateY(-2px) rotate(45deg);
    transform-origin:center;
    transition:transform 0.2s;
  }
  .price-card details.inherited[open] summary::after{
    transform:translateY(2px) rotate(-135deg);
  }
  .price-card details.inherited .count{
    font-weight:500;
    font-size:13px;
    color:var(--ink-muted);
  }
  .price-card details.inherited ul{
    margin:12px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    list-style:none;
  }
  .price-card details.inherited ul li{
    padding-left:22px;
    position:relative;
    font-family:var(--font-display);
    font-weight:400;
    font-size:14px;
    line-height:20px;
    color:var(--ink-lead);
  }
  .price-card details.inherited ul li::before{
    content:'✓';
    position:absolute;
    left:0;top:0;
    color:var(--accent-ink);
    background:var(--accent-acid);
    width:16px;height:16px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:700;
  }
  .price-card .cta{
    margin-top:auto;
    display:inline-block;
    text-align:center;
    background:var(--accent-acid);
    color:var(--accent-ink);
    padding:16px 26px;
    border-radius:999px;
    font-family:var(--font-display);
    font-weight:700;
    font-size:15px;
    letter-spacing:-0.15px;
    transition:transform 0.15s,box-shadow 0.15s;
  }
  .price-card .cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(14,14,14,0.12)}
  .price-choose{
    background:var(--bg);
    border:1px dashed var(--hairline);
    border-radius:14px;
    padding:18px 20px;
  }
  .price-choose .lbl{
    display:block;
    font-family:var(--font-display);
    font-weight:600;
    font-size:12.5px;
    color:var(--ink-muted);
    letter-spacing:0.4px;
    text-transform:uppercase;
    margin-bottom:6px;
  }
  .price-choose .sub{
    font-family:var(--font-display);
    font-weight:700;
    font-size:15px;
    line-height:21px;
    color:var(--ink);
    margin-bottom:12px;
  }
  .price-choose ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
  .price-choose li{
    position:relative;
    padding-left:18px;
    font-family:var(--font-display);
    font-weight:400;
    font-size:13.5px;
    line-height:19.5px;
    color:var(--ink-lead);
  }
  .price-choose li::before{
    content:'';
    position:absolute;
    left:0;top:8px;
    width:6px;height:6px;
    background:var(--accent-acid);
    border-radius:50%;
  }
  .pricing-bar{
    margin-top:32px;
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:12px;
    padding:18px 24px;
    font-family:var(--font-display);
    font-weight:500;
    font-size:14.5px;
    line-height:21px;
    color:var(--ink-lead);
    text-align:left;
  }

  /* ===== FAQ ===== */
  .faq-wrap{display:flex;flex-direction:column;gap:10px}
  .faq-wrap .cat{
    font-family:var(--font-display);
    font-weight:700;
    font-size:14px;
    line-height:18px;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:var(--ink-muted);
    margin-top:32px;
    margin-bottom:4px;
  }
  .faq-wrap .cat:first-child{margin-top:0}
  .faq-wrap details{
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:14px;
    overflow:hidden;
  }
  .faq-wrap details[open]{background:var(--bg);border-color:var(--ink)}
  .faq-wrap summary{
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px 24px;
    list-style:none;
    font-family:var(--font-display);
    font-weight:600;
    font-size:17px;
    line-height:24px;
    letter-spacing:-0.2px;
    color:var(--ink);
  }
  .faq-wrap summary::-webkit-details-marker{display:none}
  .faq-wrap summary::after{
    content:'+';
    margin-left:auto;
    font-family:var(--font-display);
    font-weight:400;
    font-size:24px;
    line-height:1;
    color:var(--ink);
    flex-shrink:0;
  }
  .faq-wrap details[open] summary::after{content:'−'}
  .faq-wrap .ans{
    padding:0 24px 24px 24px;
    border-top:1px solid var(--hairline);
    padding-top:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .faq-wrap .ans p{
    font-family:var(--font-display);
    font-weight:400;
    font-size:15px;
    line-height:23px;
    color:var(--ink-lead);
  }
  .faq-wrap .ans p strong{font-weight:700;color:var(--ink)}

  /* ===== Footer (Zamesin-style: airy vertical rhythm, generous column gaps) ===== */
  footer.site{
    border-top:1px solid var(--hairline);
    padding:72px 0 64px;
    background:var(--bg);
  }
  footer.site .container{
    width:min(calc(100% - 64px), 1208px);
    margin:0 auto;
    padding:0;
  }
  footer.site .row{
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr 1fr;
    column-gap:72px;
    row-gap:40px;
  }
  @media (max-width:960px){footer.site .row{grid-template-columns:1fr 1fr;column-gap:48px;row-gap:32px}}
  @media (max-width:560px){footer.site .row{grid-template-columns:1fr;row-gap:28px}}
  footer.site .brand-col strong{
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    font-size:16px;
    line-height:22px;
    color:var(--ink);
    margin-bottom:18px;
  }
  footer.site .brand-col p{
    font-family:var(--font-display);
    font-weight:400;
    font-size:13px;
    line-height:22px;
    color:#8A8A8A;
  }
  footer.site h4{
    font-family:var(--font-display);
    font-weight:600;
    font-size:12px;
    line-height:16px;
    letter-spacing:0.6px;
    text-transform:uppercase;
    color:#8A8A8A;
    margin-bottom:22px;
  }
  footer.site ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:20px}
  footer.site a{
    font-family:var(--font-display);
    font-weight:400;
    font-size:14px;
    line-height:20px;
    color:#6B6B6B;
    text-decoration:none;
    transition:color 0.15s;
  }
  footer.site a:hover{color:var(--ink)}

  /* Mobile polish */
  @media (max-width:760px){
    section.hero{padding:32px 0 40px}
    .hero-container{padding:0 20px;gap:20px}
    h1.hero-h1{font-size:38px;line-height:42px;letter-spacing:-0.8px}
    .lead{font-size:17px;line-height:25.5px}
    .cta-primary{padding:16px 28px;font-size:15px}
    .trigger{font-size:13px;line-height:18.5px;padding:11px 16px 11px 12px}
    .fj{padding:22px 20px;min-height:0}
    .fj h3{font-size:19px;line-height:24px}
    .section{padding:56px 0 40px}
    .section-container{padding:0 20px}
    .section h2{font-size:34px;line-height:38px;letter-spacing:-0.7px;margin-bottom:16px}
    .section .lead-2{font-size:16px;line-height:24px;margin-bottom:32px}
    .rec-card,.skill-card{padding:24px 20px}
    .auto-card{padding:18px 20px;min-height:0}
  }

  /* ===== Lead modal ===== */
  .modal[hidden]{display:none}
  .modal{
    position:fixed;inset:0;z-index:1000;
    display:flex;align-items:center;justify-content:center;
    padding:24px;
    opacity:0;transition:opacity 0.18s ease-out;
  }
  .modal.is-open{opacity:1}
  .modal-backdrop{
    position:absolute;inset:0;
    background:rgba(14,14,14,0.42);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
  }
  .modal-card{
    position:relative;
    width:100%;max-width:640px;
    max-height:calc(100vh - 48px);
    overflow-y:auto;
    background:var(--bg);
    border:1px solid var(--hairline);
    border-radius:22px;
    padding:36px 40px 32px;
    box-shadow:0 24px 64px -12px rgba(14,14,14,0.28), 0 2px 8px rgba(14,14,14,0.06);
    transform:translateY(8px) scale(0.98);
    transition:transform 0.22s cubic-bezier(0.2,0.7,0.3,1);
  }
  .modal.is-open .modal-card{transform:none}
  .modal-close{
    position:absolute;top:18px;right:18px;
    width:36px;height:36px;
    display:flex;align-items:center;justify-content:center;
    border:0;background:rgba(14,14,14,0.05);
    border-radius:10px;
    color:var(--ink);
    cursor:pointer;
    transition:background 0.12s;
  }
  .modal-close:hover{background:rgba(14,14,14,0.10)}
  .modal-pill{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 14px 6px 12px;
    background:rgba(216,237,8,0.18);
    border-radius:999px;
    font-family:var(--font-display);
    font-weight:600;
    font-size:13px;
    color:var(--accent-ink);
    margin-bottom:22px;
  }
  .modal-pill-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:var(--accent-acid);
  }
  .modal-h{
    font-family:var(--font-display);
    font-weight:700;
    font-size:32px;
    line-height:1.15;
    letter-spacing:-0.6px;
    color:var(--ink-strong);
    margin-bottom:10px;
  }
  .modal-sub{
    font-family:var(--font-display);
    font-weight:400;
    font-size:15px;
    line-height:1.55;
    color:var(--ink-muted);
    margin-bottom:26px;
  }
  .lead-form{display:flex;flex-direction:column;gap:16px}
  .lead-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 16px;
  }
  .lead-field{display:flex;flex-direction:column;gap:6px}
  .lead-field .lbl{
    font-family:var(--font-display);
    font-weight:500;
    font-size:13px;
    color:var(--ink);
  }
  .lead-field .lbl em{color:var(--accent-acid);font-style:normal;font-weight:700}
  .lead-field input,
  .lead-field textarea{
    font-family:var(--font-display);
    font-weight:400;
    font-size:15px;
    line-height:1.4;
    padding:12px 14px;
    background:var(--surface-card);
    border:1px solid var(--hairline);
    border-radius:12px;
    color:var(--ink);
    transition:border-color 0.12s, background 0.12s;
    width:100%;
    outline:none;
  }
  .lead-field textarea{resize:vertical;min-height:96px}
  .lead-field input::placeholder,
  .lead-field textarea::placeholder{color:var(--ink-muted);opacity:0.7}
  .lead-field input:focus,
  .lead-field textarea:focus{
    border-color:var(--accent-acid);
    background:var(--bg);
  }
  .lead-field input.is-invalid,
  .lead-field textarea.is-invalid{
    border-color:#D22B2B;
    background:rgba(210,43,43,0.04);
  }
  .lead-err{
    font-family:var(--font-display);
    font-size:12px;
    line-height:1.35;
    color:#D22B2B;
    min-height:0;
  }
  .lead-err:empty{display:none}
  .lead-consent{
    display:flex;align-items:flex-start;gap:10px;
    font-family:var(--font-display);
    font-weight:400;
    font-size:13.5px;
    line-height:1.5;
    color:var(--ink-lead);
    padding:4px 0;
  }
  .lead-consent input{
    flex-shrink:0;
    width:18px;height:18px;
    margin-top:1px;
    accent-color:var(--accent-acid);
    cursor:pointer;
    outline:2px solid transparent;
    outline-offset:2px;
    border-radius:3px;
    transition:outline-color 0.12s;
  }
  .lead-consent.is-invalid input{outline-color:#D22B2B}
  .lead-consent.is-invalid span{color:#D22B2B}
  .lead-consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
  .lead-consent a:hover{color:var(--accent-ink)}
  .lead-err-consent{margin-top:-4px;padding-left:28px}
  .lead-submit{
    background:var(--accent-acid);
    color:var(--accent-ink);
    border:0;
    padding:18px 36px;
    border-radius:14px;
    font-family:var(--font-display);
    font-weight:700;
    font-size:16px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(14,14,14,0.10);
    transition:transform 0.12s, box-shadow 0.15s;
  }
  .lead-submit:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(14,14,14,0.14)}
  .lead-submit:disabled{opacity:0.7;cursor:default;transform:none}
  .lead-note{
    text-align:center;
    font-family:var(--font-display);
    font-weight:400;
    font-size:12.5px;
    color:var(--ink-muted);
    margin-top:2px;
  }
  @media (max-width:560px){
    .modal-card{padding:28px 22px 24px}
    .modal-h{font-size:26px}
    .lead-grid{grid-template-columns:1fr}
  }