:root { --mono: 'JetBrains Mono', monospace; --disp: 'Bebas Neue', sans-serif; }

    /* ───────── HERO video ───────── */
    .hero {
      position: relative; width: 100%; height: 100svh; min-height: 580px;
      overflow: hidden; display: flex; flex-direction: column;
      align-items: center; justify-content: center; text-align: center;
    }
    .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
    .hero-bg video {
      /* Vidéo décalée à gauche : le visage du musicien sort de la zone centrale
         où vit le logo. Léger zoom (105%) pour qu'aucun bord ne se voit après shift. */
      position: absolute; top: 0; bottom: 0;
      width: 110%; height: 100%; left: -22%;
      object-fit: cover; object-position: center 30%;
      filter: saturate(.8) brightness(.7);
    }
    /* Sur mobile, on annule le shift (110%/-22%) sinon la vidéo déborde du
       viewport et déclenche un scroll horizontal sous ~350px. Le visage reste
       lisible en object-position centrée. */
    @media (max-width: 600px) {
      .hero-bg video { width: 100%; left: 0; }
    }
    .hero-bg::after {
      content: ''; position: absolute; inset: 0;
      background:
        /* Fondu horizontal : transparent à gauche (on voit la vidéo),
           noir vers la droite (cale le décor du logo + texte). */
        linear-gradient(90deg,
          rgba(10,10,11,0) 0%,
          rgba(10,10,11,0) 30%,
          rgba(10,10,11,.55) 55%,
          rgba(10,10,11,.92) 80%,
          var(--bg) 100%),
        /* Vignettage vertical léger (lisibilité du texte en bas). */
        linear-gradient(180deg,
          rgba(10,10,11,.1) 0%,
          rgba(10,10,11,.25) 60%,
          rgba(10,10,11,.7) 85%,
          var(--bg) 100%);
    }
    .hero-cnt {
      position: relative; z-index: 2; padding: 0 24px;
      max-width: 720px; margin: 0 auto; width: 100%;
    }
    .hero-icon {
      display: block; margin: 0 auto 12px;
      width: clamp(180px, 19vw, 260px); height: auto;
      filter: drop-shadow(0 0 32px rgba(232,255,58,.25));
    }
    /* Halo noir doux derrière le texte hero : améliore drastiquement la lisibilité
       sur la moitié gauche de la vidéo SANS l'assombrir (le fond, lui, reste tel quel). */
    .hero-wm {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(76px, 12vw, 148px); line-height: .9;
      letter-spacing: -4px; margin-bottom: 18px;
      text-shadow: 0 4px 24px rgba(0,0,0,.85), 0 0 48px rgba(0,0,0,.6);
    }
    .hero-wm .j { font-weight: 300; color: var(--muted); }
    .hero-wm .o { font-weight: 900; color: var(--accent); }
    .hero-wm .d { font-weight: 700; color: var(--text); }
    .hero-tag {
      font-family: var(--disp);
      font-size: clamp(16px, 2.2vw, 28px); letter-spacing: 6px;
      color: var(--text); margin-bottom: 22px;
      text-shadow: 0 2px 14px rgba(0,0,0,.9), 0 0 24px rgba(0,0,0,.7);
    }
    .hero-tag .accent { color: var(--accent); }
    .hero-desc {
      font-size: clamp(15px, 1.4vw, 17px); color: #d8d8de;
      line-height: 1.75; max-width: 540px; margin: 0 auto 34px;
      text-shadow: 0 1px 10px rgba(0,0,0,.95), 0 0 20px rgba(0,0,0,.75);
    }
    .hero-desc strong { color: var(--text); }
    .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .hero-cta .cta { padding: 14px 28px; font-size: 15px; }
    .hero-scroll {
      position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
      z-index: 2; animation: bounce 2.5s ease-in-out infinite;
    }
    @keyframes bounce {
      0%,100% { transform: translateX(-50%) translateY(0); }
      50%     { transform: translateX(-50%) translateY(7px); }
    }
    @media (prefers-reduced-motion: reduce) { .hero-scroll { animation: none; } }

    /* ───────── BROWSER MOCKUP ───────── */
    /* overflow:clip = clip le halo décoratif (inset -60px -40px) qui débordait
       en mobile et créait un scroll horizontal sur tout le document. */
    .browser-section { background: var(--bg); padding: 0 clamp(16px,3vw,40px) 80px; position: relative; z-index: 1; overflow: clip; }
    .browser-scene { width: 100%; max-width: 1040px; margin: 0 auto; position: relative; }
    .browser-halo {
      position: absolute; inset: -60px -40px;
      background: radial-gradient(ellipse at 50% 60%,
        rgba(232,255,58,.10) 0%, rgba(58,255,140,.04) 40%, transparent 70%);
      filter: blur(40px); opacity: 0; pointer-events: none; z-index: 0;
      transition: opacity 1.2s ease;
    }
    .browser-scene.lit .browser-halo { opacity: 1; }
    .browser-frame {
      position: relative; z-index: 1;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; overflow: hidden;
      box-shadow:
        0 60px 130px rgba(0,0,0,.75),
        0 0 0 1px rgba(255,255,255,.03),
        0 0 60px rgba(232,255,58,.04);
    }
    .browser-bar {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 18px; background: #0c0c0e;
      border-bottom: 1px solid var(--border);
    }
    .browser-dots { display: flex; gap: 6px; }
    .browser-dots span { width: 11px; height: 11px; border-radius: 50%; }
    .browser-url {
      flex: 1; background: var(--surface2); border-radius: 6px;
      padding: 4px 14px; font-family: var(--mono); font-size: 10px;
      color: var(--muted); text-align: center;
    }
    .browser-stat {
      display: flex; align-items: center; gap: 6px;
      font-family: var(--mono); font-size: 10px; color: var(--green);
    }
    .browser-stat::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: var(--green);
    }
    .browser-screen { position: relative; overflow: hidden; }
    .browser-screen img { width: 100%; display: block; }
    .browser-screen::after {
      content: ''; position: absolute; top: -20%; left: 0; right: 0;
      height: 40%;
      background: linear-gradient(180deg,
        transparent 0%,
        rgba(232,255,58,.04) 40%,
        rgba(232,255,58,.08) 50%,
        rgba(232,255,58,.04) 60%,
        transparent 100%);
      animation: scan 5s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes scan {
      0% { top: -20%; }
      60%,100% { top: 110%; }
    }
    @media (prefers-reduced-motion: reduce) { .browser-screen::after { animation: none; display: none; } }
    .browser-edge {
      position: absolute; bottom: -2px; left: 5%; right: 5%; height: 3px;
      background: linear-gradient(90deg, transparent,
        rgba(232,255,58,.35), rgba(58,255,140,.2), rgba(232,255,58,.35), transparent);
      border-radius: 2px; opacity: 0;
      transition: opacity 1s ease .5s;
    }
    .browser-scene.lit .browser-edge { opacity: 1; }

    /* ───────── Section générique ───────── */
    section.block {
      max-width: var(--maxw); margin: 0 auto;
      padding: 88px clamp(16px, 3vw, 40px);
      border-top: 1px solid var(--border);
    }
    h2 {
      font-family: var(--disp);
      font-size: clamp(36px, 5vw, 68px);
      letter-spacing: 2px; line-height: 1.02;
    }
    h2 .accent { color: var(--accent); }
    .lede {
      font-size: 16px; color: var(--muted); line-height: 1.75;
      max-width: 620px; margin-top: 18px;
    }
    .lede strong { color: var(--text); }

    /* ───────── DIFF cards ───────── */
    .diff-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin-top: 44px;
    }
    .diff-card {
      padding: 26px 22px; background: var(--surface);
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      transition: border-color .15s, transform .15s;
    }
    .diff-card:hover { border-color: rgba(232,255,58,.25); transform: translateY(-3px); }
    .diff-card-icon { font-size: 26px; margin-bottom: 14px; }
    .diff-card h3 { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
    .diff-card p { font-size: 13px; color: var(--muted); line-height: 1.65; }
    .diff-card-tag { font-family: var(--mono); font-size: 9.5px; color: var(--accent); margin-top: 10px; }
    @media (max-width: 720px) { .diff-grid { grid-template-columns: 1fr; } }

    /* ───────── PLUGINS AUDIO (S1+S2 INSERT, 2026-05-12) ─────────
       Section dédiée pour la feature "ajouter des plugins AU dans
       la mixette" — différenciateur clé vs JamKazam/JamTaba/SonoBus
       qui n'ont pas d'intégration plugin native. */
    .plg-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 18px; margin-top: 38px;
    }
    .plg-card {
      padding: 26px 24px; background: var(--surface);
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      transition: border-color .15s, transform .15s;
      position: relative;
    }
    .plg-card:hover { border-color: rgba(183,148,255,.35); transform: translateY(-3px); }
    .plg-icon { font-size: 30px; margin-bottom: 14px; line-height: 1; }
    .plg-title { font-weight: 700; font-size: 17px; margin-bottom: 10px; color: var(--text); }
    .plg-desc { font-size: 14px; color: var(--muted); line-height: 1.65; }
    .plg-tag {
      position: absolute; top: 16px; right: 16px;
      font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
      text-transform: uppercase; color: #b794ff;
      background: rgba(183,148,255,.1);
      border: 1px solid rgba(183,148,255,.25);
      padding: 3px 8px; border-radius: 99px;
    }
    @media (max-width: 800px) { .plg-grid { grid-template-columns: 1fr; gap: 14px; } }

    .plg-meta {
      margin-top: 28px; display: flex; flex-direction: column; gap: 10px;
      padding: 22px 26px;
      background: linear-gradient(135deg, rgba(232,255,58,.04), rgba(183,148,255,.04));
      border: 1px solid var(--border); border-radius: var(--radius-lg);
    }
    .plg-meta-row {
      display: flex; align-items: flex-start; gap: 12px;
      font-size: 14px; color: var(--muted);
    }
    .plg-tick {
      color: var(--accent); font-weight: 700; flex-shrink: 0;
      font-family: var(--mono);
    }
    .plg-cta {
      margin-top: 28px; text-align: center;
    }

    /* ───────── IMAGE SPLIT ───────── */
    .img-split {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 56px; align-items: center; margin-top: 48px;
    }
    .img-split.rev > .img-copy { order: 2; }
    .img-split.rev > .img-clean-wrap { order: 1; }
    .img-copy { display: flex; flex-direction: column; gap: 16px; }
    .img-copy h3 {
      font-family: var(--disp);
      font-size: clamp(26px, 3.2vw, 42px);
      letter-spacing: 2px; line-height: 1.05;
    }
    .img-copy h3 .accent { color: var(--accent); }
    .img-copy p { font-size: 14.5px; color: var(--muted); line-height: 1.75; }
    .img-copy p strong { color: var(--text); }
    .ftags { display: flex; flex-wrap: wrap; gap: 8px; }
    .tag {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: 99px;
      font-family: var(--mono); font-size: 10px;
    }
    .tag-g { background: rgba(58,255,140,.07);  border: 1px solid rgba(58,255,140,.2);  color: var(--green); }
    .tag-y { background: rgba(232,255,58,.07);  border: 1px solid rgba(232,255,58,.2);  color: var(--accent); }
    .tag-w { background: rgba(255,255,255,.04); border: 1px solid var(--border);        color: var(--muted); }
    .img-clean {
      border-radius: var(--radius-lg); overflow: hidden;
      border: 1px solid var(--border); box-shadow: 0 28px 80px rgba(0,0,0,.5);
    }
    .img-clean img { width: 100%; display: block; }
    @media (max-width: 800px) {
      .img-split { grid-template-columns: 1fr; }
      .img-split.rev > .img-copy,
      .img-split.rev > .img-clean-wrap { order: initial; }
    }

    /* ───────── TECH ───────── */
    .tech-schema {
      display: block; width: 100%; max-width: 720px;
      margin: 44px auto 0; height: auto;
    }
    .tech-schema text { font-family: var(--mono); }
    .tech-schema .ts-engine-bg { fill: rgba(232,255,58,.06); stroke: var(--accent); stroke-width: 1.5; }
    .tech-schema .ts-engine-label { fill: var(--accent); font-size: 12px; letter-spacing: 2px; }
    .tech-schema .ts-engine-sub   { fill: var(--muted); font-size: 9.5px; letter-spacing: 1.5px; font-family: 'DM Sans',sans-serif; }
    .tech-schema .ts-box       { fill: rgba(255,255,255,.03); stroke: var(--border); stroke-width: 1; }
    .tech-schema .ts-box-label { fill: var(--text);  font-size: 10px; letter-spacing: 2px; }
    .tech-schema .ts-box-sub   { fill: var(--muted); font-size: 9px;  letter-spacing: 1.5px; }
    .tech-schema .ts-line-dash { stroke: rgba(232,255,58,.45); stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; }
    .tech-schema .ts-line-solid { stroke: var(--border); stroke-width: 1; fill: none; }
    .tech-schema .ts-musician-bg { fill: rgba(58,255,140,.06); stroke: var(--green); stroke-width: 1.2; }
    .tech-schema .ts-pulse { animation: ts-pulse 2.4s ease-in-out infinite; }
    @keyframes ts-pulse {
      0%,100% { opacity: .35; }
      50%     { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .tech-schema .ts-pulse { animation: none; opacity: .6; }
    }

    .tech-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 64px; align-items: start; margin-top: 52px;
    }
    .tech-intro p { font-size: clamp(14px, 1.4vw, 16px); color: var(--muted); line-height: 1.85; margin-bottom: 22px; }
    .tech-intro p strong { color: var(--text); }
    .tech-note {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 16px 18px; background: rgba(232,255,58,.03);
      border: 1px solid rgba(232,255,58,.1); border-radius: var(--radius-lg);
      font-size: 13px; color: var(--muted);
    }
    .tech-note span:first-child { color: var(--accent); font-size: 17px; flex-shrink: 0; margin-top: 1px; }
    .tech-list { display: flex; flex-direction: column; gap: 12px; }
    .tech-card {
      display: flex; gap: 16px; padding: 18px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      transition: border-color .15s, transform .15s;
    }
    .tech-card:hover { border-color: rgba(232,255,58,.25); transform: translateX(4px); }
    .tech-card-ico {
      width: 40px; height: 40px; flex-shrink: 0; border-radius: 9px;
      background: rgba(232,255,58,.07); border: 1px solid rgba(232,255,58,.12);
      display: flex; align-items: center; justify-content: center; font-size: 17px;
    }
    .tech-card h4 { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
    .tech-card p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
    .tech-card-tag { font-family: var(--mono); font-size: 9px; color: var(--accent); margin-top: 6px; }
    @media (max-width: 800px) { .tech-grid { grid-template-columns: 1fr; gap: 32px; } }

    /* ───────── LIFE GRID (Pour qui — 4 personas) ───────── */
    .life-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      margin-top: 52px; border-radius: 24px; overflow: hidden;
      border: 1px solid var(--border);
    }
    .life-card { position: relative; overflow: hidden; background: var(--surface2); }
    .life-card img {
      width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center 20%;
      filter: saturate(.55) brightness(.58);
      transition: filter .6s, transform .7s;
      display: block;
    }
    .life-card:hover img { filter: saturate(.8) brightness(.72); transform: scale(1.04); }
    .life-card::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to bottom, transparent 25%,
        rgba(10,10,11,.5) 55%, rgba(10,10,11,.9) 100%);
      pointer-events: none;
    }
    .life-card:not(:last-child) { border-right: 1px solid var(--border); }
    /* Body ancré en bas du card. Display flex column pour piloter
       l'alignement vertical title/desc malgré des longueurs variables. */
    .life-body {
      position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
      padding: 0 26px 30px;
      display: flex; flex-direction: column;
    }
    .life-title {
      font-family: var(--disp);
      font-size: clamp(22px, 2.5vw, 30px);
      letter-spacing: 2px; line-height: 1.08; margin-bottom: 10px;
      /* min-height calé sur 2 lignes Bebas Neue 30px*1.08 ≈ 65px →
         garantit que les titres 1-ligne (rare) s'alignent quand même. */
      min-height: 65px;
    }
    /* min-height ≈ 5 lignes de DM Sans 13px ligne 1.55. Aligne les
       descriptions de longueur variable pour que les titres au-dessus
       soient tous à la même hauteur. */
    .life-desc {
      font-size: 13px; color: rgba(255,255,255,.65);
      line-height: 1.55; max-width: 230px;
      min-height: 105px;
    }
    @media (max-width: 1000px) {
      .life-grid { grid-template-columns: repeat(2, 1fr); }
      .life-card:nth-child(2n) { border-right: none; }
      .life-card:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    }
    @media (max-width: 600px) {
      .life-grid { grid-template-columns: 1fr; }
      .life-card { border-right: none !important; }
      .life-card:not(:last-child) { border-bottom: 1px solid var(--border); }
      .life-card img { aspect-ratio: 4/3; }
      .life-body { padding: 0 22px 24px; }
      .life-title { min-height: 0; margin-bottom: 8px; }
      .life-desc { min-height: 0; max-width: none; }
    }

    /* ───────── TIMELINE ───────── */
    .tl-wrap { margin-top: 60px; position: relative; }
    .tl-track { display: flex; align-items: flex-start; position: relative; }
    .tl-track::before {
      content: ''; position: absolute; top: 19px;
      left: calc(100%/6); right: calc(100%/6);
      height: 1px; background: var(--border);
    }
    .tl-prog {
      position: absolute; top: 19px; left: calc(100%/6);
      width: 0; height: 1px; background: var(--accent);
      box-shadow: 0 0 8px rgba(232,255,58,.5);
      transition: width 2s cubic-bezier(.4,0,.2,1) .3s;
    }
    .tl-wrap.go .tl-prog { width: calc(100% - 100%/3); }
    .tl-step {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; text-align: center; padding: 0 12px;
    }
    .tl-dot {
      width: 38px; height: 38px; border-radius: 50%;
      border: 1.5px solid var(--border); background: var(--surface);
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 2; margin-bottom: 18px; flex-shrink: 0;
    }
    .tl-dot.lit { border-color: var(--accent); background: rgba(232,255,58,.08); }
    .tl-dot::before {
      content: ''; width: 11px; height: 11px; border-radius: 50%;
      background: var(--muted); transition: background .3s;
    }
    .tl-dot.lit::before { background: var(--accent); }
    .tl-dot.beat::before { animation: tl-beat 2s ease-out infinite; }
    @keyframes tl-beat {
      0%   { box-shadow: 0 0 0 0   rgba(232,255,58,.6); }
      70%  { box-shadow: 0 0 0 10px rgba(232,255,58,0);   }
      100% { box-shadow: 0 0 0 0   rgba(232,255,58,0);   }
    }
    @media (prefers-reduced-motion: reduce) { .tl-dot.beat::before { animation: none; } }
    .tl-tag {
      font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
      color: var(--green); background: rgba(58,255,140,.07);
      border: 1px solid rgba(58,255,140,.18); padding: 3px 9px;
      border-radius: 99px; margin-bottom: 12px;
    }
    .tl-h { font-family: var(--disp); font-size: 22px; letter-spacing: 1.5px; margin-bottom: 8px; }
    .tl-p { font-size: 13px; color: var(--muted); line-height: 1.65; max-width: 240px; }
    @media (max-width: 680px) {
      .tl-track { flex-direction: column; }
      .tl-track::before { top: 0; bottom: 0; left: 19px; right: auto; width: 1px; height: 100%; }
      .tl-prog { top: 0; left: 19px; width: 1px; height: 0; transition: height 2s cubic-bezier(.4,0,.2,1) .3s; }
      .tl-wrap.go .tl-prog { height: 100%; width: 1px; }
      .tl-step { flex-direction: row; align-items: flex-start; text-align: left; padding: 20px 0; gap: 20px; }
      .tl-dot { margin-bottom: 0; }
    }

    /* ───────── FEAT 2col (gardé pour /en/ — supprimable quand EN sera aligné FR) ───────── */
    .feat-2col {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 12px; margin-top: 48px;
    }
    .fc2 {
      padding: 20px 22px; background: var(--surface);
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      display: flex; gap: 15px; align-items: flex-start;
      transition: border-color .15s, transform .15s;
    }
    .fc2:hover { border-color: rgba(232,255,58,.22); transform: translateY(-2px); }
    .fc2-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
    .fc2-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
    .fc2-desc { font-size: 12.5px; color: var(--muted); line-height: 1.58; }
    .fc2-tag {
      display: inline-block; margin-top: 7px;
      font-family: var(--mono); font-size: 9px;
      padding: 2px 8px; border-radius: 99px;
      background: rgba(232,255,58,.07); border: 1px solid rgba(232,255,58,.2);
      color: var(--accent);
    }
    @media (max-width: 680px) { .feat-2col { grid-template-columns: 1fr; } }

    /* ───────── FEAT stack (sessions / backing-métronome-rec) ───────── */
    .feat-stack { display: flex; flex-direction: column; gap: 18px; }
    .feat-line {
      display: flex; gap: 14px; align-items: flex-start;
    }
    .feat-line-icon {
      font-size: 22px; line-height: 1; flex-shrink: 0;
      width: 40px; height: 40px;
      background: rgba(232,255,58,.07);
      border: 1px solid rgba(232,255,58,.2);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
    }
    .feat-line-title {
      font-family: 'Outfit', sans-serif; font-weight: 700;
      font-size: 15px; color: var(--text); margin-bottom: 4px;
    }
    .feat-line-desc { font-size: 13.5px; color: var(--muted); line-height: 1.65; }
    .feat-line-desc strong { color: var(--text); }

    /* ───────── PLG showcase (image plugins + logos AU/VST) ───────── */
    .plg-showcase {
      display: flex; flex-direction: column; align-items: center;
      gap: 24px; margin: 32px auto 40px; max-width: 820px;
      padding: 24px 28px;
      background: radial-gradient(ellipse at 50% 30%, rgba(232,255,58,.04), transparent 70%);
      border-radius: var(--radius-lg);
    }
    .plg-showcase-img {
      display: block; width: 100%; height: auto;
      filter: drop-shadow(0 24px 48px rgba(0,0,0,.5));
    }
    .plg-showcase-logos {
      display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
      width: 100%;
    }

    /* ───────── PLG logo (Audio Unit + VST3 badges) ───────── */
    .plg-logo {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      padding: 16px 24px; min-width: 180px;
      background: rgba(255,255,255,.02);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
    }
    .plg-logo img { height: 48px; width: auto; object-fit: contain; }
    .plg-logo-status {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 1px; text-transform: uppercase;
      font-weight: 700; padding: 3px 10px; border-radius: 99px;
    }
    .plg-logo-status.ok {
      color: var(--green);
      background: rgba(58,255,140,.08);
      border: 1px solid rgba(58,255,140,.25);
    }
    .plg-logo-status.soon {
      color: var(--orange);
      background: rgba(255,179,71,.08);
      border: 1px solid rgba(255,179,71,.25);
    }

    /* ───────── GUIDES ───────── */
    .guides-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin-top: 40px;
    }
    .guide-card {
      padding: 28px 24px; background: var(--surface);
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      display: flex; flex-direction: column; position: relative; overflow: hidden;
      transition: border-color .15s, transform .15s;
    }
    .guide-card:hover { border-color: rgba(232,255,58,.3); transform: translateY(-3px); }
    .guide-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0;
      height: 2px; background: var(--accent);
      opacity: 0; transition: opacity .2s;
    }
    .guide-card:hover::before { opacity: 1; }
    .guide-num {
      font-family: var(--mono); font-size: 10px; letter-spacing: 3px;
      color: var(--muted); margin-bottom: 16px;
      display: flex; align-items: center; gap: 10px;
    }
    .guide-num::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .guide-icon { font-size: 30px; margin-bottom: 14px; }
    .guide-cat {
      font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px;
      text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
    }
    .guide-title { font-weight: 700; font-size: 15.5px; line-height: 1.3; margin-bottom: 10px; }
    .guide-desc { font-size: 13px; color: var(--muted); line-height: 1.62; flex: 1; }
    .guide-foot {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
    }
    .guide-read { font-family: var(--mono); font-size: 10px; color: var(--muted); }
    .guide-arrow { font-family: var(--mono); font-size: 12px; color: var(--accent); transition: transform .15s; }
    .guide-card:hover .guide-arrow { transform: translateX(4px); }
    .guides-more { margin-top: 24px; text-align: center; }
    @media (max-width: 720px) { .guides-grid { grid-template-columns: 1fr; } }

    /* ───────── BETA section ───────── */
    .beta {
      background: var(--surface); border-top: 1px solid var(--border);
      position: relative; overflow: hidden; text-align: center;
      padding: 96px clamp(16px, 3vw, 40px);
    }
    .beta::before {
      content: ''; position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 800px; height: 400px;
      background: radial-gradient(ellipse, rgba(232,255,58,.07), transparent 60%);
      pointer-events: none;
    }
    .beta-inner { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 1; }
    .beta-badge {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 5px 16px; border-radius: 99px;
      background: rgba(232,255,58,.07); border: 1px solid rgba(232,255,58,.18);
      font-family: var(--mono); font-size: 10px; letter-spacing: 3px;
      color: var(--accent); text-transform: uppercase; margin-bottom: 32px;
    }
    .beta-headline {
      font-family: var(--disp);
      font-size: clamp(44px, 9vw, 108px); letter-spacing: 3px;
      line-height: .95; margin-bottom: 12px;
    }
    .beta-headline .accent { color: var(--accent); }
    .beta-jtc {
      font-family: var(--disp);
      font-size: clamp(20px, 3vw, 36px); letter-spacing: 5px;
      color: var(--text); margin-bottom: 18px;
    }
    .beta-jtc .accent { color: var(--accent); }
    .beta-sub {
      font-family: var(--disp);
      font-size: clamp(15px, 2vw, 25px); letter-spacing: 4px;
      color: var(--muted); margin-bottom: 32px;
    }
    .beta-sub .accent { color: var(--accent); }
    .beta-desc {
      color: var(--muted); font-size: 15px; line-height: 1.7;
      max-width: 540px; margin: 0 auto 32px;
    }
    .beta-desc strong { color: var(--text); }
    .beta-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .beta-cta .cta { padding: 16px 36px; font-size: 16px; }