/* app/pages/index.css — homepage (HERO screenshot style) */

/* Page scaffolding (light defaults handled by theme-light.css) */
.hero-wrap .muted { color:#64748b; }
.hero-wrap .chip {
  display:inline-flex; align-items:center; gap:6px;
  background:#ffffff; border:1px solid #e5e7eb; border-radius:999px; padding:4px 8px;
  font-size:12px; color:#334155;
}

/* ---------- HERO: screenshot look ---------- */
.hero-surface{
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #e6edf7;
  border-radius: 18px;
  background: radial-gradient(120% 140% at 10% -10%, #eaf2ff 0%, #f3f8ff 40%, #ffffff 70%);
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
}
.hero { display:grid; gap: 22px; grid-template-columns: 1fr; align-items:center; }
@media (min-width: 980px){ .hero { grid-template-columns: 1.05fr .95fr; } }

.eyebrow { color:#64748b; font-weight:800; letter-spacing:.05em; text-transform:uppercase; font-size:12px; }
.hero h1 { font-size:44px; line-height:1.02; margin:6px 0 10px; letter-spacing:-.02em; color:#0f172a; }
@media (min-width:760px){ .hero h1 { font-size:64px; } }

.hero .accent{
  background: linear-gradient(90deg, #2563eb 0%, #06b6d4 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero p { color:#475569; font-size:17px; margin:0 0 16px; max-width:65ch; }

/* ----- Metals banner (matches hero, with metallic feel) ----- */
.hero-surface.metals{
  border:1px solid #e6ebf2;
  background:
    radial-gradient(120% 140% at 10% -10%, #f1f5f9 0%, #f7f9fc 40%, #ffffff 70%),
    linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,0) 40%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.25) 0 2px, rgba(255,255,255,0) 2px 8px);
  box-shadow: 0 14px 40px rgba(2,6,23,.06);
}

.metal-h{
  font-size: 32px; line-height:1.1; margin:6px 0 10px; letter-spacing:-.01em; color:#0f172a;
}
@media (min-width:760px){ .metal-h{ font-size:44px; } }

.metal-accent{
  /* subtle “steel” gradient text */
  background: linear-gradient(90deg, #64748b 0%, #cbd5e1 50%, #94a3b8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 0 rgba(0,0,0,0); /* crisp edges */
}

.metal-media{
  border-color:#e6ebf2; background:#f3f6fa;
}

.cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn-primary{
  background: linear-gradient(135deg,#2563eb,#06b6d4)!important;
  color:#fff!important; border:none!important; border-radius:12px; padding:12px 16px; font-weight:800;
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; transform: translateY(0);
  box-shadow: 0 10px 24px rgba(37,99,235,.25);
  transition: transform .06s ease, filter .2s ease;
}
.btn-primary:hover{ transform: translateY(-2px); filter: brightness(1.03); }
.btn-ghost{
  background:#ffffff; color:#0f172a; border:1px solid #e5e7eb; border-radius:12px; padding:12px 16px;
  font-weight:800; display:inline-flex; align-items:center; gap:10px; text-decoration:none; transition: transform .06s ease;
}
.btn-ghost:hover{ transform: translateY(-2px); }
.arrow{ font-size:16px; line-height:1; }

.ticks{ display:flex; gap:22px; flex-wrap:wrap; margin:10px 0 0; padding:0; list-style:none; }
.ticks li{ color:#0f172a; display:flex; align-items:center; gap:8px; font-weight:600; }
.ticks li .check{
  width:18px; height:18px; border-radius:999px; display:inline-grid; place-items:center;
  background:#eafaf3; border:1px solid #b7f0cf; color:#10b981; font-size:12px; font-weight:900;
}

.hero-media{ position:relative; border-radius:20px; overflow:hidden; border:1px solid #e5e7eb; background:#f1f5f9; box-shadow:0 12px 34px rgba(2,6,23,.08); }
.hero-media img{ width:100%; height:auto; display:block; aspect-ratio: 16/10; object-fit:cover; }

/* ----- Service cards ----- */
.service{ padding: 8px 0 6px; }
.service h2{ margin:0 0 10px; font-size:24px; letter-spacing:-.01em; }
.cards{ display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card{ background:#ffffff; border:1px solid #e5e7eb; border-radius:16px; padding:14px; box-shadow: 0 10px 26px rgba(15,23,42,.05); }
.card h3{ margin:0 0 6px; font-size:16px; }
.card p{ margin:0; color:#64748b; }

/* ----- Portfolio ----- */
.portfolio h2 { margin:0 0 6px; font-size:24px; letter-spacing:-.01em; }
.portfolio .sub { color: #64748b; margin:0 0 12px; }
.gallery { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tile { background:#ffffff; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; box-shadow: 0 10px 26px rgba(15,23,42,.05); }
.shot-wrap { position: relative; aspect-ratio: 4/3; width:100%; background:#f8fafc; }
.shot-img  { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-bottom:1px solid #e5e7eb; }
.tile-meta { padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tile-meta .name { font-weight:800; }
.tile-meta .muted { font-size: 13px; }

/* Reused grids */
.grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Steps */
.steps .step-num{
  width:26px;height:26px;border-radius:999px;display:inline-grid;place-items:center;
  background:linear-gradient(135deg,#22c55e,#10b981); color:#052e1b; font-weight:900; margin-right:8px;
}

/* CTA panel */
.cta-panel {
  background: linear-gradient(180deg, rgba(34,197,94,.08), rgba(34,197,94,0));
  border:1px solid #e5e7eb; border-radius:18px; padding:16px;
}

/* Overlay badge */
.tile .shot-wrap { position: relative; }

.play-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: rgba(17, 24, 39, 0.65); /* slate-900-ish */
  color: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  pointer-events: none;      /* don't block hover/click */
  z-index: 2;
  transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
}

.tile:hover .play-badge {
  transform: scale(1.06);
  background: rgba(17, 24, 39, 0.8);
}

/* Optional pulse to hint interactivity */
.play-badge::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,.2);
  opacity: .7;
  animation: pulse 1.8s ease-out infinite;
}

@keyframes pulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.25); opacity: 0; }
}
/* Explore models banner */
.explore-banner {
  background: var(--surface-1, #fff);
  border: 1px solid var(--line-soft, #eee);
  border-radius: 16px;
  padding: 16px 18px;
}
.explore-banner .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.explore-banner .eyebrow {
  font-size: 0.85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  margin-bottom: 4px;
}
.explore-banner .ext { margin-left: 6px; }
@media (max-width: 720px) {
  .explore-banner .row { flex-direction: column; align-items: flex-start; }
}