:root{
    --ink: #1a1a1f;
    --ink-2:#2a2a32;
    --paper:#faf6ee;
    --paper-2:#f3ecdd;
    --paper-3:#ebe1cb;
    --rule:#d8cbb0;
    --gold:#c4a875;
    --gold-deep:#a08654;
    --gold-soft:#e6d5b0;
    --accent:#1f3d3a;     /* deep teal/green - traditional Islamic accent */
    --accent-2:#3d5d4a;
    --warm: #b9542a;       /* warm clay for highlights */
    --mute:#6b6557;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{ background:#0d0c0a; height:100%; }
  body{ font-family:"Tajawal", system-ui, sans-serif; }

  deck-stage > section{
    width:1920px; height:1080px;
    background:var(--paper);
    color:var(--ink);
    overflow:hidden;
    position:relative;
    font-feature-settings:"ss01","kern";
  }

  /* shared chrome */
  .chrome{
    position:absolute; inset:0;
    pointer-events:none;
  }
  .chrome .corner-tl, .chrome .corner-br{
    position:absolute; width:120px; height:120px;
    border:1px solid var(--rule);
  }
  .chrome .corner-tl{ top:48px; right:48px; border-left:none; border-bottom:none;}
  .chrome .corner-br{ bottom:48px; left:48px; border-right:none; border-top:none;}

  .slide-meta{
    position:absolute; bottom:48px; right:64px;
    display:flex; align-items:center; gap:18px;
    font-family:"JetBrains Mono", monospace;
    font-size:18px; color:var(--mute);
    letter-spacing:.08em;
  }
  .slide-meta .num{ color:var(--ink); font-weight:500;}
  .slide-meta .dot{ width:6px; height:6px; background:var(--gold); border-radius:50%;}

  .slide-brand{
    position:absolute; top:56px; left:64px;
    display:flex; align-items:center; gap:14px;
  }
  .slide-brand img{ height:44px; opacity:.85;}
  .slide-brand span{
    font-family:"Amiri", serif; font-size:28px; color:var(--ink);
    font-weight:700;
  }

  .eyebrow{
    font-family:"JetBrains Mono", monospace;
    font-size:18px; letter-spacing:.18em;
    color:var(--gold-deep);
    display:flex; align-items:center; gap:14px;
  }
  .eyebrow::before{ content:""; width:48px; height:1px; background:var(--gold-deep);}

  h1,h2,h3,h4{ font-family:"Tajawal", sans-serif; font-weight:800; letter-spacing:-.01em; }
  .display{ font-family:"Amiri", serif; font-weight:700; }

  /* ===== SLIDE 1 — COVER ===== */
  .s1{
    background:
      radial-gradient(1200px 800px at 20% 20%, rgba(196,168,117,.18), transparent 60%),
      radial-gradient(900px 600px at 90% 80%, rgba(31,61,58,.12), transparent 60%),
      var(--paper);
  }
  .s1-grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(to right, rgba(160,134,84,.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(160,134,84,.06) 1px, transparent 1px);
    background-size: 80px 80px;
  }
  .s1-content{
    position:absolute; inset:0;
    display:grid; grid-template-columns: 1fr 1.1fr;
    padding:120px 140px;
  }
  .s1-left{
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .s1-year{
    font-family:"Amiri", serif;
    font-size:300px;
    font-weight:700;
    line-height:1;
    color:var(--ink);
    letter-spacing:-.04em;
    position:relative;
    margin-top:32px;
  }
  .s1-year .accent{
    color:var(--gold-deep);
    -webkit-text-stroke:2px var(--gold-deep);
    color:transparent;
  }
  .s1-headline{
    font-family:"Amiri", serif;
    font-size:160px;
    font-weight:700;
    line-height:1.1;
    color:var(--ink);
    letter-spacing:-.02em;
    margin-top:32px;
    white-space:nowrap;
  }
  .s1-headline .accent{
    color:var(--gold-deep);
    font-style:italic;
  }
  .s1-rule{
    width:100%; height:1px; background:var(--ink); margin:20px 0;
  }
  .s1-tags{
    display:flex; gap:24px;
    font-family:"JetBrains Mono", monospace;
    font-size:20px; color:var(--mute); letter-spacing:.1em;
  }
  .s1-tags span{ display:flex; align-items:center; gap:8px; }
  .s1-tags .pip{ width:6px; height:6px; background:var(--gold); border-radius:50%;}

  .s1-right{
    display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
    gap:48px;
    text-align:right;
  }
  .s1-logo{
    width:280px; opacity:.95;
  }
  .s1-title{
    font-family:"Amiri", serif;
    font-size:140px; line-height:1.2;
    color:var(--ink); font-weight:700;
  }
  .s1-sub{
    font-size:42px; color:var(--mute); font-weight:400;
  }
  .s1-old{
    font-size:28px; color:var(--gold-deep); font-weight:500;
    padding:8px 18px; border:1px solid var(--gold);
    border-radius:999px;
    align-self:flex-end;
  }
  .s1-stamp{
    position:absolute; bottom:120px; left:140px;
    display:flex; align-items:center; gap:20px;
    font-family:"JetBrains Mono", monospace; font-size:18px; line-height:1.6; color:var(--mute);
  }
  .s1-stamp .seal{
    width:90px; height:90px; border-radius:50%;
    border:1px dashed var(--gold-deep);
    display:flex; align-items:center; justify-content:center;
    font-family:"Amiri", serif; font-size:30px; color:var(--gold-deep);
  }

  /* ===== SLIDE 2 — YouTube stats ===== */
  .s2{ background:#0e1413; color:#e9e2cf; }
  .s2 .slide-brand span{ color:#e9e2cf;}
  .s2 .chrome .corner-tl, .s2 .chrome .corner-br{ border-color: rgba(196,168,117,.25);}
  .s2 .slide-meta{ color:#8a8470;}
  .s2 .slide-meta .num{ color:#e9e2cf;}
  .s2-head{
    position:absolute; top:160px; right:120px; left:120px;
    display:flex; justify-content:space-between; align-items:flex-end;
  }
  .s2-head h2{ font-size:72px; line-height:1.2; font-family:"Amiri", serif; color:#f3ecdd; white-space:nowrap;}
  .s2-head .eyebrow{ color:var(--gold);}
  .s2-head .eyebrow::before{ background:var(--gold);}
  .s2-yt{
    display:flex; align-items:center; gap:14px;
    font-family:"JetBrains Mono", monospace; font-size:20px; color:#8a8470;
  }
  .s2-yt .yt-icon{
    width:54px; height:38px; background:#ff0033; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
  }
  .s2-yt .yt-icon::after{
    content:""; width:0; height:0;
    border-left:14px solid white; border-top:9px solid transparent; border-bottom:9px solid transparent;
    margin-left:3px;
  }

  .s2-grid{
    position:absolute; top:340px; right:120px; left:120px;
    display:grid; grid-template-columns: repeat(4, 1fr);
    gap:32px;
  }
  .s2-stat{
    border:1px solid rgba(196,168,117,.2);
    background: linear-gradient(160deg, rgba(196,168,117,.08), rgba(196,168,117,.02));
    padding:40px 36px;
    height:380px;
    display:flex; flex-direction:column; justify-content:space-between;
    position:relative; overflow:hidden;
  }
  .s2-stat .label{
    font-size:26px; color:#a8a18d; font-weight:500;
  }
  .s2-stat .value{
    font-family:"Amiri", serif;
    font-size:96px; line-height:1;
    color:#f3ecdd; font-weight:700;
  }
  .s2-stat .value .unit{ font-family:"Tajawal"; font-size:36px; font-weight:500; color:var(--gold); margin-right:8px;}
  .s2-stat .sub{ font-size:22px; color:#8a8470;}
  .s2-stat.highlight{
    background: linear-gradient(160deg, rgba(196,168,117,.25), rgba(196,168,117,.05));
    border-color: var(--gold);
  }
  .s2-stat .badge{
    position:absolute; top:24px; left:24px;
    font-family:"JetBrains Mono",monospace; font-size:14px; color:var(--gold);
    letter-spacing:.1em; padding:4px 10px; border:1px solid rgba(196,168,117,.3); border-radius:999px;
  }
  .s2-stat .arrow{
    color:var(--gold); font-size:28px; margin-left:8px;
  }
  .s2-bars{
    position:absolute; bottom:-40px; left:-20px; right:-20px; height:140px;
    display:flex; align-items:flex-end; gap:6px; opacity:.4;
  }
  .s2-bars div{ flex:1; background:linear-gradient(to top, var(--gold), transparent);}

  .s2-foot{
    position:absolute; bottom:140px; right:120px; left:120px;
    display:flex; justify-content:space-between; align-items:center;
    border-top:1px solid rgba(196,168,117,.15);
    padding-top:32px;
  }
  .s2-foot .lbl{
    font-family:"JetBrains Mono", monospace; font-size:18px; color:#8a8470; letter-spacing:.1em;
  }
  .s2-foot .countries{
    display:flex; gap:36px;
  }
  .s2-foot .country{
    display:flex; align-items:center; gap:10px;
    font-size:22px; color:#e9e2cf;
  }
  .s2-foot .country .pct{ color:var(--gold); font-family:"JetBrains Mono", monospace; font-size:18px;}

  /* ===== SLIDE 3 — Materials uploaded ===== */
  .s3-head{ position:absolute; top:160px; right:120px;}
  .s3-head h2{ font-size:84px; font-family:"Amiri",serif; line-height:1;}
  .s3-head .sub{ font-size:28px; color:var(--mute); margin-top:16px;}

  .s3-pace{
    position:absolute; top:160px; left:120px;
    display:flex; gap:24px;
  }
  .s3-pace .card{
    background:var(--ink); color:var(--paper);
    padding:24px 32px; min-width:200px;
    border-radius:4px;
  }
  .s3-pace .card.alt{ background:var(--gold); color:var(--ink);}
  .s3-pace .lbl{ font-size:18px; opacity:.7; font-family:"JetBrains Mono", monospace; letter-spacing:.1em;}
  .s3-pace .num{ font-family:"Amiri",serif; font-size:64px; line-height:1;}
  .s3-pace .unit{ font-size:22px; opacity:.8;}

  .s3-chart{
    position:absolute; top:380px; right:120px; left:120px; bottom:200px;
    display:grid; grid-template-columns: repeat(5, 1fr);
    gap:32px;
    border-top:1px solid var(--rule);
    padding-top:48px;
  }
  .s3-col{
    display:flex; flex-direction:column; justify-content:flex-end;
    position:relative;
    height:100%;
  }
  .s3-col .year{
    position:absolute; top:0; right:0;
    font-family:"JetBrains Mono", monospace; font-size:22px; color:var(--mute);
    letter-spacing:.1em;
  }

  .s3-col .total-lbl{
    position:absolute; top:96px; right:0;
    font-size:18px; color:var(--mute);
  }
  .s3-bar{
    position:relative; width:100%;
    background:var(--paper-3);
    margin-top:auto;
    border-top:2px solid var(--ink);
  }
  .s3-bar .fill{
    background:linear-gradient(to top, var(--gold-deep), var(--gold));
    width:100%;
    position:relative;
  }
  .s3-bar .fill .v{
    position:absolute; top:-44px; right:50%; transform:translateX(50%);
    font-family:"Amiri",serif; font-size:32px; color:var(--ink); white-space:nowrap;
  }
  .s3-bar .lab{
    position:absolute; bottom:-36px; right:0;
    font-size:18px; color:var(--mute); font-family:"JetBrains Mono", monospace;
  }

  .s3-foot{
    position:absolute; bottom:120px; right:120px; left:120px;
    display:flex; justify-content:space-between; align-items:center;
    font-family:"JetBrains Mono", monospace; font-size:18px; color:var(--mute); letter-spacing:.1em;
  }
  .s3-foot .legend{ display:flex; gap:32px;}
  .s3-foot .legend span{ display:flex; align-items:center; gap:10px;}
  .s3-foot .swatch{ width:14px; height:14px;}
  .s3-foot .swatch.gold{ background:linear-gradient(to top, var(--gold-deep), var(--gold));}
  .s3-foot .swatch.dark{ background:var(--ink);}

  /* ===== SLIDE 4 — Visitors map / countries ===== */
  .s4-head{ position:absolute; top:160px; right:120px;}
  .s4-head h2{ font-size:84px; font-family:"Amiri",serif; line-height:1;}

  .s4-main{
    position:absolute; top:340px; right:120px; left:120px; bottom:160px;
    display:grid; grid-template-columns: 1.4fr 1fr;
    gap:60px;
  }
  .s4-trend{
    position:relative; height:100%;
    display:flex; flex-direction:column;
  }
  .s4-trend h3{ font-size:34px; margin-bottom:8px;}
  .s4-trend .desc{ font-size:22px; line-height:1.6; color:var(--mute); margin-bottom:32px;}

  .s4-line{
    position:relative; flex:1;
    background:var(--paper-2);
    padding:40px;
    overflow:hidden;
  }
  .s4-line svg{ width:100%; height:100%;}
  .s4-pts{
    position:absolute; inset:40px;
  }
  /* Dots themselves are drawn inside the SVG (.s4-svg-dots); .s4-pt now
   * carries only the label, offset BELOW the data point so it doesn't sit
   * on top of the dot. The peak label flips ABOVE so it doesn't crash into
   * the rising line edge. */
  .s4-pt{
    position:absolute;
    transform:translate(50%, 18px);
    text-align:center;
  }
  .s4-pt.peak{
    transform:translate(50%, -100%) translateY(-18px);
  }
  .s4-pt .v{ font-family:"Amiri",serif; font-size:28px; font-weight:700; color:var(--ink); white-space:nowrap;}
  .s4-pt .y{ font-family:"JetBrains Mono", monospace; font-size:16px; color:var(--mute); margin-top:4px;}
  .s4-pt.peak .v{ color:var(--warm); font-size:30px;}

  .s4-countries{
    display:flex; flex-direction:column; gap:14px;
  }
  .s4-countries h3{ font-size:30px; margin-bottom:6px;}
  .s4-countries .desc{ font-size:18px; color:var(--mute); margin-bottom:18px; line-height:1.5;}
  .s4-clist{ display:grid; grid-template-columns: 1fr 1fr; gap:8px 24px;}
  .s4-c{
    display:flex; align-items:center; gap:10px;
    padding:12px 16px;
    background:var(--paper-2);
    font-size:20px;
    border-right:3px solid var(--gold);
  }
  .s4-c .rnk{ font-family:"JetBrains Mono", monospace; font-size:16px; color:var(--mute); width:20px;}
  .s4-c.foreign{ border-right-color:var(--accent);}

  /* ===== SLIDE 5 — Ages ===== */
  .s5-head{ position:absolute; top:160px; right:120px;}
  .s5-head h2{ font-size:84px; font-family:"Amiri",serif; line-height:1;}

  .s5-main{
    position:absolute; top:340px; right:120px; left:120px; bottom:140px;
    display:grid; grid-template-columns: 1fr 1.2fr;
    gap:80px;
  }
  .s5-text{
    font-size:28px; line-height:1.7; color:var(--ink-2); font-weight:400;
  }
  .s5-text strong{ color:var(--gold-deep); font-weight:700; font-family:"Amiri",serif;}
  .s5-callout{
    margin-top:32px;
    padding:28px;
    background:var(--paper-2);
    border-right:4px solid var(--gold);
  }
  .s5-callout .big{ font-family:"Amiri",serif; font-size:64px; color:var(--ink); line-height:1; font-weight:700;}
  .s5-callout .lbl{ font-size:22px; color:var(--mute); margin-top:8px;}

  .s5-ages{
    display:flex; flex-direction:column; gap:8px;
  }
  .s5-row{
    display:grid; grid-template-columns: 80px 100px 1fr;
    align-items:center; gap:24px;
    padding:10px 0;
    border-bottom:1px solid var(--rule);
  }
  .s5-row .rank{
    font-family:"JetBrains Mono", monospace; font-size:18px; color:var(--mute);
    letter-spacing:.1em;
  }
  .s5-row .age{
    font-family:"Amiri",serif; font-size:30px; font-weight:700;
  }
  .s5-row .barwrap{
    height:36px; background:var(--paper-2); position:relative;
  }
  .s5-row .bar{
    height:100%; background:linear-gradient(to left, var(--gold-deep), var(--gold));
    display:flex; align-items:center; padding:0 14px;
    color:var(--ink); font-weight:600;
    font-family:"JetBrains Mono", monospace; font-size:18px;
    justify-content:flex-start;
  }
  .s5-row.lead .age{ color:var(--gold-deep);}

  /* ===== SLIDE 6 — Records / sheets index ===== */
  .s6-head{ position:absolute; top:90px; right:120px; left:120px; display:flex; justify-content:space-between; align-items:flex-end;}
  .s6-head h2{ font-size:54px; font-family:"Amiri",serif; line-height:1; max-width:900px;}
  .s6-head .meta{
    font-family:"Tajawal", sans-serif; font-size:18px;
    color:var(--mute); text-align:left;
    border-right:2px solid var(--gold); padding-right:18px;
  }
  .s6-head .meta strong{ display:block; font-size:34px; color:var(--ink); font-family:"Amiri", serif; margin-bottom:6px; line-height:1;}
  .s6-head .meta em{ display:block; font-style:normal; font-size:16px; color:var(--mute); font-family:"Tajawal", sans-serif; line-height:1.3;}

  .s6-main{
    position:absolute; top:240px; right:120px; left:120px; bottom:120px;
    display:grid; grid-template-columns: 1.15fr 1fr; gap:32px;
    min-height:0;
  }

  /* LEFT: sheets index — two grouped panels */
  .s6-sheets{
    background:var(--paper-2); padding:24px 28px;
    display:flex; flex-direction:column; gap:16px;
    position:relative; overflow:hidden; min-height:0;
  }
  .s6-sheets::before{
    content:""; position:absolute; top:0; right:0; width:4px; height:100%; background:var(--gold);
  }
  .s6-group{ display:flex; flex-direction:column; gap:6px; }
  .s6-group h3{ font-size:24px; margin:0; font-family:"Amiri",serif; line-height:1.1;}
  .s6-group .lab{ font-family:"Tajawal", sans-serif; font-size:14px; color:var(--mute); margin-bottom:6px;}
  .s6-yrs{
    display:flex; flex-direction:column; gap:5px;
  }
  .s6-link{
    display:flex; justify-content:space-between; align-items:center;
    gap:14px; padding:7px 14px;
    background:var(--paper); border:1px solid var(--rule);
    text-decoration:none; color:inherit;
    transition:all .15s;
  }
  .s6-link:hover{ background:#fdfaf2; border-color:var(--gold);}
  .s6-link .yr{
    font-family:"Amiri", serif; font-size:21px;
    color:var(--ink); font-weight:700;
  }
  .s6-link .ico{
    width:26px; height:26px; border:1px solid var(--ink); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); font-size:13px; background:var(--paper-2);
  }
  .s6-link:hover .ico{ background:var(--ink); color:var(--paper);}

  /* RIGHT: sample table */
  .s6-card{
    background:var(--paper-2); padding:28px 32px;
    display:flex; flex-direction:column;
    position:relative;
  }
  .s6-card h3{ font-size:32px; margin-bottom:6px; font-family:"Amiri",serif;}
  .s6-card .lab{ font-family:"Tajawal", sans-serif; font-size:20px; color:var(--mute); margin-bottom:14px;}
  .s6-years{
    display:flex; gap:6px; margin-bottom:14px;
  }
  .s6-years span{
    padding:8px 14px; background:var(--paper); border:1px solid var(--rule);
    font-family:"JetBrains Mono", monospace; font-size:16px;
  }
  .s6-years span.active{ background:var(--ink); color:var(--paper); border-color:var(--ink);}
  .s6-table{
    flex:1; background:var(--paper); border:1px solid var(--rule); overflow:hidden;
    display:flex; flex-direction:column;
  }
  .s6-thead, .s6-trow{
    display:grid; grid-template-columns: 110px 1fr 1fr 1fr;
    font-size:18px; padding:12px 16px;
    border-bottom:1px solid var(--rule);
  }
  .s6-thead{ background:var(--paper-3); font-family:"JetBrains Mono", monospace; color:var(--mute); letter-spacing:.05em; font-size:15px;}
  .s6-trow{ font-size:18px;}
  .s6-trow .stat{ font-family:"JetBrains Mono", monospace; font-size:17px;}
  .s6-trow.green .stat{ color:#3d6b4a;}
  .s6-trow.amber .stat{ color:#a87822;}
  .s6-trow.red .stat{ color:#a83822;}

  /* ===== SLIDE 7 — Achievements / motion graphics ===== */
  .s7-head{ position:absolute; top:160px; right:120px; left:120px; display:flex; justify-content:space-between; align-items:flex-end;}
  .s7-head h2{ font-size:96px; font-family:"Amiri",serif; line-height:1;}
  .s7-tag{ font-family:"JetBrains Mono", monospace; font-size:20px; color:var(--mute); letter-spacing:.1em;}

  .s7-desc{
    position:absolute; top:340px; right:120px; left:120px;
    font-size:30px; line-height:1.6; color:var(--ink-2);
    max-width:1100px;
  }

  .s7-cards{
    position:absolute; top:540px; right:120px; left:120px;
    display:grid; grid-template-columns: 1fr 1fr; gap:32px;
  }
  .s7-c{
    background:var(--ink); color:var(--paper);
    padding:48px;
    height:340px;
    position:relative; overflow:hidden;
  }
  .s7-c.alt{ background:var(--accent); color:#f3ecdd;}
  .s7-c .label{
    font-family:"JetBrains Mono", monospace; font-size:20px; color:var(--gold);
    letter-spacing:.15em;
  }
  .s7-c .num{
    font-family:"Amiri",serif; font-size:200px; line-height:.85; font-weight:700;
    margin-top:24px;
  }
  .s7-c .unit{
    font-size:28px; color:rgba(255,255,255,.7); margin-top:12px;
  }
  .s7-c .icon{
    position:absolute; top:48px; left:48px;
    width:80px; height:80px;
    border:1px solid rgba(196,168,117,.3); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--gold);
  }
  .s7-c .icon svg{ width:36px; height:36px;}
  .s7-c .squiggle{
    position:absolute; bottom:0; left:0; right:0; height:60px;
    opacity:.3;
  }

  .s7-foot{
    position:absolute; bottom:120px; right:120px; left:120px;
    display:flex; align-items:center; gap:18px;
    font-family:"JetBrains Mono", monospace; font-size:20px; color:var(--mute);
    border-top:1px solid var(--rule); padding-top:24px;
  }
  .s7-foot .tg{ color:#0088cc; font-weight:700; font-size:22px;}

  /* ===== SLIDE 8 — Tech achievements overview ===== */
  .s8{ background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);}
  .s8-head{ position:absolute; top:140px; right:120px; left:120px; text-align:center;}
  .s8-head .eyebrow{ justify-content:center;}
  .s8-head h2{ font-size:84px; font-family:"Amiri",serif; line-height:1; margin-top:14px;}
  .s8-head .sub{ font-size:24px; color:var(--mute); margin-top:14px;}

  .s8-flow{
    position:absolute; top:400px; right:120px; left:120px;
    display:grid; grid-template-columns: repeat(2, 1fr);
    gap:32px 80px;
  }
  .s8-step{
    background:var(--paper); border:1px solid var(--rule);
    padding:40px 44px;
    min-height:280px;
    position:relative;
    display:grid; grid-template-columns: 96px 1fr; gap:28px;
    align-items:flex-start;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .s8-step::before{
    content:""; position:absolute; top:0; right:0; width:60%; height:3px;
    background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
  }
  .s8-step:hover{
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 12px 40px -16px rgba(160,134,84,.3);
  }
  .s8-step .ico{
    width:96px; height:96px;
    background: linear-gradient(135deg, var(--gold-soft) 0%, var(--paper-3) 100%);
    border:1px solid rgba(196,168,117,.4);
    border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-deep);
  }
  .s8-step .ico svg{ width:48px; height:48px; }
  .s8-step .body{ display:flex; flex-direction:column; gap:10px; }
  .s8-step .n{
    font-family:"JetBrains Mono", monospace; font-size:16px;
    color:var(--gold-deep); letter-spacing:.22em;
  }
  .s8-step h3{
    font-size:34px; font-family:"Amiri", serif; font-weight:700;
    line-height:1.2; color:var(--ink);
  }
  .s8-step p{
    font-size:19px; line-height:1.65; color:var(--mute);
  }
  .s8-step.featured{
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
    border-color: var(--ink);
  }
  .s8-step.featured .n{ color:var(--gold);}
  .s8-step.featured h3{ color: var(--paper);}
  .s8-step.featured p{ color: rgba(243,236,221,.7);}
  .s8-step.featured .ico{
    background: rgba(196,168,117,.15);
    border-color: rgba(196,168,117,.5);
    color: var(--gold);
  }
  .s8-step.featured::before{ background: linear-gradient(90deg, var(--gold), transparent);}

  /* ===== SLIDE 9 — New website ===== */
  .s9{ background:#0e1413; color:var(--paper);}
  .s9 .slide-brand span{ color:var(--paper);}
  .s9 .chrome .corner-tl, .s9 .chrome .corner-br{ border-color: rgba(196,168,117,.25);}
  .s9 .slide-meta{ color:#8a8470;}
  .s9 .slide-meta .num{ color:var(--paper);}

  .s9-head{ position:absolute; top:120px; right:120px; left:120px; display:flex; justify-content:space-between; align-items:flex-end;}
  .s9-head .eyebrow{ color:var(--gold);}
  .s9-head .eyebrow::before{ background:var(--gold);}
  .s9-head h2{ font-size:54px; font-family:"Amiri",serif; line-height:1.1; color:var(--paper); margin-top:14px;}
  .s9-head .url-tag{
    font-family:"JetBrains Mono", monospace; font-size:18px;
    color:var(--gold); letter-spacing:.05em; padding:10px 20px;
    border:1px solid rgba(196,168,117,.4); border-radius:999px;
    direction:ltr;
  }
  .s9-langs{
    margin-top:22px;
    display:flex; align-items:center; gap:14px;
    font-family:"Tajawal", sans-serif;
    color: rgba(243,236,221,.85);
  }
  .s9-langs .lbl{
    font-family:"JetBrains Mono", monospace;
    font-size:13px; letter-spacing:.18em;
    color: rgba(196,168,117,.6);
    margin-left:6px;
  }
  .s9-langs .lang{
    display:inline-flex; align-items:baseline; gap:6px;
    padding:6px 14px;
    background: rgba(196,168,117,.08);
    border: 1px solid rgba(196,168,117,.32);
    border-radius:999px;
  }
  .s9-langs .lang b{
    font-family:"Amiri", serif; font-size:22px; font-weight:700; color: var(--paper);
  }
  .s9-langs .lang i{
    font-family:"JetBrains Mono", monospace; font-style: normal;
    font-size:11px; letter-spacing:.18em; color: var(--gold);
  }
  .s9-langs .sep{ color: rgba(196,168,117,.4); }

  .s9-mock{
    position:absolute; top:300px; right:120px; left:120px; bottom:160px;
    background:var(--paper); border-radius:14px; overflow:hidden;
    box-shadow:0 60px 120px rgba(0,0,0,.5);
    display:flex; flex-direction:column;
    transition: transform .4s ease, box-shadow .4s ease, border-radius .4s ease;
  }
  .s9-screenshot{
    flex:1; width:100%; min-height:0;
    object-fit:cover; object-position:top center;
    display:block;
  }

  .s9-bar{
    background:#ebe1cb; padding:14px 24px;
    display:flex; align-items:center; gap:10px;
    border-bottom:1px solid var(--rule);
  }
  .s9-bar .dots{ display:flex; gap:8px;}
  .s9-bar .dot{ width:14px; height:14px; border-radius:50%;}
  .s9-bar .url{
    flex:1; background:var(--paper); padding:8px 18px; border-radius:6px;
    color:var(--ink-2); font-family:"JetBrains Mono", monospace; font-size:16px;
    text-align:center; border:1px solid var(--rule);
    direction:ltr;
  }
  .s9-bar .ctrl{
    color:var(--mute); font-family:"JetBrains Mono", monospace; font-size:13px;
    padding:6px 12px; letter-spacing:.1em;
  }

  /* hero strip inside the mock */
  .s9-hero{
    padding:36px 48px 28px;
    background:linear-gradient(180deg, var(--paper-2), var(--paper));
    border-bottom:1px solid var(--rule);
  }
  .s9-hero h3{
    font-family:"Amiri",serif; font-size:46px; font-weight:700;
    color:var(--ink); line-height:1;
  }
  .s9-hero .tagline{ color:var(--mute); font-size:18px; margin-top:6px;}
  .s9-searchbar{
    margin-top:20px;
    display:flex; align-items:center; gap:12px;
    background:var(--paper); border:1.5px solid var(--gold);
    border-radius:999px; padding:10px 22px;
    box-shadow:0 6px 20px rgba(160,134,84,.12);
  }
  .s9-searchbar .ico{
    color:var(--gold-deep); font-size:20px;
  }
  .s9-searchbar .placeholder{
    flex:1; color:var(--mute); font-size:18px;
  }
  .s9-searchbar .filter{
    color:var(--ink-2); font-size:14px; padding:6px 14px;
    background:var(--paper-2); border-radius:999px;
    font-family:"JetBrains Mono", monospace; letter-spacing:.05em;
  }

  .s9-content{
    flex:1;
    display:grid; grid-template-columns: 1fr 1fr;
    gap:0;
    overflow:hidden;
  }
  .s9-pane{
    padding:28px 36px;
    display:flex; flex-direction:column;
    gap:14px;
    overflow:hidden;
  }
  .s9-pane.left{ border-left:1px solid var(--rule); background:var(--paper); }
  .s9-pane.right{ background:var(--paper-2); }
  .s9-pane .pane-h{
    display:flex; justify-content:space-between; align-items:baseline;
    padding-bottom:10px; border-bottom:1px solid var(--rule);
  }
  .s9-pane .pane-h h4{ font-size:22px; color:var(--ink); font-family:"Amiri",serif; font-weight:700;}
  .s9-pane .pane-h .meta{ font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--gold-deep); letter-spacing:.05em;}

  .s9-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:9px 0; border-bottom:1px solid rgba(216,203,176,.4);
  }
  .s9-row:last-child{ border-bottom:none;}
  .s9-row .label{ font-size:18px; color:var(--ink); display:flex; align-items:center; gap:10px;}
  .s9-row .label::before{
    content:""; width:6px; height:6px; background:var(--gold); border-radius:50%;
  }
  .s9-row .count{ font-family:"JetBrains Mono", monospace; font-size:14px; color:var(--mute);}
  .s9-row .arr{ color:var(--gold-deep); font-size:18px;}

  .s9-tags{ display:flex; flex-wrap:wrap; gap:6px;}
  .s9-tags span{
    background:var(--paper-2); color:var(--ink-2);
    padding:6px 14px; border-radius:999px;
    font-size:14px; border:1px solid var(--rule);
  }
  .s9-tags span.active{
    background:var(--gold); color:var(--ink); border-color:var(--gold-deep);
    font-weight:700;
  }

  .s9-stack{
    position:absolute; bottom:90px; right:120px; left:120px;
    display:flex; gap:14px; flex-wrap:wrap;
    align-items:center;
  }
  .s9-stack .lbl{
    font-family:"JetBrains Mono", monospace; font-size:13px;
    color:var(--gold); letter-spacing:.18em;
    padding-left:14px; border-left:1px solid rgba(196,168,117,.3);
  }
  .s9-stack span:not(.lbl){
    font-family:"JetBrains Mono", monospace; font-size:14px;
    color:#cdb88a; padding:6px 14px;
    border:1px solid rgba(196,168,117,.25);
    border-radius:4px;
    background:rgba(196,168,117,.04);
  }

  /* ===== SLIDE 10 — Tools overview (7 tools grid) ===== */
  .s10-head{ position:absolute; top:140px; right:120px; left:120px; display:flex; justify-content:space-between; align-items:flex-end; gap:60px;}
  .s10-head .ttl h2{ font-size:44px; font-family:"Amiri",serif; line-height:1.3; max-width:1400px;}
  .s10-head .ttl h2 strong{ color:var(--gold-deep);}
  .s10-head .count{
    font-family:"JetBrains Mono",monospace; font-size:18px;
    color:var(--mute); letter-spacing:.2em; text-align:left;
    flex:none;
  }
  .s10-head .count b{ font-family:"Amiri",serif; font-size:80px; color:var(--ink); display:block; line-height:1; margin-bottom:6px; letter-spacing:0; font-weight:400;}

  .s10-grid{
    position:absolute; top:400px; right:120px; left:120px; bottom:160px;
    display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr;
    gap:18px;
  }
  .s10-tool{
    background:var(--paper); border:1px solid var(--rule);
    padding:30px 26px;
    display:flex; flex-direction:column;
    position:relative;
    overflow:hidden;
  }
  .s10-tool::before{
    content:""; position:absolute; top:0; right:0; width:48px; height:3px; background:var(--gold);
  }
  .s10-tool.featured{ background:var(--ink); color:var(--paper); border-color:var(--ink); grid-column:span 2; grid-row:span 2; padding:48px;}
  .s10-tool.featured::before{ background:var(--gold-soft); width:80px; height:4px;}
  .s10-tool .num{
    font-family:"JetBrains Mono",monospace; font-size:13px;
    color:var(--mute); letter-spacing:.2em;
    margin-bottom:14px;
  }
  .s10-tool.featured .num{ color:var(--gold); font-size:14px;}
  .s10-tool h3{
    font-family:"Amiri",serif; font-size:30px; line-height:1.2;
    margin-bottom:10px;
  }
  .s10-tool.featured h3{ font-size:54px; color:var(--gold-soft); margin-bottom:24px; line-height:1.2;}
  .s10-tool .lede{ font-size:17px; line-height:1.55; color:var(--mute); margin-bottom:auto;}
  .s10-tool.featured .lede{ font-size:24px; color:#d4c8a8; line-height:1.6; max-width:560px;}
  .s10-tool .meta{
    margin-top:18px; padding-top:14px; border-top:1px solid var(--rule);
    font-family:"JetBrains Mono",monospace; font-size:12px;
    color:var(--gold-deep); letter-spacing:.15em;
    display:flex; justify-content:space-between;
  }
  .s10-tool.featured .meta{ border-top-color:rgba(196,168,117,.3); color:var(--gold); font-size:14px; padding-top:20px; margin-top:24px;}

  .s10-tool .glyph{
    width:48px; height:48px; border:1px solid var(--rule);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:18px;
    color:var(--gold-deep);
  }
  .s10-tool .glyph svg{ width:24px; height:24px;}
  .s10-tool.featured .glyph{ width:72px; height:72px; border-color:rgba(196,168,117,.4); color:var(--gold); margin-bottom:32px;}
  .s10-tool.featured .glyph svg{ width:36px; height:36px;}

  /* ===== SLIDE 11 — Pipeline diagram ===== */
  .s11{ background:var(--paper-2);}
  .s11-head{ position:absolute; top:140px; right:120px; left:120px; display:flex; justify-content:space-between; align-items:flex-end; gap:60px;}
  .s11-head .ttl h2{ font-size:44px; font-family:"Amiri",serif; line-height:1.3; max-width:1400px;}
  .s11-head .ttl h2 strong{ color:var(--warm);}
  .s11-head .stamp{
    font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--mute);
    letter-spacing:.2em; text-align:left;
    border:1px solid var(--rule); padding:14px 22px; background:var(--paper);
    flex:none;
  }
  .s11-head .stamp b{ display:block; color:var(--ink); font-family:"Amiri",serif; font-size:22px; letter-spacing:0; margin-top:4px; font-weight:400;}

  .s11-flow-label{
    position:absolute; top:400px; right:120px;
    font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--gold-deep);
    letter-spacing:.25em;
  }
  .s11-flow-label::before{
    content:""; display:inline-block; width:32px; height:1px; background:var(--gold-deep);
    vertical-align:middle; margin-left:12px;
  }

  .s11-pipeline{
    position:absolute; top:450px; right:120px; left:120px;
    display:grid; grid-template-columns: repeat(5, 1fr);
    gap:14px;
    align-items:stretch;
  }
  .s11-step{
    background:var(--paper); border:1px solid var(--rule);
    padding:28px 22px;
    position:relative;
    display:flex; flex-direction:column;
    min-height:260px;
  }
  .s11-step .stage{
    font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.2em;
    color:var(--gold-deep); margin-bottom:14px;
  }
  .s11-step h4{ font-family:"Amiri",serif; font-size:26px; line-height:1.2; margin-bottom:8px;}
  .s11-step p{ font-size:15px; line-height:1.5; color:var(--mute);}
  .s11-step .glyph{
    height:60px; display:flex; align-items:center; justify-content:flex-start;
    margin-bottom:16px;
    color:var(--ink);
  }
  .s11-step .glyph svg{ width:48px; height:48px;}

  .s11-arrow{
    position:absolute; top:50%; left:-20px; transform:translateY(-50%);
    width:28px; height:28px;
    background:var(--paper-2); border:1px solid var(--gold);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:var(--gold-deep); font-size:14px;
    z-index:2;
  }

  .s11-side{
    position:absolute; bottom:140px; right:120px; left:120px;
    display:grid; grid-template-columns: 1fr auto;
    gap:24px; align-items:stretch;
  }
  .s11-tracker{
    background:var(--ink); color:var(--paper);
    padding:24px 32px;
    display:flex; align-items:center; gap:28px;
    border:1px solid var(--ink);
    position:relative;
  }
  .s11-tracker .glyph{
    width:56px; height:56px; flex:none;
    border:1px solid var(--gold); color:var(--gold);
    display:flex; align-items:center; justify-content:center;
  }
  .s11-tracker .glyph svg{ width:28px; height:28px;}
  .s11-tracker .body h4{ font-family:"Amiri",serif; font-size:26px; margin-bottom:4px;}
  .s11-tracker .body p{ font-size:15px; color:#c8b88a; line-height:1.5; max-width:540px;}
  .s11-tracker .lab{
    align-self:flex-start; flex:none;
    font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.2em;
    color:var(--gold); padding:6px 12px; border:1px solid var(--gold);
  }
  .s11-summary{
    background:var(--paper); border:1px solid var(--rule);
    padding:20px 28px;
    display:flex; flex-direction:column; justify-content:center;
    min-width:320px;
  }
  .s11-summary .k{ font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--mute); letter-spacing:.2em;}
  .s11-summary .v{ font-family:"Amiri",serif; font-size:20px; line-height:1.4; color:var(--ink); margin-top:4px;}



  /* ===== SLIDE — Social Media Stats ===== */
  .ssm{ background:var(--ink); color:var(--paper);}
  .ssm .chrome .corner-tl,.ssm .chrome .corner-br{ border-color:rgba(196,168,117,.25);}
  .ssm .slide-brand span{ color:var(--paper);}
  .ssm .slide-meta{ color:rgba(250,246,238,.5);} .ssm .slide-meta .num{ color:var(--paper);}

  .ssm-head{ position:absolute; top:120px; right:120px; left:120px; display:flex; justify-content:space-between; align-items:flex-end;}
  .ssm-head h2{ font-size:52px; font-family:"Amiri",serif; line-height:1.3; color:var(--paper);}
  .ssm-head h2 strong{ color:var(--gold);}
  .ssm-head .total-box{
    text-align:left; flex:none;
    font-family:"JetBrains Mono",monospace; font-size:14px; color:var(--gold); letter-spacing:.2em;
  }
  .ssm-head .total-box b{
    display:block; font-family:"Amiri",serif; font-size:80px; color:var(--paper);
    letter-spacing:0; line-height:1; margin-bottom:4px; font-weight:400;
  }

  .ssm-grid{
    position:absolute; top:340px; right:120px; left:120px; bottom:120px;
    display:grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr;
    gap:16px;
  }
  .ssm-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(196,168,117,.15);
    padding:24px 22px;
    display:flex; flex-direction:column;
    position:relative;
    overflow:hidden;
    opacity:0;
    animation:ssmCardIn .6s ease forwards;
  }
  .ssm-card.highlight{
    grid-column:span 2;
    background:rgba(196,168,117,.08);
    border-color:rgba(196,168,117,.3);
  }
  .ssm-card:nth-child(1){animation-delay:.15s;}
  .ssm-card:nth-child(2){animation-delay:.3s;}
  .ssm-card:nth-child(3){animation-delay:.45s;}
  .ssm-card:nth-child(4){animation-delay:.6s;}
  .ssm-card:nth-child(5){animation-delay:.75s;}
  .ssm-card:nth-child(6){animation-delay:.9s;}
  .ssm-card:nth-child(7){animation-delay:1.05s;}
  @keyframes ssmCardIn{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }

  .ssm-card .platform{
    display:flex; align-items:center; gap:16px;
    margin-bottom:14px;
  }
  .ssm-card .platform .icon{
    width:56px; height:56px;
    border:1px solid rgba(196,168,117,.3);
    display:flex; align-items:center; justify-content:center;
    color:var(--gold);
    border-radius:10px;
    position:relative;
  }
  .ssm-card .platform .icon svg{ width:28px; height:28px;}
  /* looping glow pulse on icons */
  .ssm-card .platform .icon::after{
    content:""; position:absolute; inset:-4px; border-radius:14px;
    border:1px solid var(--gold);
    opacity:0;
    animation:ssmIconPulse 2.5s ease-in-out infinite;
  }
  .ssm-card:nth-child(1) .platform .icon::after{animation-delay:0s;}
  .ssm-card:nth-child(2) .platform .icon::after{animation-delay:.4s;}
  .ssm-card:nth-child(3) .platform .icon::after{animation-delay:.8s;}
  .ssm-card:nth-child(4) .platform .icon::after{animation-delay:1.2s;}
  .ssm-card:nth-child(5) .platform .icon::after{animation-delay:1.6s;}
  .ssm-card:nth-child(6) .platform .icon::after{animation-delay:2s;}
  .ssm-card:nth-child(7) .platform .icon::after{animation-delay:2.4s;}
  @keyframes ssmIconPulse{
    0%,100%{opacity:0; transform:scale(1);}
    50%{opacity:.5; transform:scale(1.15);}
  }

  .ssm-card .platform .name{
    font-size:22px; color:var(--gold-soft); font-weight:500;
  }
  .ssm-card .platform .handle{
    font-family:"JetBrains Mono",monospace; font-size:14px; color:rgba(196,168,117,.5); display:block; margin-top:2px; direction:ltr; text-align:right;
  }

  .ssm-card .big-num{
    font-family:"Amiri",serif;
    font-size:56px; line-height:1; color:var(--paper);
    margin-bottom:6px; font-weight:700;
  }
  .ssm-card .big-num .unit{ font-family:"Tajawal"; font-size:24px; font-weight:500; color:var(--gold); margin-right:6px;}
  .ssm-card.highlight .big-num{ font-size:64px;}
  .ssm-card.highlight .big-num .unit{ font-size:28px;}
  .ssm-card .label{
    font-size:18px; color:rgba(196,168,117,.6);
  }
  .ssm-card .stats-row{
    display:flex; gap:24px; margin-top:auto; padding-top:14px;
    border-top:1px solid rgba(196,168,117,.1);
  }
  .ssm-card .stats-row .st{
    font-family:"JetBrains Mono",monospace; font-size:16px; color:var(--gold); letter-spacing:.05em;
  }
  .ssm-card .stats-row .st small{ color:rgba(196,168,117,.5); font-size:13px; display:block; margin-top:2px; letter-spacing:.1em;}

  /* looping shimmer bar at bottom */
  .ssm-card::after{
    content:""; position:absolute; bottom:0; right:0; left:0;
    height:3px;
    background:linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
    background-size:200% 100%;
    animation:ssmShimmer 3s ease-in-out infinite;
  }
  @keyframes ssmShimmer{
    0%{background-position:100% 0}
    100%{background-position:-100% 0}
  }

  /* floating particles behind grid */
  .ssm-particles{
    position:absolute; top:340px; right:120px; left:120px; bottom:120px;
    pointer-events:none; overflow:hidden;
  }
  .ssm-particles i{
    position:absolute; width:4px; height:4px; background:var(--gold); border-radius:50%;
    opacity:0;
    animation:ssmFloat 6s ease-in-out infinite;
  }
  .ssm-particles i:nth-child(1){right:10%; top:20%; animation-delay:0s;}
  .ssm-particles i:nth-child(2){right:30%; top:60%; animation-delay:1s;}
  .ssm-particles i:nth-child(3){right:55%; top:35%; animation-delay:2s;}
  .ssm-particles i:nth-child(4){right:75%; top:75%; animation-delay:3s;}
  .ssm-particles i:nth-child(5){right:90%; top:10%; animation-delay:4s;}
  .ssm-particles i:nth-child(6){right:45%; top:85%; animation-delay:1.5s;}
  .ssm-particles i:nth-child(7){right:20%; top:45%; animation-delay:3.5s;}
  .ssm-particles i:nth-child(8){right:65%; top:15%; animation-delay:5s;}
  @keyframes ssmFloat{
    0%,100%{opacity:0; transform:translateY(0) scale(.5);}
    30%{opacity:.4; transform:translateY(-30px) scale(1);}
    70%{opacity:.3; transform:translateY(-60px) scale(.8);}
  }

  /* looping orbit ring behind total number */
  .ssm-orbit{
    position:absolute; width:160px; height:160px;
    border:1px solid rgba(196,168,117,.15); border-radius:50%;
    animation:ssmOrbit 8s linear infinite;
    pointer-events:none;
  }
  .ssm-orbit::before{
    content:""; position:absolute; top:-4px; right:50%;
    width:8px; height:8px; background:var(--gold); border-radius:50%;
    transform:translateX(50%);
  }
  .ssm-orbit.b{ width:200px; height:200px; border-color:rgba(196,168,117,.08); animation-duration:12s; animation-direction:reverse;}
  @keyframes ssmOrbit{ to{transform:rotate(360deg)} }


  /* ===== FEATURE SLIDES sf1–sf6 (common) ===== */
  .sf-head{ position:absolute; top:140px; right:120px; left:120px; }
  .sf-head h2{ font-size:44px; font-family:"Amiri",serif; line-height:1.3; max-width:1400px;}
  .sf-head h2 strong{ color:var(--gold-deep);}
  .sf-head .sub{ font-size:19px; color:var(--mute); margin-top:12px; max-width:1100px; line-height:1.55;}
  .sf-fig{ position:absolute; top:380px; right:120px; left:120px; bottom:140px; }

  /* --- sf1: Downloader --- */
  .sf1{ background:var(--ink); color:var(--paper);}
  .sf1 .chrome .corner-tl,.sf1 .chrome .corner-br{ border-color:rgba(196,168,117,.25);}
  .sf1 .slide-brand span{ color:var(--paper);}
  .sf1 .slide-meta{ color:rgba(250,246,238,.5);} .sf1 .slide-meta .num{ color:var(--paper);}
  .sf1 .sf-head h2 strong{ color:var(--gold);}
  .sf1 .sf-head .sub{ color:#b0a78a;}

  .sf1-demo{ display:grid; grid-template-columns:1fr 1fr; gap:48px; height:100%;}
  .sf1-card{ background:rgba(255,255,255,.06); border:1px solid rgba(196,168,117,.2); padding:36px; display:flex; flex-direction:column; gap:20px;}
  .sf1-url{ background:rgba(0,0,0,.3); border:1px solid rgba(196,168,117,.3); padding:16px 24px; font-family:"JetBrains Mono",monospace; font-size:18px; color:var(--gold); display:flex; justify-content:space-between; align-items:center;}
  .sf1-url .tag{ background:var(--gold-deep); color:var(--paper); padding:4px 14px; font-size:14px; letter-spacing:.1em;}
  .sf1-bar-wrap{ background:rgba(0,0,0,.4); height:8px; border-radius:4px; overflow:hidden; margin-top:8px;}
  .sf1-bar{ height:100%; background:var(--gold); border-radius:4px; width:0; animation:sfBar 2.5s ease-out forwards 0.8s;}
  @keyframes sfBar{ to{ width:100%;} }
  .sf1-formats{ display:flex; gap:16px; margin-top:auto;}
  .sf1-formats span{ border:1px solid rgba(196,168,117,.3); padding:10px 20px; font-size:16px; color:var(--gold-soft);}
  .sf1-formats span.active{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--paper);}
  .sf1-info{ display:flex; flex-direction:column; gap:24px; justify-content:center;}
  .sf1-info .item{ border-right:3px solid var(--gold); padding-right:20px;}
  .sf1-info .item h4{ font-family:"Amiri",serif; font-size:28px; margin-bottom:6px;}
  .sf1-info .item p{ font-size:18px; color:#a09880; line-height:1.55;}

  /* --- sf2: Transcriber --- */
  .sf2-demo{ display:grid; grid-template-columns:1fr 1.2fr; gap:48px; height:100%;}
  .sf2-wave-box{ background:var(--ink); padding:40px; display:flex; flex-direction:column; justify-content:center; gap:24px; position:relative;}
  .sf2-wave{ display:flex; align-items:center; gap:4px; height:100px;}
  .sf2-wave i{ flex:1; background:var(--gold); border-radius:2px; animation:sfWave 1.2s ease-in-out infinite alternate;}
  .sf2-wave i:nth-child(2n){ animation-delay:.15s;} .sf2-wave i:nth-child(3n){ animation-delay:.3s;} .sf2-wave i:nth-child(5n){ animation-delay:.5s;}
  @keyframes sfWave{ 0%{height:20%} 100%{height:90%} }
  .sf2-stamp{ font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--gold); letter-spacing:.2em;}
  .sf2-lines{ display:flex; flex-direction:column; gap:0; overflow:hidden;}
  .sf2-line{ padding:20px 24px; border-bottom:1px solid var(--rule); display:flex; gap:20px; align-items:flex-start; opacity:0; animation:sfFadeUp .5s ease forwards;}
  .sf2-line:nth-child(1){animation-delay:.4s;} .sf2-line:nth-child(2){animation-delay:.8s;} .sf2-line:nth-child(3){animation-delay:1.2s;} .sf2-line:nth-child(4){animation-delay:1.6s;} .sf2-line:nth-child(5){animation-delay:2s;}
  @keyframes sfFadeUp{ to{opacity:1; transform:translateY(0);} from{opacity:0; transform:translateY(12px);}}
  .sf2-line .ts{ font-family:"JetBrains Mono",monospace; font-size:15px; color:var(--gold-deep); min-width:80px; flex:none;}
  .sf2-line .txt{ font-size:20px; line-height:1.6; color:var(--ink);}
  .sf2-line .txt mark{ background:var(--gold-soft); padding:0 4px;}

  /* --- sf3: Semantic Search (dark) --- */
  .sf3{ background:linear-gradient(135deg,#1a1633,#0d0a1f); color:var(--paper);}
  .sf3 .chrome .corner-tl,.sf3 .chrome .corner-br{ border-color:rgba(157,138,240,.25);}
  .sf3 .slide-brand span{ color:var(--paper);}
  .sf3 .slide-meta{ color:#a09cc0;} .sf3 .slide-meta .num{ color:var(--paper);}
  .sf3 .sf-head h2 strong{ color:#bdb0ff;}
  .sf3 .sf-head .sub{ color:#a09cc0;}
  .sf3 .eyebrow{ color:#9d8af0;} .sf3 .eyebrow::before{ background:#9d8af0;}

  .sf3-demo{ background:rgba(255,255,255,.04); border:1px solid rgba(157,138,240,.2); padding:40px; border-radius:16px; height:100%; display:flex; flex-direction:column; gap:28px;}
  .sf3-bar{ background:rgba(0,0,0,.3); border:1px solid rgba(157,138,240,.4); border-radius:999px; padding:18px 32px; display:flex; justify-content:space-between; align-items:center; font-size:24px;}
  .sf3-bar .btn{ background:linear-gradient(135deg,#9d8af0,#7a64d4); padding:10px 28px; border-radius:999px; font-size:20px; color:white; font-weight:600;}
  .sf3-results{ display:grid; grid-template-columns:1fr 1fr; gap:20px; flex:1;}
  .sf3-r{ background:rgba(0,0,0,.25); border:1px solid rgba(157,138,240,.15); padding:24px; border-radius:12px; opacity:0; animation:sfFadeUp .5s ease forwards;}
  .sf3-r:nth-child(1){animation-delay:.6s;} .sf3-r:nth-child(2){animation-delay:.9s;} .sf3-r:nth-child(3){animation-delay:1.2s;} .sf3-r:nth-child(4){animation-delay:1.5s;}
  .sf3-r .top{ display:flex; justify-content:space-between; margin-bottom:14px; font-family:"JetBrains Mono",monospace; font-size:16px; color:#a09cc0;}
  .sf3-r .match{ background:rgba(157,138,240,.2); color:#bdb0ff; padding:3px 10px; border-radius:999px; font-size:12px;}
  .sf3-r .qt{ font-size:20px; line-height:1.65; color:#e9e2cf;}
  .sf3-r .qt mark{ background:rgba(255,217,87,.25); color:#ffd957; padding:0 3px;}
  .sf3-langs{ display:flex; gap:28px; padding-top:16px; border-top:1px solid rgba(157,138,240,.15); font-size:18px; color:#a09cc0;}

  /* --- sf4: Meaning Clips --- */
  .sf4{ background:var(--paper-2);}
  .sf4-demo{ display:flex; flex-direction:column; gap:32px; height:100%;}
  .sf4-timeline{ background:var(--paper); border:1px solid var(--rule); padding:28px 32px; position:relative;}
  .sf4-tl-label{ font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--mute); letter-spacing:.2em; margin-bottom:16px;}
  .sf4-track{ height:40px; background:var(--paper-3); border-radius:4px; position:relative; overflow:hidden;}
  .sf4-seg{ position:absolute; top:0; bottom:0; border-radius:4px; opacity:.7;}
  .sf4-seg.hi{ opacity:1; animation:sfPulse 2s ease-in-out infinite;}
  @keyframes sfPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(185,84,42,.4)} 50%{box-shadow:0 0 0 8px rgba(185,84,42,0)}}
  .sf4-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; flex:1;}
  .sf4-clip{ background:var(--paper); border:1px solid var(--rule); padding:24px; display:flex; flex-direction:column; opacity:0; animation:sfFadeUp .5s ease forwards;}
  .sf4-clip:nth-child(1){animation-delay:.5s;} .sf4-clip:nth-child(2){animation-delay:.8s;} .sf4-clip:nth-child(3){animation-delay:1.1s;}
  .sf4-clip .dur{ font-family:"JetBrains Mono",monospace; font-size:14px; color:var(--gold-deep); letter-spacing:.15em; margin-bottom:12px;}
  .sf4-clip h4{ font-family:"Amiri",serif; font-size:24px; margin-bottom:8px;}
  .sf4-clip p{ font-size:16px; line-height:1.55; color:var(--mute);}
  .sf4-clip .status{ margin-top:auto; padding-top:14px; font-size:14px; color:var(--warm); font-weight:600;}

  /* --- sf5: Subtitle Translator --- */
  .sf5-demo{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:0; height:100%; align-items:stretch;}
  .sf5-col{ background:var(--paper); border:1px solid var(--rule); padding:28px; display:flex; flex-direction:column;}
  .sf5-col .label{ font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--gold-deep); letter-spacing:.2em; margin-bottom:18px;}
  .sf5-col .label b{ display:block; font-family:"Amiri",serif; font-size:24px; color:var(--ink); letter-spacing:0; margin-top:6px; font-weight:400;}
  .sf5-col .body{ font-size:20px; line-height:1.8; flex:1;}
  .sf5-col .body .err{ color:var(--warm); text-decoration:line-through; text-decoration-color:var(--warm);}
  .sf5-col .body .fix{ color:#2d7a50; font-weight:600;}
  .sf5-col.en{ direction:ltr; text-align:left;}
  .sf5-arrow-col{ display:flex; align-items:center; justify-content:center; width:60px; font-size:32px; color:var(--gold);}

  /* --- sf6: TTS --- */
  .sf6{ background:var(--ink); color:var(--paper);}
  .sf6 .chrome .corner-tl,.sf6 .chrome .corner-br{ border-color:rgba(196,168,117,.25);}
  .sf6 .slide-brand span{ color:var(--paper);}
  .sf6 .slide-meta{ color:rgba(250,246,238,.5);} .sf6 .slide-meta .num{ color:var(--paper);}
  .sf6 .sf-head h2 strong{ color:var(--gold);}
  .sf6 .sf-head .sub{ color:#b0a78a;}

  .sf6-demo{ display:grid; grid-template-columns:1fr 1fr; gap:48px; height:100%;}
  .sf6-text-in{ background:rgba(255,255,255,.06); border:1px solid rgba(196,168,117,.2); padding:32px; font-size:22px; line-height:1.8; color:#d4c8a8; display:flex; flex-direction:column;}
  .sf6-text-in .label{ font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--gold); letter-spacing:.2em; margin-bottom:18px;}
  .sf6-speaker{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px;}
  .sf6-icon{ width:120px; height:120px; border:2px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative;}
  .sf6-icon svg{ width:48px; height:48px; color:var(--gold);}
  .sf6-rings{ position:absolute; inset:-20px; border:1px solid rgba(196,168,117,.3); border-radius:50%; animation:sfRing 2s ease-out infinite;}
  .sf6-rings:nth-child(2){ inset:-44px; animation-delay:.4s;}
  .sf6-rings:nth-child(3){ inset:-68px; animation-delay:.8s;}
  @keyframes sfRing{ 0%{opacity:.6; transform:scale(.95)} 100%{opacity:0; transform:scale(1.1)}}
  .sf6-voices{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
  .sf6-voices span{ border:1px solid rgba(196,168,117,.3); padding:8px 18px; font-size:16px; color:var(--gold-soft);}
  .sf6-voices span.active{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--paper);}


  /* ===== SLIDE 12 — Future / kids platform ===== */
  .s12{ background:var(--paper); }
  .s12-mark{
    position:absolute; top:120px; left:0; right:0;
    text-align:center;
    font-family:"JetBrains Mono", monospace; font-size:20px; color:var(--gold-deep);
    letter-spacing:.3em;
  }
  /* Concept: centered hero — eyebrow, two-line headline, lede */
  .s12-concept{
    position:absolute; top:0; right:120px; left:120px; bottom:160px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
  }
  .s12-eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:22px; color:var(--gold-deep);
    letter-spacing:.28em; margin-bottom:80px;
  }
  .s12-h{
    font-family:'Amiri', serif; font-weight:700;
    font-size:128px; line-height:1.15;
    color:var(--ink);
    margin:0;
  }
  .s12-h .accent{ color: var(--warm); font-style:italic;}
  .s12-lede{
    font-size:28px; line-height:1.75; color:var(--mute);
    max-width:1300px;
    margin:48px auto 0;
  }
  .s12-lede strong{ color: var(--ink); font-weight:700; }

  .s12-pillars{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap:48px;
    margin-top:auto; padding-top:60px;
    width:100%; max-width:1500px;
  }
  .s12-pil{
    text-align:center;
    padding:32px 28px;
    border-top:1px solid var(--rule);
    position:relative;
  }
  .s12-pil::before{
    content:''; position:absolute; top:-1px; right:0; width:50%; height:1px;
    background: var(--gold);
  }
  .s12-pil-ico{
    width:64px; height:64px;
    margin:0 auto 18px;
    color:var(--gold-deep);
    display:flex; align-items:center; justify-content:center;
  }
  .s12-pil h4{
    font-family:'Amiri', serif; font-weight:700;
    font-size:30px; line-height:1.2; color:var(--ink);
    margin-bottom:12px;
  }
  .s12-pil p{
    font-size:18px; line-height:1.6; color:var(--mute);
    max-width:340px; margin:0 auto;
  }

  .s12-foot{
    position:absolute; bottom:80px; right:120px; left:120px;
    text-align:center;
    font-size:22px; color:var(--mute);
  }
  .s12-foot strong{ color:var(--ink);}

  .s12-ribbon{
    position:absolute; top:60px; right:50%; transform:translateX(50%);
    display:flex; gap:8px; align-items:center;
    font-family:"JetBrains Mono",monospace; font-size:18px; color:var(--mute); letter-spacing:.2em;
  }
  .s12-ribbon::before, .s12-ribbon::after{ content:""; width:60px; height:1px; background:var(--gold);}

  /* ===== Global slide element animations ===== */
  @keyframes slideUp{
    from{opacity:0; transform:translateY(24px)}
    to{opacity:1; transform:translateY(0)}
  }
  @keyframes slideFade{
    from{opacity:0}
    to{opacity:1}
  }
  @keyframes scaleIn{
    from{opacity:0; transform:scale(.9)}
    to{opacity:1; transform:scale(1)}
  }
  @keyframes countUp{
    from{opacity:0; transform:translateY(20px)}
    to{opacity:1; transform:translateY(0)}
  }

  /* All animated children start hidden, animate when parent has .slide-active */
  .s1 .s1-year, .s1 .s1-headline,
  .s1 .s1-left > div > .eyebrow,
  .s1 .s1-tags, .s1 .s1-rule, .s1 .s1-logo, .s1 .s1-title, .s1 .s1-sub,
  .s2 .s2-head, .s2-stat, .s2-stat .value,
  .s3 .s3-head, .s3 .s3-pace .card,
  .s4 .s4-head, .s4-trend, .s4-countries, .s4-pt,
  .s5 .s5-head, .s5-row,
  .s6 .s6-head, .s6 .s6-sheets, .s6-trow,
  .s7 .s7-head, .s7 .s7-thumbs, .s7-thumb,
  .s8 .s8-head, .s8-step,
  .s9 .s9-head, .s9 .s9-browser, .s9 .s9-features,
  .s10 .s10-head, .s10-tool,
  .s12 .s12-ribbon, .s12 .s12-eyebrow, .s12 .s12-h, .s12 .s12-lede,
  .s12 .s12-foot
  { opacity:0; }

  /* s1 Cover */
  .s1.slide-active .s1-year{ animation:scaleIn .8s ease .2s both;}
  .s1.slide-active .s1-headline{ animation:slideUp .9s ease .25s both;}
  .s1.slide-active .s1-left > div > .eyebrow{ animation:slideUp .6s ease .1s both;}
  .s1.slide-active .s1-tags{ animation:slideUp .6s ease .5s both;}
  .s1.slide-active .s1-rule{ animation:slideFade .6s ease .4s both;}
  .s1.slide-active .s1-logo{ animation:scaleIn .6s ease .3s both;}
  .s1.slide-active .s1-title{ animation:slideUp .6s ease .5s both;}
  .s1.slide-active .s1-sub{ animation:slideUp .6s ease .7s both;}

  /* s2 YouTube */
  .s2.slide-active .s2-head{ animation:slideUp .6s ease .1s both;}
  .s2.slide-active .s2-stat{ animation:countUp .6s ease both;}
  .s2.slide-active .s2-stat:nth-child(1){ animation-delay:.2s;}
  .s2.slide-active .s2-stat:nth-child(2){ animation-delay:.4s;}
  .s2.slide-active .s2-stat:nth-child(3){ animation-delay:.6s;}
  .s2.slide-active .s2-stat:nth-child(4){ animation-delay:.8s;}
  .s2.slide-active .s2-stat .value{ animation:scaleIn .5s ease both;}
  .s2.slide-active .s2-stat:nth-child(1) .value{ animation-delay:.5s;}
  .s2.slide-active .s2-stat:nth-child(2) .value{ animation-delay:.7s;}
  .s2.slide-active .s2-stat:nth-child(3) .value{ animation-delay:.9s;}
  .s2.slide-active .s2-stat:nth-child(4) .value{ animation-delay:1.1s;}

  /* s3 Materials */
  .s3.slide-active .s3-head{ animation:slideUp .6s ease .1s both;}
  .s3.slide-active .s3-pace .card{ animation:countUp .6s ease both;}
  .s3.slide-active .s3-pace .card:nth-child(1){ animation-delay:.3s;}
  .s3.slide-active .s3-pace .card:nth-child(2){ animation-delay:.5s;}

  /* s4 Visitors */
  .s4.slide-active .s4-head{ animation:slideUp .6s ease .1s both;}
  .s4.slide-active .s4-trend{ animation:slideFade .8s ease .3s both;}
  .s4.slide-active .s4-pt{ animation:scaleIn .5s ease both;}
  .s4.slide-active .s4-pt:nth-child(1){animation-delay:.5s;}
  .s4.slide-active .s4-pt:nth-child(2){animation-delay:.7s;}
  .s4.slide-active .s4-pt:nth-child(3){animation-delay:.9s;}
  .s4.slide-active .s4-pt:nth-child(4){animation-delay:1.1s;}
  .s4.slide-active .s4-pt:nth-child(5){animation-delay:1.3s;}
  .s4.slide-active .s4-countries{ animation:slideUp .6s ease .5s both;}

  /* s5 Ages */
  .s5.slide-active .s5-head{ animation:slideUp .6s ease .1s both;}
  .s5.slide-active .s5-row{ animation:slideUp .4s ease both;}
  .s5.slide-active .s5-row:nth-child(1){animation-delay:.3s;}
  .s5.slide-active .s5-row:nth-child(2){animation-delay:.45s;}
  .s5.slide-active .s5-row:nth-child(3){animation-delay:.6s;}
  .s5.slide-active .s5-row:nth-child(4){animation-delay:.75s;}
  .s5.slide-active .s5-row:nth-child(5){animation-delay:.9s;}
  .s5.slide-active .s5-row:nth-child(6){animation-delay:1.05s;}

  /* s6 Records */
  .s6.slide-active .s6-head{ animation:slideUp .6s ease .1s both;}
  .s6.slide-active .s6-sheets{ animation:slideUp .6s ease .3s both;}
  .s6.slide-active .s6-trow{ animation:slideUp .4s ease both;}
  .s6.slide-active .s6-trow:nth-child(2){animation-delay:.5s;}
  .s6.slide-active .s6-trow:nth-child(3){animation-delay:.6s;}
  .s6.slide-active .s6-trow:nth-child(4){animation-delay:.7s;}
  .s6.slide-active .s6-trow:nth-child(5){animation-delay:.8s;}
  .s6.slide-active .s6-trow:nth-child(6){animation-delay:.9s;}
  .s6.slide-active .s6-trow:nth-child(7){animation-delay:1s;}

  /* s7 Motion */
  .s7.slide-active .s7-head{ animation:slideUp .6s ease .1s both;}
  .s7.slide-active .s7-thumbs{ animation:slideFade .8s ease .3s both;}
  .s7.slide-active .s7-thumb{ animation:scaleIn .5s ease both;}
  .s7.slide-active .s7-thumb:nth-child(1){animation-delay:.4s;}
  .s7.slide-active .s7-thumb:nth-child(2){animation-delay:.55s;}
  .s7.slide-active .s7-thumb:nth-child(3){animation-delay:.7s;}
  .s7.slide-active .s7-thumb:nth-child(4){animation-delay:.85s;}

  /* s8 Tech */
  .s8.slide-active .s8-head{ animation:slideUp .6s ease .1s both;}
  .s8.slide-active .s8-step{ animation:slideUp .5s ease both;}
  .s8.slide-active .s8-step:nth-child(1){animation-delay:.3s;}
  .s8.slide-active .s8-step:nth-child(2){animation-delay:.5s;}
  .s8.slide-active .s8-step:nth-child(3){animation-delay:.7s;}
  .s8.slide-active .s8-step:nth-child(4){animation-delay:.9s;}

  /* s9 Website */
  .s9.slide-active .s9-head{ animation:slideUp .6s ease .1s both;}
  .s9.slide-active .s9-browser{ animation:scaleIn .8s ease .3s both;}
  .s9.slide-active .s9-features{ animation:slideUp .6s ease .6s both;}

  /* s10 Overview */
  .s10.slide-active .s10-head{ animation:slideUp .6s ease .1s both;}
  .s10.slide-active .s10-tool{ animation:slideUp .5s ease both;}
  .s10.slide-active .s10-tool:nth-child(1){animation-delay:.2s;}
  .s10.slide-active .s10-tool:nth-child(2){animation-delay:.3s;}
  .s10.slide-active .s10-tool:nth-child(3){animation-delay:.4s;}
  .s10.slide-active .s10-tool:nth-child(4){animation-delay:.5s;}
  .s10.slide-active .s10-tool:nth-child(5){animation-delay:.6s;}
  .s10.slide-active .s10-tool:nth-child(6){animation-delay:.7s;}

  /* s12 Future */
  .s12.slide-active .s12-ribbon{ animation:slideFade .6s ease .1s both;}
  .s12.slide-active .s12-eyebrow{ animation:slideUp .5s ease .2s both;}
  .s12.slide-active .s12-h{ animation:slideUp .8s ease .35s both;}
  .s12.slide-active .s12-lede{ animation:slideUp .6s ease .65s both;}
  .s12.slide-active .s12-foot{ animation:slideUp .6s ease .9s both;}

  /* In-slide animations also keyed off .slide-active */
  .s4.slide-active .anim-path{
    stroke-dasharray:2000;
    stroke-dashoffset:2000;
    animation:s4DrawLine 2s ease-out .5s forwards;
  }
  .s4.slide-active .s4-pt .dot{
    animation:s4DotPulse 2s ease-in-out infinite;
  }
  .s3.slide-active .s3-bar{
    transform:scaleY(1) !important;
    opacity:1 !important;
  }

  /* ===== IN-SLIDE VISUAL ANIMATIONS ===== */

  /* s2: looping waveform bars — drop from top, anchored at bottom */
  .s2-bars{ transform-origin:bottom; }
  .s2-bars div{
    transform-origin:bottom;
    animation:s2BarDrop 1.8s ease-in-out infinite alternate;
  }
  .s2-bars div:nth-child(4n){animation-delay:0s; animation-duration:1.4s;}
  .s2-bars div:nth-child(4n+1){animation-delay:.15s; animation-duration:1.6s;}
  .s2-bars div:nth-child(4n+2){animation-delay:.3s; animation-duration:2s;}
  .s2-bars div:nth-child(4n+3){animation-delay:.45s; animation-duration:1.2s;}
  @keyframes s2BarDrop{
    0%{transform:scaleY(1);}
    100%{transform:scaleY(.15);}
  }



  /* s3: bars grow from 0 via transition */
  .s3-bar{
    transform-origin:bottom;
    transform:scaleY(0);
    opacity:0;
    transition:transform .8s ease-out, opacity .4s ease;
  }
  .s3-bar.visible{
    transform:scaleY(1);
    opacity:1;
  }
  .s3-col .s3-count-total{
    position:absolute; top:36px; right:0;
    font-family:"Amiri",serif; font-size:42px; color:var(--ink); font-weight:700;
  }

  @keyframes s4DrawLine{
    to{stroke-dashoffset:0;}
  }
  @keyframes s4DotPulse{
    0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(196,168,117,.5);}
    50%{transform:scale(1.4); box-shadow:0 0 0 8px rgba(196,168,117,0);}
  }



  /* s6: scanning highlight line */
  .s6-table{ position:relative; }
  .s6-table::after{
    content:"";
    position:absolute; top:0; right:0; left:0; height:3px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
    animation:s6Scan 4s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes s6Scan{
    0%{top:0; opacity:0;}
    10%{opacity:.6;}
    90%{opacity:.3;}
    100%{top:100%; opacity:0;}
  }

  /* s7: thumbnails looping glow shimmer */
  .s7-thumb{
    position:relative; overflow:hidden;
  }
  .s7-thumb::after{
    content:"";
    position:absolute; top:0; left:-100%; width:60%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    animation:s7Shimmer 3s ease-in-out infinite;
  }
  .s7-thumb:nth-child(1)::after{animation-delay:0s;}
  .s7-thumb:nth-child(2)::after{animation-delay:.8s;}
  .s7-thumb:nth-child(3)::after{animation-delay:1.6s;}
  .s7-thumb:nth-child(4)::after{animation-delay:2.4s;}
  @keyframes s7Shimmer{
    0%{left:-100%;}
    60%,100%{left:150%;}
  }

  /* s8: looping glow on step icons */
  .s8-step .ico{
    animation:s8IconGlow 3s ease-in-out infinite;
  }
  .s8-step:nth-child(1) .ico{animation-delay:0s;}
  .s8-step:nth-child(2) .ico{animation-delay:.75s;}
  .s8-step:nth-child(3) .ico{animation-delay:1.5s;}
  .s8-step:nth-child(4) .ico{animation-delay:2.25s;}
  @keyframes s8IconGlow{
    0%,100%{box-shadow:none; border-color:var(--rule);}
    50%{box-shadow:0 0 0 6px rgba(196,168,117,.2); border-color:var(--gold);}
  }

  /* s8: connecting arrows pulse */
  .s8-arrow{
    animation:s8ArrowPulse 2s ease-in-out infinite;
  }
  @keyframes s8ArrowPulse{
    0%,100%{transform:translateX(0); opacity:.7;}
    50%{transform:translateX(-6px); opacity:1;}
  }

  /* s9: typing cursor in URL */
  .s9-cursor{
    display:inline-block; width:2px; height:1em; background:var(--gold);
    vertical-align:text-bottom; animation:s9Blink 1s step-end infinite;
  }
  @keyframes s9Blink{ 0%,100%{opacity:1;} 50%{opacity:0;} }

  /* s9: page content load shimmer */
  .s9-shimmer-row{
    height:18px; background:linear-gradient(90deg, var(--paper-3) 25%, var(--paper-2) 50%, var(--paper-3) 75%);
    background-size:200% 100%;
    animation:s9Shimmer 1.5s ease infinite;
    border-radius:3px; margin-bottom:10px;
  }
  @keyframes s9Shimmer{
    0%{background-position:200% 0;}
    100%{background-position:-200% 0;}
  }

  /* s10: tool cards looping border glow */
  .s10-tool::before{
    animation:s10GoldShift 4s linear infinite;
  }
  .s10-tool:nth-child(1)::before{animation-delay:0s;}
  .s10-tool:nth-child(2)::before{animation-delay:.7s;}
  .s10-tool:nth-child(3)::before{animation-delay:1.4s;}
  .s10-tool:nth-child(4)::before{animation-delay:2.1s;}
  .s10-tool:nth-child(5)::before{animation-delay:2.8s;}
  .s10-tool:nth-child(6)::before{animation-delay:3.5s;}
  @keyframes s10GoldShift{
    0%,100%{opacity:.5; width:48px;}
    50%{opacity:1; width:120px;}
  }

  /* s12: future stages light up in sequence, loop */
  .s12-stage{
    animation:s12StagePop 5s ease-in-out infinite;
  }
  .s12-stage:nth-child(1){animation-delay:0s;}
  .s12-stage:nth-child(2){animation-delay:1s;}
  .s12-stage:nth-child(3){animation-delay:2s;}
  .s12-stage:nth-child(4){animation-delay:3s;}
  .s12-stage:nth-child(5){animation-delay:4s;}
  @keyframes s12StagePop{
    0%,100%{transform:translateY(0); box-shadow:none;}
    10%,30%{transform:translateY(-8px); box-shadow:0 16px 40px rgba(0,0,0,.12);}
    40%{transform:translateY(0); box-shadow:none;}
  }


/* ---------- Pause looping in-slide animations when section is not active ---------- */
deck-stage > section:not(.slide-active) *{
  animation-play-state: paused !important;
}


/* ============================================================
 * SLIDE: CLOSING — final thank-you and contact card
 * ========================================================== */
.s-closing{ background: var(--paper); position: relative; }
.s-closing .closing-stack{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 60px 240px;
}
.s-closing .closing-eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; letter-spacing: .26em;
  color: var(--gold-deep);
  margin-bottom: 90px;
  position: relative;
  display: inline-block;
}
.s-closing .closing-eyebrow::before,
.s-closing .closing-eyebrow::after{
  content: ''; position: absolute; top: 50%;
  width: 60px; height: 1px; background: var(--gold-deep);
}
.s-closing .closing-eyebrow::before{ right: calc(100% + 24px); }
.s-closing .closing-eyebrow::after{ left: calc(100% + 24px); }

.s-closing .closing-h{
  font-family: 'Amiri', serif;
  font-size: 200px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 40px;
  letter-spacing: -0.01em;
}
.s-closing .closing-sub{
  font-size: 28px;
  font-weight: 400;
  color: var(--mute);
  max-width: 1100px;
  line-height: 1.7;
  margin: 0 auto 64px;
}
.s-closing .closing-marks{ margin: 0 0 28px; position:relative;}
.s-closing .closing-marks::before,
.s-closing .closing-marks::after{
  content:''; position: absolute; top: 50%;
  width: 280px; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
}
.s-closing .closing-marks::before{ right: calc(50% + 110px); }
.s-closing .closing-marks::after{ left: calc(50% + 110px); }
.s-closing .closing-logo{ height: 110px; opacity: .9; }

.s-closing .closing-info{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%; max-width: 1200px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 28px;
}
.s-closing .ci-cell{
  padding: 28px 40px;
  text-align: center;
  position: relative;
}
.s-closing .ci-cell + .ci-cell::before{
  content: '';
  position: absolute; top: 18%; bottom: 18%; right: 0;
  width: 1px;
  background: var(--rule);
}
.s-closing .ci-key{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: .26em;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.s-closing .ci-val{
  font-family: 'Amiri', serif;
  font-size: 38px; font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  direction: ltr;
}
.s-closing .ci-meta{
  font-family: 'Tajawal', sans-serif;
  font-size: 17px;
  color: var(--mute);
  margin-top: 8px;
}
.s-closing .ci-meta strong{ color: var(--gold-deep); font-weight: 700; }

/* entrance animations */
.s-closing .closing-eyebrow,
.s-closing .closing-h,
.s-closing .closing-sub,
.s-closing .closing-marks,
.s-closing .closing-info{ opacity: 0; }
.s-closing.slide-active .closing-eyebrow{ animation: slideUp .6s ease .15s both;}
.s-closing.slide-active .closing-h{ animation: scaleIn .9s ease .25s both;}
.s-closing.slide-active .closing-sub{ animation: slideUp .7s ease .55s both;}
.s-closing.slide-active .closing-marks{ animation: scaleIn .7s ease .8s both;}
.s-closing.slide-active .closing-info{ animation: slideFade .7s ease 1.0s both;}


/* ============================================================
 * SLIDE: TABLE OF CONTENTS
 * ========================================================== */
.s-toc{ background: var(--paper); }
.s-toc .toc-head{
  position: absolute; top: 130px; right: 0; left: 0;
  text-align: center;
  padding: 0 200px;
}
.s-toc .toc-head .eyebrow{
  justify-content: center;
  margin-bottom: 24px;
}
.s-toc .toc-head h2{
  font-family: 'Amiri', serif;
  font-size: 120px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--ink);
  line-height: 1;
}
.s-toc .toc-head .toc-sub{
  font-size: 24px;
  color: var(--mute);
}
.s-toc .toc-grid{
  position: absolute; top: 430px; bottom: 110px; right: 140px; left: 140px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 80px;
}
.s-toc .toc-col{
  position: relative;
  padding: 44px 36px 36px;
  border-top: 2px solid var(--gold);
}
.s-toc .toc-chapter-num{
  position: absolute; top: -36px; right: 36px;
  background: var(--paper);
  padding: 0 16px;
  font-family: 'Amiri', serif;
  font-size: 56px;
  color: var(--gold-deep);
  line-height: 1;
}
.s-toc .toc-chapter{
  font-family: 'Amiri', serif;
  font-size: 44px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.2;
}
.s-toc .toc-chapter-sub{
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--gold-deep);
  margin-bottom: 30px;
}
.s-toc .toc-list{
  list-style: none;
  padding: 0; margin: 0;
}
.s-toc .toc-list li{
  font-size: 20px;
  color: var(--ink-2);
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 14px;
}
.s-toc .toc-list li::before{
  content: '◆'; color: var(--gold);
  font-size: 12px; line-height: 1;
}

.s-toc .toc-head, .s-toc .toc-col{ opacity: 0; }
.s-toc.slide-active .toc-head{ animation: slideUp .6s ease .15s both; }
.s-toc.slide-active .toc-col{ animation: slideUp .6s ease both; }
.s-toc.slide-active .toc-col:nth-child(1){ animation-delay: .35s; }
.s-toc.slide-active .toc-col:nth-child(2){ animation-delay: .5s; }
.s-toc.slide-active .toc-col:nth-child(3){ animation-delay: .65s; }


/* ============================================================
 * SLIDE: SECTION DIVIDERS — full-bleed dark chapter cards
 * ========================================================== */
.s-divider{
  background: radial-gradient(120% 90% at 50% 50%, #1f1c14 0%, #14130f 60%, #0d0c08 100%);
  color: #f5ecd6;
  position: relative;
  overflow: hidden;
}
.s-divider::before{
  /* faint gold corner brackets, brand-aligned */
  content: '';
  position: absolute; inset: 80px;
  border: 1px solid rgba(196,168,117,.2);
  border-image: linear-gradient(135deg, rgba(196,168,117,.6), transparent 30%, transparent 70%, rgba(196,168,117,.6)) 1;
  pointer-events: none;
}
.s-divider .div-stack{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 200px;
}
.s-divider .div-num{
  font-family: 'Amiri', serif;
  font-size: 320px;
  color: var(--gold);
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0 60px rgba(196,168,117,.25);
}
.s-divider .div-rule{
  width: 240px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 28px 0 40px;
}
.s-divider .div-eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; letter-spacing: .32em;
  color: rgba(230,213,176,.7);
  margin-bottom: 28px;
}
.s-divider .div-title{
  font-family: 'Amiri', serif;
  font-size: 200px;
  font-weight: 700;
  color: #f5ecd6;
  line-height: 1;
  margin: 0 0 36px;
}
.s-divider .div-sub{
  font-size: 28px;
  color: rgba(230,213,176,.7);
  letter-spacing: .04em;
  font-weight: 300;
}
.s-divider .slide-brand{
  filter: invert(1) brightness(1.6);
  opacity: .65;
}
.s-divider .slide-meta{ color: rgba(230,213,176,.6); }
.s-divider .slide-meta .num{ color: #f5ecd6; }
.s-divider .slide-meta .dot{ background: var(--gold); }

/* entrance */
.s-divider .div-num,
.s-divider .div-rule,
.s-divider .div-eyebrow,
.s-divider .div-title,
.s-divider .div-sub{ opacity: 0; }
.s-divider.slide-active .div-num{ animation: scaleIn 1.0s ease .15s both; }
.s-divider.slide-active .div-rule{ animation: slideFade .7s ease .65s both; }
.s-divider.slide-active .div-eyebrow{ animation: slideUp .6s ease .8s both; }
.s-divider.slide-active .div-title{ animation: slideUp .8s ease .95s both; }
.s-divider.slide-active .div-sub{ animation: slideUp .6s ease 1.2s both; }


/* ============================================================
 * SLIDE: DUBBING PROJECT — Arabic source → multilingual AI voices
 * ========================================================== */
.s-dub{
  background: radial-gradient(120% 90% at 50% 30%, #1f1c14 0%, #0e1413 65%, #0a0c08 100%);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.s-dub .slide-brand img{ filter: brightness(10); }
.s-dub .slide-brand span{ color: #e9e2cf; }
.s-dub .chrome .corner-tl,
.s-dub .chrome .corner-br{ border-color: rgba(196,168,117,.22); }
.s-dub .slide-meta{ color: rgba(230,213,176,.55); }
.s-dub .slide-meta .num{ color: #f5ecd6; }

.s-dub .dub-head{
  position: absolute; top: 130px; right: 140px; left: 140px;
  text-align: center;
}
.s-dub .dub-eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; letter-spacing: .3em;
  color: var(--gold);
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid rgba(196,168,117,.4);
  border-radius: 999px;
}
.s-dub .dub-h{
  font-family: 'Amiri', serif;
  font-size: 96px;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 26px;
  color: #f5ecd6;
}
.s-dub .dub-h .accent{
  color: var(--gold);
  font-style: italic;
}
.s-dub .dub-lede{
  margin: 26px auto 0;
  font-size: 22px;
  line-height: 1.75;
  color: rgba(243,236,221,.7);
  max-width: 1280px;
}

/* Three-column pipeline: source → pipe → outputs */
.s-dub .dub-flow{
  position: absolute;
  top: 540px; bottom: 230px;
  right: 140px; left: 140px;
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  gap: 48px;
  align-items: center;
}

/* Source card (right side in RTL) */
.s-dub .src{
  background: linear-gradient(160deg, rgba(196,168,117,.10) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(196,168,117,.35);
  border-radius: 8px;
  padding: 36px 40px;
  display: flex; flex-direction: column;
  gap: 26px;
  position: relative;
}
.s-dub .src::before{
  content: '';
  position: absolute; top: 0; right: 0;
  width: 70%; height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.s-dub .src .label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; letter-spacing: .25em;
  color: rgba(230,213,176,.6);
}
.s-dub .src .lang-mark{
  display: flex; align-items: baseline; gap: 18px;
}
.s-dub .src .lang-mark .glyph{
  font-family: 'Amiri', serif;
  font-size: 88px; font-weight: 700;
  color: #f5ecd6;
  line-height: 1;
}
.s-dub .src .lang-mark .name{
  font-size: 22px;
  color: rgba(243,236,221,.65);
}
.s-dub .src .wave{
  display: flex; align-items: center; gap: 3px;
  height: 80px;
}
.s-dub .src .wave i{
  flex: 1;
  background: var(--gold);
  height: 30%;
  border-radius: 1px;
}
.s-dub .src .meta{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: .15em;
  color: rgba(196,168,117,.6);
}

/* Pipeline (center) */
.s-dub .pipe{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  position: relative;
}
.s-dub .pipe .arrow{
  font-family: 'Amiri', serif;
  font-size: 80px;
  color: var(--gold);
  line-height: 1;
}
.s-dub .pipe .tools{
  display: flex; flex-direction: column;
  gap: 8px;
  text-align: center;
}
.s-dub .pipe .chip{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: .14em;
  color: rgba(196,168,117,.85);
  padding: 6px 14px;
  border: 1px solid rgba(196,168,117,.3);
  border-radius: 999px;
  background: rgba(0,0,0,.3);
}

/* Output stack (left side in RTL = visual right of pipe) */
.s-dub .targets{
  display: flex; flex-direction: column;
  gap: 10px;
}
.s-dub .out{
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(196,168,117,.22);
  border-radius: 6px;
  padding: 10px 22px;
  display: grid;
  grid-template-columns: 80px 1fr 110px;
  gap: 20px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.s-dub .out::before{
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
  opacity: .55;
}
.s-dub .out .code{
  font-family: 'Amiri', serif;
  font-size: 36px; font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.s-dub .out .name{
  font-size: 18px;
  color: rgba(243,236,221,.85);
  line-height: 1.3;
}
.s-dub .out .name small{
  display: block;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(196,168,117,.55);
  letter-spacing: .14em;
  margin-top: 4px;
}
.s-dub .out .mini-wave{
  height: 26px;
  display: flex; align-items: center; gap: 2px;
}
.s-dub .out .mini-wave i{
  flex: 1;
  background: rgba(196,168,117,.55);
  height: 30%;
  border-radius: 1px;
}

/* Looping waveform animation — staggered bars */
@keyframes dubWave{
  0%,100%{ transform: scaleY(.25); }
  50%{ transform: scaleY(1); }
}
.s-dub .src .wave i,
.s-dub .out .mini-wave i{
  transform-origin: center;
  height: 100%;
  animation: dubWave 1.4s ease-in-out infinite;
}
.s-dub .src .wave i:nth-child(8n+1){ animation-delay: 0s; }
.s-dub .src .wave i:nth-child(8n+2){ animation-delay: .15s; }
.s-dub .src .wave i:nth-child(8n+3){ animation-delay: .3s; }
.s-dub .src .wave i:nth-child(8n+4){ animation-delay: .45s; }
.s-dub .src .wave i:nth-child(8n+5){ animation-delay: .6s; }
.s-dub .src .wave i:nth-child(8n+6){ animation-delay: .45s; }
.s-dub .src .wave i:nth-child(8n+7){ animation-delay: .3s; }
.s-dub .src .wave i:nth-child(8n+8){ animation-delay: .15s; }

.s-dub .out:nth-child(1) .mini-wave i:nth-child(odd){ animation-delay: .1s; }
.s-dub .out:nth-child(1) .mini-wave i:nth-child(even){ animation-delay: .35s; }
.s-dub .out:nth-child(2) .mini-wave i:nth-child(odd){ animation-delay: .25s; }
.s-dub .out:nth-child(2) .mini-wave i:nth-child(even){ animation-delay: .5s; }
.s-dub .out:nth-child(3) .mini-wave i:nth-child(odd){ animation-delay: .4s; }
.s-dub .out:nth-child(3) .mini-wave i:nth-child(even){ animation-delay: .65s; }
.s-dub .out:nth-child(4) .mini-wave i:nth-child(odd){ animation-delay: .55s; }
.s-dub .out:nth-child(4) .mini-wave i:nth-child(even){ animation-delay: .8s; }

@keyframes pipePulse{
  0%,100%{ opacity: .4; transform: translateX(0); }
  50%{ opacity: 1; transform: translateX(-6px); }
}
.s-dub .pipe .arrow{ animation: pipePulse 1.6s ease-in-out infinite; }

/* Foot note */
.s-dub .dub-foot{
  position: absolute; bottom: 50px; right: 140px; left: 140px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: .2em;
  color: rgba(196,168,117,.5);
}

/* ─── Video example buttons + popup modal ─── */
.s-dub .dub-examples{
  position: absolute;
  bottom: 130px;
  right: 140px; left: 140px;
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
}
.s-dub .dub-examples-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: .22em;
  color: rgba(196,168,117,.65);
  margin-left: 8px;
}
.dub-vid-btn{
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 24px;
  background: rgba(196,168,117,.08);
  border: 1px solid rgba(196,168,117,.4);
  border-radius: 10px;
  color: #f5ecd6;
  font-family: 'Tajawal', sans-serif;
  font-size: 19px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.dub-vid-btn:hover{
  background: rgba(196,168,117,.18);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.dub-vid-btn:focus{ outline: none; }
.dub-vid-btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.dub-vid-btn .play{
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold);
  color: #14130f;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.dub-vid-btn:hover .play{ transform: scale(1.08); }
.dub-vid-btn .play svg{ width: 12px; height: 12px; transform: translateX(1px); }
.dub-vid-btn .lbl-sub{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .15em;
  color: rgba(196,168,117,.7);
}

/* Modal lives outside <deck-stage>, on top of everything */
.vid-modal{
  position: fixed; inset: 0;
  z-index: 2147483600;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.vid-modal[data-open]{ opacity: 1; pointer-events: auto; }
.vid-modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(8,8,12,.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.vid-modal-frame{
  position: relative;
  width: min(80vw, 1280px);
  background: #14130f;
  border: 1px solid rgba(196,168,117,.28);
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(196,168,117,.05) inset;
  padding: 14px;
  transform: scale(.96);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.vid-modal[data-open] .vid-modal-frame{ transform: scale(1); }
.vid-modal-iframe-wrap{
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.vid-modal-iframe-wrap iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.vid-modal-title{
  font-family: 'Tajawal', sans-serif;
  font-size: 17px;
  color: rgba(245,236,214,.75);
  margin-top: 14px;
  text-align: center;
  direction: rtl;
}
.vid-modal-close{
  position: absolute; top: -18px; left: -18px;
  width: 40px; height: 40px;
  background: var(--gold);
  color: #14130f;
  border: none;
  border-radius: 50%;
  font-size: 26px; line-height: 1;
  font-weight: 300;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  transition: background .15s, transform .15s;
}
.vid-modal-close:hover{ background: #d4be8a; transform: scale(1.06); }

/* entrance for the example buttons row */
.s-dub .dub-examples{ opacity: 0; }
.s-dub.slide-active .dub-examples{ animation: slideUp .6s ease 1.75s both; }

/* entrance animations */
.s-dub .dub-eyebrow,
.s-dub .dub-h,
.s-dub .dub-lede,
.s-dub .src,
.s-dub .pipe,
.s-dub .out,
.s-dub .dub-foot{ opacity: 0; }
.s-dub.slide-active .dub-eyebrow{ animation: slideFade .6s ease .15s both; }
.s-dub.slide-active .dub-h{ animation: slideUp .8s ease .3s both; }
.s-dub.slide-active .dub-lede{ animation: slideUp .6s ease .6s both; }
.s-dub.slide-active .src{ animation: slideFade .8s ease .85s both; }
.s-dub.slide-active .pipe{ animation: scaleIn .7s ease 1.1s both; }
.s-dub.slide-active .out{ animation: slideUp .5s ease both; }
.s-dub.slide-active .out:nth-child(1){ animation-delay: 1.2s; }
.s-dub.slide-active .out:nth-child(2){ animation-delay: 1.35s; }
.s-dub.slide-active .out:nth-child(3){ animation-delay: 1.5s; }
.s-dub.slide-active .out:nth-child(4){ animation-delay: 1.65s; }
.s-dub.slide-active .dub-foot{ animation: slideFade .6s ease 1.9s both; }