/* The portfolio's front page. A near-black shell that steps aside: each site's chapter is
   painted in that site's own ground, ink and accent, so the scroll passes through the
   worlds we built rather than through our branding. System type, phone first. */

:root {
  --shell: #0b0b0c;
  --shell-ink: #f5f5f7;
  --shell-soft: #a1a1a6;
  --shell-line: rgba(245, 245, 247, 0.14);
  --wa: #12833f;
  --wa-press: #0b5b2c;
  --text: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', 'Arial Hebrew', 'Noto Sans Hebrew', Arial, sans-serif;
  --gutter: 20px;
  --bar: 52px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--bar); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--shell); color: var(--shell-ink);
  font: 400 1.0625rem/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.skip {
  position: fixed; top: 8px; inset-inline-start: 8px; z-index: 30; padding: 10px 16px;
  background: var(--shell-ink); color: var(--shell); text-decoration: none; transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------------------------------------------------------------- bar */

.bar {
  position: sticky; top: 0; z-index: 20; height: var(--bar);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter);
  background: var(--shell); border-bottom: 1px solid var(--shell-line);
}
.brand { display: flex; align-items: center; gap: 10px; margin: 0; }
/* The mark (protfolio/brand/mark.svg): the before and after handle, no name for now. */
.logo { width: 28px; height: 28px; flex: none; }
.eyebrow { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
.lang {
  min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: inherit;
  font: 600 0.95rem var(--text); cursor: pointer;
}

/* ---------------------------------------------------------------- intro and the ring */

.intro { padding: 44px var(--gutter) 40px; max-width: 1240px; margin: 0 auto; overflow-x: clip; }
.intro h1 {
  font-size: clamp(2.7rem, 12.5vw, 6.4rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.035em;
}
.intro h1 .soft { color: var(--shell-soft); }
.intro .lede { margin-top: 18px; max-width: 30ch; font-size: clamp(1.0625rem, 2.4vw, 1.3rem); color: var(--shell-soft); }
.count { margin-top: 14px; font-weight: 600; }
.index-label { margin: 34px 0 0; font-size: 0.95rem; color: var(--shell-soft); }

/* Twelve phones on a turning ring, in real 3D: each sits at its angle on a cylinder, the
   ring turns about its axis, phones fade as they face away and a soft floor reflects them. */
.carousel { --w: 172px; }
.ring-stage {
  position: relative; height: calc(var(--w) * 844 / 390 + 120px); margin-inline: calc(var(--gutter) * -1);
  perspective: 1100px; perspective-origin: 50% 32%;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.carousel.dragging .ring-stage { cursor: grabbing; }
.ring-stage::before {
  content: ''; position: absolute; inset: -10% 0 0; pointer-events: none;
  background: radial-gradient(ellipse 58% 42% at 50% 42%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 70%);
}
.ring {
  position: absolute; top: 22px; left: 50%; width: var(--w); height: calc(var(--w) * 844 / 390);
  margin-left: calc(var(--w) / -2); transform-style: preserve-3d; will-change: transform;
}
.ring-item {
  position: absolute; inset: 0; display: block; overflow: hidden; border-radius: calc(var(--w) * 0.13);
  background: #000; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 34px 60px -24px rgba(0, 0, 0, 0.9);
  -webkit-box-reflect: below 12px linear-gradient(rgba(0, 0, 0, 0) 66%, rgba(255, 255, 255, 0.2));
}
.ring-item img { width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.ring-item:focus-visible { outline: 2px solid var(--shell-ink); outline-offset: 4px; }
.ring-bar { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ring-step {
  width: 44px; height: 44px; flex: none; border: 1px solid var(--shell-line); border-radius: 50%;
  background: none; color: var(--shell-ink); cursor: pointer; display: grid; place-items: center;
}
.ring-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="ltr"] .ring-step svg { transform: scaleX(-1); }
.ring-caption { min-width: 13rem; display: grid; text-align: center; line-height: 1.25; }
.ring-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.ring-trade { font-size: 0.95rem; color: var(--shell-soft); }
/* Which phone is in front: the active dot is a short bar. */
.ring-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.ring-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(245, 245, 247, 0.22); transition: width 300ms var(--ease-out), background-color 300ms ease; }
.ring-dot[data-active] { width: 22px; background: var(--shell-ink); }
.ring-hint { margin: 10px auto 0; max-width: 30rem; text-align: center; font-size: 0.9rem; color: var(--shell-soft); }

/* ---------------------------------------------------------------- chapters */

/* Without script, or under reduced motion, a chapter is a plain block with the site's
   first screen in the phone. Live, its stage pins while the track scrolls, and the
   portfolio's scroll scrolls the real site inside the phone. */
.chapter { background: var(--ground); color: var(--ink); --pin: 90svh; }
.chapter-stage {
  padding: 56px var(--gutter) 64px; display: grid; gap: 28px; justify-items: center;
  max-width: 1240px; margin: 0 auto;
}
html.live .chapter-track { height: calc(100svh - var(--bar) + var(--pin)); }
html.live .chapter-stage {
  position: sticky; top: var(--bar); height: calc(100svh - var(--bar));
  padding: 22px var(--gutter) 22px; grid-template-rows: auto minmax(0, 1fr); gap: 16px;
}
.chapter-copy { width: 100%; max-width: 34rem; }
.chapter-n { font-size: 0.95rem; font-weight: 700; opacity: 0.55; font-variant-numeric: tabular-nums; }
.trade { margin-top: 6px; font-size: 1rem; font-weight: 600; opacity: 0.8; }
.chapter h2 { margin-top: 2px; font-size: clamp(2.4rem, 11vw, 5.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; }
.idea { margin-top: 10px; max-width: 28ch; font-size: clamp(1.0625rem, 3vw, 1.45rem); line-height: 1.4; letter-spacing: -0.01em; }
.chapter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.open {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: 999px; background: var(--ink); color: var(--ground);
  font-weight: 600; text-decoration: none; transition: transform 140ms var(--ease-out);
}
.open:active, .btn:active { transform: scale(0.97); }
.arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="ltr"] .arrow { transform: scaleX(-1); }
.tag { display: inline-block; padding: 3px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: 0.8rem; opacity: 0.6; }

/* The phone: a dark body and a thin bezel around a 390 x 844 screen. The live site is laid
   out at that size and scaled to the screen, so it is the phone layout, exactly. */
.device {
  display: block; position: relative; width: min(66vw, 300px); aspect-ratio: 408 / 862; padding: 9px;
  border-radius: 48px; background: #121214;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 40px 80px -30px rgba(0, 0, 0, 0.55);
}
html.live .device { width: auto; height: min(100%, calc(72vw * 862 / 408)); align-self: start; }
.screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 39px; background: var(--ground); }
.screen .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity 400ms ease; }
.screen iframe {
  position: absolute; top: 0; left: 0; width: 390px; height: 844px; border: 0;
  transform-origin: top left; pointer-events: none; background: var(--ground);
}
.screen.ready .poster { opacity: 0; }

/* ---------------------------------------------------------------- makeovers */

.makeovers { padding: 80px 0 72px; border-top: 1px solid var(--shell-line); }
.section-head { padding: 0 var(--gutter); max-width: 1240px; margin: 0 auto 32px; }
.makeovers h2, .contact h2 { font-size: clamp(2.5rem, 10vw, 4.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
.section-head .lede, .contact .lede { margin-top: 14px; max-width: 34ch; color: var(--shell-soft); }
.makeover { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.makeover + .makeover { margin-top: 72px; }
.makeover h3 { margin-top: 4px; font-size: clamp(2rem, 8vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.makeover .idea { color: var(--shell-soft); }
.compare-frame { display: block; width: 100%; height: 900px; margin-top: 8px; border: 0; background: transparent; }
.makeover-links { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: center; }
.makeover-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--shell-ink); }
.makeover .tag { display: table; margin: 8px auto 0; }

/* ---------------------------------------------------------------- contact and footer */

.contact { padding: 80px var(--gutter) 88px; max-width: 1240px; margin: 0 auto; }
.contact-actions { display: grid; gap: 10px; margin-top: 28px; max-width: 420px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 999px; font: 600 1rem/1.2 var(--text); text-decoration: none;
  transition: transform 140ms var(--ease-out), background-color 200ms ease;
}
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:active { background: var(--wa-press); }
.btn-line { border-color: var(--shell-line); color: var(--shell-ink); }
.demo-note { padding: 12px 14px; font-size: 0.95rem; border-inline-start: 2px solid var(--wa); background: rgba(255, 255, 255, 0.06); }
.footer { padding: 40px var(--gutter) 56px; border-top: 1px solid var(--shell-line); text-align: center; }
.fine { max-width: 40rem; margin: 0 auto; font-size: 0.9rem; color: var(--shell-soft); }
.back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font-size: 0.95rem; }

/* ---------------------------------------------------------------- wider screens */

@media (min-width: 700px) {
  :root { --gutter: 40px; }
  .carousel { --w: 200px; }
  .contact-actions { grid-template-columns: auto auto; justify-content: start; }
  .contact-actions .demo-note { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  .intro { padding-top: 72px; }
  .carousel { --w: 230px; }
  .ring-stage { perspective: 1500px; }
  .chapter { --pin: 100svh; }
  .chapter-stage { grid-template-columns: 1fr auto; align-items: center; justify-items: stretch; gap: 64px; }
  html.live .chapter-stage { grid-template-rows: minmax(0, 1fr); padding-block: 36px; }
  .chapter:nth-child(even) .device { order: -1; }
  .device { width: clamp(280px, 26vw, 340px); justify-self: center; }
  html.live .device { width: auto; height: 100%; align-self: center; justify-self: center; }
}

@media (hover: hover) {
  .open:hover { opacity: 0.88; }
  .ring-step:hover { border-color: var(--shell-ink); }
  .btn-wa:hover { background: var(--wa-press); }
}

@media (prefers-reduced-motion: reduce) {
  .open, .btn, .screen .poster { transition: none; }
  .open:active, .btn:active { transform: none; }
}