:root {
  --bg: #f7f7f9;
  --surface: #eceef3;
  --ink: #0f1d37;
  --muted: #4e5a70;
  --accent: #1c3fb7;
  --accent-ink: #ffffff;
  --paper: #f7f7f9;
  --paper-soft: #b5bfd2;

  --font: "Albert Sans", system-ui, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1.1rem + 1vw, 2.125rem);
  --step-head: clamp(2rem, 1rem + 3vw, 3.5rem);
  --step-display: clamp(2.75rem, 1rem + 5vw, 5.75rem);

  --margin: clamp(1.25rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(6rem, 11vw, 11rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 800ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--step-body); line-height: 1.55;
  font-kerning: normal; -webkit-font-smoothing: antialiased;
}
h1, h2, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2 { font-weight: 600; letter-spacing: -0.03em; line-height: 1; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
:target { scroll-margin-top: 2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--margin); }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.4rem;
  background: var(--accent); color: var(--accent-ink); text-decoration: none; white-space: nowrap; font-weight: 500;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
  .button:hover { background: var(--paper); color: var(--ink); }
  .link-plain:hover { color: var(--accent); }
  .hero .link-plain:hover { color: var(--paper-soft); }
}

[data-fit] { display: inline-block; white-space: nowrap; }

/* Hero */
.hero { min-height: 100svh; display: flex; flex-direction: column; background: var(--ink); color: var(--paper); }
.bar { display: flex; align-items: center; gap: 2rem; padding: 1rem var(--margin); font-size: var(--step-small); }
.bar__mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 600; font-size: var(--step-body); }
.bar__mark img { width: 2.6rem; }
.bar__links { display: flex; gap: 1.75rem; margin-left: auto; }
.bar__menu { display: none; font-weight: 500; }
.bar__action { min-height: 2.75rem; padding: 0 1.1rem; }

.hero__body { flex: 1; align-items: center; padding-block: 3rem 6rem; }
.hero__copy { grid-column: 1 / span 7; display: grid; gap: 2rem; justify-items: start; }
.hero__title { font-size: var(--step-display); }
.hero__lead { max-width: 34rem; color: var(--paper-soft); }
.hero__actions { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.hero__mark { grid-column: 9 / span 4; width: 100%; justify-self: end; }

/* Intro */
.intro { padding-block: var(--section); row-gap: 3rem; }
.intro__statement { grid-column: 1 / span 8; font-size: var(--step-lead); line-height: 1.3; font-weight: 500; max-width: 28ch; }
.intro__col { grid-column: 7 / span 5; }
.intro__col p + p { margin-top: 1.2em; }

/* Services */
.services { background: var(--surface); padding-block: var(--section); row-gap: 4rem; }
.services__title { grid-column: 1 / -1; font-size: var(--step-display); }
.services__list { grid-column: 1 / -1; display: grid; gap: 3rem; }
.service { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
.service dt { grid-column: 1 / span 6; font-size: var(--step-head); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.service dd { grid-column: 7 / span 6; max-width: 34rem; }

/* Process */
.process { padding-block: var(--section); row-gap: 3rem; align-items: start; }
.process__title { grid-column: 1 / span 5; font-size: var(--step-head); }
.process__col { grid-column: 7 / span 6; }
.stage + .stage { margin-top: 3rem; }
.stage p { max-width: 36rem; }
.stage b { font-weight: 600; }
.quote { margin-top: 1.25rem; padding: 1.25rem; background: var(--surface); font-size: var(--step-small); }
.quote__lines { display: grid; gap: 0.5rem; }
.quote__lines li { display: flex; justify-content: space-between; gap: 1rem; }
.quote__lines li span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.quote__total { font-weight: 600; margin-top: 0.35rem; }

/* Pricing */
.pricing { padding-block: var(--section); row-gap: 3rem; align-items: start; background: var(--ink); color: var(--paper); }
.pricing__title { grid-column: 1 / -1; font-size: var(--step-display); margin-bottom: 1rem; }
.plans { grid-column: 1 / span 6; display: grid; justify-items: start; gap: 0.25rem; }
.plan {
  position: relative; font-size: var(--step-head); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15;
  color: var(--paper-soft); text-align: left; padding-left: 0.6em; transition: color var(--t-hover) ease;
}
.plan::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 0.28em; height: 0.28em; border-radius: 50%;
  background: currentColor; opacity: 0; transform: scale(0.6); transition: opacity var(--t-hover) ease, transform var(--t-hover) var(--ease-out);
}
.plan[aria-selected="true"] { color: var(--paper); }
.plan[aria-selected="true"]::before { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .plan:hover { color: var(--paper); } }
.price { grid-column: 8 / span 5; position: sticky; top: 2rem; }
.price__inner { display: grid; gap: 1.5rem; justify-items: start; transition: opacity 200ms ease; }
.price__inner.is-swapping { opacity: 0; }
.price__figure { font-size: var(--step-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1; display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.price__figure small { font-size: var(--step-body); font-weight: 400; letter-spacing: 0; color: var(--paper-soft); }
.price__text { max-width: 34rem; }
.price__months { display: grid; gap: 0.6rem; width: 100%; max-width: 26rem; }
.price__months b { font-weight: 600; font-variant-numeric: tabular-nums; }
.price__months input { width: 100%; accent-color: #4f8cf7; min-height: 2.75rem; }
.pricing__note { grid-column: 8 / span 5; font-size: var(--step-small); color: var(--paper-soft); }

/* FAQ */
.faq { padding: var(--section) var(--margin); background: var(--surface); }
.faq__title { font-size: var(--step-display); margin-bottom: 4rem; }
.faq__list { margin-left: calc((100% + var(--gutter)) / 12 * 4); display: grid; gap: 2rem; }
.faq details { margin-inline: -1.5rem; padding: 0 1.5rem; transition: background-color var(--t-hover) ease; }
.faq details[open] { background: var(--bg); padding-block: 1.5rem; }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  font-size: var(--step-lead); line-height: 1.3; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg); transition: transform var(--t-hover) var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(15%) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--accent); } }
.faq details p { max-width: 48ch; margin-top: 1rem; }

/* Contact */
.contact {
  min-height: 90svh; background: var(--accent); color: var(--accent-ink);
  display: grid; grid-template-rows: auto 1fr auto auto; padding: 2rem var(--margin) 1.75rem;
}
.contact__ask { font-size: var(--step-lead); max-width: 22ch; line-height: 1.3; font-weight: 500; }
.contact__mail {
  grid-row: 3; justify-self: start; font-size: 12vw; font-weight: 600; line-height: 1; letter-spacing: -0.04em;
  text-decoration: none; margin-bottom: 6vh; transition: color var(--t-hover) ease;
}
.contact__break { display: none; }
@media (hover: hover) and (pointer: fine) { .contact__mail:hover { color: var(--ink); } }
.contact__foot { grid-row: 4; display: flex; justify-content: space-between; gap: 1rem; }
.contact__foot p:last-child { text-align: right; }

/* Footer */
.footer { background: var(--ink); color: var(--paper); display: grid; padding: 3rem var(--margin) 1.25rem; row-gap: 5rem; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.footer__cols p { color: var(--paper-soft); overflow-wrap: anywhere; }
.footer__cols .footer__lead { color: var(--paper); margin-bottom: 0.4rem; }
.footer__name { justify-self: start; font-size: 25vw; font-weight: 600; line-height: 0.78; letter-spacing: -0.05em; padding-top: 0.05em; }
.footer__legal { margin-top: -3.5rem; font-size: var(--step-small); color: var(--paper-soft); display: flex; align-items: center; gap: 0.75rem; }
.footer__legal img { width: 2.2rem; }

/* Cookie notice */
.cookie {
  position: fixed; z-index: 20; left: var(--margin); bottom: var(--margin); max-width: 30rem;
  display: grid; gap: 1rem; padding: 1.25rem; background: var(--paper); color: var(--ink);
  box-shadow: 0 8px 32px rgba(11, 20, 40, .28); font-size: var(--step-small);
}
.cookie[hidden] { display: none; }
.cookie__actions { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; }
.cookie .button { min-height: 2.5rem; padding: 0 1.25rem; }
.cookie .button:hover, .policy .button:hover { background: var(--ink); color: var(--paper); }
.policy {
  width: min(40rem, 100% - 2 * var(--margin)); max-height: 85svh; padding: 2rem; border: 0;
  background: var(--paper); color: var(--ink); box-shadow: 0 16px 48px rgba(11, 20, 40, .35);
}
.policy::backdrop { background: rgba(11, 20, 40, .6); }
.policy h2 { font-size: var(--step-head); margin-bottom: 1.5rem; }
.policy p + p { margin-top: 1em; }
.policy b { font-weight: 600; }
.policy form { margin-top: 2rem; }

/* Motion */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out), background-color var(--t-hover) ease; transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* Narrow */
@media (max-width: 960px) {
  .hero__copy { grid-column: 1 / span 8; }
  .intro__col { grid-column: 5 / span 8; }
  .faq__list { margin-left: 0; }
  .faq details { margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
}

@media (max-width: 720px) {
  .hero { position: relative; }
  .bar { gap: 1.25rem; }
  .bar__menu { display: block; }
  .bar__links { display: none; }
  .bar__links.is-open {
    display: grid; gap: 0.25rem; position: absolute; z-index: 5; inset: 4.25rem var(--margin) auto; padding: 1.25rem;
    background: var(--paper); color: var(--ink); font-size: var(--step-lead);
  }
  .bar__action { margin-left: auto; }
  .hero__body { align-content: center; row-gap: 3rem; padding-block: 2rem 4rem; }
  .hero__copy, .hero__mark { grid-column: 1 / -1; }
  .hero__mark { grid-row: 1; justify-self: start; width: 55%; }

  .intro__statement, .intro__col { grid-column: 1 / -1; }

  .services { row-gap: 3rem; }
  .services__list { gap: 2.25rem; }
  .service dt, .service dd { grid-column: 1 / -1; }
  .service dd { margin-top: 0.6rem; }

  .process__title, .process__col { grid-column: 1 / -1; }

  .pricing { row-gap: 1.5rem; }
  .plans, .pricing__note { grid-column: 1 / -1; }
  .price { position: static; grid-column: 1 / -1; margin-top: 1rem; }
  .price .button { width: 100%; }

  .faq__title { margin-bottom: 2.5rem; }
  .faq__list { gap: 1.5rem; }

  .contact { min-height: 80svh; }
  .contact__break { display: block; }
  .cookie { right: var(--margin); max-width: none; }
  .policy { padding: 1.5rem; }
  .contact__foot { flex-direction: column; gap: 0.75rem; }
  .contact__foot p:last-child { text-align: left; }

  .footer { row-gap: 4rem; }
  .footer__legal { margin-top: -2.5rem; }
}