/* ==========================================================================
   Lekker Websites — stylesheet
   Single source of truth for the whole site. No frameworks, no CDNs.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  --ink:        #0b0d12;
  --ink-2:      #11141c;
  --ink-3:      #171b26;
  --line:       #262b39;
  --line-soft:  #1d2130;

  --text:       #e8eaf0;
  --text-muted: #9aa2b6;
  --text-dim:   #6d7488;

  --brand:      #ff8a3d;   /* lekker warm orange */
  --brand-2:    #ffc14d;   /* amber */
  --accent:     #38e0b0;   /* mint, used sparingly */

  --radius:     14px;
  --radius-lg:  22px;
  --maxw:       1140px;

  --shadow:     0 18px 50px -18px rgba(0, 0, 0, .75);
  --shadow-sm:  0 8px 24px -12px rgba(0, 0, 0, .7);

  --ease:       cubic-bezier(.22, .61, .36, 1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- Base --------------------------------------------------------------- */
body {
  background: var(--ink);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient glow behind the whole page — cheap, no images. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 40rem at 78% -8%,  rgba(255, 138, 61, .13), transparent 60%),
    radial-gradient(50rem 34rem at 8%  12%,  rgba(56, 224, 176, .07), transparent 60%);
  pointer-events: none;
}

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -.022em;
  font-weight: 700;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.75rem); }
h3 { font-size: 1.2rem; }

p { color: var(--text-muted); }
strong { color: var(--text); font-weight: 650; }

::selection { background: var(--brand); color: #1a0d02; }

:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Layout helpers ----------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 22px;
}

.section { padding: clamp(64px, 9vw, 116px) 0; }
.section--tight { padding: clamp(48px, 6vw, 76px) 0; }
.section--alt { background: linear-gradient(180deg, transparent, var(--ink-2) 18%, var(--ink-2) 82%, transparent); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--brand);
}

.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head p { margin-top: 14px; font-size: 1.06rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.lede { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: var(--text-muted); }

.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 650;
  font-size: .97rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #23120a;
  box-shadow: 0 10px 30px -12px rgba(255, 138, 61, .8);
}
.btn--primary:hover { box-shadow: 0 16px 38px -12px rgba(255, 138, 61, .95); }

.btn--ghost {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover { border-color: #3b4257; background: rgba(255, 255, 255, .06); }

.btn--block { width: 100%; }
.btn--sm { padding: 10px 20px; font-size: .9rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- Header / nav ------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(11, 13, 18, .72);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line-soft);
  background: rgba(11, 13, 18, .92);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 750;
  font-size: 1.08rem;
  letter-spacing: -.02em;
  text-decoration: none;
}
.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #23120a;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 800;
  flex: none;
  box-shadow: 0 6px 18px -8px rgba(255, 138, 61, .9);
}
.brand__text em { font-style: normal; color: var(--brand-2); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav__links a {
  padding: 9px 14px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 550;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav__links a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.nav__links a[aria-current="page"] { color: var(--text); }

.nav__cta { margin-left: 10px; }

/* The CTA is a .btn that also sits inside .nav__links, and `.nav__links a`
   (0,1,1) outranks `.btn--primary` (0,1,0) -- so the button was picking up the
   nav's muted grey text and tighter padding instead of its own dark-on-amber
   styling. Re-assert both through the parent so the label stays readable. */
.nav__links a.btn--primary,
.nav__links a.btn--primary[aria-current="page"],
.nav__links a.btn--primary:hover {
  color: #23120a;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.nav__links a.btn--sm { padding: 10px 20px; }

.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 17px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after { content: ""; position: absolute; }
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after  { transform: translateY(6px); }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav__toggle { display: grid; position: relative; }
  .nav__links {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 22px 22px;
    background: rgba(11, 13, 18, .98);
    border-bottom: 1px solid var(--line-soft);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 13px 14px; font-size: 1rem; border-radius: 12px; }
  .nav__cta { margin: 10px 0 0; }
}

/* --- Hero --------------------------------------------------------------- */
.hero { padding: clamp(58px, 8vw, 104px) 0 clamp(52px, 7vw, 92px); }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: 26px;
}
.hero__badge b { color: var(--text); font-weight: 600; }
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(56, 224, 176, .16);
  flex: none;
}

.hero h1 { max-width: 15ch; }
/* Gradient text. The headings carry negative letter-spacing, and that tracking
   is applied after the LAST character too -- so the inline box ends a pixel or
   two short of where the final glyph actually finishes drawing. Since the
   gradient only paints inside that box, the right edge of the last letter gets
   no paint and reads as a cut-off letter (the "r" of "lekker"). Padding the box
   back out fixes it; the negative margin cancels the padding so nothing shifts.
   Any new gradient-text rule needs this too -- see .oops__code. */
.hero h1 .hl {
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .08em;
  margin-right: -.08em;
}
.hero__sub { max-width: 54ch; margin: 22px 0 32px; font-size: clamp(1.05rem, 1.8vw, 1.2rem); }

.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  /* Stacked, the illustration sits full-width above the headline. Flatten the
     tilt (it reads as a mistake head-on) and give the overhanging phone and
     badge room so they can't run off the side of a phone screen. */
  .mock-stage { transform: none; margin: 8px 26px 34px; max-width: 460px; }
  .hero__art:hover .mock-stage { transform: none; }
}
@media (max-width: 460px) {
  /* Below this the phone-in-a-phone is illegible and the badge crowds the
     frame, so drop both and keep the browser mockup clean. */
  .mock-phone, .mock-badge { display: none; }
  .mock-stage { margin: 8px 0 12px; }
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 40px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--line-soft);
}
.stat b {
  display: block;
  font-size: 1.7rem;
  font-weight: 750;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.1;
}
.stat span { font-size: .87rem; color: var(--text-muted); }

/* Fake browser window used as hero artwork */
/* The stage holds the browser frame plus the phone and badge that overlap it.
   It carries the tilt and the drift so all three move as one object -- tilting
   them separately made the overlap read as three flat stickers. */
.mock-stage {
  position: relative;
  transform: perspective(1500px) rotateY(-7deg) rotateX(3deg);
  transition: transform .55s var(--ease);
  animation: mock-drift 9s ease-in-out infinite;
}
.hero__art:hover .mock-stage {
  transform: perspective(1500px) rotateY(-2deg) rotateX(1deg) scale(1.015);
  animation-play-state: paused;
}

/* A slow, small vertical drift. Big enough to feel alive on a page that is
   otherwise still, small enough not to pull the eye off the headline. */
@keyframes mock-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}

/* Warm glow behind the frame so it lifts off the near-black background. */
.mock-stage::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 138, 61, .17), transparent);
  filter: blur(38px);
  z-index: -1;
}

.mock {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-2);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 15px;
  background: var(--ink-3);
  border-bottom: 1px solid var(--line-soft);
}
.mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: #39405a; }
.mock__bar i:first-child { background: #ff5f57; }
.mock__bar i:nth-child(2) { background: #febc2e; }
.mock__bar i:nth-child(3) { background: #28c840; }
.mock__url {
  margin-left: 10px;
  flex: 1;
  height: 22px;
  border-radius: 999px;
  background: #0e111a;
  border: 1px solid var(--line-soft);
  font-size: .68rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  letter-spacing: .01em;
}
/* The padlock is the point: every site we ship has a valid certificate. */
.mock__url svg {
  width: 10px; height: 10px; flex: none;
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* The miniature site inside the frame. Everything here is sized in px on
   purpose: it's a picture of a website, not text anyone reads, so it must keep
   its proportions rather than scale with the reader's font size. */
.mock__site { padding: 16px 18px 20px; }

.mock__nav {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line-soft);
}
.mock__logo {
  width: 20px; height: 20px;
  border-radius: 6px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #23120a;
  font-size: 11px; font-weight: 800;
  flex: none;
}
.mock__navlinks { display: flex; gap: 8px; margin-left: 2px; }
.mock__navlinks i { width: 22px; height: 5px; border-radius: 3px; background: #262c3c; }
.mock__cta {
  margin-left: auto;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 138, 61, .14);
  border: 1px solid rgba(255, 138, 61, .35);
  color: var(--brand-2);
  font-size: 9.5px;
  font-weight: 650;
  white-space: nowrap;
}

.mock__hero { padding: 18px 0 16px; }
.mock__eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent);
}
.mock__eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(56, 224, 176, .16);
}
.mock__h1 {
  margin: 9px 0 12px;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}
.mock__line { height: 6px; border-radius: 4px; background: #232939; width: 86%; }
.mock__line + .mock__line { margin-top: 7px; }
.mock__line--short { width: 58%; }

.mock__btns { display: flex; gap: 8px; margin-top: 15px; }
.mock__btn {
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #23120a;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 7px 18px -8px rgba(255, 138, 61, .85);
}
.mock__btn--ghost {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  color: var(--text-muted);
  box-shadow: none;
}

.mock__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mock__tiles div {
  padding: 11px 10px 12px;
  border-radius: 9px;
  background: #161b26;
  border: 1px solid var(--line-soft);
}
.mock__tiles div i { display: block; height: 5px; border-radius: 3px; background: #262c3c; }
.mock__tile-icon {
  display: block;
  width: 17px; height: 17px;
  margin-bottom: 9px;
  color: var(--brand-2);
}
.mock__tile-icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- Floating phone + badge --------------------------------------------- */
/* Both overlap the browser frame to give the illustration depth. They sit
   outside .mock so the frame's overflow:hidden doesn't clip them. */
.mock-phone {
  position: absolute;
  /* Hangs off the bottom-left corner, clear of the mini-site's "Call now"
     button. Overlapping that button hid the one element the illustration is
     meant to sell -- a site that makes people phone you. */
  left: -68px;
  bottom: -72px;
  width: 92px;
  padding: 13px 9px 11px;
  border-radius: 14px;
  background: #10141d;
  border: 1px solid var(--line);
  box-shadow: 0 22px 46px -16px rgba(0, 0, 0, .9);
  transform: rotate(-4deg);
}
.mock-phone__notch {
  display: block;
  width: 26px; height: 3px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #2b3245;
}
.mock-phone__bar { display: block; height: 12px; border-radius: 4px; background: #1a2030; margin-bottom: 9px; }
.mock-phone__h {
  display: block; height: 8px; border-radius: 3px; margin-bottom: 5px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.mock-phone__h--short { width: 62%; opacity: .5; background: #262c3c; }
.mock-phone__btn {
  display: block;
  margin: 9px 0 10px;
  padding: 5px 0;
  border-radius: 999px;
  text-align: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #23120a;
  font-size: 8px;
  font-weight: 700;
}
.mock-phone__tile { display: block; height: 15px; border-radius: 5px; background: #171c28; border: 1px solid var(--line-soft); }
.mock-phone__tile + .mock-phone__tile { margin-top: 6px; }

.mock-badge {
  position: absolute;
  right: -18px;
  top: -26px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px 10px 11px;
  border-radius: 14px;
  background: rgba(19, 23, 32, .93);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mock-badge__ring {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
  /* Full sweep in mint = a perfect score, the way Lighthouse itself shows it. */
  background:
    radial-gradient(closest-side, #131720 78%, transparent 79%),
    conic-gradient(var(--accent) 100%, #232a3a 0);
}
.mock-badge__ring b { font-size: 12.5px; font-weight: 800; color: var(--accent); }
.mock-badge__text { display: grid; gap: 2px; line-height: 1.25; }
.mock-badge__text b { font-size: 11px; font-weight: 700; color: var(--text); }
.mock-badge__text i { font-size: 9px; font-style: normal; color: var(--text-dim); }

/* --- Cards -------------------------------------------------------------- */
.card {
  position: relative;
  padding: 30px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover {
  border-color: #333a4d;
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: .96rem; }

.card__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: rgba(255, 138, 61, .12);
  border: 1px solid rgba(255, 138, 61, .26);
  color: var(--brand-2);
  font-size: 1.25rem;
}

/* --- Icons --------------------------------------------------------------
   Inline SVG rather than emoji or geometric glyphs. Emoji carry their own
   colour (a red 📍 fought the amber palette) and text-presentation glyphs
   like ✉ rendered monochrome grey; both also change shape per platform.
   These inherit currentColor and look identical everywhere. */
.icon {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }

.card__list { margin-top: 18px; display: grid; gap: 9px; }
.card__list li {
  position: relative;
  padding-left: 24px;
  font-size: .93rem;
  color: var(--text-muted);
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .58em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* --- Process steps ------------------------------------------------------ */
.steps { counter-reset: step; display: grid; gap: 18px; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
  padding: 26px 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .018);
}
.step__num {
  counter-increment: step;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 750;
  font-size: 1.02rem;
  background: rgba(255, 193, 77, .1);
  border: 1px solid rgba(255, 193, 77, .28);
  color: var(--brand-2);
  flex: none;
}
.step__num::before { content: "0" counter(step); }
.step h3 { margin-bottom: 6px; }
.step p { font-size: .96rem; }

/* --- Pricing ------------------------------------------------------------ */
.price-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; }

.plan {
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
}
.plan--featured {
  border-color: rgba(255, 138, 61, .45);
  background: linear-gradient(180deg, rgba(255, 138, 61, .09), rgba(255, 255, 255, .012));
  box-shadow: var(--shadow-sm);
}
.plan__tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #23120a;
  margin-bottom: 16px;
}
.plan__name { font-size: 1.28rem; font-weight: 700; }
.plan__for { font-size: .92rem; color: var(--text-muted); margin-top: 6px; }
.plan__price {
  margin: 22px 0 4px;
  font-size: 2.5rem;
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1;
}
.plan__price small { font-size: .95rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.plan__note { font-size: .84rem; color: var(--text-muted); }
/* list-style must be killed explicitly: the reset above only targets ul[class],
   and this list is a bare <ul>. Without it every bullet gets a disc marker
   *and* the amber tick drawn by .plan li::before. */
.plan ul { margin: 24px 0 28px; display: grid; gap: 11px; list-style: none; padding: 0; }
.plan li {
  position: relative;
  padding-left: 26px;
  font-size: .94rem;
  color: var(--text-muted);
}
.plan li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .55em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--brand-2);
  border-bottom: 2px solid var(--brand-2);
  transform: rotate(-45deg);
}
/* <strong> in a plan bullet carries weight only -- it must not brighten the
   text. Lifting it to full contrast made those lines jump out of the list and
   read as a different kind of item. Colour stays inherited from .plan li. */
.plan li strong { color: inherit; font-weight: 600; }
.plan .btn { margin-top: auto; }

/* Sits under the package grid: the packages are fixed prices, everything else
   is a conversation. */
.plan-note {
  margin: 26px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: .93rem;
  line-height: 1.7;
}
.plan-note a { color: var(--brand-2); }

/* --- Case study (featured project) -------------------------------------- */
/* Used while the portfolio is small: one project, shown properly, beats a grid
   of thumbnails. .work-grid below takes over once there are three or more. */
.case {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
}
@media (max-width: 900px) {
  /* Single column: sticky would pin the screenshot over the write-up it belongs
     to, and a 3D tilt viewed head-on just reads as a mistake. */
  .case { grid-template-columns: 1fr; }
  .case__stage {
    position: relative;
    top: auto;
    transform: none;
    margin: 4px 30px 44px 34px;
  }
  .case__stage:hover { transform: none; }
}
@media (max-width: 520px) {
  /* Too small for the phone and badge to be legible; they only crowd the frame. */
  .case-phone, .case-badge { display: none; }
  .case__stage { margin: 0 0 8px; }
}

/* The screenshot, dressed as a browser window so it reads as a live site
   rather than a flat picture. The whole thing is the link. */
/* Stage carries the tilt, the glow and the sticky, so the frame, phone and badge
   move as one object — the same treatment as the hero mockup on the homepage.
   Sticky keeps the screenshot alongside while the write-up scrolls past;
   96px clears the sticky site header. No drift here: a moving target that is
   also pinned while you scroll is unsettling rather than alive. */
.case__stage {
  position: sticky;
  top: 96px;
  transform: perspective(1500px) rotateY(-6deg) rotateX(3deg);
  transition: transform .55s var(--ease);
}
.case__stage:hover {
  transform: perspective(1500px) rotateY(-2deg) rotateX(1deg) scale(1.012);
}
.case__stage::before {
  content: "";
  position: absolute;
  inset: 6% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 138, 61, .18), transparent);
  filter: blur(40px);
  z-index: -1;
}

/* Phone hanging off the bottom-left corner, holding a real screenshot of the
   same site on mobile. The dark padding reads as the device bezel. Fixed height
   with the image anchored to the top: the full screenshot is far taller than the
   frame, and letting it run the whole way makes the phone absurdly long. */
.case-phone {
  position: absolute;
  left: -34px;
  bottom: -54px;
  width: 96px;
  height: 176px;
  padding: 5px;
  border-radius: 16px;
  background: #0d1119;
  border: 1px solid #2b3245;
  box-shadow: 0 22px 46px -16px rgba(0, 0, 0, .92);
  transform: rotate(-4deg);
  overflow: hidden;
}
.case-phone img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  object-position: top center;
}

.case-badge {
  position: absolute;
  right: -20px;
  top: -24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px 10px 11px;
  border-radius: 14px;
  background: rgba(19, 23, 32, .93);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.case-badge__ring {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
  border: 2px solid var(--accent);
  background: rgba(56, 224, 176, .1);
}
.case-badge__ring svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--accent); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.case-badge__text { display: grid; gap: 2px; line-height: 1.25; }
.case-badge__text b { font-size: 11px; font-weight: 700; color: var(--text); }
.case-badge__text i { font-size: 9px; font-style: normal; color: var(--text-dim); }

.case__shot {
  /* relative, not sticky — the stage above owns the sticky and the tilt. This
     just needs to be a containing block for the hover bar. */
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-3);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.case__shot:hover {
  border-color: rgba(255, 138, 61, .5);
  box-shadow: 0 26px 60px -22px rgba(255, 138, 61, .45), var(--shadow);
}
.case__chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  background: var(--ink-3);
  border-bottom: 1px solid var(--line-soft);
}
.case__chrome i { width: 9px; height: 9px; border-radius: 50%; background: #39405a; }
.case__chrome i:first-child { background: #ff5f57; }
.case__chrome i:nth-child(2) { background: #febc2e; }
.case__chrome i:nth-child(3) { background: #28c840; }
.case__url {
  margin-left: 8px;
  flex: 1;
  padding: 3px 11px;
  border-radius: 999px;
  background: #0e111a;
  border: 1px solid var(--line-soft);
  font-size: .7rem;
  color: var(--text-muted);
}
.case__shot img { display: block; width: 100%; height: auto; }

/* Slides up over the screenshot on hover -- the affordance that says "this
   opens the real thing", without a permanent label covering the design. */
.case__open {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px;
  font-size: .9rem;
  font-weight: 650;
  color: #23120a;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  transform: translateY(100%);
  transition: transform .3s var(--ease);
}
.case__shot:hover .case__open,
.case__shot:focus-visible .case__open { transform: translateY(0); }
.case__open .icon { width: 16px; height: 16px; stroke-width: 2; }

.case__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(56, 224, 176, .3);
  background: rgba(56, 224, 176, .09);
  color: var(--accent);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .02em;
}
.case__body h2 { margin: 16px 0 10px; font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.case__what { font-size: 1.02rem; color: var(--text-muted); }
.case__block { margin-top: 24px; }
.case__block h3 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 9px;
}
.case__block p { font-size: .95rem; }
.case__list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.case__list li {
  position: relative;
  padding-left: 26px;
  font-size: .95rem;
  color: var(--text-muted);
}
.case__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .5em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--brand-2);
  border-bottom: 2px solid var(--brand-2);
  transform: rotate(-45deg);
}
.case .tags { margin-top: 24px; }
.case .btn-row { margin-top: 26px; }

/* --- Work / portfolio --------------------------------------------------- */
.work-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.work {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-2);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.work:hover { transform: translateY(-4px); border-color: #333a4d; }
.work__thumb {
  aspect-ratio: 16 / 10;
  position: relative;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.work__thumb span {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: rgba(255, 255, 255, .82);
  mix-blend-mode: overlay;
}
.work__thumb--a { background: linear-gradient(135deg, #ff8a3d, #b34700); }
.work__thumb--b { background: linear-gradient(135deg, #38e0b0, #0a6a55); }
.work__thumb--c { background: linear-gradient(135deg, #6b8afd, #26307a); }
.work__thumb--d { background: linear-gradient(135deg, #ffc14d, #a05c00); }
.work__thumb--e { background: linear-gradient(135deg, #b06bfd, #5a2a7a); }
.work__thumb--f { background: linear-gradient(135deg, #ff6b8a, #7a1f38); }
.work__meta { padding: 24px 26px 28px; }
.work__meta h3 { margin-bottom: 8px; }
.work__meta p { font-size: .94rem; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .78rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, .025);
}

/* --- Testimonials ------------------------------------------------------- */
.quote {
  padding: 30px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .022);
}
.quote p { color: var(--text); font-size: 1.02rem; }
.quote__who { display: flex; align-items: center; gap: 13px; margin-top: 22px; }
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .9rem;
  color: #23120a;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  flex: none;
}
.quote__who b { display: block; font-size: .93rem; font-weight: 650; }
.quote__who span { font-size: .83rem; color: var(--text-muted); }
.stars { color: var(--brand-2); letter-spacing: 2px; font-size: .9rem; margin-bottom: 14px; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 800px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .022);
  overflow: hidden;
}
.faq details[open] { border-color: #333a4d; }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  font-weight: 600;
  position: relative;
  transition: color .16s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-2); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq .faq__body { padding: 0 24px 22px; }
.faq .faq__body p { font-size: .96rem; }

/* --- CTA band ----------------------------------------------------------- */
.cta-band {
  padding: clamp(44px, 6vw, 66px);
  border: 1px solid rgba(255, 138, 61, .3);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(40rem 20rem at 80% 0%, rgba(255, 138, 61, .16), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
  text-align: center;
}
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { max-width: 52ch; margin: 16px auto 30px; }
.cta-band .btn-row { justify-content: center; }

/* --- Forms -------------------------------------------------------------- */
.form-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }

.form {
  display: grid;
  gap: 18px;
  padding: clamp(26px, 4vw, 38px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
}
.field { display: grid; gap: 8px; }
.field label { font-size: .88rem; font-weight: 600; }
.field label span { color: var(--brand); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #0d1017;
  color: var(--text);
  font-size: .97rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 138, 61, .16);
}
.field input::placeholder, .field textarea::placeholder { color: #5c6478; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.form__note { font-size: .84rem; color: var(--text-muted); }
.form__status {
  display: none;
  padding: 13px 16px;
  border-radius: 11px;
  font-size: .92rem;
}
.form__status.is-ok   { display: block; background: rgba(56, 224, 176, .1); border: 1px solid rgba(56, 224, 176, .35); color: #9ff0d8; }
.form__status.is-err  { display: block; background: rgba(255, 107, 138, .1); border: 1px solid rgba(255, 107, 138, .35); color: #ffb3c2; }

/* Honeypot — must stay visually hidden but reachable by bots. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.contact-side { display: grid; gap: 16px; }
.contact-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .022);
  text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
a.contact-card:hover { border-color: rgba(255, 138, 61, .5); transform: translateY(-2px); }
/* Scoped through .contact-card so this outranks the `.contact-card span`
   muted-text rule below — the icon is itself a span inside the card, so a
   bare .contact-card__icon selector loses on specificity and the icons
   render grey instead of brand amber. */
.contact-card .contact-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 138, 61, .12);
  border: 1px solid rgba(255, 138, 61, .26);
  color: var(--brand-2);
  flex: none;
}
.contact-card .contact-card__icon .icon { width: 20px; height: 20px; }
.contact-card b { display: block; font-size: .95rem; }
.contact-card span { font-size: .9rem; color: var(--text-muted); }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: 56px 0 34px;
  margin-top: 40px;
  background: var(--ink-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } }
.footer-grid p { font-size: .93rem; max-width: 38ch; margin-top: 14px; }
.footer-col h4 {
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-weight: 650;
}
.footer-col ul { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.footer-col a {
  font-size: .94rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .16s var(--ease);
}
.footer-col a:hover { color: var(--brand-2); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  font-size: .87rem;
  color: var(--text-muted);
}

/* --- Floating WhatsApp -------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #06301a;
  box-shadow: 0 12px 30px -10px rgba(37, 211, 102, .8);
  transition: transform .2s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }

/* --- Reveal on scroll ---------------------------------------------------
   Scoped to .js (set by an inline script in <head>) so that content is never
   hidden when JavaScript is off or fails to load. Without this guard a broken
   script would leave most of the page blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --- Page hero (inner pages) -------------------------------------------- */
.page-hero { padding: clamp(50px, 7vw, 84px) 0 clamp(28px, 4vw, 44px); }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); max-width: 18ch; }
.page-hero .lede { max-width: 58ch; margin-top: 18px; }

/* --- Back link ----------------------------------------------------------- */
/* Sits above the eyebrow on every inner page. The href is a real link to "/",
   so it works with JS off; main.js upgrades it to history.back() when the
   visitor actually came from elsewhere on the site. */
.back-link {
  /* flex (not inline-flex) so it takes its own row -- as an inline element it
     sat on the same line as the .eyebrow that follows it. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 8px 17px 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--text-muted);
  font-size: .89rem;
  font-weight: 550;
  text-decoration: none;
  transition:
    color .18s var(--ease),
    border-color .18s var(--ease),
    background-color .18s var(--ease),
    transform .18s var(--ease);
}
.back-link:hover,
.back-link:focus-visible {
  color: var(--text);
  border-color: #3b4257;
  background: rgba(255, 255, 255, .06);
  transform: translateX(-3px);
}
.back-link .icon { width: 16px; height: 16px; stroke-width: 2.1; }

.back-link__arrow {
  display: grid;
  place-items: center;
  /* Three nudges on arrival, then it settles. A permanently moving control is
     a distraction; a brief one tells the visitor it's there and stops. */
  animation: back-nudge 2.4s var(--ease) 3;
}
.back-link:hover .back-link__arrow,
.back-link:focus-visible .back-link__arrow {
  animation: none;              /* hover takes over from the entrance nudge */
  transform: translateX(-4px);
  transition: transform .18s var(--ease);
}

@keyframes back-nudge {
  0%, 60%, 100% { transform: translateX(0); }
  70%           { transform: translateX(-5px); }
  80%           { transform: translateX(0); }
  90%           { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .back-link,
  .back-link__arrow { transition: none; animation: none; }
  .back-link:hover,
  .back-link:focus-visible { transform: none; }
  .back-link:hover .back-link__arrow { transform: none; }
}

/* --- 404 ---------------------------------------------------------------- */
.oops { text-align: center; padding: clamp(70px, 12vw, 140px) 0; }
.oops__code {
  font-size: clamp(5rem, 18vw, 11rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .08em;   /* see .hero h1 .hl -- stops the last digit clipping */
  margin-right: -.08em;
}
.oops p { max-width: 44ch; margin: 18px auto 30px; }
.oops .btn-row { justify-content: center; }

/* --- Prose (legal pages) ------------------------------------------------ */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.45rem; margin: 40px 0 12px; }
.prose h3 { margin: 26px 0 8px; }
.prose p, .prose li { color: var(--text-muted); font-size: .98rem; }
.prose p + p { margin-top: 14px; }
.prose ul { list-style: disc; padding-left: 22px; display: grid; gap: 8px; margin-top: 12px; }
.prose a { color: var(--brand-2); }