/* ── NAV ── */


    /* ── HERO ── */
    .hero {
      background: var(--paper);
      padding: .5rem .5rem 0 0;
      display: grid;
      grid-template-columns: 35% 65%;
      gap: 0;
      align-items: start;
      max-width: var(--content-max);
      margin: 0 auto;
    }
    .hero-h1 {
      font-size: clamp(2.2rem, 5vw, 3.2rem);
      font-weight: 700; line-height: 1.1;
      letter-spacing: -0.03em;
      margin-bottom: 3rem;
      color: var(--ink);
    }
    .hero-h1 em { font-style: italic; color: var(--acc); }

    /* .hero-left { padding-bottom: .5rem; margin-top: 0rem; } */
    .hero-left { padding: 2rem 0 0 2rem }

    .hero-sub {
      font-size: 1.1rem; color: var(--muted);
      line-height: 1.65; margin-bottom: 1.5rem;
    }


    /* ── Hero Video ── */
    .hero-right {
      position: relative;
      display: flex;
      padding-bottom: 3rem;
      justify-content: center;
      align-items: flex-end;

    }
    .hero-video-wrap {
      width: 100%;
      background: transparent;
      animation: fadeIn 0.8s ease-out;
    }
    .hero-video-wrap img {
      height: 100%;
      display: block;
      border-radius: var(--radius-lg);
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ── SECTIONS ── */
    .sec-dark .sec-h2-dk em {
      color: var(--sec);
    }
    /* ── PROBLEM CARDS ── */
    .p-grid {
      display: grid; grid-template-columns: 60% 37.5%; /* repeat(2, minmax(300px, 1fr)); */
      gap: 20px; padding-bottom: .5rem; margin-bottom: .75rem;
    }
    .p-card {
      background: #1a1a1a; box-shadow: 0 0 0 1px #2b2b2b;, 0 0 0 8px #1111;
      /* border: .25px solid #2a2a2a; */
      border-radius: var(--radius-lg); padding: .05rem;
    }

    .p-card-header {
      display: flex;
      align-items: center;
      gap: 1px;
    }

    .p-card-slideshow {
      position: relative;
      width: 100%;
      border-radius: var(--radius-lg);
      overflow: hidden;
    }

    .p-card-slideshow .slide {
      width: 100%;
      display: block;
      border-radius: var(--radius-md);
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      transition: opacity 1s ease-in-out;
    }
    .p-card-slideshow .slide.active {
      opacity: 1;
      position: relative;
    }
    .pc-icon { font-size: 1.6rem; margin-bottom: 10px; }
    .pc-title {font-size: 1.25rem; font-weight: 700; color: #e2e6ed; margin-top: 15px; margin-bottom 5px; padding: 1.25rem;}
    .pc-desc { font-family: var(--font-mono);font-size: .9rem; color: #8892a4; line-height: 1.6; margin-right: 15px; padding: 1.5rem }

    .info-banner {
      background: #1a1a1a; border: 1px solid #2b2b2b;
      border-radius: var(--radius-md);
      padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
    }
    .ib-title { font-size: 1.2rem; font-weight: 700; color: #E8A17A; margin-bottom: 0.4rem; }
    .ib-body { font-family: var(--font-mono);font-size: .9rem; color: #8892a4; line-height: 1.65; }
    .ib-body strong { color: #e2e6ed; font-size: 1rem; }

    .tool-row {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 12px;
    }
    .tool-pill {
      background: #1e1e1e; border: 1px solid #2e2e2e;
      border-radius: var(--radius-md); padding: 0.9rem 0.9rem;
    }
    .tool-pill-header {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .tool-pill.chatgpt { background: rgba(2, 79, 60,0.4); border: 1px solid rgba(16,163,127,0.6); }
    .tool-pill.claude { background: rgba(199,106,58,0.4); border: 1px solid rgba(199,106,58,0.6); }
    .tool-pill.gemini { background: rgba(66,133,244,0.4); border: 1px solid rgba(66,133,244,0.6); }
    .tool-pill svg { width: 24px; height: 24px; margin-bottom: 8px;}
    .tp-name { font-size: 0.9rem; font-weight: 700; color: #e2e6ed; padding-bottom: 1rem; }
    .tp-step {
      font-size: 0.78rem; color: #8892a4; line-height: 1.5;
      margin:25px, 0px, 1px, 0px; padding-left: 2.2rem; position: relative;
    }
    .tp-step::before {  content: '▶'; position: absolute; padding-left: .85rem; left: 0; color: #C76A3A; }
    .tp-note { padding-top: 1rem; font-size: 0.72rem; color: #f06b6b; margin-top: 6px; line-height: 1.45; }


    /* ── STATS ── */
    .stats-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 14px;
    }
    .stat-card { background: #C76A3A; border-radius: var(--radius-lg); padding: 1.4rem 1.1rem; }
    .stat-num { font-size: 2.2rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 4px; }
    .stat-src { font-size: 0.68rem; color: rgba(255,255,255,0.5); margin-bottom: 4px; font-style: italic; }
    .stat-label { font-size: 0.78rem; color: rgba(255,255,255,0.88); line-height: 1.45; }

    /* ── HOW IT WORKS ── */
    .how-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 14px; margin-top: 1.5rem;
    }
    .how-pt {
      display: flex; flex-direction: column; align-items: flex-start;
      gap: 8px; padding: 1.1rem; background: #949aa1; border: 1px solid #616263; border-radius: var(--radius-lg);
    }
    .how-pt-header {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .how-icon {height: 50px; width: 50px; object-fit: cover; object-align: center; }
    .how-h { height: 50px; width: 100px; font-size: 1rem; font-weight: 700; color: var(--ink); text-align: center; align-items: center; }
    .how-p { font-family: var(--font-mono); font-size: 0.82rem; color: #2B2B2B; line-height: 1.55; align-items: center; margin-top: 1rem;}



    /* ── RESPONSIVE ── */
    @media (max-width: 640px) {
      .hero { grid-template-columns: 1fr; padding-bottom: 2rem; }
      .hero-right { height: 220px; }
      .uc-card { grid-template-columns: 1fr; }
    }