/* Visual redesign only — routes, content and behaviour remain unchanged. */
:root {
  --sea: #101114;
  --sea-mid: #2563eb;
  --sea-light: #eef4ff;
  --sand: #fbfaf8;
  --sand-dark: #f5f4f1;
  --stone: #15171b;
  --muted: #70747c;
  --white: #ffffff;
  --serif: 'Albert Sans', system-ui, sans-serif;
  --sans: 'Albert Sans', system-ui, sans-serif;
  --max: 1160px;
  --pad: clamp(1.25rem, 5vw, 4rem);
}

html { background: #fbfaf8; }
body { background: #fbfaf8; color: #15171b; letter-spacing: -.01em; }

nav:not(.drawer) {
  background: rgba(251,250,248,.88);
  border-bottom: 1px solid rgba(16,17,20,.06);
  padding-top: .85rem;
  padding-bottom: .85rem;
  top: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}
.logo, .drawer-logo, .f-logo { font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; color: #101114; }
.logo span, .drawer-logo span, .f-logo span { color: #2563eb; font-style: normal; font-weight: 800; }
.nav-links { gap: 2rem; }
.nav-links a { color: #64676e; font-size: .78rem; font-weight: 600; }
.nav-btn, .btn-primary, .btn-sea, .pc-btn, .btn-send-php {
  background: #2563eb !important; color: #fff !important; border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(37,99,235,.18); border: 0 !important;
}
.nav-btn:hover, .btn-primary:hover, .btn-sea:hover, .pc-btn:hover, .btn-send-php:hover { background: #1d4ed8 !important; transform: translateY(-1px); }

.hero { width: 100%; max-width: none; min-height: auto; display: block; text-align: center; position: relative; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: radial-gradient(circle at 50% 16%, #eaf2ff 0, rgba(238,244,255,.68) 20%, transparent 55%), #fbfaf8; }
.hero-left { padding: 5.5rem var(--pad) 2.5rem; align-items: center; justify-content: flex-start; max-width: 820px; margin: 0 auto; }
.hero-left::after { display: none; }
.eyebrow, .section-eyebrow, .why-eyebrow, .city-hero-eyebrow { color: #2563eb; font-weight: 800; letter-spacing: .12em; }
.eyebrow { border: 1px solid #dbe7ff; background: rgba(255,255,255,.8); border-radius: 99px; padding: .45rem .8rem; }
.hero h1, .section-title, .city-desc-title, .city-hero h1, .cta-mini h2, .why-city h2 {
  font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; color: #15171b;
}
.hero h1 { max-width: 760px; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .98; margin-top: 1.5rem; }
.hero h1 em, .section-title em, .city-desc-title em, .city-hero h1 em, .cta-mini h2 em { color: #2563eb; font-style: normal; }
.hero-sub { max-width: 620px; color: #70747c; font-size: 1.02rem; }
.btn-row { justify-content: center; }
.btn-primary, .btn-ghost { min-height: 48px; padding: .82rem 1.35rem; border-radius: 8px; font-weight: 700; }
.btn-ghost { background: #fff; border: 1px solid #e6e7ea; color: #25272c; }
.hero-trust {
  width: min(100%, 560px);
  max-width: 560px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr);
  gap: 0;
  box-sizing: border-box;
  border: 0;
  margin-top: 2rem;
}
.hero-trust .trust-item { min-width: 0; padding-inline: .55rem; }
.hero-trust .trust-divider { width: 1px; margin: 0; }
.hero-trust .trust-num { white-space: nowrap; }
.trust-num { color: #2563eb; font-family: var(--sans); font-weight: 800; }
.trust-lbl { color: #9699a0; }
.trust-divider { background: #e4e7ec; }
.hero-right { position: relative; width: min(760px,88vw); min-width: 0; height: 330px; left: auto; bottom: auto; transform: none; margin: 0 auto; padding: 0; overflow: visible; background: transparent; }
.hero-right::before { display: none; content: none; }
.desktop-mockup { width: 100%; border-radius: 14px 14px 0 0; border: 1px solid #e8e8e8; box-shadow: 0 24px 70px rgba(16,17,20,.12); }
.hero-badge { border-radius: 8px; box-shadow: 0 12px 34px rgba(16,17,20,.12); }

.section-wrap, .why-inner { max-width: var(--max); margin-inline: auto; }
.why-section, .types-section, .includes-section, .pricing-section, .faq-section, .cities-section { padding-top: 7rem; padding-bottom: 7rem; }
.why-section, .types-section, .includes-section, .pricing-section, .faq-section, .cities-section,
.qr-section, .process-section, .cta-section { width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
.why-section, .includes-section, .pricing-section, .faq-section { background: #fff; }
.types-section, .cities-section { background: #fbfaf8; }
.why-inner { grid-template-columns: .8fr 1.2fr; }
.why-left h2 { color: #15171b; font-family: var(--sans); font-weight: 800; font-size: clamp(2.2rem,4vw,3.6rem); line-height: 1.04; letter-spacing: -.045em; }
.why-left h2 em { color: #2563eb; font-style: normal; }
.why-left p { color: #70747c; font-weight: 400; font-size: 1rem; line-height: 1.75; max-width: 440px; }
.why-grid { gap: 1rem; background: transparent; }
.section-title { font-size: clamp(2.15rem,4vw,3.5rem); line-height: 1.05; }
.why-card, .type-card, .inc-card, .pc, .aside-card, .stat-card, .faq-item {
  border: 1px solid #e8e9ec; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(16,17,20,.02);
}
.why-card { padding: 2rem; min-height: 230px; display: flex; flex-direction: column; align-items: flex-start; }
.why-icon { width: 44px; height: 44px; display: grid; place-items: center; margin: 0 0 1.4rem; }
.why-icon svg { width: 22px; height: 22px; color: #2563eb; stroke: currentColor; }
.why-title { color: #15171b; font-family: var(--sans); font-size: 1.1rem; font-weight: 800; line-height: 1.25; margin-bottom: .65rem; }
.why-desc { color: #70747c; font-size: .9rem; font-weight: 400; line-height: 1.7; }
.why-card, .type-card, .inc-card, .pc { backdrop-filter: none; }
.why-card:hover, .type-card:hover, .inc-card:hover { border-color: #cfdcff; box-shadow: 0 18px 40px rgba(16,17,20,.06); transform: translateY(-3px); }
.why-icon, .type-icon, .inc-num { color: #2563eb; background: #eef4ff; border-radius: 7px; }
.type-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0 0 1rem;
  background: transparent;
  border-radius: 0;
}
.type-icon svg {
  width: 30px;
  height: 30px;
  display: block;
  color: #2563eb;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.type-link { color: #2563eb; font-weight: 700; }
.inc-icon { color: #2563eb; }
.inc-num { display: none; }
.inc-card { padding-top: 2rem; }

.qr-section, .process-section, .why-city { background: #111317; color: #fff; }
.qr-section .section-title, .process-section .section-title, .why-city h2 { color: #fff; }
.qr-section .section-title em, .process-section .section-title em, .why-city h2 em { color: #7aa7ff; }
.qr-card-example { border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.qr-dot, .attr-dot { background: #3979ee; }

.pricing-grid { align-items: stretch; }
.pc { border-radius: 14px; }
.pc.featured { background: #111317; border-color: #111317; box-shadow: 0 22px 45px rgba(16,17,20,.22); transform: translateY(-8px); }
.featured-tag, .bonus-tag, .inc-badge-free { background: #2563eb; color: #fff; border-radius: 99px; }
.pc-price { font-family: var(--sans); letter-spacing: -.04em; }

.city-hero { background: radial-gradient(circle at 70% 20%, #eaf2ff 0, transparent 36%), #fbfaf8; }
.city-hero h1 { max-width: 900px; }
.city-stats { background: #111317; }
.city-info { max-width: var(--max); margin: 0 auto; }
.cta-mini { background: #f4f6fa; }
.cta-mini-input { border-radius: 8px; }

footer { background: #111317; }
.f-copy, .f-links a { color: rgba(255,255,255,.5); }
.back-top { background: #2563eb; border-radius: 8px; }

/* FAQ — clean accordion cards */
.faq-section { position: relative; overflow: hidden; background: linear-gradient(180deg,#fff 0%,#f7f9fc 100%); }
.faq-section::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -260px; top: -260px; background: radial-gradient(circle,rgba(37,99,235,.09),transparent 68%); pointer-events: none; }
.faq-head { position: relative; margin-bottom: 3rem; }
.faq-head .section-title { max-width: 680px; margin-inline: auto; }
.faq-accordion { position: relative; max-width: 860px; display: grid; gap: .8rem; }
.faq-item, .faq-item:first-child { overflow: hidden; border: 1px solid #e3e7ee; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 5px 18px rgba(16,17,20,.035); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.faq-item:hover { border-color: #cdd9f4; box-shadow: 0 12px 28px rgba(16,17,20,.06); transform: translateY(-1px); }
.faq-btn { width: 100%; min-height: 72px; padding: 1.25rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border: 0; background: transparent; color: #17191d; font-family: var(--sans); font-size: 1rem; font-weight: 750; line-height: 1.35; text-align: left; cursor: pointer; }
.faq-btn:hover, .faq-btn[aria-expanded='true'] { color: #1d4ed8; }
.faq-btn[aria-expanded='true'] { background: #f7faff; }
.faq-arrow { position: relative; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: #edf3ff; color: #2563eb; font-size: 0; transform: none; transition: background .2s ease, transform .25s ease; }
.faq-arrow::before, .faq-arrow::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%,-50%); }
.faq-arrow::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform .25s ease; }
.faq-btn[aria-expanded='true'] .faq-arrow { transform: none; background: #2563eb; color: #fff; }
.faq-btn[aria-expanded='true'] .faq-arrow::after { transform: translate(-50%,-50%) rotate(0deg); }
.faq-body { max-height: 0; overflow: hidden; opacity: 0; background: #fff; transition: max-height .3s ease, opacity .22s ease; }
.faq-body.open { max-height: 420px; opacity: 1; }
.faq-body > p { padding: .1rem 4.8rem 1.5rem 1.4rem; margin: 0; color: #686d76; font-size: .95rem; font-weight: 400; line-height: 1.75; }

/* Contact form — higher contrast */
.cta-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 86% 12%, rgba(37,99,235,.3), transparent 34%), #11141b;
  color: #fff;
}
.cta-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg,rgba(255,255,255,.025),transparent 45%); }
.cta-inner { position: relative; max-width: 900px; }
.cta-section h2 { color: #fff; font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; }
.cta-section h2 em { color: #77a4ff; font-style: normal; }
.cta-section > .cta-inner > p { color: #c8ced8; font-weight: 400; }
.form-label { color: #e1e6ee; font-weight: 700; letter-spacing: .06em; }
.cta-input, .cta-select, .cta-textarea {
  background: #fff;
  color: #17191e;
  border: 1px solid #fff;
  border-radius: 9px;
  box-shadow: 0 1px 0 rgba(255,255,255,.1), 0 12px 30px rgba(0,0,0,.12);
}
.cta-input::placeholder, .cta-textarea::placeholder { color: #818792; opacity: 1; }
.cta-input:focus, .cta-select:focus, .cta-textarea:focus { border-color: #78a6ff; box-shadow: 0 0 0 3px rgba(78,132,239,.28), 0 12px 30px rgba(0,0,0,.14); }
.cta-select option { background: #fff; color: #17191e; }
.contact-channels { gap: .9rem; }
.channel-opt { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); color: #dbe1ea; border-radius: 9px; }
.channel-opt:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.38); }
.channel-opt.checked { background: #eaf1ff; border-color: #8db1ff; color: #15264b; }
.btn-send { background: #fff; color: #11141b; border-radius: 9px; font-weight: 800; box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.btn-send:hover { background: #eaf1ff; color: #163c8c; }
.direct-contact { gap: .8rem; }
.direct-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 9px; font-weight: 700; }
.direct-btn:hover { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.55); }
.direct-btn-wa { background: rgba(33,190,91,.16); border-color: rgba(91,224,139,.48); }
.direct-btn-wa:hover { background: rgba(33,190,91,.25); border-color: rgba(91,224,139,.7); }
.form-divider { color: #b8c0cc; }
.form-divider::before, .form-divider::after { background: rgba(255,255,255,.2); }
.btn-send-wa { background: #25d366; color: #082e16; }
.btn-send-wa:hover { background: #48df7e; color: #062910; }

/* Desktop hero — website preview left, copy right */
@media (min-width: 1024px) {
  .hero {
    min-height: 760px;
    display: grid;
    grid-template-columns: minmax(480px, 1.05fr) minmax(480px, .95fr);
    grid-template-areas: 'copy visual';
    align-items: center;
    gap: clamp(2rem, 5vw, 6rem);
    padding: clamp(4rem, 7vw, 7rem) max(var(--pad), calc((100vw - 1320px) / 2));
    overflow: hidden;
  }
  .hero-left {
    grid-area: copy;
    width: 100%;
    max-width: 650px;
    margin: 0;
    padding: 0;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
  }
  .hero h1 {
    max-width: 650px;
    margin-top: 1.25rem;
    font-size: clamp(3.6rem, 5.1vw, 5.5rem);
  }
  .hero-sub { max-width: 590px; }
  .hero-trust { width: min(100%, 560px); margin-left: 0; margin-right: 0; }
  .btn-row { justify-content: flex-start; }
  .hero-right {
    grid-area: visual;
    width: 100%;
    max-width: 690px;
    height: auto;
    min-height: 470px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .desktop-mockup { width: 100%; border-radius: 16px; }
  .hb-left { top: 1.5rem; left: -1rem; }
  .hb-right { right: -1rem; bottom: 2.5rem; }
}

@media (max-width: 860px) {
  nav:not(.drawer) { top: 0; width: 100%; margin: 0; border-radius: 0; }
  .hero { min-height: auto; }
  .hero-left { padding-top: 4.5rem; }
  .hero h1 { font-size: clamp(2.75rem,13vw,4.6rem); }
  .hero-trust {
    width: min(100%, 560px);
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr);
    gap: 0;
    box-sizing: border-box;
  }
  .hero-trust .trust-item { min-width: 0; padding: 0 .45rem; }
  .hero-trust .trust-divider { width: 1px; margin: 0; }
  .hero-trust .trust-num { white-space: nowrap; }
  .hero-right { height: 250px; width: 94vw; }
  .why-section, .types-section, .includes-section, .pricing-section, .faq-section, .cities-section { padding-top: 5rem; padding-bottom: 5rem; }
  .why-inner { grid-template-columns: 1fr; }
  .why-left { text-align: center; }
  .why-left p { margin-inline: auto; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .pc.featured { transform: none; }
}

@media (max-width: 560px) {
  .hero { min-height: auto; }
  .hero-left { padding: 3.5rem 1.1rem 1rem; }
  .hero h1 { font-size: 2.85rem; }
  .hero-sub { font-size: .94rem; }
  .hero-trust { width: 100%; gap: 0; padding-inline: .35rem; }
  .hero-trust .trust-item { padding-inline: .25rem; }
  .trust-num { font-size: 1.45rem; }
  .trust-lbl { font-size: .62rem; }
  .hero-right { height: 235px; margin-top: 1rem; }
  .section-title { font-size: 2.1rem; }
  .city-info { padding-inline: 1.15rem; }
  .why-grid { grid-template-columns: 1fr; gap: .75rem; }
  .why-card { min-height: auto; padding: 1.4rem; }
  .faq-btn { min-height: 64px; padding: 1rem; font-size: .94rem; gap: 1rem; }
  .faq-body > p { padding: 0 3.7rem 1.25rem 1rem; font-size: .9rem; }
}

/* Suptilno pojavljivanje sadržaja */
.hero .eyebrow { animation: hero-enter .55s ease both; }
.hero h1 { animation: hero-enter .65s .08s ease both; }
.hero-sub { animation: hero-enter .65s .16s ease both; }
.hero-trust { animation: hero-enter .65s .24s ease both; }
.hero .btn-row { animation: hero-enter .65s .32s ease both; }

.motion-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.motion-reveal.visible { opacity: 1; transform: none; }
.motion-reveal:nth-child(2) { transition-delay: .07s; }
.motion-reveal:nth-child(3) { transition-delay: .14s; }
.motion-reveal:nth-child(4) { transition-delay: .21s; }

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow,.hero h1,.hero-sub,.hero-trust,.hero .btn-row { animation: none !important; }
  .motion-reveal,.fade-up,.fade-left,.stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Service pages */
.svc-hero {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(5rem,8vw,8rem) var(--pad);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: radial-gradient(circle at 82% 16%,rgba(62,117,228,.3),transparent 34%),#11141b;
}
.svc-hero::before { color: rgba(255,255,255,.025); font-family: var(--sans); font-weight: 800; }
.svc-hero-inner { max-width: 1240px; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: clamp(3rem,7vw,7rem); }
.svc-eyebrow { color: #90b4ff; font-weight: 800; letter-spacing: .12em; }
.svc-eyebrow::before { background: #5f91f4; }
.svc-hero h1 { max-width: 760px; color: #fff; font-family: var(--sans); font-size: clamp(3rem,5vw,5.2rem); font-weight: 800; line-height: .99; letter-spacing: -.05em; }
.svc-hero h1 em { color: #77a4ff; font-style: normal; }
.svc-hero-sub { max-width: 700px; color: #c5ccd7; font-size: 1.02rem; font-weight: 400; line-height: 1.75; }
.svc-btns { gap: .8rem; }
.btn-white, .btn-outline { border-radius: 8px; min-height: 48px; padding: .82rem 1.35rem; font-weight: 750; }
.btn-white { background: #2563eb; color: #fff; box-shadow: 0 10px 28px rgba(37,99,235,.26); }
.btn-white:hover { background: #1d4ed8; }
.btn-outline { border-color: rgba(255,255,255,.3); color: #eef2f8; background: rgba(255,255,255,.04); }
.btn-outline:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.52); }
.svc-stats { gap: .85rem; }
.svc-stat { padding: 1.35rem 1.5rem; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(255,255,255,.065); backdrop-filter: blur(8px); }
.svc-stat-num { color: #fff; font-family: var(--sans); font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; }
.svc-stat-lbl { color: #aeb7c5; font-size: .78rem; font-weight: 400; line-height: 1.45; }

.svc-hero + .why-section { width: 100%; max-width: none; padding: 7rem var(--pad); background: #fff; }
.svc-hero + .why-section .why-inner { max-width: 1160px; margin: 0 auto; grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr); gap: clamp(3rem,8vw,7rem); }
.svc-hero + .why-section .why-left { text-align: left; }
.svc-hero + .why-section .why-left h2 { color: #15171b; font-family: var(--sans); font-size: clamp(2.3rem,4vw,3.7rem); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; }
.svc-hero + .why-section .why-left h2 em { color: #2563eb; font-style: normal; }
.svc-hero + .why-section .why-left p { color: #6c717a; font-weight: 400; }
.svc-hero + .why-section .why-points { gap: .8rem; }
.svc-hero + .why-section .why-point { padding: 1.4rem; border: 1px solid #e6e9ee; border-radius: 11px; background: #fbfcfe; grid-template-columns: auto 1fr; transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.svc-hero + .why-section .why-point:hover { transform: translateX(4px); border-color: #cbd9f7; box-shadow: 0 12px 28px rgba(16,17,20,.05); }
.svc-hero + .why-section .why-point-num { width: 38px; height: 38px; min-width: 38px; display: grid; place-items: center; padding: 0; border-radius: 8px; background: #eaf1ff; color: #2563eb; font-family: var(--sans); font-size: .8rem; font-weight: 800; }
.svc-hero + .why-section .why-point-title { color: #17191d; font-family: var(--sans); font-size: 1.03rem; font-weight: 800; }
.svc-hero + .why-section .why-point-desc { color: #6c717a; font-weight: 400; }

.svc-hero ~ .includes-section { width: 100%; padding: 7rem var(--pad); background: #f5f7fa; }
.svc-hero ~ .includes-section .includes-inner,
.svc-hero ~ .pricing-section .pricing-inner { max-width: 1160px; }
.svc-hero ~ .sec-head { text-align: center; }
.svc-hero ~ .sec-eyebrow { color: #2563eb; font-weight: 800; }
.svc-hero ~ .sec-eyebrow::before,.svc-hero ~ .sec-eyebrow::after { background: #2563eb; }
.svc-hero ~ .sec-title { color: #15171b; font-family: var(--sans); font-size: clamp(2.3rem,4vw,3.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; }
.svc-hero ~ .sec-title em { color: #2563eb; font-style: normal; }
.svc-hero ~ .includes-section .inc-grid { gap: 1rem; }
.svc-hero ~ .includes-section .inc-card { min-height: 245px; padding: 1.8rem; border: 1px solid #e3e7ed; border-radius: 12px; background: #fff !important; box-shadow: 0 3px 12px rgba(16,17,20,.025); }
.svc-hero ~ .includes-section .inc-card:hover { border-color: #c8d8fa; box-shadow: 0 18px 38px rgba(16,17,20,.065); }
.svc-hero ~ .includes-section .inc-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: #eaf1ff; }
.svc-hero ~ .includes-section .inc-icon svg { color: #2563eb; }
.svc-hero ~ .includes-section .inc-title { color: #17191d; font-family: var(--sans); font-weight: 800; }
.svc-hero ~ .includes-section .inc-desc { color: #6c717a; font-weight: 400; }

.svc-hero ~ .pricing-section { width: 100%; padding: 7rem var(--pad); background: #fff; }
.svc-hero ~ .pricing-section .pricing-grid { align-items: stretch; gap: 1rem; }
.svc-hero ~ .pricing-section .pc { display: flex; flex-direction: column; padding: 2.25rem 1.8rem; border: 1px solid #e3e7ed; border-radius: 13px; background: #fff; box-shadow: 0 8px 28px rgba(16,17,20,.045); }
.svc-hero ~ .pricing-section .pc.featured { background: #11141b; border-color: #11141b; transform: translateY(-8px); box-shadow: 0 22px 45px rgba(16,17,20,.2); }
.svc-hero ~ .pricing-section .pc-price { color: #15171b; font-family: var(--sans); font-weight: 800; letter-spacing: -.04em; }
.svc-hero ~ .pricing-section .pc.featured .pc-price { color: #fff; }
.svc-hero ~ .pricing-section .pc-features { flex: 1; }
.svc-hero ~ .pricing-section .pc-features li { color: #656b75; font-weight: 400; }
.svc-hero ~ .pricing-section .pc.featured .pc-features li { color: #c6cdd7; }
.svc-hero ~ .pricing-section .hosting-note { border-radius: 11px; border-color: #e3e7ed; background: #f7f9fc; }
.svc-hero ~ .pricing-section .hosting-item { color: #555b65; font-weight: 400; }

.svc-hero ~ .cta-section { padding: 7rem var(--pad); background: radial-gradient(circle at 82% 15%,rgba(37,99,235,.32),transparent 35%),#11141b; }
.svc-hero ~ .cta-section .cta-inner { max-width: 720px; }
.svc-hero ~ .cta-section h2 { color: #fff; font-family: var(--sans); font-weight: 800; letter-spacing: -.045em; }
.svc-hero ~ .cta-section h2 em { color: #77a4ff; font-style: normal; }
.svc-hero ~ .cta-section p { color: #c5ccd7; font-weight: 400; }
.svc-hero ~ .cta-section .cta-mini-input { background: #fff; color: #17191d; border: 1px solid #fff; border-radius: 8px; }
.svc-hero ~ .cta-section .cta-mini-input::placeholder { color: #7a818c; }
.svc-hero ~ .cta-section .back-link { color: #b7c0cd; }

@media (max-width: 860px) {
  .svc-hero { padding: 4.5rem 1.15rem; text-align: center; }
  .svc-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .svc-hero h1 { font-size: clamp(2.7rem,12vw,4rem); }
  .svc-btns { justify-content: center; }
  .svc-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; }
  .svc-stat { padding: 1rem .55rem; }
  .svc-stat-num { font-size: 1.2rem; }
  .svc-stat-lbl { font-size: .64rem; }
  .svc-hero + .why-section { padding: 5rem 1.15rem; }
  .svc-hero + .why-section .why-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .svc-hero + .why-section .why-left { text-align: center; }
  .svc-hero ~ .includes-section,.svc-hero ~ .pricing-section,.svc-hero ~ .cta-section { padding: 5rem 1.15rem; }
  .svc-hero ~ .pricing-section .pc.featured { transform: none; }
}

@media (max-width: 560px) {
  .svc-stats { grid-template-columns: 1fr; }
  .svc-stat { text-align: left; padding: 1rem 1.2rem; }
  .svc-hero ~ .includes-section .inc-card { min-height: auto; }
}

/* City pages */
.city-hero {
  width: 100%;
  max-width: none;
  min-height: 640px;
  margin: 0;
  padding: clamp(5rem,8vw,8rem) var(--pad);
  grid-template-columns: minmax(0,1.1fr) minmax(330px,.9fr);
  gap: clamp(3rem,7vw,7rem);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: radial-gradient(circle at 82% 16%,rgba(62,117,228,.3),transparent 34%),#11141b;
}
.city-hero::before { color: rgba(255,255,255,.025); font-family: var(--sans); font-weight: 800; }
.city-hero > * { position: relative; z-index: 1; }
.city-hero-eyebrow { color: #90b4ff; font-weight: 800; letter-spacing: .12em; }
.city-hero-eyebrow::before { background: #5f91f4; }
.city-hero h1 { max-width: 760px; color: #fff; font-family: var(--sans); font-size: clamp(3rem,5vw,5.2rem); font-weight: 800; line-height: .99; letter-spacing: -.05em; }
.city-hero h1 em { color: #77a4ff; font-style: normal; }
.city-hero-sub { max-width: 680px; color: #c5ccd7; font-size: 1.02rem; font-weight: 400; line-height: 1.75; }
.hero-btn-row { gap: .8rem; }
.city-hero .btn-white,.city-hero .btn-outline { min-height: 48px; padding: .82rem 1.35rem; border-radius: 8px; font-weight: 750; }
.city-hero .btn-white { background: #2563eb; color: #fff; box-shadow: 0 10px 28px rgba(37,99,235,.26); }
.city-hero .btn-white:hover { background: #1d4ed8; }
.city-hero .btn-outline { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.3); color: #eef2f8; }
.city-stats { gap: .85rem; background: transparent; }
.city-stats .stat-card { padding: 1.3rem 1.45rem; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(255,255,255,.065); backdrop-filter: blur(8px); }
.city-stats .stat-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: rgba(111,157,248,.14); color: #8fb4ff; }
.city-stats .stat-val { color: #fff; font-family: var(--sans); font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; }
.city-stats .stat-lbl { color: #aeb7c5; font-weight: 400; }

.city-info { width: 100%; max-width: 1160px; margin: 0 auto; padding: 7rem var(--pad); grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: clamp(3rem,8vw,7rem); }
.city-desc-title { color: #15171b; font-family: var(--sans); font-size: clamp(2.3rem,4vw,3.7rem); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; }
.city-desc-title em { color: #2563eb; font-style: normal; }
.city-desc { color: #656b75; font-size: 1rem; font-weight: 400; line-height: 1.8; }
.attractions-title { color: #2563eb; font-weight: 800; }
.attractions-list { gap: .55rem; }
.attractions-list li { padding: .75rem .9rem; border: 1px solid #e5e8ed; border-radius: 8px; background: #fafbfc; color: #333840; font-weight: 500; }
.attr-dot { width: 7px; height: 7px; background: #2563eb; }
.city-aside { gap: 1rem; }
.city-aside .aside-card { padding: 1.6rem; border: 1px solid #e3e7ed; border-radius: 11px; background: #fff; box-shadow: 0 8px 24px rgba(16,17,20,.04); }
.city-aside .aside-title { color: #17191d; font-family: var(--sans); font-size: 1rem; font-weight: 800; }
.city-aside .aside-text { color: #656b75; font-size: .88rem; font-weight: 400; }
.season-badge,.beach-tag { border-color: #cfddfa; background: #edf3ff; color: #1d4ed8; font-weight: 700; }
.aside-qr-card { position: relative; overflow: hidden; border-color: #c7d8fa !important; background: linear-gradient(145deg,#f7faff,#edf3ff) !important; }
.aside-qr-badge { background: #2563eb; color: #fff; border-radius: 99px; }

.why-city { width: 100%; max-width: none; padding: 7rem var(--pad); background: radial-gradient(circle at 16% 20%,rgba(37,99,235,.24),transparent 32%),#11141b; }
.why-city-inner { max-width: 860px; }
.why-eyebrow { color: #8fb4ff; font-weight: 800; }
.why-eyebrow::before,.why-eyebrow::after { background: #5f91f4; }
.why-city h2 { color: #fff; font-family: var(--sans); font-size: clamp(2.4rem,4.5vw,4rem); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; }
.why-city h2 em { color: #77a4ff; font-style: normal; }
.why-city p { color: #c5ccd7; font-size: 1rem; font-weight: 400; }
.why-stats-row { gap: .8rem; background: transparent; }
.why-stat { padding: 1.4rem .9rem; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.06); }
.why-stat-num { color: #fff; font-family: var(--sans); font-weight: 800; }
.why-stat-lbl { color: #aeb7c5; font-weight: 400; }
.why-city .btn-white { background: #2563eb; color: #fff; border-radius: 8px; font-weight: 750; }

.cta-mini { width: 100%; max-width: none; padding: 6rem var(--pad); background: #f4f6fa; }
.cta-mini-inner { max-width: 720px; }
.cta-mini h2 { color: #15171b; font-family: var(--sans); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; }
.cta-mini h2 em { color: #2563eb; font-style: normal; }
.cta-mini p { color: #656b75; font-weight: 400; }
.cta-mini .btn-sea { display: inline-block; background: #2563eb !important; color: #fff !important; border-radius: 8px; font-weight: 750; }
.cta-mini .back-link { display: block; width: max-content; margin: 1.5rem auto 0; color: #656b75; }

@media (max-width: 860px) {
  .city-hero { min-height: auto; padding: 4.5rem 1.15rem; grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .city-hero h1 { font-size: clamp(2.7rem,12vw,4rem); }
  .hero-btn-row { justify-content: center; }
  .city-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; }
  .city-stats .stat-card { display: block; text-align: center; padding: 1rem .55rem; }
  .city-stats .stat-icon { margin: 0 auto .6rem; }
  .city-stats .stat-val { font-size: 1.15rem; }
  .city-stats .stat-lbl { font-size: .64rem; }
  .city-info { padding: 5rem 1.15rem; grid-template-columns: 1fr; gap: 2.5rem; }
  .why-city,.cta-mini { padding: 5rem 1.15rem; }
}

@media (max-width: 560px) {
  .city-stats { grid-template-columns: 1fr; }
  .city-stats .stat-card { display: flex; text-align: left; padding: 1rem 1.2rem; }
  .city-stats .stat-icon { margin: 0; }
  .why-stats-row { grid-template-columns: 1fr; }
}

/* Mobile side menu */
.drawer-overlay {
  inset: 0 !important;
  background: rgba(10,13,20,.68) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  transition: opacity .25s ease, visibility .25s ease !important;
}
.drawer {
  width: min(390px,92vw) !important;
  height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden auto !important;
  border-left: 1px solid #e4e8ef !important;
  background:
    radial-gradient(circle at 90% 5%,rgba(37,99,235,.1),transparent 32%),
    #fff !important;
  color: #15171b !important;
  box-shadow: -24px 0 70px rgba(0,0,0,.35) !important;
  transition: right .34s cubic-bezier(.22,1,.36,1) !important;
}
.drawer-head {
  min-height: 78px !important;
  margin: 0 !important;
  padding: 1rem 1.2rem 1rem 1.4rem !important;
  border-bottom: 1px solid #e7eaf0 !important;
}
.drawer-logo {
  color: #15171b !important;
  font-family: var(--sans) !important;
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
}
.drawer-logo span { color: #2563eb !important; font-style: normal !important; font-weight: 800 !important; }
.drawer-close {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid #e1e5ec !important;
  border-radius: 10px !important;
  background: #f6f8fb !important;
  color: #30343b !important;
  transition: background .2s ease, transform .2s ease !important;
}
.drawer-close:hover { background: #edf3ff !important; color: #2563eb !important; transform: rotate(4deg); }
.drawer-close svg { width: 22px !important; height: 22px !important; stroke-width: 1.8 !important; }
.drawer-links {
  gap: .45rem !important;
  margin: 0 !important;
  padding: 1.35rem !important;
}
.drawer-links li { border: 0 !important; }
.drawer-links a:not(.drawer-cta) {
  position: relative;
  display: flex !important;
  align-items: center;
  min-height: 54px;
  padding: .8rem 1rem !important;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #3f4650 !important;
  font-family: var(--sans) !important;
  font-size: 1rem !important;
  font-weight: 650 !important;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease !important;
}
.drawer-links a:not(.drawer-cta)::after {
  content: '\2192';
  margin-left: auto;
  color: #6f9df8;
  font-size: 1.15rem;
  transition: transform .2s ease;
}
.drawer-links a:not(.drawer-cta):hover {
  border-color: #d6e2fa;
  background: #f3f7ff;
  color: #1748a8 !important;
  transform: translateX(2px);
}
.drawer-links a:not(.drawer-cta):hover::after { transform: translateX(3px); }
.drawer-links .drawer-cta {
  min-height: 52px !important;
  margin-top: .9rem !important;
  padding: .95rem 1rem !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(37,99,235,.3) !important;
  font-family: var(--sans) !important;
  font-size: .94rem !important;
  font-weight: 750 !important;
}
.drawer-links .drawer-cta:hover { background: #1d4ed8 !important; }
.hamburger.wave-menu {
  width: 44px !important;
  height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid #e2e6ed !important;
  border-radius: 10px !important;
  background: #f7f9fc !important;
  color: #15171b !important;
}
.hamburger.wave-menu:hover { border-color: #c8d7f5 !important; background: #edf3ff !important; color: #2563eb !important; }
.hamburger.wave-menu svg,.hamburger.wave-menu span { display: none !important; }
.hamburger.wave-menu::before {
  content: '';
  width: 21px;
  height: 14px;
  display: block;
  background: linear-gradient(to bottom,currentColor 0 2px,transparent 2px 6px,currentColor 6px 8px,transparent 8px 12px,currentColor 12px 14px);
  border-radius: 1px;
}

/* Static full-page capture used in the homepage hero showcase */
.showcase-viewport {
  --showcase-height: clamp(330px,43vw,455px);
  position: relative;
  height: var(--showcase-height);
  overflow: hidden;
  background: #0c1117;
}
.showcase-page {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
  animation: showcase-scroll 24s cubic-bezier(.55,.05,.45,.95) infinite alternate;
}
.desktop-mockup:hover .showcase-page { animation-play-state: paused; }
@keyframes showcase-scroll {
  0%,8% { transform: translateY(0); }
  92%,100% { transform: translateY(calc(-100% + var(--showcase-height))); }
}

@media (max-width: 420px) {
  .drawer { width: 100% !important; }
  .drawer-links { padding: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer,.drawer-overlay,.drawer-links a,.drawer-close { transition: none !important; }
  .showcase-page { animation: none !important; }
}

/* Classic mobile navigation */
.drawer-head { min-height: 68px !important; padding: .75rem 1.1rem .75rem 1.35rem !important; }
.drawer-links { gap: 0 !important; padding: .55rem 1.1rem 1.25rem !important; }
.drawer-links li { border-bottom: 1px solid #e9ecf1 !important; }
.drawer-links a:not(.drawer-cta) {
  min-height: 50px !important;
  padding: .8rem .25rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #17191d !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  transform: none !important;
}
.drawer-links a:not(.drawer-cta)::after { display: none !important; content: none !important; }
.drawer-links a:not(.drawer-cta):hover { color: #2563eb !important; }
.drawer-links .drawer-cta {
  margin-top: .85rem !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Homepage process alignment */
.process-section { padding: 6.5rem var(--pad) !important; }
.process-section .section-wrap { max-width: 1160px !important; }
.process-head { margin-bottom: 3.25rem !important; }
.process-head .section-title { color: #fff !important; font-family: var(--sans) !important; font-size: clamp(2.4rem,4vw,3.8rem) !important; font-weight: 800 !important; line-height: 1.03 !important; letter-spacing: -.045em !important; }
.process-head .section-title em { color: #77a4ff !important; font-style: normal !important; }
.process-steps { gap: .85rem !important; }
.process-steps::before { display: none !important; }
.proc-step {
  min-height: 210px;
  padding: 1.5rem !important;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
  background: rgba(255,255,255,.055);
  text-align: left !important;
}
.proc-num { width: 38px !important; height: 38px !important; margin: 0 0 1.2rem !important; border: 0 !important; background: rgba(119,164,255,.15) !important; color: #8fb4ff !important; }
.proc-title { color: #fff !important; font-family: var(--sans) !important; font-size: 1rem !important; font-weight: 800 !important; }
.proc-desc { color: #aeb7c5 !important; font-size: .82rem !important; font-weight: 400 !important; line-height: 1.65 !important; }

/* Discreet crawlable city links in the footer */
footer { flex-wrap: wrap !important; row-gap: 1rem !important; }
.footer-locations { width: 100%; border-top: 1px solid rgba(255,255,255,.08); padding-top: .75rem; text-align: center; }
.footer-locations summary { width: max-content; margin: 0 auto; color: rgba(255,255,255,.34); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; list-style: none; }
.footer-locations summary::-webkit-details-marker { display: none; }
.footer-locations summary::after { content: ' +'; color: rgba(255,255,255,.22); }
.footer-locations[open] summary::after { content: ' −'; }
.footer-city-links { max-width: 900px; margin: .85rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1rem; }
.footer-city-links a { color: rgba(255,255,255,.38); font-size: .66rem; text-decoration: none; }
.footer-city-links a:hover { color: #8fb4ff; }

@media (max-width: 860px) {
  .process-section { padding: 5rem 1.15rem !important; }
  .proc-step { min-height: 0; }
}

/* Refined contact form */
.cta-form {
  gap: 1.15rem !important;
  margin-top: 1.35rem;
  padding: clamp(1.35rem,3vw,2.1rem);
  border: 1px solid #e2e7ef;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 24px 65px rgba(0,0,0,.22);
}
.cta-form .form-row { gap: 1.1rem !important; }
.cta-form .form-field { gap: .5rem !important; }
.cta-form .form-label {
  color: #3f4650 !important;
  font-size: .69rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}
.cta-form .cta-input,.cta-form .cta-select,.cta-form .cta-textarea {
  min-height: 52px;
  padding: .9rem 1rem !important;
  border: 1px solid #dce1e9 !important;
  border-radius: 9px !important;
  background: #f7f9fc !important;
  color: #17191e !important;
  box-shadow: none !important;
  font-size: .93rem !important;
}
.cta-form .cta-textarea { min-height: 125px !important; line-height: 1.6; }
.cta-form .cta-input:hover,.cta-form .cta-select:hover,.cta-form .cta-textarea:hover { border-color: #c4cede !important; }
.cta-form .cta-input:focus,.cta-form .cta-select:focus,.cta-form .cta-textarea:focus {
  border-color: #5d8ff1 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.12) !important;
}
.cta-form .submit-row { display: grid !important; grid-template-columns: 1fr !important; gap: .7rem !important; margin-top: .15rem; width: 100% !important; }
.cta-form .btn-send {
  position: static !important;
  width: 100% !important;
  min-height: 52px;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: .88rem !important;
  font-weight: 800 !important;
}
.cta-form .btn-send-php { background: #2563eb !important; color: #fff !important; }
.cta-form .btn-send-php:hover { background: #1d4ed8 !important; }
.cta-form .btn-send-wa { background: #25d366 !important; color: #092d17 !important; }
.cta-form .form-error { border-radius: 8px; background: #fff0f0; color: #a51d2d; }
.cta-form .form-success { border-radius: 8px; background: #ebfbf0; color: #176c35; }

footer .f-logo { color: #fff !important; font-family: var(--sans) !important; font-weight: 800 !important; letter-spacing: -.04em !important; }
footer .f-logo span { color: #6f9df8 !important; }

@media (max-width: 620px) {
  .cta-form { padding: 1.15rem; }
  .cta-form .form-row { grid-template-columns: 1fr !important; }
}

/* Contact form — compact quote request */
.cta-inner { max-width: 980px !important; }
.cta-form {
  max-width: 920px;
  margin: 1.35rem auto 0;
  padding: clamp(1.4rem,3.5vw,2.4rem) !important;
  gap: 1.3rem !important;
  border-color: rgba(255,255,255,.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.26) !important;
}
.form-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #e8ebf0;
}
.form-kicker { color: #2563eb; font-size: .65rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.form-heading h3 { margin: .25rem 0 0; color: #17191d; font-size: clamp(1.35rem,2.5vw,1.8rem); line-height: 1.15; letter-spacing: -.035em; }
.form-time { flex: 0 0 auto; padding: .45rem .7rem; border-radius: 99px; background: #eef4ff; color: #315da9; font-size: .72rem; font-weight: 750; }
.cta-form .form-label span { color: #9096a0; font-size: .62rem; font-weight: 650; letter-spacing: .02em; text-transform: none; }
.cta-form .form-help { margin-top: -.2rem; color: #858b95; font-size: .7rem; line-height: 1.4; }
.cta-form .cta-input,.cta-form .cta-select { min-height: 56px; }
.cta-form .cta-textarea { min-height: 108px !important; resize: vertical; }
.cta-form .submit-row { grid-template-columns: minmax(0,1.45fr) minmax(0,.75fr) !important; gap: .8rem !important; }
.cta-form .btn-send-php { box-shadow: 0 12px 28px rgba(37,99,235,.22) !important; }
.cta-form .btn-send-wa { border: 1px solid #b9e8c8 !important; background: #effbf3 !important; color: #176c35 !important; }
.cta-form .btn-send-wa:hover { background: #e2f8e9 !important; }
.form-privacy { margin: -.35rem 0 0; color: #858b95; font-size: .73rem; text-align: center; }

@media (max-width: 700px) {
  .form-heading { display: block; }
  .form-time { display: inline-block; margin-top: .7rem; }
  .cta-form .submit-row { grid-template-columns: 1fr !important; }
}

/* Mobile layout stability and navigation alignment */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; }
body { position: relative; }
.drawer {
  justify-content: flex-start !important;
  align-items: stretch !important;
  overscroll-behavior: contain;
}
.drawer-head { width: 100% !important; flex: 0 0 auto; }
.drawer-links { width: 100% !important; flex: 0 0 auto; }
.drawer.open .drawer-links li { animation: drawer-link-in .34s ease both; }
.drawer.open .drawer-links li:nth-child(2) { animation-delay: .035s; }
.drawer.open .drawer-links li:nth-child(3) { animation-delay: .07s; }
.drawer.open .drawer-links li:nth-child(4) { animation-delay: .105s; }
.drawer.open .drawer-links li:nth-child(5) { animation-delay: .14s; }
.drawer.open .drawer-links li:nth-child(6) { animation-delay: .175s; }
.drawer.open .drawer-links li:nth-child(7) { animation-delay: .21s; }
@keyframes drawer-link-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .hero,.why-section,.types-section,.includes-section,.real-work-section,
  .qr-section,.pricing-section,.process-section,.faq-section,.cta-section,footer {
    max-width: 100%;
    overflow-x: clip;
  }
  .section-wrap,.why-inner,.cta-inner { width: 100%; min-width: 0; }
  .real-work-grid {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    padding-right: 0;
    overscroll-behavior-inline: contain;
  }
  .types-grid,.includes-grid,.proof-strip {
    width: 100%;
    max-width: 100%;
    overscroll-behavior-inline: contain;
  }
  .motion-reveal {
    transform: translateY(18px) scale(.99);
    transition-duration: .58s;
  }
  .motion-reveal.visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer.open .drawer-links li { animation: none !important; }
}