/* Page layout for the home page, ported from the mockup "Jeison Guerrero.dc.html".
   Colors, fonts, radii and shadows come from the Nocturne tokens in nocturne.css. */

:root {
  --wrap-max: 1280px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(64px, 8vw, 88px);
  --fade-rule: linear-gradient(to right, transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

/* ---- Base ---- */
html { scroll-behavior: smooth; color-scheme: dark; }
body { -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
a:hover { color: var(--color-accent-400); }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

.wrap { max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; padding: 8px 12px; background: var(--color-surface); border-radius: var(--radius-md); }

.eyebrow {
  margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-accent-300);
}
.section-title { margin: 0; font-size: 32px; font-weight: 500; letter-spacing: -.02em; }

/* ---- Buttons (extend Nocturne's .btn) ---- */
.btn-nav { font-size: 15px; padding: 9px 16px; }
.btn-lg { font-size: 16px; padding: 14px 22px; }
.btn-glow { box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.btn-row { justify-content: space-between; padding: 16px 20px; overflow-wrap: anywhere; }

/* ---- Header ---- */
.site-header {
  padding-block: 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 17px; color: var(--color-text); }
.brand:hover { color: var(--color-text); }
.brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 12px var(--color-accent);
}
.site-nav { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.5vw, 28px); font-size: 15px; align-items: center; }
.site-nav a:not(.btn) { color: var(--color-neutral-400); }
.site-nav a:not(.btn):hover { color: var(--color-text); }

/* ---- Hero ---- */
.hero { background: radial-gradient(900px 420px at 18% 0%, var(--color-accent-900), transparent 70%); }
.hero-inner { padding-block: clamp(48px, 9vw, 96px) clamp(56px, 8vw, 88px); }
.hero-title {
  margin: 22px 0 0; max-width: 980px;
  font-size: clamp(40px, 7vw, 84px); line-height: 1.04; font-weight: 500;
  letter-spacing: -.035em; text-wrap: balance;
}
.hl { color: var(--color-accent-400); }
.hero-row {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-end; justify-content: space-between;
}
.hero-lede {
  margin: 0; flex: 1 1 380px; max-width: 560px;
  font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; color: var(--color-neutral-400); text-wrap: pretty;
}

/* ---- Services ---- */
.services {
  padding-bottom: var(--section-y);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px;
}
.service-card {
  background: var(--color-surface); border-radius: var(--radius-lg); padding: 32px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm);
}
.mark { width: 28px; height: 2px; background: var(--color-accent); }
.service-name { margin: 8px 0 0; font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1.55; }
.service-desc { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-neutral-400); }
.service-points { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--color-neutral-300); padding-top: 6px; }
.service-points li::before { content: "— "; }
.service-price {
  margin: auto 0 0; padding-top: 24px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.service-price span { font-size: 14px; color: var(--color-neutral-500); }
.service-price strong { font-size: 22px; font-weight: 500; }

/* ---- Results band ---- */
.results { background: linear-gradient(135deg, var(--color-section), var(--color-section-glow)); }
.results-inner {
  padding-block: clamp(56px, 7vw, 72px);
  display: flex; flex-wrap: wrap; gap: 40px 48px; align-items: center;
}
.results-intro { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; }
.results-title { margin: 0; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.08; font-weight: 500; letter-spacing: -.025em; }
.results-source { margin: 6px 0 0; font-size: 15px; color: var(--color-neutral-300); }
/* 220px min: four stats sit 2x2 next to the intro; three stats use minmax(160px, 1fr) for one row. */
.stats { flex: 1.6 1 480px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px 40px; }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat p { margin: 0; }
.stat-value { font-size: clamp(48px, 5vw, 60px); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--color-accent-300); }
.stat-label { font-size: 16px; font-weight: 500; }
.stat-detail { font-size: 14px; color: var(--color-neutral-300); }

/* ---- Work ---- */
.work { padding-block: var(--section-y); display: flex; flex-direction: column; gap: 24px; }
.work-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: baseline; }
.work-head span { font-size: 15px; color: var(--color-neutral-500); }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.work-item { display: flex; flex-direction: column; gap: 12px; }
.work-shot { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
.work-link { display: block; border-radius: var(--radius-lg); }
.work-link .work-shot { box-shadow: var(--shadow-sm); transition: box-shadow .2s; }
.work-link:hover .work-shot { box-shadow: 0 0 0 1px var(--color-accent), 0 0 24px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.work-placeholder {
  display: grid; place-items: center; text-align: center; padding: 16px;
  background: var(--color-surface); box-shadow: var(--shadow-sm);
  font-size: 14px; color: var(--color-neutral-500);
}
.work-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; font-size: 16px; margin: 0; color: var(--color-text); }
.work-meta > :first-child { font-weight: 500; }
.work-meta > :first-child:not(a) { color: var(--color-text); }
.work-meta > :last-child { color: var(--color-neutral-500); }

/* ---- FAQ ---- */
.faq { padding-bottom: var(--section-y); display: flex; flex-wrap: wrap; gap: 16px 48px; }
.faq-title { flex: 1 1 260px; }
.faq-list { flex: 1.6 1 420px; display: flex; flex-direction: column; }
.faq-item { background: var(--fade-rule) bottom / 100% 1px no-repeat; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 0;
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 18px; font-weight: 500; color: var(--color-text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-accent-300); }
.faq-icon { color: var(--color-accent); font-size: 22px; line-height: 1; }
.faq-icon::before { content: "+"; }
.faq-item[open] .faq-icon::before { content: "−"; }
.faq-item p { margin: 0; padding: 0 0 20px; font-size: 16px; line-height: 1.55; color: var(--color-neutral-400); max-width: 600px; }

/* ---- Closing CTA ---- */
.cta { padding-bottom: 40px; }
.cta-box {
  border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 56px);
  background: radial-gradient(600px 300px at 0% 100%, var(--color-accent-900), transparent 70%), var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-end;
}
.cta-text { flex: 1.3 1 340px; display: flex; flex-direction: column; gap: 12px; }
.cta-title { margin: 0; font-size: clamp(36px, 5vw, 56px); line-height: 1.04; font-weight: 500; letter-spacing: -.035em; }
.cta-text p { margin: 0; font-size: 18px; color: var(--color-neutral-400); }
.cta-actions { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; }

/* ---- Footer ---- */
.site-footer {
  padding-bottom: 28px;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between;
  font-size: 14px; color: var(--color-neutral-600);
}
.site-footer a { color: var(--color-neutral-500); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}