:root{
    --violet:#7b5cf5;
    --violet-dark:#6845ee;
    --violet-soft:#efeaff;
    --ink:#0d0d12;
    --text:#2b2b33;
    --muted:#55556a;
    --line:#ecebf3;
    --card:#ffffff;
    --bg-soft:#f8f7fc;
    --radius:24px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.45;overflow-x:hidden}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1360px;margin:0 auto;padding:0 40px}

  /* ---------- Buttons ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 32px;border-radius:999px;font-weight:600;font-size:16px;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;cursor:pointer;border:0;white-space:nowrap}
  .btn:hover{transform:translateY(-1px)}
  .btn-primary{background:var(--violet);color:#fff;box-shadow:0 10px 24px -10px rgba(123,92,245,.7)}
  .btn-primary:hover{background:var(--violet-dark)}
  .btn-outline{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
  .btn-outline:hover{background:var(--ink);color:#fff}
  .btn-block{width:100%}

  /* ---------- Header ---------- */
  .hero-bg{background:
      radial-gradient(1200px 260px at 20% -60px, rgba(123,92,245,.55), transparent 70%),
      radial-gradient(900px 280px at 85% -40px, rgba(160,140,255,.45), transparent 70%),
      linear-gradient(180deg,#f4f2ff 0%,#f5f3ff 45%,#fcfbff 80%,#fff 100%);}
  header{position:relative;z-index:5}
  .nav{display:flex;align-items:center;justify-content:space-between;height:100px}
  .logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:22px;letter-spacing:-.02em;color:#fff}
  .menu{display:flex;gap:28px;font-size:14px;font-weight:500;color:var(--ink)}
  .menu a:hover{color:var(--violet)}
  .nav-cta{display:inline-flex;align-items:center;gap:14px;height:48px;padding:0 6px 0 24px;border-radius:999px;border:1.5px solid rgba(255,255,255,.9);color:var(--violet);font-weight:600;font-size:15px;background:rgba(255,255,255,.25);backdrop-filter:blur(6px)}
  .nav-cta .arr{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center}
  .nav-cta .arr svg{width:16px;height:16px}
  .burger{display:none}

  /* ---------- Hero ---------- */
  .hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:center;padding:30px 0 40px}
  .eyebrow{font-size:12px;letter-spacing:.14em;font-weight:600;color:var(--violet);text-transform:uppercase;margin-bottom:24px}
  h1{font-size:clamp(40px,4.7vw,70px);line-height:.98;letter-spacing:-.035em;color:var(--ink);font-weight:600}
  .lead{margin-top:28px;font-size:17px;max-width:500px;color:var(--text)}
  .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
  .chip{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:var(--violet-soft);border:1px solid #ddd3ff;color:var(--violet);font-weight:600;font-size:15px}
  .hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:48px}
  .hero-art{position:relative;margin-right:-40px}
  .hero-art img{width:100%;height:auto;display:block}

  /* ---------- Sections ---------- */
  section{padding:60px 0}
  .sec-head{text-align:center;margin-bottom:44px}
  .sec-icon{display:block;width:36px;height:25px;margin:0 auto 22px;background:url(/webinar-productivity/icon-28e32cae6001.svg) center/contain no-repeat}
  h2{font-size:clamp(34px,3.8vw,54px);letter-spacing:-.03em;line-height:1.05;color:var(--ink);font-weight:600}

  .program{position:relative}
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 40px -26px rgba(40,30,90,.25)}
  .p-card{padding:30px 26px 34px}
  .p-num{font-style:italic;color:var(--violet);font-size:15px;margin-bottom:18px}
  .p-card h3{font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-bottom:12px}
  .p-card p{font-size:15px;color:var(--muted)}
  .play-art{position:absolute;right:-30px;bottom:-190px;width:230px;pointer-events:none;z-index:0}
  .program .grid-4{position:relative;z-index:1}

  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .s-card{display:flex;gap:26px;align-items:center;padding:24px 28px}
  .s-photo{flex:0 0 150px;width:150px;height:150px;border-radius:40px;overflow:hidden;background:#cfc3f7}
  .s-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
  .s-role{font-style:italic;color:var(--violet);font-size:16px;margin-bottom:6px}
  .s-card h3{font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-bottom:8px}
  .s-card p{font-size:17px;color:var(--text)}

  .a-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:28px;padding:30px 34px 34px;display:flex;flex-direction:column}
  .tag{align-self:flex-start;height:34px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1.5px solid var(--violet);color:var(--violet);font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:.02em;background:#fff}
  .a-card h3{margin:26px 0 36px;font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
  .a-card ul{list-style:none;display:grid;gap:12px;margin-bottom:28px;flex:1}
  .a-card li{position:relative;padding-left:24px;font-size:15px}
  .a-card li::before{content:"✦";position:absolute;left:0;top:0;color:var(--ink);font-size:13px}

  /* ---------- Registration ---------- */
  .reg{display:grid;grid-template-columns:.75fr 1.25fr;gap:40px;align-items:start}
  .reg-left .plus{width:28px;margin-bottom:14px}
  .reg-left h2{font-size:clamp(40px,4.3vw,62px)}
  .reg-left p{margin-top:20px;font-size:16px;max-width:380px}
  .hand{width:300px;margin-top:40px}
  .reg-card{padding:36px 30px 30px}
  .reg-card .eyebrow{margin-bottom:10px;font-size:11px}
  .reg-card h3{font-size:24px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-bottom:22px}
  .tp-holder{min-height:420px}
  .tp-note{margin-top:14px;text-align:center;font-size:12px;color:var(--muted)}

  /* ---------- CTA ---------- */
  .cta{position:relative;text-align:center;border-radius:36px;padding:70px 40px;max-width:1180px;margin:0 auto;
       background:
         linear-gradient(#fff,#fff) padding-box;
       box-shadow:0 30px 60px -40px rgba(40,30,90,.3);border:1px solid var(--line);overflow:hidden}
  .cta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;opacity:.5;
       -webkit-mask-image:radial-gradient(ellipse at center,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at center,#000 10%,transparent 70%)}
  .cta>*{position:relative}
  .cta h2{max-width:760px;margin:0 auto}
  .cta p{max-width:620px;margin:22px auto 0;font-size:16px}
  .cta .btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:30px}
  .pointer{position:absolute;display:flex;align-items:flex-start;gap:4px}
  .pointer span{padding:6px 14px;border-radius:999px;color:#fff;font-size:13px;font-weight:500}
  .pointer svg{width:22px;height:22px}
  .p1{left:7%;top:42%}
  .p1 span{background:#5b55f2}
  .p1 svg{color:#5b55f2;transform:translate(70px,30px) rotate(180deg)}
  .p2{right:6%;top:62%;flex-direction:row-reverse}
  .p2 span{background:#ff4fae;margin-top:22px}
  .p2 svg{color:#ff4fae}

  /* ---------- Mobile menu ---------- */
  .mobile-menu{display:none}

  /* ---------- Responsive ---------- */
  @media (max-width:1100px){
    .grid-4{grid-template-columns:repeat(2,1fr)}
    .play-art{display:none}
  }
  @media (max-width:860px){
    .wrap{padding:0 20px}
    .nav{height:76px}
    .menu,.nav-cta .txt{display:none}
    .nav-cta{padding:0;border:0;background:var(--violet);width:52px;height:52px;justify-content:center}
    .nav-cta .arr{background:transparent;color:#fff}
    .nav-right{display:flex;gap:10px}
    .burger{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:0;cursor:pointer}
    .burger svg{width:22px;height:22px}
    .logo{color:var(--ink)}
    .mobile-menu.open{display:flex;flex-direction:column;gap:18px;position:absolute;left:20px;right:20px;top:76px;background:#fff;border-radius:20px;padding:24px;box-shadow:0 20px 40px -20px rgba(40,30,90,.35);font-weight:500;color:var(--ink);z-index:10}
    .hero{grid-template-columns:1fr;padding:16px 0 20px}
    .eyebrow{font-size:11px;margin-bottom:14px}
    h1{font-size:38px;line-height:1.03}
    .lead{font-size:16px;margin-top:18px}
    .chips{margin-top:22px}
    .hero-art{margin:10px -20px 0}
    .hero-actions{flex-direction:column;margin-top:10px;order:3}
    .hero-actions .btn{width:100%;height:58px;font-size:17px}
    section{padding:44px 0}
    .sec-head{margin-bottom:28px}
    h2{font-size:30px}
    .grid-4,.grid-2{grid-template-columns:1fr}
    .p-card{padding:22px 20px 24px}
    .p-card h3{font-size:19px}
    .s-card{gap:18px;padding:18px;align-items:flex-start}
    .s-photo{flex-basis:100px;width:100px;height:100px;border-radius:28px}
    .s-card h3{font-size:20px}
    .s-role{font-size:14px}
    .s-card p{font-size:15px}
    .a-card{padding:24px 20px}
    .a-card h3{margin:20px 0 22px;font-size:21px}
    .reg{grid-template-columns:1fr;gap:26px}
    .reg-left h2{font-size:36px}
    .hand{display:none}
    .reg-card{padding:26px 18px 22px}
    .cta{padding:110px 20px 100px;border-radius:28px}
    .cta h2{font-size:32px}
    .cta .btns .btn{width:100%}
    .p1{left:16px;top:28px}
    .p1 svg{display:none}
    .p2{right:16px;top:auto;bottom:24px}
    .p2 span{margin-top:0}
    .p2 svg{display:none}
  }


  .mobile-actions{display:none}
  @media (max-width:860px){ .desktop-actions{display:none} .mobile-actions{display:flex} }

  .skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:#0d0d12;padding:10px 16px;border-radius:12px}
  .skip:focus{left:8px}
  .timepad-frame{display:block;width:100%;height:640px;border:0;background:#fff}
  .tp-fallback{display:block;margin-top:10px;text-align:center;font-size:13px;color:var(--violet);text-decoration:underline}

  .logo img{display:block;width:150px;height:auto}
  @media (max-width:700px){.logo img{filter:brightness(0)}}

  /* ---------- Footer (как на главной) ---------- */
  .site-footer{background:#fff;color:#000;margin-top:80px;border-top:1px solid #ececec}
  .site-footer .wrap{display:block;height:auto;padding-top:56px;padding-bottom:40px}
  .sf-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
  .sf-logo{display:block;width:150px;height:auto;margin-bottom:18px}
  .sf-brand p{font-size:16px;line-height:1.45;color:#000;max-width:300px;margin:0}
  .sf-title,.sf-follow{font-size:24px;line-height:1.2;font-weight:500;color:#000;margin:0 0 16px}
  .sf-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
  .sf-col a{font-size:14px;line-height:21px;color:#000;text-decoration:none}
  .sf-col a:hover{text-decoration:underline}
  .sf-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:48px}
  .sf-icons{display:flex;gap:16px}
  .sf-icons a{color:#000;display:inline-flex}
  .sf-icons svg{width:34px;height:34px}
  .sf-legal{text-align:right}
  .sf-legal p{font-size:16px;line-height:1.4;color:#8f8f8f;margin:0 0 6px}
  .sf-legal a{color:#8f8f8f;text-decoration:underline}
  @media (max-width:900px){.sf-top{grid-template-columns:1fr 1fr}.sf-brand{grid-column:1/-1}}
  @media (max-width:700px){.site-footer .wrap{padding:40px 20px 28px}.sf-top{grid-template-columns:1fr;gap:28px}.sf-title,.sf-follow{font-size:20px}.sf-bottom{flex-direction:column;align-items:flex-start}.sf-legal{text-align:left}.sf-legal p{font-size:14px}}

  .sf-logo{filter:brightness(0)}

  .hand,.play-art{height:auto}
  .nav .logo img{filter:brightness(0)}

  /* hero bigger on desktop */
  @media (min-width:1101px){
    body{overflow-x:clip}
    .hero-art img{width:130%;max-width:none;margin-left:-20%;transform:translateY(70px)}
  }