/* نسخة من تنسيقات index.html — تستخدمها صفحات المسارات */
  /* ───────────────────────── tokens ───────────────────────── */
  :root{
    --navy-900:#070f1f;
    --navy-800:#0a1628;
    --navy-700:#0f1f3a;
    --navy-600:#152b4f;
    --blue-500:#3b82f6;
    --blue-400:#60a5fa;
    --purple-500:#8b5cf6;
    --purple-400:#a78bfa;
    --red-500:#ef4444;
    --text:#f8fafc;
    --text-mute:#cbd5e1;
    --text-dim:#94a3b8;
    --glass: rgba(255,255,255,0.06);
    --glass-strong: rgba(255,255,255,0.10);
    --glass-border: rgba(255,255,255,0.12);
    --glass-border-strong: rgba(96,165,250,0.35);
    --shadow-blue: 0 20px 60px -20px rgba(59,130,246,0.45);
    --shadow-deep: 0 30px 80px -30px rgba(2,6,23,0.8);
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:"Cairo", system-ui, -apple-system, sans-serif;
    font-weight:300;
    color:var(--text);
    line-height:1.75;
    letter-spacing:0.01em;
    background:var(--navy-900);
    overflow-x:hidden;
    min-height:100vh;
  }
  ::selection{background:rgba(96,165,250,0.35);color:#fff}

  /* ───────────────────────── animated canvas bg ───────────────────────── */
  .bg-stage{
    position:fixed; inset:0; z-index:-2;
    background:
      radial-gradient(60% 40% at 80% 0%, rgba(139,92,246,0.18), transparent 60%),
      radial-gradient(70% 50% at 10% 30%, rgba(59,130,246,0.22), transparent 60%),
      radial-gradient(80% 60% at 50% 100%, rgba(96,165,250,0.14), transparent 65%),
      linear-gradient(180deg, #050b18 0%, #0a1628 40%, #0f1230 100%);
  }
  .bg-stage::before{
    content:""; position:absolute; inset:-20%;
    background:
      radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.6), transparent 50%),
      radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.5), transparent 50%),
      radial-gradient(1.5px 1.5px at 40% 60%, rgba(96,165,250,0.7), transparent 50%),
      radial-gradient(1px 1px at 90% 20%, rgba(167,139,250,0.6), transparent 50%),
      radial-gradient(1px 1px at 30% 90%, rgba(255,255,255,0.4), transparent 50%),
      radial-gradient(1.5px 1.5px at 80% 40%, rgba(96,165,250,0.5), transparent 50%);
    background-size: 800px 800px, 600px 600px, 700px 700px, 500px 500px, 900px 900px, 650px 650px;
    animation: drift 60s linear infinite;
    opacity:0.7;
  }
  @keyframes drift{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(-100px,-200px,0)}
  }

  .orb{
    position:fixed; border-radius:50%;
    filter: blur(60px);
    pointer-events:none; z-index:-1;
    opacity:0.55;
    will-change: transform;
  }
  .orb.o1{width:520px;height:520px;background:radial-gradient(circle, rgba(59,130,246,0.55), transparent 60%);top:-180px;right:-120px;animation:floatA 18s ease-in-out infinite}
  .orb.o2{width:420px;height:420px;background:radial-gradient(circle, rgba(139,92,246,0.55), transparent 60%);top:40%;left:-160px;animation:floatB 22s ease-in-out infinite}
  .orb.o3{width:380px;height:380px;background:radial-gradient(circle, rgba(96,165,250,0.45), transparent 60%);bottom:-160px;right:30%;animation:floatA 26s ease-in-out infinite reverse}
  @keyframes floatA{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(-40px,60px) scale(1.08)}
  }
  @keyframes floatB{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(50px,-40px) scale(1.12)}
  }

  /* ───────────────────────── shared glass ───────────────────────── */
  .glass{
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow:
      var(--shadow-deep),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .glass-line{
    position:relative;
  }
  .glass-line::before{
    content:""; position:absolute; inset:0; border-radius:inherit;
    padding:1px;
    background:linear-gradient(135deg, rgba(96,165,250,0.5), rgba(139,92,246,0.3) 40%, rgba(255,255,255,0.04) 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events:none;
  }

  /* ───────────────────────── nav ───────────────────────── */
  .nav-shell{
    position:fixed; top:18px; left:50%; transform:translateX(-50%);
    width:min(1200px, calc(100% - 32px));
    z-index:50;
    transition: top 300ms ease, transform 300ms ease;
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px;
    border-radius: 999px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-weight:800; font-size:18px; letter-spacing:0.02em;
    text-decoration:none; color:var(--text);
  }
  .brand-mark{
    width:34px;height:34px;border-radius:10px;
    background:
      conic-gradient(from 210deg, #3b82f6, #8b5cf6, #60a5fa, #3b82f6);
    box-shadow: 0 0 18px rgba(96,165,250,0.6), inset 0 0 8px rgba(255,255,255,0.4);
    position:relative; flex-shrink:0;
  }
  .brand-mark::after{
    content:""; position:absolute; inset:6px; border-radius:6px;
    background:rgba(7,15,31,0.85);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  }
  .brand-mark::before{
    content:""; position:absolute; inset:11px; border-radius:50%;
    background:linear-gradient(135deg,#60a5fa,#a78bfa);
    box-shadow:0 0 8px rgba(96,165,250,0.9);
    z-index:1;
  }
  .nav-links{
    display:flex; align-items:center; gap:6px;
    font-size:14px; font-weight:600;
  }
  .nav-link{
    position:relative; padding:8px 14px; color:var(--text-mute);
    text-decoration:none; border-radius:999px;
    transition: color 300ms ease;
  }
  .nav-link::after{
    content:""; position:absolute; left:14px; right:14px; bottom:4px;
    height:1px; background:linear-gradient(90deg, transparent, var(--blue-400), transparent);
    transform:scaleX(0); transform-origin:center;
    transition: transform 350ms cubic-bezier(.22,1,.36,1);
  }
  .nav-link:hover{color:#fff}
  .nav-link:hover::after{transform:scaleX(1)}
  .nav-cta{
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 18px; border-radius:999px;
    background:linear-gradient(135deg, rgba(239,68,68,0.9), rgba(185,28,28,0.85));
    color:#fff; font-weight:600; font-size:14px;
    border:1px solid rgba(255,255,255,0.18);
    box-shadow: 0 10px 30px -10px rgba(239,68,68,0.6);
    transition: transform 300ms ease, box-shadow 300ms ease;
    cursor:pointer; text-decoration:none;
  }
  .nav-cta:hover{transform:translateY(-1px); box-shadow: 0 16px 40px -10px rgba(239,68,68,0.8)}
  .nav-burger{
    display:none; width:42px;height:42px;border-radius:12px;
    background:var(--glass); border:1px solid var(--glass-border);
    align-items:center; justify-content:center; cursor:pointer;
  }
  .nav-burger span{display:block;width:18px;height:1.5px;background:#fff;border-radius:2px;position:relative}
  .nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:#fff;border-radius:2px;transition:transform 300ms ease}
  .nav-burger span::before{top:-6px} .nav-burger span::after{top:6px}

  @media (max-width: 880px){
    .nav-links{display:none}
    .nav-cta.desk{display:none}
    .nav-burger{display:flex}
  }

  /* mobile drawer */
  .drawer-backdrop{
    position:fixed; inset:0; z-index:80;
    background:rgba(5,11,24,0.55);
    backdrop-filter: blur(8px);
    opacity:0; pointer-events:none;
    transition:opacity 300ms ease;
  }
  .drawer-backdrop.open{opacity:1; pointer-events:auto}
  .drawer{
    position:fixed; top:0; right:0; bottom:0; z-index:90;
    width:min(360px, 86vw);
    transform:translateX(100%);
    transition: transform 380ms cubic-bezier(.22,1,.36,1);
    background: linear-gradient(180deg, rgba(20,30,60,0.55), rgba(10,22,40,0.7));
    backdrop-filter: blur(28px) saturate(150%);
    border-left:1px solid var(--glass-border-strong);
    padding:28px 24px;
    display:flex; flex-direction:column; gap:8px;
  }
  .drawer.open{transform:translateX(0)}
  .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
  .drawer-close{width:36px;height:36px;border-radius:10px;background:var(--glass);border:1px solid var(--glass-border);color:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;}
  .drawer a{
    display:block; padding:14px 14px; border-radius:14px;
    color:var(--text); text-decoration:none; font-weight:600;
    border:1px solid transparent;
    transition: background 300ms ease, border-color 300ms ease, transform 300ms ease;
  }
  .drawer a:hover{background:var(--glass); border-color:var(--glass-border)}

  /* ───────────────────────── layout ───────────────────────── */
  .wrap{max-width:1200px; margin:0 auto; padding:0 24px}
  section{padding:120px 0 60px}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px; border-radius:999px;
    background:var(--glass); border:1px solid var(--glass-border);
    font-size:12px; font-weight:600; color:var(--blue-400);
    letter-spacing:0.08em;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--blue-400);box-shadow:0 0 10px var(--blue-400)}
  h1,h2,h3{font-weight:800; letter-spacing:-0.01em; line-height:1.2; margin:0}
  h2{font-size: clamp(28px, 4vw, 44px); font-weight:600}
  h3{font-size:20px; font-weight:600}
  p{color:var(--text-mute)}

  /* reveal */
  .reveal{opacity:0; transform:translateY(28px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,1,.36,1)}
  .reveal.in{opacity:1; transform:none}
  .reveal[data-d="1"]{transition-delay:80ms}
  .reveal[data-d="2"]{transition-delay:160ms}
  .reveal[data-d="3"]{transition-delay:240ms}
  .reveal[data-d="4"]{transition-delay:320ms}
  .reveal[data-d="5"]{transition-delay:400ms}

  /* ───────────────────────── hero ───────────────────────── */
  .hero{padding-top:170px; padding-bottom:80px; position:relative}
  .hero-grid{display:grid; grid-template-columns: 1.15fr 1fr; gap:64px; align-items:center}
  @media (max-width: 980px){ .hero-grid{grid-template-columns:1fr; gap:40px} }

  .hero h1{
    font-size: clamp(36px, 5.5vw, 68px);
    font-weight:800; line-height:1.1;
    background:linear-gradient(180deg, #ffffff 30%, #cbd5e1 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    margin:18px 0 22px;
  }
  .hero h1 .accent{
    background:linear-gradient(135deg, #60a5fa 10%, #a78bfa 60%, #60a5fa);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-fill-color:transparent;
  }
  .hero p.lede{
    font-size:18px; color:var(--text-mute); max-width:560px;
    line-height:1.9;
  }
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
  .btn{
    position:relative; isolation:isolate;
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 24px; border-radius:14px;
    font-weight:600; font-size:15px; cursor:pointer;
    border:1px solid var(--glass-border);
    color:#fff; text-decoration:none;
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
    overflow:hidden;
  }
  .btn-primary{
    background:linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 18px 40px -16px rgba(59,130,246,0.7), inset 0 1px 0 rgba(255,255,255,0.25);
  }
  .btn-primary::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,0.35) 45%, transparent 65%);
    transform:translateX(-100%);
    animation:shimmer 3.2s ease-in-out infinite;
  }
  @keyframes shimmer{
    0%{transform:translateX(-100%)}
    60%{transform:translateX(120%)}
    100%{transform:translateX(120%)}
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow: 0 24px 50px -16px rgba(59,130,246,0.9)}
  .btn-yt{
    background:linear-gradient(135deg, rgba(239,68,68,0.9), rgba(185,28,28,0.85));
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 18px 40px -16px rgba(239,68,68,0.7), inset 0 1px 0 rgba(255,255,255,0.25);
  }
  .btn-yt:hover{transform:translateY(-2px); box-shadow: 0 24px 50px -16px rgba(239,68,68,0.9)}
  .btn-ghost{
    background:var(--glass); backdrop-filter:blur(16px);
  }
  .btn-ghost:hover{border-color:var(--glass-border-strong); transform:translateY(-2px)}
  .btn .ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;}

  .hero-stats{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:44px;
    max-width:560px;
  }
  .stat{
    padding:16px 18px; border-radius:16px;
    background:var(--glass); border:1px solid var(--glass-border);
    backdrop-filter: blur(14px);
  }
  .stat .num{font-size:22px;font-weight:800;color:#fff; letter-spacing:0.01em}
  .stat .lbl{font-size:12px;color:var(--text-dim);font-weight:600;margin-top:2px}

  /* hero visual */
  .hero-vis{
    position:relative; aspect-ratio: 4/5; width:100%; max-width: 480px; margin-inline:auto;
    perspective: 1400px;
  }
  .panel{
    position:absolute; border-radius:24px;
    background:linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
    backdrop-filter: blur(22px) saturate(150%);
    border:1px solid var(--glass-border);
    box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255,255,255,0.08);
    overflow:hidden;
  }
  .panel.main{
    inset:8% 6% 18% 18%;
    transform: rotate3d(0,1,0,-8deg) rotate3d(1,0,0,3deg);
    animation: bobA 8s ease-in-out infinite;
  }
  .panel.side{
    width:55%; height:42%; right:-4%; top:8%;
    transform: rotate3d(0,1,0,12deg) rotate3d(1,0,0,-2deg);
    animation: bobB 9s ease-in-out infinite;
  }
  .panel.tag{
    width:55%; height:24%; left:-2%; bottom:6%;
    transform: rotate3d(0,1,0,-12deg);
    animation: bobA 11s ease-in-out infinite;
    padding:18px;
  }
  @keyframes bobA{
    0%,100%{transform: rotate3d(0,1,0,-8deg) rotate3d(1,0,0,3deg) translateY(0)}
    50%{transform: rotate3d(0,1,0,-8deg) rotate3d(1,0,0,3deg) translateY(-12px)}
  }
  @keyframes bobB{
    0%,100%{transform: rotate3d(0,1,0,12deg) rotate3d(1,0,0,-2deg) translateY(0)}
    50%{transform: rotate3d(0,1,0,12deg) rotate3d(1,0,0,-2deg) translateY(10px)}
  }

  /* profile image inside main panel */
  .panel.main .panel-profile{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center top;
    display:block;
  }
  .panel.main .panel-overlay{
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(7,15,31,0.88) 0%, transparent 55%);
    pointer-events:none; z-index:1;
  }
  .panel.main .meta{
    position:absolute; left:18px; right:18px; bottom:16px; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    font-size:12px; color:#cbd5e1;
  }
  .duration-pill{padding:4px 10px; border-radius:8px; background:rgba(0,0,0,0.55); font-weight:600; color:#fff}

  .panel.side .wave{
    position:absolute; inset:0;
    background: linear-gradient(135deg, rgba(96,165,250,0.18), rgba(139,92,246,0.22));
  }
  .eq{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-around; padding:18px}
  .eq i{display:block;width:6px;background:linear-gradient(180deg,#60a5fa,#8b5cf6); border-radius:3px; box-shadow:0 0 8px rgba(96,165,250,0.7); animation: bar 1.4s ease-in-out infinite}
  .eq i:nth-child(1){height:30%; animation-delay:.1s}
  .eq i:nth-child(2){height:65%; animation-delay:.25s}
  .eq i:nth-child(3){height:45%; animation-delay:.4s}
  .eq i:nth-child(4){height:78%; animation-delay:.05s}
  .eq i:nth-child(5){height:55%; animation-delay:.35s}
  .eq i:nth-child(6){height:38%; animation-delay:.2s}
  .eq i:nth-child(7){height:70%; animation-delay:.15s}
  .eq i:nth-child(8){height:48%; animation-delay:.3s}
  @keyframes bar{
    0%,100%{transform:scaleY(.6)}
    50%{transform:scaleY(1.05)}
  }

  .panel.tag .row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
  .panel.tag .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#60a5fa,#a78bfa);box-shadow:0 0 10px rgba(96,165,250,.6);flex-shrink:0;}
  .panel.tag .lbl{font-size:11px;color:var(--text-dim);font-weight:600}
  .panel.tag .ttl{font-size:13px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .panel.tag .bar{height:4px;border-radius:3px;background:rgba(255,255,255,0.12);margin-top:8px;overflow:hidden}
  .panel.tag .bar i{display:block;height:100%;width:72%;background:linear-gradient(90deg,#60a5fa,#a78bfa);box-shadow:0 0 10px rgba(96,165,250,0.6)}

  /* ───────────────────────── section heads ───────────────────────── */
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px;flex-wrap:wrap}
  .sec-head .lead{max-width:540px}
  .sec-head h2{margin-top:14px}
  .sec-head p{margin-top:10px}
  .sec-actions{display:flex;gap:10px;flex-wrap:wrap;}

  /* ───────────────────────── videos ───────────────────────── */
  .video-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  }
  @media (max-width: 980px){ .video-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width: 640px){ .video-grid{grid-template-columns:1fr} }

  .video-card{
    position:relative; border-radius:20px; overflow:hidden;
    background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border:1px solid var(--glass-border);
    backdrop-filter:blur(18px) saturate(140%);
    transform-style: preserve-3d;
    transition: transform 400ms cubic-bezier(.22,1,.36,1), box-shadow 400ms ease, border-color 400ms ease;
    will-change: transform;
    text-decoration:none;
    display:block;
  }
  .video-card:hover{
    border-color:var(--glass-border-strong);
    box-shadow: 0 30px 70px -30px rgba(59,130,246,0.55);
  }
  .video-thumb{
    position:relative; aspect-ratio:16/10; overflow:hidden;
  }
  .video-thumb .img{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    transition: transform 600ms ease;
  }
  .video-card:hover .video-thumb .img{transform:scale(1.06)}
  .video-thumb::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 40%, rgba(7,15,31,0.85));
  }
  .video-thumb .badge{
    position:absolute; top:12px; right:12px; z-index:2;
    background:rgba(239,68,68,0.95); color:#fff;
    padding:5px 10px; border-radius:8px; font-size:11px; font-weight:600;
    display:flex; align-items:center; gap:6px;
    box-shadow:0 0 18px rgba(239,68,68,0.5);
  }
  .video-thumb .badge .yt{width:14px;height:10px;background:#fff;border-radius:2px;position:relative;flex-shrink:0;}
  .video-thumb .badge .yt::after{content:"";position:absolute;left:5px;top:2px;width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:5px solid #ef4444}
  .video-thumb .play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.85);
    width:62px;height:62px;border-radius:50%;
    background:rgba(255,255,255,0.18); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.35);
    display:flex;align-items:center;justify-content:center;
    opacity:0; transition: opacity 350ms ease, transform 350ms ease;
    z-index:2;
  }
  .video-thumb .play::after{content:"";width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:14px solid #fff;margin-left:3px}
  .video-card:hover .video-thumb .play{opacity:1; transform:translate(-50%,-50%) scale(1)}

  .video-body{padding:18px 18px 20px}
  .video-cat{font-size:11px;letter-spacing:0.12em;color:var(--blue-400);font-weight:600;text-transform:uppercase}
  .video-title{font-size:16px; color:#fff; font-weight:600; line-height:1.55; margin:8px 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:50px;}
  .video-meta{display:flex;align-items:center;gap:14px;color:var(--text-dim);font-size:12px;font-weight:600}
  .video-meta span{display:inline-flex;align-items:center;gap:6px}
  .video-meta svg{width:12px;height:12px;opacity:.8}

  /* video loading / error state */
  .video-loading{
    grid-column:1/-1; text-align:center; padding:72px 24px;
    color:var(--text-dim); font-size:15px;
  }
  .video-loading .spinner{
    width:36px;height:36px;border-radius:50%;
    border:2px solid var(--glass-border);
    border-top-color:var(--blue-400);
    animation:spin 0.8s linear infinite;
    margin:0 auto 16px;
  }
  @keyframes spin{to{transform:rotate(360deg)}}

  /* load more */
  .load-more-wrap{text-align:center;margin-top:48px;}

  /* ───────────────────────── downloads ───────────────────────── */
  .dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media (max-width: 900px){ .dl-grid{grid-template-columns:1fr} }

  .dl-card{
    position:relative;
    display:flex; flex-direction:column; gap:14px;
    padding:24px;
    border-radius:20px;
    background:linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    border:1px solid var(--glass-border);
    backdrop-filter:blur(18px);
    transition: transform 300ms ease, border-color 300ms ease;
    overflow:hidden;
    text-decoration:none;
  }
  .dl-card::before{
    content:""; position:absolute; inset:-1px; border-radius:inherit;
    background:radial-gradient(60% 80% at 80% 0%, rgba(96,165,250,0.18), transparent 60%);
    opacity:0; transition:opacity 400ms ease;
    pointer-events:none;
  }
  .dl-card:hover{transform:translateY(-4px); border-color:var(--glass-border-strong)}
  .dl-card:hover::before{opacity:1}

  .dl-icon{
    width:56px;height:56px;border-radius:16px;
    background:linear-gradient(135deg, rgba(59,130,246,0.25), rgba(139,92,246,0.2));
    border:1px solid rgba(96,165,250,0.35);
    display:flex; align-items:center; justify-content:center;
    color:#cbd5e1;
    animation: glowPulse 3.6s ease-in-out infinite;
  }
  @keyframes glowPulse{
    0%,100%{box-shadow: 0 0 0 0 rgba(96,165,250,0.0)}
    50%{box-shadow: 0 0 28px 0 rgba(96,165,250,0.45)}
  }
  .dl-icon svg{width:26px;height:26px}
  .dl-icon.word{background:linear-gradient(135deg, rgba(37,99,235,0.3), rgba(29,78,216,0.2)); border-color:rgba(96,165,250,0.4);}
  .dl-icon.excel{background:linear-gradient(135deg, rgba(22,163,74,0.3), rgba(21,128,61,0.2)); border-color:rgba(74,222,128,0.4); color:#86efac;}
  .dl-icon.ppt{background:linear-gradient(135deg, rgba(234,88,12,0.3), rgba(194,65,12,0.2)); border-color:rgba(251,146,60,0.4); color:#fdba74;}

  .dl-body{flex:1}
  .dl-type{font-size:11px; letter-spacing:0.12em; font-weight:600; color:var(--purple-400); text-transform:uppercase; margin-bottom:8px;}
  .dl-title{font-size:17px;color:#fff;font-weight:700;line-height:1.4;margin-bottom:8px;}
  .dl-desc{font-size:13px; color:var(--text-dim); line-height:1.7;}

  .dl-action{
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px; border-radius:12px;
    background:linear-gradient(135deg, rgba(59,130,246,0.9), rgba(139,92,246,0.85));
    color:#fff; font-size:13px; font-weight:600;
    border:1px solid rgba(255,255,255,0.18);
    box-shadow: 0 12px 28px -12px rgba(59,130,246,0.7);
    transition: transform 300ms ease, box-shadow 300ms ease;
    align-self:flex-start;
  }
  .dl-card:hover .dl-action{transform:translateY(-1px) scale(1.02); box-shadow:0 18px 36px -12px rgba(59,130,246,0.9)}

  /* ───────────────────────── about ───────────────────────── */
  .about{display:grid; grid-template-columns: 1fr 1.1fr; gap:48px; align-items:center}
  @media (max-width: 980px){ .about{grid-template-columns:1fr} }
  .about-vis{
    position:relative; aspect-ratio: 1/1; max-width:420px; margin-inline:auto;
  }
  .about-vis .ring{
    position:absolute; inset:0; border-radius:50%;
    border:1px solid rgba(96,165,250,0.18);
    animation: rot 30s linear infinite;
  }
  .about-vis .ring.r2{inset:8%; border-color:rgba(139,92,246,0.18); animation-direction:reverse; animation-duration:42s}
  .about-vis .ring.r3{inset:18%; border-color:rgba(96,165,250,0.25); animation-duration:24s}
  @keyframes rot{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  .about-vis .dot{
    position:absolute; width:14px;height:14px;border-radius:50%;
    background:#60a5fa; box-shadow:0 0 18px #60a5fa;
    top:-7px; left:50%; transform:translateX(-50%);
  }
  .about-vis .r2 .dot{background:#a78bfa; box-shadow:0 0 18px #a78bfa}
  .about-vis .core{
    position:absolute; inset:26%; border-radius:50%;
    overflow:hidden;
    box-shadow: 0 0 80px rgba(96,165,250,0.55), 0 0 0 3px rgba(96,165,250,0.25), 0 0 0 6px rgba(139,92,246,0.12);
  }
  .about-vis .core img{
    width:100%; height:100%; object-fit:cover; object-position:center top;
    display:block;
  }

  .about-feats{display:grid; gap:14px; margin-top:28px}
  .feat{
    display:flex; gap:14px; padding:18px;
    border-radius:16px;
    background:var(--glass); border:1px solid var(--glass-border);
    backdrop-filter:blur(14px);
    transition: border-color 300ms ease, transform 300ms ease;
  }
  .feat:hover{border-color:var(--glass-border-strong); transform:translateX(-4px)}
  .feat-ico{
    flex:none; width:42px;height:42px;border-radius:12px;
    background:linear-gradient(135deg, rgba(59,130,246,0.3), rgba(139,92,246,0.2));
    border:1px solid rgba(96,165,250,0.3);
    display:flex;align-items:center;justify-content:center; color:#fff;
  }
  .feat-ico svg{width:20px;height:20px}
  .feat-body h4{margin:0 0 4px;font-size:15px;font-weight:600;color:#fff}
  .feat-body p{margin:0; font-size:13px; color:var(--text-dim); line-height:1.7}

  /* ───────────────────────── youtube cta ───────────────────────── */
  .yt-cta{
    padding:52px;
    border-radius:28px;
    background:
      radial-gradient(60% 100% at 100% 0%, rgba(239,68,68,0.18), transparent 60%),
      radial-gradient(60% 100% at 0% 100%, rgba(59,130,246,0.18), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border:1px solid var(--glass-border);
    backdrop-filter:blur(22px);
    text-align:center;
    position:relative; overflow:hidden;
  }
  .yt-cta h2{font-weight:800; max-width:680px; margin:14px auto 12px}
  .yt-cta p{max-width:540px; margin:0 auto 32px}
  @media (max-width: 640px){.yt-cta{padding:36px 24px}}

  /* ───────────────────────── footer ───────────────────────── */
  footer{
    padding:60px 0 40px; border-top:1px solid rgba(255,255,255,0.06);
    margin-top:80px;
  }
  .foot-grid{display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px}
  @media (max-width: 880px){ .foot-grid{grid-template-columns:1fr 1fr; gap:32px} }
  @media (max-width: 480px){ .foot-grid{grid-template-columns:1fr} }
  .foot h5{font-size:13px; font-weight:600; color:#fff; margin:0 0 16px; letter-spacing:0.04em}
  .foot ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
  .foot a{color:var(--text-dim); text-decoration:none; font-size:13px; transition:color 300ms ease}
  .foot a:hover{color:#fff}
  .foot p.foot-desc{font-size:13px; color:var(--text-dim); max-width:300px; line-height:1.8; margin:14px 0 0;}
  .socials{display:flex;gap:10px;margin-top:18px}
  .socials a{
    width:36px;height:36px;border-radius:10px;
    background:var(--glass); border:1px solid var(--glass-border);
    display:flex;align-items:center;justify-content:center;
    transition: all 300ms ease; color:var(--text-mute);
  }
  .socials a:hover{border-color:var(--glass-border-strong); transform:translateY(-2px); color:#fff}
  .socials svg{width:16px;height:16px}
  .foot-bot{
    margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.06);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    font-size:12px; color:var(--text-dim); font-family:"JetBrains Mono", monospace;
  }

  /* ───────────────────────── scroll progress ───────────────────────── */
  .scroll-progress{
    position:fixed; top:0; left:0; right:0; z-index:200;
    height:3px;
    background:linear-gradient(90deg, #3b82f6, #8b5cf6, #60a5fa);
    transform-origin:left;
    transform:scaleX(0);
  }

  /* ───────────────────────── tabs ───────────────────────── */
  .tabs-wrap{
    display:flex; gap:6px; flex-wrap:wrap;
    margin-bottom:36px;
    border-bottom:1px solid var(--glass-border);
    padding-bottom:0;
  }
  .tab-btn{
    display:flex; align-items:center; gap:9px;
    padding:12px 20px;
    border-radius:14px 14px 0 0;
    background:transparent; border:none;
    border-bottom:2px solid transparent;
    color:var(--text-dim); font-size:14px; font-weight:600;
    cursor:pointer; font-family:inherit;
    margin-bottom:-1px;
    transition: all 300ms ease;
  }
  .tab-btn:hover{ color:var(--text); background:var(--glass) }
  .tab-btn.active{
    color:#fff; background:var(--glass);
    border-bottom-color:var(--blue-400);
  }
  .tab-ico{
    width:26px; height:26px; border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; flex-shrink:0;
  }
  .tab-ico.all{ background:linear-gradient(135deg,rgba(59,130,246,0.3),rgba(139,92,246,0.2)); border:1px solid rgba(96,165,250,0.3); color:#60a5fa }
  .tab-ico.word{ background:linear-gradient(135deg,rgba(37,99,235,0.3),rgba(29,78,216,0.2)); border:1px solid rgba(96,165,250,0.4); color:#60a5fa }
  .tab-ico.excel{ background:linear-gradient(135deg,rgba(22,163,74,0.3),rgba(21,128,61,0.2)); border:1px solid rgba(74,222,128,0.4); color:#86efac }
  .tab-ico.ppt{ background:linear-gradient(135deg,rgba(234,88,12,0.3),rgba(194,65,12,0.2)); border:1px solid rgba(251,146,60,0.4); color:#fdba74 }
  .tab-ico.windows{ background:linear-gradient(135deg,rgba(16,185,129,0.3),rgba(5,150,105,0.2)); border:1px solid rgba(52,211,153,0.4); color:#6ee7b7 }
  .tab-count{
    padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600;
    background:var(--glass); border:1px solid var(--glass-border); color:var(--text-dim);
    min-width:26px; text-align:center;
  }
  .tab-btn.active .tab-count{
    background:rgba(96,165,250,0.15); border-color:rgba(96,165,250,0.3); color:var(--blue-400);
  }

  /* ───────────────────────── grouped category sections ───────────────────────── */
  .cat-section-label{
    grid-column:1/-1;
    display:flex; align-items:center; gap:14px;
    padding:36px 0 18px;
    border-bottom:1px solid var(--glass-border);
    margin-bottom:4px;
  }
  .cat-section-label:first-child{ padding-top:4px }
  .cat-section-label h3{
    font-size:20px; font-weight:700; color:#fff; margin:0; flex:1;
  }
  .cat-view-all{
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 16px; border-radius:999px;
    background:var(--glass); border:1px solid var(--glass-border);
    color:var(--blue-400); font-size:13px; font-weight:600;
    cursor:pointer; transition: all 300ms ease; font-family:inherit;
  }
  .cat-view-all:hover{ border-color:var(--glass-border-strong); color:#fff }

  /* ───────────────────────── nav dropdown ───────────────────────── */
  .nav-dropdown{ position:relative }
  .nav-dropdown-trigger{
    display:flex; align-items:center; gap:6px;
    padding:8px 14px; border-radius:999px;
    background:transparent; border:none;
    color:var(--text-mute); font-size:14px; font-weight:600;
    cursor:pointer; font-family:inherit;
    transition:color 300ms ease;
  }
  .nav-dropdown-trigger:hover{ color:#fff }
  .nav-dropdown-trigger .chev{
    width:14px; height:14px; transition:transform 300ms ease; opacity:.7;
  }
  .nav-dropdown.open .chev{ transform:rotate(180deg) }
  .nav-dropdown.open .nav-dropdown-trigger{ color:#fff }

  .nav-dropdown-menu{
    position:absolute; top:calc(100% + 10px); right:0;
    min-width:230px;
    border-radius:18px;
    padding:8px;
    display:flex; flex-direction:column; gap:2px;
    opacity:0; pointer-events:none;
    transform:translateY(-10px) scale(0.97);
    transform-origin:top right;
    transition:opacity 220ms ease, transform 220ms ease;
    z-index:200;
    background: rgba(10, 18, 38, 0.92) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(96,165,250,0.15) !important;
  }
  html[data-theme="light"] .nav-dropdown-menu{
    background: rgba(240, 244, 255, 0.96) !important;
    box-shadow: 0 24px 60px -12px rgba(0,0,0,0.15), 0 0 0 1px rgba(59,130,246,0.15) !important;
  }
  .nav-dropdown.open .nav-dropdown-menu{
    opacity:1; pointer-events:auto; transform:none;
  }
  .nav-dd-item{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; border-radius:12px;
    color:var(--text-mute); text-decoration:none;
    font-size:14px; font-weight:600;
    transition:background 220ms ease, color 220ms ease;
    cursor:pointer; border:none; background:none; font-family:inherit; width:100%;
    text-align:right;
  }
  .nav-dd-item:hover{ background:var(--glass); color:#fff }
  .nav-dd-sep{
    height:1px; background:var(--glass-border); margin:4px 0;
  }

  /* ───────────────────────── theme toggle button ───────────────────────── */
  .theme-toggle{
    width:38px; height:38px; border-radius:12px;
    background:var(--glass); border:1px solid var(--glass-border);
    color:var(--text-mute); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition: all 300ms ease; flex-shrink:0;
  }
  .theme-toggle:hover{ border-color:var(--glass-border-strong); color:var(--text) }
  .icon-moon{ display:none }
  html[data-theme="light"] .icon-sun{ display:none }
  html[data-theme="light"] .icon-moon{ display:block }

  /* ───────────────────────── light mode ───────────────────────── */
  html[data-theme="light"]{
    --navy-900:#f0f4ff;
    --navy-800:#e8edf8;
    --navy-700:#dce4f5;
    --navy-600:#c8d5ee;
    --text:#0f172a;
    --text-mute:#334155;
    --text-dim:#64748b;
    --glass:rgba(255,255,255,0.75);
    --glass-strong:rgba(255,255,255,0.92);
    --glass-border:rgba(59,130,246,0.15);
    --glass-border-strong:rgba(59,130,246,0.45);
    --shadow-blue:0 20px 60px -20px rgba(59,130,246,0.2);
    --shadow-deep:0 30px 80px -30px rgba(0,0,0,0.12);
  }
  html[data-theme="light"] body{ background:#f0f4ff }
  html[data-theme="light"] .bg-stage{
    background:
      radial-gradient(60% 40% at 80% 0%, rgba(139,92,246,0.07), transparent 60%),
      radial-gradient(70% 50% at 10% 30%, rgba(59,130,246,0.09), transparent 60%),
      linear-gradient(180deg, #e8edf8 0%, #f0f4ff 40%, #eef2ff 100%);
  }
  html[data-theme="light"] .bg-stage::before{ opacity:0.12 }
  html[data-theme="light"] .orb{ opacity:0.15 }
  html[data-theme="light"] .hero h1{
    background:linear-gradient(180deg, #0f172a 30%, #334155 100%);
    -webkit-background-clip:text; background-clip:text;
  }
  html[data-theme="light"] .video-card,
  html[data-theme="light"] .dl-card,
  html[data-theme="light"] .feat,
  html[data-theme="light"] .testi-card,
  html[data-theme="light"] .stat{
    background:rgba(255,255,255,0.82);
  }
  html[data-theme="light"] .video-title,
  html[data-theme="light"] .dl-title,
  html[data-theme="light"] .feat-body h4,
  html[data-theme="light"] .testi-name,
  html[data-theme="light"] .stat .num{ color:#0f172a }
  html[data-theme="light"] .yt-cta{
    background:
      radial-gradient(60% 100% at 100% 0%, rgba(239,68,68,0.08), transparent 60%),
      radial-gradient(60% 100% at 0% 100%, rgba(59,130,246,0.08), transparent 60%),
      rgba(255,255,255,0.75);
  }
  html[data-theme="light"] .panel.main .panel-overlay{
    background:linear-gradient(0deg, rgba(240,244,255,0.9) 0%, transparent 55%);
  }
  html[data-theme="light"] .panel.main .meta{ color:#334155 }
  html[data-theme="light"] .duration-pill{ background:rgba(255,255,255,0.75); color:#0f172a }
  html[data-theme="light"] .drawer{
    background:linear-gradient(180deg, rgba(240,244,255,0.97), rgba(232,237,248,0.99));
    border-left-color:rgba(59,130,246,0.2);
  }
  html[data-theme="light"] footer{ border-top-color:rgba(0,0,0,0.08) }
  html[data-theme="light"] .foot-bot{ border-top-color:rgba(0,0,0,0.08) }

  /* ───────────────────────── back to top ───────────────────────── */
  .back-top{
    position:fixed; bottom:32px; left:32px; z-index:50;
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg, rgba(59,130,246,0.9), rgba(139,92,246,0.85));
    border:1px solid rgba(255,255,255,0.18);
    box-shadow: 0 12px 28px -12px rgba(59,130,246,0.7);
    color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transform:translateY(16px) scale(0.85);
    transition: opacity 300ms ease, transform 300ms ease, box-shadow 300ms ease;
    pointer-events:none;
  }
  .back-top.show{opacity:1; transform:none; pointer-events:auto}
  .back-top:hover{transform:translateY(-3px) !important; box-shadow:0 18px 36px -12px rgba(59,130,246,0.9)}

  /* ───────────────────────── learning paths ───────────────────────── */
  .paths-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  @media (max-width:980px){.paths-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.paths-grid{grid-template-columns:1fr}}
  .path-card{display:flex; align-items:center; gap:16px; padding:20px; border-radius:18px; text-decoration:none; transition:transform 300ms ease}
  .path-card:hover{transform:translateY(-3px)}
  .path-body{display:flex; flex-direction:column; gap:4px; flex:1; min-width:0}
  .path-body strong{color:var(--text); font-size:17px; font-weight:700}
  .path-body span{color:var(--text-dim); font-size:13px; line-height:1.7}
  .path-arrow{color:var(--blue-400); font-size:20px; transition:transform 300ms ease}
  .path-card:hover .path-arrow{transform:translateX(-4px)}
  .tab-ico.icdl{ background:linear-gradient(135deg,rgba(245,158,11,0.3),rgba(217,119,6,0.2)); border:1px solid rgba(251,191,36,0.4); color:#fcd34d }
  .tab-ico.swedish{ background:linear-gradient(135deg,rgba(14,116,184,0.35),rgba(250,204,21,0.2)); border:1px solid rgba(250,204,21,0.45); color:#fde047 }