/* Spleto studio landing. Charcoal + hot coral. No serifs. No italics. */

:root {
  --ink: #0f0f0e;
  --ink-2: #1a1a18;
  --ink-3: #272723;
  --paper: #f6f3ee;
  --paper-2: #d2cec6;
  --muted: #8a867c;
  --accent: #ff6b4a;
  --accent-2: #e8553a;
  --accent-rgb: 255, 107, 74;
  --hairline: rgba(246, 243, 238, 0.08);
  --hairline-strong: rgba(246, 243, 238, 0.16);
}

html {
  scroll-behavior: smooth;
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--ink);
  color: var(--paper);
  text-rendering: optimizeLegibility;
}

.num, .mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;
}

h1, h2, h3, h4, .display {
  letter-spacing: -0.02em;
  font-feature-settings: 'ss01' 1, 'cv11' 1;
}

.display-xl {
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 600;
}

.display-lg {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.display-md {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.hairline {
  border-color: var(--hairline);
}

.hairline-strong {
  border-color: var(--hairline-strong);
}

.acc {
  color: var(--accent);
}

.acc-bg {
  background: var(--accent);
  color: var(--ink);
}

.acc-hover:hover {
  background: var(--accent-2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1;
  padding: 7px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--paper);
  background: transparent;
}

.pill-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 999px;
  display: inline-block;
}

.grid-lines {
  background-image:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px);
  background-size: 25% 100%;
}

/* Cards */
.card {
  border: 1px solid var(--hairline-strong);
  background: var(--ink-2);
  transition: border-color 280ms ease, transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.card-thumb {
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
  position: relative;
  overflow: hidden;
}

.card-thumb-salon {
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(var(--accent-rgb), 0.12) 0%, transparent 55%),
    linear-gradient(180deg, #1f1f1c 0%, #0f0f0e 100%);
}

.card-thumb-placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      #141412 0px,
      #141412 12px,
      #0f0f0e 12px,
      #0f0f0e 24px
    );
}

.card-thumb-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
}

/* FAQ */
.faq summary::-webkit-details-marker { display: none; }
.faq summary { list-style: none; }
.faq[open] .faq-icon { transform: rotate(45deg); color: var(--accent); }
.faq summary:hover .faq-icon { color: var(--paper); }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 800ms ease-out, transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Focus */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Form */
.field {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-strong);
  color: var(--paper);
  padding: 14px 2px;
  font: inherit;
  width: 100%;
  transition: border-color 240ms ease;
}

.field::placeholder { color: var(--muted); }

.field:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

textarea.field {
  resize: vertical;
  min-height: 110px;
}

/* Step numerals */
.step-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.04em;
}

/* Tiny arrow after link */
.link-arrow::after {
  content: " ↗";
  display: inline-block;
  margin-left: 0.2em;
  transition: transform 220ms ease;
}

a:hover .link-arrow::after,
.link-arrow:hover::after {
  transform: translate(2px, -2px);
}

/* Typewriter */
.typewriter {
  display: inline-block;
  color: var(--accent);
  white-space: nowrap;
}

.typewriter-text {
  display: inline;
}

.typewriter-cursor {
  display: inline-block;
  margin-left: 0.04em;
  color: var(--accent);
  font-weight: 400;
  animation: typewriter-blink 1s steps(2, start) infinite;
}

@keyframes typewriter-blink {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter-cursor { animation: none; opacity: 0; }
}