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

      body {
        background: #000;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
      }

      /* ─── Slideshow wrapper ────────────────────────────────── */
      .slideshow {
        width: 100%;
        max-width: 1200px;
        position: relative;
      }

      .slides-track {
        position: relative;
        width: 100%;
        cursor: default;
      }

      /* ─── Individual slide (banner) ────────────────────────── */
      .slide {
        width: 100%;
        background: #060608;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
        display: grid;
        grid-template-columns: 485px 1fr;
        min-height: 628px;
        align-items: center;

        /* hidden by default */
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity 0.6s ease;
      }

      .slide.active {
        opacity: 1;
        pointer-events: auto;
        position: relative;
      }

      /* ─── Per-slide accent colours via CSS vars ─────────────── */
      .slide-read {
        --accent: #6ee7b7;
        --accent-r: 110;
        --accent-g: 231;
        --accent-b: 183;
      }
      .slide-skim {
        --accent: #fbbf24;
        --accent-r: 251;
        --accent-g: 191;
        --accent-b: 36;
      }
      .slide-skip {
        --accent: #f87171;
        --accent-r: 248;
        --accent-g: 113;
        --accent-b: 113;
      }

      /* ─── Atmosphere ────────────────────────────────────────── */
      .bg-glow-left {
        position: absolute;
        width: 600px;
        height: 600px;
        background: radial-gradient(
          circle,
          rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.13) 0%,
          transparent 70%
        );
        left: -100px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 0;
      }
      .bg-glow-right {
        position: absolute;
        width: 700px;
        height: 700px;
        background: radial-gradient(
          circle,
          rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06) 0%,
          transparent 65%
        );
        right: -200px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 0;
      }
      .grid-overlay {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(
            rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.018) 1px,
            transparent 1px
          ),
          linear-gradient(
            90deg,
            rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.018) 1px,
            transparent 1px
          );
        background-size: 40px 40px;
        pointer-events: none;
        z-index: 0;
      }
      .speed-line {
        position: absolute;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.18),
          transparent
        );
        animation: speedline 3s ease-in-out infinite;
        z-index: 0;
      }
      .speed-line:nth-child(1) {
        top: 28%;
        width: 60%;
        animation-delay: 0s;
      }
      .speed-line:nth-child(2) {
        top: 42%;
        width: 80%;
        animation-delay: 0.4s;
        opacity: 0.6;
      }
      .speed-line:nth-child(3) {
        top: 55%;
        width: 50%;
        animation-delay: 0.8s;
        opacity: 0.4;
      }
      .speed-line:nth-child(4) {
        top: 64%;
        width: 70%;
        animation-delay: 1.2s;
        opacity: 0.3;
      }
      @keyframes speedline {
        0%,
        100% {
          opacity: 0;
          transform: scaleX(0.3) translateX(-20%);
        }
        50% {
          opacity: 1;
          transform: scaleX(1) translateX(0);
        }
      }
      .particle {
        position: absolute;
        width: 2px;
        height: 2px;
        background: var(--accent);
        border-radius: 50%;
        animation: particleFloat linear infinite;
        opacity: 0;
        z-index: 0;
      }
      @keyframes particleFloat {
        0% {
          opacity: 0;
          transform: translateY(0) scale(1);
        }
        20% {
          opacity: 0.5;
        }
        80% {
          opacity: 0.2;
        }
        100% {
          opacity: 0;
          transform: translateY(-80px) scale(0.3);
        }
      }

      /* ─── Logo ──────────────────────────────────────────────── */
      .tt-logo {
        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 800;
        color: #999;
        letter-spacing: -0.3px;
        line-height: 1;
        display: inline-block;
      }
      .tt-logo .green {
        color: #6ee7b7;
      }

      /* ─── LEFT column ───────────────────────────────────────── */
      .left {
        position: relative;
        z-index: 10;
        padding: 56px 0 56px 72px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      .left .tt-logo {
        font-size: 18px;
        margin-bottom: 14px;
      }

      .headline {
        font-family: "Bricolage Grotesque", sans-serif;
        font-size: 68px;
        font-weight: 900;
        line-height: 0.98;
        color: #fff;
        letter-spacing: -2.2px;
        margin-bottom: 18px;
      }
      .headline em {
        font-style: normal;
        color: var(--accent);
      }

      .subline {
        font-family: "Figtree", sans-serif;
        font-size: 16px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.42);
        line-height: 1.6;
        max-width: 320px;
        margin-bottom: 32px;
        letter-spacing: 0.1px;
      }

      .badges {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 28px;
      }
      .badge {
        padding: 6px 14px;
        border-radius: 100px;
        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.2px;
        border: 1px solid;
        width: 90px;
        text-align: center;
        cursor: pointer;
        height: 28px;
      }
      .badge-read {
        color: #6ee7b7;
        border-color: rgba(110, 231, 183, 0.3);
        background: rgba(110, 231, 183, 0.07);
      }
      .badge-skim {
        color: #fbbf24;
        border-color: rgba(251, 191, 36, 0.3);
        background: rgba(251, 191, 36, 0.07);
      }
      .badge-skip {
        color: #f87171;
        border-color: rgba(248, 113, 113, 0.3);
        background: rgba(248, 113, 113, 0.07);
      }
      .badge span {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        margin-right: 4px;
        margin-top: -3px;
        vertical-align: middle;
        font-size: 0;
      }

      /* ─── CTA Buttons ───────────────────────────────────────── */
      .cta-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 28px;
      }
      .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 24px 10px 16px;
        background: var(--accent);
        color: #0a0a0a;
        border: none;
        border-radius: 8px;
        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -0.2px;
        cursor: pointer;
        text-decoration: none;
        transition:
          opacity 0.15s,
          transform 0.15s;
      }
      .btn-primary:hover {
        opacity: 0.88;
        transform: translateY(-1px);
      }
      .btn-primary:active {
        transform: translateY(0);
      }

      .btn-secondary {
        display: inline-flex;
        align-items: center;
        padding: 10px 20px;
        background: none;
        color: rgba(255, 255, 255, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        transition:
          border-color 0.15s,
          color 0.15s;
      }
      .btn-secondary:hover {
        border-color: rgba(255, 255, 255, 0.28);
        color: rgba(255, 255, 255, 0.6);
      }

      .store-badge {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .store-dot {
        width: 4px;
        height: 4px;
        margin-top: -1px;
        border-radius: 50%;
        background: rgba(
          var(--accent-r),
          var(--accent-g),
          var(--accent-b),
          0.35
        );
      }
      .store-text {
        font-family: "Figtree", sans-serif;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.2);
        letter-spacing: 0.8px;
        text-transform: uppercase;
      }

      /* ─── RIGHT column ──────────────────────────────────────── */
      .right {
        position: relative;
        z-index: 5;
        height: 100%;
        min-height: 628px;
        overflow: visible;
      }

      /* ─── Browser ───────────────────────────────────────────── */
      .browser {
        position: absolute;
        width: 555px;
        background: #0e0e12;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        box-shadow:
          0 40px 80px rgba(0, 0, 0, 0.8),
          0 0 120px
            rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.04);
        transform: perspective(1000px) rotateY(-18deg) rotateX(4deg);
        animation: float 6s ease-in-out infinite;
        top: 75px;
        right: 75px;
        left: auto;
        z-index: 5;
      }
      @keyframes float {
        0%,
        100% {
          transform: perspective(1000px) rotateY(-16deg) rotateX(4deg)
            translateY(0px);
        }
        50% {
          transform: perspectiveb(1000px) rotateY(-16deg) rotateX(4deg)
            translateY(-12px);
        }
      }
      .browser-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 14px;
        background: #080809;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px 12px 0 0;
      }
      .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      .dot-r {
        background: #f87171;
        opacity: 0.7;
      }
      .dot-y {
        background: #fbbf24;
        opacity: 0.7;
      }
      .dot-g {
        background: #6ee7b7;
        opacity: 0.7;
      }
      .url-bar {
        flex: 1;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 4px;
        height: 20px;
        margin-left: 8px;
        display: flex;
        align-items: center;
        padding: 0 8px;
      }
      .url-text {
        font-size: 9px;
        color: rgba(255, 255, 255, 0.22);
        font-family: monospace;
      }
      .browser-content {
        padding: 14px 16px;
      }
      .browser-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }
      .browser-site {
        font-family: "Inter", sans-serif;
        font-size: 9px;
        color: #383838;
      }
      .fake-h1 {
        height: 16px;
        background: rgba(255, 255, 255, 0.13);
        border-radius: 3px;
        width: 78%;
        margin-bottom: 6px;
      }
      .fake-h2 {
        height: 16px;
        background: rgba(255, 255, 255, 0.07);
        border-radius: 3px;
        width: 52%;
        margin-bottom: 14px;
      }
      .fake-line {
        height: 7px;
        background: rgba(255, 255, 255, 0.045);
        border-radius: 3px;
        margin-bottom: 6px;
      }
      .w95 {
        width: 95%;
      }
      .w90 {
        width: 90%;
      }
      .w80 {
        width: 80%;
      }
      .w70 {
        width: 70%;
      }
      .w60 {
        width: 60%;
      }

      @keyframes float {
        0%,
        100% {
          transform: perspective(1000px) rotateY(-16deg) rotateX(4deg)
            translateY(0px);
        }
        50% {
          transform: perspective(1000px) rotateY(-16deg) rotateX(4deg)
            translateY(-12px);
        }
      }

      /* ─── Popup ─────────────────────────────────────────────── */
      .popup {
        position: absolute;
        width: 298px;
        background: #0d0d0d;
        border: 1px solid #2a2a2a;
        border-radius: 13px;
        box-shadow:
          0 0 0 1px
            rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08),
          0 24px 60px rgba(0, 0, 0, 0.9),
          0 0 80px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.07);
        animation: floatpop 6s ease-in-out infinite;
        animation-delay: 0.3s;
        transform: perspective(800px) rotateY(-6deg) rotateX(2deg);
        top: 125px;
        left: auto;
        right: 90px;
        z-index: 20;
      }
      @keyframes floatpop {
        0%,
        100% {
          transform: perspective(800px) rotateY(-6deg) rotateX(2deg)
            translateY(0px);
        }
        50% {
          transform: perspective(800px) rotateY(-6deg) rotateX(2deg)
            translateY(-10px);
        }
      }
      .popup::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 14px;
        background: linear-gradient(
          135deg,
          rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1),
          transparent 55%
        );
        pointer-events: none;
        z-index: -1;
      }
      .popup-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 13px;
        background: #0a0a0a;
        border-bottom: 1px solid #1c1c1c;
        border-radius: 13px 13px 0 0;
      }
      .popup-x {
        width: 22px;
        height: 21px;
        border: 1px solid #4a4a4a;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        font-size: 15px;
        font-family: "Inter", sans-serif;
        padding: 4px 0 6px;
      }
      .popup-body {
        padding: 12px 13px 10px;
      }
      .popup-rows {
        display: flex;
        flex-direction: column;
        gap: 9px;
        margin-bottom: 6px;
      }
      .popup-row {
        display: flex;
        gap: 9px;
        align-items: flex-start;
      }
      .popup-num {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        background: #6ee7b7;
        color: #0a0a0a;
        border-radius: 50%;
        font-family: "Inter", sans-serif;
        font-size: 9px;
        line-height: 0.7;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2px;
      }
      .popup-txt {
        font-family: "Inter", sans-serif;
        font-size: 13px;
        color: #d8d8d8;
        line-height: 1.55;
      }
      .popup-verdict-title {
        font-family: "Inter", sans-serif;
        font-size: 9px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        font-weight: 700;
        margin: 14px 0 4px;
        padding: 0 1px;
      }
      .popup-verdict {
        display: flex;
        align-items: baseline;
        gap: 7px;
        padding: 9px 11px;
        background: rgba(
          var(--accent-r),
          var(--accent-g),
          var(--accent-b),
          0.08
        );
        border: 1px solid
          rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.22);
        border-radius: 8px;
      }
      .verdict-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        flex-shrink: 0;
      }
      .verdict-word {
        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 700;
        color: var(--accent);
        letter-spacing: 0.3px;
        text-transform: uppercase;
        white-space: nowrap;
        margin: 0 2px 0 -2px;
      }
      .verdict-reason {
        font-family: "Inter", sans-serif;
        font-size: 12px;
        color: #888;
        line-height: 1.4;
        flex: 1;
      }
      .popup-foot {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 13px 12px;
        border-top: 1px solid #161616;
        background: #0d0d0d;
        border-radius: 0 0 13px 13px;
      }
      .foot-btn {
        background: none;
        border: 1px solid #4a4a4a;
        border-radius: 5px;
        color: #666;
        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 500;
        padding: 0 11px 2px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .popup-meta {
        font-family: "Inter", sans-serif;
        font-size: 10px;
        color: #4e4e4e;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        text-align: right;
      }

      /* ─── Nav dots ──────────────────────────────────────────── */
      .nav-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 4px 0;
      }
      .nav-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        border: none;
        cursor: pointer;
        padding: 0;
        transition:
          background 0.25s,
          transform 0.25s;
      }
      .nav-dot.active-read {
        background: #6ee7b7;
        transform: scale(1.25);
      }
      .nav-dot.active-skim {
        background: #fbbf24;
        transform: scale(1.25);
      }
      .nav-dot.active-skip {
        background: #f87171;
        transform: scale(1.25);
      }
      .nav-dot:hover {
        background: rgba(255, 255, 255, 0.4);
      }

      /* ─── Tablet 1024px ─────────────────────────────────────── */
      @media (max-width: 1024px) {
        .arrow {
          display: none;
        }
        .slide {
          grid-template-columns: 360px 1fr;
          min-height: 560px;
        }
        .left {
          padding: 52px 0 52px 48px;
        }
        .left .tt-logo {
          font-size: 16px;
        }
        .headline {
          font-size: 50px;
          letter-spacing: -2px;
        }
        .subline {
          font-size: 15px;
          max-width: 270px;
        }
        .browser {
          width: 500px;
          right: 10%;
          transform: perspective(900px) rotateY(-14deg) rotateX(3deg);
        }
        .popup {
          width: 298px;
          right: 13%;
        }
      }

      /* ─── Small tablet / large mobile 768px ─────────────────── */
      @media (max-width: 768px) {
        body {
          padding: 20px 0;
          gap: 16px;
        }
        .slide {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto;
          min-height: unset;
          border-radius: 16px;
        }
        .left {
          padding: 44px 28px 28px;
          align-items: center;
          text-align: center;
        }
        .left .tt-logo {
          font-size: 20px;
          margin-bottom: 16px;
        }
        .headline {
          font-size: 48px;
          letter-spacing: -2px;
        }
        .subline {
          font-size: 15px;
          max-width: 380px;
          margin-bottom: 24px;
          padding: 0 20px;
        }
        .badges {
          justify-content: center;
        }
        .cta-row {
          justify-content: center;
        }
        .store-badge {
          justify-content: center;
        }
        .right {
          min-height: 458px;
          position: relative;
          overflow: hidden;
          margin: 0 0 12px;
        }
        .browser {
          width: min(430px, 88vw);
          left: 49%;
          top: 20px;
          transform: translateX(-50%) perspective(800px) rotateY(-8deg)
            rotateX(3deg);
          animation: floatTablet 6s ease-in-out infinite;
        }
        @keyframes floatTablet {
          0%,
          100% {
            transform: translateX(-50%) perspective(800px) rotateY(-8deg)
              rotateX(3deg) translateY(0px);
          }
          50% {
            transform: translateX(-50%) perspective(800px) rotateY(-8deg)
              rotateX(3deg) translateY(-10px);
          }
        }
        .popup {
          width: min(280px, 74vw);
          left: 50%;
          top: 73px;
          transform: translateX(-30%) perspective(600px) rotateY(-5deg)
            rotateX(2deg);
          animation: floatpopTablet 6s ease-in-out infinite;
          animation-delay: 0.3s;
        }
        @keyframes floatpopTablet {
          0%,
          100% {
            transform: translateX(-30%) perspective(600px) rotateY(-5deg)
              rotateX(2deg) translateY(0px);
          }
          50% {
            transform: translateX(-30%) perspective(600px) rotateY(-5deg)
              rotateX(2deg) translateY(-10px);
          }
        }
      }

      /* ─── Mobile 480px ──────────────────────────────────────── */
      @media (max-width: 480px) {
        body {
          padding: 12px 0;
        }
        .slide {
          border-radius: 14px;
        }
        .left {
          padding: 36px 18px 24px;
        }
        .left .tt-logo {
          font-size: 18px;
        }
        .headline {
          letter-spacing: -1.8px;
          margin-bottom: 14px;
        }
        .btn-primary {
          font-size: 12px;
          padding: 9px 16px;
        }
        .btn-secondary {
          font-size: 12px;
          padding: 9px 16px;
        }
        .browser {
          width: min(340px, 90vw);
          top: 12px;
        }
        .popup {
          width: min(280px, 80vw);
          transform: translateX(-25%) perspective(500px) rotateY(-4deg)
            rotateX(1deg);
          animation: floatpopMobile 6s ease-in-out infinite;
          animation-delay: 0.3s;
          top: 62px;
          left: 42%;
        }
        @keyframes floatpopMobile {
          0%,
          100% {
            transform: translateX(-25%) perspective(500px) rotateY(-4deg)
              rotateX(1deg) translateY(0px);
          }
          50% {
            transform: translateX(-25%) perspective(500px) rotateY(-4deg)
              rotateX(1deg) translateY(-8px);
          }
        }
        .store-text {
          font-size: 9px;
        }
      }