/* ===== CHECKPOINT-SYSTEM – AMBER/SECURITY DARK THEME ===== */
    body { background: #030712; }

    /* HERO */
    .cp-hero {
      background: #030712;
      min-height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      padding: 120px 0 80px;
      overflow: hidden;
    }
    .cp-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(245,158,11,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,158,11,.06) 1px, transparent 1px);
      background-size: 60px 60px;
    }
    .cp-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 50% 60% at 65% 50%, rgba(245,158,11,.1) 0%, transparent 70%),
        radial-gradient(ellipse 30% 40% at 15% 40%, rgba(217,119,6,.08) 0%, transparent 60%);
    }
    .cp-hero-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .cp-badge {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: rgba(245,158,11,.12);
      border: 1px solid rgba(245,158,11,.3);
      color: #fbbf24;
      border-radius: 99px;
      padding: .4rem 1rem;
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .04em;
      margin-bottom: 1.5rem;
    }
    .cp-badge-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #fbbf24;
      animation: blink 1.5s infinite;
    }
    .cp-title {
      font-size: clamp(2.2rem, 3.8vw, 3.2rem);
      font-weight: 800;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 1.25rem;
    }
    .cp-grad { background: linear-gradient(135deg, #fde68a, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .cp-sub { font-size: 1.05rem; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: 2rem; }
    .cp-hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
    .cp-btn-p {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #fff; border: none; border-radius: 10px;
      padding: .85rem 2rem; font-size: .95rem; font-weight: 700;
      text-decoration: none; display: inline-block;
      box-shadow: 0 0 30px rgba(245,158,11,.3);
      transition: transform .2s, box-shadow .2s;
    }
    .cp-btn-p:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(245,158,11,.45); }
    .cp-btn-g {
      background: transparent; color: rgba(255,255,255,.7);
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 10px; padding: .85rem 2rem;
      font-size: .95rem; font-weight: 600;
      text-decoration: none; display: inline-block;
      transition: border-color .2s, color .2s;
    }
    .cp-btn-g:hover { border-color: rgba(245,158,11,.4); color: #fbbf24; }

    /* Route map mockup */
    .cp-map-wrap {
      position: relative;
      background: #0c0f1a;
      border-radius: 24px;
      border: 1px solid rgba(245,158,11,.2);
      overflow: hidden;
      box-shadow: 0 0 60px rgba(245,158,11,.1);
      aspect-ratio: 4/3;
    }
    .cp-map-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(245,158,11,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245,158,11,.04) 1px, transparent 1px);
      background-size: 40px 40px;
    }
    .cp-map-header {
      position: absolute;
      top: 0; left: 0; right: 0;
      background: rgba(3,7,18,.92);
      border-bottom: 1px solid rgba(245,158,11,.2);
      padding: .75rem 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 10;
    }
    .cp-map-dots { display: flex; gap: .35rem; }
    .cp-map-dot { width: 10px; height: 10px; border-radius: 50%; }
    .cp-map-title { font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.6); }
    .cp-map-live { display: flex; align-items: center; gap: .4rem; font-size: .65rem; font-weight: 700; color: #fbbf24; }
    .cp-map-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; animation: blink 1.5s infinite; }
    .cp-route-line {
      position: absolute;
      border: 2px dashed rgba(245,158,11,.25);
      border-radius: 0;
      z-index: 2;
      pointer-events: none;
    }
    .cp-checkpoint {
      position: absolute;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: .4rem;
    }
    .cp-ckpt-marker {
      width: 28px; height: 28px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .6rem; font-weight: 800;
      flex-shrink: 0;
      border: 2px solid;
    }
    .cp-ckpt-done {
      background: rgba(34,197,94,.2); border-color: #22c55e; color: #4ade80;
      box-shadow: 0 0 12px rgba(34,197,94,.4);
    }
    .cp-ckpt-active {
      background: rgba(245,158,11,.2); border-color: #f59e0b; color: #fbbf24;
      box-shadow: 0 0 16px rgba(245,158,11,.5);
      animation: cpPulse 2s infinite;
    }
    .cp-ckpt-pending {
      background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.4);
    }
    @keyframes cpPulse {
      0%,100% { box-shadow: 0 0 12px rgba(245,158,11,.3); }
      50% { box-shadow: 0 0 24px rgba(245,158,11,.6); }
    }
    .cp-ckpt-label {
      background: rgba(15,23,42,.95);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 7px;
      padding: .25rem .5rem;
      font-size: .6rem;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
    }
    .cp-map-stats {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      background: rgba(3,7,18,.95);
      border-top: 1px solid rgba(245,158,11,.15);
      padding: .75rem 1rem;
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: .5rem;
      z-index: 10;
    }
    .cp-map-stat { text-align: center; }
    .cp-map-stat-val { font-size: .85rem; font-weight: 800; color: #fff; display: block; }
    .cp-map-stat-lbl { font-size: .55rem; color: rgba(255,255,255,.4); }
    .cp-map-progress {
      position: absolute;
      bottom: 68px; left: 1rem; right: 1rem;
      z-index: 8;
    }
    .cp-map-progress-bar {
      height: 4px; border-radius: 2px;
      background: rgba(255,255,255,.1);
      overflow: hidden;
    }
    .cp-map-progress-fill {
      height: 100%; width: 62%;
      border-radius: 2px;
      background: linear-gradient(90deg, #22c55e, #f59e0b);
    }
    .cp-map-progress-text {
      display: flex; justify-content: space-between;
      font-size: .58rem; color: rgba(255,255,255,.5);
      margin-top: .3rem;
    }

    /* Use cases */
    .cp-usecases { padding: 6rem 0; background: #030712; }
    .cp-sec-label {
      display: block; text-align: center;
      font-size: .75rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: #fbbf24; margin-bottom: .75rem;
    }
    .cp-sec-title {
      text-align: center;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 800; color: #fff; margin-bottom: .5rem;
    }
    .cp-sec-sub {
      text-align: center; color: rgba(255,255,255,.5);
      max-width: 580px; margin: 0 auto 3.5rem;
      font-size: .95rem; line-height: 1.7;
    }
    .cp-uc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
    .cp-uc-card {
      background: #0c0f1a;
      border: 1px solid rgba(245,158,11,.12);
      border-radius: 20px;
      overflow: hidden;
      transition: transform .3s, border-color .3s;
    }
    .cp-uc-card:hover { transform: translateY(-4px); border-color: rgba(245,158,11,.3); }
    .cp-uc-top {
      padding: 1.75rem 1.75rem 1.25rem;
      border-bottom: 1px solid rgba(245,158,11,.08);
    }
    .cp-uc-icon {
      width: 52px; height: 52px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1rem;
      background: rgba(245,158,11,.1);
      border: 1px solid rgba(245,158,11,.25);
    }
    .cp-uc-card h3 { font-size: 1.05rem; font-weight: 800; color: #fff; margin-bottom: .35rem; }
    .cp-uc-card p { font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.6; }
    .cp-uc-bottom { padding: 1.25rem 1.75rem; }
    .cp-uc-feature {
      display: flex; align-items: center; gap: .6rem;
      font-size: .8rem; color: rgba(255,255,255,.6);
      padding: .3rem 0;
    }
    .cp-uc-feature::before { content: '→'; color: #fbbf24; flex-shrink: 0; }

    /* How it works – 4 steps */
    .cp-how { padding: 6rem 0; background: #060a16; }
    .cp-how-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
    .cp-how-card {
      background: #0c0f1a;
      border: 1px solid rgba(245,158,11,.12);
      border-radius: 20px;
      padding: 2rem 1.5rem;
      position: relative;
      overflow: hidden;
      transition: transform .3s, border-color .3s;
    }
    .cp-how-card:hover { transform: translateY(-4px); border-color: rgba(245,158,11,.3); }
    .cp-how-num {
      position: absolute;
      top: -10px; right: .75rem;
      font-size: 5.5rem;
      font-weight: 900;
      color: rgba(245,158,11,.06);
      line-height: 1;
    }
    .cp-how-icon {
      width: 52px; height: 52px; border-radius: 14px;
      background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(217,119,6,.08));
      border: 1px solid rgba(245,158,11,.3);
      display: flex; align-items: center; justify-content: center;
      color: #fbbf24; margin-bottom: 1.25rem;
      position: relative; z-index: 1;
    }
    .cp-how-card h3 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .5rem; position: relative; z-index: 1; }
    .cp-how-card p { font-size: .82rem; color: rgba(255,255,255,.5); line-height: 1.6; position: relative; z-index: 1; }
    .cp-how-detail {
      margin-top: 1rem; padding-top: 1rem;
      border-top: 1px solid rgba(245,158,11,.1);
      font-size: .75rem; color: rgba(245,158,11,.8);
      font-weight: 600;
      position: relative; z-index: 1;
    }
    .cp-how-connector {
      display: flex; align-items: center; justify-content: center;
      color: rgba(245,158,11,.3); font-size: 1.5rem;
      padding-top: 2rem;
    }

    /* Feature cards */
    .cp-features { padding: 6rem 0; background: #030712; }
    .cp-feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
    .cp-feat-card {
      background: #0c0f1a;
      border: 1px solid rgba(245,158,11,.1);
      border-radius: 18px;
      padding: 1.75rem;
      transition: transform .3s, border-color .3s, box-shadow .3s;
    }
    .cp-feat-card:hover {
      transform: translateY(-4px);
      border-color: rgba(245,158,11,.25);
      box-shadow: 0 8px 32px rgba(245,158,11,.08);
    }
    .cp-feat-icon {
      width: 44px; height: 44px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1rem;
    }
    .cp-fi-amber { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.25); }
    .cp-fi-green { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.25); }
    .cp-fi-sky   { background: rgba(14,165,233,.12); border: 1px solid rgba(14,165,233,.25); }
    .cp-feat-card h3 { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: .4rem; }
    .cp-feat-card p { font-size: .82rem; color: rgba(255,255,255,.48); line-height: 1.6; }

    /* Mobile mockup section */
    .cp-mobile { padding: 6rem 0; background: #060a16; }
    .cp-mobile-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }
    .cp-mobile-left h2 {
      font-size: clamp(1.7rem, 2.5vw, 2.2rem);
      font-weight: 800; color: #fff; margin-bottom: 1rem;
    }
    .cp-mobile-left > p {
      font-size: .95rem; color: rgba(255,255,255,.55);
      line-height: 1.7; margin-bottom: 2rem;
    }
    .cp-mobile-features { display: flex; flex-direction: column; gap: 1rem; }
    .cp-mob-feat {
      display: flex; align-items: flex-start; gap: 1rem;
      background: #0c0f1a;
      border: 1px solid rgba(245,158,11,.1);
      border-radius: 14px;
      padding: 1.1rem 1.25rem;
      transition: border-color .3s;
    }
    .cp-mob-feat:hover { border-color: rgba(245,158,11,.3); }
    .cp-mob-feat-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: rgba(245,158,11,.12);
      border: 1px solid rgba(245,158,11,.2);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .cp-mob-feat h4 { font-size: .88rem; font-weight: 700; color: #fff; margin-bottom: .15rem; }
    .cp-mob-feat p { font-size: .78rem; color: rgba(255,255,255,.45); line-height: 1.5; }

    /* Phone mockup */
    .cp-phone {
      width: 280px;
      margin: 0 auto;
      background: #111827;
      border-radius: 36px;
      border: 3px solid rgba(245,158,11,.2);
      padding: 12px;
      box-shadow: 0 0 60px rgba(245,158,11,.08), 0 30px 60px rgba(0,0,0,.5);
    }
    .cp-phone-notch {
      width: 100px; height: 20px;
      background: #0c0f1a;
      border-radius: 0 0 14px 14px;
      margin: 0 auto 12px;
    }
    .cp-phone-screen {
      background: #0c0f1a;
      border-radius: 24px;
      overflow: hidden;
    }
    .cp-phone-header {
      background: linear-gradient(135deg, #d97706, #f59e0b);
      padding: .75rem 1rem;
      display: flex; align-items: center; justify-content: space-between;
    }
    .cp-phone-header-title { font-size: .7rem; font-weight: 700; color: #fff; }
    .cp-phone-header-badge {
      font-size: .55rem; font-weight: 700;
      background: rgba(255,255,255,.2);
      color: #fff;
      padding: .15rem .5rem;
      border-radius: 99px;
    }
    .cp-phone-body { padding: .75rem; }
    .cp-phone-route-title {
      font-size: .65rem; font-weight: 700; color: #fff;
      margin-bottom: .1rem;
    }
    .cp-phone-route-meta {
      font-size: .55rem; color: rgba(255,255,255,.4);
      margin-bottom: .6rem;
    }
    .cp-phone-progress {
      height: 6px; border-radius: 3px;
      background: rgba(255,255,255,.08);
      margin-bottom: .15rem;
      overflow: hidden;
    }
    .cp-phone-progress-fill {
      height: 100%; width: 75%;
      border-radius: 3px;
      background: linear-gradient(90deg, #22c55e, #f59e0b);
    }
    .cp-phone-progress-text {
      font-size: .5rem; color: rgba(255,255,255,.4);
      text-align: right; margin-bottom: .75rem;
    }
    .cp-phone-item {
      display: flex; align-items: center; gap: .5rem;
      padding: .45rem .5rem;
      border-radius: 8px;
      margin-bottom: .35rem;
      font-size: .6rem;
    }
    .cp-phone-item-done {
      background: rgba(34,197,94,.08);
      border: 1px solid rgba(34,197,94,.15);
    }
    .cp-phone-item-active {
      background: rgba(245,158,11,.08);
      border: 1px solid rgba(245,158,11,.2);
    }
    .cp-phone-item-pending {
      background: rgba(255,255,255,.02);
      border: 1px solid rgba(255,255,255,.06);
    }
    .cp-phone-item-dot {
      width: 18px; height: 18px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .5rem; font-weight: 800; flex-shrink: 0;
    }
    .cp-phone-item-done .cp-phone-item-dot { background: rgba(34,197,94,.2); color: #4ade80; border: 1.5px solid #22c55e; }
    .cp-phone-item-active .cp-phone-item-dot { background: rgba(245,158,11,.2); color: #fbbf24; border: 1.5px solid #f59e0b; }
    .cp-phone-item-pending .cp-phone-item-dot { background: rgba(255,255,255,.05); color: rgba(255,255,255,.3); border: 1.5px solid rgba(255,255,255,.15); }
    .cp-phone-item-info { flex: 1; }
    .cp-phone-item-name { font-weight: 700; color: #fff; }
    .cp-phone-item-time { font-size: .5rem; color: rgba(255,255,255,.35); }
    .cp-phone-item-status { font-size: .48rem; font-weight: 700; padding: .1rem .35rem; border-radius: 4px; }
    .cp-phone-item-done .cp-phone-item-status { background: rgba(34,197,94,.15); color: #4ade80; }
    .cp-phone-item-active .cp-phone-item-status { background: rgba(245,158,11,.15); color: #fbbf24; }
    .cp-phone-item-pending .cp-phone-item-status { color: rgba(255,255,255,.3); }
    .cp-phone-scan-btn {
      display: flex; align-items: center; justify-content: center; gap: .4rem;
      width: 100%;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #fff;
      border: none; border-radius: 10px;
      padding: .6rem; margin-top: .5rem;
      font-size: .65rem; font-weight: 700;
    }

    /* CTA */
    .cp-cta {
      padding: 6rem 0;
      background: linear-gradient(135deg, #1c1304, #2a1a05, #1c1304);
      position: relative;
      overflow: hidden;
    }
    .cp-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 40% 50% at 50% 50%, rgba(245,158,11,.08), transparent);
    }
    .cp-cta-inner { text-align: center; position: relative; z-index: 1; }
    .cp-cta-inner h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; color: #fff; margin-bottom: .75rem; }
    .cp-cta-inner p { color: rgba(255,255,255,.6); font-size: 1rem; margin-bottom: 2rem; max-width: 540px; margin-left: auto; margin-right: auto; }
    .cp-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
    .cp-cta-btn-w { background: #fff; color: #92400e; border-radius: 10px; padding: .85rem 2rem; font-size: .95rem; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
    .cp-cta-btn-w:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
    .cp-cta-btn-o { background: transparent; color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.25); border-radius: 10px; padding: .85rem 2rem; font-size: .95rem; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
    .cp-cta-btn-o:hover { border-color: #fbbf24; color: #fbbf24; }

    /* Scroll animation */
    .cp-reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .cp-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width:1024px) {
      .cp-how-grid { grid-template-columns: repeat(2,1fr); }
    }
    @media (max-width:900px) {
      .cp-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
      .cp-uc-grid { grid-template-columns: 1fr; }
      .cp-how-grid { grid-template-columns: 1fr; }
      .cp-feat-grid { grid-template-columns: 1fr; }
      .cp-mobile-grid { grid-template-columns: 1fr; gap: 3rem; }
    }
    @media (max-width: 768px) { footer .container > div:first-child { grid-template-columns: 1fr !important; } }