/* Built from ayberk.info's own pieces: tokens, text styles, the Framer buttons (layered shadow that
   fades on hover), the "Available" pill and the frosted contact modal. Switzer for text, JetBrains Mono for
   eyebrows, Instrument Sans for the wordmark. */
@font-face { font-family: 'Switzer'; src: url('/fonts/switzer-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Switzer'; src: url('/fonts/switzer-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --white: #fff;
  --gray-50: #fafafa;
  --gray-100: #f0f0f0;
  --gray-200: #dedede;
  --gray-400: #b8b8b8;
  --gray-500: #828282;
  --gray-700: #545454;
  --black: #000;
  --green: rgb(18, 179, 63);
  --danger: #c4320a;
  --sans: 'Switzer', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --logo: 'Instrument Sans', 'Switzer', 'Helvetica Neue', Arial, sans-serif;
  /* Framer springs: spring(0.8, 0) for text, spring(0.6, 0.2) for the modal and the X */
  --spring: cubic-bezier(.22, 1, .36, 1);
  --spring-b: cubic-bezier(.34, 1.32, .64, 1);
  --ease: cubic-bezier(.44, 0, .56, 1);
  --shadow-dark: inset 0 2px 4px 0 rgba(255,255,255,.4), 0 .741px .741px -.75px rgba(0,0,0,.331), 0 2.018px 2.018px -1.5px rgba(0,0,0,.319),
    0 4.431px 4.431px -2.25px rgba(0,0,0,.298), 0 9.835px 9.835px -3px rgba(0,0,0,.249), 0 25px 25px -3.75px rgba(0,0,0,.1125), 0 0 0 1px rgb(130,130,130);
  --shadow-dark-hover: inset 0 2px 4px 0 rgba(255,255,255,.4), 0 .741px .741px -.75px rgba(0,0,0,0), 0 2.018px 2.018px -1.5px rgba(0,0,0,0),
    0 4.431px 4.431px -2.25px rgba(0,0,0,0), 0 9.835px 9.835px -3px rgba(0,0,0,0), 0 25px 25px -3.75px rgba(0,0,0,0), 0 0 0 1px rgb(130,130,130);
  --shadow-light: 0 .597px .597px -.9375px rgba(0,0,0,.073), 0 1.811px 1.811px -1.875px rgba(0,0,0,.069), 0 4.787px 4.787px -2.8125px rgba(0,0,0,.059), 0 15px 15px -3.75px rgba(0,0,0,.025);
  --shadow-light-hover: 0 .597px .597px -.9375px rgba(0,0,0,0), 0 1.811px 1.811px -1.875px rgba(0,0,0,0), 0 4.787px 4.787px -2.8125px rgba(0,0,0,0), 0 15px 15px -3.75px rgba(0,0,0,0);
  --shadow-pill: 0 .602px .602px -1.25px rgba(0,0,0,.18), 0 2.289px 2.289px -2.5px rgba(0,0,0,.159), 0 10px 10px -3.75px rgba(0,0,0,.0625);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html:has(dialog[open]) { overflow: hidden; }
body { background: var(--gray-50); color: var(--black); font-family: var(--sans); font-weight: 500; -webkit-font-smoothing: antialiased; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; padding: 0; border: 0; background: none; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
svg { display: block; }

/* ---------- buttons (Framer "Primary" and "Overlay") ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 44px; padding: 8px 16px; border-radius: 24px; overflow: hidden; cursor: pointer; text-decoration: none; transition: box-shadow .3s var(--ease); }
.btn::after { content: ''; position: absolute; inset: 0; border: 1px solid; border-radius: inherit; pointer-events: none; }
.btn .label, .call .label { position: relative; font-size: 14px; line-height: 100%; font-weight: 600; white-space: pre; user-select: none; }
.btn.dark { background: var(--black); box-shadow: var(--shadow-dark); }
.btn.dark::after { border-color: var(--black); }
.btn.dark .label { color: var(--white); }
.btn.dark:hover { box-shadow: var(--shadow-dark-hover); }
.btn.light { background: var(--gray-50); box-shadow: var(--shadow-light); }
.btn.light::after { border-color: var(--gray-200); }
.btn.light:hover { box-shadow: var(--shadow-light-hover); }
.btn:disabled { cursor: default; }

/* "Book a call" button: on hover a "+" and a "You" bubble slide out next to the icon */
.call { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px 8px 8px; border-radius: 24px; background: var(--black); color: var(--white); text-decoration: none; overflow: hidden; box-shadow: var(--shadow-dark); transition: box-shadow .3s var(--ease); }
.call::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--black); border-radius: inherit; pointer-events: none; }
.call .label { margin-left: 2px; color: var(--white); }
.me-you { display: flex; align-items: center; }
.me { width: 28px; height: 28px; border-radius: 50%; background: var(--white); display: grid; place-items: center; flex: none; position: relative; z-index: 2; }
.me svg { width: 22px; height: 22px; }
.more { display: flex; align-items: center; gap: 4px; max-width: 0; opacity: 0; filter: blur(4px); overflow: hidden; transition: max-width .6s var(--spring-b), opacity .35s var(--ease), filter .35s var(--ease), margin .6s var(--spring-b); }
.plus { position: relative; width: 14px; height: 14px; flex: none; }
.plus i { position: absolute; background: var(--white); }
.plus i:first-child { top: 2px; left: 6px; width: 2px; height: 10px; }
.plus i:last-child { top: 6px; left: 2px; width: 10px; height: 2px; }
.you { height: 28px; display: grid; place-items: center; padding: 0 10px; border-radius: 99px; background: var(--white); color: var(--black); font-size: 12px; line-height: 100%; font-weight: 600; white-space: pre; }
@media (hover: hover) {
  .call:hover { box-shadow: var(--shadow-dark-hover); }
  .call:hover .more { max-width: 90px; margin-left: 4px; opacity: 1; filter: blur(0); }
}

/* ---------- frame ---------- */
.page {
  max-width: 1280px; margin: 0 auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  border-left: 1px solid var(--gray-100); border-right: 1px solid var(--gray-100);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; padding-inline: clamp(8px, 3vw, 48px); }
.mark { font-family: var(--logo); font-weight: 500; font-size: 24px; line-height: 1; letter-spacing: -.04em; }
.nav { display: flex; align-items: center; gap: 4px; }
.lang { font-size: 12px; line-height: 100%; font-weight: 600; text-decoration: none; color: var(--gray-500); padding: 10px 8px; transition: color .2s var(--ease); }
.lang[aria-current="page"], .lang:hover { color: var(--black); }
.nav .btn { margin-left: 10px; }

/* ---------- hero ---------- */
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 72px; padding-top: clamp(64px, 13vh, 144px); }
.intro { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 1080px; text-align: center; }

.badge {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 16px 0 8px; border-radius: 24px;
  background: var(--white); box-shadow: var(--shadow-pill); font-family: var(--mono); font-size: 11px; line-height: 100%; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; white-space: pre;
  animation: fade .6s var(--ease) both;
}
.badge::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gray-100); border-radius: inherit; pointer-events: none; }
.pulse { position: relative; width: 16px; height: 16px; flex: none; }
.pulse i { position: absolute; border-radius: 50%; background: var(--green); }
.pulse i:first-child { inset: 0; animation: halo 1s var(--ease) infinite alternate; }
.pulse i:last-child { top: 4px; left: 4px; width: 8px; height: 8px; animation: core 1s var(--ease) infinite alternate; }

h1 { width: 100%; margin-top: 8px; font-size: 96px; line-height: 100%; letter-spacing: -.035em; font-weight: 500; }
h1 .vis, h1 .ln { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--gray-500); }
h1 .w, .cycle { animation: appear .8s var(--spring) both; animation-delay: calc(var(--i) * 50ms + 100ms); }
h1 .w { display: inline-block; }

/* The rolling phrase sits in a black label: every lead gets one. Letters rise into the label one after
   another and the old phrase leaves upward, cut off at the label's edge, so it never touches the first
   line. The label eases to each phrase's width (hero.js sets it). */
.cycle {
  position: relative; display: inline-block; vertical-align: top; margin-top: .26em;
  color: var(--white); background: var(--black); border-radius: .16em;
  box-shadow: inset 0 .03em .06em rgba(255,255,255,.28), 0 .1em .3em -.12em rgba(0,0,0,.35);
  transition: width .9s var(--spring);
}
.cw { position: relative; display: inline-block; padding: .02em .2em .1em .18em; white-space: nowrap; }
.ch { display: inline-block; transition: transform .75s var(--spring), opacity .4s var(--ease); transition-delay: calc(var(--c) * 16ms); }
.cycle:not(.js) .cw:not([data-slot="current"]) { display: none; }
.cycle.js { overflow: hidden; overflow: clip; }
.cycle.js .cw { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.cycle.js .cw[data-slot="current"] .ch { transition-delay: calc(var(--c) * 16ms + 120ms); }
.cycle.js .cw[data-slot="next"] .ch { transform: translateY(110%); opacity: 0; }
.cycle.js .cw[data-slot="previous"] .ch { transform: translateY(-110%); opacity: 0; }
.cycle.js .cw.jump, .cycle.js .cw.jump .ch { transition: none; }

.lead { max-width: 520px; font-size: 18px; line-height: 140%; letter-spacing: -.02em; text-wrap: balance; animation: appear .8s var(--spring) .55s both; }
.lead b { font-weight: 600; }
.lead span { color: var(--gray-700); }

.actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; animation: fade .6s var(--ease) .75s both; }
.cta-note { font-size: 14px; line-height: 160%; color: var(--gray-500); }

/* like the site's client strip: a hairline band across the frame */
.values { position: relative; width: calc(100% + 2 * max(16px, env(safe-area-inset-left, 0px))); margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--gray-200); animation: fade .6s var(--ease) 1s both; }
.values li { display: grid; gap: 6px; align-content: start; padding: 28px clamp(16px, 3vw, 48px) 32px; font-size: 14px; line-height: 160%; color: var(--gray-500); }
.values li + li { border-left: 1px solid var(--gray-200); }
.values b { font-size: 16px; line-height: 150%; letter-spacing: -.02em; font-weight: 600; color: var(--black); }

.foot { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 100%; font-weight: 600; color: var(--gray-500); padding-block: 22px; padding-inline: clamp(8px, 3vw, 48px); border-top: 1px solid var(--gray-200); margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); }
.foot a { text-decoration: none; transition: color .2s var(--ease); }
.foot a:hover { color: var(--black); }

/* ---------- waitlist modal (the site's contact form overlay) ---------- */
.modal { width: min(540px, calc(100% - 16px)); max-width: none; max-height: calc(100dvh - 16px); margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--black); }
.modal::backdrop { background: rgba(250, 250, 250, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal[open]::backdrop { animation: fade .5s var(--ease) both; }
.modal[open] .card { animation: pop .6s var(--spring-b) both; }
.modal.closing::backdrop { animation: fade .3s var(--ease) reverse both; }
.modal.closing .card { animation: pop-out .3s var(--ease) both; }

.card {
  position: relative; display: grid; gap: 24px; max-height: calc(100dvh - 16px); overflow: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 32px; border-radius: 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-light);
}
.card::-webkit-scrollbar { width: 0; height: 0; }
.card::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gray-200); border-radius: inherit; pointer-events: none; }

/* X: two crossed lines that straighten into a dash on hover */
.x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; cursor: pointer; }
.x i { position: absolute; top: calc(50% - 1px); left: calc(50% - 10px); width: 20px; height: 2px; background: var(--black); transition: transform .6s var(--spring-b); }
.x i:first-child { transform: rotate(-45deg); }
.x i:last-child { transform: rotate(45deg); }
.x:hover i { transform: none; }

form { display: grid; gap: 24px; }
.progress { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.count { font-family: var(--mono); font-size: 11px; line-height: 100%; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500); white-space: pre; font-variant-numeric: tabular-nums; }
.bar { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 180px; }
.bar i { position: relative; height: 2px; border-radius: 2px; background: var(--gray-200); overflow: hidden; }
.bar i::after { content: ''; position: absolute; inset: 0; background: var(--black); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--spring); }
.bar i.on::after { transform: none; }

.steps { position: relative; }
.step { display: grid; gap: 24px; margin: 0; padding: 0; border: 0; min-width: 0; }
.heading { display: grid; gap: 8px; }
.heading h2 { font-size: 32px; line-height: 110%; letter-spacing: -.03em; font-weight: 500; text-wrap: balance; }
.heading p { font-size: 16px; line-height: 150%; letter-spacing: -.02em; color: var(--gray-500); text-wrap: balance; }
.heading.center { justify-items: center; text-align: center; }
.heading .greet { font-family: var(--mono); font-size: 11px; line-height: 100%; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.heading .greet:empty { display: none; }

.fields { display: grid; gap: 24px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field > .label { font-size: 12px; line-height: 100%; font-weight: 600; color: var(--black); user-select: none; }
.opt-note { margin-left: 4px; font-weight: 500; color: var(--gray-400); }
.field[role] { gap: 10px; }

.control { position: relative; display: block; width: 100%; border-radius: 8px; background: var(--white); box-shadow: var(--shadow-light); }
.control::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gray-200); border-radius: inherit; pointer-events: none; transition: border-color .2s var(--ease); }
.control:focus-within::after { border-color: var(--gray-500); }
.control.invalid::after { border-color: var(--danger); }
.control input, .control textarea {
  display: block; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: inherit; background: transparent; outline: none;
  font: 500 16px/160% var(--sans); letter-spacing: 0; color: var(--black);
}
.control textarea { height: auto; min-height: 100px; padding: 10px 12px; resize: none; }
.control input::placeholder, .control textarea::placeholder { color: var(--gray-400); }

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choice, .chip { position: relative; display: block; cursor: pointer; user-select: none; }
.choice input, .chip input, .consent input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choice span { position: relative; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 8px; background: var(--white); box-shadow: var(--shadow-light); font-size: 14px; line-height: 100%; font-weight: 500; transition: box-shadow .2s var(--ease); }
.choice span::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gray-200); border-radius: inherit; transition: border-color .2s var(--ease); }
.choice span::before { content: ''; width: 14px; height: 14px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gray-400); transition: box-shadow .3s var(--spring-b); }
.choice:hover span::after { border-color: var(--gray-400); }
.choice input:checked + span::after { border-color: var(--black); }
.choice input:checked + span::before { box-shadow: inset 0 0 0 4.5px var(--black); }
.chip span { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 24px; background: var(--gray-50); box-shadow: var(--shadow-light); font-size: 14px; line-height: 100%; font-weight: 500; transition: background .25s var(--ease), color .25s var(--ease); }
.chip span::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--gray-200); border-radius: inherit; transition: border-color .2s var(--ease); }
.chip:hover span::after { border-color: var(--gray-400); }
.chip input:checked + span { background: var(--black); color: var(--white); }
.chip input:checked + span::after { border-color: var(--black); }
.choice input:focus-visible + span, .chip input:focus-visible + span { outline: 2px solid var(--black); outline-offset: 2px; }

.consent { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 160%; color: var(--gray-700); cursor: pointer; }
.consent .box { position: relative; width: 18px; height: 18px; margin-top: 2px; border-radius: 5px; background: var(--white); box-shadow: inset 0 0 0 1px var(--gray-400); transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.consent .box::after { content: ''; position: absolute; left: 6px; top: 2.5px; width: 4px; height: 9px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.4); opacity: 0; transition: transform .35s var(--spring-b), opacity .2s var(--ease); }
.consent input:checked + .box { background: var(--black); box-shadow: inset 0 0 0 1px var(--black); }
.consent input:checked + .box::after { opacity: 1; transform: rotate(45deg); }
.consent input:focus-visible + .box { outline: 2px solid var(--black); outline-offset: 2px; }
.consent.invalid .box { box-shadow: inset 0 0 0 1px var(--danger); }
.hp { position: absolute; transform: scale(0); }

.err { margin-top: -8px; font-size: 14px; line-height: 160%; color: var(--danger); }
.nav-row { display: flex; gap: 8px; }
.nav-row .next { flex: 1; }
.spinner { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, var(--gray-200) 342deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.next.busy .label { visibility: hidden; }
.next.busy .spinner { opacity: 1; animation: spin 1s linear infinite; }
.time { margin-top: -8px; font-size: 14px; line-height: 100%; font-weight: 600; color: var(--gray-500); text-align: center; }

.done { display: grid; gap: 24px; justify-items: center; padding-top: 12px; outline: none; }
.done .wide { width: 100%; }
.tick { width: 56px; height: 56px; }
.tick circle { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 152; stroke-dashoffset: 152; }
.tick path { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34; }
.done:not([hidden]) .tick circle { animation: draw .8s var(--spring) .05s forwards; }
.done:not([hidden]) .tick path { animation: draw .5s var(--spring) .45s forwards; }
.done:not([hidden]) .heading { animation: appear .8s var(--spring) .2s both; }

/* ---------- motion ---------- */
@keyframes appear { from { opacity: .001; transform: translateY(10px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes halo { from { opacity: .25; transform: scale(1); } to { opacity: .05; transform: scale(.5); } }
@keyframes core { from { opacity: 1; } to { opacity: .5; } }
@keyframes pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes pop-out { to { opacity: 0; transform: scale(.94); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, .modal::backdrop { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition: none !important; }
}

/* ---------- breakpoints (the site's) ---------- */
@media (max-width: 1199.98px) { h1 { font-size: 84px; } }
@media (max-width: 991.98px) { h1 { font-size: 68px; } }
@media (max-width: 767.98px) {
  .hero { padding-top: 56px; gap: 56px; }
  h1 { font-size: 46px; }
  .lead { font-size: 16px; }
  /* phones: the rolling phrase is sized to the screen so the longest one stays on one line */
  .cycle { font-size: min(1em, 8.4vw); }
  .values { grid-template-columns: minmax(0, 1fr); }
  .values li { padding-block: 20px; }
  .values li + li { border-left: 0; border-top: 1px solid var(--gray-200); }
  .card { padding: 24px; }
  .heading h2 { font-size: 26px; }
  .heading p { font-size: 14px; }
}
@media (max-width: 420px) {
  .mark { font-size: 21px; }
  .nav .btn { margin-left: 4px; padding: 8px 12px; height: 40px; }
  .lang { padding: 10px 5px; }
  h1 { font-size: 42px; }
  .actions, .call { width: 100%; }
  .call { justify-content: center; }
  .choices { grid-template-columns: minmax(0, 1fr); }
}