/* ScreenMan LUXE — editorial luxury layer over vision */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");

:root {
  --luxe-serif: "Instrument Serif", Georgia, serif;
  --luxe-hair: color-mix(in oklch, white 14%, transparent);
  --luxe-glow: oklch(72% 0.19 55 / 0.45);
}

/* Ambient vignette + soft orbs (depth without clutter) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, transparent 40%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(600px 400px at var(--spot-x, 70%) var(--spot-y, 20%), oklch(55% 0.14 55 / 0.12), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: 0.9;
}

/* Editorial mono captions */
.sm-meta {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

/* —— Hero: cinematic frame —— */
.hero {
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid color-mix(in oklch, white 12%, transparent);
  border-radius: 1.5rem;
  z-index: 2;
  pointer-events: none;
  opacity: 0.55;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.35);
}
@media (max-width: 700px) {
  .hero::before { inset: 8px; border-radius: 1rem; }
}
.hero-rail {
  position: absolute;
  left: max(1.25rem, calc(50% - 560px));
  top: 50%;
  z-index: 3;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  display: flex;
  gap: 1.25rem;
  align-items: center;
  pointer-events: none;
}
.hero-rail span {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklch, white 55%, transparent);
}
.hero-rail i {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--amber), transparent);
}
@media (max-width: 900px) {
  .hero-rail { display: none; }
}

.hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.hero-copy .eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--amber);
}

.hero h1 {
  background: linear-gradient(180deg, #ffffff 10%, #f2efe8 55%, oklch(72% 0.03 60) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
  /* avoid filter: drop-shadow — fights kinetic and softens glyphs */
  -webkit-text-stroke: 0.4px color-mix(in oklch, white 25%, transparent);
}

.tagline-hero {
  font-family: var(--luxe-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  max-width: 22ch !important;
  color: #e8e2d6 !important;
}
.tagline-hero::after {
  width: 4rem;
  height: 1px !important;
  background: linear-gradient(90deg, var(--amber), transparent) !important;
}

.hero-copy > p:not(.tagline-hero):not(.eyebrow) {
  max-width: 38ch;
  font-size: 1.02rem;
  line-height: 1.55;
  color: color-mix(in oklch, var(--silver) 88%, white) !important;
}

/* Trust as metal chip strip */
.trust-bar {
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem !important;
  padding: 0.65rem 1.1rem !important;
  background:
    linear-gradient(135deg, color-mix(in oklch, white 8%, transparent), transparent 40%),
    color-mix(in oklch, black 55%, transparent) !important;
  border: 1px solid var(--luxe-hair) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 14%, transparent),
    0 12px 40px rgba(0, 0, 0, 0.35);
}

/* Primary CTA — liquid metal amber */
.btn-primary {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, color-mix(in oklch, white 22%, var(--amber)), var(--amber) 45%, var(--amber-dim)) !important;
  color: #0a0a0a !important;
  border: 0 !important;
  box-shadow:
    0 0 0 1px color-mix(in oklch, white 25%, transparent),
    0 10px 30px var(--luxe-glow),
    inset 0 1px 0 color-mix(in oklch, white 40%, transparent);
  text-transform: none;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
  padding: 0.95rem 1.5rem !important;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, color-mix(in oklch, white 45%, transparent) 50%, transparent 70%);
  background-size: 220% 100%;
  opacity: 0;
  transition: opacity 320ms ease;
  z-index: -1;
  pointer-events: none;
}
.btn-primary:hover::before {
  opacity: 1;
  animation: smSheen 900ms ease;
}
@keyframes smSheen {
  from { background-position: 120% 0; }
  to { background-position: -20% 0; }
}

.btn-quiet {
  backdrop-filter: blur(18px) saturate(1.3) !important;
  border-color: var(--luxe-hair) !important;
  box-shadow: inset 0 1px 0 color-mix(in oklch, white 10%, transparent);
}

/* —— Infinite marquee (cult luxury strip) —— */
.sm-marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, #0c0c0c, #101010);
  padding: 0.95rem 0;
}
.sm-marquee__track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: smMarquee 42s linear infinite;
  will-change: transform;
}
.sm-marquee__track span {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, white 55%, transparent);
  white-space: nowrap;
}
.sm-marquee__track span em {
  font-style: normal;
  color: var(--amber);
  margin: 0 0.35rem;
}
@keyframes smMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .sm-marquee__track { animation: none; }
}

/* —— Section chrome: index + hairline —— */
.sm-sec-head {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.sm-index,
.sm-sec-head .sm-index {
  display: block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--amber);
  margin-bottom: 0.35rem;
}
.sm-sec-head h2 {
  max-width: 16ch;
  text-wrap: balance;
}
.sm-sec-head .lead {
  max-width: 52ch;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Gradient-border cards (expensive look) */
.sm-cell,
.proof-card,
.need,
.screen-row,
.estimate-box,
.choice,
.article-card {
  position: relative;
  background:
    linear-gradient(165deg, #171717 0%, #101010 55%, #0d0d0d 100%) !important;
  border: 1px solid transparent !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 8%, transparent),
    0 20px 50px rgba(0, 0, 0, 0.35) !important;
}
.sm-cell::before,
.proof-card::before,
.need::before,
.screen-row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    145deg,
    color-mix(in oklch, white 22%, transparent),
    transparent 35%,
    transparent 65%,
    color-mix(in oklch, var(--amber) 35%, transparent)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
.sm-cell > *,
.proof-card > *,
.need > *,
.screen-row > * { position: relative; z-index: 1; }

.sm-cell.accent {
  outline: none !important;
}
.sm-cell.accent::before {
  background: linear-gradient(
    145deg,
    color-mix(in oklch, var(--amber) 70%, transparent),
    color-mix(in oklch, white 12%, transparent) 40%,
    color-mix(in oklch, var(--amber) 45%, transparent)
  );
}
.sm-cell--hero {
  min-height: 340px !important;
}
.sm-cell--hero .sm-cell-media {
  opacity: 0.55 !important;
  filter: saturate(0.8) contrast(1.12) brightness(0.75) !important;
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.sm-cell--hero:hover .sm-cell-media { transform: scale(1.08); }

.sm-ico {
  width: 52px !important;
  height: 52px !important;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklch, var(--amber) 30%, transparent);
  background:
    radial-gradient(circle at 30% 20%, color-mix(in oklch, var(--amber) 28%, transparent), transparent 55%),
    #121212;
  box-shadow: inset 0 1px 0 color-mix(in oklch, white 12%, transparent);
}

/* Stats as display numerals */
.sm-cell strong.stat {
  font-size: clamp(2.4rem, 5vw, 3.25rem) !important;
  background: linear-gradient(180deg, var(--amber), oklch(58% 0.16 55));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* Story — cinematic frames */
.sm-story-frames {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.sm-story-frames::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in oklch, white 12%, transparent);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}
.sm-story-step.is-on {
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--amber) 12%, transparent), transparent 50%),
    var(--ink-lift) !important;
}

/* Proof pairs — editorial crop */
.proof-shot {
  overflow: hidden;
  border-radius: 0.85rem;
}
.proof-shot img {
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.proof-card:hover .proof-shot img { transform: scale(1.04); }
.proof-shot figcaption {
  font-family: ui-monospace, Menlo, monospace !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.65rem !important;
}

/* Need grid — denser luxury tiles */
.need {
  overflow: hidden;
}
.need:hover {
  transform: translateY(-3px);
}
.need .so-ico {
  width: 3.5rem !important;
  height: 3.5rem !important;
}

/* Header — thinner luxury glass */
.site-head {
  border-bottom-color: color-mix(in oklch, white 8%, transparent) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.head-estimate {
  position: relative;
  overflow: hidden;
}
.head-estimate::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 180deg, transparent, color-mix(in oklch, var(--amber) 40%, transparent), transparent 30%);
  opacity: 0;
  transition: opacity 300ms ease;
  animation: smSpin 6s linear infinite;
  animation-play-state: paused;
}
.head-estimate:hover::after {
  opacity: 0.55;
  animation-play-state: running;
}
@keyframes smSpin {
  to { transform: rotate(1turn); }
}

/* Soften cheap sticky call emoji look */
.sticky-call a {
  font-family: var(--font-body) !important;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 28px var(--luxe-glow) !important;
}
.sticky-call a::first-letter {
  /* keep readable */
}

/* Dock luxury */
.dock {
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5) !important;
}

/* Mesh more present */
.hero-mesh {
  opacity: 0.72 !important;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 40px color-mix(in oklch, var(--amber) 25%, transparent));
}

/* Quote / italic pull for story lead */
.sm-story-copy .lead {
  font-family: var(--luxe-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem) !important;
  color: #e8e2d6 !important;
  max-width: 28ch;
  line-height: 1.35 !important;
}

/* Page rhythm */
.block {
  padding-block: clamp(4.5rem, 10vw, 7rem) !important;
}
.sm-bento {
  gap: 1.15rem !important;
}

/* Custom cursor glow on desktop (subtle) */
@media (hover: hover) and (pointer: fine) {
  .btn-primary,
  .head-mob__btn,
  .nav a.call,
  .dock a.hot {
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary::before,
  .head-estimate::after,
  .sm-marquee__track,
  .sm-cell--hero .sm-cell-media,
  .proof-shot img {
    animation: none !important;
    transition: none !important;
  }
  body::after { background: radial-gradient(ellipse 80% 50% at 50% -10%, transparent 40%, rgba(0, 0, 0, 0.4) 100%); }
}