/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dm-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Tokens & base
   ========================================================================== */

:root {
  --violet: #6C4CF1;
  --coral: #FF5C38;
  --coral-dark: #E64524;
  --yellow: #FFC44D;
  --teal: #12C2A0;
  --ink: #17123A;
  --ink-2: #241C52;
  --muted: #4A4270;
  --bg: #F6F2FF;
  --screen: #FFFDF8;
  --lilac: #D8D1F0;
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.18, 1.1, 0.3, 1);
}

* { box-sizing: border-box; }

/* Texte lisible par les lecteurs d'écran et les moteurs, invisible à l'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--violet); }

/* Small uppercase monospace label, reused in header, badge and kickers */
.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.dot {
  display: inline-block;
  border-radius: 999px;
}
.dot--violet { background: var(--violet); }
.dot--coral { background: var(--coral); }
.dot--yellow { background: var(--yellow); }
.dot--teal { background: var(--teal); }

/* Section kicker: a small pill tag, same look as the hero badge */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 18, 58, 0.08);
  box-shadow: 0 6px 18px rgba(23, 18, 58, 0.08);
  line-height: 1.5;
}
.kicker__star { color: var(--coral); font-size: 13px; line-height: 1; }

/* ==========================================================================
   Hero
   ========================================================================== */

/* Hero and offer share one background so the blobs flow from one to the
   other. Clipping happens here, so the devices can spill past the hero's
   bottom edge instead of being cut flat. */
.intro {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Blurred color blobs drifting in the background. The lower two straddle
   the hero/offer boundary. */
.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.blob--violet {
  left: -10vw; top: -18vh;
  width: 58vw; height: 58vw;
  background: radial-gradient(closest-side, rgba(108, 76, 241, 0.42), transparent 70%);
  filter: blur(28px);
  animation: blobA 16s ease-in-out infinite;
}
.blob--coral {
  right: -14vw; top: -8vh;
  width: 52vw; height: 52vw;
  background: radial-gradient(closest-side, rgba(255, 92, 56, 0.34), transparent 70%);
  filter: blur(30px);
  animation: blobB 19s ease-in-out infinite;
}
.blob--yellow {
  left: 18vw; top: calc(100vh - 26vw);
  width: 56vw; height: 56vw;
  background: radial-gradient(closest-side, rgba(255, 196, 77, 0.40), transparent 70%);
  filter: blur(26px);
  animation: blobC 21s ease-in-out infinite;
}
.blob--teal {
  right: 6vw; top: calc(100vh - 18vw);
  width: 40vw; height: 40vw;
  background: radial-gradient(closest-side, rgba(18, 194, 160, 0.34), transparent 70%);
  filter: blur(28px);
  animation: blobA 18s 2s ease-in-out infinite;
}
/* Softens the blobs: light at the top, stronger from the hero's bottom edge
   on so they stay a faint wash behind the offer */
.intro__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0.08) 40vh, rgba(255, 255, 255, 0.46) 100vh, rgba(255, 255, 255, 0.46) 100%);
}

/* Header */
.header {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px clamp(20px, 4vw, 56px);
  animation: rise 0.7s var(--ease-out) both;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.brand__name {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.brand__dot { color: var(--coral); }

/* Centered content */
.hero__content {
  position: relative;
  z-index: 7;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(10px, 2vw, 36px) clamp(24px, 23vw, 320px) clamp(20px, 4vw, 64px);
  gap: clamp(12px, 1.6vw, 20px);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(23, 18, 58, 0.08);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(23, 18, 58, 0.08);
  animation: rise 0.7s 0.05s var(--ease-out) both;
}
.badge__flag {
  font-size: 15px;
  line-height: 1;
}
.badge__break { display: none; }

.hero__title {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(40px, 7.4vw, 124px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  font-weight: 800;
  text-wrap: balance;
  animation: rise 0.85s 0.12s var(--ease-out) both;
}
.hero__highlight {
  position: relative;
  display: inline-block;
}
.hero__marker {
  position: absolute;
  left: -2%; right: -2%; bottom: 8%;
  height: 26%;
  background: var(--yellow);
  border-radius: 6px;
  transform: rotate(-1.2deg);
  z-index: -1;
}
.hero__accent { color: var(--violet); }

.hero__lead {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
  animation: rise 0.85s 0.22s var(--ease-out) both;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  animation: rise 0.85s 0.3s var(--ease-out) both;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 15px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}
.btn--primary,
.btn--primary:hover {
  gap: 12px;
  padding: 15px 26px;
  background: var(--coral);
  color: #FFF7F4;
  letter-spacing: -0.01em;
  box-shadow: 0 16px 34px rgba(255, 92, 56, 0.36);
}
.btn--primary:hover { background: var(--coral-dark); }
.btn__arrow {
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.85;
}
.btn--secondary,
.btn--secondary:hover {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(23, 18, 58, 0.14);
  color: var(--ink);
}
.btn--secondary:hover { border-color: var(--violet); }

/* ==========================================================================
   Floating devices
   ========================================================================== */

.device {
  position: absolute;
  pointer-events: none;
}
.device--laptop {
  left: -9vw; bottom: 6vh;
  z-index: 3;
  width: min(34vw, 64vh, 640px);
}
.device--tablet {
  right: -5vw; top: 14vh;
  z-index: 3;
  width: min(24vw, 40vh, 400px);
}
.device--phone {
  right: 3vw; bottom: 0;
  z-index: 4;
  width: min(14vw, 19vh, 250px);
}

/* Entrance animation, then a slow perpetual float, then 3D tilt */
.device--laptop .device__enter { animation: enterL 1s 0.35s var(--ease-pop) both; }
.device--tablet .device__enter { animation: enterR 1s 0.5s var(--ease-pop) both; }
.device--phone .device__enter { animation: enterB 1s 0.65s var(--ease-pop) both; }

.device--laptop .device__float { animation: floatA 9s 1.4s ease-in-out infinite; }
.device--tablet .device__float { animation: floatB 11s 1.6s ease-in-out infinite; }
.device--phone .device__float { animation: floatC 8s 1.8s ease-in-out infinite; }

.device__stage { position: relative; }
.device--laptop .device__stage { perspective: 1500px; }
.device--tablet .device__stage { perspective: 1300px; }
.device--phone .device__stage { perspective: 1100px; }

.device__shadow {
  position: absolute;
  border-radius: 50%;
}
.device--laptop .device__shadow {
  left: 10%; right: 10%; bottom: -4%;
  height: 52px;
  background: rgba(58, 38, 110, 0.26);
  filter: blur(34px);
}
.device--tablet .device__shadow {
  left: 12%; right: 12%; bottom: -3%;
  height: 40px;
  background: rgba(58, 38, 110, 0.2);
  filter: blur(28px);
}
.device--phone .device__shadow {
  left: 6%; right: 6%; bottom: -2%;
  height: 34px;
  background: rgba(58, 38, 110, 0.24);
  filter: blur(24px);
}

/* Skeleton bars drawn inside the mock screens */
.sk {
  display: block;
  border-radius: 999px;
  background: var(--lilac);
}
.sk--ink { background: var(--ink-2); }
.sk--violet { background: var(--violet); }
.sk--coral { background: var(--coral); }
.sk--teal { background: var(--teal); }
.sk--square { border-radius: 4px; }

/* Laptop */
.laptop {
  position: relative;
  transform: rotateX(5deg) rotateY(15deg) rotateZ(-3deg);
}
.laptop__lid {
  position: relative;
  padding: 1.9% 1.9% 2.6%;
  border-radius: 2.4% / 3.2%;
  background: linear-gradient(150deg, #D6D2E6 0%, #9E97BC 44%, #6E678E 100%);
  box-shadow: 0 44px 72px -26px rgba(38, 24, 80, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.laptop__screen {
  position: relative;
  aspect-ratio: 16 / 10.3;
  border-radius: 1.2%;
  overflow: hidden;
  background: var(--screen);
  display: flex;
  flex-direction: column;
}
.laptop__toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2.4% 3%;
  background: #F1ECFF;
  border-bottom: 1px solid rgba(23, 18, 58, 0.07);
}
.laptop__toolbar .dot { width: 6px; height: 6px; }
.laptop__urlbar {
  flex: 1;
  height: 10px;
  margin-left: 8px;
  border-radius: 999px;
  background: #E2DAFB;
}
.laptop__page {
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4%;
  padding: 5% 5.5%;
}
.laptop__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9%;
}
.laptop__copy > .sk:nth-child(1) { height: 9px; width: 44%; }
.laptop__copy > .sk:nth-child(2) { height: 16px; width: 96%; }
.laptop__copy > .sk:nth-child(3) { height: 16px; width: 66%; }
.laptop__copy > .sk:nth-child(5) { height: 22px; width: 42%; }
.laptop__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.laptop__lines > .sk { height: 6px; }
.laptop__lines > .sk:nth-child(1) { width: 88%; }
.laptop__lines > .sk:nth-child(2) { width: 74%; }
.laptop__visual {
  border-radius: 8px;
  background: linear-gradient(150deg, #6C4CF1 0%, #B84CF1 55%, #FF5C38 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.laptop__base {
  position: relative;
  margin: 0 -5%;
  height: 2.6%;
  min-height: 14px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #CFCAE0 0%, #9C95BA 60%, #6B6489 100%);
  box-shadow: 0 26px 34px -18px rgba(38, 24, 80, 0.55);
}
.laptop__notch {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 15%;
  height: 34%;
  border-radius: 0 0 6px 6px;
  background: rgba(0, 0, 0, 0.18);
}

/* Tablet */
.tablet {
  position: relative;
  transform: rotateX(7deg) rotateY(-17deg) rotateZ(5deg);
  padding: 3.4%;
  border-radius: 8% / 6%;
  background: linear-gradient(145deg, #E4DFF2 0%, #ABA3C8 42%, #7B7398 100%);
  box-shadow: 0 46px 66px -24px rgba(38, 24, 80, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.tablet__screen {
  aspect-ratio: 3 / 4.1;
  border-radius: 5% / 3.8%;
  overflow: hidden;
  background: var(--screen);
  display: flex;
  flex-direction: column;
}
.tablet__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6% 7% 4%;
}
.tablet__nav > .sk { height: 8px; }
.tablet__nav > .sk:nth-child(1) { width: 26%; }
.tablet__nav > .sk:nth-child(2) { width: 14%; }
.tablet__page {
  padding: 0 7%;
  display: flex;
  flex-direction: column;
  gap: 5%;
}
.tablet__hero {
  height: 26%;
  min-height: 56px;
  border-radius: 8px;
  background: linear-gradient(140deg, #12C2A0 0%, #6C4CF1 100%);
}
.tablet__page > .sk:nth-child(2) { height: 11px; width: 82%; }
.tablet__page > .sk:nth-child(3) { height: 6px; width: 96%; }
.tablet__page > .sk:nth-child(4) { height: 6px; width: 70%; }
.tablet__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4%;
}
.tablet__card {
  height: 44px;
  border-radius: 8px;
}
.tablet__card--yellow { background: #FFE9C2; }
.tablet__card--violet { background: #E6E0FC; }

/* Phone */
.phone {
  position: relative;
  transform: rotateX(4deg) rotateY(13deg) rotateZ(-8deg);
  padding: 4.2%;
  border-radius: 15% / 7.5%;
  background: linear-gradient(150deg, #463C6B 0%, #241C52 46%, #151032 100%);
  box-shadow: 0 38px 56px -22px rgba(38, 24, 80, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.phone__screen {
  position: relative;
  aspect-ratio: 9 / 19.2;
  border-radius: 12% / 5.8%;
  overflow: hidden;
  background: var(--screen);
  display: flex;
  flex-direction: column;
}
.phone__island {
  position: absolute;
  left: 50%; top: 3%;
  transform: translateX(-50%);
  width: 30%;
  height: 2.6%;
  min-height: 6px;
  border-radius: 999px;
  background: #151032;
  z-index: 2;
}
.phone__nav {
  padding: 13% 9% 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.phone__nav > .sk:nth-child(1) { height: 7px; width: 34%; }
.phone__icon {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--teal);
}
.phone__page {
  padding: 0 9%;
  display: flex;
  flex-direction: column;
  gap: 7%;
}
.phone__hero {
  height: 22%;
  min-height: 52px;
  border-radius: 8px;
  background: linear-gradient(150deg, #FF5C38 0%, #FFC44D 100%);
}
.phone__page > .sk:nth-child(2) { height: 9px; width: 86%; }
.phone__page > .sk:nth-child(3) { height: 5px; width: 96%; }
.phone__page > .sk:nth-child(4) { height: 5px; width: 62%; }
.phone__page > .sk:nth-child(5) { height: 20px; width: 66%; }

/* ==========================================================================
   Offer
   ========================================================================== */

.offer {
  position: relative;
  padding: clamp(72px, 9vw, 136px) clamp(20px, 4vw, 56px);
}
.offer__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Editorial head: title on the left, lead on the right, aligned on the baseline */
.offer__head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.offer__title {
  margin: 0;
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  text-wrap: balance;
}
.offer__title-accent { color: var(--violet); }
.offer__lead {
  margin: 0 0 0.35em;
  max-width: 42ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* Cards */
.offer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.card {
  --accent: var(--violet);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 32px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(23, 18, 58, 0.08);
  box-shadow: 0 10px 30px rgba(23, 18, 58, 0.06);
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out), border-color 0.3s;
}
.card--violet { --accent: var(--violet); }
.card--coral { --accent: var(--coral); }
.card--teal { --accent: var(--teal); }
.card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 26px 50px -18px rgba(23, 18, 58, 0.22), 0 10px 30px rgba(23, 18, 58, 0.06);
}
/* Middle card sits lower so the row is not a flat line */
.card:nth-child(2) { transform: translateY(36px); }
.card:nth-child(2):hover { transform: translateY(28px); }

.card__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.card__icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 18px -10px color-mix(in srgb, var(--accent) 50%, transparent);
  transition: transform 0.55s var(--ease-pop);
}
.card__icon svg {
  width: 28px;
  height: 28px;
}
.card:hover .card__icon { transform: rotate(-6deg) scale(1.08); }

.card__heading {
  display: flex;
  flex-direction: column;
}
.card__num {
  display: inline-flex;
  align-items: center;
  margin: 0 0 4px;
  color: var(--accent);
}
.card__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}
.card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* ==========================================================================
   Work
   ========================================================================== */

.work {
  position: relative;
  padding: clamp(72px, 9vw, 136px) clamp(20px, 4vw, 56px);
  background: var(--screen);
  border-top: 1px solid rgba(23, 18, 58, 0.06);
}
.work__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.work__head { margin-bottom: clamp(48px, 6vw, 88px); }
.work__title {
  margin: 0;
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  text-wrap: balance;
}
.work__title-accent { color: var(--violet); }

/* Three cards on one row, stepping down like a staircase */
.work__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(16px, 2vw, 28px);
}
.project {
  --accent: var(--violet);
  padding: 18px 18px 28px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(23, 18, 58, 0.08);
  box-shadow: 0 10px 30px rgba(23, 18, 58, 0.06);
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out), border-color 0.3s;
}
.project--violet { --accent: var(--violet); }
.project--coral { --accent: var(--coral); }
.project--teal { --accent: var(--teal); }
.project:nth-child(2) { margin-top: 36px; }
.project:nth-child(3) { margin-top: 72px; }
.project:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 26px 50px -18px rgba(23, 18, 58, 0.22), 0 10px 30px rgba(23, 18, 58, 0.06);
}

.project__media { min-width: 0; }
.browser {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #F1ECFF;
  border: 1px solid rgba(23, 18, 58, 0.1);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(23, 18, 58, 0.07);
}
.browser__bar .dot { width: 8px; height: 8px; }
.browser__url {
  flex: 1;
  height: 12px;
  margin-left: 10px;
  border-radius: 999px;
  background: #E2DAFB;
}
.browser img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: left top;
  transition: transform 0.7s var(--ease-out);
}
.project:hover .browser img { transform: scale(1.03); }

.project__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 10px 0;
}

.project__title {
  margin: 0 0 14px;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}
.project__text {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.project__link,
.project__link:hover {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 12px 18px 12px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(23, 18, 58, 0.14);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.4s var(--ease-out);
}
.project__link svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  transition: transform 0.4s var(--ease-pop);
}
.project__link:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 60%, transparent);
  transform: translateY(-2px);
}
.project__link:hover svg { transform: translate(2px, -2px); }

/* ==========================================================================
   Process
   ========================================================================== */

.process {
  position: relative;
  padding: clamp(72px, 9vw, 136px) clamp(20px, 4vw, 56px);
  background: var(--bg);
}
.process__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.process__head {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(56px, 7vw, 96px);
}
.process__title {
  margin: 0;
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  text-wrap: balance;
}
.process__title-accent { color: var(--violet); }
.process__lead {
  margin: 0 0 0.35em;
  max-width: 42ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* Four steps along a full-width wave. The wrapper is a 4x3 grid: odd steps
   put their text above the wave row, even steps below, dots sit on the wave.
   Each column is a quarter of the width, so the dots (centered in their
   column) land on the crests and troughs of the SVG path. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto 100px auto;
}
.steps__wave {
  grid-row: 2;
  grid-column: 1 / -1;
  width: 100%;
  height: 100px;
  pointer-events: none;
}
/* The reveal is observed on the whole block (not the wave, which sits in
   its middle) so the draw starts as soon as the steps come into view. The
   wave is drawn left to right at constant speed so the steps below can be
   timed on the moment the line reaches their dot */
.js .steps[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}
.js .steps .steps__wave {
  clip-path: inset(-10px 100% -10px 0);
  transition: clip-path 4.8s linear;
}
.js .steps.is-visible .steps__wave { clip-path: inset(-10px 0 -10px 0); }

.steps__list {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step {
  position: relative;
  display: grid;
  grid-row: 1 / 4;
  grid-template-rows: subgrid;
  padding: 0 clamp(12px, 2vw, 28px);
  text-align: center;
}
/* Explicit columns: the steps overlap the wave's row, so auto-placement
   would push them into implicit columns */
.step:nth-child(1) { grid-column: 1; }
.step:nth-child(2) { grid-column: 2; }
.step:nth-child(3) { grid-column: 3; }
.step:nth-child(4) { grid-column: 4; }
.step__marker {
  grid-row: 2;
  position: relative;
  top: 3px;
  justify-self: center;
  align-self: start;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--bg);
}
/* The wave drifts downwards: each dot sits on its crest or trough, and the
   copy follows so it keeps the same distance from its dot */
.step:nth-child(2) .step__marker { top: 56px; }
.step:nth-child(3) .step__marker { top: 30px; }
.step:nth-child(4) .step__marker { top: 83px; }
.step:nth-child(3) .step__body { position: relative; top: 27px; }
.step:nth-child(2) .step__body { position: relative; top: -27px; }
.step__marker .dot {
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
  /* transform (hover pop) and scale (reveal pop) are kept as separate
     transitions so the reveal's staggered delay below never bleeds into
     the hover response */
  transition: transform 0.45s var(--ease-pop), scale 0.45s var(--ease-pop);
}
.step:hover .step__marker .dot { transform: scale(1.35); }

/* Each step waits for the line: dots sit at 12.5 / 37.5 / 62.5 / 87.5 % of the
   width, so with a 4.8s linear draw starting at 0.3s they are reached at
   0.9 / 2.1 / 3.3 / 4.5 s */
.js .step .step__marker .dot { scale: 0; }
.js .step .step__body {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js .steps.is-visible .steps__list .step .step__marker .dot { scale: 1; }
.js .steps.is-visible .steps__list .step:hover .step__marker .dot { transform: scale(1.35); }
.js .steps.is-visible .steps__list .step .step__body {
  opacity: 1;
  transform: none;
}
.js .steps.is-visible .steps__list .step:nth-child(1) .step__body { transition-delay: 0.6s; }
.js .steps.is-visible .steps__list .step:nth-child(1) .step__marker .dot { transition-delay: 0s, 0.6s; }
.js .steps.is-visible .steps__list .step:nth-child(2) .step__body { transition-delay: 1.8s; }
.js .steps.is-visible .steps__list .step:nth-child(2) .step__marker .dot { transition-delay: 0s, 1.8s; }
.js .steps.is-visible .steps__list .step:nth-child(3) .step__body { transition-delay: 3s; }
.js .steps.is-visible .steps__list .step:nth-child(3) .step__marker .dot { transition-delay: 0s, 3s; }
.js .steps.is-visible .steps__list .step:nth-child(4) .step__body { transition-delay: 4.2s; }
.js .steps.is-visible .steps__list .step:nth-child(4) .step__marker .dot { transition-delay: 0s, 4.2s; }
.step__body {
  grid-row: 1;
  align-self: end;
  padding-bottom: 22px;
}
.step:nth-child(even) .step__body {
  grid-row: 3;
  align-self: start;
  padding-top: 22px;
  padding-bottom: 0;
}
.step__num {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--ink);
}
.step__title {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}
.step__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* Scroll reveal (only when JS is running, see main.js) */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.js [data-reveal]:nth-child(2) { transition-delay: 0.1s; }
.js [data-reveal]:nth-child(3) { transition-delay: 0.2s; }
.js [data-reveal]:nth-child(4) { transition-delay: 0.3s; }
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* The reveal transition and the hover lift share `transform` */
.js .card.is-visible {
  transition: opacity 0.8s var(--ease-out), transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out), border-color 0.3s;
}

/* ==========================================================================
   About
   ========================================================================== */

.about {
  position: relative;
  padding: clamp(72px, 9vw, 136px) clamp(20px, 4vw, 56px);
  background: var(--bg);
}
/* Two rows: portrait beside the title, then the copy split in two columns */
.about__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.about__inner > .kicker { margin-bottom: clamp(20px, 2.5vw, 32px); }
.about__head {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.about__prose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
}

/* Flat photo with an ink outline over a solid violet block offset to the bottom-right */
.about__portrait {
  position: relative;
  flex: none;
  width: clamp(120px, 11vw, 150px);
  aspect-ratio: 1;
}
.about__backdrop {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--violet);
  transform: translate(10px, 10px);
  transition: transform 0.55s var(--ease-pop);
}
.about__frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid var(--ink);
  transition: transform 0.55s var(--ease-pop);
}
.about__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__portrait:hover .about__frame { transform: translate(-3px, -3px); }
.about__portrait:hover .about__backdrop { transform: translate(13px, 13px); }
.about__star {
  position: absolute;
  font-size: 20px;
  line-height: 1;
  animation: floatC 6s ease-in-out infinite;
}
.about__star--coral { top: -16px; right: -18px; color: var(--coral); font-size: 22px; }
.about__star--yellow { bottom: -8px; left: -18px; color: var(--yellow); font-size: 15px; animation-delay: -3s; }

.about__title {
  margin: 0;
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  text-wrap: balance;
}
.about__title-accent { color: var(--violet); }
.about__title-break { display: none; }
.about__text {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}
/* The goal statement sits in its own card, same surface as the other cards */
.about__goal {
  align-self: start;
  padding: 24px 28px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(23, 18, 58, 0.08);
  border-left: 4px solid var(--violet);
  box-shadow: 0 10px 30px rgba(23, 18, 58, 0.06);
  color: var(--ink);
}
.about__goal-secondary {
  display: inline-block;
  margin-top: 6px;
  font-weight: 300;
  color: var(--muted);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  position: relative;
  padding: clamp(72px, 9vw, 136px) clamp(20px, 4vw, 56px);
  background: var(--screen);
  border-top: 1px solid rgba(23, 18, 58, 0.06);
}
/* Pitch on the left, form card on the right */
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  max-width: 1200px;
  margin: 0 auto;
}
/* Column so the mail line can sit flush with the bottom of the form */
.contact__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact__meta {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin-top: auto;
}
.contact__title {
  margin: 0 0 28px;
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  text-wrap: balance;
}
.contact__title-accent { color: var(--violet); }
.contact__text {
  margin: 0 0 1.2em;
  max-width: 56ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}
.contact__mail {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-color: rgba(23, 18, 58, 0.25);
  text-underline-offset: 4px;
}
.contact__mail:hover { text-decoration-color: var(--violet); }
.contact__delay {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
/* Green dot with a soft pulsing halo */
.contact__pulse {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}
.contact__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--teal);
  animation: pulse 2s var(--ease-out) infinite;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px, 3vw, 40px);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(23, 18, 58, 0.08);
  box-shadow: 0 10px 30px rgba(23, 18, 58, 0.06);
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form__label { color: var(--ink); }
.form__optional { color: var(--muted); text-transform: none; letter-spacing: 0.06em; }
.form__input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(23, 18, 58, 0.14);
  background: var(--screen);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form__input:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(108, 76, 241, 0.16);
}
.form__input--textarea {
  resize: vertical;
  min-height: 120px;
}
.form__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.form__submit {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.form__submit[hidden] { display: none; }
.form__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}
.form__botcheck { display: none; }
.form__status {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.form__sent {
  margin: 0;
  font-weight: 600;
  color: var(--teal);
}
.form__status--error { color: var(--coral-dark); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  position: relative;
  padding: clamp(72px, 9vw, 136px) clamp(20px, 4vw, 56px);
  background: var(--bg);
  border-top: 1px solid rgba(23, 18, 58, 0.06);
}
.faq__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.faq__head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.faq__title {
  margin: 0;
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  text-wrap: balance;
}
.faq__title-accent { color: var(--violet); }
.faq__lead {
  margin: 0 0 0.35em;
  max-width: 42ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

/* Native <details> accordion: one card per question, same surface as the other cards */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
}
.faq__item {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(23, 18, 58, 0.08);
  box-shadow: 0 10px 30px rgba(23, 18, 58, 0.06);
  transition: border-color 0.3s, box-shadow 0.55s var(--ease-out);
}
.faq__item:hover,
.faq__item[open] {
  border-color: rgba(108, 76, 241, 0.3);
  box-shadow: 0 14px 36px rgba(23, 18, 58, 0.09);
}
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:focus-visible {
  outline: none;
  border-radius: 22px;
  box-shadow: 0 0 0 4px rgba(108, 76, 241, 0.16);
}
.faq__question-text {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
}
/* Plus sign that rotates into a cross when the item opens */
.faq__toggle {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--violet);
  transition: transform 0.45s var(--ease-pop), background 0.3s;
}
.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
}
.faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__toggle {
  background: var(--coral);
  transform: rotate(135deg);
}
.faq__answer {
  padding: 0 26px 24px;
}
.faq__answer p {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}
.faq__answer strong { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing {
  position: relative;
  padding: clamp(72px, 9vw, 136px) clamp(20px, 4vw, 56px);
  background: var(--screen);
  border-top: 1px solid rgba(23, 18, 58, 0.06);
}
.pricing__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.pricing__head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.pricing__title {
  margin: 0;
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  text-wrap: balance;
}
.pricing__title-accent { color: var(--violet); }
.pricing__lead {
  margin: 0 0 0.35em;
  max-width: 42ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* Three plans side by side: price on top, what's included below */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.plan {
  --accent: var(--violet);
  position: relative;
  /* Subgrid: offer and list share the parent grid's rows, so the separator lines up across cards */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: clamp(22px, 2.5vw, 32px);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 36px);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(23, 18, 58, 0.08);
  box-shadow: 0 10px 30px rgba(23, 18, 58, 0.06);
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out), border-color 0.3s;
}
.plan--violet { --accent: var(--violet); }
.plan--coral { --accent: var(--coral); }
.plan--yellow { --accent: var(--yellow); }
.plan--teal { --accent: var(--teal); }
.plan:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 26px 50px -18px rgba(23, 18, 58, 0.22), 0 10px 30px rgba(23, 18, 58, 0.06);
}
.js .plan.is-visible {
  transition: opacity 0.8s var(--ease-out), transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out), border-color 0.3s;
}

/* Launch-price badge: a tilted coral sticker pinned to the card's top-right corner */
.plan__badge {
  position: absolute;
  top: -14px;
  right: 22px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
  box-shadow: 0 10px 24px -8px rgba(255, 92, 56, 0.6);
  transform: rotate(3deg);
}

.plan__heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.plan__num { color: var(--accent); }
.plan__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.plan__tag {
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, white);
}
.plan__old {
  margin: 0 0 4px;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  color: rgba(74, 66, 112, 0.7);
}
.plan__old s { color: var(--coral); text-decoration-thickness: 2px; }
.plan__old-label { font-weight: 500; color: rgba(74, 66, 112, 0.55); }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 18px;
  line-height: 1;
}
.plan__amount {
  font-size: clamp(40px, 3.6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.045em;
}
.plan__amount--quote {
  font-size: clamp(30px, 2.6vw, 40px);
  color: var(--accent);
}
.plan__currency {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.plan__text {
  margin: 0;
  max-width: 38ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.plan__text strong { color: var(--ink); font-weight: 700; }

.plan__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: clamp(22px, 2.5vw, 32px) 0 0;
  list-style: none;
  border-top: 1px solid rgba(23, 18, 58, 0.1);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 500;
}
.plan__list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.plan__arrow { color: var(--accent); font-weight: 700; }

/* Maintenance: a discreet strip under the plans, deliberately quieter than the cards */
.maintenance {
  --accent: var(--teal);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(20px, 2.5vw, 32px);
  padding: clamp(20px, 2.5vw, 28px) clamp(24px, 3vw, 40px);
  border-radius: 20px;
  border: 1px dashed rgba(23, 18, 58, 0.16);
}
.maintenance__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.maintenance__price {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--muted);
}
.maintenance__price strong { color: var(--ink); font-weight: 700; }
.maintenance__text {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.maintenance__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
}
.maintenance__list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Four-color hairline on top, same gradient as the process wave */
.footer {
  position: relative;
  padding: clamp(56px, 6vw, 88px) clamp(20px, 4vw, 56px) 32px;
  background: var(--bg);
}
.footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--coral), var(--yellow), var(--teal));
}
/* Brand takes half the width, the two link columns share the rest */
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  max-width: 1200px;
  margin: 0 auto;
}
.footer .brand__name { font-size: 30px; }
.footer__tagline {
  margin: 14px 0 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.footer__heading {
  margin-bottom: 6px;
  color: var(--ink);
}
.footer__link {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.footer__link--accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--coral);
}
.footer__link--accent:hover { color: var(--coral-dark); }
.footer__arrow { transition: transform 0.3s var(--ease-pop); }
.footer__link--accent:hover .footer__arrow { transform: translateX(4px); }
.footer__place {
  font-size: 15px;
  color: var(--muted);
}

/* Copyright row under a thin rule */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1200px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(23, 18, 58, 0.1);
}
.footer__copy,
.footer__made { margin: 0; }
.footer__made {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.footer__made .dot {
  width: 7px;
  height: 7px;
}
.footer__made .dot--teal { margin-right: 6px; }

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes enterL { from { opacity: 0; transform: translate3d(-90px, 70px, 0) scale(0.86) rotate(-7deg); } to { opacity: 1; transform: none; } }
@keyframes enterR { from { opacity: 0; transform: translate3d(90px, -60px, 0) scale(0.86) rotate(7deg); } to { opacity: 1; transform: none; } }
@keyframes enterB { from { opacity: 0; transform: translate3d(50px, 90px, 0) scale(0.84) rotate(9deg); } to { opacity: 1; transform: none; } }
@keyframes floatA { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -16px, 0) rotate(-1.1deg); } }
@keyframes floatB { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -24px, 0) rotate(1.5deg); } }
@keyframes floatC { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -12px, 0) rotate(-1.8deg); } }
@keyframes blobA { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4vw, -3vh, 0) scale(1.12); } }
@keyframes blobB { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-5vw, 4vh, 0) scale(0.94); } }
@keyframes blobC { 0%, 100% { transform: translate3d(0, 0, 0) scale(0.96); } 50% { transform: translate3d(3vw, 5vh, 0) scale(1.14); } }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .step .step__marker .dot { scale: 1; }
  .js .step .step__body { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 768px) {
  .hero {
    height: auto;
    min-height: 100svh;
  }

  /* Blobs are sized in vw, scale them up so they still fill the narrow viewport */
  .blob--violet { left: -30vw; top: -8vh; width: 90vw; height: 90vw; }
  .blob--coral { right: -40vw; top: 12vh; width: 80vw; height: 80vw; }
  .blob--yellow { left: -10vw; top: calc(100svh - 40vw); width: 90vw; height: 90vw; }
  .blob--teal { right: -20vw; top: calc(100svh - 30vw); width: 70vw; height: 70vw; }

  .header { padding: 18px 20px; }
  .brand__name { font-size: 28px; }

  .hero__content {
    padding: 0 20px;
    gap: 14px;
  }
  .badge__break { display: inline; }
  .hero__title { font-size: clamp(36px, 11vw, 56px); }
  .hero__lead { font-size: 15px; }
  .hero__actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }
  .btn { width: 100%; justify-content: center; }

  /* Only the laptop (bottom left) and the phone (top right) are shown */
  .device--tablet { display: none; }
  .device--laptop {
    left: -6vw; bottom: 4vh;
    width: min(60vw, 30vh);
  }
  .device--phone {
    right: -6vw; top: 4vh; bottom: auto;
    width: min(30vw, 16vh);
  }
  .device--phone .device__enter { animation-name: enterR; }

  .offer { padding: 64px 20px; }
  .offer__head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 36px;
  }
  .offer__title { font-size: clamp(34px, 10vw, 48px); }
  .offer__lead { margin: 0; font-size: 15px; }
  .offer__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .card:nth-child(2) { margin-top: 0; }
  .card { padding: 24px 22px 28px; }
  .card__icon { width: 52px; height: 52px; }
  .card__title { font-size: 20px; }

  .work { padding: 64px 20px; }
  .work__head { margin-bottom: 40px; }
  .work__title { font-size: clamp(34px, 10vw, 48px); }
  .work__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .project { padding: 14px 14px 24px; }
  .project:nth-child(2),
  .project:nth-child(3) { margin-top: 0; }
  .project__body { padding: 20px 6px 0; }
  .project__title { font-size: 24px; }
  .project__text { font-size: 15px; }

  .process { padding: 64px 20px; }
  .process__head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 40px;
  }
  .process__title { font-size: clamp(34px, 10vw, 48px); }
  .process__lead { margin: 0; font-size: 15px; }
  .steps { display: block; }
  .steps__wave { display: none; }
  .steps__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .step,
  .step:nth-child(1),
  .step:nth-child(2),
  .step:nth-child(3),
  .step:nth-child(4) {
    display: block;
    grid-column: auto;
    grid-row: auto;
    padding: 0 0 0 36px;
    text-align: left;
  }
  .step::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 20px;
    bottom: -36px;
    border-left: 2px dashed rgba(23, 18, 58, 0.16);
  }
  .step:last-child::before { display: none; }
  /* Mobile reveal: the dashed line is drawn top to bottom, one segment at a
     time, and each step pops in when the line reaches its dot. Each segment
     draws for 0.8s after a 0.3s pause, so the steps appear at
     0 / 1.1 / 2.2 / 3.3 s */
  .js .step::before {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.8s linear;
  }
  .js .steps.is-visible .step::before { clip-path: inset(0); }
  .js .steps.is-visible .step:nth-child(1)::before { transition-delay: 0.3s; }
  .js .steps.is-visible .step:nth-child(2)::before { transition-delay: 1.4s; }
  .js .steps.is-visible .step:nth-child(3)::before { transition-delay: 2.5s; }
  .js .steps.is-visible .steps__list .step:nth-child(1) .step__body { transition-delay: 0s; }
  .js .steps.is-visible .steps__list .step:nth-child(1) .step__marker .dot { transition-delay: 0s, 0s; }
  .js .steps.is-visible .steps__list .step:nth-child(2) .step__body { transition-delay: 1.1s; }
  .js .steps.is-visible .steps__list .step:nth-child(2) .step__marker .dot { transition-delay: 0s, 1.1s; }
  .js .steps.is-visible .steps__list .step:nth-child(3) .step__body { transition-delay: 2.2s; }
  .js .steps.is-visible .steps__list .step:nth-child(3) .step__marker .dot { transition-delay: 0s, 2.2s; }
  .js .steps.is-visible .steps__list .step:nth-child(4) .step__body { transition-delay: 3.3s; }
  .js .steps.is-visible .steps__list .step:nth-child(4) .step__marker .dot { transition-delay: 0s, 3.3s; }
  .step__marker,
  .step:nth-child(2) .step__marker,
  .step:nth-child(3) .step__marker,
  .step:nth-child(4) .step__marker {
    position: absolute;
    left: 0;
    top: 0;
  }
  .step__body,
  .step:nth-child(even) .step__body { padding: 0; }
  .step:nth-child(2) .step__body,
  .step:nth-child(3) .step__body { top: 0; }
  .step__title { font-size: 20px; }

  .pricing { padding: 64px 20px; }
  .pricing__head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 36px;
  }
  .pricing__title { font-size: clamp(34px, 10vw, 48px); }
  .pricing__lead { margin: 0; font-size: 15px; }
  .pricing__grid { grid-template-columns: 1fr; }
  .plan {
    gap: 24px;
    padding: 28px 22px 28px;
  }
  .plan__badge { right: 16px; }
  .plan__list {
    padding: 22px 0 0;
    font-size: 16px;
  }
  .maintenance {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 20px;
  }
  .maintenance__list { flex-direction: column; gap: 10px; }

  .about { padding: 64px 20px; }
  .about__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 32px;
  }
  .about__prose {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .about__title { font-size: clamp(34px, 10vw, 48px); }
  .about__title-break { display: inline; }
  .about__text { font-size: 15px; }

  .contact { padding: 64px 20px; }
  .contact__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .contact__title { font-size: clamp(34px, 10vw, 48px); }
  .contact__text { font-size: 15px; }
  .form { padding: 24px 20px; }
  .form__footer { flex-direction: column; align-items: stretch; gap: 16px; }
  .form__submit { width: 100%; justify-content: center; }

  .faq { padding: 64px 20px; }
  .faq__head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 36px;
  }
  .faq__title { font-size: clamp(34px, 10vw, 48px); }
  .faq__lead { margin: 0; font-size: 15px; }
  .faq__question { padding: 18px 20px; gap: 14px; }
  .faq__question-text { font-size: 16px; }
  .faq__toggle { width: 26px; height: 26px; }
  .faq__answer { padding: 0 20px 20px; }
  .faq__answer p { font-size: 15px; }

  .footer { padding: 48px 20px 24px; }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer .brand__name { font-size: 26px; }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 40px;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .js .step::before { clip-path: none; transition: none; }
}