/* ===== Texts Dev homepage — warm editorial theme ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #f5f0e6;
  --surface: #fffcf6;
  --surface-2: #ede5d6;
  --ink: #1d1b16;
  --muted: #5d574b;
  --faint: #857d6d;
  --line: #ddd3c1;
  --accent: #5b34c9;
  --accent-ink: #ffffff;
  --accent-soft: #e9e1fa;
  --warm: #c8561f;
  --star: #d4930f;
  --ok: #2f7d4f;
  --danger: #b3261e;
  --shadow: 0 1px 2px rgba(60, 45, 20, .06), 0 10px 30px -12px rgba(60, 45, 20, .18);
  --radius: 14px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16140f;
    --surface: #1f1c16;
    --surface-2: #29251d;
    --ink: #f2ece0;
    --muted: #bcb3a1;
    --faint: #8f8775;
    --line: #37312a;
    --accent: #b69bff;
    --accent-ink: #16140f;
    --accent-soft: #2c2540;
    --warm: #f08a55;
    --star: #f0b83a;
    --ok: #6fcf97;
    --danger: #ff8a80;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #16140f; --surface: #1f1c16; --surface-2: #29251d; --ink: #f2ece0; --muted: #bcb3a1;
  --faint: #8f8775; --line: #37312a; --accent: #b69bff; --accent-ink: #16140f; --accent-soft: #2c2540;
  --warm: #f08a55; --star: #f0b83a; --ok: #6fcf97; --danger: #ff8a80; color-scheme: dark;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: clamp(16px, 15px + .25vw, 17.5px);
  line-height: 1.6;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ===== Reveal on scroll (only when JS runs) ===== */
.js [data-animate] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js [data-animate].visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-animate] { opacity: 1; transform: none; transition: none; }
}

/* ===== Buttons & links ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px;
  font-weight: 600; font-size: .98rem; line-height: 1.2;
  border: 1.5px solid transparent;
  transition: transform .2s, background .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.btn--full { width: 100%; }

.link-arrow { font-weight: 600; color: var(--accent); border-bottom: 1.5px solid transparent; transition: border-color .2s; }
.link-arrow::after { content: " →"; }
.link-arrow:hover { border-color: currentColor; }
a[target="_blank"].link-arrow::after { content: " ↗"; }

/* ===== Nav ===== */
.nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav--scrolled { border-bottom-color: var(--line); }
.nav__container { max-width: var(--container); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; }
.nav__logo-img { width: 34px; height: 34px; border-radius: 9px; }
.nav__links { display: flex; align-items: center; gap: 26px; list-style: none; font-size: .95rem; }
.nav__links a { color: var(--muted); transition: color .2s; }
.nav__links a:hover { color: var(--ink); }
.nav__links .nav__cta { color: var(--bg); background: var(--ink); padding: 9px 16px; border-radius: 999px; font-weight: 600; }
.nav__links .nav__cta:hover { color: var(--accent-ink); background: var(--accent); }
.nav__hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__hamburger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav__hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.active span:nth-child(2) { opacity: 0; }
.nav__hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Hero ===== */
.hero { padding: clamp(40px, 7vw, 80px) 0 clamp(64px, 9vw, 104px); }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 72px); align-items: center; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); margin-bottom: 22px; }
.hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent); flex: none; }
.hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.06; letter-spacing: -.02em; margin-bottom: 24px; text-wrap: balance; }
.hero__title em { font-style: italic; color: var(--accent); }
.hero__lead { font-size: clamp(1.02rem, .95rem + .35vw, 1.18rem); color: var(--muted); max-width: 34em; margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.hero__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; }
.hero__facts strong { color: var(--ink); font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin-right: 4px; }

.hero__visual { position: relative; padding-bottom: 60px; }
.homescreen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  padding: 28px; border-radius: 34px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  transform: rotate(2.5deg);
}
.homescreen img { width: 100%; aspect-ratio: 1; border-radius: 22%; box-shadow: 0 4px 10px -4px rgba(0,0,0,.25); transition: transform .3s; }
.homescreen img:nth-child(3n+2) { transform: translateY(-4px); }
.homescreen:hover img { transform: none; }
.hero__quote {
  position: absolute; left: -36px; bottom: 0; max-width: 300px;
  padding: 18px 20px; border-radius: 16px;
  background: var(--ink); color: var(--bg);
  transform: rotate(-2deg); box-shadow: var(--shadow);
}
.hero__quote blockquote { font-family: var(--serif); font-size: 1.02rem; line-height: 1.4; margin-bottom: 10px; }
.hero__quote figcaption { font-size: .8rem; opacity: .75; }
.stars { color: var(--star); letter-spacing: 1px; }

/* ===== Sections ===== */
.section { padding: clamp(64px, 10vw, 112px) 0; }
.section-head { max-width: 660px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.section-head--left { text-align: left; margin: 0; }
.kicker { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--warm); margin-bottom: 12px; }
.section-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.12; letter-spacing: -.015em; margin-bottom: 16px; text-wrap: balance; }
.section-lead { color: var(--muted); font-size: clamp(1rem, .95rem + .2vw, 1.1rem); }
.section-lead a { color: var(--accent); font-weight: 600; }

/* ===== Apps ===== */
.apps { border-top: 1px solid var(--line); }
.apps__new { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(14px, 2vw, 22px); }
.app-feature {
  display: flex; gap: 20px; align-items: flex-start;
  padding: clamp(20px, 2.4vw, 28px); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .2s, box-shadow .2s;
}
.app-feature:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); box-shadow: var(--shadow); }
.app-feature__icon { width: 72px; height: 72px; border-radius: 18px; flex: none; }
.app-feature h3 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin-bottom: 6px; }
.app-feature p { color: var(--muted); font-size: .98rem; }
.app-feature__status { display: inline-block; font-size: .74rem !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--warm) !important; margin-bottom: 6px; }
.app-feature__status--live { color: var(--ok) !important; }
.app-feature__links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: .95rem; }

.apps__subhead { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin: 64px 0 18px; }
.apps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); column-gap: clamp(24px, 4vw, 48px); border-top: 1px solid var(--line); }
.app-row { display: flex; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); transition: background .2s; }
.app-row:hover { background: var(--surface); }
.app-row img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.app-row__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.app-row__text strong { font-weight: 600; }
.app-row__text small { color: var(--muted); font-size: .88rem; }
.app-row__meta { color: var(--faint); font-size: .82rem; white-space: nowrap; }
.apps__more { text-align: center; margin-top: 36px; }

/* ===== Story ===== */
.story { background: var(--surface-2); }
.story__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(40px, 6vw, 72px); align-items: center; }
.story__text p:not(.kicker) { color: var(--muted); font-size: 1.06rem; margin-bottom: 16px; max-width: 36em; }
.story__text em { font-style: italic; color: var(--ink); }
.story__actions { margin-top: 24px; }
.story__card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: var(--shadow); }
.story__app { display: flex; gap: 16px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.story__app img { width: 64px; height: 64px; border-radius: 16px; }
.story__app strong { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.story__app span { color: var(--muted); font-size: .9rem; }
.story__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 22px; }
.story__stats dt { color: var(--faint); font-size: .82rem; }
.story__stats dd { font-family: var(--serif); font-size: 2rem; line-height: 1.1; }

/* ===== Reviews ===== */
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(14px, 2vw, 22px); align-items: start; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.review:nth-child(2) { margin-top: 28px; }
.review blockquote { font-family: var(--serif); font-size: 1.12rem; line-height: 1.45; margin: 12px 0 18px; }
.review figcaption strong { display: block; font-weight: 600; }
.review figcaption span { color: var(--faint); font-size: .85rem; }

/* ===== Services ===== */
.services { border-top: 1px solid var(--line); }
.services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 clamp(32px, 5vw, 64px); }
.service { padding: 30px 0; border-top: 1px solid var(--line); }
.service__num { font-family: var(--serif); font-style: italic; color: var(--warm); font-size: 1.05rem; }
.service h3 { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; margin: 6px 0 10px; }
.service p { color: var(--muted); }
.service .service__tools { margin-top: 12px; font-size: .86rem; color: var(--faint); }

.promises { margin-top: clamp(40px, 6vw, 72px); padding: clamp(26px, 4vw, 44px); border-radius: 20px; background: var(--ink); color: var(--bg); }
.promises__title { font-family: var(--serif); font-weight: 400; font-size: 1.8rem; margin-bottom: 26px; }
.promises__steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(20px, 3vw, 32px); }
.promises__steps li { counter-increment: step; font-size: .96rem; opacity: .85; }
.promises__steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--star); margin-bottom: 8px; opacity: 1; }
.promises__steps strong { display: block; opacity: 1; font-size: 1.05rem; margin-bottom: 4px; }

/* ===== Website gallery ===== */
.website-portfolio { background: var(--surface-2); }
.website-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.website-card { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .3s, box-shadow .3s; }
.website-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.website-preview { position: relative; height: 170px; overflow: hidden; padding: 16px; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.website-card:hover .website-preview { transform: scale(1.018); }
.website-preview span { position: relative; z-index: 2; display: block; font-size: .66rem; font-weight: 800; letter-spacing: .13em; }
.website-preview b { position: absolute; z-index: 2; left: 16px; bottom: 18px; font-size: clamp(1.25rem,2vw,2rem); line-height: .9; letter-spacing: -.06em; }
.website-preview i { position: absolute; display: block; font-style: normal; }
.website-card__body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; }
.website-card__body h3 { font-size: .92rem; font-weight: 600; margin-bottom: 2px; }
.website-card__body p { color: var(--faint); font-size: .75rem; }
.website-card__body > span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; color: var(--accent); background: var(--accent-soft); transition: transform .3s; }
.website-card:hover .website-card__body > span { transform: rotate(45deg); }

/* ===== Pricing ===== */
.pricing__region { margin-top: 10px; font-size: .9rem; color: var(--faint); }
.pricing__region span { color: var(--accent); font-weight: 600; }
.pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 26px 18px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.price-card--popular { border: 2px solid var(--ink); }
.price-card__badge { position: absolute; top: -13px; left: 24px; padding: 3px 12px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .76rem; font-weight: 600; }
.price-card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; }
.price-card__desc { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.price-card__price { font-family: var(--serif); font-size: 2.1rem; line-height: 1; margin-bottom: 20px; }
.price-card__price small { font-family: var(--sans); font-size: .8rem; color: var(--faint); }
.price-card ul { list-style: none; flex: 1; margin-bottom: 24px; }
.price-card li { position: relative; padding: 6px 0 6px 22px; font-size: .92rem; color: var(--muted); }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.pricing__note { text-align: center; margin-top: 32px; color: var(--muted); font-size: .95rem; }

/* ===== FAQ ===== */
.faq { border-top: 1px solid var(--line); }
.faq__wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 72px); align-items: start; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 600; font-size: 1.05rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--faint); transition: transform .25s; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { color: var(--muted); padding: 0 0 22px; max-width: 40em; }

/* ===== Booking ===== */
.booking { background: var(--surface-2); }
.booking__quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 28px; }
.quick-contact { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s; min-width: 260px; }
.quick-contact:hover { border-color: var(--ink); }
.quick-contact svg { color: var(--accent); flex: none; }
.quick-contact strong { display: block; }
.quick-contact small { color: var(--muted); font-size: .88rem; }

.booking__wrapper { max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.booking__plan-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; background: var(--accent-soft); font-size: .92rem; }
.booking__plan-clear { display: grid; place-items: center; padding: 4px; border-radius: 6px; color: var(--muted); }
.booking__plan-clear:hover { color: var(--ink); }
.booking__progress { display: flex; align-items: center; padding: 24px 32px 0; }
.booking__progress-step { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: .85rem; font-weight: 500; }
.booking__progress-dot { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); font-size: .8rem; font-weight: 600; transition: all .25s; }
.booking__progress-step.active { color: var(--ink); }
.booking__progress-step.active .booking__progress-dot { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.booking__progress-step.completed .booking__progress-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.booking__progress-line { flex: 1; height: 1.5px; background: var(--line); margin: 0 10px; }
.booking__form { padding: 28px 32px 32px; }
.booking__step { display: none; }
.booking__step.active { display: block; animation: stepIn .3s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.booking__step-title { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin-bottom: 20px; }
.booking__step-note { color: var(--faint); font-size: .88rem; margin: -12px 0 18px; }
.booking__options { display: flex; flex-wrap: wrap; gap: 10px; }
.booking__option input { position: absolute; opacity: 0; pointer-events: none; }
.booking__option-card { display: inline-block; padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--line); cursor: pointer; font-weight: 500; transition: all .2s; }
.booking__option-card:hover { border-color: var(--ink); }
.booking__option input:checked + .booking__option-card { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.booking__option input:focus-visible + .booking__option-card { outline: 2px solid var(--accent); outline-offset: 2px; }
.booking__fields { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--bg); color: var(--ink);
  transition: border-color .2s;
}
.form-group textarea { resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); }
.form-group.invalid input, .form-group.invalid select, .form-group.invalid textarea { border-color: var(--danger); }

.booking__schedule { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.calendar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calendar__month { font-weight: 600; }
.calendar__nav { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--muted); }
.calendar__nav:hover { background: var(--surface-2); color: var(--ink); }
.calendar__weekdays, .calendar__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.calendar__weekdays span { font-size: .74rem; color: var(--faint); padding: 4px 0; }
.calendar__day { aspect-ratio: 1; border-radius: 8px; font-size: .88rem; font-weight: 500; transition: background .15s; }
.calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--empty) { background: var(--surface-2); }
.calendar__day--today { box-shadow: inset 0 0 0 1.5px var(--line); }
.calendar__day--selected, .calendar__day--selected:hover { background: var(--ink) !important; color: var(--bg); }
.calendar__day--disabled { color: var(--line); cursor: not-allowed; }
.timeslots__placeholder { color: var(--faint); font-size: .92rem; padding-top: 44px; text-align: center; }
.timeslots__title { font-size: .88rem; font-weight: 600; margin-bottom: 12px; }
.timeslots__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.timeslot { padding: 10px; border-radius: 10px; border: 1.5px solid var(--line); font-size: .88rem; font-weight: 500; transition: all .15s; }
.timeslot:hover { border-color: var(--ink); }
.timeslot.selected { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.booking__nav { display: flex; justify-content: space-between; gap: 12px; padding: 0 32px 32px; }
.booking__nav #bookingNext { margin-left: auto; }

.booking__confirmation { text-align: center; padding: 12px 0; }
.booking__success-icon { color: var(--ok); display: inline-block; margin-bottom: 12px; }
.booking__success-title { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; margin-bottom: 8px; }
.booking__success-text { color: var(--muted); margin-bottom: 22px; }
.booking__summary { text-align: left; max-width: 440px; margin: 0 auto 20px; border-top: 1px solid var(--line); }
.booking__summary-item { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.booking__summary-item span:first-child { color: var(--faint); }
.booking__summary-item span:last-child { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.booking__success-note { color: var(--muted); font-size: .9rem; }
.booking__success-note a { color: var(--accent); font-weight: 600; }

.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000; max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: .92rem; box-shadow: var(--shadow); animation: stepIn .25s ease; }
.toast--error { background: var(--danger); color: #fff; }
.toast--success { background: var(--ok); color: #fff; }

/* ===== Footer ===== */
.footer { padding: 64px 0 28px; border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer__logo { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; margin-bottom: 12px; }
.footer__logo img { width: 32px; height: 32px; border-radius: 8px; }
.footer__brand p { color: var(--muted); max-width: 28em; font-size: .95rem; }
.footer__links h4 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.footer__links a { display: block; color: var(--muted); padding: 4px 0; font-size: .95rem; overflow-wrap: anywhere; }
.footer__links a:hover { color: var(--ink); }
.footer__bottom { display: flex; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--faint); font-size: .85rem; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__visual { max-width: 460px; margin: 0 auto; width: 100%; }
  .hero__quote { left: -12px; }
  .story__grid, .faq__wrap { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 820px) {
  .nav__hamburger { display: flex; }
  .nav__links {
    position: fixed; inset: 63px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 24px; background: var(--bg); border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: all .25s;
  }
  .nav__links.active { transform: none; opacity: 1; visibility: visible; }
  .nav__links a { display: block; padding: 14px 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav__links li:last-child a { border: 0; margin-top: 14px; text-align: center; }
  .review:nth-child(2) { margin-top: 0; }
  .website-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .booking__schedule, .form-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 560px) {
  .hero__actions .btn { flex: 1 1 100%; }
  .homescreen { gap: 12px; padding: 18px; border-radius: 26px; }
  .hero__quote { position: relative; left: auto; bottom: auto; margin: -28px 12px 0; max-width: none; }
  .hero__visual { padding-bottom: 0; }
  .app-feature { flex-direction: column; padding: 22px; }
  .app-row__meta { display: none; }
  .website-preview { height: 145px; padding: 12px; }
  .website-preview b { left: 12px; bottom: 14px; font-size: 1.12rem; }
  .booking__progress { padding: 20px 16px 0; }
  .booking__progress-step span { display: none; }
  .booking__form { padding: 22px 18px 24px; }
  .booking__nav { padding: 0 18px 24px; }
  .quick-contact { min-width: 0; width: 100%; }
  .footer__bottom { flex-direction: column; }
}

/* ===== Website preview lightbox + concept thumbnails (from the original stylesheet) ===== */
.website-lightbox { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(2,3,14,.82); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.website-lightbox.is-open { opacity: 1; visibility: visible; }
.website-lightbox__panel { width: min(1440px,96vw); height: min(900px,92vh); display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: #0b0c18; box-shadow: 0 40px 100px rgba(0,0,0,.6); transform: translateY(18px) scale(.98); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.website-lightbox.is-open .website-lightbox__panel { transform: none; }
.website-lightbox__bar { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 12px 10px 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.website-lightbox__dots { display: flex; gap: 6px; }.website-lightbox__dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }.website-lightbox__dots i:nth-child(2){background:#febc2e}.website-lightbox__dots i:nth-child(3){background:#28c840}
.website-lightbox__title { min-width: 0; margin-right: auto; color: #d7d9e8; font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.website-lightbox__open,.website-lightbox__close { display: inline-flex; align-items: center; justify-content: center; border: 0; color: white; cursor: pointer; }
.website-lightbox__open { padding: 10px 15px; border-radius: 9px; background: #5b34c9; font-size: .75rem; font-weight: 700; }
.website-lightbox__close { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 1.2rem; }
.website-lightbox iframe { width: 100%; height: 100%; border: 0; background: white; }

.preview-glass { color:#eff4ff; font-family:'Inter',sans-serif; background:radial-gradient(circle at 20% 20%,#674ad8,transparent 35%),radial-gradient(circle at 85% 40%,#087793,transparent 34%),#070b20; }
.preview-glass::after { content:"AI"; position:absolute; right:15%; top:25%; display:grid; place-items:center; width:105px; height:105px; border-radius:30px; background:linear-gradient(145deg,#9b7aff,#5de1ff); font-size:2rem; font-weight:900; box-shadow:0 0 45px #7659dd; }
.preview-glass i { inset:13px; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(255,255,255,.04); backdrop-filter:blur(12px); }
.preview-japan { color:#27231e; background:#eee9df; font-family:serif; }
.preview-japan span { letter-spacing:.35em; }.preview-japan b{font-weight:400;writing-mode:vertical-rl;bottom:22px;font-size:2.7rem}.preview-japan i{right:14%;top:22%;width:125px;height:125px;border:15px solid #29241e;border-right-color:transparent;border-radius:50%}
.preview-brutal { color:#111; background:#d7ff43; border:4px solid #111; font-family:Arial,sans-serif; }
.preview-brutal b{font:900 3.1rem/.76 Arial;text-transform:uppercase}.preview-brutal i{right:5%;top:20%;width:38%;height:58%;border:4px solid;background:#4b45ff;box-shadow:8px 8px 0 #111;color:#ffdf2b;font:900 6rem/1 Arial;text-align:center}
.preview-swiss { color:#111;background:#f1eee7;font-family:Arial,sans-serif }.preview-swiss span{border-bottom:1px solid;padding-bottom:10px}.preview-swiss span::first-letter{color:#ec321e}.preview-swiss b{font-size:3.1rem}.preview-swiss i{right:0;top:0;width:27%;height:100%;padding:24px;background:#ec321e;color:#fff;font-size:3rem;font-weight:800}
.preview-retro { color:#fff0c7;background:linear-gradient(#1a0530,#3e0755 60%,#ff4e83);font-family:monospace }.preview-retro b{text-transform:uppercase;font-style:italic;text-shadow:3px 3px #e7229d,6px 6px #303bd5}.preview-retro i{right:12%;top:28%;width:120px;height:120px;border-radius:50%;background:repeating-linear-gradient(#ffd45e 0 10px,#ff6f64 11px 16px);box-shadow:0 0 35px #ff5c88}
.preview-organic {color:#173a2c;background:#f1eadc;font-family:Georgia,serif}.preview-organic b{font-weight:400}.preview-organic i{right:10%;top:15%;width:42%;height:66%;border-radius:63% 37% 67% 33%/44% 56% 44% 56%;background:linear-gradient(145deg,#a9ca8d,#2e7950)}
.preview-cyber {color:#e6ff00;background:repeating-linear-gradient(0deg,#050509 0 4px,#0d0d12 5px);font-family:monospace}.preview-cyber b{text-transform:uppercase;text-shadow:3px 0 #ff006e,-3px 0 #00efff}.preview-cyber i{right:8%;top:20%;width:38%;height:55%;border:1px solid #00efff;clip-path:polygon(0 18px,18px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);background:linear-gradient(135deg,transparent 35%,#ff006e 36% 47%,transparent 48%),#111}
.preview-deco {color:#e8d7a4;background:radial-gradient(circle at 50% 20%,#1c5145,#0e2725 70%);font-family:Georgia,serif;text-align:center}.preview-deco b{left:0;right:0;font-weight:400}.preview-deco i{left:50%;top:24%;transform:translateX(-50%);font-size:4.5rem}.preview-deco::after{content:"";position:absolute;left:25%;right:25%;bottom:15px;border-bottom:1px solid #bda76c}
.preview-neumorph {color:#30405a;background:#e7edf5}.preview-neumorph span{color:#5668ed}.preview-neumorph b{padding:24px;border-radius:25px;box-shadow:10px 10px 22px #c5cbd2,-10px -10px 22px #fff;color:#5668ed}.preview-neumorph i{right:12%;top:22%;padding:16px;border-radius:16px;box-shadow:7px 7px 16px #c5cbd2,-7px -7px 16px #fff;color:#31a98a;font-weight:700}
.preview-maximal {color:#17110d;background:radial-gradient(circle at 85% 30%,#6947ff 0 18%,transparent 18.5%),#ffbdcf;font-family:Arial,sans-serif}.preview-maximal span{display:inline-block;padding:5px 8px;border:3px solid;background:#f9ff58;transform:rotate(-2deg)}.preview-maximal b{font-weight:900;text-shadow:4px 4px #f9ff58}.preview-maximal i{right:10%;bottom:8%;width:32%;height:50%;border:3px solid;border-radius:48% 48% 5px 5px;background:linear-gradient(45deg,#f9ff58 25%,#111 25% 50%,#6947ff 50% 75%,#ff5c35 75%)}
.preview-y2k{color:#172047;background:radial-gradient(circle at 20% 15%,#ff9de2,transparent 27%),linear-gradient(135deg,#d4f8ff,#c5bbff);font-family:Arial,sans-serif}.preview-y2k span{display:inline-block;padding:6px 12px;border:2px solid #fff;border-radius:999px;background:rgba(255,255,255,.35)}.preview-y2k b{font-style:italic;color:#535bd9;text-shadow:3px 3px #fff,-2px -2px #ff6ac7}.preview-y2k i{right:12%;top:25%;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,#d8ffff 0 9%,#6675cb 10% 15%,transparent 16%),conic-gradient(#75f4ff,#ff86e1,#fff48b,#8e98ff,#75f4ff)}
.preview-bauhaus{color:#111;background:linear-gradient(90deg,#eee9df 0 72%,#f0c928 72%)}.preview-bauhaus b{font-family:Arial;font-weight:900}.preview-bauhaus i{right:12%;top:18%;width:110px;height:110px;border-radius:50%;background:#d93126}.preview-bauhaus::after{content:"";position:absolute;right:24%;bottom:10%;border-left:55px solid transparent;border-right:55px solid transparent;border-bottom:130px solid #0d52a3}
.preview-cinematic{color:#fff;background:radial-gradient(ellipse at 65% 45%,#343434,#080808 65%);font-family:Georgia,serif}.preview-cinematic span{letter-spacing:.28em}.preview-cinematic b{font-weight:400;text-transform:uppercase}.preview-cinematic i{right:7%;top:28%;width:48%;height:32%;background:linear-gradient(165deg,transparent 20%,#555 21% 50%,#111 51%);filter:drop-shadow(0 20px 12px #000)}
.preview-scandi{color:#34372f;background:linear-gradient(#e9e4da 70%,#b8a68c 70%);font-family:Georgia,serif}.preview-scandi b{font-weight:400}.preview-scandi i{right:9%;bottom:13%;width:40%;height:28%;border-radius:7px;background:#687066;box-shadow:0 14px 0 -9px #423d36}
.preview-collage{color:#222;background-color:#eee7d4;background-image:radial-gradient(#b9ad95 1px,transparent 1px);background-size:14px 14px}.preview-collage span{display:inline-block;background:white;padding:5px;transform:rotate(-2deg)}.preview-collage b{font-family:Arial;font-weight:900;background:#f1d64f;padding:5px;transform:rotate(1deg)}.preview-collage i{right:9%;top:20%;width:36%;height:52%;display:grid;place-items:center;background:#3878bd;color:white;font-weight:900;transform:rotate(5deg);border:3px dashed white}
.preview-memphis{color:#292344;background:radial-gradient(circle at 90% 22%,#8ac926 0 9%,transparent 9.5%),#fff7e9}.preview-memphis span{color:#6a4c93}.preview-memphis b{font-family:Arial;font-weight:900}.preview-memphis i{right:10%;top:24%;width:115px;height:115px;border:4px solid;border-radius:50%;display:grid;place-items:center;background:#ff595e;color:white;font-size:2.5rem;font-weight:900;box-shadow:8px 8px #ffca3a}
.preview-corporate{color:#10223f;background:#f3f6fb}.preview-corporate span{color:#175cd3}.preview-corporate b{font-family:Arial}.preview-corporate i{right:9%;bottom:16%;width:38%;height:50%;border-radius:12px;background:linear-gradient(160deg,transparent 46%,#175cd3 47% 50%,transparent 51%),#fff;box-shadow:0 18px 35px rgba(16,34,63,.15)}
.preview-med{color:#143f45;background:radial-gradient(circle at 90% 12%,#e8b949 0 15%,transparent 15.5%),#fbf1da;font-family:Georgia,serif}.preview-med span{color:#d45032;font-size:1rem;text-transform:none}.preview-med b{font-weight:400}.preview-med i{right:9%;top:23%;width:115px;height:115px;border:14px solid white;border-radius:50%;background:repeating-conic-gradient(#d45032 0 12deg,#fbf1da 13deg 25deg)}
.preview-news{color:#171717;background:#f4f0e7;font-family:Georgia,serif;border-top:4px double;border-bottom:4px double}.preview-news span{text-align:center;border-bottom:3px double;padding-bottom:7px;font-size:.8rem;text-transform:none}.preview-news b{font-size:2.1rem;border-bottom:1px solid;padding-bottom:10px}.preview-news i{right:8%;top:25%;background:#b51f24;color:white;padding:6px;font:700 .65rem Arial;transform:rotate(3deg)}
.preview-spatial{color:#f0f3ff;background:radial-gradient(circle at 50% 45%,#24367f,transparent 38%),#03040a;text-align:center}.preview-spatial b{left:0;right:0}.preview-spatial i{left:50%;top:22%;width:125px;height:125px;border:1px solid #8faffe;background:rgba(112,99,255,.18);transform:translateX(-50%) rotate(35deg);box-shadow:inset 0 0 35px #5f84ff55,0 0 40px #6f56ff55}

.portfolio__cta {
  text-align: center;
  margin-top: 48px;