/* ============================================================
   RVK Digital — home.css
   Homepage-specific styles only.
   Depends on global.css being loaded first.
   ============================================================ */


/* ── HERO ────────────────────────────────────────────────── */
/*
  Split hero: left = light bg, right = dark bg.
  .hero is full-bleed with a 50/50 gradient.
  .hero-inner constrains content to --max-w.
  .hero-right provides the dark background panel.
*/
.hero {
  min-height: 100vh;
  padding-top: 66px;
  /* full-bleed colour split — left light, right dark */
  background: linear-gradient(to right, var(--light) 50%, var(--dark) 50%);
  display: flex;
  justify-content: center;
  position: relative;
}

.hero-inner {
  max-width: var(--max-w);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 66px);
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem clamp(1.25rem, 5%, 4rem) 5rem clamp(1.25rem, 6%, 5rem);
  background: var(--light);
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  color: var(--mid);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.375rem 1rem;
  border-radius: 100px;
  margin-bottom: 2rem;
  width: fit-content;
  border: 1px solid var(--border);
}
.badge-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{ opacity:1 } 50%{ opacity:0.25 } }

.hero h1 {
  font-size: clamp(2.6rem, 4.2vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--dark);
  margin-bottom: 1.625rem;
}
.hero h1 .accent { color: var(--accent); }
.hero h1 .muted  { color: var(--mid); display: block; }

.hero-sub {
  font-size: 1.075rem;
  color: var(--mid);
  font-weight: 300;
  max-width: 480px;
  margin-bottom: 2.5rem;
  line-height: 1.8;
}

.hero-actions { display: flex; gap: 0.875rem; flex-wrap: wrap; }
/* Secondary btn override for light hero */
.hero-actions .btn-secondary {
  border-color: var(--border-md);
  color: var(--dark);
}
.hero-actions .btn-secondary:hover {
  border-color: var(--dark);
  background: var(--surface-2);
  color: var(--dark);
}

.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.stat-num {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.stat-label {
  font-size: 0.775rem;
  color: var(--mid);
  font-weight: 300;
}

/* Hero right — dark panel */
.hero-right {
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4rem 3rem 4rem 2rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
/* subtle depth circles on dark panel */
.hero-right::before {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: var(--dark-2);
  opacity: 0.8;
  pointer-events: none;
}
.hero-right::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -40px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.06;
  pointer-events: none;
}
.hero-mockup {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Browser mockup */
.mock-browser {
  background: rgba(245,242,239,0.04);
  border: 1px solid rgba(245,242,239,0.09);
  border-radius: 14px;
  padding: 14px;
}
.mock-bar {
  display: flex; align-items: center;
  gap: 6px; margin-bottom: 10px;
}
.mock-dot { width: 7px; height: 7px; border-radius: 50%; }
.mock-url {
  flex: 1; height: 12px;
  background: rgba(245,242,239,0.07);
  border-radius: 4px;
}
.mock-screen {
  background: var(--light);
  border-radius: 7px;
  overflow: hidden;
}
.mock-topbar {
  height: 24px;
  background: #EDE9E6;
  border-bottom: 1px solid rgba(26,23,20,0.07);
  display: flex; align-items: center;
  padding: 0 10px; gap: 14px;
}
.mock-pill { height: 5px; border-radius: 3px; background: rgba(26,23,20,0.12); }
.mock-body { padding: 12px; }
.mock-h {
  height: 8px; border-radius: 3px;
  background: var(--dark); opacity: 0.65;
  margin-bottom: 5px;
}
.mock-p {
  height: 4px; border-radius: 3px;
  background: rgba(26,23,20,0.12);
  margin-bottom: 4px;
}
.mock-cta {
  height: 16px; width: 72px;
  border-radius: 4px;
  background: var(--dark);
  margin-top: 8px;
}
.mock-cards-row { display: flex; gap: 5px; padding: 6px 12px 10px; }
.mock-card-sm   { flex: 1; height: 34px; background: #EDE9E6; border-radius: 5px; }

/* Score cards */
.mock-scores { display: flex; gap: 10px; }
.mock-score {
  flex: 1;
  background: rgba(245,242,239,0.04);
  border: 1px solid rgba(245,242,239,0.09);
  border-radius: 12px;
  padding: 14px;
}
.ms-lbl {
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(245,242,239,0.3); margin-bottom: 5px;
}
.ms-val {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
}
.ms-tag {
  display: inline-block; margin-top: 6px;
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
}

/* Keyword rankings */
.mock-ranks {
  background: rgba(245,242,239,0.04);
  border: 1px solid rgba(245,242,239,0.09);
  border-radius: 12px;
  padding: 14px;
}
.mr-lbl {
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(245,242,239,0.3); margin-bottom: 10px;
}
.mr-row {
  display: flex; align-items: center;
  gap: 8px; margin-bottom: 7px;
}
.mr-row:last-child { margin-bottom: 0; }
.mr-kw  { font-size: 0.6875rem; color: rgba(245,242,239,0.48); flex: 1; }
.mr-bar-bg {
  flex: 2; height: 4px;
  background: rgba(245,242,239,0.07);
  border-radius: 3px; overflow: hidden;
}
.mr-fill { height: 100%; border-radius: 3px; background: var(--accent); }
.mr-pos  {
  font-size: 0.625rem; font-weight: 600;
  color: var(--accent); min-width: 20px; text-align: right;
}

/* Hero entrance animation */
.hero-left > * {
  opacity: 0;
  transform: translateY(14px);
  animation: hFade 0.55s forwards;
  animation-fill-mode: both;
}
.hero-left > *:nth-child(1) { animation-delay: 0.05s; }
.hero-left > *:nth-child(2) { animation-delay: 0.15s; }
.hero-left > *:nth-child(3) { animation-delay: 0.25s; }
.hero-left > *:nth-child(4) { animation-delay: 0.35s; }
.hero-left > *:nth-child(5) { animation-delay: 0.45s; }
@keyframes hFade { to { opacity: 1; transform: none; } }


/* ── SERVICES ────────────────────────────────────────────── */
#services { background: var(--surface); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.125rem;
}

.service-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--dark), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-md);
}
[data-theme="light"] .service-card:hover { box-shadow: 0 12px 36px rgba(26,23,20,0.07); }
[data-theme="dark"]  .service-card:hover { box-shadow: 0 12px 36px rgba(26,23,20,0.4);  }
.service-card:hover::before { transform: scaleX(1); }

.svc-icon {
  width: 46px; height: 46px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.svc-icon svg { width: 20px; height: 20px; stroke: currentColor; }
.service-card:hover .svc-icon { background: var(--accent); color: #fff; }
[data-theme="dark"] .svc-icon { color: var(--accent); }

.service-card h3 { color: var(--text-1); margin-bottom: 0.625rem; }
.service-card p  { font-size: 0.9rem; }

.svc-link {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 1.25rem; font-size: 0.875rem; font-weight: 500;
  color: var(--text-2);
  transition: gap var(--t-fast), color var(--t-fast);
}
.svc-link svg { width: 14px; height: 14px; stroke: currentColor; flex-shrink: 0; }
[data-theme="dark"] .svc-link { color: var(--accent); }
.svc-link:hover { gap: 9px; color: var(--accent); }


/* ── VALUE / BENEFITS ────────────────────────────────────── */
#value { background: var(--dark); }
#value h2               { color: var(--light); }
#value .section-intro   { color: rgba(245,242,239,0.42); }
#value .eyebrow         { color: var(--salmon-light); }
#value .eyebrow::before { background: var(--salmon-light); }

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid rgba(245,242,239,0.07);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.value-item {
  background: rgba(245,242,239,0.02);
  padding: 1.875rem;
  transition: background var(--t-fast);
}
.value-item:hover { background: rgba(232,133,106,0.07); }

.vi-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: rgba(245,242,239,0.05);
  border: 1px solid rgba(245,242,239,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.125rem;
  color: var(--accent);
}
.vi-icon svg { width: 18px; height: 18px; stroke: currentColor; }

.value-item h3 { font-size: 0.9375rem; color: var(--light); margin-bottom: 0.4rem; }
.value-item p  { font-size: 0.8125rem; color: rgba(245,242,239,0.35); line-height: 1.65; }


/* ── PORTFOLIO ───────────────────────────────────────────── */
#work { background: var(--bg); }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.75rem;
}

.portfolio-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card-bg);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.portfolio-card:hover { transform: translateY(-4px); }
[data-theme="light"] .portfolio-card:hover { box-shadow: 0 16px 48px rgba(26,23,20,0.07); }
[data-theme="dark"]  .portfolio-card:hover { box-shadow: 0 16px 48px rgba(26,23,20,0.5);  }

.p-thumb {
  height: 190px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.p-thumb-a { background: var(--dark);   }
.p-thumb-b { background: var(--dark-2); }
.p-thumb-c { background: #110E0C;       }

.p-badge {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--accent); color: #fff;
  font-size: 0.675rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
}
.p-info { padding: 1.5rem; }
.p-info h3 { color: var(--text-1); margin-bottom: 0.5rem; }
.p-info p  { font-size: 0.875rem; }
.p-chips   { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 1rem; }


/* ── PROCESS ─────────────────────────────────────────────── */
#process { background: var(--surface-2); }
[data-theme="dark"] #process { background: var(--surface); }

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  position: relative;
}
.process-line {
  position: absolute;
  top: 25px; left: 28px; right: 28px;
  height: 1px; background: var(--border-md); z-index: 0;
}
.process-step { padding: 0 1.5rem; position: relative; z-index: 1; }
.process-step:first-child { padding-left: 0; }

.p-num {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid var(--border-md);
  background: var(--card-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 800; color: var(--text-1);
  margin-bottom: 1.5rem;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.process-step:hover .p-num {
  background: var(--dark); border-color: var(--dark); color: var(--light);
}
[data-theme="dark"] .process-step:hover .p-num {
  background: var(--accent); border-color: var(--accent);
}
.process-step h3 { color: var(--text-1); margin-bottom: 0.5rem; }
.process-step p  { font-size: 0.875rem; }


/* ── ABOUT STRIP ─────────────────────────────────────────── */
/*
  Full-bleed colour split with max-width constrained content.
  The section background handles the left (light) colour edge-to-edge.
  The gradient trick provides the right (dark) half edge-to-edge.
  .about-strip-inner constrains both columns to --max-w.
*/
#about-strip {
  background: linear-gradient(to right, var(--surface) 50%, var(--dark) 50%);
  display: flex;
  justify-content: center;
}
.about-strip-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: var(--max-w);
}
.about-copy {
  padding: 6rem clamp(1.25rem, 5%, 3rem) 6rem clamp(1.25rem, 6%, 4rem);
}
.about-copy h2 { margin-bottom: 1.25rem; }
.about-copy p  { margin-bottom: 1rem; }
.about-copy p:last-of-type { margin-bottom: 1.75rem; }

.focus-list {
  list-style: none;
  margin: 1.75rem 0 2.25rem;
  display: flex; flex-direction: column; gap: 0.625rem;
}
.focus-list li {
  display: flex; align-items: center;
  gap: 10px; font-size: 0.9375rem; color: var(--text-1);
}
.chk {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chk svg {
  width: 10px; height: 10px; fill: none;
  stroke: var(--dark); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
[data-theme="dark"] .chk svg { stroke: var(--accent); }

.about-panel {
  padding: 6rem clamp(1.25rem, 5%, 4rem);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.about-panel::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 300px; height: 300px;
  border-radius: 50%; background: var(--dark-2);
}
.about-panel::after {
  content: '';
  position: absolute; bottom: -60px; left: -40px;
  width: 200px; height: 200px;
  border-radius: 50%; background: var(--accent); opacity: 0.08;
}
.ap-inner { position: relative; z-index: 1; max-width: 440px; }
.ap-quote {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 800;
  color: var(--light); line-height: 1.3;
  letter-spacing: -0.03em; margin-bottom: 1.375rem;
}
.ap-quote em { font-style: normal; color: var(--accent); }
.ap-sub {
  font-size: 0.875rem; color: rgba(245,242,239,0.38);
  font-weight: 300; line-height: 1.75; margin-bottom: 1.625rem;
}
.ap-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 500;
  color: var(--salmon-light);
  background: rgba(232,133,106,0.10);
  border: 1px solid rgba(232,133,106,0.18);
  padding: 7px 14px; border-radius: 100px;
}
.ap-badge svg { width: 13px; height: 13px; stroke: var(--salmon-light); flex-shrink: 0; }


/* ── FINAL CTA ───────────────────────────────────────────── */
#cta {
  background: var(--dark-2);
  padding: 8rem 0;
  text-align: center;
  position: relative; overflow: hidden;
}
#cta::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,133,106,0.09) 0%, transparent 65%);
  pointer-events: none;
}
#cta .eyebrow         { justify-content: center; color: var(--salmon-light); position: relative; }
#cta .eyebrow::before { background: var(--salmon-light); }
#cta h2 {
  color: var(--light); max-width: 540px;
  margin: 0 auto 1.125rem; position: relative;
}
#cta .cta-sub {
  color: rgba(245,242,239,0.4); font-size: 1.0625rem;
  font-weight: 300; max-width: 440px;
  margin: 0 auto 2.5rem; position: relative;
}
#cta .btn { position: relative; }
.cta-note {
  display: block; margin-top: 1.25rem;
  font-size: 0.8125rem; color: rgba(245,242,239,0.25);
  position: relative;
}


/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero                { background: var(--light); }
  .hero-inner          { grid-template-columns: 1fr; }
  .hero-right          { display: none; }
  .hero-left           { max-width: 100%; padding: 4rem clamp(1.25rem, 5%, 3rem); }
  #about-strip         { background: var(--surface); display: block; }
  .about-strip-inner   { grid-template-columns: 1fr; max-width: 100%; }
  .about-copy          { padding: 4rem clamp(1.25rem, 5%, 3rem); }
  .about-panel         { padding: 4rem clamp(1.25rem, 5%, 3rem); background: var(--dark); }
  .value-grid          { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .process-line  { display: none; }
  .process-step  { padding-left: 0; }
  .hero-stats    { gap: 1.75rem; }
  .value-grid    { grid-template-columns: 1fr; }
}