/* ============================================================
   PAGE-SPECIFIC STYLES
   Shared styles live in main.css. Each section below holds the
   rules unique to one page.
   ============================================================ */


/* ─────────────────────────────────────────────
   home (index.html)
   ───────────────────────────────────────────── */

/* Hero photo collage (Figma 10043:163) — 3 columns anchored to the right
   edge of the .max-w-7xl container (so it respects the same px-6 gutter as
   the heading/copy), clipped to the hero height. Columns auto-scroll
   vertically at different speeds/directions for a gentle marquee. */
.hero-top { position:relative; }
.hero-collage { position:absolute; top:0; bottom:0; right:1.5rem; display:flex; gap:20px;
  align-items:flex-start; justify-content:flex-end; overflow:hidden; }
.hc-col { flex:none; width:180px; }
/* each track lists its images twice (in the markup) and scrolls from 0 to
   -50% so the loop is seamless */
.hc-track { display:flex; flex-direction:column; }
.hc-track img { width:180px; height:216px; object-fit:cover; border-radius:16px; display:block;
  margin-bottom:20px; box-shadow:0 10px 30px rgba(30,20,80,.12), 0 2px 8px rgba(30,20,80,.06); }
.hc-track .hc-feat { border-radius:24px; }
@keyframes hc-scroll { to { transform: translateY(-50%); } }
.hc-col:nth-child(1) .hc-track { animation: hc-scroll 42s linear infinite; }
.hc-col:nth-child(2) .hc-track { animation: hc-scroll 52s linear infinite reverse; }
.hc-col:nth-child(3) .hc-track { animation: hc-scroll 38s linear infinite; animation-delay:-15s; }
@media (prefers-reduced-motion: reduce){ .hc-track { animation:none !important; } }

/* "Real Problem" comparison — gradient bg for the "With Fastboy" items
   (Figma 10079:102 — 2 radial highlights over a blue linear) */
.rp-item--good { background:
  radial-gradient(120% 80% at 30% 0%, rgba(85,76,255,.45), transparent 70%),
  radial-gradient(80% 100% at 100% 100%, rgba(34,105,238,.4), transparent 60%),
  linear-gradient(102.5deg, rgba(58,127,255,.5), rgba(25,83,211,.5)); }

.dd-link svg { opacity:.4; flex-shrink:0; transition:opacity .15s; }

.dd-link:hover svg { opacity:1; }

.btn-primary:active { transform:translateY(0); }

.btn-primary:focus-visible { outline:2px solid var(--cobalt-light); outline-offset:3px; }

.testi-card { background:#fff; border:1px solid #E5E7EB; border-radius:20px; padding:2rem; box-shadow:0 4px 16px rgba(0,0,0,.05); transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s; }

.testi-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(37,99,235,.12); }

.prob-item { display:flex; align-items:flex-start; gap:.875rem; padding:.875rem 0; border-bottom:1px solid #F3F4F6; }

.prob-item:last-child { border-bottom:none; }

.sol-item { display:flex; align-items:flex-start; gap:.875rem; padding:.875rem 0; border-bottom:1px solid rgba(255,255,255,.08); }

.sol-item:last-child { border-bottom:none; }

.num-item { display:flex; gap:1.5rem; padding:2rem 0; border-bottom:1px solid rgba(255,255,255,.06); }

.num-item:last-child { border-bottom:none; }

.num-badge { font-family:'Outfit',sans-serif; font-weight:800; font-size:.75rem; color:rgba(255,255,255,.65); flex-shrink:0; width:32px; padding-top:4px; }

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

.fade-in { animation:fadeUp .6s cubic-bezier(.22,1,.36,1) both; }

.d1 { animation-delay:.05s; }

.d2 { animation-delay:.12s; }

.d3 { animation-delay:.2s; }

.d4 { animation-delay:.3s; }

@keyframes testi-scroll {
      from { transform: translateY(0); }
      to   { transform: translateY(-50%); }
    }

.testi-scroll-wrap {
      display: flex;
      gap: 1.5rem;
      max-height: 740px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
      mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    }

.testi-scroll-col { flex:1; overflow:hidden; min-width:0; }

.testi-scroll-inner {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      padding-bottom: 1.5rem;
      animation: testi-scroll var(--dur, 15s) linear infinite;
    }

.testi-scroll-card {
      background: #fff;
      border: 1px solid #E5E7EB;
      border-radius: 1.5rem;
      padding: 1.75rem;
      box-shadow: 0 4px 20px rgba(37,99,235,.07), 0 1px 4px rgba(37,99,235,.04);
    }

.testi-scroll-stars { color:#FBBF24; font-size:1.05rem; letter-spacing:.04em; margin-bottom:.75rem; }

.testi-scroll-quote { color:#374151; font-size:.9375rem; line-height:1.8; }

.testi-scroll-footer {
      display:flex; align-items:center; gap:.75rem;
      margin-top:1.25rem; padding-top:1rem; border-top:1px solid #F3F4F6;
    }

.testi-scroll-footer img {
      width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0;
    }

.testi-scroll-name { font-family:'Outfit',sans-serif; font-weight:700; font-size:.875rem; color:#111; }

.testi-scroll-role { font-size:.75rem; color:#9CA3AF; margin-top:.1rem; }

@keyframes border-beam {
      100% { offset-distance: 100%; }
    }

.border-beam {
      pointer-events: none;
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: calc(var(--bb-width, 1.5) * 1px) solid transparent;
      
      mask: linear-gradient(white, white) padding-box, linear-gradient(white, white);
      -webkit-mask: linear-gradient(white, white) padding-box, linear-gradient(white, white);
      mask-composite: exclude;
      -webkit-mask-composite: destination-out;
    }

.border-beam::after {
      content: '';
      position: absolute;
      aspect-ratio: 1 / 1;
      width: calc(var(--bb-size, 200) * 1px);
      animation: border-beam calc(var(--bb-dur, 15) * 1s) infinite linear;
      animation-delay: var(--bb-delay, 0s);
      background: linear-gradient(to left, var(--bb-from, #1D6FFF), var(--bb-to, #9333EA), transparent);
      offset-anchor: calc(var(--bb-anchor, 90) * 1%) 50%;
      offset-path: rect(0 auto auto 0 round calc(var(--bb-size, 200) * 1px));
    }

.bga-ptr {
      background: radial-gradient(circle at center, rgba(140,100,255,.8) 0, rgba(140,100,255,0) 50%) no-repeat;
      mix-blend-mode: hard-light;
      position: absolute;
      width: 100%; height: 100%;
      top: -50%; left: -50%;
      opacity: .7;
      pointer-events: none;
    }


/* ─────────────────────────────────────────────
   about (about.html)
   ───────────────────────────────────────────── */
.timeline-item {position:relative;padding-left:2.5rem;padding-bottom:2.5rem;}

.timeline-item::before {content:'';position:absolute;left:.75rem;top:1.5rem;bottom:0;width:1.5px;background:#E5E7EB;}

.timeline-item:last-child::before {display:none;}

.timeline-dot {position:absolute;left:0;top:.25rem;width:1.5rem;height:1.5rem;background:var(--cobalt);border-radius:50%;display:flex;align-items:center;justify-content:center;}


/* ─────────────────────────────────────────────
   blog (blog.html)
   ───────────────────────────────────────────── */
.blog-card {border:1.5px solid #E5E7EB;border-radius:16px;background:#fff;overflow:hidden;text-decoration:none;color:inherit;display:block;transition:border-color .2s,box-shadow .2s,transform .2s cubic-bezier(.34,1.56,.64,1);}

.blog-card:hover {border-color:var(--cobalt-light);box-shadow:0 8px 32px rgba(37,99,235,.1);transform:translateY(-3px);}

.cat-pill {display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.3rem .7rem;border-radius:999px;}


/* ─────────────────────────────────────────────
   contact (contact.html)
   ───────────────────────────────────────────── */
.contact-card {border:1.5px solid #E5E7EB;border-radius:16px;padding:1.75rem;background:#fff;transition:border-color .2s,box-shadow .2s;}

.contact-card:hover {border-color:var(--cobalt-light);box-shadow:0 6px 24px rgba(37,99,235,.08);}


/* ─────────────────────────────────────────────
   pricing (pricing.html)
   ───────────────────────────────────────────── */
.check-item svg {flex-shrink:0;margin-top:2px;}

.sol-row {display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1.25rem 0;border-bottom:1px solid #F3F4F6;align-items:center;}

.sol-row:last-child {border-bottom:none;}


/* ─────────────────────────────────────────────
   services (services.html)
   ───────────────────────────────────────────── */
.feature-pill {display:inline-flex;align-items:center;gap:.375rem;background:#F3F4F6;color:#4B5563;font-size:.75rem;font-weight:500;padding:.3rem .7rem;border-radius:999px;margin:.2rem;}


/* ─────────────────────────────────────────────
   website-design (services/website-design.html)
   ───────────────────────────────────────────── */
.process-step {display:flex;gap:1.25rem;align-items:flex-start;padding:1.5rem 0;border-bottom:1px solid #E5E7EB;}

.process-step:last-child {border-bottom:none;}

.step-num {width:36px;height:36px;border-radius:50%;background:var(--cobalt);color:#fff;font-family:'Outfit',sans-serif;font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}