/* ══════════════════════════════════════════
   index.html — page-specific styles
══════════════════════════════════════════ */
/* ── Home-specific styles ── */
    .featured-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
    }

    .process-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
      counter-reset: steps;
    }

    .process-step {
      position: relative;
      padding: 1.5rem;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      counter-increment: steps;
    }

    .process-step::before {
      content: counter(steps, decimal-leading-zero);
      position: absolute;
      top: 1rem;
      right: 1rem;
      font-size: 2rem;
      font-weight: 900;
      color: var(--purple-muted);
      opacity: 0.5;
      line-height: 1;
    }

    .materials-row {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: 1.5rem;
    }

    .material-chip {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 8px 14px;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .material-chip i {
      color: var(--purple-light);
    }

    .testimonial-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 1.5rem;
      transition: var(--transition);
    }

    .testimonial-card:hover {
      border-color: var(--border-glow);
    }

    .stars { color: #ffd740; font-size: 0.85rem; margin-bottom: 0.75rem; }
    .testimonial-text { color: var(--text-secondary); font-size: 0.9rem; font-style: italic; margin-bottom: 1rem; }
    .testimonial-author { font-weight: 700; font-size: 0.85rem; }
    .testimonial-role { color: var(--text-muted); font-size: 0.78rem; }

    /* ── Gear section responsive ── */
    .gear-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    .printer-imgs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .img-offset { margin-top: 24px; }
    @media (max-width: 768px) {
      .gear-layout { grid-template-columns: 1fr; gap: 2rem; }
      .printer-imgs { grid-template-columns: 1fr 1fr; } /* keep 2-col for images */
      .img-offset { margin-top: 0; }
    }

    /* ── Promo Slideshow ── */
    .promo-stage {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #09090f;
      overflow: hidden;
      cursor: pointer;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(124,77,255,0.2);
      box-shadow: 0 0 40px rgba(124,77,255,0.1);
      font-family: 'Exo 2', sans-serif;
    }

    /* hex grid bg */
    .promo-stage::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64'%3E%3Cpath d='M28 0L56 16v32L28 64 0 48V16Z' fill='none' stroke='rgba(124,77,255,0.07)' stroke-width='1'/%3E%3C/svg%3E");
      background-size: 56px 64px;
      z-index: 0;
    }

    .promo-scanline {
      position: absolute;
      top: -2px; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, #7c4dff, transparent);
      z-index: 20;
      animation: promo-scan 3s linear infinite;
      opacity: 0.6;
    }
    @keyframes promo-scan {
      0%   { top: -2px; }
      100% { top: 100%; }
    }

    .promo-glow {
      position: absolute;
      width: 60%; height: 50%;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse, rgba(124,77,255,0.12) 0%, transparent 70%);
      z-index: 1;
      animation: promo-pulse 3s ease-in-out infinite;
    }
    @keyframes promo-pulse {
      0%,100% { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
      50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.1); }
    }

    .promo-corner { position: absolute; width: 20px; height: 20px; z-index: 15; }
    .promo-corner.tl { top: 10px; left: 10px; border-top: 2px solid #7c4dff; border-left: 2px solid #7c4dff; }
    .promo-corner.tr { top: 10px; right: 10px; border-top: 2px solid #7c4dff; border-right: 2px solid #7c4dff; }
    .promo-corner.bl { bottom: 10px; left: 10px; border-bottom: 2px solid #7c4dff; border-left: 2px solid #7c4dff; }
    .promo-corner.br { bottom: 10px; right: 10px; border-bottom: 2px solid #7c4dff; border-right: 2px solid #7c4dff; }

    .promo-slide {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
    }
    .promo-slide.active { opacity: 1; pointer-events: auto; }

    /* Slide 1 */
    .ps1 .ps-tagline {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(8px, 1.2vw, 11px);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: #7c4dff;
      margin-bottom: clamp(10px, 1.8vw, 18px);
      opacity: 0; transform: translateY(10px);
      transition: all 0.6s ease 0.2s;
    }
    .ps1.active .ps-tagline { opacity: 1; transform: translateY(0); }

    .ps1 .ps-headline {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(28px, 6.5vw, 64px);
      font-weight: 700;
      line-height: 1;
      text-align: center;
      color: #e2e8f0;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      opacity: 0; transform: translateY(20px);
      transition: all 0.7s ease 0.4s;
    }
    .ps1.active .ps-headline { opacity: 1; transform: translateY(0); }
    .ps1 .ps-headline span { color: #7c4dff; }

    .ps1 .ps-sub {
      margin-top: clamp(8px, 1.2vw, 16px);
      font-size: clamp(9px, 1.4vw, 15px);
      color: #94a3b8;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 300;
      opacity: 0;
      transition: all 0.6s ease 0.8s;
    }
    .ps1.active .ps-sub { opacity: 1; }

    .ps1 .ps-divider {
      width: 0; height: 2px;
      background: linear-gradient(90deg, transparent, #7c4dff, transparent);
      margin: clamp(10px, 1.8vw, 20px) auto;
      transition: width 0.8s ease 0.6s;
    }
    .ps1.active .ps-divider { width: clamp(100px, 22vw, 200px); }

    .ps1 .ps-hex-logo {
      width: clamp(36px, 6vw, 64px); height: clamp(36px, 6vw, 64px);
      color: #7c4dff;
      margin-bottom: clamp(10px, 1.8vw, 20px);
      opacity: 0; transform: scale(0.6) rotate(-30deg);
      transition: all 0.6s cubic-bezier(.34,1.56,.64,1) 0s;
    }
    .ps1.active .ps-hex-logo { opacity: 1; transform: scale(1) rotate(0deg); }

    /* Slide 2 */
    .ps2 .ps-slide-label {
      font-size: clamp(8px, 1vw, 10px);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: #7c4dff;
      margin-bottom: clamp(6px, 1vw, 12px);
      opacity: 0; transition: opacity 0.5s ease 0.2s;
    }
    .ps2.active .ps-slide-label { opacity: 1; }

    .ps2 .ps-printer-row {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 0;
      width: 100%;
      height: clamp(160px, 28vw, 300px);
    }

    .ps-p-item {
      display: flex; flex-direction: column; align-items: center;
      flex: 1; max-width: 280px;
      opacity: 0; transform: translateY(40px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .ps2.active .ps-p-item:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0.2s; }
    .ps2.active .ps-p-item:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:0.4s; }
    .ps2.active .ps-p-item:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:0.6s; }

    .ps-p-item img {
      width: clamp(60px, 10vw, 150px); height: clamp(60px, 10vw, 150px);
      max-width: 90%;
      object-fit: contain;
      filter: drop-shadow(0 8px 20px rgba(124,77,255,0.3)) drop-shadow(0 4px 12px rgba(0,0,0,0.8));
      transition: transform 0.3s ease;
    }
    .ps-p-item:hover img { transform: translateY(-8px) scale(1.05); }

    .ps-p-name {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(10px, 1.6vw, 16px);
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #e2e8f0;
      margin-top: clamp(4px, 0.8vw, 8px);
    }
    .ps-p-tag {
      font-size: clamp(8px, 1vw, 10px);
      letter-spacing: 0.12em;
      color: #9e6bff;
      text-transform: uppercase;
      margin-top: 2px;
    }

    .ps-p-divider {
      width: 1px; height: 40%;
      background: linear-gradient(180deg, transparent, rgba(124,77,255,0.3), transparent);
      align-self: center; flex-shrink: 0;
    }

    /* Slide 3 */
    .ps3 .ps-stats-headline {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(11px, 1.8vw, 18px);
      font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
      color: #94a3b8;
      margin-bottom: clamp(16px, 3vw, 40px);
      opacity: 0; transition: opacity 0.5s ease 0.2s;
    }
    .ps3.active .ps-stats-headline { opacity: 1; }

    .ps3 .ps-stats-grid {
      display: grid; grid-template-columns: repeat(4,1fr);
      gap: 2px; width: 85%;
    }

    .ps-stat-box {
      background: rgba(124,77,255,0.06);
      border: 1px solid rgba(124,77,255,0.2);
      padding: clamp(10px, 2vw, 24px) clamp(6px, 1.2vw, 16px);
      text-align: center;
      opacity: 0; transform: scale(0.85);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .ps3.active .ps-stat-box:nth-child(1) { opacity:1; transform:scale(1); transition-delay:0.2s; }
    .ps3.active .ps-stat-box:nth-child(2) { opacity:1; transform:scale(1); transition-delay:0.35s; }
    .ps3.active .ps-stat-box:nth-child(3) { opacity:1; transform:scale(1); transition-delay:0.5s; }
    .ps3.active .ps-stat-box:nth-child(4) { opacity:1; transform:scale(1); transition-delay:0.65s; }

    .ps-stat-num {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(24px, 4.5vw, 48px); font-weight: 700;
      color: #7c4dff; line-height: 1;
    }
    .ps-stat-unit {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(14px, 2.5vw, 28px); color: #9e6bff;
    }
    .ps-stat-label {
      font-size: clamp(7px, 1vw, 10px);
      letter-spacing: 0.15em; text-transform: uppercase;
      color: #94a3b8; margin-top: clamp(4px, 0.8vw, 8px);
    }

    /* Slide 4 */
    .ps4 .ps-cta-pre {
      font-size: clamp(8px, 1.1vw, 11px);
      letter-spacing: 0.3em; text-transform: uppercase;
      color: #7c4dff;
      margin-bottom: clamp(8px, 1.4vw, 16px);
      opacity: 0; transition: opacity 0.5s ease 0.2s;
    }
    .ps4.active .ps-cta-pre { opacity: 1; }

    .ps4 .ps-cta-headline {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(22px, 4.8vw, 52px); font-weight: 700;
      text-transform: uppercase; text-align: center;
      color: #e2e8f0; line-height: 1.05;
      opacity: 0; transform: translateY(16px);
      transition: all 0.7s ease 0.3s;
    }
    .ps4.active .ps-cta-headline { opacity: 1; transform: translateY(0); }
    .ps4 .ps-cta-headline em { color: #7c4dff; font-style: normal; }

    .ps4 .ps-cta-btn {
      margin-top: clamp(14px, 2.5vw, 32px);
      padding: clamp(8px, 1.3vw, 14px) clamp(18px, 3.5vw, 40px);
      background: #7c4dff; color: #fff;
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(11px, 1.5vw, 16px); font-weight: 700;
      letter-spacing: 0.15em; text-transform: uppercase;
      border: none; cursor: pointer;
      opacity: 0; transform: translateY(10px);
      transition: all 0.5s ease 0.7s, background 0.2s;
      text-decoration: none; display: inline-block;
    }
    .ps4.active .ps-cta-btn { opacity: 1; transform: translateY(0); }
    .ps4 .ps-cta-btn:hover { background: #9e6bff; color: #fff; }

    .ps4 .ps-url {
      margin-top: clamp(6px, 1vw, 14px);
      font-size: clamp(8px, 1.1vw, 11px);
      letter-spacing: 0.15em; color: #94a3b8;
      text-transform: uppercase;
      opacity: 0; transition: opacity 0.5s ease 1s;
    }
    .ps4.active .ps-url { opacity: 1; }

    /* Top bar */
    .promo-top-bar {
      position: absolute; top: 0; left: 0; right: 0;
      height: clamp(24px, 4vw, 36px);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 clamp(10px, 1.5vw, 20px);
      z-index: 15;
      border-bottom: 1px solid rgba(124,77,255,0.1);
      background: rgba(9,9,15,0.6);
    }
    .promo-top-bar .ptb-logo {
      font-family: 'Rajdhani', sans-serif;
      font-size: clamp(9px, 1.3vw, 13px); font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase; color: #e2e8f0;
    }
    .promo-top-bar .ptb-logo span { color: #7c4dff; }
    .promo-top-bar .ptb-badge {
      font-size: clamp(7px, 0.9vw, 9px); letter-spacing: 0.15em;
      text-transform: uppercase; color: #7c4dff;
      border: 1px solid rgba(124,77,255,0.4); padding: 2px clamp(4px,0.8vw,8px);
    }

    /* Progress bar */
    .promo-progress {
      position: absolute; bottom: 0; left: 0;
      height: 3px; background: #7c4dff; z-index: 20;
      width: 0%; transition: width linear;
    }

    /* Dots */
    .promo-dots {
      position: absolute; bottom: clamp(8px,1.5vw,18px);
      left: 50%; transform: translateX(-50%);
      display: flex; gap: 6px; z-index: 20;
    }
    .promo-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: rgba(124,77,255,0.3);
      border: 1px solid rgba(124,77,255,0.5);
      transition: background 0.3s, transform 0.3s; cursor: pointer;
    }
    .promo-dot.active { background: #7c4dff; transform: scale(1.3); }