:root{ color-scheme: dark; }

    .nl{
      --bg0:#02020a;
      --bg1:#050515;
      --bg2:#0b0b23;

      --panel: rgba(255,255,255,.06);
      --panel2: rgba(255,255,255,.04);
      --stroke: rgba(255,255,255,.11);

      --text:#eef1ff;
      --muted: rgba(238,241,255,.74);
      --muted2: rgba(238,241,255,.56);

      --a1:#A78BFA;
      --a2:#22D3EE;

      --r: 18px;
      --shadow: 0 24px 90px rgba(0,0,0,.66);
      --shadow2: 0 14px 48px rgba(0,0,0,.40);

      font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
      color: var(--text);
      background:
        radial-gradient(1200px 820px at 18% -10%, rgba(167,139,250,.26), transparent 62%),
        radial-gradient(1100px 760px at 88% 8%, rgba(34,211,238,.18), transparent 62%),
        radial-gradient(1100px 780px at 55% 115%, rgba(167,139,250,.12), transparent 58%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 52%, var(--bg2));
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
    }
    body{
        min-width: 360px;
    }
    .nl *{ box-sizing:border-box; }

    .wrap{
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    /* ===== PARALLAX BG (transform only) ===== */
    .bg{
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      background: radial-gradient(900px 640px at 30% 10%, rgba(255,255,255,.035), transparent 60%);
    }
    .layer{
      position:absolute;
      inset:-12%;
      will-change: transform;
      transform: translate3d(0,0,0);
    }

    .blobs{ opacity:.95; }
    .blob{
      position:absolute;
      width: 640px;
      height: 640px;
      border-radius: 48% 52% 56% 44% / 52% 46% 54% 48%;
      filter: saturate(1.12);
      mix-blend-mode: screen;
      opacity: .86;
    }
    .b1{
      left: -150px; top: 20px;
      background:
        radial-gradient(circle at 30% 30%, rgba(167,139,250,.55), transparent 62%),
        radial-gradient(circle at 70% 70%, rgba(34,211,238,.35), transparent 64%);
    }
    .b2{
      right: -210px; top: 120px;
      width: 760px; height: 760px;
      background:
        radial-gradient(circle at 35% 35%, rgba(34,211,238,.48), transparent 62%),
        radial-gradient(circle at 75% 70%, rgba(167,139,250,.30), transparent 64%);
      opacity: .74;
    }
    .b3{
      left: 28%; bottom: -320px;
      width: 860px; height: 860px;
      background:
        radial-gradient(circle at 35% 35%, rgba(167,139,250,.34), transparent 62%),
        radial-gradient(circle at 70% 70%, rgba(34,211,238,.22), transparent 66%);
      opacity: .60;
    }

    .grid{
      opacity: .085;
      mix-blend-mode: screen;
      background:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(circle at 26% 16%, rgba(0,0,0,1) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 78%);
    }
    .scan{
      opacity:.55;
      mix-blend-mode: screen;
      background: linear-gradient(180deg, transparent 0%, rgba(34,211,238,.10) 50%, transparent 100%);
      inset:-30% 0;
    }

    .hud{
      opacity:.45;
      mix-blend-mode: screen;
      inset:-8%;
    }
    .hud svg{ width: 120%; height: 120%; }

    .noise{
      opacity:.26;
      mix-blend-mode: overlay;
      background:
        radial-gradient(1.5px 1.5px at 12% 30%, rgba(255,255,255,.14) 45%, transparent 47%),
        radial-gradient(1.2px 1.2px at 62% 18%, rgba(255,255,255,.10) 45%, transparent 47%),
        radial-gradient(1.3px 1.3px at 78% 64%, rgba(255,255,255,.10) 45%, transparent 47%),
        radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,.08) 45%, transparent 47%);
      filter: blur(.2px);
      inset:0;
    }

    /* ===== NAV ===== */
    .topbar{
      padding: 14px 0 0;
      position: sticky;
      top: 0;
      z-index: 10;
      backdrop-filter: blur(12px);
      background: linear-gradient(180deg, rgba(2,2,10,.84), rgba(2,2,10,.22));
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      padding: 12px 0 14px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      text-decoration:none; color: var(--text);
    }
    .logo{
      width: 42px; height: 42px; border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(22px 22px at 28% 25%, rgba(167,139,250,.35), transparent 62%),
        radial-gradient(22px 22px at 75% 75%, rgba(34,211,238,.26), transparent 62%),
        rgba(255,255,255,.03);
      box-shadow: 0 16px 50px rgba(0,0,0,.45);
      display:grid; place-items:center;
      font-weight: 900;
      letter-spacing: .3px;
    }
    .links{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
    .links a{
      color: rgba(238,241,255,.72);
      text-decoration:none;
      font-size: 13px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.02);
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }
    .links a:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.14);
    }
    .cta{
      display:inline-flex; align-items:center; gap:10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      padding: 10px 14px;
      background: rgba(255,255,255,.03);
      color: rgba(238,241,255,.88);
      text-decoration:none;
      font-weight: 900;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      white-space:nowrap;
    }
    .cta:hover{ transform: translateY(-1px); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.20); }
    .cta i{ width:9px; height:9px; border-radius:99px; background: var(--a2); box-shadow: 0 0 24px rgba(34,211,238,.35); display:inline-block; }

    /* ===== TYPO / SECTIONS ===== */
    .section{ padding: 64px 0; }
    .section.compact{ padding: 44px 0; }

    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      margin-bottom: 14px;
      padding: 9px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.02);
      color: rgba(238,241,255,.82);
      font-weight: 700;
      font-size: 13px;
    }
    .dot{ width:8px; height:8px; border-radius:99px; background: var(--a1); box-shadow: 0 0 18px rgba(167,139,250,.28); }
    .dot.alt{ background: var(--a2); box-shadow: 0 0 18px rgba(34,211,238,.28); }

    .h1{
      margin: 0;
      font-size: clamp(56px, 6.8vw, 98px);
      font-weight: 900;
      letter-spacing: .1px;
      line-height: 1.0;
    }
    .h1 .grad{
      background: linear-gradient(90deg, var(--a1), rgba(238,241,255,.96), var(--a2));
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
      text-shadow: 0 0 36px rgba(167,139,250,.12);
    }
    .sub{
      margin: 18px 0 0;
      max-width: 980px;
      color: var(--muted);
      font-size: clamp(18px, 1.85vw, 23px);
      line-height: 1.65;
    }

    .gridHero{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 16px;
      margin-top: 22px;
      align-items: start;
    }

    .panel{
      background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 22px;
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .panel::before{
      content:"";
      position:absolute;
      inset:-170px -170px auto auto;
      width: 560px; height: 560px;
      background:
        radial-gradient(circle at 28% 35%, rgba(167,139,250,.20), transparent 64%),
        radial-gradient(circle at 70% 70%, rgba(34,211,238,.14), transparent 66%);
      filter: blur(10px);
      opacity: .95;
      pointer-events:none;
    }
    .panel .inner{ position:relative; z-index:1; padding: 18px; }

    .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding: 13px 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      color: rgba(238,241,255,.92);
      font-weight: 900;
      text-decoration:none;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }
    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
    .btn.primary{
      background:
        radial-gradient(80% 140% at 20% 10%, rgba(167,139,250,.28), transparent 70%),
        radial-gradient(80% 140% at 80% 90%, rgba(34,211,238,.20), transparent 70%),
        rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.18);
    }

    .h2{
      margin: 0;
      font-size: clamp(34px, 3.9vw, 56px);
      font-weight: 900;
      line-height: 1.06;
    }
    .lead{
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.6;
      max-width: 960px;
    }

    .grid2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.11);
      border-radius: var(--r);
      box-shadow: var(--shadow2);
      position:relative;
      overflow:hidden;
    }
    .card .inner{ padding: 18px; }
    .card h3{ margin: 10px 0 8px; font-size: 22px; font-weight: 900; }
    .card p{ margin:0; color: rgba(238,241,255,.74); font-size: 16.5px; line-height: 1.55; }

    /* Program list */
    .prog{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
    .item{
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.02);
      border-radius: 16px;
      padding: 14px;
      display:flex;
      gap: 12px;
      align-items:flex-start;
    }
    .ico{
      width: 36px; height: 36px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      display:grid;
      place-items:center;
      flex: 0 0 36px;
    }
    .item b{ display:block; font-weight: 900; font-size: 16px; }
    .item span{ display:block; color: rgba(238,241,255,.70); font-size: 14px; margin-top: 4px; line-height: 1.4; }

    /* Pricing */
    .pricingGrid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
    .plan{
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.11);
      border-radius: var(--r);
      box-shadow: var(--shadow2);
      overflow:hidden;
      position:relative;
      min-height: 500px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .plan .top{ padding: 18px; }
    .row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin: 8px 0 10px; }
    .name{ margin:0; font-size: 16px; font-weight: 900; letter-spacing: .9px; text-transform: uppercase; }
    .badge{
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      color: rgba(238,241,255,.86);
      font-weight: 900;
      white-space:nowrap;
    }
    .price{ display:flex; align-items:flex-end; gap: 10px; flex-wrap:wrap; margin: 12px 0 6px; }
    .now{ font-size: 36px; font-weight: 950; letter-spacing:.2px; line-height:1; color: rgba(167,139,250,.98); }
    .plan.vip .now{ color: rgba(34,211,238,.95); }
    .old{
      font-size: 14px;
      color: rgba(238,241,255,.46);
      text-decoration: line-through;
      text-decoration-thickness: 2px;
      text-decoration-color: rgba(238,241,255,.35);
      margin-bottom: 6px;
    }
    .note{ margin: 0 0 10px; color: rgba(238,241,255,.55); font-size: 13px; }
    .monthly{
      display:inline-flex;
      gap: 8px;
      align-items:center;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.02);
      color: rgba(238,241,255,.74);
      font-size: 13px;
      margin-bottom: 10px;
    }
    .monthly strong{ color: rgba(238,241,255,.92); font-weight: 900; }
    .list{
      list-style:none;
      padding:0;
      margin: 10px 0 0;
      display:flex;
      flex-direction:column;
      gap: 10px;
      color: rgba(238,241,255,.76);
      font-size: 13.5px;
      line-height:1.25;
    }
    .list li{ display:flex; gap: 10px; align-items:flex-start; }
    .bolt{
      width:18px; height:18px; flex: 0 0 18px;
      border-radius:6px;
      display:grid;
      place-items:center;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.12);
      font-size: 12px;
      margin-top: 1px;
    }
    .plan .ctaRow{ padding: 0 18px 18px; }
    .btnFull{ width:100%; }

    /* ===== Speaker ===== */
    .nl-speaker{
      display:flex;
      gap: 16px;
      align-items:flex-start;
    }
    .nl-speakerAvatar{
      width: 76px;
      height: 76px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(44px 44px at 28% 25%, rgba(167,139,250,.35), transparent 62%),
        radial-gradient(44px 44px at 75% 75%, rgba(34,211,238,.26), transparent 62%),
        rgba(255,255,255,.03);
      box-shadow: 0 16px 50px rgba(0,0,0,.45);
      display:grid;
      place-items:center;
      flex: 0 0 76px;
    }
    .nl-speakerInitials{
      font-weight: 900;
      letter-spacing: .4px;
      color: rgba(238,241,255,.92);
    }
    .nl-speakerName{
      font-size: 22px;
      font-weight: 900;
      letter-spacing: .2px;
    }
    .nl-speakerRole{
      margin-top: 8px;
      color: rgba(238,241,255,.74);
      font-size: 16px;
      line-height: 1.55;
      max-width: 920px;
    }
    .nl-speakerTags{
      margin-top: 12px;
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
    }
    .nl-tag{
      font-size: 12.5px;
      font-weight: 900;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.02);
      color: rgba(238,241,255,.86);
    }

    /* ===== Reviews: header row ===== */
    .nl-revHead{
      margin-top: 14px;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 12px;
      flex-wrap:wrap;
    }
    .nl-revActions{ display:flex; gap:10px; flex-wrap:wrap; }

    /* ===== Text reviews carousel ===== */
    .nl-carousel{
      margin-top: 16px;
      border: 1px solid rgba(255,255,255,.09);
      background: rgba(255,255,255,.02);
      border-radius: 22px;
      padding: 12px;
      box-shadow: var(--shadow2);
      display:grid;
      grid-template-columns: 42px 1fr 42px;
      gap: 10px;
      align-items:stretch;
    }

    .nl-arrow{
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      color: rgba(238,241,255,.86);
      font-weight: 900;
      font-size: 22px;
      cursor:pointer;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
    }
    .nl-arrow:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.20);
    }

    .nl-track{
      display:flex;
      gap: 12px;
      overflow:auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding: 2px;
      -webkit-overflow-scrolling: touch;
    }
    .nl-track::-webkit-scrollbar{ height: 10px; }
    .nl-track::-webkit-scrollbar-thumb{
      background: rgba(255,255,255,.10);
      border-radius: 999px;
    }
    .nl-track::-webkit-scrollbar-track{
      background: rgba(255,255,255,.04);
      border-radius: 999px;
    }

    .nl-revCard{
      scroll-snap-align: start;
      min-width: min(720px, calc(100vw - 170px));
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      border-radius: 18px;
      padding: 16px 16px 14px;
      position:relative;
      overflow:hidden;
      height: 270px;
      display: flex;
      flex-direction: column;
    }
    .nl-revCard::before{
      content:"";
      position:absolute;
      inset:-140px -140px auto auto;
      width: 420px; height: 420px;
      background:
        radial-gradient(circle at 30% 30%, rgba(167,139,250,.14), transparent 66%),
        radial-gradient(circle at 70% 70%, rgba(34,211,238,.10), transparent 68%);
      filter: blur(14px);
      opacity:.92;
      pointer-events:none;
    }
    .nl-revTop{
      position:relative;
      z-index:1;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 10px;
      margin-bottom: 10px;
      flex: 0 0 auto;
    }
    .nl-revName{
      font-weight: 900;
      letter-spacing:.2px;
      font-size: 16px;
      color: rgba(238,241,255,.92);
    }
    .nl-revMeta{
      font-size: 12.5px;
      color: rgba(238,241,255,.52);
      white-space:nowrap;
      display: none;
    }
    .nl-revText{
      position:relative;
      z-index:1;
      color: rgba(238,241,255,.76);
      font-size: 15.5px;
      line-height: 1.6;
      flex: 1 1 auto;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      padding-right: 6px;
    }

    .nl-revText::-webkit-scrollbar{ width: 10px; }
    .nl-revText::-webkit-scrollbar-thumb{
      background: rgba(255,255,255,.10);
      border-radius: 999px;
    }
    .nl-revText::-webkit-scrollbar-track{
      background: rgba(255,255,255,.04);
      border-radius: 999px;
    }

    .seats{
      margin: 45px auto 8px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.02);
      color: rgba(238,241,255,.76);
      font-size: 13px;
      font-weight: 700;
      width: 100%;
      text-align: center;
      justify-content: center;
    }
    .seatsNum{
      color: rgba(34,211,238,.92);
      font-weight: 900;
    }
    .plan.vip .seatsNum{
      color: rgba(167,139,250,.98);
    }

    /* Reveal */
    .reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.in{ opacity:1; transform: translateY(0); }

    @media (max-width: 1060px){
      .gridHero{ grid-template-columns: 1fr; }
      .pricingGrid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 720px){
      .wrap{ width:min(1180px, calc(100% - 26px)); }
      .grid2{ grid-template-columns: 1fr; }
      .prog{ grid-template-columns: 1fr; }
      .pricingGrid{ grid-template-columns: 1fr; }
      .nl-carousel{ grid-template-columns: 38px 1fr 38px; }
      .nl-revCard{ min-width: calc(100vw - 150px); }
      .nl-speaker{ align-items:flex-start; }
    }
    @media (max-width: 600px){
        .links{
            display: none;
        }
    }