:root {
  --bg: #07111f;
  --bg-soft: #0d1a2c;
  --surface: #101f34;
  --surface-2: #152842;
  --text: #f8fbff;
  --muted: #aab9cc;
  --line: rgba(255,255,255,.1);
  --primary: #7c5cff;
  --primary-2: #4fd1c5;
  --white: #fff;
  --shadow: 0 24px 70px rgba(0,0,0,.28);
  --radius: 22px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 10%, rgba(124,92,255,.14), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(79,209,197,.10), transparent 28%);
  z-index: -1;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.container { width: min(1140px, calc(100% - 40px)); margin: 0 auto; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--white); color: #111; padding: 10px 14px; z-index: 100; }
.skip-link:focus { left: 8px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(7,17,31,.78);
  border-bottom: 1px solid var(--line);
}
.nav-wrap { min-height: 84px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 56px; height: 56px; display: block; flex: 0 0 auto; }
.brand-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1; }
.brand-copy strong { color: var(--text); font-size: 16px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.brand-copy small { margin-top: 5px; color: #8ce7df; font-size: 9.25px; font-weight: 800; letter-spacing: .095em; line-height: 1.15; white-space: nowrap; }
.main-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.main-nav > a:not(.nav-cta) { color: var(--muted); }
.main-nav > a:hover { color: var(--white); }
.nav-cta { background: var(--white); color: #08111f; padding: 10px 16px; border-radius: 999px; }
.nav-cta:hover { color: #08111f !important; background: #eef3f8; }
.lang-btn { border: 1px solid var(--line); background: transparent; color: var(--white); padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.menu-btn { display: none; width: 42px; height: 42px; border: 0; background: transparent; padding: 9px; }
.menu-btn span { display: block; height: 2px; background: var(--white); margin: 5px 0; border-radius: 2px; }

.hero { min-height: 720px; display: grid; align-items: center; padding: 90px 0 75px; }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 72px; }
.eyebrow { color: #8ce7df; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 800; margin: 0 0 16px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(42px, 6vw, 72px); line-height: 1.04; letter-spacing: -.055em; margin-bottom: 24px; }
h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.1; letter-spacing: -.045em; margin-bottom: 18px; }
h3 { letter-spacing: -.025em; }
.hero-text { color: var(--muted); font-size: 18px; max-width: 640px; }
.hero-actions { display: flex; gap: 13px; margin: 32px 0 28px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 14px; border: 1px solid transparent; font-weight: 700; transition: .2s ease; cursor: pointer; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--primary), #9a7bff); color: white; box-shadow: 0 14px 34px rgba(124,92,255,.28); }
.btn-secondary { border-color: var(--line); background: rgba(255,255,255,.035); color: var(--white); }
.trust-row { display: flex; gap: 22px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }

.hero-visual { position: relative; min-height: 470px; display: grid; place-items: center; }
.browser-card { width: min(100%, 540px); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; background: #f8fafc; box-shadow: var(--shadow); transform: perspective(1000px) rotateY(-6deg) rotateX(3deg); }
.browser-top { height: 42px; background: #e9eef5; display: flex; align-items: center; gap: 7px; padding: 0 15px; }
.browser-top i { width: 9px; height: 9px; border-radius: 50%; background: #b6c0ce; }
.browser-body { min-height: 350px; padding: 28px; background: linear-gradient(145deg, #fafcff, #eef2f8); }
.mini-nav { display: flex; justify-content: flex-end; gap: 9px; margin-bottom: 44px; }
.mini-nav span { width: 42px; height: 6px; border-radius: 999px; background: #c7d0dd; }
.mini-hero { display: grid; grid-template-columns: 1fr .82fr; gap: 28px; align-items: center; }
.mini-hero b { display: block; height: 13px; background: #152842; border-radius: 6px; margin: 8px 0; }
.mini-hero b:nth-child(2) { width: 88%; }
.mini-hero b:nth-child(3) { width: 68%; }
.mini-hero em { display: block; width: 80px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), #9a7bff); margin-top: 22px; }
.mini-image { aspect-ratio: 1; border-radius: 20px; background: linear-gradient(145deg, #7c5cff, #4fd1c5); box-shadow: inset 0 0 0 12px rgba(255,255,255,.18); }
.mini-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 34px; }
.mini-cards span { height: 58px; border-radius: 12px; background: white; box-shadow: 0 8px 25px rgba(30,50,80,.08); }
.floating-badge { position: absolute; background: rgba(16,31,52,.94); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 14px; padding: 12px 15px; font-size: 13px; font-weight: 700; }
.badge-one { left: 0; bottom: 58px; }
.badge-two { right: -8px; top: 64px; }

.section { padding: 105px 0; }
.section-heading { max-width: 700px; margin-bottom: 44px; }
.section-heading > p:last-child { color: var(--muted); }
.card-grid { display: grid; gap: 20px; }
.card-grid.three { grid-template-columns: repeat(3, 1fr); }
.service-card, .price-card { background: linear-gradient(180deg, rgba(21,40,66,.83), rgba(13,26,44,.83)); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.service-card .icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(124,92,255,.16); color: #b7a8ff; font-size: 25px; margin-bottom: 22px; }
.service-card h3 { font-size: 22px; margin-bottom: 10px; }
.service-card p { color: var(--muted); margin-bottom: 0; }

.work-section { background: rgba(255,255,255,.025); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.projects { display: grid; grid-template-columns: repeat(12,1fr); gap: 24px; }
.project-card { grid-column: span 6; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.project-card:nth-child(3) { grid-column: 4 / span 6; }
.project-preview { min-height: 330px; padding: 32px; position: relative; overflow: hidden; }
.project-preview::after { content:""; position:absolute; width:210px; height:210px; border-radius:50%; right:-45px; bottom:-50px; background:rgba(255,255,255,.15); }
.detailing { background: linear-gradient(135deg, #16181c, #455161); }
.barber { background: linear-gradient(135deg, #5d3f2e, #c39363); }
.restaurant { background: linear-gradient(135deg, #5f2135, #e78869); }
.preview-nav { width: 65%; height: 10px; border-radius: 10px; background: rgba(255,255,255,.3); margin-bottom: 72px; }
.preview-title { width: 75%; height: 28px; border-radius: 8px; background: white; margin-bottom: 14px; }
.preview-sub { width: 56%; height: 11px; border-radius: 8px; background: rgba(255,255,255,.55); }
.preview-btn { width: 100px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.96); margin-top: 24px; }
.project-info { display: flex; justify-content: space-between; align-items: end; padding: 24px 26px 26px; }
.project-info h3 { font-size: 22px; margin-bottom: 0; }
.project-info > span { color: var(--muted); font-size: 13px; }
.project-type { color: #8ce7df; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; margin-bottom: 7px; }

.process-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.steps { display: grid; gap: 16px; }
.step { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.step > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(124,92,255,.16); color: #baaaff; font-weight: 800; }
.step h3 { margin-bottom: 5px; }
.step p { margin-bottom: 0; color: var(--muted); }

.pricing-section { background: rgba(255,255,255,.02); }
.price-card { position: relative; }
.price-card.featured { border-color: rgba(124,92,255,.65); transform: translateY(-10px); }
.popular { position: absolute; top: -13px; right: 22px; background: var(--primary); padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.package { color: #8ce7df; text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 800; }
.price-card h3 { font-size: 28px; margin-bottom: 10px; }
.price-card h3 span { font-size: 42px; }
.price-card > p:not(.package) { color: var(--muted); min-height: 52px; }
.price-card ul { list-style: none; padding: 0; margin: 24px 0; }
.price-card li { padding: 9px 0; color: #dce6f3; border-bottom: 1px solid var(--line); }
.price-card li::before { content: "✓"; color: #8ce7df; margin-right: 9px; }
.price-card .btn { width: 100%; }

.pricing-notes { margin-top: 30px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.pricing-notes p { margin: 0; padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; color: #dce6f3; background: rgba(255,255,255,.035); font-size: 13px; }

.contact-section { border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; }
.contact-copy > p { color: var(--muted); }
.contact-copy .eyebrow { color: #8ce7df; }
.contact-details { display: grid; gap: 8px; margin: 28px 0; font-weight: 700; }
.contact-details a:hover { color: #8ce7df; }
.edit-note { background: rgba(255,193,7,.1); border: 1px solid rgba(255,193,7,.25); padding: 12px 14px; border-radius: 12px; font-size: 13px; color: #ffe7a3 !important; }
.contact-form { background: var(--surface); border: 1px solid var(--line); padding: 30px; border-radius: 22px; box-shadow: var(--shadow); }
.contact-form label { display: grid; gap: 7px; margin-bottom: 17px; font-size: 13px; font-weight: 700; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #0b1728; color: white; padding: 13px 14px; outline: none; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,92,255,.15); }
.contact-form .btn { width: 100%; border: 0; }
.form-note { color: var(--muted); font-size: 11px; margin: 12px 0 0; }

.site-footer { border-top: 1px solid var(--line); padding: 28px 0; }
.footer-wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.footer-wrap p { margin: 0; color: var(--muted); font-size: 13px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hero-grid, .process-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 70px; }
  .hero-grid { gap: 35px; }
  .hero-visual { min-height: 420px; }
  .card-grid.three { grid-template-columns: 1fr; }
  .projects { display: grid; grid-template-columns: 1fr; }
  .project-card, .project-card:nth-child(3) { grid-column: auto; }
  .price-card.featured { transform: none; }
}

@media (max-width: 720px) {
  .container { width: min(100% - 28px, 1140px); }
  .menu-btn { display: block; }
  .main-nav {
    position: absolute; left: 14px; right: 14px; top: 70px; padding: 18px;
    background: #0d1a2c; border: 1px solid var(--line); border-radius: 17px;
    display: none; flex-direction: column; align-items: stretch; gap: 12px;
    box-shadow: var(--shadow);
  }
  .main-nav.open { display: flex; }
  .main-nav a, .lang-btn { text-align: center; }
  h1 { font-size: 43px; }
  .hero { min-height: auto; padding: 65px 0 55px; }
  .hero-visual { min-height: 340px; }
  .browser-card { transform: none; }
  .badge-one { left: 8px; bottom: 5px; }
  .badge-two { right: 2px; top: 22px; }
  .section { padding: 78px 0; }
  .project-preview { min-height: 250px; }
  .footer-wrap { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}


.honey-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.contact-form button:disabled { opacity: .65; cursor: wait; transform: none; }
.form-status { min-height: 24px; margin: 12px 0 0; font-size: 13px; font-weight: 700; }
.form-status.sending { color: var(--muted); }
.form-status.success { color: #8ce7df; }
.form-status.error { color: #ff9b9b; }
@media (max-width: 520px) {
  .brand { gap: 8px; }
  .brand-mark { width: 46px; height: 46px; }
  .brand-copy strong { font-size: 13px; }
  .brand-copy small { margin-top: 4px; font-size: 6.8px; letter-spacing: .06em; }
}


/* Clickable portfolio project */
.project-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.project-link:hover {
  transform: translateY(-6px);
  border-color: rgba(140, 231, 223, .42);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .28);
}
.project-link .project-preview {
  transition: filter .25s ease;
}
.project-link:hover .project-preview {
  filter: brightness(1.08);
}
.live-demo-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(7, 17, 29, .82);
  border: 1px solid rgba(140, 231, 223, .35);
  backdrop-filter: blur(10px);
  color: #a8fff6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.project-arrow {
  font-size: 22px !important;
  color: #8ce7df !important;
  transition: transform .25s ease;
}
.project-link:hover .project-arrow {
  transform: translate(3px, -3px);
}


/* Better auto detailing portfolio preview */
.project-preview.detailing {
  background:
    radial-gradient(circle at 82% 24%, rgba(255,255,255,.10), transparent 18%),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.12), transparent 20%),
    linear-gradient(135deg, #111418, #2f3945 54%, #202833 100%);
}
.project-preview.detailing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.08) 48%, transparent 72%);
  opacity: .55;
  pointer-events: none;
}
.project-preview.detailing::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  right: -45px;
  bottom: -58px;
  background: rgba(255,255,255,.10);
}
.detailing-preview-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 26px;
}
.detailing-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  color: #dbe8f7;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10, 14, 20, .35);
  backdrop-filter: blur(6px);
}
.detailing-preview-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 12px;
  align-items: end;
  min-height: 200px;
}
.detailing-copy-lines {
  align-self: start;
  padding-top: 8px;
}
.detailing-copy-lines .line,
.detailing-copy-lines .mini-cta {
  display: block;
  border-radius: 999px;
}
.detailing-copy-lines .line.long { width: 86%; height: 14px; background: rgba(255,255,255,.92); margin-bottom: 14px; }
.detailing-copy-lines .line.mid { width: 68%; height: 9px; background: rgba(255,255,255,.68); margin-bottom: 11px; }
.detailing-copy-lines .line.short { width: 48%; height: 9px; background: rgba(255,255,255,.55); margin-bottom: 24px; }
.detailing-copy-lines .mini-cta { width: 88px; height: 32px; background: rgba(255,255,255,.94); }
.detailing-car-scene {
  position: relative;
  min-height: 170px;
}
.detailing-shine {
  position: absolute;
  width: 68%;
  height: 30%;
  left: 17%;
  bottom: 8%;
  background: rgba(255,255,255,.14);
  filter: blur(18px);
  border-radius: 50%;
}
.detailing-car-body {
  position: absolute;
  width: 94%;
  height: 30%;
  left: 3%;
  bottom: 24%;
  background: linear-gradient(180deg, #9ca3ad 0%, #59626d 28%, #21272f 64%, #10141a 100%);
  border-radius: 45% 55% 14% 18% / 54% 60% 20% 25%;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.40), 0 18px 30px rgba(0,0,0,.34);
}
.detailing-car-body::before {
  content: "";
  position: absolute;
  width: 46%;
  height: 78%;
  left: 26%;
  top: -48%;
  background: linear-gradient(145deg, #727b85, #293039 68%);
  clip-path: polygon(10% 100%, 30% 8%, 78% 8%, 100% 100%);
  border-radius: 22px;
}
.detailing-car-body::after {
  content: "";
  position: absolute;
  left: 14%;
  top: 12%;
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
}
.detailing-wheel {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  bottom: 15%;
  background: radial-gradient(circle, #20242b 0 18%, #8d96a2 19% 25%, #111 26% 55%, #050505 56%);
  box-shadow: 0 0 0 3px #07090b;
}
.wheel-left { left: 17%; }
.wheel-right { right: 14%; }
@media (max-width: 720px) {
  .detailing-preview-hero { min-height: 160px; }
  .detailing-wheel { width: 38px; height: 38px; }
  .detailing-copy-lines .line.long { height: 12px; }
  .detailing-copy-lines .mini-cta { width: 76px; height: 26px; }
}



/* Premium package selector */
.package-field {
  position: relative;
  margin-bottom: 17px;
}
.package-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
}
.package-select-btn {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
    #0b1728;
  color: #fff;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.package-select-btn:hover,
.package-select-btn[aria-expanded="true"] {
  border-color: rgba(124,92,255,.58);
  box-shadow: 0 0 0 3px rgba(124,92,255,.11);
  background:
    linear-gradient(180deg, rgba(124,92,255,.055), rgba(255,255,255,.01)),
    #0b1728;
}
.package-select-btn > span {
  display: grid;
  gap: 4px;
}
.package-select-btn strong {
  font-size: 14px;
  color: #f7f9fc;
}
.package-select-btn small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.package-chevron {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-right: 2px solid #9fa9b8;
  border-bottom: 2px solid #9fa9b8;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.package-select-btn[aria-expanded="true"] .package-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}

.package-menu {
  position: absolute;
  z-index: 80;
  left: 0;
  right: 0;
  top: calc(100% - 6px);
  padding: 10px;
  border: 1px solid rgba(124,92,255,.28);
  border-radius: 18px;
  background: rgba(10, 22, 38, .97);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px) scale(.985);
  transform-origin: top;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.package-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(8px) scale(1);
}
.package-option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 15px 16px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #fff;
  text-align: left;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.package-option + .package-option {
  margin-top: 6px;
}
.package-option:hover,
.package-option:focus-visible {
  outline: none;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.075);
  transform: translateX(2px);
}
.package-option.selected {
  background: linear-gradient(90deg, rgba(124,92,255,.14), rgba(79,209,197,.06));
  border-color: rgba(124,92,255,.28);
}
.package-option-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.package-option-copy strong {
  font-size: 13px;
  color: #f8faff;
}
.package-option-copy small {
  max-width: 330px;
  color: #94a0b1;
  font-size: 10.5px;
  line-height: 1.4;
  font-weight: 500;
}
.package-option-price {
  flex: 0 0 auto;
  min-width: 64px;
  text-align: right;
  color: #aef5ed;
  font-size: 15px;
  font-weight: 800;
}
.package-option-price.text-price {
  font-size: 11px;
}
.featured-option {
  position: relative;
  background: rgba(124,92,255,.045);
}
.recommended {
  width: max-content;
  margin-bottom: 3px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(124,92,255,.16);
  color: #c9beff;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .12em;
}
.help-option {
  border-top: 1px solid rgba(255,255,255,.045);
}
@media (max-width: 560px) {
  .package-menu {
    position: static;
    display: none;
    margin-top: 8px;
    transform: none;
  }
  .package-menu.open {
    display: block;
    transform: none;
  }
  .package-option {
    padding: 14px 13px;
  }
  .package-option-copy small {
    max-width: 230px;
  }
}


/* Keep the project message box clean and fixed-size */
.contact-form textarea {
  resize: none;
}


/* Stronger hero visual for website-selling first impression */
.sales-visual {
  min-height: 560px;
  align-items: start;
}
.showcase-main {
  position: relative;
  width: 100%;
  max-width: 570px;
  margin: 0 auto;
}
.showcase-browser {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #f8fbff;
}
.browser-detailing {
  transform: perspective(1100px) rotateY(-7deg) rotateX(3deg);
}
.showcase-top {
  height: 42px;
  background: #e9eef5;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
}
.showcase-top i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b6c0ce;
}
.showcase-body {
  padding: 24px;
  background: linear-gradient(145deg, #fafcff, #eef2f8);
}
.showcase-body.compact {
  padding: 16px;
}
.showcase-label {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  margin-bottom: 18px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #17253a;
  background: rgba(23,37,58,.08);
}
.showcase-content.two-col {
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  gap: 22px;
  align-items: center;
}
.showcase-copy b {
  display: block;
  height: 12px;
  background: #16263e;
  border-radius: 8px;
  margin: 9px 0;
}
.showcase-copy b:nth-child(1) { width: 94%; }
.showcase-copy b:nth-child(2) { width: 82%; }
.showcase-copy b:nth-child(3) { width: 60%; }
.showcase-copy em {
  display: block;
  width: 112px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), #9a7bff);
  margin-top: 22px;
}
.showcase-car-card {
  position: relative;
  min-height: 190px;
  border-radius: 20px;
  background: linear-gradient(145deg, #111821, #313a46 48%, #0e1319);
  overflow: hidden;
}
.car-glow-mini {
  position: absolute;
  width: 66%;
  height: 22%;
  left: 17%;
  bottom: 14%;
  background: rgba(255,255,255,.18);
  filter: blur(15px);
  border-radius: 50%;
}
.car-mini {
  position: absolute;
  width: 84%;
  height: 22%;
  left: 8%;
  bottom: 26%;
  background: linear-gradient(180deg, #9aa2ab 0%, #525c67 32%, #151b22 82%);
  border-radius: 45% 57% 14% 18% / 55% 64% 24% 28%;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 12px 22px rgba(0,0,0,.28);
}
.car-mini::before {
  content: "";
  position: absolute;
  width: 46%;
  height: 74%;
  left: 26%;
  top: -44%;
  background: linear-gradient(145deg, #6d7680, #28303a 68%);
  clip-path: polygon(10% 100%, 30% 8%, 78% 8%, 100% 100%);
  border-radius: 18px;
}
.car-mini::after {
  content: "";
  position: absolute;
  left: 14%;
  top: 12%;
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
.wheel-mini {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  bottom: 18%;
  background: radial-gradient(circle, #20242b 0 18%, #8992a0 19% 25%, #111 26% 55%, #050505 56%);
  box-shadow: 0 0 0 3px #07090b;
}
.wheel-mini.left { left: 19%; }
.wheel-mini.right { right: 16%; }
.showcase-cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-top: 22px;
}
.showcase-cards span {
  height: 54px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 8px 25px rgba(30,50,80,.08);
}
.mini-showcase-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}
.mini-browser {
  transform: none;
}
.browser-barber .showcase-body {
  background: linear-gradient(145deg, #fff8f2, #f1dbc7);
}
.browser-restaurant .showcase-body {
  background: linear-gradient(145deg, #fff4f2, #f4d2cc);
}
.compact-lines b {
  display: block;
  height: 9px;
  border-radius: 8px;
  margin: 7px 0;
}
.compact-lines b:nth-child(1) { width: 78%; }
.compact-lines b:nth-child(2) { width: 58%; }
.compact-lines em {
  display: block;
  width: 80px;
  height: 24px;
  border-radius: 9px;
  margin-top: 16px;
}
.compact-lines.warm b { background: #5a3828; }
.compact-lines.warm em { background: linear-gradient(135deg, #8d5f43, #c39363); }
.compact-lines.rose b { background: #63243b; }
.compact-lines.rose em { background: linear-gradient(135deg, #b3496f, #e78869); }
.sales-badge {
  position: absolute;
  z-index: 3;
  background: rgba(16,31,52,.94);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 14px;
  padding: 12px 15px;
  font-size: 13px;
  font-weight: 700;
}
.badge-a { left: -8px; top: 22px; }
.badge-b { right: -6px; top: 44px; }
.badge-c { left: 28px; bottom: 22px; }
@media (max-width: 900px) {
  .sales-visual { min-height: 520px; }
}
@media (max-width: 720px) {
  .sales-visual { min-height: 440px; }
  .browser-detailing { transform: none; }
  .showcase-content.two-col { gap: 16px; }
  .showcase-car-card { min-height: 150px; }
  .sales-badge { font-size: 12px; padding: 10px 12px; }
  .badge-a { left: 4px; top: 8px; }
  .badge-b { right: 0; top: 18px; }
  .badge-c { left: 8px; bottom: -4px; }
}
@media (max-width: 520px) {
  .showcase-main { max-width: 100%; }
  .showcase-body { padding: 18px; }
  .showcase-content.two-col { grid-template-columns: 1fr; }
  .showcase-car-card { min-height: 132px; }
  .showcase-cards span { height: 44px; }
  .mini-showcase-row { gap: 10px; }
  .compact-lines em { width: 62px; height: 20px; }
  .sales-badge { font-size: 10px; }
  .badge-a { left: 0; top: -8px; }
  .badge-b { right: 0; top: 4px; }
  .badge-c { left: 2px; bottom: -10px; }
}


/* Business type selector */
.business-field {
  position: relative;
  margin-bottom: 17px;
}
.business-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
}
.business-select-btn {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
    #0b1728;
  color: #fff;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.business-select-btn:hover,
.business-select-btn[aria-expanded="true"] {
  border-color: rgba(124,92,255,.58);
  box-shadow: 0 0 0 3px rgba(124,92,255,.11);
  background:
    linear-gradient(180deg, rgba(124,92,255,.055), rgba(255,255,255,.01)),
    #0b1728;
}
.business-select-btn > span {
  display: grid;
  gap: 4px;
}
.business-select-btn strong {
  font-size: 14px;
  color: #f7f9fc;
}
.business-select-btn small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.business-chevron {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-right: 2px solid #9fa9b8;
  border-bottom: 2px solid #9fa9b8;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.business-select-btn[aria-expanded="true"] .business-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}
.business-menu {
  position: absolute;
  z-index: 81;
  left: 0;
  right: 0;
  top: calc(100% - 6px);
  padding: 10px;
  border: 1px solid rgba(124,92,255,.28);
  border-radius: 18px;
  background: rgba(10, 22, 38, .97);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px) scale(.985);
  transform-origin: top;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.business-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(8px) scale(1);
}
.business-option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 15px 16px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #fff;
  text-align: left;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.business-option + .business-option { margin-top: 6px; }
.business-option:hover,
.business-option:focus-visible {
  outline: none;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.075);
  transform: translateX(2px);
}
.business-option.selected {
  background: linear-gradient(90deg, rgba(124,92,255,.14), rgba(79,209,197,.06));
  border-color: rgba(124,92,255,.28);
}
.business-option-copy { display:grid; gap:3px; min-width:0; }
.business-option-copy strong { font-size: 13px; color:#f8faff; }
.business-option-copy small {
  max-width: 360px;
  color: #94a0b1;
  font-size: 10.5px;
  line-height: 1.4;
  font-weight: 500;
}
.featured-business-option { background: rgba(124,92,255,.045); }
@media (max-width: 560px) {
  .business-menu {
    position: static;
    display: none;
    margin-top: 8px;
    transform: none;
  }
  .business-menu.open { display: block; transform: none; }
  .business-option { padding: 14px 13px; }
  .business-option-copy small { max-width: 230px; }
}


/* Modern Barbershop portfolio preview */
.barber-preview-top {
  position: relative;
  z-index: 2;
  margin-bottom: 26px;
}
.barber-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  color: #fff0df;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(35, 20, 10, .28);
  backdrop-filter: blur(6px);
}
.barber-preview-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 14px;
  align-items: end;
  min-height: 200px;
}
.barber-copy-lines {
  align-self: start;
  padding-top: 8px;
}
.barber-copy-lines .line,
.barber-copy-lines .mini-cta {
  display: block;
  border-radius: 999px;
}
.barber-copy-lines .line.long { width: 88%; height: 14px; background: rgba(255,255,255,.94); margin-bottom: 14px; }
.barber-copy-lines .line.mid { width: 64%; height: 9px; background: rgba(255,255,255,.72); margin-bottom: 11px; }
.barber-copy-lines .line.short { width: 50%; height: 9px; background: rgba(255,255,255,.56); margin-bottom: 24px; }
.barber-copy-lines .mini-cta { width: 92px; height: 32px; background: rgba(255,255,255,.96); }

@media (max-width: 720px) {
  .barber-preview-hero { min-height: 160px; }
  .barber-copy-lines .line.long { height: 12px; }
  .barber-copy-lines .mini-cta { width: 78px; height: 26px; }
  }


.barber-scissors-scene {
  position: relative;
  min-height: 176px;
}
.scissors-glow {
  position: absolute;
  width: 74%;
  height: 42%;
  left: 14%;
  bottom: 12%;
  background: rgba(255,245,232,.18);
  filter: blur(18px);
  border-radius: 50%;
}
.scissors-shadow {
  position: absolute;
  width: 56%;
  height: 14%;
  left: 22%;
  bottom: 16%;
  background: rgba(48, 20, 8, .24);
  border-radius: 50%;
  filter: blur(4px);
}
.scissor-blade {
  position: absolute;
  width: 108px;
  height: 16px;
  top: 34%;
  left: 50%;
  transform-origin: 8px 50%;
  border-radius: 999px 16px 16px 999px;
  background: linear-gradient(90deg, #f3e6d6 0%, #d8b391 18%, #fff6ea 48%, #bf8b64 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 18px rgba(70,35,14,.18);
}
.scissor-blade::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #c58e64;
}
.blade-left {
  transform: translateX(-10%) rotate(-28deg);
}
.blade-right {
  transform: translateX(-10%) rotate(28deg);
}
.scissor-handle {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 7px solid #f1dbc5;
  border-radius: 50%;
  background: transparent;
  top: 52%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 12px rgba(60,28,12,.14);
}
.handle-left {
  left: 29%;
}
.handle-right {
  left: 47%;
}
.scissor-joint {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 47.5%;
  top: 44.5%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8ef 0 20%, #c9956a 21% 68%, #8a5b3b 69% 100%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}
.scissor-tail {
  position: absolute;
  width: 50px;
  height: 8px;
  top: 55.5%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f0dcc4 0%, #bb8660 100%);
}
.tail-left {
  left: 34%;
  transform: rotate(36deg);
  transform-origin: left center;
}
.tail-right {
  left: 46%;
  transform: rotate(-36deg);
  transform-origin: left center;
}
@media (max-width: 720px) {
  .barber-preview-hero { min-height: 160px; }
  .barber-copy-lines .line.long { height: 12px; }
  .barber-copy-lines .mini-cta { width: 78px; height: 26px; }
  .scissor-blade { width: 90px; height: 14px; }
  .scissor-handle { width: 34px; height: 34px; border-width: 6px; }
  .handle-left { left: 30%; }
  .handle-right { left: 46%; }
}


/* Clean professional barber scissors visual */
.barber-scissors-scene{
  position:relative;
  min-height:176px;
  display:grid;
  place-items:center;
}
.barber-scissors-svg{
  position:relative;
  z-index:3;
  width:94%;
  max-width:250px;
  height:auto;
  overflow:visible;
  transform:translateY(-2px);
}
.scissors-glow{
  position:absolute;
  z-index:1;
  width:76%;
  height:46%;
  left:12%;
  bottom:18%;
  border-radius:50%;
  background:rgba(255,245,232,.22);
  filter:blur(22px);
}
.scissors-shadow{
  position:absolute;
  z-index:1;
  width:58%;
  height:12%;
  left:21%;
  bottom:14%;
  border-radius:50%;
  background:rgba(53,25,10,.26);
  filter:blur(7px);
}

/* Hide the old CSS-built scissors pieces if cached markup is ever present */
.scissor-blade,
.scissor-handle,
.scissor-joint,
.scissor-tail{
  display:none !important;
}

@media (max-width:720px){
  .barber-scissors-scene{min-height:150px}
  .barber-scissors-svg{width:90%;max-width:210px}
}


/* cleaner scissors v3 */
.barber-scissors-scene{position:relative;min-height:176px;display:grid;place-items:center;overflow:visible}
.barber-scissors-svg.clean{position:relative;z-index:3;width:96%;max-width:260px;height:auto;overflow:visible;transform:translateY(2px)}
.scissors-glow{position:absolute;z-index:1;width:72%;height:44%;left:14%;bottom:18%;border-radius:50%;background:rgba(255,245,232,.20);filter:blur(20px)}
.scissors-shadow{position:absolute;z-index:1;width:56%;height:12%;left:22%;bottom:16%;border-radius:50%;background:rgba(58,29,12,.24);filter:blur(8px)}
@media (max-width:720px){.barber-scissors-svg.clean{max-width:220px;width:90%}.barber-scissors-scene{min-height:150px}}


/* ===== BARBERSHOP CARD SCISSORS V4 - COMPLETE REPLACEMENT ===== */
.barber-scissors-v4{
  position:relative !important;
  min-height:176px !important;
  display:grid !important;
  place-items:center !important;
  overflow:visible !important;
}
.barber-scissors-v4 .barber-scissors-halo{
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,244,230,.28) 0%, rgba(255,244,230,.12) 46%, rgba(255,244,230,0) 72%);
  filter:blur(3px);
  z-index:1;
}
.barber-scissors-v4 .barber-scissors-medallion{
  position:relative;
  z-index:3;
  width:138px;
  height:138px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg, rgba(35,22,14,.92), rgba(82,48,28,.82));
  border:1px solid rgba(255,239,219,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 18px 34px rgba(57,27,10,.28);
}
.barber-scissors-v4 .barber-scissors-symbol{
  display:block;
  font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;
  font-size:88px;
  line-height:1;
  color:#fff1df;
  transform:rotate(-10deg) translateY(-2px);
  text-shadow:
    0 2px 0 rgba(255,255,255,.15),
    0 10px 18px rgba(0,0,0,.30);
}
.barber-scissors-v4 .barber-scissors-shadow-v4{
  position:absolute;
  z-index:0;
  width:124px;
  height:22px;
  bottom:8px;
  border-radius:50%;
  background:rgba(55,26,11,.30);
  filter:blur(9px);
}
/* Kill all previous hand-built scissors pieces so they can never show */
.barber-scissors-scene .scissor-blade,
.barber-scissors-scene .scissor-handle,
.barber-scissors-scene .scissor-joint,
.barber-scissors-scene .scissor-tail,
.barber-scissors-scene .barber-scissors-svg,
.barber-scissors-scene .scissors-glow,
.barber-scissors-scene .scissors-shadow{
  display:none !important;
}
@media(max-width:720px){
  .barber-scissors-v4{min-height:150px !important;}
  .barber-scissors-v4 .barber-scissors-medallion{width:116px;height:116px;}
  .barber-scissors-v4 .barber-scissors-symbol{font-size:74px;}
  .barber-scissors-v4 .barber-scissors-halo{width:126px;height:126px;}
}


/* FINAL FIX — remove the dark circular medallion behind the barber scissors */
.barber-scissors-v4 .barber-scissors-halo{
  display:none !important;
}
.barber-scissors-v4 .barber-scissors-medallion{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.barber-scissors-v4 .barber-scissors-symbol{
  font-size:108px !important;
  color:#fff1df !important;
  text-shadow:0 10px 18px rgba(67,34,16,.22) !important;
  transform:rotate(-10deg) translateY(-2px) !important;
}
.barber-scissors-v4 .barber-scissors-shadow-v4{
  width:105px !important;
  height:16px !important;
  bottom:14px !important;
  background:rgba(70,35,17,.18) !important;
  filter:blur(8px) !important;
}
@media(max-width:720px){
  .barber-scissors-v4 .barber-scissors-symbol{
    font-size:88px !important;
  }
}


/* Restaurant portfolio card */
.restaurant-pro {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #7a3145 0%, #df8a72 100%);
}
.restaurant-pro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,.08), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.10), transparent 22%);
  pointer-events: none;
}
.restaurant-preview-top {
  padding: 22px 28px 0;
  display: flex;
  align-items: center;
}
.restaurant-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(20,24,29,.16);
  color: #fff7ef;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}
.restaurant-preview-hero {
  position: relative;
  min-height: 176px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 32px 28px;
}
.restaurant-copy-lines {
  position: relative;
  z-index: 2;
}
.restaurant-copy-lines .line,
.restaurant-copy-lines .mini-cta {
  display: block;
  border-radius: 999px;
}
.restaurant-copy-lines .line.long { width: 88%; height: 14px; background: rgba(255,255,255,.93); margin-bottom: 14px; }
.restaurant-copy-lines .line.mid { width: 63%; height: 9px; background: rgba(255,255,255,.72); margin-bottom: 11px; }
.restaurant-copy-lines .line.short { width: 47%; height: 9px; background: rgba(255,255,255,.56); margin-bottom: 24px; }
.restaurant-copy-lines .mini-cta { width: 100px; height: 34px; background: rgba(255,255,255,.96); }
.restaurant-food-scene {
  position: relative;
  width: 250px;
  min-height: 162px;
}
.restaurant-accent-circle {
  position: absolute;
  right: -38px;
  bottom: -46px;
  width: 178px;
  height: 178px;
  border-radius: 50%;
  background: rgba(255, 227, 210, .30);
}
.restaurant-plate {
  position: absolute;
  right: 34px;
  top: 4px;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,228,214,.96));
  box-shadow: 0 18px 30px rgba(90,34,42,.18), inset 0 0 0 8px rgba(255,255,255,.72), inset 0 0 0 10px rgba(159,88,72,.16);
}
.restaurant-plate::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 48%, #f8ecd6 0 64%, #efd4b5 65% 67%, transparent 68%);
}
.food-dot {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
}
.food-dot.tomato { width: 22px; height: 22px; background: #d85d4f; left: 44px; top: 38px; box-shadow: 0 0 0 4px rgba(255,255,255,.48); }
.food-dot.herb { width: 24px; height: 14px; background: #6f8f5f; border-radius: 16px 16px 16px 2px; }
.food-dot.herb-one { left: 73px; top: 52px; transform: rotate(22deg); }
.food-dot.herb-two { left: 52px; top: 72px; transform: rotate(-26deg); }
.food-dot.lemon { width: 24px; height: 24px; background: #f0c45b; right: 40px; top: 44px; box-shadow: 0 0 0 4px rgba(255,255,255,.44); }
.food-dot.sauce { width: 36px; height: 16px; background: #d99668; left: 54px; bottom: 34px; border-radius: 999px; transform: rotate(-10deg); }
.restaurant-cup {
  position: absolute;
  left: 4px;
  bottom: 18px;
  width: 78px;
  height: 56px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(145deg, #fffefc, #efd8c0);
  box-shadow: 0 14px 24px rgba(90,34,42,.14), inset 0 0 0 3px rgba(255,255,255,.6);
}
.restaurant-cup::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  height: 10px;
  border-radius: 999px;
  background: #6a422f;
}
.restaurant-cup::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 14px;
  width: 20px;
  height: 20px;
  border: 4px solid #f5eadf;
  border-left: 0;
  border-radius: 0 50% 50% 0;
}
.coffee-surface { display:none; }
.steam {
  position: absolute;
  width: 18px;
  height: 28px;
  border: 2px solid rgba(255,255,255,.8);
  border-right: 0;
  border-bottom: 0;
  border-radius: 14px 0 0 0;
}
.steam-one { left: 22px; top: -18px; transform: rotate(16deg); }
.steam-two { left: 40px; top: -22px; transform: rotate(8deg) scale(.88); }
.restaurant-fork {
  position: absolute;
  left: 102px;
  top: 18px;
  width: 18px;
  height: 110px;
}
.restaurant-fork::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 22px;
  bottom: 0;
  width: 4px;
  border-radius: 999px;
  background: rgba(255,245,237,.88);
}
.restaurant-fork span {
  position: absolute;
  top: 0;
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,245,237,.92);
}
.restaurant-fork span:nth-child(1){ left: 0; }
.restaurant-fork span:nth-child(2){ left: 5px; }
.restaurant-fork span:nth-child(3){ left: 10px; }
.restaurant-fork span:nth-child(4){ left: 15px; }
.restaurant-shadow {
  position: absolute;
  right: 26px;
  bottom: 4px;
  width: 160px;
  height: 24px;
  border-radius: 50%;
  background: rgba(84, 34, 44, .16);
  filter: blur(8px);
}
@media (max-width: 720px) {
  .restaurant-preview-hero { min-height: 160px; padding: 18px 24px 26px; }
  .restaurant-food-scene { width: 220px; min-height: 150px; }
  .restaurant-plate { width: 118px; height: 118px; right: 26px; }
  .restaurant-cup { width: 68px; height: 50px; }
  .restaurant-copy-lines .line.long { height: 12px; }
  .restaurant-copy-lines .mini-cta { width: 78px; height: 26px; }
}


/* Stripe deposit checkout */
.price-actions{
  display:grid;
  gap:10px;
  margin-top:auto;
}
.price-actions .stripe-deposit-btn{
  width:100%;
  text-align:center;
}
.price-quote-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  width:max-content;
  margin:0 auto;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:rgba(140,231,223,.36);
  text-underline-offset:4px;
  transition:color .18s ease, text-decoration-color .18s ease;
}
.price-quote-link:hover{
  color:#8ce7df;
  text-decoration-color:#8ce7df;
}
.featured .price-quote-link{
  color:#b7c5d6;
}
.featured .price-quote-link:hover{
  color:#8ce7df;
}
.pricing-notes p:first-child{
  color:#c8d7e6;
}


/* Website maintenance option in package selector */
.maintenance-option{
  background:rgba(140,231,223,.035);
}
.maintenance-option .package-option-price{
  color:#8ce7df;
}


/* Restaurant hero mini-card visual */
.compact-restaurant-body{
  position: relative;
  min-height: 160px;
  overflow: hidden;
}
.compact-restaurant-body .compact-lines{
  max-width: 56%;
}
.compact-restaurant-visual{
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 108px;
  height: 78px;
}
.food-plate{
  position: absolute;
  right: 8px;
  bottom: 10px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff8f6 0 31%, #ffd9cf 32% 36%, #fff2ee 37% 58%, rgba(234,169,151,.25) 59% 100%);
  box-shadow: 0 12px 22px rgba(82,43,53,.14);
}
.food-garnish{
  position: absolute;
  right: 25px;
  bottom: 30px;
  width: 36px;
  height: 20px;
  border-radius: 50% 45% 50% 45%;
  background: linear-gradient(135deg, #e6806d 0%, #b84f6f 45%, #6a2746 100%);
  box-shadow: 0 0 0 6px rgba(255,255,255,.55);
}
.food-garnish::before,
.food-garnish::after{
  content: "";
  position: absolute;
  background: #7b9a63;
  border-radius: 999px;
}
.food-garnish::before{
  width: 14px;
  height: 6px;
  left: -10px;
  top: 6px;
  transform: rotate(-24deg);
}
.food-garnish::after{
  width: 12px;
  height: 5px;
  right: -8px;
  top: 7px;
  transform: rotate(20deg);
}
.food-cup{
  position: absolute;
  left: 2px;
  bottom: 20px;
  width: 24px;
  height: 30px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #fffaf7, #f1d7cf 75%);
  box-shadow: 0 8px 16px rgba(82,43,53,.12);
}
.food-cup::before{
  content: "";
  position: absolute;
  top: -5px;
  left: 2px;
  width: 20px;
  height: 6px;
  border-radius: 999px;
  background: #fff6f2;
}
.food-cup::after{
  content: "";
  position: absolute;
  right: -7px;
  top: 7px;
  width: 9px;
  height: 10px;
  border: 2px solid #f5d8d0;
  border-left: none;
  border-radius: 0 8px 8px 0;
}
@media (max-width: 680px){
  .compact-restaurant-body{min-height: 148px;}
  .compact-restaurant-visual{width: 98px;height: 72px;right: 10px;}
  .food-plate{width: 60px;height: 60px;}
  .food-garnish{right: 22px;bottom: 27px;width: 32px;height: 18px;}
  .food-cup{width: 22px;height: 28px;}
}


/* Premium restaurant mini-card visual refinement */
.browser-restaurant .showcase-body{
  background: linear-gradient(145deg, #fff6f3 0%, #f6d9d3 55%, #efc4bb 100%);
}
.compact-restaurant-body{
  min-height: 168px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.5), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
.compact-restaurant-body .compact-lines{
  max-width: 54%;
  position: relative;
  z-index: 2;
}
.compact-restaurant-visual{
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 118px;
  height: 88px;
}
.food-card-glow{
  position: absolute;
  right: 6px;
  bottom: 0;
  width: 104px;
  height: 30px;
  border-radius: 50%;
  background: rgba(106,39,70,.12);
  filter: blur(12px);
}
.food-plate{
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fffdfb 0 30%, #ffe4dc 31% 36%, #fff4ef 37% 60%, rgba(255,255,255,.25) 61% 100%);
  box-shadow: 0 14px 28px rgba(101,47,58,.18), inset 0 2px 0 rgba(255,255,255,.9);
}
.food-ring{
  position: absolute;
  right: 25px;
  bottom: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(230,145,122,.45);
}
.food-garnish{
  position: absolute;
  right: 31px;
  bottom: 37px;
  width: 28px;
  height: 16px;
  border-radius: 40px;
  background: linear-gradient(135deg, #ee9470 0%, #bb536e 55%, #762649 100%);
  box-shadow: 0 0 0 6px rgba(255,255,255,.62);
}
.food-leaf{
  position: absolute;
  width: 12px;
  height: 6px;
  background: linear-gradient(135deg, #93b474, #5d8249);
  border-radius: 999px 999px 999px 0;
}
.food-leaf.leaf-a{ right: 53px; bottom: 41px; transform: rotate(-34deg); }
.food-leaf.leaf-b{ right: 24px; bottom: 42px; transform: rotate(28deg); border-radius: 999px 999px 0 999px; }
.food-cup{
  position: absolute;
  left: 4px;
  bottom: 22px;
  width: 26px;
  height: 32px;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #fffefe 0%, #f5e1dc 78%);
  box-shadow: 0 10px 16px rgba(88,42,54,.14);
}
.food-cup::before{
  content: "";
  position: absolute;
  top: -5px;
  left: 3px;
  width: 20px;
  height: 6px;
  border-radius: 999px;
  background: #fff8f5;
}
.food-cup::after{
  content: "";
  position: absolute;
  right: -8px;
  top: 8px;
  width: 9px;
  height: 10px;
  border: 2px solid #f1d5ce;
  border-left: none;
  border-radius: 0 10px 10px 0;
}
.food-steam{
  position: absolute;
  width: 10px;
  height: 22px;
  border: 2px solid rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.72) transparent transparent transparent;
  border-radius: 50%;
  opacity: .85;
}
.food-steam.steam-a{ left: 9px; bottom: 53px; transform: rotate(-10deg); }
.food-steam.steam-b{ left: 18px; bottom: 56px; transform: rotate(14deg); height: 18px; }
.food-cutlery{
  position: absolute;
  right: 0;
  bottom: 28px;
  width: 22px;
  height: 38px;
}
.food-cutlery::before,
.food-cutlery::after{
  content: "";
  position: absolute;
  background: linear-gradient(180deg, #f8ebe4, #cda18f);
  box-shadow: 0 2px 4px rgba(97,47,58,.12);
}
.food-cutlery::before{
  right: 4px;
  bottom: 0;
  width: 4px;
  height: 36px;
  border-radius: 3px;
}
.food-cutlery::after{
  left: 3px;
  bottom: 0;
  width: 4px;
  height: 32px;
  border-radius: 3px;
}
@media (max-width: 680px){
  .compact-restaurant-body{ min-height: 154px; }
  .compact-restaurant-visual{ width: 104px; height: 78px; right: 6px; }
  .food-plate{ width: 64px; height: 64px; right: 12px; }
  .food-ring{ width: 44px; height: 44px; right: 22px; bottom: 22px; }
  .food-garnish{ right: 28px; bottom: 34px; width: 24px; height: 14px; }
  .food-cutlery{ transform: scale(.9); transform-origin: bottom right; }
}


/* Project brief before payment */
.stripe-deposit-btn.project-start-btn{
  width:100%;
  border:0;
  cursor:pointer;
  font:inherit;
}
.brief-first-note{
  color:#d7f8f3 !important;
  font-weight:700;
}
.maintenance-pricing-card{
  margin-top:20px;
  padding:24px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid rgba(140,231,223,.16);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(124,92,255,.08),rgba(140,231,223,.05));
  box-shadow:0 18px 50px rgba(3,10,20,.18);
}
.maintenance-pricing-card h3{margin:5px 0 7px;font-size:22px}
.maintenance-pricing-card p{margin:0;color:var(--muted);max-width:720px;line-height:1.65}
.maintenance-kicker{font-size:10px;font-weight:900;letter-spacing:.13em;color:#8ce7df}
.maintenance-start-btn{flex:0 0 auto;white-space:nowrap}

.project-modal{
  position:fixed;
  inset:0;
  z-index:300;
  display:none;
  padding:22px;
  overflow:auto;
}
.project-modal.open{display:grid;place-items:center}
.project-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(3,8,16,.78);
  backdrop-filter:blur(10px);
}
.project-dialog{
  position:relative;
  z-index:1;
  width:min(920px,100%);
  max-height:calc(100vh - 44px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  background:
    radial-gradient(circle at 100% 0%,rgba(124,92,255,.13),transparent 34%),
    linear-gradient(180deg,#0c192b 0%,#091522 100%);
  box-shadow:0 38px 100px rgba(0,0,0,.55);
  padding:34px;
}
.project-dialog::-webkit-scrollbar{width:8px}
.project-dialog::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
.project-close{
  position:absolute;
  top:18px;
  right:18px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.project-dialog-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:end;
  padding-right:42px;
  margin-bottom:28px;
}
.project-dialog-head h2{font-size:clamp(25px,3vw,36px);line-height:1.08;margin:10px 0 10px;max-width:670px}
.project-dialog-head p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.65;max-width:680px}
.project-package-summary{
  min-width:190px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(140,231,223,.16);
  background:rgba(140,231,223,.045);
}
.project-package-summary span,
.project-package-summary small{display:block;color:var(--muted);font-size:11px}
.project-package-summary strong{display:block;font-size:18px;margin:4px 0 5px;color:#fff}
.project-package-summary small{color:#8ce7df;font-weight:700}
.project-progress{display:grid;grid-template-columns:auto 1fr auto;align-items:center;margin-bottom:26px}
.project-progress-line{height:1px;background:rgba(255,255,255,.1);margin:0 16px}
.project-progress-item{display:flex;align-items:center;gap:10px;color:#708096}
.project-progress-item>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:800}
.project-progress-item strong,.project-progress-item small{display:block}
.project-progress-item strong{font-size:12px;color:#8f9db0}
.project-progress-item small{font-size:10px;color:#65758b;margin-top:2px}
.project-progress-item.active>span{border-color:rgba(140,231,223,.5);background:rgba(140,231,223,.1);color:#aef5ee}
.project-progress-item.active strong{color:#fff}
.project-step{display:grid;gap:16px}
.project-field-grid{display:grid;gap:16px}
.project-field-grid.two{grid-template-columns:1fr 1fr}
.project-brief-form label{display:grid;gap:7px}
.project-brief-form label>span{font-size:12px;font-weight:750;color:#dfe7f3}
.project-brief-form input,
.project-brief-form select,
.project-brief-form textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:#081321;
  color:#f8fbff;
  padding:14px 15px;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.project-brief-form select{appearance:auto}
.project-brief-form textarea{resize:vertical;min-height:92px}
.project-brief-form input:focus,
.project-brief-form select:focus,
.project-brief-form textarea:focus{
  border-color:rgba(124,92,255,.65);
  box-shadow:0 0 0 3px rgba(124,92,255,.12);
  background:#0a1727;
}
.project-brief-form input::placeholder,
.project-brief-form textarea::placeholder{color:#5e7189}
.project-form-footer{display:flex;align-items:center;gap:12px;margin-top:24px}
.project-form-footer-spacer{flex:1}
.project-form-footer .btn{min-width:126px}
.project-submit-btn{min-width:270px !important}
.project-form-note{margin:14px 0 0;color:#718299;font-size:11px;line-height:1.55}
.project-form-status{min-height:20px;margin:10px 0 0;font-size:12px;font-weight:700}
.project-form-status.sending{color:#b8c8dc}
.project-form-status.success{color:#8ce7df}
.project-form-status.error{color:#ff9d9d}
body.project-modal-open{overflow:hidden}

@media(max-width:760px){
  .maintenance-pricing-card{align-items:flex-start;flex-direction:column}
  .maintenance-start-btn{width:100%}
  .project-modal{padding:10px}
  .project-dialog{max-height:calc(100vh - 20px);border-radius:22px;padding:24px 18px}
  .project-dialog-head{grid-template-columns:1fr;padding-right:36px;gap:16px}
  .project-package-summary{min-width:0;width:100%}
  .project-field-grid.two{grid-template-columns:1fr}
  .project-progress{
    grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);
    gap:6px;
    width:100%;
  }
  .project-progress-item{
    min-width:0;
    gap:8px;
  }
  .project-progress-item div{
    display:block;
    min-width:0;
  }
  .project-progress-item>span{
    width:30px;
    height:30px;
    flex:0 0 30px;
  }
  .project-progress-item strong{
    font-size:11px;
    line-height:1.15;
    white-space:normal;
  }
  .project-progress-item small{
    font-size:9px;
    line-height:1.2;
    margin-top:3px;
    white-space:normal;
  }
  .project-progress-line{
    margin:0;
    width:100%;
  }
  .project-form-footer{flex-wrap:wrap}
  .project-form-footer-spacer{display:none}
  .project-form-footer .btn{flex:1 1 140px}
  .project-submit-btn{min-width:0 !important;flex-basis:100% !important}
}


/* Project brief: premium custom choice menus */
.project-choice-field{
  position:relative;
  display:grid;
  gap:7px;
}
.project-field-label{
  font-size:12px;
  font-weight:750;
  color:#dfe7f3;
}
.project-choice-btn{
  width:100%;
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.01)),#0b1728;
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.project-choice-btn:hover,
.project-choice-btn[aria-expanded="true"]{
  border-color:rgba(124,92,255,.58);
  box-shadow:0 0 0 3px rgba(124,92,255,.11);
  background:linear-gradient(180deg,rgba(124,92,255,.055),rgba(255,255,255,.01)),#0b1728;
}
.project-choice-btn.invalid{
  border-color:rgba(255,104,104,.75);
  box-shadow:0 0 0 3px rgba(255,104,104,.10);
}
.project-choice-btn>span{display:grid;gap:4px;min-width:0}
.project-choice-btn strong{font-size:13px;color:#f7f9fc;white-space:normal}
.project-choice-btn small{font-size:10.5px;color:var(--muted);font-weight:500;line-height:1.4}
.project-choice-chevron{
  width:10px;height:10px;flex:0 0 auto;
  border-right:2px solid #9fa9b8;border-bottom:2px solid #9fa9b8;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease;
}
.project-choice-btn[aria-expanded="true"] .project-choice-chevron{transform:rotate(225deg) translate(-2px,-2px)}
.project-choice-menu{
  position:absolute;
  z-index:110;
  left:0;right:0;
  top:calc(100% - 2px);
  padding:9px;
  border:1px solid rgba(124,92,255,.28);
  border-radius:17px;
  background:rgba(10,22,38,.985);
  backdrop-filter:blur(18px);
  box-shadow:0 24px 60px rgba(0,0,0,.46);
  opacity:0;visibility:hidden;
  transform:translateY(-5px) scale(.985);
  transform-origin:top;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  max-height:260px;
  overflow:auto;
}
.project-choice-menu.open{opacity:1;visibility:visible;transform:translateY(8px) scale(1)}
.project-choice-option{
  width:100%;
  display:flex;
  align-items:center;
  padding:13px 14px;
  border:0;
  border-radius:13px;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
}
.project-choice-option:hover,.project-choice-option.selected{background:rgba(124,92,255,.105)}
.project-choice-option span{display:grid;gap:3px}
.project-choice-option strong{font-size:12px;color:#f4f7fb}
.project-choice-option small{font-size:10px;color:#7f90a7;line-height:1.45}
.project-field-help{display:block;margin-top:0;color:#6f829a;font-size:10px;line-height:1.5;font-weight:500}
.project-brief-form input[type="date"]{color-scheme:dark;cursor:pointer}
.project-brief-form input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.85;filter:invert(1)}
@media (max-width:720px){
  .project-choice-menu{position:relative;top:auto;margin-top:-3px;display:none;transform:none;opacity:1;visibility:visible;box-shadow:0 14px 34px rgba(0,0,0,.32)}
  .project-choice-menu.open{display:block;transform:none}
}


/* Project brief final alignment & consistency pass */
.project-field-grid{
  align-items:start;
}
.project-field-grid.two > *{
  min-width:0;
  align-self:start;
}
.project-brief-form label,
.project-choice-field{
  align-content:start;
}
.project-brief-form input:not([type="hidden"]),
.project-brief-form select{
  min-height:52px;
}
.project-example-row > label{
  grid-template-rows:auto 52px auto;
}
.project-example-row .project-field-help{
  min-height:30px;
  margin-top:0;
}
.project-brief-form input[type="date"]{
  min-height:68px;
}
.project-field-grid.two:has(#preferred-launch-date){
  align-items:start;
}
.project-field-grid.two:has(#preferred-launch-date) > label{
  grid-template-rows:auto 68px auto;
}
.project-field-grid.two:has(#preferred-launch-date) > .project-choice-field{
  grid-template-rows:auto 68px auto;
}
.project-field-grid.two:has(#preferred-launch-date) .project-choice-btn{
  height:68px;
}
@media (max-width:720px){
  .project-example-row > label,
  .project-field-grid.two:has(#preferred-launch-date) > label,
  .project-field-grid.two:has(#preferred-launch-date) > .project-choice-field{
    grid-template-rows:auto auto auto;
  }
  .project-example-row .project-field-help{min-height:0}
}


/* Post-payment project confirmation */
.payment-success-body{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at 20% 5%, rgba(124,92,255,.20), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(80,226,207,.12), transparent 28%),
    #07111f;
  color:#f7f9fc;
}
.payment-success-shell{
  width:min(760px,calc(100% - 28px));
  min-height:100vh;
  margin:0 auto;
  padding:42px 0 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:24px;
}
.payment-success-brand{
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  color:#fff;
}
.payment-success-brand img{
  width:48px;
  height:48px;
  object-fit:contain;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.payment-success-brand span{display:grid;gap:3px}
.payment-success-brand strong{font-size:14px;letter-spacing:.02em}
.payment-success-brand small{font-size:9px;letter-spacing:.18em;color:#93a0b4}
.payment-success-card{
  position:relative;
  overflow:hidden;
  padding:clamp(28px,6vw,54px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:30px;
  background:linear-gradient(180deg,rgba(18,35,58,.97),rgba(9,23,40,.98));
  box-shadow:0 34px 90px rgba(0,0,0,.38);
}
.payment-success-card::before{
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  right:-110px;
  top:-125px;
  border-radius:50%;
  background:rgba(124,92,255,.12);
  filter:blur(3px);
}
.payment-success-icon{
  position:relative;
  z-index:1;
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  margin-bottom:24px;
  border-radius:22px;
  background:linear-gradient(135deg,#7c5cff,#52dfcf);
  color:#07111f;
  font-size:30px;
  font-weight:900;
  box-shadow:0 18px 35px rgba(80,226,207,.18);
}
.payment-success-icon.success{background:linear-gradient(135deg,#55e1c8,#9ae6a8)}
.payment-success-icon.error{background:linear-gradient(135deg,#ff9a88,#ffd37a);color:#32130e}
.payment-success-card h1{
  position:relative;
  z-index:1;
  margin:12px 0 14px;
  font-size:clamp(30px,6vw,48px);
  line-height:1.04;
  letter-spacing:-.035em;
}
.payment-success-card > p{
  position:relative;
  z-index:1;
  max-width:650px;
  color:#a9b5c6;
  line-height:1.75;
}
.payment-success-progress{
  position:relative;
  z-index:1;
  height:7px;
  margin:26px 0;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.07);
}
.payment-success-progress span{
  display:block;
  width:38%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#7c5cff,#52dfcf);
  animation:paymentLoading 1.1s ease-in-out infinite alternate;
}
@keyframes paymentLoading{from{transform:translateX(-8%)}to{transform:translateX(165%)}}
.payment-success-reference{
  position:relative;
  z-index:1;
  margin-top:24px;
  padding:18px 20px;
  border-radius:18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}
.payment-success-reference span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#7f8da3;margin-bottom:7px}
.payment-success-reference strong{font-size:17px;letter-spacing:.04em}
.payment-success-actions{
  position:relative;
  z-index:1;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}
#payment-retry{position:relative;z-index:1;margin-top:20px}
.payment-success-small{font-size:12px!important;color:#75849a!important;margin-top:20px!important}
@media(max-width:560px){
  .payment-success-shell{padding-top:24px;justify-content:flex-start}
  .payment-success-card{border-radius:24px}
  .payment-success-actions{display:grid}
}


/* Large post-payment confirmation notification */
.payment-confirmation-banner{
  position:relative;
  z-index:2;
  margin:26px 0 8px;
  padding:24px 26px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
  text-align:left;
  border:1px solid rgba(85,225,200,.34);
  border-radius:24px;
  background:
    radial-gradient(circle at 10% 10%, rgba(85,225,200,.16), transparent 36%),
    linear-gradient(145deg, rgba(85,225,200,.10), rgba(154,230,168,.055));
  box-shadow:0 18px 46px rgba(27,157,137,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.payment-confirmation-banner[hidden]{display:none!important}
.payment-confirmation-check{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:22px;
  font-size:34px;
  font-weight:900;
  color:#06271f;
  background:linear-gradient(135deg,#55e1c8,#9ae6a8);
  box-shadow:0 14px 32px rgba(85,225,200,.25);
}
.payment-confirmation-text{display:grid;gap:8px}
.payment-confirmation-text strong{
  color:#f4fffc;
  font-size:clamp(20px,3.2vw,28px);
  line-height:1.12;
  letter-spacing:-.025em;
}
.payment-confirmation-text span{
  color:#b8c8c5;
  font-size:14px;
  line-height:1.65;
}
@media (max-width:620px){
  .payment-confirmation-banner{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
    padding:22px 18px;
  }
  .payment-confirmation-check{width:60px;height:60px;border-radius:20px;font-size:31px}
}


/* Payment not completed / cancelled states */
.payment-failure-banner{
  position:relative;
  z-index:2;
  margin:26px 0 8px;
  padding:24px 26px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
  text-align:left;
  border:1px solid rgba(255,114,114,.34);
  border-radius:24px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,99,99,.16), transparent 36%),
    linear-gradient(145deg, rgba(255,99,99,.10), rgba(255,180,110,.045));
  box-shadow:0 18px 46px rgba(215,67,67,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.payment-failure-banner[hidden]{display:none!important}
.payment-failure-x{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border-radius:22px;
  font-size:34px;
  font-weight:900;
  color:#320909;
  background:linear-gradient(135deg,#ff7d7d,#ffbb73);
  box-shadow:0 14px 32px rgba(255,99,99,.22);
}
.payment-failure-text{display:grid;gap:8px}
.payment-failure-text strong{
  color:#fff4f4;
  font-size:clamp(20px,3.2vw,28px);
  line-height:1.12;
  letter-spacing:-.025em;
}
.payment-failure-text span{
  color:#c9b4b4;
  font-size:14px;
  line-height:1.65;
}
.payment-return-alert{
  position:fixed;
  z-index:9999;
  left:50%;
  top:22px;
  width:min(680px,calc(100% - 28px));
  transform:translateX(-50%);
  padding:18px 20px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  border:1px solid rgba(255,116,116,.34);
  border-radius:20px;
  background:rgba(34,12,18,.96);
  color:#fff;
  box-shadow:0 22px 60px rgba(0,0,0,.42);
  backdrop-filter:blur(16px);
}
.payment-return-alert .alert-icon{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,#ff7979,#ffb86f);color:#320909;font-size:22px;font-weight:900;
}
.payment-return-alert strong{display:block;font-size:15px;margin-bottom:3px}
.payment-return-alert span{display:block;color:#d8c3c7;font-size:12px;line-height:1.5}
.payment-return-alert .alert-actions{display:flex;align-items:center;gap:8px}
.payment-return-alert .alert-retry{
  display:inline-flex;align-items:center;justify-content:center;padding:10px 13px;border-radius:12px;
  background:#fff;color:#1b1114;font-size:12px;font-weight:800;
}
.payment-return-alert .alert-close{
  width:36px;height:36px;border:0;border-radius:11px;background:rgba(255,255,255,.07);color:#fff;font-size:18px;cursor:pointer;
}
@media (max-width:620px){
  .payment-failure-banner{grid-template-columns:1fr;text-align:center;justify-items:center;padding:22px 18px}
  .payment-failure-x{width:60px;height:60px;border-radius:20px;font-size:31px}
  .payment-return-alert{grid-template-columns:auto 1fr;top:12px}
  .payment-return-alert .alert-actions{grid-column:1/-1;justify-content:flex-end}
}


.maintenance-billing-note{
  display:block;
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}


/* Premium preferred launch date */
.launch-date-field{
  position:relative;
}
.launch-date-label{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
.launch-date-badge{
  flex:0 0 auto;
  padding:5px 8px;
  border:1px solid rgba(124,92,255,.28);
  border-radius:999px;
  background:rgba(124,92,255,.08);
  color:#a99cff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.03em;
  line-height:1;
}
.launch-date-control{
  position:relative;
  display:block;
  height:68px;
}
.project-brief-form .launch-date-control input[type="date"]{
  width:100%;
  height:68px;
  padding:0 58px 0 16px;
  border:1px solid rgba(124,92,255,.34);
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(124,92,255,.035),rgba(255,255,255,.008)),
    #0b1728;
  color:#f7f9fc;
  color-scheme:dark;
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.project-brief-form .launch-date-control input[type="date"]:hover,
.project-brief-form .launch-date-control input[type="date"]:focus{
  outline:none;
  border-color:rgba(124,92,255,.72);
  background:
    linear-gradient(180deg,rgba(124,92,255,.07),rgba(255,255,255,.008)),
    #0b1728;
  box-shadow:0 0 0 3px rgba(124,92,255,.12);
}
.project-brief-form .launch-date-control input[type="date"]::-webkit-calendar-picker-indicator{
  position:absolute;
  right:0;
  top:0;
  width:58px;
  height:68px;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.launch-calendar-btn{
  position:absolute;
  z-index:2;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.11);
  border-radius:12px;
  background:rgba(255,255,255,.055);
  color:#fff;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.launch-calendar-btn:hover{
  background:rgba(124,92,255,.16);
  border-color:rgba(124,92,255,.38);
  transform:translateY(-50%) scale(1.02);
}
.launch-calendar-btn svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.launch-date-help{
  padding-left:2px;
  color:#7e91aa;
}
@media (max-width:520px){
  .launch-date-label{align-items:flex-start;}
  .launch-date-badge{margin-top:1px;}
}


/* Extra-small phones: keep both step labels readable */
@media(max-width:390px){
  .project-dialog{padding-left:14px;padding-right:14px}
  .project-progress{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:4px}
  .project-progress-item{gap:6px}
  .project-progress-item>span{width:28px;height:28px;flex-basis:28px;font-size:11px}
  .project-progress-item strong{font-size:10px}
  .project-progress-item small{font-size:8.5px}
}


/* Final mobile QA safeguards */
@supports (height: 100dvh) {
  .payment-success-body,
  .payment-success-shell { min-height: 100dvh; }
}

@media (max-width: 760px) {
  .project-modal {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
  }
  .project-dialog-head { padding-right: 50px; }
  .project-close { top: 12px; right: 12px; }
}

@supports (height: 100dvh) {
  @media (max-width: 760px) {
    .project-dialog { max-height: calc(100dvh - 20px); }
  }
}

@media (max-width: 360px) {
  .hero-actions .btn { flex: 1 1 100%; }
  .trust-row { gap: 12px 16px; }
  .payment-return-alert { padding: 14px; }
  .payment-return-alert .alert-actions { justify-content: stretch; }
  .payment-return-alert .alert-retry { flex: 1; text-align: center; }
}


/* Modal centering & viewport containment — desktop + mobile */
.project-modal{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.project-modal.open{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.project-dialog{
  width:920px;
  max-width:calc(100vw - 44px);
  min-width:0;
  margin:auto 0;
  overflow-x:hidden;
}
.project-dialog-head,
.project-dialog-head > *,
.project-brief-form,
.project-step,
.project-field-grid,
.project-field-grid > *,
.project-choice-field,
.project-choice-btn,
.project-package-summary{
  min-width:0;
  max-width:100%;
}
.project-dialog-head h2,
.project-dialog-head p,
.project-package-summary strong,
.project-package-summary small,
.project-choice-btn strong,
.project-choice-btn small{
  overflow-wrap:anywhere;
  word-break:normal;
}
.project-brief-form input,
.project-brief-form textarea,
.project-brief-form select,
.project-choice-btn{
  max-width:100%;
}

@media(max-width:760px){
  .project-dialog{
    width:100%;
    max-width:100%;
    margin:auto 0;
  }
  .project-dialog-head{
    width:100%;
  }
  .project-package-summary{
    width:100%;
  }
}

@media(min-width:761px){
  .project-dialog{
    max-width:min(920px, calc(100vw - 44px));
  }
}

/* Mobile car illustration proportion fix */
@media (max-width: 720px) {
  .showcase-car-card {
    min-height: 168px;
  }
  .car-mini {
    width: min(76%, 330px);
    height: 46px;
    left: 50%;
    bottom: 27%;
    transform: translateX(-50%);
    border-radius: 48% 56% 18% 20% / 62% 66% 30% 32%;
  }
  .car-mini::before {
    width: 48%;
    height: 80%;
    left: 25%;
    top: -52%;
  }
  .wheel-mini {
    width: 42px;
    height: 42px;
    bottom: 17%;
  }
  .wheel-mini.left { left: 24%; }
  .wheel-mini.right { right: 21%; }
  .car-glow-mini {
    width: 58%;
    left: 21%;
    height: 18%;
    bottom: 10%;
  }
}

@media (max-width: 520px) {
  .showcase-car-card {
    min-height: 158px;
  }
  .car-mini {
    width: 72%;
    max-width: 285px;
    height: 44px;
    bottom: 29%;
  }
  .wheel-mini {
    width: 40px;
    height: 40px;
    bottom: 18%;
  }
  .wheel-mini.left { left: 23%; }
  .wheel-mini.right { right: 20%; }
}

@media (max-width: 380px) {
  .showcase-car-card {
    min-height: 148px;
  }
  .car-mini {
    width: 74%;
    height: 40px;
  }
  .wheel-mini {
    width: 36px;
    height: 36px;
  }
}


/* Hide modal scrollbar chrome while keeping the project dialog scrollable */
.project-dialog{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.project-dialog::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none;
}
.project-modal{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.project-modal::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none;
}


/* Mobile menu vertical-position refinement */
@media (max-width: 720px) {
  .nav-wrap { position: relative; }
  .main-nav {
    top: calc(100% + 12px);
  }
}