/* ============================================================
   CONCIERGE CART — responsive.css
   Desktop · Laptop · Tablet · Mobile
   ============================================================ */

:root {
  --gutter: 80px;
  --section-gap: 180px;
}

/* ============ Laptop — 1280–1519 ============ */
@media (max-width: 1520px) {
  :root {
    --gutter: 56px;
    --section-gap: 150px;
  }
  .d3-jet { width: min(40vw, 560px); }
  .d3-sedan { width: min(27vw, 400px); }
  .d3-watch { width: min(20vw, 290px); }
  .nav-menu { gap: 34px; }
}

/* ============ Small laptop — 1024–1279 ============ */
@media (max-width: 1279px) {
  :root {
    --gutter: 44px;
    --section-gap: 130px;
  }
  .hero-display { font-size: clamp(48px, 6vw, 64px); }
  .hero-copy { max-width: 460px; }

  .d3-jet { right: 1%; top: 12%; width: min(40vw, 520px); }
  .d3-sedan { left: 38%; top: 26%; width: min(26vw, 360px); }
  .d3-watch { right: 10%; bottom: 8%; width: min(19vw, 270px); }
  .d3-chip { left: auto; right: 3%; top: 9%; }

  .service-card { grid-column: span 6; }
  .service-card:nth-child(3n+2), .service-card:nth-child(3n+3) { transform: none; }
  .service-card:nth-child(even) { transform: translateY(40px); }

  .timeline-step { width: 260px; }
  .step-2 { right: 3%; }
  .step-4 { left: 3%; }

  .platform-glass { padding: 90px 60px; }

  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}

/* ============ Tablet — 768–1023 ============ */
@media (max-width: 1023px) {
  :root {
    --gutter: 36px;
    --section-gap: 120px;
  }

  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .nav-actions .btn-ghost { display: none; }

  /* Hero: stacked — copy above, 3D collage below */
  .hero { min-height: auto; }
  .hero-copy {
    position: relative;
    top: auto;
    transform: none;
    max-width: 640px;
    padding: 18vh var(--gutter) 0;
    background: none;
  }
  .hero-display { font-size: clamp(44px, 8vw, 58px); }

  .hero-stage {
    position: static;
    perspective: none;
    padding: 44px var(--gutter) 0;
  }
  .stage-3d {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
  }
  .d3-card {
    position: static;
    width: calc(50% - 13px);
    transform: none !important;
  }
  .d3-chip { position: static; transform: none; margin-top: 4px; width: fit-content; }
  .d3-ring, .d3-core { display: none; }

  .hero-platform { position: static; margin-top: 60px; height: 96px; }

  .marquee-track span { font-size: 20px; }
  .marquee-track { gap: 30px; }

  .services-grid { gap: 36px; }

  .platform-glass { padding: 76px 44px; border-radius: 30px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 56px 32px; }

  .contact-grid { grid-template-columns: 1fr; gap: 70px; }
  .contact-form { padding: 46px 40px 52px; }

  /* Timeline becomes a vertical illuminated spine */
  .timeline-track { display: none; }
  .timeline {
    height: auto;
    display: grid;
    gap: 26px;
    padding-left: 70px;
    position: relative;
  }
  .timeline::before {
    content: "";
    position: absolute;
    left: 46px; top: 46px; bottom: 46px;
    width: 2px;
    background: linear-gradient(180deg, var(--gold-deep), var(--gold), var(--gold-bright));
    box-shadow: 0 0 12px rgba(201, 162, 75, 0.5);
  }
  .timeline-step {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
  }
  .timeline-step .step-copy { margin: 0; }
  .node { position: absolute; left: -70px; top: 6px; width: 76px; height: 76px; }
  .node-core { width: 52px; height: 52px; font-size: 19px; }
  .node-halo { inset: -10px; }
}

/* ============ Mobile — 480–767 ============ */
@media (max-width: 767px) {
  :root {
    --gutter: 24px;
    --section-gap: 100px;
  }

  body { font-size: 17px; }

  .hero-copy { padding-top: 15vh; }
  .hero-display { font-size: clamp(38px, 11vw, 50px); }
  .hero-lead { font-size: 16px; }
  .br-desktop { display: none; }
  .hero-cta { flex-direction: column; align-items: stretch; }

  .hero-stage { padding-top: 36px; }
  .stage-3d { gap: 20px; }
  .d3-card { width: calc(50% - 10px); }
  .d3-chip { padding: 11px 18px; font-size: 13px; }

  .hero-platform { height: 84px; margin-top: 44px; }
  .platform-mark { letter-spacing: 0.3em; }

  .marquee { transform: rotate(-2deg) scale(1.03); }

  .services-grid { grid-template-columns: 1fr; gap: 60px; }
  .service-card { grid-column: auto; }
  .service-card:nth-child(even) { transform: none; }

  .platform-glass { padding: 60px 26px; border-radius: 24px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 44px 20px; }
  .stat .value { font-size: 58px; }
  .stat .label { font-size: 13px; letter-spacing: 0.12em; }
  .platform-note { margin-top: 60px; padding: 40px 28px; }

  .contact-form { padding: 40px 26px 46px; border-radius: 26px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }

  .footer { padding-top: 80px; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-tag { text-align: left; }
  .footer-grid { grid-template-columns: 1fr; gap: 44px; padding: 50px 0 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============ Small mobile — ≤479 ============ */
@media (max-width: 479px) {
  .hero-display { font-size: clamp(34px, 12vw, 42px); }
  .d3-card { width: 100%; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 38px 14px; }
  .stat .value { font-size: 50px; }

  .timeline { padding-left: 62px; }
  .timeline::before { left: 40px; }
  .node { left: -62px; width: 68px; height: 68px; }
  .node-core { width: 46px; height: 46px; }

  .btn { padding: 15px 24px; }
}