html { visibility: hidden; }
      
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:      #0c0a08;
      --card:    #141210;
      --card2:   #1a1612;
      --border:  #2a221c;
      --sand:    #ede0cc;
      --sand2:   #c4b49e;
      --fog:     #7a6a58;
      --ember:   #e07b35;
      --green:   #3ecf6e;
    }

    html, body {
      width: 100%; height: 100%;
      overflow: hidden;
      background: var(--bg);
      color: var(--sand);
      font-family: 'DM Sans', sans-serif;
    }

    /* noise */
    body::before {
      content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");
    }

    /* ════════════════════════════════
       LAYOUT PRINCIPAL
       100vh, 3 zones : nav / body / foot
    ════════════════════════════════ */
    .wrap {
      position: relative; z-index: 1;
      width: 100%; height: 100dvh;
      display: grid;
      grid-template-rows: 52px 1fr 44px;
    }

    /* ── NAV ── */
    nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 clamp(16px, 3vw, 40px);
      border-bottom: 1px solid var(--border);
    }
    .logo {
      font-family: 'Syne', sans-serif; font-weight: 800;
      font-size: clamp(.95rem, 1.8vw, 1.15rem);
      color: var(--sand); text-decoration: none; letter-spacing: -.02em;
      display: flex; align-items: center; gap: 8px;
    }
    .logo em { color: var(--ember); font-style: normal; }
    .nav-r { display: flex; gap: 8px; }
    .btn-ghost {
      padding: 6px clamp(10px, 1.5vw, 16px);
      border: 1px solid var(--border); border-radius: 7px;
      background: transparent; color: var(--sand2);
      font-family: 'DM Sans', sans-serif; font-size: clamp(.72rem, 1.2vw, .82rem); font-weight: 600;
      text-decoration: none; transition: border-color .2s, color .2s;
    }
    .btn-ghost:hover { border-color: rgba(224,123,53,.4); color: var(--sand); }
    .btn-ember {
      padding: 6px clamp(12px, 1.8vw, 20px);
      border-radius: 7px; background: var(--ember); color: #0c0a08;
      font-family: 'DM Sans', sans-serif; font-size: clamp(.72rem, 1.2vw, .82rem); font-weight: 700;
      text-decoration: none; border: none; cursor: pointer; transition: filter .2s;
    }
    .btn-ember:hover { filter: brightness(1.1); }

    /* ── MAIN BODY ── */
    .main {
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      overflow: hidden;
    }

    .vline { background: var(--border); }

    /* ── PANNEAU ── */
    .panel {
      padding: clamp(20px, 3vh, 40px) clamp(20px, 3vw, 44px);
      display: flex; flex-direction: column; justify-content: center;
      overflow: hidden; position: relative;
    }

    /* orb + grid sur le panneau gauche */
    .p-left::before {
      content: ''; position: absolute; top: -60px; left: -60px;
      width: 400px; height: 400px; border-radius: 50%; pointer-events: none;
      background: radial-gradient(ellipse, rgba(224,123,53,.09) 0%, transparent 65%);
    }
    .p-left::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
      background-size: 50px 50px;
      mask-image: radial-gradient(ellipse 85% 85% at 20% 50%, black, transparent);
      -webkit-mask-image: radial-gradient(ellipse 85% 85% at 20% 50%, black, transparent);
    }

    /* ══ GAUCHE : pitch ══ */
    .badge {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(.58rem, 1vw, .65rem);
      color: var(--green); border: 1px solid rgba(62,207,110,.25);
      background: rgba(62,207,110,.05); padding: .25rem .65rem;
      border-radius: 100px; margin-bottom: clamp(12px, 2vh, 22px); width: fit-content;
      position: relative; z-index: 1;
    }
    .bdot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); animation: blink 2s infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

    h1 {
      font-family: 'Syne', sans-serif; font-weight: 800;
      font-size: clamp(1.6rem, 3.2vw, 2.6rem);
      line-height: 1.08; letter-spacing: -.03em;
      margin-bottom: clamp(10px, 1.5vh, 16px);
      position: relative; z-index: 1;
    }
    h1 mark { background: none; color: var(--ember); }

    .tagline {
      font-size: clamp(.78rem, 1.3vw, .9rem);
      color: var(--sand2); line-height: 1.65;
      margin-bottom: clamp(18px, 3vh, 30px);
      max-width: 340px; position: relative; z-index: 1;
    }
    .tagline strong { color: var(--sand); font-weight: 600; }

    /* statement LinkedIn vs Hokay */
    .statement {
      padding: clamp(10px, 1.5vh, 16px) clamp(14px, 2vw, 20px);
      border-left: 2px solid var(--ember);
      background: var(--card2); border-radius: 0 8px 8px 0;
      margin-bottom: clamp(18px, 2.5vh, 28px);
      position: relative; z-index: 1;
    }
    .statement p {
      font-size: clamp(.72rem, 1.1vw, .82rem);
      color: var(--sand2); line-height: 1.6;
    }
    .statement p strong { color: var(--sand); }

    .ctas { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; }
    .btn-main {
      display: flex; align-items: center; justify-content: center; gap: 7px;
      padding: clamp(10px, 1.5vh, 13px);
      border-radius: 8px;
      background: linear-gradient(135deg, #c96820, var(--ember));
      color: #0c0a08; font-family: 'DM Sans', sans-serif;
      font-size: clamp(.8rem, 1.3vw, .9rem); font-weight: 700;
      text-decoration: none; border: none; cursor: pointer;
      box-shadow: 0 4px 20px rgba(224,123,53,.28);
      transition: filter .2s, transform .15s;
    }
    .btn-main:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .btn-sec {
      display: flex; align-items: center; justify-content: center; gap: 7px;
      padding: clamp(9px, 1.4vh, 12px);
      border-radius: 8px; border: 1px solid var(--border);
      background: transparent; color: var(--sand2);
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(.75rem, 1.2vw, .85rem); font-weight: 600;
      text-decoration: none; transition: border-color .2s, color .2s;
    }
    .btn-sec:hover { border-color: rgba(224,123,53,.35); color: var(--sand); }

    /* ══ CENTRE : comparaison ══ */
    .p-mid { background: var(--card); padding: clamp(20px, 3vh, 36px) clamp(18px, 2.5vw, 36px); }

    .sec-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(.55rem, .9vw, .62rem); font-weight: 500;
      text-transform: uppercase; letter-spacing: .12em;
      color: var(--fog); margin-bottom: clamp(12px, 2vh, 18px);
    }

    /* table comparaison */
    .cmp {
      width: 100%; border-collapse: collapse;
      font-size: clamp(.68rem, 1.1vw, .78rem);
    }
    .cmp thead th {
      font-family: 'Syne', sans-serif; font-weight: 800;
      font-size: clamp(.72rem, 1.2vw, .84rem);
      padding: clamp(6px, 1vh, 10px) clamp(8px, 1.2vw, 14px);
      border-bottom: 1px solid var(--border);
      text-align: left;
    }
    .cmp thead th:first-child { color: var(--fog); }
    .cmp thead th:nth-child(2) { color: var(--sand2); }
    .cmp thead th:nth-child(3) { color: var(--ember); }

    .cmp tbody tr { border-bottom: 1px solid var(--border); }
    .cmp tbody tr:last-child { border-bottom: none; }
    .cmp td {
      padding: clamp(8px, 1.4vh, 13px) clamp(8px, 1.2vw, 14px);
      vertical-align: middle; line-height: 1.4;
    }
    .cmp td:first-child { color: var(--sand2); font-weight: 500; }
    .cmp td:nth-child(2) { color: var(--fog); font-size: clamp(.64rem, 1vw, .74rem); }
    .cmp td:nth-child(3) { color: var(--sand); font-weight: 600; }

    .chip {
      display: inline-block; padding: 2px 7px; border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(.55rem, .85vw, .62rem); font-weight: 700;
    }
    .chip-g { background: rgba(62,207,110,.1); color: var(--green); border: 1px solid rgba(62,207,110,.2); }
    .chip-m { background: rgba(255,255,255,.05); color: var(--fog); border: 1px solid var(--border); }

    /* séparateur + note bas */
    .mid-sep { border: none; border-top: 1px solid var(--border); margin: clamp(10px, 1.8vh, 18px) 0; }

    .note {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(.58rem, .9vw, .65rem);
      color: var(--fog); line-height: 1.55;
    }
    .note strong { color: var(--sand2); font-weight: 500; }

    /* ══ DROITE : features ══ */
    .p-right { justify-content: space-between; }

    .feat-list { display: flex; flex-direction: column; justify-content: center; flex: 1; gap: 0; }
    .feat {
      display: flex; align-items: flex-start; gap: clamp(10px, 1.5vw, 14px);
      padding: clamp(10px, 1.6vh, 15px) 0;
      border-bottom: 1px solid var(--border);
    }
    .feat:last-child { border-bottom: none; }
    .feat-ic {
      width: clamp(28px, 3.5vw, 34px); height: clamp(28px, 3.5vw, 34px);
      border-radius: 7px; flex-shrink: 0;
      background: rgba(224,123,53,.08); border: 1px solid rgba(224,123,53,.18);
      display: flex; align-items: center; justify-content: center;
      font-size: clamp(.7rem, 1.2vw, .85rem); margin-top: 1px;
    }
    .feat-ic.g { background: rgba(62,207,110,.07); border-color: rgba(62,207,110,.18); }
    .feat-h {
      font-family: 'Syne', sans-serif; font-weight: 700;
      font-size: clamp(.74rem, 1.2vw, .84rem); margin-bottom: 3px;
    }
    .feat-b { font-size: clamp(.65rem, 1vw, .74rem); color: var(--sand2); line-height: 1.55; }

    /* ── FOOTER ── */
    footer {
      display: flex; align-items: center;
      padding: 0 clamp(16px, 3vw, 40px);
      border-top: 1px solid var(--border);
      gap: 16px; overflow: hidden;
    }
    .ticker-wrap {
      flex: 1; overflow: hidden; min-width: 0;
      mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }
    .ticker { display: flex; gap: .75rem; width: max-content; animation: tick 28s linear infinite; }
    .ti {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(.55rem, .9vw, .62rem); color: var(--fog);
      white-space: nowrap; padding: .2rem .55rem;
      border: 1px solid var(--border); border-radius: 4px;
    }
    .ti .g { color: var(--green); }
    .ti .e { color: var(--ember); }
    @keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    .foot-copy {
      font-family: 'JetBrains Mono', monospace;
      font-size: clamp(.52rem, .85vw, .6rem); color: var(--fog); white-space: nowrap;
    }

    /* ════════════════════════════════
       RESPONSIVE MOBILE  (< 700px)
       1 colonne, scroll autorisé
    ════════════════════════════════ */
    @media (max-width: 700px) {
      html, body { overflow: auto; }
      .wrap { height: auto; grid-template-rows: 52px auto 44px; }
      .main { grid-template-columns: 1fr; }
      .vline { display: none; }
      .panel { padding: 28px 20px; }
      .p-left::after { display: none; }
      .p-mid { background: var(--card); }
      h1 { font-size: 1.9rem; }
      .tagline { max-width: 100%; }
      footer { padding: 0 20px; }
      .foot-copy { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .ticker { animation: none; }
      .bdot  { animation: none; }
    }