/* ============================================================================
   FILE: refinements.css  |  WEBSITE STYLES
   ============================================================================ */

/* Shared blue-violet tone and refined interaction layer */
.ambient:after {
  content:"";
  position:absolute;
  inset:-25%;
  background:radial-gradient(ellipse at 18% 35%,#9b87ff18 0 9%,transparent 27%),radial-gradient(ellipse at 77% 62%,#4fdce918 0 7%,transparent 25%),radial-gradient(ellipse at 45% 88%,#c8f15b10 0 8%,transparent 24%);
  filter:blur(16px);
  animation:ambient-drift 18s ease-in-out infinite alternate;
  pointer-events:none
}

.grid {
  animation:grid-drift 28s linear infinite
}

@keyframes ambient-drift {
  0% {
    transform:translate3d(-3%,-2%,0) scale(1)
  }

  50% {
    transform:translate3d(3%,2%,0) scale(1.08)
  }

  100% {
    transform:translate3d(-1%,4%,0) scale(1.02)
  }

}

@keyframes grid-drift {
  to {
    background-position:68px 68px,68px 68px
  }

}

.cafe,.cafe .template-content {
  background:#25394d;
  color:#eff7fd
}

.cafe .template-top {
  background:#182633
}

.cafe .coffee {
  background:radial-gradient(circle,#c8f15b 0 18%,#263d50 19% 45%,#a7d7ed 46% 54%,transparent 55%)
}

.barber,.barber .template-content {
  background:#27234a;
  color:#f0efff
}

.barber .template-top {
  background:#1b1934
}

.barber-ring {
  border-color:#8e84e8
}

.studio,.studio .template-content {
  background:#34306b;
  color:#f4f1ff
}

.studio .template-top {
  background:#252253;
  color:#eeedff
}

.studio-ball {
  background:#8c83dd
}

.fitness,.fitness .template-content {
  background:#213a43;
  color:#eafff6
}

.fitness .template-top {
  background:#182e35;
  color:#eafff6
}

.fitness-lines {
  color:#77b9c9
}

.template-content:before {
  content:"";
  position:absolute;
  width:140%;
  aspect-ratio:1;
  border:1px solid #fff3;
  border-radius:50%;
  right:-43%;
  top:-49%;
  transition:transform .7s cubic-bezier(.2,.8,.2,1)
}

.template:hover .template-content:before {
  transform:scale(1.23) rotate(22deg)
}

.template:hover .coffee,.template:hover .barber-ring,.template:hover .studio-ball,.template:hover .fitness-lines {
  animation-play-state:paused;
  transform:scale(1.08) rotate(8deg);
  transition:transform .5s ease
}

.services article {
  overflow:hidden;
  transition:background .35s,transform .35s
}

.services article:after {
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,#8e84e866,transparent 67%);
  right:-90px;
  bottom:-90px;
  opacity:0;
  transition:.4s
}

.services article:hover {
  background:linear-gradient(145deg,#232142,#161827);
  transform:translateY(-9px)
}

.services article:hover:after {
  opacity:1;
  right:-50px;
  bottom:-50px
}

.services article:hover i {
  transform:rotate(18deg) scale(1.16);
  color:#a49af8
}

.services article:hover>b {
  transform:translate(3px,-3px);
  color:var(--lime)
}

.services i,.services article>b {
  transition:.35s
}

.card-glow {
  display:none
}

.price-card>*:not(.card-glow) {
  position:relative;
  z-index:1
}

.animated-card:hover {
  transform:translateY(-16px);
  border-color:#8176b9;
  box-shadow:0 25px 70px #0006
}

.process-art {
  background:radial-gradient(circle at 25% 25%,#a096f4 0 12%,transparent 13%),linear-gradient(145deg,#4e4a99,#1d4d5a 64%,#a6dc76)
}

.process-art>span {
  color:#d4ff64;
  text-shadow:0 0 35px #d4ff6488
}

.process-orbit {
  border-color:#dafee1;
  box-shadow:0 0 0 34px #c6bdff26,0 0 0 70px #c7f1591a
}

.contact {
  min-height:660px
}

.contact-layout {
  display:grid;
  grid-template-columns:1fr .82fr;
  gap:7vw;
  align-items:start
}

.contact-layout .contact-note {
  position:static;
  margin-top:160px;
  font:10px DM Mono,monospace
}

.contact-form {
  background:#171a25e8;
  border:1px solid #343847;
  padding:24px;
  display:grid;
  gap:14px;
  box-shadow:0 20px 50px #1720072b
}

.contact-form label {
  display:grid;
  gap:7px;
  color:#e9f2d1;
  font:9px DM Mono,monospace;
  text-transform:uppercase;
  letter-spacing:.08em
}

.contact-form input,.contact-form textarea {
  width:100%;
  border:1px solid #41465a;
  background:#222635;
  color:white;
  padding:12px;
  font:12px Manrope,sans-serif;
  outline:none;
  resize:vertical;
  transition:.2s
}

.contact-form input:focus,.contact-form textarea:focus {
  border-color:#c8f15b;
  box-shadow:0 0 0 3px #c8f15b1e
}

.contact-form input::placeholder,.contact-form textarea::placeholder {
  color:#8e92a5
}

.send-button {
  background:#c8f15b;
  color:#182023;
  border:0;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:800 12px Manrope,sans-serif;
  cursor:pointer
}

.send-button b {
  font-size:18px
}

.form-status {
  min-height:14px;
  margin:0;
  color:#c8f15b;
  font:9px/1.4 DM Mono,monospace
}

.contact-copy {
  animation:contact-rise .9s .15s both
}

.contact-title {
  animation:contact-float 5.5s ease-in-out infinite
}

.contact-title em {
  background-size:200% auto;
  animation:contact-shimmer 4s linear infinite
}

.contact-email {
  display:inline-flex;
  margin-top:26px;
  padding-bottom:5px;
  border-bottom:1px solid #182023;
  font:700 16px Space Grotesk,sans-serif;
  letter-spacing:-.04em;
  transition:.25s
}

.contact-email:hover {
  letter-spacing:0
}

.contact-email b {
  font-size:21px;
  margin-left:9px
}

@keyframes contact-rise {
  from {
    opacity:0;
    transform:translateY(27px)
  }

  to {
    opacity:1;
    transform:none
  }

}

@keyframes contact-float {
  50% {
    transform:translateY(-7px)
  }

}

@keyframes contact-shimmer {
  to {
    background-position:200% center
  }

}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media(max-width:800px) {
  .contact-layout {
    grid-template-columns:1fr;
    gap:45px
  }

  .contact-layout .contact-note {
    margin-top:45px
  }

  .contact {
    min-height:unset
  }

  .animated-card:hover {
    transform:none
  }

  .services article:hover {
    transform:none
  }

}


/* Comfortable inset spacing for template content and preview links */
.template-top {
  padding: 13px 22px;
}

.template-content p {
  left: 22px;
  bottom: 42px;
}

.template-content > span {
  left: 22px;
  bottom: 21px;
}

.template footer {
  padding: 16px 10px;
}

.template-hover {
  inset: 14px 14px 72px;
}


/* Seamless right-to-left service strip */
.ticker {
  padding: 0;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-loop 18s linear infinite;
}

.ticker-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 16px 0;
  white-space: nowrap;
}

.ticker-group b {
  margin: 0 23px;
  font-size: 16px;
}

@keyframes ticker-loop {
  to {
    transform: translateX(-50%);
  }

}


/* Override the original ticker rule for the new two-copy track */
.ticker .ticker-track {
  animation: ticker-loop 18s linear infinite;
}

.ticker .ticker-group {
  width: auto;
  animation: none;
}


/* Long, equal ticker groups prevent any gap or midpoint reset. */
.ticker .ticker-track {
  will-change: transform;
  animation-duration: 42s;
  animation-timing-function: linear;
}


/* Start and finish at mathematically identical ellipse angles. */
.process-orbit {
  rotate: none;
  animation: orbit-spin 18s linear infinite;
}

@keyframes orbit-spin {
  from {
    transform: rotate(-35deg);
  }

  to {
    transform: rotate(325deg);
  }

}


/* Aurelia café preview: matching the warm template palette */
.cafe,
.cafe .template-content {
  background: #f0bc54;
  color: #25352e;
}

.cafe .template-top {
  background: #f7f0e2;
}

.cafe .coffee {
  background: radial-gradient(circle, #f7f0e2 0 18%, #25352e 19% 45%, #e6d8c0 46% 54%, transparent 55%);
}

.cafe .template-content:before {
  border-color: #25352e44;
}


/* Monogram barber preview: match the completed barbershop template */
.barber,
.barber .template-content {
  background: #17201d;
  color: #ebe6d8;
}

.barber .template-top {
  background: #28342f;
}

.barber-ring {
  border-color: #b7cf68;
}

.barber .template-content:before {
  border-color: #ebe6d833;
}


/* Common Ground studio preview: match the multipage studio template */
.studio,
.studio .template-content {
  background: #a8c9e7;
  color: #213039;
}

.studio .template-top {
  background: #f6f0e6;
  color: #213039;
}

.studio-ball {
  background: #fa9b7a;
}

.studio .template-content:before {
  border-color: #21303933;
}


/* Northline Build Co. preview: distinct construction palette */
.studio,
.studio .template-content {
  background: #172b3a;
  color: #edf0ed;
}

.studio .template-top {
  background: #f4c443;
  color: #172b3a;
}

.studio-ball {
  background: #d75436;
}

.studio .template-content:before {
  border-color: #edf0ed33;
}


/* Move Better preview: match the fitness coach template */
.fitness,
.fitness .template-content {
  background: #d7ff46;
  color: #14201e;
}

.fitness .template-top {
  background: #14201e;
  color: #f5f3ed;
}

.fitness-lines {
  color: #ff775f;
}

.fitness .template-content:before {
  border-color: #14201e33;
}


/* Browser-style template windows */
.template {
  transform-origin: center center;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease;
  box-shadow: 0 0 0 1px transparent;
}

.template:hover {
  filter: brightness(1.03);
}

.template-image {
  border-radius: 10px;
  box-shadow: 0 18px 38px #10182025;
  overflow: hidden;
}

.template-top {
  position: relative;
  min-height: 42px;
  padding: 13px 17px 10px 49px;
  border-bottom: 1px solid #ffffff28;
}

.template-top::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 11px 0 0 currentColor, 22px 0 0 currentColor;
  opacity: .45;
}

.template-badge {
  position: absolute;
  z-index: 6;
  top: 54px;
  right: 13px;
  padding: 7px 9px;
  border-radius: 999px;
  background: #14201e;
  color: #f5f3ed;
  font: 8px "DM Mono", monospace;
  letter-spacing: .08em;
  box-shadow: 0 5px 13px #0003;
  transition: transform .28s ease, background .28s ease;
}

.template:hover .template-badge {
  transform: translateY(-4px);
  background: #ff775f;
}

.template:hover .template-content p {
  transform: translateY(-5px);
}

.template-content p {
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}


/* Exact visual match for the completed building-firm preview. */
.studio,
.studio .template-content {
  background: #172b3a;
  color: #edf0ed;
}

.studio .template-top {
  background: #f4c443;
  color: #172b3a;
}

.studio .studio-ball {
  background: #d75436;
}

.studio .template-content > span {
  color: #f4c443;
}

.studio .template-badge {
  background: #f4c443;
  color: #172b3a;
}


/* Preview-specific template identities */
.cafe .template-badge {
  background: #25352e;
  color: #f7f0e2;
}

.barber .template-badge {
  background: #b7cf68;
  color: #17201d;
}

.fitness .template-badge {
  background: #d7ff46;
  color: #14201e;
}


/* Clear, customer-facing template showcase */
#templates .heading > p:last-child {
  max-width: 640px;
}

.template-intro {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  max-width: 860px;
  margin: 0 0 42px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.template-intro span,
.template-category {
  font: 9px "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.template-intro span {
  flex: 0 0 145px;
  color: var(--accent);
}

.template-intro p {
  max-width: 590px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.template-grid {
  gap: 50px 28px;
}

.template {
  overflow: visible;
}

.template::after {
  inset: 0 0 116px;
  border-radius: 10px;
}

.template-top,
.template-content {
  overflow: hidden;
}

.template-top {
  border-radius: 10px 10px 0 0;
}

.template-content {
  border-radius: 0;
}

.template-hover {
  display: none;
}

.template footer {
  min-height: 116px;
  gap: 18px;
  padding: 18px 2px 0;
  align-items: flex-start;
  border-top: 0;
}

.template footer > div {
  min-width: 0;
}

.template footer strong {
  display: block;
  margin: 6px 0 7px;
  font-size: 18px;
  letter-spacing: -.04em;
}

.template footer p {
  max-width: 330px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.template-category {
  color: var(--accent);
}

.template-open {
  flex: 0 0 auto;
  margin-top: 3px;
  padding: 8px 0;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  font: 10px "DM Mono", monospace;
  transition: color .22s ease, transform .22s ease;
}

.template-open b {
  margin-left: 4px;
  font-size: 13px;
  transition: transform .22s ease;
}

.template:hover .template-open {
  color: var(--accent);
  transform: translateX(3px);
}

.template:hover .template-open b {
  display: inline-block;
  transform: translate(2px, -2px);
}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media (max-width: 640px) {
  .template-intro {
    display: block;
    margin-bottom: 32px;
  }

  .template-intro span {
    display: block;
    margin-bottom: 10px;
  }

  .template footer {
    min-height: 126px;
  }

  .template-open {
    font-size: 9px;
  }

}


/* Contact-form submission states */
.form-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.send-button:disabled {
  cursor: wait;
  opacity: .72;
  transform: none !important;
}

.form-status.is-error {
  color: #ff8d7a;
}


/* Lightweight calls-to-action: smooth CSS motion, no pointer-follow lag */
.nav-cta.smooth-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.nav-cta.smooth-cta i {
  margin-left: 0;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.nav-cta.smooth-cta:hover {
  background: #ffffff0d;
  border-color: #ffffff42;
  color: #fff;
  box-shadow: 0 8px 20px #00000016;
}

.nav-cta.smooth-cta:hover i {
  transform: translate(2px, -2px);
}

.send-button.soft-send {
  width: auto;
  min-width: 176px;
  justify-self: start;
  justify-content: center;
  gap: 11px;
  border: 1px solid #c8f15b;
  border-radius: 999px;
  padding: 13px 18px;
  box-shadow: 0 6px 16px #c8f15b12;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), background-color .22s ease, box-shadow .22s ease;
}

.send-button.soft-send b {
  display: inline-block;
  line-height: 1;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.send-button.soft-send:hover {
  background: #d6fb72;
  box-shadow: 0 10px 22px #c8f15b2b;
  transform: translateY(-2px);
}

.send-button.soft-send:hover b {
  transform: translate(2px, -2px);
}

.send-button.soft-send:active {
  box-shadow: 0 3px 9px #c8f15b22;
  transform: translateY(0);
}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .nav-cta.smooth-cta,
  .nav-cta.smooth-cta i,
  .send-button.soft-send,
  .send-button.soft-send b {
    transition: none;
  }

}


/* Give the featured Growth action the same responsive feel as the other pricing links */
.featured .price-button {
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), background-color .22s ease, box-shadow .22s ease, color .22s ease;
}

.featured .price-button b {
  display: inline-block;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.featured .price-button:hover {
  background: #d6fb72;
  color: #12131a;
  box-shadow: 0 10px 22px #c8f15b2b;
  transform: translateY(-2px);
}

.featured .price-button:hover b {
  transform: translate(2px, -2px);
}

.featured .price-button:active {
  box-shadow: 0 3px 9px #c8f15b22;
  transform: translateY(0);
}


/* Calm hover emphasis for the three process steps */
.process-copy li {
  cursor: default;
  transition: border-color .24s ease, background-color .24s ease;
}

.process-copy li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: -5px;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), background-color .24s ease, border-color .24s ease, color .24s ease;
}

.process-copy li > div {
  transition: transform .24s cubic-bezier(.2, .8, .2, 1);
}

.process-copy li:hover {
  border-color: #65ddea66;
}

.process-copy li:hover > span {
  background: #65ddea14;
  border-color: #65ddea66;
  color: #d8fbff;
  transform: scale(1.08);
}

.process-copy li:hover > div {
  transform: translateX(4px);
}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .process-copy li,
  .process-copy li > span,
  .process-copy li > div {
    transition: none;
  }

}


/* Subtle staggered movement inside pricing cards */
.price-card > .plan,
.price-card > h3,
.price-card > .plan-copy,
.price-card > .cost,
.price-card > ul,
.price-card > .price-button {
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), color .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.price-card:hover > .plan {
  transform: translateY(-2px);
}

.price-card:hover > h3 {
  transform: translateY(-3px);
}

.price-card:hover > .plan-copy {
  transform: translateY(-3px);
}

.price-card:hover > .cost {
  transform: translateY(-4px);
}

.price-card:hover > ul {
  transform: translateY(-3px);
}

.price-card:hover > .price-button {
  transform: translateY(-3px);
}

.price-card ul li {
  transition: transform .24s cubic-bezier(.2, .8, .2, 1);
}

.price-card:hover ul li {
  transform: translateX(3px);
}

.price-card:hover ul li:nth-child(2) {
  transition-delay: .02s;
}

.price-card:hover ul li:nth-child(3) {
  transition-delay: .04s;
}

.price-card:hover ul li:nth-child(4) {
  transition-delay: .06s;
}

.price-card:hover ul li:nth-child(5) {
  transition-delay: .08s;
}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .price-card > .plan,
  .price-card > h3,
  .price-card > .plan-copy,
  .price-card > .cost,
  .price-card > ul,
  .price-card > .price-button,
  .price-card ul li {
    transition: none;
  }

}


/* Bottom-up hover reveal for every pricing-card layer */
.price-card > .plan,
.price-card > h3,
.price-card > .plan-copy,
.price-card > .cost,
.price-card > ul,
.price-card > .price-button {
  transform: translateY(9px);
  transition: transform .48s cubic-bezier(.16, 1, .3, 1), color .28s ease, border-color .28s ease, background-color .28s ease, box-shadow .28s ease;
}

.price-card > .plan {
  transition-delay: .01s;
}

.price-card > h3 {
  transition-delay: .03s;
}

.price-card > .plan-copy {
  transition-delay: .05s;
}

.price-card > .cost {
  transition-delay: .07s;
}

.price-card > ul {
  transition-delay: .09s;
}

.price-card > .price-button {
  transition-delay: .11s;
}

.price-card:hover > .plan,
.price-card:hover > h3,
.price-card:hover > .plan-copy,
.price-card:hover > .cost,
.price-card:hover > ul,
.price-card:hover > .price-button {
  transform: translateY(0);
}

.price-card ul li {
  transform: translateY(5px);
  transition: transform .42s cubic-bezier(.16, 1, .3, 1);
}

.price-card:hover ul li {
  transform: translateY(0);
}

.price-card .most {
  transform: translate(-50%, 5px);
  transition: transform .48s cubic-bezier(.16, 1, .3, 1);
}

.price-card:hover .most {
  transform: translate(-50%, 0);
}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .price-card > .plan,
  .price-card > h3,
  .price-card > .plan-copy,
  .price-card > .cost,
  .price-card > ul,
  .price-card > .price-button,
  .price-card ul li,
  .price-card .most {
    transform: none;
  }

}


/* Title motion replays whenever its section re-enters the viewport */
@keyframes title-return {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

.hero-copy.title-in-view h1,
.heading.title-in-view h2,
.process-copy.title-in-view h2,
.contact-inner.title-in-view .contact-title {
  animation: title-return .78s cubic-bezier(.16, 1, .3, 1) both;
}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-copy.title-in-view h1,
  .heading.title-in-view h2,
  .process-copy.title-in-view h2,
  .contact-inner.title-in-view .contact-title {
    animation: none;
  }

}


/* Animated privacy-notice acknowledgement */
.contact-form .privacy-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 9px;
  margin-top: 2px;
  color: #bac0ce;
  font: 10px/1.55 Manrope, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.privacy-check input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.privacy-checkmark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid #596074;
  border-radius: 5px;
  color: transparent;
  font: 700 11px/1 Manrope, sans-serif;
  transform: scale(.92);
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), background-color .24s ease, border-color .24s ease, color .18s ease;
}

.privacy-check:hover .privacy-checkmark {
  border-color: #c8f15b;
  transform: scale(1);
}

.privacy-check input:checked + .privacy-checkmark {
  background: #c8f15b;
  border-color: #c8f15b;
  color: #182023;
  transform: scale(1);
}

.privacy-check input:focus-visible + .privacy-checkmark {
  outline: 2px solid #c8f15b;
  outline-offset: 3px;
}

.privacy-check a {
  color: #e9f2d1;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}

.privacy-check a:hover {
  color: #c8f15b;
}

.privacy-summary {
  margin: -5px 0 2px 29px;
  color: #858b9d;
  font: 9px/1.55 DM Mono, monospace;
}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .privacy-checkmark,
  .privacy-check a {
    transition: none;
  }

}

.privacy-check input {
  padding: 0;
  border: 0;
  background: transparent;
}


/* Inline privacy notice: opens in place without moving the contact layout */
.privacy-details {
  margin: -5px 0 2px 29px;
  color: #9fa6b7;
  font: 9px/1.55 DM Mono, monospace;
}

.privacy-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: fit-content;
  gap: 10px;
  color: #e9f2d1;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}

.privacy-details summary::-webkit-details-marker {
  display: none;
}

.privacy-details summary:hover {
  color: #c8f15b;
}

.privacy-details summary span {
  display: inline-block;
  color: #c8f15b;
  font-size: 14px;
  line-height: 1;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1);
}

.privacy-details[open] summary span {
  transform: rotate(45deg);
}

.privacy-panel {
  display: grid;
  gap: 8px;
  max-width: 420px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #41465a;
  border-radius: 8px;
  background: #222635;
  animation: privacy-open .28s cubic-bezier(.2, .8, .2, 1) both;
}

.privacy-panel p {
  margin: 0;
}

.privacy-panel strong {
  color: #e9f2d1;
  font-weight: 700;
}

.privacy-panel a {
  color: #c8f15b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes privacy-open {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .privacy-details summary span,
  .privacy-panel {
    animation: none;
    transition: none;
  }

}


/* Compact, colour-matched template previews */
.template-grid {
  max-width: 1060px;
  gap: 38px 24px;
}

.template {
  isolation: isolate;
}

.template::before {
  content: attr(data-preview);
  position: absolute;
  z-index: 5;
  top: 54px;
  left: 13px;
  padding: 6px 8px;
  border-radius: 4px;
  font: 8px "DM Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 5px 12px #00000016;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease;
}

.template:hover::before {
  box-shadow: 0 8px 16px #00000022;
  transform: translateY(-3px);
}

.template-content {
  height: 235px;
}

.template-content p {
  font-size: clamp(34px, 4.2vw, 54px);
  bottom: 37px;
}

.template-content > span {
  bottom: 18px;
}

.template footer {
  min-height: 102px;
  padding-top: 15px;
}

.template footer strong {
  margin: 4px 0 5px;
  font-size: 17px;
}

.template footer p {
  font-size: 11px;
  line-height: 1.45;
}

.template::after {
  inset: 0 0 102px;
}

.cafe::before {
  background: #f7f0e2;
  color: #25352e;
}

.barber::before {
  background: #b7cf68;
  color: #17201d;
}

.studio::before {
  background: #f4c443;
  color: #172b3a;
}

.fitness::before {
  background: #14201e;
  color: #f5f3ed;
}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media (max-width: 640px) {
  .template-grid {
    gap: 34px;
  }

  .template-content {
    height: 215px;
  }

  .template footer {
    min-height: 112px;
  }

  .template::after {
    inset-bottom: 112px;
  }

}


/* Simple template cards: title and one-line description above each preview */
.template {
  background: transparent !important;
}

.template-card-heading {
  margin: 0 0 13px;
  color: var(--ink);
}

.template-card-heading > span {
  display: block;
  margin-bottom: 6px;
  color: var(--lime);
  font: 9px "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.template-card-heading h3 {
  margin: 0 0 5px;
  font: 700 20px/1 "Space Grotesk", sans-serif;
  letter-spacing: -.05em;
}

.template-card-heading p {
  max-width: 380px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.template::before,
.template::after {
  display: none;
}

.template-content {
  border-radius: 0 0 10px 10px;
}

.template:hover .template-card-heading h3 {
  color: #d9ff76;
}

.template-card-heading h3 {
  transition: color .24s ease;
}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media (max-width: 640px) {
  .template-card-heading h3 {
    font-size: 19px;
  }

}


/* Personal about section with replaceable photo placeholders */
.about-section {
  padding-top: 112px;
  padding-bottom: 112px;
}

.about-layout {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  align-items: center;
  gap: clamp(46px, 8vw, 118px);
}

.about-copy h2 {
  max-width: 550px;
  font-size: clamp(43px, 5.1vw, 70px);
}

.about-lede {
  max-width: 490px;
  margin: 28px 0 0;
  color: #d4d5dd;
  font-size: 15px;
  line-height: 1.75;
}

.about-detail {
  max-width: 440px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.about-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding-bottom: 7px;
  border-bottom: 1px solid #c8f15b;
  color: #eaff9a;
  font: 700 12px "Space Grotesk", sans-serif;
  transition: color .22s ease, gap .22s cubic-bezier(.2, .8, .2, 1);
}

.about-link b {
  font-size: 17px;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.about-link:hover {
  gap: 14px;
  color: #fff;
}

.about-link:hover b {
  transform: translate(2px, -2px);
}

.about-photos {
  position: relative;
  min-height: 490px;
}

.about-photos::before {
  content: "";
  position: absolute;
  inset: 7% 10% 9% 3%;
  border: 1px solid #ffffff18;
  border-radius: 50%;
  transform: rotate(-14deg);
}

.about-photo {
  position: absolute;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 13px;
  border: 1px solid #ffffff2e;
  background-image: var(--photo, none), linear-gradient(135deg, #314a45, #1b2631 55%, #99bd80);
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 50px #00000038;
  isolation: isolate;
  transition: transform .78s cubic-bezier(.16, 1, .3, 1), box-shadow .36s ease;
}

.about-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 45%, #0a0d10b8);
}

.about-photo-main {
  z-index: 2;
  inset: 8% auto auto 20%;
  width: 48%;
  height: 72%;
  background-image: var(--photo, none), linear-gradient(145deg, #2a3a50, #8f75aa 52%, #c8f15b);
  transform: translateY(36px) rotate(-5deg);
}

.about-photo-top {
  z-index: 1;
  top: 0;
  right: 6%;
  width: 35%;
  height: 37%;
  background-image: var(--photo, none), linear-gradient(145deg, #d5aa66, #6d4855 55%, #25384b);
  transform: translateY(22px) rotate(7deg);
}

.about-photo-bottom {
  z-index: 3;
  right: 10%;
  bottom: 0;
  width: 39%;
  height: 34%;
  background-image: var(--photo, none), linear-gradient(145deg, #1e3943, #5c8073 54%, #b0d85f);
  transform: translateY(28px) rotate(-4deg);
}

.about-photos.visible .about-photo-main {
  transform: translateY(0) rotate(-5deg);
  transition-delay: .08s;
}

.about-photos.visible .about-photo-top {
  transform: translateY(0) rotate(7deg);
  transition-delay: .2s;
}

.about-photos.visible .about-photo-bottom {
  transform: translateY(0) rotate(-4deg);
  transition-delay: .32s;
}

.about-photos:hover .about-photo-main {
  transform: translate(-4px, -5px) rotate(-6deg);
}

.about-photos:hover .about-photo-top {
  transform: translate(5px, -6px) rotate(8deg);
}

.about-photos:hover .about-photo-bottom {
  transform: translate(4px, 3px) rotate(-5deg);
}

.photo-label,
.photo-number {
  position: relative;
  z-index: 1;
  font: 9px "DM Mono", monospace;
  letter-spacing: .08em;
}

.photo-label {
  color: #f4f3f0;
}

.photo-number {
  color: #d9ff76;
}

.about-stamp {
  position: absolute;
  z-index: 4;
  bottom: 9%;
  left: 5%;
  display: grid;
  place-items: center;
  width: 104px;
  aspect-ratio: 1;
  border: 1px solid #c8f15b;
  border-radius: 50%;
  background: #11131ce8;
  color: #c8f15b;
  font: 8px/1.35 "DM Mono", monospace;
  letter-spacing: .08em;
  text-align: center;
  transform: rotate(-12deg);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.about-photos:hover .about-stamp {
  transform: rotate(5deg);
}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media (max-width: 800px) {
  .about-layout {
    grid-template-columns: 1fr;
  }

  .about-photos {
    max-width: 620px;
    width: 100%;
    min-height: 440px;
  }

}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media (max-width: 520px) {
  .about-section {
    padding-top: 84px;
    padding-bottom: 84px;
  }

  .about-photos {
    min-height: 360px;
  }

  .about-stamp {
    width: 82px;
  }

}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .about-photo,
  .about-stamp,
  .about-link,
  .about-link b {
    transition: none;
  }

}


/* Keep the expanded navigation balanced on wide screens */
.nav nav {
  gap: clamp(14px, 1.8vw, 28px);
}


/* Rounded photo frames and dedicated About-section scroll motion */
.about-photo {
  border-radius: 22px;
}

.about-photo-main {
  border-radius: 28px;
}

.about-photos.about-in-view .about-photo-main {
  transform: translateY(0) rotate(-5deg);
  transition-delay: .08s;
}

.about-photos.about-in-view .about-photo-top {
  transform: translateY(0) rotate(7deg);
  transition-delay: .2s;
}

.about-photos.about-in-view .about-photo-bottom {
  transform: translateY(0) rotate(-4deg);
  transition-delay: .32s;
}

.about-copy.about-in-view h2 {
  animation: title-return .82s cubic-bezier(.16, 1, .3, 1) both;
}

.about-copy.about-in-view .about-lede,
.about-copy.about-in-view .about-detail,
.about-copy.about-in-view .about-link {
  animation: about-rise .72s cubic-bezier(.16, 1, .3, 1) both;
}

.about-copy.about-in-view .about-lede { animation-delay: .12s; }
.about-copy.about-in-view .about-detail { animation-delay: .2s; }
.about-copy.about-in-view .about-link { animation-delay: .28s; }

@keyframes about-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-copy.about-in-view h2,
  .about-copy.about-in-view .about-lede,
  .about-copy.about-in-view .about-detail,
  .about-copy.about-in-view .about-link {
    animation: none;
  }
}
/* Extra-smooth motion for the About photo composition */
.about-photo {
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 1.05s cubic-bezier(.22, .82, .24, 1), box-shadow .45s ease;
}

.about-photos.about-in-view .about-photo-main {
  transition-delay: .1s;
}

.about-photos.about-in-view .about-photo-top {
  transition-delay: .24s;
}

.about-photos.about-in-view .about-photo-bottom {
  transition-delay: .38s;
}

@media (prefers-reduced-motion: reduce) {
  .about-photo {
    will-change: auto;
  }
}
/* Match the template cards and About stamp to the smooth photo reveal */
.template.reveal {
  transform: translateY(34px) scale(.985);
  transition: opacity .72s ease, transform 1.05s cubic-bezier(.22, .82, .24, 1), filter .35s ease;
  will-change: transform, opacity;
}

.template.reveal.visible {
  transform: translateY(0) scale(1);
}

.template-grid .template:nth-child(1) { transition-delay: .04s; }
.template-grid .template:nth-child(2) { transition-delay: .14s; }
.template-grid .template:nth-child(3) { transition-delay: .24s; }
.template-grid .template:nth-child(4) { transition-delay: .34s; }

.about-stamp {
  opacity: .7;
  transform: translateY(26px) rotate(-18deg);
  transition: transform 1.05s cubic-bezier(.22, .82, .24, 1), opacity .6s ease;
}

.about-photos.about-in-view .about-stamp {
  opacity: 1;
  transform: translateY(0) rotate(-12deg);
  transition-delay: .46s;
}

.about-photos.about-in-view:hover .about-stamp {
  transform: translateY(-2px) rotate(5deg);
}

@media (prefers-reduced-motion: reduce) {
  .template.reveal,
  .about-stamp {
    transition: none;
    will-change: auto;
  }
}
/* Expandable package guide beneath the pricing cards */
.pricing-explorer {
  max-width: 780px;
  margin: 32px auto 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pricing-explorer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 2px;
  color: #d9dbe4;
  cursor: pointer;
  font: 700 12px "Space Grotesk", sans-serif;
  list-style: none;
  transition: color .22s ease;
}

.pricing-explorer summary::-webkit-details-marker { display: none; }
.pricing-explorer summary:hover { color: #d9ff76; }

.pricing-explorer summary span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #ffffff32;
  border-radius: 50%;
  color: #c8f15b;
  font-size: 15px;
  line-height: 1;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .22s ease;
}

.pricing-explorer[open] summary span {
  border-color: #c8f15b;
  transform: rotate(45deg);
}

.pricing-explorer-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 5px 0 24px;
  animation: pricing-menu-open .38s cubic-bezier(.16, 1, .3, 1) both;
}

.pricing-explorer-panel article {
  padding: 15px;
  border: 1px solid #ffffff16;
  background: #ffffff05;
}

.pricing-explorer-panel span {
  color: #c8f15b;
  font: 9px "DM Mono", monospace;
  letter-spacing: .07em;
}

.pricing-explorer-panel h3 {
  margin: 12px 0 7px;
  font: 700 15px "Space Grotesk", sans-serif;
  letter-spacing: -.03em;
}

.pricing-explorer-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

@keyframes pricing-menu-open {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
  .pricing-explorer-panel { grid-template-columns: 1fr; gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-explorer summary span,
  .pricing-explorer-panel { animation: none; transition: none; }
}
/* Compact, menu-style package comparison */
.pricing-explorer {
  max-width: 560px;
  margin: 32px 0 0 auto;
}

.pricing-explorer summary {
  padding: 13px 0;
  font-size: 10px;
  letter-spacing: .01em;
}

.pricing-explorer-panel {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0 0 10px;
}

.pricing-explorer-panel article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid #ffffff16;
  background: transparent;
}

.pricing-explorer-panel article:last-child {
  border-bottom: 0;
}

.pricing-menu-copy span {
  color: #c8f15b;
  font: 8px "DM Mono", monospace;
  letter-spacing: .1em;
}

.pricing-menu-copy h3 {
  margin: 5px 0 4px;
  font: 700 13px "Space Grotesk", sans-serif;
  letter-spacing: -.02em;
}

.pricing-menu-copy p {
  max-width: 390px;
  font-size: 10px;
  line-height: 1.55;
}

.pricing-explorer-panel article > strong {
  padding-top: 2px;
  color: #f4f3f0;
  font: 700 16px "Space Grotesk", sans-serif;
  letter-spacing: -.05em;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .pricing-explorer {
    max-width: none;
    margin-left: 0;
  }
}
/* Link-style comparison control beneath the Premium card */
.pricing-explorer {
  max-width: none;
  margin: 18px 0 0;
  border: 0;
}

.pricing-explorer summary {
  width: fit-content;
  margin-left: auto;
  padding: 5px 0;
  border-bottom: 1px solid #c8f15b66;
  color: #bfc3cf;
  font: 9px "DM Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pricing-explorer summary:hover {
  color: #d9ff76;
  border-color: #d9ff76;
}

.pricing-explorer summary span {
  width: auto;
  height: auto;
  margin-left: 2px;
  border: 0;
  border-radius: 0;
  font-size: 13px;
}

.pricing-explorer[open] summary span {
  border-color: transparent;
}

.pricing-explorer-panel {
  width: 100%;
  margin-top: 18px;
  padding-top: 2px;
  border-top: 1px solid #ffffff16;
}

.pricing-explorer-panel article {
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 700px) {
  .pricing-explorer summary {
    margin-left: 0;
  }
}
/* Smooth link and menu-content motion for package details */
.pricing-explorer summary {
  position: relative;
  gap: 8px;
  transition: color .26s ease, letter-spacing .26s ease;
}

.pricing-explorer summary::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: #d9ff76;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1);
}

.pricing-explorer summary:hover,
.pricing-explorer[open] summary {
  letter-spacing: .085em;
}

.pricing-explorer summary:hover::after,
.pricing-explorer[open] summary::after {
  transform: scaleX(1);
  transform-origin: left;
}

.pricing-explorer summary span {
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), color .26s ease;
}

.pricing-explorer[open] .pricing-explorer-panel {
  animation-duration: .52s;
}

.pricing-explorer[open] .pricing-explorer-panel article {
  animation: pricing-menu-row .48s cubic-bezier(.16, 1, .3, 1) both;
}

.pricing-explorer[open] .pricing-explorer-panel article:nth-child(2) { animation-delay: .08s; }
.pricing-explorer[open] .pricing-explorer-panel article:nth-child(3) { animation-delay: .16s; }

.pricing-explorer[open] .pricing-menu-copy span,
.pricing-explorer[open] .pricing-menu-copy h3,
.pricing-explorer[open] .pricing-menu-copy p,
.pricing-explorer[open] .pricing-explorer-panel article > strong {
  animation: pricing-menu-text .42s cubic-bezier(.16, 1, .3, 1) both;
}

.pricing-explorer[open] .pricing-menu-copy h3 { animation-delay: .04s; }
.pricing-explorer[open] .pricing-menu-copy p { animation-delay: .08s; }
.pricing-explorer[open] .pricing-explorer-panel article > strong { animation-delay: .1s; }

@keyframes pricing-menu-row {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pricing-menu-text {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-explorer summary,
  .pricing-explorer summary::after,
  .pricing-explorer summary span,
  .pricing-explorer[open] .pricing-explorer-panel article,
  .pricing-explorer[open] .pricing-menu-copy span,
  .pricing-explorer[open] .pricing-menu-copy h3,
  .pricing-explorer[open] .pricing-menu-copy p,
  .pricing-explorer[open] .pricing-explorer-panel article > strong {
    animation: none;
    transition: none;
  }
}
/* Flexible post-launch website updates */
.pricing-explorer-panel article.website-updates {
  border-top: 1px dashed #c8f15b45;
  margin-top: 2px;
}

.pricing-explorer-panel article > .pricing-note {
  color: #c8f15b;
  font: 9px "DM Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* ============================================================================
   HERO TECHNOLOGY NOTE
============================================================================ */
.stats {
  flex-wrap: wrap;
}

.tech-stack {
  min-width: 142px;
}
/* ============================================================================
   STATISTICS HOVER INTERACTIONS
============================================================================ */
.stats > div {
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), color 360ms ease;
}

.stats > div strong,
.stats > div span {
  transition: color 360ms ease;
}

@media (hover: hover) {
  .stats > div:hover {
    transform: translateY(-5px);
  }

  .stats > div:hover strong {
    color: var(--accent);
  }

  .stats > div:hover span {
    color: rgba(255, 255, 255, 0.78);
  }
}
/* ============================================================================
   HERO CODE LANGUAGE CARD
============================================================================ */
.code-card {
  min-width: 126px;
  display: grid;
  gap: 7px;
  padding: 13px 14px;
  color: #e9ffd0;
  background: linear-gradient(145deg, rgba(67, 108, 82, 0.94), rgba(29, 48, 39, 0.94));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: code-card-float 6s ease-in-out infinite;
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 460ms ease, border-color 460ms ease;
}

.code-card span {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0.82;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 360ms ease, color 360ms ease;
}

.code-card b {
  color: #baf477;
  font-weight: 500;
}

@keyframes code-card-float {
  50% {
    transform: translateY(-12px);
  }
}

@media (hover: hover) {
  .code-card:hover {
    animation-play-state: paused;
    transform: translateY(-7px) rotate(-1deg);
    border-color: rgba(186, 244, 119, 0.48);
    box-shadow: 0 24px 46px rgba(0, 0, 0, 0.38), 0 0 30px rgba(140, 224, 112, 0.13);
  }

  .code-card:hover span {
    opacity: 1;
    color: #fff;
  }

  .code-card:hover span:nth-child(1) {
    transform: translateX(2px);
  }

  .code-card:hover span:nth-child(2) {
    transform: translateX(5px);
  }

  .code-card:hover span:nth-child(3) {
    transform: translateX(8px);
  }
}
/* ============================================================================
   SECTION SCROLL SNAPPING
============================================================================ */
@media (min-width: 769px) {
  html {
    scroll-snap-type: none;
    scroll-padding-top: 82px;
  }

  .hero,
  .section,
  .contact {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    scroll-margin-top: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}
/* ============================================================================
   FULL-SCREEN TEMPLATE SECTION
============================================================================ */
@media (min-width: 900px) {
  #templates {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(46px, 6vh, 76px);
    padding-bottom: clamp(46px, 6vh, 76px);
  }

  #templates .heading {
    margin-bottom: 15px;
  }

  #templates .heading h2 {
    margin: 10px 0 12px;
    font-size: clamp(40px, 4.4vw, 58px);
  }

  #templates .heading > p:last-child {
    max-width: 720px;
    margin-top: 0;
    font-size: 13px;
    line-height: 1.55;
  }

  #templates .template-intro {
    display: none;
  }

  #templates .template-grid {
    max-width: none;
    gap: 26px 30px;
  }

  #templates .template-card-heading {
    margin-bottom: 9px;
  }

  #templates .template-card-heading > span {
    margin-bottom: 4px;
    font-size: 8px;
  }

  #templates .template-card-heading h3 {
    margin-bottom: 3px;
    font-size: 18px;
  }

  #templates .template-card-heading p {
    font-size: 11px;
    line-height: 1.35;
  }

  #templates .template-content {
    height: 150px;
  }

  #templates .template-top {
    height: 31px;
    padding: 8px 12px;
  }

  #templates .template-content p {
    bottom: 25px;
    font-size: clamp(30px, 3.3vw, 42px);
  }

  #templates .template-content > span {
    bottom: 11px;
    font-size: 7px;
  }
}
/* Used only while the JavaScript section glide is running. */
html.is-section-settling {
  scroll-behavior: auto;
}
/* ============================================================================
   ABOUT SECTION STRIPE OFFSET
============================================================================ */
@media (min-width: 900px) {
  #about {
    scroll-margin-top: 195px;
  }
}
/* ============================================================================
   FULL-VIEWPORT SECTION FRAMING
============================================================================ */
@media (min-width: 900px) {
  .section,
  .contact,
  #templates {
    min-height: calc(100vh + 82px);
    box-sizing: border-box;
  }

  #about {
    min-height: calc(100vh + 195px);
  }
}
/* ============================================================================
   CONTACT AND FOOTER VIEW
============================================================================ */
@media (min-width: 900px) {
  .contact {
    min-height: calc(100vh - 170px);
  }
}
/* ============================================================================
   TEMPLATE SECTION TOP OFFSET
============================================================================ */
@media (min-width: 900px) {
  #templates {
    scroll-margin-top: 42px;
  }
}
/* ============================================================================
   MODERN ABOUT PHOTO FRAMES
============================================================================ */
.about-photo {
  border: 1px solid rgba(236, 255, 189, 0.48);
  outline: 1px solid rgba(200, 241, 91, 0.18);
  outline-offset: 5px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.about-photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.about-photo-main {
  border-radius: 30px 12px 30px 12px;
}

.about-photo-main::before {
  border-radius: 23px 7px 23px 7px;
}

.about-photo-top {
  border-radius: 18px 18px 7px 18px;
}

.about-photo-top::before {
  border-radius: 12px 12px 3px 12px;
}

.about-photo-bottom {
  border-radius: 8px 22px 22px 22px;
}

.about-photo-bottom::before {
  border-radius: 3px 16px 16px 16px;
}

.about-photos.about-in-view .about-photo {
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.34), 0 0 24px rgba(200, 241, 91, 0.08);
}

@media (hover: hover) {
  .about-photos:hover .about-photo {
    box-shadow: 0 30px 62px rgba(0, 0, 0, 0.38), 0 0 28px rgba(200, 241, 91, 0.12);
  }
}
/* ============================================================================
   TEMPLATE HEADING SPACING
============================================================================ */
@media (min-width: 900px) {
  #templates .heading {
    position: relative;
    top: -52px;
  }
}
/* ============================================================================
   SIMPLE BLUE VIOLET PHOTO FRAMES
============================================================================ */
.about-photo {
  outline: 0;
  border: 1px solid rgba(159, 145, 255, 0.82);
  box-shadow: 0 20px 48px rgba(16, 19, 54, 0.38);
}

.about-photo::before {
  display: none;
}

.about-photo-main {
  border-color: rgba(165, 151, 255, 0.9);
}

.about-photo-top {
  border-color: rgba(104, 182, 255, 0.88);
}

.about-photo-bottom {
  border-color: rgba(126, 130, 255, 0.9);
}

.about-photos.about-in-view .about-photo,
.about-photos:hover .about-photo {
  box-shadow: 0 22px 52px rgba(16, 19, 54, 0.42);
}
/* ============================================================================
   ABOUT PHOTO HOVER MOTION
============================================================================ */
@media (hover: hover) {
  .about-photos.about-in-view:hover .about-photo {
    transition-delay: 0s;
  }

  .about-photos.about-in-view:hover .about-photo-main {
    transform: translate(-9px, -10px) rotate(-7deg);
  }

  .about-photos.about-in-view:hover .about-photo-top {
    transform: translate(10px, -12px) rotate(9deg);
  }

  .about-photos.about-in-view:hover .about-photo-bottom {
    transform: translate(8px, 7px) rotate(-6deg);
  }
}
/* ============================================================================
   TEMPLATES SECTION ATMOSPHERE
============================================================================ */
#templates {
  position: relative;
  isolation: isolate;
}

#templates::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 50%;
  bottom: 0;
  width: 100vw;
  transform: translateX(50%);
  background:
    radial-gradient(circle at 13% 24%, rgba(122, 107, 255, 0.22), transparent 31%),
    radial-gradient(circle at 82% 72%, rgba(66, 143, 218, 0.14), transparent 34%),
    linear-gradient(135deg, #10111c 0%, #161529 52%, #101722 100%);
  border-top: 1px solid rgba(177, 164, 255, 0.16);
  border-bottom: 1px solid rgba(121, 174, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), inset 0 -1px 0 rgba(255, 255, 255, 0.025);
}
/* ============================================================================
   LARGER CONTACT FORM PANEL
============================================================================ */
@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 0.86fr 1.14fr;
    gap: 5vw;
  }

  .contact-form {
    padding: 30px;
    gap: 16px;
  }
}
/* ============================================================================
   CENTERED CONTACT SECTION
============================================================================ */
@media (min-width: 900px) {
  .contact-inner.contact-layout {
    min-height: calc(100vh - 170px);
    padding-top: 0;
    padding-bottom: 0;
    align-content: center;
    align-items: center;
  }
}
/* ============================================================================
   CENTERED PROCESS SECTION
============================================================================ */
@media (min-width: 900px) {
  #process {
    padding-top: 0;
    padding-bottom: 0;
    align-content: center;
  }
}
/* ============================================================================
   PROCESS CONTENT VERTICAL OFFSET
============================================================================ */
@media (min-width: 900px) {
  #process .process-art,
  #process .process-copy {
    position: relative;
    top: -42px;
  }
}
/* ============================================================================
   ABOUT APPROACH STRIP
============================================================================ */
.about-approach {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 52px;
  padding-top: 19px;
  border-top: 1px solid rgba(149, 142, 255, 0.28);
}

.about-approach p {
  max-width: 440px;
  margin: 0;
  color: #d9dcf5;
  font: 600 13px/1.5 "Space Grotesk", sans-serif;
  letter-spacing: -0.02em;
}

.about-approach-items {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #9eaeff;
  font: 8px "DM Mono", monospace;
  letter-spacing: 0.09em;
}

.about-approach-items i {
  color: #c8f15b;
  font-size: 10px;
  font-style: normal;
}

@media (hover: hover) {
  .about-approach-items span {
    transition: color .24s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
  }

  .about-approach:hover .about-approach-items span {
    color: #eef0ff;
    transform: translateY(-2px);
  }
}

@media (max-width: 700px) {
  .about-approach {
    display: grid;
    gap: 14px;
    margin-top: 38px;
  }

  .about-approach-items {
    flex-wrap: wrap;
  }
}
/* ============================================================================
   ABOUT CONTENT SCREEN POSITIONING
============================================================================ */
@media (min-width: 900px) {
  #about .about-layout,
  #about .about-approach {
    position: relative;
    top: 24px;
  }
}
/* ============================================================================
   FULL SERVICE SECTION CARDS
============================================================================ */
@media (min-width: 900px) {
  #services {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }

  #services .heading {
    margin-bottom: 34px;
  }

  #services .services {
    border-bottom: 1px solid var(--line);
  }

  #services .services article {
    min-height: 340px;
    padding: 26px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.025), rgba(118, 105, 223, 0.025));
  }

  #services .services i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 36px 0 23px;
    border: 1px solid rgba(164, 154, 248, 0.45);
    border-radius: 14px;
    color: #b9afff;
    font-size: 23px;
    line-height: 1;
  }

  #services .services h3 {
    font-size: 16px;
  }

  #services .services p {
    max-width: 205px;
  }
}
/* ============================================================================
   SERVICE CONTENT VERTICAL OFFSET
============================================================================ */
@media (min-width: 900px) {
  #services .heading,
  #services .services {
    position: relative;
    top: -88px;
  }
}

/* ============================================================================
   PRICING SECTION VERTICAL POSITION
   Lifts the complete pricing composition into the visual centre of the screen.
   ============================================================================ */
@media (min-width: 900px) {
  #pricing > .wrap {
    position: relative;
    top: -42px;
  }
}

/* ============================================================================
   SERVICE CARD SCROLL REVEAL
   Each card rises into place in sequence whenever Section 03 is reached.
   ============================================================================ */
#services .services article.reveal {
  opacity: 0;
  transform: translate3d(0, 42px, 0) scale(.985);
  transition:
    opacity .68s ease,
    transform .88s cubic-bezier(.22, .82, .24, 1),
    background .35s ease;
  will-change: opacity, transform;
}

#services.services-in-view .services article.reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

#services .services article:nth-child(1) { transition-delay: .04s; }
#services .services article:nth-child(2) { transition-delay: .13s; }
#services .services article:nth-child(3) { transition-delay: .22s; }
#services .services article:nth-child(4) { transition-delay: .31s; }

@media (prefers-reduced-motion: reduce) {
  #services .services article.reveal {
    transition: none;
    will-change: auto;
  }
}
/* ============================================================================
   FULL-SCREEN PACKAGE DETAILS
============================================================================ */
@media (min-width: 900px) {
  .pricing-explorer[open] {
    min-height: calc(100vh - 82px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .pricing-explorer[open] .pricing-explorer-panel {
    padding-bottom: 24px;
  }
}
/* ============================================================================
   PRICING CHECKLIST ALIGNMENT
   Keep costs, feature-list starts and shared benefits aligned across packages.
   ============================================================================ */
@media (min-width: 701px) {
  .price-card.featured {
    transform: none;
  }

  .price-card.featured:hover {
    transform: translateY(-8px);
  }

  .price-card > h3 {
    min-height: 29px;
  }

  .price-card > .plan-copy {
    min-height: 42px;
  }

  .price-card > .cost {
    min-height: 48px;
  }

  .price-card ul {
    line-height: 1.75;
  }

  .price-card ul li {
    min-height: 26px;
  }
}

/* ============================================================================
   CONTACT GLOBE INNER RING
   Keeps the original orbit and adds a larger animated ring inside it.
   ============================================================================ */
.contact-globe-core {
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(233, 109, 82, .62);
  border-radius: 50%;
  box-shadow: inset 0 0 42px rgba(233, 109, 82, .07), 0 0 34px rgba(233, 109, 82, .12);
  opacity: .65;
  pointer-events: none;
  animation: contact-globe-core-pulse 7s ease-in-out infinite;
}

.contact-globe-core-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: spin 18s linear infinite;
}

.contact-globe-core-orbit::before,
.contact-globe-core-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #e96d52;
  box-shadow: 0 0 18px rgba(233, 109, 82, .36);
}

.contact-globe-core-orbit::before {
  width: 26px;
  height: 26px;
  top: 12%;
  left: 10%;
}

.contact-globe-core-orbit::after {
  width: 9px;
  height: 9px;
  right: 11%;
  bottom: 15%;
}

@keyframes contact-globe-core-pulse {
  0%, 100% {
    transform: scale(.94);
    opacity: .42;
  }

  50% {
    transform: scale(1.06);
    opacity: .78;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-globe-core,
  .contact-globe-core-orbit {
    animation: none;
  }
}

/* ============================================================================
   HIGHER-CONTRAST NAVIGATION
   Keeps the header legible over every section without losing the glass effect.
   ============================================================================ */
.nav {
  z-index: 50;
  background: linear-gradient(100deg, rgba(8, 9, 16, .94), rgba(16, 15, 31, .90));
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  border-bottom-color: rgba(218, 220, 255, .18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.nav.scrolled {
  background: linear-gradient(100deg, rgba(7, 8, 15, .97), rgba(14, 13, 29, .95));
  border-bottom-color: rgba(202, 198, 255, .30);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
}

.nav nav a {
  color: #c0c2d0;
}

/* ============================================================================
   LANGUAGE SWITCHER
   Compact English/Czech controls placed between navigation and the main CTA.
   ============================================================================ */
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: clamp(10px, 1.4vw, 22px);
  margin-right: clamp(10px, 1.2vw, 18px);
  padding: 4px;
  border: 1px solid rgba(205, 204, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
}

.language-option {
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  opacity: .55;
  filter: saturate(.75);
  transition: transform .22s ease, opacity .22s ease, filter .22s ease, background-color .22s ease;
}

.language-option:hover,
.language-option:focus-visible,
.language-option.active {
  opacity: 1;
  filter: saturate(1);
}

.language-option:hover,
.language-option:focus-visible {
  transform: translateY(-1px) scale(1.08);
  background: rgba(255, 255, 255, .09);
  outline: none;
}

.language-option.active {
  background: rgba(200, 241, 91, .12);
  box-shadow: inset 0 0 0 1px rgba(217, 255, 118, .2);
}

@media (max-width: 900px) {
  .language-switch {
    margin-left: auto;
    margin-right: 14px;
  }
}

/* ============================================================================
   TWO-LINE HEADING SCALE
   Keeps the main section titles compact and readable on desktop screens.
   ============================================================================ */
@media (min-width: 900px) {
  .hero-copy h1 {
    max-width: 760px;
    font-size: clamp(48px, 5.2vw, 64px);
  }

  html[lang="en"] .hero-copy h1 em {
    font-size: .72em;
  }

  .heading h2,
  .process h2,
  .contact h2 {
    font-size: clamp(38px, 4.1vw, 52px);
    text-wrap: balance;
  }

  .about-copy h2 {
    font-size: clamp(36px, 3.7vw, 46px);
    text-wrap: balance;
  }

  .contact h2 {
    font-size: clamp(36px, 3.6vw, 46px);
  }

  #templates .heading h2 {
    font-size: clamp(34px, 3.7vw, 48px);
  }

  html[lang="cs"] .tech-stack {
    min-width: 142px;
  }

  html[lang="cs"] .tech-stack strong {
    font-size: 14px;
    letter-spacing: -.04em;
    white-space: nowrap;
  }
}

/* Smooth exit for the expandable package guide before returning to pricing. */
.pricing-explorer.is-closing .pricing-explorer-panel {
  animation: pricing-menu-close .28s cubic-bezier(.4, 0, 1, 1) both;
  pointer-events: none;
}

.pricing-explorer.is-closing summary {
  opacity: .65;
  pointer-events: none;
}

@keyframes pricing-menu-close {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-explorer.is-closing .pricing-explorer-panel {
    animation: none;
  }
}

/* ============================================================================
   CZECH CONTACT METHODS
   Email and phone are styled as matching, editable contact cards.
   ============================================================================ */
:is(html[lang="cs"], html[lang="en"]) .contact-methods {
  display: grid;
  gap: 10px;
  margin-top: 25px;
}

:is(html[lang="cs"], html[lang="en"]) .contact-method {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(100%, 320px);
  margin: 0;
  padding: 10px 12px 10px 10px;
  border: 1px solid rgba(171, 167, 255, .22);
  border-radius: 13px;
  background: rgba(17, 18, 33, .42);
  color: #e7e7f0;
  font: 700 13px "Space Grotesk", sans-serif;
  letter-spacing: -.025em;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), border-color .28s ease, background-color .28s ease, box-shadow .34s ease;
}

:is(html[lang="cs"], html[lang="en"]) .contact-method-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(200, 241, 91, .36);
  border-radius: 10px;
  color: #d9ff76;
  background: rgba(200, 241, 91, .08);
}

:is(html[lang="cs"], html[lang="en"]) .contact-method-icon svg {
  width: 16px;
  height: 16px;
}

:is(html[lang="cs"], html[lang="en"]) .contact-method b {
  margin: 0;
  font-size: 16px;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}

:is(html[lang="cs"], html[lang="en"]) .contact-method:hover,
:is(html[lang="cs"], html[lang="en"]) .contact-method:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(200, 241, 91, .56);
  background: rgba(43, 42, 77, .55);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  outline: none;
}

:is(html[lang="cs"], html[lang="en"]) .contact-method:hover b,
:is(html[lang="cs"], html[lang="en"]) .contact-method:focus-visible b {
  transform: translate(2px, -2px);
}

:is(html[lang="cs"], html[lang="en"]) .contact-layout .contact-note {
  margin-top: 46px;
}

/* ============================================================================
   SECTION AMBIENT BACKGROUNDS
   A slow, palette-led glow gives each section its own atmosphere.
   ============================================================================ */
#about,
#templates,
#services,
#pricing,
#process,
.contact {
  position: relative;
  isolation: isolate;
}

#about::before,
#templates::before,
#services::before,
#pricing::before,
#process::before,
.contact::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat;
  background-image:
    var(--section-aura),
    radial-gradient(circle, rgba(224, 226, 255, .22) 0 1px, transparent 1.3px),
    linear-gradient(rgba(197, 194, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197, 194, 255, .035) 1px, transparent 1px);
  background-size: auto, auto, 108px 108px, 96px 96px, 96px 96px;
  background-position: center, center, 18px 26px, 0 0, 0 0;
  animation: section-ambient-shift 15s ease-in-out infinite alternate;
}

#about::before {
  --section-aura:
    radial-gradient(circle at 9% 76%, rgba(94, 220, 233, .11), transparent 28%),
    radial-gradient(circle at 83% 22%, rgba(139, 108, 255, .13), transparent 31%);
}

#templates::before {
  --section-aura:
    radial-gradient(circle at 14% 18%, rgba(151, 120, 255, .16), transparent 29%),
    radial-gradient(circle at 86% 84%, rgba(88, 213, 235, .10), transparent 32%);
  animation-duration: 18s;
}

#services::before {
  --section-aura:
    radial-gradient(circle at 86% 20%, rgba(85, 219, 233, .13), transparent 29%),
    radial-gradient(circle at 22% 87%, rgba(89, 117, 219, .11), transparent 30%);
  animation-duration: 16s;
}

#pricing::before {
  --section-aura:
    radial-gradient(circle at 13% 70%, rgba(200, 241, 91, .08), transparent 27%),
    radial-gradient(circle at 83% 23%, rgba(145, 111, 255, .14), transparent 34%);
  animation-duration: 20s;
}

#process::before {
  --section-aura:
    radial-gradient(circle at 14% 23%, rgba(93, 220, 233, .13), transparent 29%),
    radial-gradient(circle at 90% 76%, rgba(233, 109, 82, .11), transparent 32%);
  animation-duration: 17s;
}

.contact::before {
  --section-aura:
    radial-gradient(circle at 18% 78%, rgba(151, 120, 255, .13), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(233, 109, 82, .10), transparent 31%);
  animation-duration: 19s;
}

#about > *,
#templates > *,
#services > *,
#pricing > .wrap,
#process > *,
.contact > :not(.contact-globe) {
  position: relative;
  z-index: 1;
}

@keyframes section-ambient-shift {
  0% {
    opacity: .55;
    transform: scale(1) translate3d(0, 0, 0);
  }

  100% {
    opacity: .92;
    transform: scale(1.035) translate3d(1.5%, -1.5%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #about::before,
  #templates::before,
  #services::before,
  #pricing::before,
  #process::before,
  .contact::before {
    animation: none;
  }
}

/* Moving orbital details echo the contact-circle composition across the site. */
#about::after,
#templates::after,
#services::after,
#pricing::after,
#process::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(360px, 42vw, 720px);
  aspect-ratio: 1;
  border: 1px solid var(--orbit-ring);
  border-radius: 50%;
  pointer-events: none;
  opacity: .34;
  background:
    radial-gradient(circle at 8% 26%, var(--orbit-dot) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 72%, var(--orbit-dot-small) 0 3px, transparent 4px);
  box-shadow: inset 0 0 62px var(--orbit-glow), 0 0 52px var(--orbit-glow);
  animation: section-orbit 20s linear infinite;
}

#about::after {
  --orbit-ring: rgba(94, 220, 233, .42);
  --orbit-dot: #5edce9;
  --orbit-dot-small: #9b7cff;
  --orbit-glow: rgba(94, 220, 233, .10);
  width: clamp(440px, 48vw, 790px);
  right: -24%;
  bottom: -42%;
  border-style: solid;
  opacity: .28;
  animation-duration: 28s;
}

#templates::after {
  --orbit-ring: rgba(151, 120, 255, .48);
  --orbit-dot: #9778ff;
  --orbit-dot-small: #5edce9;
  --orbit-glow: rgba(151, 120, 255, .11);
  width: clamp(520px, 54vw, 880px);
  right: -38%;
  top: -56%;
  border-style: dashed;
  border-width: 1px;
  opacity: .20;
  animation-duration: 34s;
}

#services::after {
  --orbit-ring: rgba(85, 219, 233, .42);
  --orbit-dot: #55dbe9;
  --orbit-dot-small: #b9afff;
  --orbit-glow: rgba(85, 219, 233, .10);
  width: clamp(390px, 39vw, 650px);
  right: -20%;
  bottom: -34%;
  border-style: solid;
  opacity: .30;
  animation-duration: 24s;
  animation-direction: reverse;
}

#pricing::after {
  --orbit-ring: rgba(200, 241, 91, .34);
  --orbit-dot: #d9ff76;
  --orbit-dot-small: #a49af8;
  --orbit-glow: rgba(200, 241, 91, .08);
  width: clamp(560px, 56vw, 920px);
  left: -39%;
  top: -48%;
  border-style: dashed;
  opacity: .18;
  animation-duration: 38s;
}

#process::after {
  --orbit-ring: rgba(233, 109, 82, .40);
  --orbit-dot: #e96d52;
  --orbit-dot-small: #65ddea;
  --orbit-glow: rgba(233, 109, 82, .09);
  width: clamp(420px, 44vw, 730px);
  right: -25%;
  top: -38%;
  border-style: double;
  border-width: 3px;
  opacity: .24;
  animation-duration: 30s;
  animation-direction: reverse;
}

@keyframes section-orbit {
  from { transform: rotate(0deg) scale(.96); }
  50% { transform: rotate(180deg) scale(1.035); }
  to { transform: rotate(360deg) scale(.96); }
}

@media (max-width: 700px) {
  #about::after,
  #templates::after,
  #services::after,
  #pricing::after,
  #process::after {
    width: 260px;
    opacity: .24;
  }
}

/* ============================================================================
   HERO DETAILS AND DYNAMIC NAVIGATION
   Adds quiet depth to the welcome screen without competing with the preview.
   ============================================================================ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-copy,
.hero-visual {
  position: relative;
  z-index: 1;
}

.hero-orbit-detail {
  position: absolute;
  z-index: 0;
  width: clamp(300px, 34vw, 540px);
  aspect-ratio: 1;
  right: -15%;
  bottom: -16%;
  border: 1px solid rgba(151, 120, 255, .38);
  border-radius: 50%;
  box-shadow: inset 0 0 58px rgba(92, 216, 238, .09), 0 0 48px rgba(151, 120, 255, .08);
  animation: hero-orbit-turn 26s linear infinite;
}

.hero-orbit-detail::before {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px dashed rgba(92, 216, 238, .30);
  border-radius: inherit;
}

.hero-orbit-detail i,
.hero-orbit-detail b {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #5edce9;
  box-shadow: 0 0 18px rgba(94, 220, 233, .48);
}

.hero-orbit-detail i {
  width: 16px;
  height: 16px;
  top: 13%;
  left: 9%;
}

.hero-orbit-detail b {
  width: 8px;
  height: 8px;
  right: 11%;
  bottom: 19%;
  background: #d9ff76;
  box-shadow: 0 0 14px rgba(217, 255, 118, .42);
}

.hero-status-pill,
.hero-index {
  position: absolute;
  z-index: 3;
  font: 9px "DM Mono", monospace;
  letter-spacing: .06em;
}

.hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  left: 1%;
  bottom: 7%;
  padding: 9px 11px;
  border: 1px solid rgba(197, 194, 255, .24);
  border-radius: 999px;
  background: rgba(13, 14, 27, .72);
  color: #d9dbe6;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
  animation: hero-pill-float 5s ease-in-out infinite;
}

.hero-status-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d9ff76;
  box-shadow: 0 0 12px rgba(217, 255, 118, .7);
}

.hero-index {
  top: 8%;
  right: 2%;
  color: rgba(220, 221, 237, .56);
  writing-mode: vertical-rl;
}

.browser {
  position: relative;
  z-index: 1;
}

.nav nav a {
  position: relative;
  padding: 8px 0;
}

.nav nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, #5edce9, #b7a4ff, #d9ff76);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

.nav nav a:hover::after,
.nav nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: -1px;
  left: 8%;
  height: 1px;
  opacity: .55;
  background: linear-gradient(90deg, transparent, #5edce9, #9778ff, transparent);
  background-size: 200% 100%;
  animation: nav-sheen 7s linear infinite;
  pointer-events: none;
}

@keyframes hero-orbit-turn {
  to { transform: rotate(360deg); }
}

@keyframes hero-pill-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes nav-sheen {
  to { background-position: -200% 0; }
}

@media (max-width: 800px) {
  .hero-status-pill { left: 3%; bottom: 3%; }
  .hero-index { right: 3%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orbit-detail,
  .hero-status-pill,
  .nav::after {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #about::after,
  #templates::after,
  #services::after,
  #pricing::after,
  #process::after {
    animation: none;
  }
}

/* =========================================================
   SOLID PRICING CARDS
   Keeps the animated section background behind each package.
   ========================================================= */

#pricing .price-card {
  z-index: 1;
  isolation: isolate;
  opacity: 1;
  background-color: #171923;
}

#pricing .price-card.featured {
  background: linear-gradient(145deg, #2b2749 0%, #171923 100%);
}

/* Pricing cards still slide into view, but never fade transparent. */
#pricing .price-card.reveal {
  opacity: 1;
}

/* Keep the pricing area clean: the large orbit would otherwise sit below Premium. */
#pricing::after {
  display: none;
}

/* =========================================================
   SOLID SECTION 03 SERVICE CARDS
   The animated Section 03 background remains outside the cards.
   ========================================================= */

#services .services article {
  z-index: 1;
  isolation: isolate;
  opacity: 1;
  background: #171923;
}

#services .services article:hover {
  background: linear-gradient(145deg, #232142 0%, #161827 100%);
}

/* Keep the rise-in reveal without fading the card transparent. */
#services .services article.reveal {
  opacity: 1 !important;
  transition:
    transform .72s cubic-bezier(.22, .82, .24, 1),
    background .32s ease,
    border-color .32s ease,
    box-shadow .32s ease;
  will-change: transform;
}

/* Modern, opaque card treatment for the four service boxes. */
#services .services {
  gap: 14px;
  border-top: 0;
}

#services .services article {
  min-height: 340px;
  overflow: hidden;
  border: 1px solid rgba(196, 204, 255, .16);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
}

#services .services article:first-child,
#services .services article:nth-child(3) {
  border-left: 1px solid rgba(196, 204, 255, .16);
}

#services .services article:nth-child(1) {
  background: linear-gradient(145deg, #20283a 0%, #171923 74%);
}

#services .services article:nth-child(2) {
  background: linear-gradient(145deg, #262241 0%, #171923 74%);
}

#services .services article:nth-child(3) {
  background: linear-gradient(145deg, #18303a 0%, #171923 74%);
}

#services .services article:nth-child(4) {
  background: linear-gradient(145deg, #2b243b 0%, #171923 74%);
}

#services .services article:hover {
  border-color: rgba(179, 201, 255, .52);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .28), 0 0 0 1px rgba(151, 120, 255, .08);
}

/* =========================================================
   SOLID SECTION 05 PROCESS POINTS
   ========================================================= */

.process-copy ol {
  display: grid;
  gap: 12px;
  margin-top: 34px;
  border-top: 0;
}

.process-copy li {
  min-height: 112px;
  padding: 20px 18px;
  overflow: hidden;
  border: 1px solid rgba(196, 204, 255, .16);
  border-radius: 16px;
  background: #171923;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
  transition:
    transform .32s cubic-bezier(.22, .8, .24, 1),
    border-color .32s ease,
    box-shadow .32s ease,
    background .32s ease;
}

.process-copy li:nth-child(1) {
  background: linear-gradient(145deg, #20283a 0%, #171923 75%);
}

.process-copy li:nth-child(2) {
  background: linear-gradient(145deg, #262241 0%, #171923 75%);
}

.process-copy li:nth-child(3) {
  background: linear-gradient(145deg, #18303a 0%, #171923 75%);
}

.process-copy li:hover {
  transform: translateY(-5px);
  border-color: rgba(179, 201, 255, .52);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .24), 0 0 0 1px rgba(101, 221, 234, .08);
}

/* =========================================================
   MOBILE LAYOUT AND NAVIGATION
   Keeps both language versions centred, touch-friendly and easy to browse.
   ========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 800px) {
  body {
    min-width: 320px;
    overscroll-behavior-x: none;
  }

  .nav {
    height: 66px;
    padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    gap: 8px;
  }

  .brand {
    font-size: 17px;
    white-space: nowrap;
  }

  .brand span {
    font-size: 10px;
  }

  .language-switch {
    margin-left: auto;
    margin-right: 2px;
  }

  .menu {
    display: grid;
    place-content: center;
    width: 42px;
    height: 42px;
    gap: 6px;
    padding: 0;
    border: 1px solid rgba(205, 204, 255, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .menu span {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    transform-origin: center;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
  }

  .nav.is-menu-open .menu span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .nav.is-menu-open .menu span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .nav nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 12px;
    left: 12px;
    display: grid;
    gap: 0;
    padding: 8px;
    border: 1px solid rgba(205, 204, 255, .20);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(20, 21, 36, .98), rgba(10, 11, 18, .98));
    box-shadow: 0 20px 44px rgba(0, 0, 0, .34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.985);
    transform-origin: top center;
    transition: opacity .22s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility .3s;
  }

  .nav.is-menu-open nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .nav nav a {
    padding: 13px 14px;
    border-radius: 10px;
    color: #e7e8f3;
    font-size: 14px;
  }

  .nav nav a:hover,
  .nav nav a:focus-visible,
  .nav nav a:active {
    background: rgba(151, 120, 255, .14);
    color: #fff;
    outline: none;
  }

  .nav nav a::after {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-top: 110px;
    padding-bottom: 62px;
    gap: 26px;
  }

  .hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(38px, 11.5vw, 52px);
    line-height: .96;
  }

  .hero-copy > p {
    max-width: 33rem;
    font-size: 14px;
    line-height: 1.7;
  }

  .hero-visual {
    width: min(100%, 520px);
    height: clamp(300px, 82vw, 390px);
    margin: 0 auto;
  }

  .section {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .heading h2,
  .process h2,
  .contact h2,
  .about-copy h2 {
    font-size: clamp(34px, 10vw, 46px);
    line-height: 1;
  }

  .template-grid {
    gap: 30px;
  }

  #services .services {
    gap: 12px;
  }

  #services .services article {
    min-height: 260px;
    padding: 20px;
  }

  .pricing-grid {
    margin-top: 38px;
    gap: 16px;
  }

  .price-card {
    min-height: 0;
  }

  .process {
    gap: 42px;
  }

  .process-art {
    height: min(78vw, 360px);
  }

  .process-copy li {
    min-height: 0;
    padding: 18px 16px;
  }

  input,
  textarea,
  select {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .brand span {
    display: none;
  }

  .wrap {
    padding-right: 18px;
    padding-left: 18px;
  }

  .hero-copy h1 {
    font-size: clamp(37px, 12vw, 48px);
  }

  .template-content {
    height: 250px;
  }

  #services .services {
    grid-template-columns: 1fr;
  }

  #services .services article {
    min-height: 220px;
  }

  .contact-inner {
    padding-top: 76px;
  }
}