:root {
  --navy: #071a38;
  --navy-2: #0d275b;
  --blue: #2563ff;
  --electric: #00b4ff;
  --light-blue: #e6f2ff;
  --white: #ffffff;
  --ink: #09172d;
  --muted: #64748b;
  --line: rgba(15, 39, 91, .11);
  --radius: 24px;
  --shadow: 0 24px 60px rgba(7, 26, 56, .12);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f7faff;
}

a {
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  width: 43px;
  height: 43px;
  position: relative;
  display: block;
}

.browser-shape {
  position: absolute;
  inset: 4px 9px 8px 0;
  border: 3px solid var(--blue);
  border-radius: 9px;
  background: var(--white);
  box-shadow: 0 6px 20px rgba(37,99,255,.18);
}

.browser-shape::before {
  content: "•••";
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--blue);
  position: absolute;
  top: -8px;
  left: 5px;
}

.phone-shape {
  position: absolute;
  width: 17px;
  height: 28px;
  right: 2px;
  bottom: 1px;
  border: 3px solid var(--navy);
  border-radius: 6px;
  background: var(--white);
}

.brand-name {
  display: grid;
  line-height: .85;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.7px;
}

.brand-name strong {
  font-size: 23px;
}

.brand-name b {
  color: var(--blue);
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 0 23px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), #0878ff);
  color: var(--white);
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(37,99,255,.27);
  transition: transform .2s ease, box-shadow .2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(37,99,255,.34);
}

.button-small {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
}

.button-ghost {
  color: var(--white);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: none;
}

.button-dark {
  background: var(--navy);
  box-shadow: none;
}

.eyebrow {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .19em;
  color: #84c9ff;
}

.eyebrow.blue {
  color: var(--blue);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(48px, 6vw, 76px);
  line-height: .95;
  letter-spacing: -.055em;
  margin-bottom: 26px;
}

h1 span {
  color: #4aa9ff;
}

.section {
  padding: 110px 24px;
}

.light-section,
.features-section,
.process-section {
  background: var(--white);
}

.section-heading {
  width: min(850px, 100%);
  margin: 0 auto 54px;
  text-align: center;
}

.section-heading h2 {
  font-size: clamp(36px, 5vw, 58px);
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: 18px;
}

.section-heading p:not(.eyebrow) {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.work-grid,
.feature-grid,
.pricing-grid,
.process-grid {
  width: min(1180px, 100%);
  margin: auto;
  display: grid;
  gap: 20px;
}

.work-grid {
  grid-template-columns: repeat(2, 1fr);
}

.work-card {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

.work-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 70px rgba(7,26,56,.17);
}

.work-visual {
  height: 350px;
  background-position: center;
  background-size: cover;
}

.visual-one {
  background:
    radial-gradient(circle at 70% 30%, #5983ff, transparent 35%),
    linear-gradient(135deg, #090f21, #19275e);
}

.visual-two {
  background:
    radial-gradient(circle at 25% 25%, #109cff, transparent 28%),
    linear-gradient(135deg, #06101f, #26384d);
}

.visual-three {
  background:
    radial-gradient(circle at 70% 20%, #d69b58, transparent 30%),
    linear-gradient(135deg, #301d15, #e2c5a5);
}

.visual-four {
  background:
    radial-gradient(circle at 75% 25%, #54d5ff, transparent 30%),
    linear-gradient(135deg, #174a6b, #c7efff);
}

.work-copy {
  padding: 25px 27px 28px;
}

.work-copy small {
  color: var(--blue);
  font-weight: 800;
}

.work-copy h3 {
  margin: 6px 0 13px;
  font-size: 25px;
}

.work-copy span {
  font-size: 14px;
  font-weight: 800;
}

.feature-grid {
  grid-template-columns: repeat(4, 1fr);
}

.feature-grid article {
  min-height: 155px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfdff;
  transition: .2s ease;
}

.feature-grid article:hover {
  transform: translateY(-4px);
  border-color: rgba(37,99,255,.35);
  box-shadow: 0 20px 42px rgba(37,99,255,.09);
}

.feature-grid strong,
.feature-grid span {
  display: block;
}

.feature-grid strong {
  font-size: 18px;
  margin-bottom: 10px;
}

.feature-grid span {
  color: var(--muted);
  line-height: 1.5;
}







.visual-message {
  width: min(570px, calc(100% - 40px));
  padding: 40px;
  border-radius: 28px;
  color: var(--white);
  position: relative;
  z-index: 2;
  margin-right: min(44vw, 490px);
}

.visual-message h2 {
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -.05em;
}

.visual-message p:last-child {
  color: rgba(255,255,255,.72);
  line-height: 1.6;
}

.pricing-section {
  background: #f4f7fc;
}

.pricing-grid {
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

.price-card {
  position: relative;
  padding: 34px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 18px 44px rgba(7,26,56,.07);
  transition: .25s ease;
}

.price-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 65px rgba(7,26,56,.14);
}

.featured-price {
  border: 1.5px solid var(--blue);
  box-shadow: 0 26px 65px rgba(37,99,255,.16);
}

.popular-badge {
  position: absolute;
  top: -14px;
  left: 24px;
  padding: 8px 13px;
  background: var(--blue);
  color: var(--white);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
}

.price-label {
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
}

.price {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -.05em;
  margin: 14px 0 10px;
}

.price small {
  font-size: 18px;
  color: var(--muted);
}

.price-intro {
  color: var(--muted);
  min-height: 48px;
  line-height: 1.5;
}

.price-card ul {
  list-style: none;
  padding: 0;
  margin: 25px 0 30px;
}

.price-card li {
  padding: 9px 0 9px 25px;
  border-bottom: 1px solid rgba(7,26,56,.06);
  position: relative;
  line-height: 1.4;
  font-size: 14px;
}

.price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 900;
}

.care-card {
  width: min(1180px, 100%);
  margin: 25px auto 0;
  padding: 24px 28px;
  border: 1px solid rgba(37,99,255,.18);
  border-radius: 20px;
  background: #eaf3ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.care-card div {
  flex: 0 0 auto;
}

.care-card span,
.care-card strong {
  display: block;
}

.care-card span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.care-card strong {
  margin-top: 4px;
  font-size: 23px;
}

.care-card p {
  margin: 0;
  color: var(--muted);
}

.process-grid {
  grid-template-columns: repeat(4, 1fr);
}

.process-grid article {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
}

.process-grid b {
  font-size: 34px;
  color: var(--blue);
}

.process-grid h3 {
  font-size: 19px;
  margin: 24px 0 10px;
}

.process-grid p {
  color: var(--muted);
  line-height: 1.55;
}



.section-heading-dark p:not(.eyebrow) {
  color: rgba(255,255,255,.63);
}



.final-cta {
  min-height: 520px;
  display: grid;
  place-items: center;
  padding: 50px 24px;
  color: var(--white);
  background:
    radial-gradient(circle at 75% 40%, rgba(0,180,255,.24), transparent 30%),
    linear-gradient(135deg, #06152f, #0c3470);
}

.final-panel {
  width: min(820px, 100%);
  padding: 50px;
  text-align: center;
  border-radius: 30px;
}

.final-panel h2 {
  font-size: clamp(38px, 5vw, 59px);
  line-height: 1;
  letter-spacing: -.05em;
}

footer {
  min-height: 190px;
  padding: 55px max(24px, calc((100vw - 1180px) / 2));
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  gap: 25px;
  color: rgba(255,255,255,.7);
  background: #040e1f;
}

footer strong {
  color: var(--white);
  font-size: 22px;
}

footer strong span {
  color: #3b8cff;
}

footer div {
  text-align: right;
}

footer div a {
  margin-left: 18px;
}

@media (max-width: 900px) {

  .work-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .feature-grid,
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .visual-message {
    margin: 0;
  }



  .care-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {

  h1 {
    font-size: 47px;
  }

  .section {
    padding: 78px 17px;
  }

  .work-grid,
  .feature-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }

  .work-visual {
    height: 260px;
  }



  .pricing-grid {
    gap: 28px;
  }

  .price-card {
    padding: 29px 23px;
  }

  .final-panel {
    padding: 38px 23px;
  }

  footer {
    grid-template-columns: 1fr;
  }

  footer div {
    text-align: left;
  }

  footer div a {
    margin: 0 18px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.visual-five {
  background:
    radial-gradient(circle at 72% 26%, #dfb36b, transparent 28%),
    linear-gradient(135deg, #071324, #243650);
}

.visual-six {
  background:
    radial-gradient(circle at 28% 24%, #3a8dff, transparent 28%),
    linear-gradient(135deg, #080d18, #222b3a);
}

/* Quote journey + final CTA refinement */

.process-section .section-heading strong {
  color: var(--blue);
}

.final-panel {
  position: relative;
  overflow: hidden;
}

.final-panel h2 span {
  color: #4aa9ff;
}

.final-lead {
  max-width: 650px;
  margin: 0 auto 28px;
  color: rgba(255,255,255,.7);
  font-size: 17px;
  line-height: 1.65;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.cta-fast {
  color: rgba(255,255,255,.78);
  font-size: 14px;
  font-weight: 800;
  transition: .2s ease;
}

.cta-fast:hover {
  color: #fff;
  transform: translateX(3px);
}

/* Animated footer atmosphere */

footer {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  isolation: isolate;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 93% 45%, rgba(37,99,255,.13), transparent 26%),
    #030b19;
  background-size:
    70px 70px,
    70px 70px,
    auto,
    auto;
}

footer > strong,
footer > p,
footer > div:not(.footer-orbits) {
  position: relative;
  z-index: 3;
}

.footer-orbits {
  position: absolute;
  width: 330px;
  height: 330px;
  right: -100px;
  bottom: -85px;
  pointer-events: none;
  z-index: 1;
}

.footer-orbits i {
  position: absolute;
  display: block;
  border: 1px solid rgba(52,132,255,.32);
  border-radius: 50%;
  box-shadow:
    0 0 20px rgba(37,99,255,.08),
    inset 0 0 15px rgba(37,99,255,.05);
  animation:
    footerFloat 12s ease-in-out infinite alternate,
    footerFade 7s ease-in-out infinite;
}

.footer-orbits i:nth-child(1) {
  width: 120px;
  height: 120px;
  right: 25px;
  bottom: 15px;
}

.footer-orbits i:nth-child(2) {
  width: 64px;
  height: 64px;
  right: 155px;
  bottom: 115px;
  animation-delay: -2s;
}

.footer-orbits i:nth-child(3) {
  width: 35px;
  height: 35px;
  right: 85px;
  bottom: 190px;
  animation-delay: -4s;
}

.footer-orbits i:nth-child(4) {
  width: 17px;
  height: 17px;
  right: 185px;
  bottom: 205px;
  animation-delay: -1s;
}

.footer-orbits i:nth-child(5) {
  width: 82px;
  height: 82px;
  right: 205px;
  bottom: 20px;
  animation-delay: -5s;
}

.footer-orbits i:nth-child(6) {
  width: 25px;
  height: 25px;
  right: 45px;
  bottom: 270px;
  animation-delay: -3s;
}

.footer-orbits i:nth-child(7) {
  width: 10px;
  height: 10px;
  right: 250px;
  bottom: 175px;
  animation-delay: -6s;
}

@keyframes footerFloat {
  from {
    transform: translate3d(0, 12px, 0) scale(.96);
  }

  to {
    transform: translate3d(-14px, -25px, 0) scale(1.07);
  }
}

@keyframes footerFade {
  0%,
  100% {
    opacity: .28;
  }

  50% {
    opacity: .85;
  }
}

@media (max-width: 620px) {
  .final-panel h2 {
    font-size: 43px;
  }

  .footer-orbits {
    right: -155px;
    opacity: .7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-orbits i {
    animation: none !important;
  }
}

/* Large final conversion statement */

.final-cta {
  min-height: 650px;
  padding: 90px 24px;
}

.final-panel-wide {
  width: min(1120px, 100%);
  margin: auto;
  padding: 40px 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.final-panel-wide .eyebrow {
  margin-bottom: 24px;
}

.final-panel-wide h2 {
  max-width: 1000px;
  margin: 0 auto 28px;
  font-size: clamp(58px, 8vw, 104px);
  line-height: .88;
  letter-spacing: -.06em;
}

.final-panel-wide h2 span {
  color: #2f92ff;
}

.final-panel-wide .final-lead {
  max-width: 720px;
  margin: 0 auto 34px;
  font-size: 18px;
  line-height: 1.65;
}

.final-panel-wide .button {
  min-width: 180px;
}

@media (max-width: 620px) {
  .final-cta {
    min-height: 560px;
    padding: 70px 18px;
  }

  .final-panel-wide {
    padding: 20px 0;
  }

  .final-panel-wide h2 {
    font-size: clamp(48px, 14vw, 68px);
    line-height: .92;
  }

  .final-panel-wide .final-lead {
    font-size: 16px;
  }
}

/* Refined WEB BY DON footer */

.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  min-height: 0;
  padding:
    38px
    max(24px, calc((100vw - 1180px) / 2))
    24px;

  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand links"
    "note note";
  gap: 24px 42px;

  align-items: center;

  border-top: 1px solid rgba(255,255,255,.055);

  background:
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
    radial-gradient(circle at 95% 55%, rgba(37,99,255,.10), transparent 24%),
    #030b19;

  background-size:
    70px 70px,
    70px 70px,
    auto,
    auto;
}

.footer-brand {
  grid-area: brand;
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-logo {
  display: block;
  width: 118px;
  height: auto;
}

.footer-brand p {
  margin: 0;
  color: rgba(255,255,255,.46);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .01em;
}

.footer-links {
  grid-area: links;
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-links a {
  margin: 0;
  color: rgba(255,255,255,.54);
  font-size: 11px;
  font-weight: 600;
  transition:
    color .2s ease,
    transform .2s ease;
}

.footer-links a:hover {
  color: #fff;
  transform: translateY(-1px);
}

.footer-note {
  grid-area: note;
  position: relative;
  z-index: 3;

  margin: 0;
  padding-top: 19px;

  border-top: 1px solid rgba(255,255,255,.045);

  color: rgba(255,255,255,.25);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Keep the animated atmosphere subtle */

.site-footer .footer-orbits {
  width: 280px;
  height: 280px;
  right: -105px;
  bottom: -105px;
  opacity: .72;
}

.site-footer .footer-orbits i {
  border-color: rgba(52,132,255,.22);
  box-shadow:
    0 0 18px rgba(37,99,255,.055),
    inset 0 0 12px rgba(37,99,255,.035);
}

@media (max-width: 700px) {
  .site-footer {
    padding: 32px 20px 22px;

    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "links"
      "note";

    gap: 23px;
  }

  .footer-brand {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }

  .footer-logo {
    width: 112px;
  }

  .footer-links {
    justify-content: flex-start;
    gap: 16px;
  }

  .footer-note {
    padding-top: 17px;
  }

  .site-footer .footer-orbits {
    right: -145px;
    bottom: -115px;
    opacity: .5;
  }
}

/* Real portfolio showcase */

.work-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.work-card {
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(7,26,56,.09);
  box-shadow:
    0 18px 45px rgba(7,26,56,.09),
    0 2px 8px rgba(7,26,56,.04);
}

.work-card:hover {
  transform: translateY(-7px);
  box-shadow:
    0 30px 65px rgba(7,26,56,.15),
    0 4px 12px rgba(7,26,56,.06);
}

.portfolio-browser {
  height: auto;
  aspect-ratio: 1.48 / 1;
  position: relative;
  overflow: hidden;
  background: #eef3f8;
}

.browser-bar {
  height: 25px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  position: relative;
  z-index: 3;
  background:
    linear-gradient(180deg, #ffffff, #f6f8fb);
  border-bottom: 1px solid rgba(7,26,56,.08);
}

.browser-bar span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
}

.portfolio-screen {
  position: absolute;
  inset: 25px 0 0;
  overflow: hidden;
  background: #e8eef6;
}

.portfolio-screen img {
  display: block;
  width: 100%;
  height: 108%;
  object-fit: cover;
  object-position: top center;
  transform: translateY(0) scale(1.001);
  transition:
    transform .75s cubic-bezier(.2,.7,.2,1),
    filter .35s ease;
}

.work-card:hover .portfolio-screen img {
  transform: translateY(-5%) scale(1.015);
}

.work-copy {
  padding: 20px 21px 22px;
}

.work-copy small {
  display: block;
  margin-bottom: 5px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.work-copy h3 {
  margin: 0 0 11px;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.work-copy span {
  color: #31415d;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1050px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .work-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .portfolio-browser {
    aspect-ratio: 1.42 / 1;
  }

  .work-copy {
    padding: 18px 18px 20px;
  }

  .work-copy h3 {
    font-size: 21px;
  }

  .work-card:hover {
    transform: none;
  }

  .work-card:hover .portfolio-screen img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-screen img {
    transition: none;
  }
}

/* Wider portfolio showcase */

#work {
  padding-left: 28px;
  padding-right: 28px;
}

#work .section-heading {
  width: min(850px, 100%);
}

#work .work-grid {
  width: min(1420px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

#work .portfolio-browser {
  aspect-ratio: 1.42 / 1;
}

#work .work-card {
  border-radius: 24px;
}

#work .work-copy {
  padding: 22px 23px 24px;
}

#work .work-copy h3 {
  font-size: 21px;
}

@media (max-width: 1050px) {
  #work .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(900px, 100%);
  }
}

@media (max-width: 680px) {
  #work {
    padding-left: 17px;
    padding-right: 17px;
  }

  #work .work-grid {
    grid-template-columns: 1fr;
    gap: 19px;
  }

  #work .portfolio-browser {
    aspect-ratio: 1.4 / 1;
  }
}

/* =========================================================
   Portfolio atmosphere
   ========================================================= */

#work {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background:
    radial-gradient(circle at 15% 28%, rgba(37,99,255,.10), transparent 25%),
    radial-gradient(circle at 86% 67%, rgba(0,180,255,.08), transparent 27%),
    linear-gradient(rgba(37,99,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 55%, #ffffff 100%);

  background-size:
    auto,
    auto,
    72px 72px,
    72px 72px,
    auto;
}

#work::before,
#work::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(12px);
}

#work::before {
  width: 430px;
  height: 430px;
  left: -170px;
  top: 290px;
  background: rgba(37,99,255,.055);
}

#work::after {
  width: 520px;
  height: 520px;
  right: -230px;
  bottom: 80px;
  background: rgba(0,180,255,.045);
}

#work .section-heading,
#work .work-grid {
  position: relative;
  z-index: 2;
}

#work .section-heading {
  margin-bottom: 62px;
}

#work .section-heading p:not(.eyebrow) {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   How it works — premium card treatment
   ========================================================= */

.process-grid article {
  position: relative;
  overflow: hidden;

  border: 1px solid rgba(37,99,255,.12);

  background:
    linear-gradient(145deg, rgba(255,255,255,1), rgba(247,250,255,.96));

  box-shadow:
    0 18px 42px rgba(7,26,56,.075),
    0 2px 7px rgba(37,99,255,.035);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.process-grid article::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(37,99,255,.75),
      rgba(0,180,255,.55),
      transparent
    );

  opacity: .7;
}

.process-grid article::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -55px;
  top: -55px;
  border-radius: 50%;

  background: rgba(37,99,255,.065);
  filter: blur(4px);
}

.process-grid article:hover {
  transform: translateY(-7px);

  border-color: rgba(37,99,255,.30);

  box-shadow:
    0 28px 60px rgba(7,26,56,.13),
    0 0 34px rgba(37,99,255,.075);
}

.process-grid b,
.process-grid h3,
.process-grid p {
  position: relative;
  z-index: 2;
}


/* =========================================================
   Responsive width hardening
   Fix intrinsic/grid overflow rather than only hiding it.
   ========================================================= */

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

body {
  overflow-x: clip;
}

.work-grid,
.feature-grid,
.pricing-grid,
.process-grid {
  min-width: 0;
}

.work-grid > *,
.feature-grid > *,
.pricing-grid > *,
.process-grid > * {
  min-width: 0;
}

.work-card,
.portfolio-browser,
.portfolio-screen {
  min-width: 0;
  max-width: 100%;
}

.portfolio-screen img {
  max-width: 100%;
}

@media (max-width: 680px) {

  #work {
    width: 100%;
    max-width: 100%;
    padding-left: 17px;
    padding-right: 17px;
  }

  #work .section-heading {
    width: 100%;
    max-width: 100%;
    margin-bottom: 38px;
  }

  #work .work-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;

    grid-template-columns: minmax(0, 1fr);
  }

  #work .work-card {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #work .portfolio-browser,
  #work .portfolio-screen {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #work .portfolio-screen img {
    display: block;
    width: 100%;
    min-width: 0;
  }

  #work::before {
    width: 260px;
    height: 260px;
    left: -150px;
  }

  #work::after {
    width: 280px;
    height: 280px;
    right: -170px;
  }

  .process-grid article {
    box-shadow:
      0 15px 34px rgba(7,26,56,.085),
      0 0 22px rgba(37,99,255,.035);
  }

  .process-grid article:hover {
    transform: none;
  }
}

@supports not (overflow: clip) {
  body {
    overflow-x: hidden;
  }
}

/* =========================================================
   WEB BY DON — TWO-ANCHOR PINNED BACKGROUND STORY

   DOWN:
   image enters normally
   -> bottom touches viewport bottom
   -> locks there
   -> Pricing covers it

   UP:
   while hidden behind Pricing it moves to top anchor
   -> Pricing reveals it beneath header
   -> image stays there
   -> previous white section covers it from above
   ========================================================= */

@media (min-width: 761px) {

  main {
    --wbd-header-height: 78px;

    --wbd-story-height:
      clamp(520px, 42.85vw, 680px);

    --wbd-story-runway:
      clamp(260px, 34vh, 360px);
  }


  /* =======================================================
     COVERING SECTIONS
     ======================================================= */

  .story-cover-before {
    position: relative;

    z-index: 30;

    background: #fff;
  }


  .pricing-section.story-cover-pricing {
    position: relative;

    z-index: 40;

    margin-top:
      calc(0px - var(--wbd-story-runway));

    padding-top:
      156px;

    /* Straight transition edge */
    border-radius:
      0 !important;

    box-shadow:
      0 -12px 34px rgba(3,17,39,.07);

    background:
      #f4f7fd;
  }


  /* =======================================================
     STORY RUNWAY
     ======================================================= */

  .story-pin {
    position: relative;

    height:
      calc(
        var(--wbd-story-height)
        + var(--wbd-story-runway)
      );

    z-index: 1;

    overflow: visible;

    background:
      #031127;

    isolation:
      isolate;
  }


  /* =======================================================
     BACKGROUND WINDOW
     ======================================================= */

  .story-pin-window {
    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    width: 100%;

    height:
      var(--wbd-story-height);

    overflow: hidden;

    z-index: 1;

    pointer-events: none;

    background:
      #031127;
  }


  /*
    During either pinned state, JavaScript supplies
    one exact legal viewport position:
      top anchor OR bottom anchor.
  */

  .story-pin-window.is-pinned {
    position: fixed;

    left: 0;
    right: 0;

    top:
      var(--wbd-pin-top, 0px);

    bottom: auto;

    width: 100%;
  }


  /*
    Used only while the next section completely covers
    the photograph.

    Keeping it hidden prevents the workspace image ever
    leaking into later sections.
  */

  .story-pin-window.is-covered {
    visibility: hidden;
  }


  .story-pin-background,
  .story-pin-shade {
    position: absolute;

    inset: 0;
  }


  .story-pin-background {
    background:
      url("./backgrounds/story-workspace.png")
      center center / cover
      no-repeat;

    transform: none;

    filter: none;
  }


  .story-pin-shade {
    background:
      linear-gradient(
        90deg,
        rgba(2,11,28,.88) 0%,
        rgba(3,16,39,.60) 34%,
        rgba(3,18,42,.14) 64%,
        rgba(2,12,29,.46) 100%
      ),
      linear-gradient(
        180deg,
        rgba(2,10,24,.06),
        rgba(2,10,24,.24)
      );
  }


  /* =======================================================
     FOREGROUND TRAVELS WITH THE DOCUMENT
     ======================================================= */

  .story-pin-foreground {
    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height:
      var(--wbd-story-height);

    z-index: 5;

    pointer-events:
      none;
  }


  .story-pin-inner {
    width:
      min(1480px, calc(100% - 68px));

    height: 100%;

    margin: auto;

    display: grid;

    grid-template-columns:
      minmax(370px, .74fr)
      minmax(660px, 1.26fr);

    gap:
      clamp(42px, 5vw, 82px);

    align-items:
      center;
  }


  /* =======================================================
     BLENDED COPY — KEEP CURRENT DESIGN
     ======================================================= */

  .story-pin-copy {
    position: relative;

    width: 100%;

    max-width:
      535px;

    padding:
      18px 0;

    color:
      #fff;

    background:
      linear-gradient(
        90deg,
        rgba(4,18,42,.82) 0%,
        rgba(4,18,42,.38) 48%,
        rgba(4,18,42,0) 100%
      );

    backdrop-filter:
      blur(4px);

    pointer-events:
      auto;
  }


  .story-pin-copy::before {
    content: "";

    position: absolute;

    left: -18px;
    top: 18px;
    bottom: 18px;

    width: 2px;

    border-radius:
      999px;

    background:
      linear-gradient(
        180deg,
        rgba(113,177,255,.10),
        rgba(113,177,255,.82),
        rgba(113,177,255,.10)
      );
  }


  .story-pin-copy .eyebrow {
    margin:
      0 0 14px;

    color:
      #7fc4ff;
  }


  .story-pin-copy h2 {
    max-width:
      10ch;

    margin:
      0 0 20px;

    color:
      #fff;

    font-size:
      clamp(46px, 4.25vw, 68px);

    line-height:
      .92;

    letter-spacing:
      -.055em;
  }


  .story-pin-copy > p:not(.eyebrow) {
    max-width:
      35ch;

    margin:
      0 0 23px;

    color:
      rgba(255,255,255,.72);

    font-size:
      16px;

    line-height:
      1.6;
  }


  .story-pin-points {
    display: flex;

    flex-wrap: wrap;

    gap:
      8px;
  }


  .story-pin-points span {
    padding:
      8px 11px;

    border:
      1px solid rgba(255,255,255,.13);

    border-radius:
      999px;

    color:
      rgba(255,255,255,.72);

    background:
      rgba(255,255,255,.055);

    font-size:
      11px;

    font-weight:
      700;
  }


  /* =======================================================
     WEBSITE COMPOSITION
     ======================================================= */

  .story-pin-stage {
    position: relative;

    height:
      min(
        560px,
        calc(var(--wbd-story-height) - 60px)
      );

    min-height:
      min(
        500px,
        calc(var(--wbd-story-height) - 60px)
      );

    perspective:
      1800px;

    pointer-events:
      auto;
  }


  .story-pin-card {
    position: absolute;

    overflow: hidden;

    border:
      1px solid rgba(255,255,255,.16);

    border-radius:
      23px;

    background:
      #07152d;

    box-shadow:
      0 38px 90px rgba(0,0,0,.38),
      0 0 70px rgba(37,99,255,.07);

    transition:
      transform .38s cubic-bezier(.2,.7,.2,1),
      opacity .38s ease,
      filter .38s ease,
      box-shadow .38s ease,
      border-color .38s ease;
  }


  .story-pin-card > img,
  .story-pin-screen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit:
      cover;

    object-position:
      top center;
  }


  .story-pin-card-main {
    width: 85%;
    height: 76%;

    right: 0;
    top: 12%;

    z-index: 5;

    transform:
      rotateY(-3deg)
      rotateX(.8deg);

    box-shadow:
      0 52px 115px rgba(0,0,0,.48),
      0 0 90px rgba(37,99,255,.14);
  }


  .story-pin-toolbar {
    height: 27px;

    padding:
      0 11px;

    display: flex;

    align-items:
      center;

    gap:
      6px;

    background:
      rgba(5,15,33,.94);

    border-bottom:
      1px solid rgba(255,255,255,.07);
  }


  .story-pin-toolbar span {
    width: 5px;
    height: 5px;

    border-radius:
      50%;

    background:
      rgba(255,255,255,.34);
  }


  .story-pin-screen {
    height:
      calc(100% - 27px);

    overflow:
      hidden;
  }


  .story-pin-card-left {
    width: 50%;
    height: 43%;

    left: -1%;
    top: 1%;

    z-index: 2;

    opacity:
      .91;

    transform:
      rotate(-1.7deg);

    filter:
      saturate(.93);
  }


  .story-pin-card-right {
    width: 48%;
    height: 41%;

    left: 3%;
    bottom: 1%;

    z-index: 3;

    opacity:
      .84;

    transform:
      rotate(1.6deg);

    filter:
      saturate(.88)
      brightness(.94);
  }


  @media (hover: hover) and (pointer: fine) {

    .story-pin-card-main:hover {
      transform:
        translateY(-8px)
        rotateY(-1.6deg)
        rotateX(.3deg)
        scale(1.015);

      border-color:
        rgba(117,183,255,.34);

      box-shadow:
        0 60px 125px rgba(0,0,0,.52),
        0 0 105px rgba(37,99,255,.20);
    }


    .story-pin-card-left:hover {
      opacity:
        1;

      filter:
        saturate(1);

      transform:
        translate(-7px,-7px)
        rotate(-1deg)
        scale(1.012);
    }


    .story-pin-card-right:hover {
      opacity:
        1;

      filter:
        saturate(1)
        brightness(1);

      transform:
        translate(-5px,-7px)
        rotate(1deg)
        scale(1.012);
    }

  }

}


/* =========================================================
   MOBILE — NO SPECIAL PIN EFFECT
   ========================================================= */

@media (max-width: 760px) {

  .story-pin {
    position: relative;

    overflow: hidden;

    background:
      #031127;
  }


  .story-pin-window {
    position: absolute;

    inset: 0;

    overflow: hidden;

    visibility:
      visible !important;
  }


  .story-pin-background,
  .story-pin-shade {
    position: absolute;

    inset: 0;
  }


  .story-pin-background {
    background:
      url("./backgrounds/story-workspace.png")
      58% center / cover
      no-repeat;
  }


  .story-pin-shade {
    background:
      linear-gradient(
        180deg,
        rgba(2,12,29,.92),
        rgba(3,17,39,.70) 48%,
        rgba(2,12,29,.90)
      );
  }


  .story-pin-foreground {
    position: relative;

    z-index: 3;

    padding:
      62px 17px 72px;
  }


  .story-pin-inner {
    width: 100%;

    display: flex;

    flex-direction:
      column;

    gap:
      32px;
  }


  .story-pin-copy {
    position: relative;

    color:
      #fff;

    padding:
      10px 0;

    background:
      linear-gradient(
        180deg,
        rgba(4,18,42,.68),
        rgba(4,18,42,.12)
      );
  }


  .story-pin-copy::before {
    content: "";

    position: absolute;

    left: -9px;
    top: 10px;
    bottom: 10px;

    width: 2px;

    background:
      linear-gradient(
        180deg,
        transparent,
        #71b1ff,
        transparent
      );
  }


  .story-pin-copy .eyebrow {
    color:
      #7fc4ff;
  }


  .story-pin-copy h2 {
    margin:
      10px 0 18px;

    color:
      #fff;

    font-size:
      clamp(39px,11vw,52px);

    line-height:
      .94;

    letter-spacing:
      -.05em;
  }


  .story-pin-copy > p:not(.eyebrow) {
    color:
      rgba(255,255,255,.72);

    line-height:
      1.6;
  }


  .story-pin-points {
    display: flex;

    flex-wrap:
      wrap;

    gap:
      7px;

    margin-top:
      20px;
  }


  .story-pin-points span {
    padding:
      7px 9px;

    border:
      1px solid rgba(255,255,255,.13);

    border-radius:
      999px;

    color:
      rgba(255,255,255,.68);

    background:
      rgba(255,255,255,.05);

    font-size:
      10px;
  }


  .story-pin-stage {
    position: relative;

    height:
      390px;
  }


  .story-pin-card {
    position: absolute;

    overflow: hidden;

    border-radius:
      18px;

    border:
      1px solid rgba(255,255,255,.14);

    background:
      #07152d;

    box-shadow:
      0 24px 60px rgba(0,0,0,.35);
  }


  .story-pin-card > img,
  .story-pin-screen img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit:
      cover;

    object-position:
      top center;
  }


  .story-pin-card-main {
    width: 94%;
    height: 65%;

    right: -2%;
    top: 19%;

    z-index:
      4;

    transform:
      rotateY(-1deg);
  }


  .story-pin-toolbar {
    height:
      24px;

    display:
      flex;

    align-items:
      center;

    gap:
      5px;

    padding:
      0 9px;

    background:
      rgba(5,15,33,.94);
  }


  .story-pin-toolbar span {
    width: 5px;
    height: 5px;

    border-radius:
      50%;

    background:
      rgba(255,255,255,.34);
  }


  .story-pin-screen {
    height:
      calc(100% - 24px);
  }


  .story-pin-card-left {
    width: 58%;
    height: 36%;

    left: 0;
    top: 1%;

    z-index:
      2;

    transform:
      rotate(-1.5deg);
  }


  .story-pin-card-right {
    display:
      none;
  }


  .pricing-section.story-cover-pricing {
    margin-top:
      0;

    padding-top:
      86px;

    border-radius:
      0 !important;

    box-shadow:
      none;
  }

}


@media (prefers-reduced-motion: reduce) {

  .story-pin-card {
    transition:
      none !important;
  }

}

/* =========================================================
   WEB BY DON — PREMIUM HERO V2
   ========================================================= */


/* =========================================================
   FIXED GLASS NAVIGATION
   ========================================================= */

.hero-header {
  position: fixed;

  z-index: 100;

  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  height: 82px;

  padding: 0;

  color: #fff;

  border: 0;

  background:
    linear-gradient(
      180deg,
      rgba(2,8,19,.30),
      rgba(2,8,19,.08) 72%,
      transparent
    );

  box-shadow: none;

  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);

  transition:
    background .25s ease,
    backdrop-filter .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}





.hero-header-inner {
  width:
    min(1500px, calc(100% - 72px));

  height: 82px;

  margin: auto;

  padding: 0;

  display: grid;

  grid-template-columns:
    220px
    1fr
    auto;

  align-items: center;

  gap: 30px;

  border: 0;

  border-radius: 0;

  background: transparent;

  box-shadow: none;

  backdrop-filter: none;

  -webkit-backdrop-filter: none;
}





.hero-brand {
  width: max-content;

  display: flex;

  align-items: center;
}


.hero-brand-logo {
  display: block;

  width: 150px;
  height: auto;
}


.hero-brand-tagline {
  display: none;
}


.hero-nav {
  display: flex;

  align-items: center;

  justify-content: center;

  gap:
    clamp(27px, 2.7vw, 48px);
}


.hero-nav a {
  position: relative;

  padding: 13px 0;

  color:
    rgba(255,255,255,.81);

  font-size: 13px;

  font-weight: 650;

  transition:
    color .2s ease;
}


.hero-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 100%;
  bottom: 5px;

  height: 1px;

  background:
    #3d91ff;

  transition:
    right .22s ease;
}


.hero-nav a:hover {
  color: #fff;
}


.hero-nav a:hover::after {
  right: 0;
}


.hero-header-actions {
  display: flex;

  align-items: center;

  gap: 10px;
}


.hero-header-secondary,
.hero-header-primary {
  min-height: 44px;

  padding:
    0 18px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  border-radius: 8px;

  font-size: 12px;

  font-weight: 750;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.hero-header-secondary {
  color:
    rgba(255,255,255,.88);

  border:
    1px solid rgba(255,255,255,.22);

  background:
    rgba(2,9,23,.18);
}


.hero-header-primary {
  color: #fff;

  border:
    1px solid rgba(68,150,255,.60);

  background:
    linear-gradient(
      135deg,
      #2462ff,
      #087fff
    );

  box-shadow:
    0 9px 27px rgba(18,101,255,.27);
}


.hero-header-secondary:hover,
.hero-header-primary:hover {
  transform:
    translateY(-2px);
}


.hero-header-secondary:hover {
  background:
    rgba(255,255,255,.07);

  border-color:
    rgba(255,255,255,.38);
}


.hero-header-primary:hover {
  box-shadow:
    0 13px 32px rgba(18,101,255,.40);
}


/* =========================================================
   HERO ENVIRONMENT
   ========================================================= */

.hero-v2 {
  position:
    relative;

  min-height:
    900px;

  padding:
    118px 0 0;

  overflow:
    hidden;

  color:
    #fff;

  background:
    #020a18;
}


.hero-v2-background,
.hero-v2-shade {
  position:
    absolute;

  inset:
    0;
}


.hero-v2-background {
  background:
    url("./backgrounds/hero-studio.png")
    center center / cover
    no-repeat;
}


.hero-v2-shade {
  background:
    linear-gradient(
      90deg,
      rgba(1,7,17,.84) 0%,
      rgba(1,9,22,.55) 32%,
      rgba(1,10,25,.12) 66%,
      rgba(1,7,17,.16) 100%
    ),
    linear-gradient(
      180deg,
      rgba(1,6,15,.12) 0%,
      rgba(1,7,18,.03) 53%,
      rgba(1,7,18,.64) 100%
    );
}


.hero-v2-inner {
  position:
    relative;

  z-index:
    5;

  width:
    min(1500px, calc(100% - 68px));

  min-height:
    650px;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    minmax(430px,.73fr)
    minmax(710px,1.27fr);

  gap:
    clamp(35px,4vw,72px);

  align-items:
    center;
}


/* =========================================================
   COPY
   ========================================================= */

.hero-v2-copy {
  position:
    relative;

  z-index:
    4;

  width:
    100%;

  max-width:
    610px;

  padding:
    22px 0 25px;

  background:
    linear-gradient(
      90deg,
      rgba(3,14,33,.67) 0%,
      rgba(3,14,33,.18) 72%,
      transparent 100%
    );

  backdrop-filter:
    blur(2px);
}


.hero-v2-copy::before {
  content: "";

  position:
    absolute;

  left:
    -27px;

  top:
    22px;

  bottom:
    25px;

  width:
    3px;

  border-radius:
    999px;

  background:
    linear-gradient(
      180deg,
      rgba(44,119,255,.25),
      #187bff 18%,
      #2697ff 80%,
      rgba(44,119,255,.18)
    );

  box-shadow:
    0 0 20px rgba(29,119,255,.50);
}


.hero-v2-eyebrow {
  margin:
    0 0 19px;

  color:
    #3a91ff;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.hero-v2 h1 {
  max-width:
    9.2ch;

  margin:
    0;

  color:
    #fff;

  font-size:
    clamp(64px,5.45vw,90px);

  line-height:
    .90;

  letter-spacing:
    -.062em;
}


.hero-v2-accent {
  color:
    #2f93ff;
}


.hero-v2-lead {
  max-width:
    570px;

  margin:
    27px 0 0;

  color:
    rgba(255,255,255,.73);

  font-size:
    16px;

  line-height:
    1.65;
}


.hero-v2-actions {
  margin-top:
    29px;

  display:
    flex;

  gap:
    13px;
}


.hero-v2-primary,
.hero-v2-secondary {
  min-height:
    56px;

  min-width:
    178px;

  padding:
    0 24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border-radius:
    8px;

  font-size:
    14px;

  font-weight:
    760;

  transition:
    transform .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}


.hero-v2-primary {
  color:
    #fff;

  border:
    1px solid rgba(62,145,255,.68);

  background:
    linear-gradient(
      135deg,
      #225fff,
      #087fff
    );

  box-shadow:
    0 15px 36px rgba(17,100,255,.29);
}


.hero-v2-secondary {
  color:
    rgba(255,255,255,.86);

  border:
    1px solid rgba(255,255,255,.25);

  background:
    rgba(3,12,29,.24);

  backdrop-filter:
    blur(10px);
}


.hero-v2-primary:hover,
.hero-v2-secondary:hover {
  transform:
    translateY(-3px);
}


.hero-v2-primary:hover {
  box-shadow:
    0 20px 43px rgba(17,100,255,.40);
}


.hero-v2-secondary:hover {
  background:
    rgba(255,255,255,.07);

  border-color:
    rgba(255,255,255,.42);
}


/* =========================================================
   VALUE ITEMS
   ========================================================= */

.hero-v2-proof {
  margin-top:
    34px;

  display:
    flex;

  align-items:
    stretch;
}


.hero-v2-proof-item {
  min-width:
    155px;

  padding:
    4px 20px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  border-right:
    1px solid rgba(255,255,255,.12);
}


.hero-v2-proof-item:first-child {
  padding-left:
    0;
}


.hero-v2-proof-item:last-child {
  border-right:
    0;
}


.hero-v2-proof-icon {
  width:
    31px;

  height:
    31px;

  flex:
    0 0 31px;

  display:
    grid;

  place-items:
    center;

  color:
    #3b91ff;

  border:
    1px solid rgba(54,139,255,.50);

  border-radius:
    9px;

  font-size:
    14px;

  font-weight:
    900;
}


.hero-v2-proof-bolt {
  border:
    0;

  font-size:
    23px;
}


.hero-v2-proof-item strong,
.hero-v2-proof-item small {
  display:
    block;
}


.hero-v2-proof-item strong {
  color:
    rgba(255,255,255,.89);

  font-size:
    11px;

  line-height:
    1.25;
}


.hero-v2-proof-item small {
  margin-top:
    3px;

  color:
    rgba(255,255,255,.45);

  font-size:
    8px;

  line-height:
    1.3;
}


/* =========================================================
   SINGLE COMPOSED DEVICE ART
   ========================================================= */

.hero-v2-showcase {
  position:
    relative;

  z-index:
    3;

  height:
    625px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.hero-v2-device-glow {
  position:
    absolute;

  width:
    75%;

  height:
    42%;

  left:
    14%;

  bottom:
    9%;

  border-radius:
    50%;

  background:
    radial-gradient(
      ellipse,
      rgba(22,110,255,.20),
      rgba(22,110,255,.06) 45%,
      transparent 72%
    );

  filter:
    blur(32px);
}


.hero-v2-device-art {
  position:
    relative;

  z-index:
    2;

  display:
    block;

  width:
    min(880px,108%);

  max-width:
    none;

  height:
    auto;

  transform:
    translate(1%,1%);

  filter:
    drop-shadow(
      0 42px 42px rgba(0,0,0,.34)
    );

  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    filter .45s ease;
}


@media (hover:hover) and (pointer:fine) {

  .hero-v2-showcase:hover .hero-v2-device-art {
    transform:
      translate(1%,-1%)
      scale(1.008);

    filter:
      drop-shadow(
        0 52px 50px rgba(0,0,0,.40)
      );
  }

}


/* =========================================================
   BUSINESS STRIP
   ========================================================= */

.hero-v2-trust {
  position:
    relative;

  z-index:
    8;

  width:
    min(1500px,calc(100% - 68px));

  margin:
    8px auto 0;

  padding:
    18px 0 26px;

  border-top:
    1px solid rgba(255,255,255,.16);
}


.hero-v2-trust > p {
  margin:
    0 0 15px;

  text-align:
    center;

  color:
    rgba(255,255,255,.44);

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    .24em;

  text-transform:
    uppercase;
}


.hero-v2-trust > p strong {
  color:
    #3e93ff;
}


.hero-v2-businesses {
  display:
    grid;

  grid-template-columns:
    repeat(6,1fr);

  align-items:
    center;
}


.hero-v2-businesses span {
  min-height:
    38px;

  padding:
    0 16px;

  display:
    grid;

  place-items:
    center;

  text-align:
    center;

  color:
    rgba(255,255,255,.46);

  border-right:
    1px solid rgba(255,255,255,.10);

  font-family:
    Georgia,"Times New Roman",serif;

  font-size:
    14px;

  line-height:
    1.15;

  transition:
    color .2s ease;
}


.hero-v2-businesses span:last-child {
  border-right:
    0;
}


.hero-v2-businesses span:hover {
  color:
    rgba(255,255,255,.82);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

  .hero-header-inner {
    width:
      calc(100% - 32px);

    grid-template-columns:
      180px 1fr auto;
  }


  .hero-brand-logo {
    width:
      138px;
  }


  .hero-brand-tagline {
    display:
      none;
  }


  .hero-nav {
    gap:
      20px;
  }


  .hero-header-secondary {
    display:
      none;
  }


  .hero-v2-inner {
    width:
      calc(100% - 42px);

    grid-template-columns:
      minmax(370px,.84fr)
      minmax(520px,1.16fr);

    gap:
      25px;
  }


  .hero-v2 h1 {
    font-size:
      clamp(58px,6vw,76px);
  }


  .hero-v2-showcase {
    height:
      550px;
  }


  .hero-v2-device-art {
    width:
      min(760px,110%);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:760px) {

  .hero-header {
    height:
      78px;

    padding:
      7px 0 9px;
  }


  .hero-header-inner {
    width:
      calc(100% - 20px);

    height:
      62px;

    padding:
      0 12px;

    display:
      flex;

    justify-content:
      space-between;

    gap:
      12px;

    border-radius:
      11px;
  }


  .hero-brand-logo {
    width:
      115px;
  }


  .hero-brand-tagline,
  .hero-nav,
  .hero-header-secondary {
    display:
      none;
  }


  .hero-header-primary {
    min-width:
      0;

    min-height:
      40px;

    padding:
      0 13px;

    border-radius:
      7px;

    font-size:
      10px;
  }


  .hero-header-primary span {
    display:
      none;
  }


  .hero-v2 {
    min-height:
      0;

    padding:
      100px 0 0;
  }


  .hero-v2-background {
    background-position:
      39% center;
  }


  .hero-v2-shade {
    background:
      linear-gradient(
        180deg,
        rgba(1,7,17,.82) 0%,
        rgba(2,10,24,.60) 47%,
        rgba(1,7,18,.91) 100%
      );
  }


  .hero-v2-inner {
    width:
      calc(100% - 34px);

    min-height:
      0;

    display:
      flex;

    flex-direction:
      column;

    gap:
      28px;
  }


  .hero-v2-copy {
    max-width:
      none;

    padding:
      15px 0;
  }


  .hero-v2-copy::before {
    left:
      -10px;

    top:
      15px;

    bottom:
      15px;

    width:
      2px;
  }


  .hero-v2-eyebrow {
    margin-bottom:
      13px;

    font-size:
      9px;
  }


  .hero-v2 h1 {
    max-width:
      9ch;

    font-size:
      clamp(49px,14.5vw,67px);

    line-height:
      .91;
  }


  .hero-v2-lead {
    margin-top:
      20px;

    font-size:
      14px;

    line-height:
      1.58;
  }


  .hero-v2-actions {
    margin-top:
      23px;

    display:
      grid;

    grid-template-columns:
      1fr 1fr;

    gap:
      9px;
  }


  .hero-v2-primary,
  .hero-v2-secondary {
    min-width:
      0;

    min-height:
      49px;

    padding:
      0 13px;

    border-radius:
      7px;

    font-size:
      11px;
  }


  .hero-v2-proof {
    margin-top:
      25px;

    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      0;
  }


  .hero-v2-proof-item {
    min-width:
      0;

    padding:
      9px 0;

    border-right:
      0;

    border-bottom:
      1px solid rgba(255,255,255,.09);
  }


  .hero-v2-proof-item:last-child {
    border-bottom:
      0;
  }


  .hero-v2-showcase {
    width:
      100%;

    height:
      auto;

    min-height:
      330px;

    margin-top:
      -6px;
  }


  .hero-v2-device-art {
    width:
      123%;

    max-width:
      none;

    transform:
      translateX(1%);

    filter:
      drop-shadow(
        0 28px 28px rgba(0,0,0,.28)
      );
  }


  .hero-v2-trust {
    width:
      calc(100% - 34px);

    margin-top:
      22px;

    padding-bottom:
      28px;
  }


  .hero-v2-businesses {
    grid-template-columns:
      repeat(2,1fr);
  }


  .hero-v2-businesses span {
    min-height:
      50px;

    padding:
      0 7px;

    border-right:
      0;

    border-bottom:
      1px solid rgba(255,255,255,.08);

    font-size:
      12px;
  }

}


@media (prefers-reduced-motion:reduce) {

  .hero-v2-device-art {
    transition:
      none !important;
  }

}


/* =========================================================
   WEB BY DON — SHARED BUTTON SHAPE
   ========================================================= */

:root {
  --wbd-button-radius: 8px;
}


/*
  Actual CTA/button elements only.
  Proof pills and informational badges remain rounded.
*/

.button,
.button-small,
.hero-v2-primary,
.hero-v2-secondary,
.hero-header-primary,
.hero-header-secondary,
.pricing-section .button,
.pricing-section button,
.final-cta .button,
.final-cta button,
a[role="button"],
button {
  border-radius:
    var(--wbd-button-radius) !important;
}


/* =========================================================
   MOBILE STICKY QUOTE CTA
   ========================================================= */

.mobile-quote-cta {
  display: none;
}


@media (max-width: 760px) {

  /*
    Mobile navigation stays intentionally minimal.
    Language control can occupy the right side later.
  */

  .hero-header {
    height: 64px;

    padding: 0;

    background:
      rgba(2,10,25,.40);

    border-bottom:
      1px solid rgba(255,255,255,.055);

    backdrop-filter:
      blur(13px)
      saturate(1.12);

    -webkit-backdrop-filter:
      blur(13px)
      saturate(1.12);
  }


  .hero-header-inner {
    width:
      calc(100% - 30px);

    height: 64px;

    margin: auto;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;
  }


  .hero-brand-logo {
    width: 118px;
  }


  .hero-nav,
  .hero-header-actions,
  .hero-header-primary,
  .hero-header-secondary {
    display:
      none !important;
  }


  .hero-v2 {
    padding-top:
      84px;
  }


  .mobile-quote-cta {
    position: fixed;

    z-index: 140;

    left: 10px;
    right: 10px;

    bottom:
      calc(
        10px
        + env(safe-area-inset-bottom, 0px)
      );

    min-height: 54px;

    padding:
      0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #fff;

    border:
      1px solid rgba(74,151,255,.72);

    border-radius:
      var(--wbd-button-radius);

    background:
      linear-gradient(
        135deg,
        #235fff,
        #0788ff
      );

    box-shadow:
      0 16px 36px rgba(5,42,106,.34),
      0 0 28px rgba(31,117,255,.18);

    font-size: 14px;

    font-weight: 800;

    transition:
      transform .25s ease,
      opacity .25s ease;
  }


  .mobile-quote-cta.is-hidden {
    opacity: 0;

    pointer-events: none;

    transform:
      translateY(
        calc(
          100%
          + 24px
        )
      );
  }


  /*
    Prevent the fixed CTA sitting on top of footer content.
  */

  .site-footer {
    padding-bottom:
      calc(
        86px
        + env(safe-area-inset-bottom, 0px)
      );
  }

}


/* =========================================================
   WEB BY DON — STABLE HERO NAV
   No scroll-state blur switching.
   ========================================================= */

.hero-header {
  position: fixed;

  z-index: 100;

  top: 0;
  left: 0;
  right: 0;

  width: 100%;

  background:
    linear-gradient(
      180deg,
      rgba(2,10,25,.64) 0%,
      rgba(2,10,25,.48) 70%,
      rgba(2,10,25,.34) 100%
    );

  border-bottom:
    1px solid rgba(255,255,255,.065);

  box-shadow:
    0 8px 28px rgba(0,0,0,.10);

  /*
    Deliberately avoid backdrop-filter here.
    The translucent surface gives the glass feel
    without repeatedly compositing the page beneath
    a fixed blurred layer while scrolling.
  */

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


.hero-header-inner {
  border: 0;
  border-radius: 0;

  background: transparent;

  box-shadow: none;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


@media (max-width: 760px) {

  .hero-header {
    background:
      rgba(2,10,25,.67);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

}


/* =========================================================
   WEB BY DON — FINAL STABLE NAV CONTRAST
   ========================================================= */

.hero-header {
  background:
    linear-gradient(
      180deg,
      rgba(3,14,34,.82) 0%,
      rgba(3,14,34,.76) 100%
    );

  border-bottom:
    1px solid rgba(116,166,235,.12);

  box-shadow:
    0 9px 28px rgba(2,10,25,.16);

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


.hero-header-inner {
  width:
    min(1500px, calc(100% - 72px));
}


.hero-brand-logo {
  width:
    158px;

  filter:
    drop-shadow(
      0 2px 8px rgba(0,0,0,.12)
    );
}


.hero-nav a {
  color:
    rgba(255,255,255,.91);

  font-size:
    13px;

  font-weight:
    720;

  letter-spacing:
    -.01em;
}


.hero-nav a:hover {
  color:
    #fff;
}


.hero-header-primary {
  box-shadow:
    0 8px 24px rgba(18,101,255,.30);
}


@media (max-width: 760px) {

  .hero-header {
    background:
      rgba(3,14,34,.84);

    border-bottom:
      1px solid rgba(116,166,235,.10);

    box-shadow:
      0 7px 22px rgba(2,10,25,.14);
  }


  .hero-brand-logo {
    width:
      122px;
  }

}


/* =========================================================
   WEB BY DON — PREMIUM FAQ
   ========================================================= */

.faq-shell {
  position: relative;

  padding:
    120px 28px 130px;

  overflow: hidden;

  scroll-margin-top:
    92px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7faff 100%
    );
}


.faq-shell::before {
  content: "";

  position: absolute;

  width: 620px;
  height: 620px;

  left: -330px;
  top: -250px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(37,99,255,.095),
      rgba(37,99,255,.025) 45%,
      transparent 72%
    );

  pointer-events: none;
}


.faq-shell::after {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  right: -300px;
  bottom: -270px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(20,139,255,.08),
      transparent 70%
    );

  pointer-events: none;
}


.faq-inner {
  position: relative;

  z-index: 2;

  width:
    min(1120px, 100%);

  margin:
    0 auto;

  display: grid;

  grid-template-columns:
    minmax(280px,.7fr)
    minmax(540px,1.3fr);

  gap:
    clamp(65px,7vw,110px);

  align-items:
    start;
}


.faq-heading {
  position: sticky;

  top:
    132px;
}


.faq-heading .eyebrow {
  margin-bottom:
    16px;
}


.faq-heading h2 {
  max-width:
    520px;

  margin:
    0;

  color:
    #071a38;

  font-size:
    clamp(43px,4.4vw,64px);

  line-height:
    .96;

  letter-spacing:
    -.052em;
}


.faq-heading > p:last-child {
  max-width:
    430px;

  margin:
    24px 0 0;

  color:
    #667791;

  font-size:
    16px;

  line-height:
    1.65;
}


.faq-list {
  display:
    grid;

  gap:
    12px;
}


.faq-item {
  position: relative;

  overflow: hidden;

  border:
    1px solid #e0e8f3;

  border-radius:
    16px;

  background:
    rgba(255,255,255,.82);

  box-shadow:
    0 8px 25px rgba(7,26,56,.035);

  transition:
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease,
    background .24s ease;
}


.faq-item:hover {
  border-color:
    rgba(49,125,255,.28);

  box-shadow:
    0 14px 36px rgba(7,40,100,.075),
    0 0 0 1px rgba(38,117,255,.025);

  transform:
    translateY(-1px);
}


.faq-item[open] {
  border-color:
    rgba(42,121,255,.34);

  background:
    #fff;

  box-shadow:
    0 18px 45px rgba(16,55,112,.09),
    0 0 40px rgba(34,118,255,.035);
}


.faq-item summary {
  position: relative;

  min-height:
    82px;

  padding:
    22px 74px 22px 26px;

  display:
    flex;

  align-items:
    center;

  cursor: pointer;

  list-style: none;

  color:
    #091a35;

  font-size:
    17px;

  font-weight:
    760;

  line-height:
    1.3;

  user-select: none;
}


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


.faq-item summary::marker {
  display: none;
  content: "";
}


.faq-item summary i {
  position: absolute;

  top: 50%;
  right: 24px;

  width:
    34px;

  height:
    34px;

  transform:
    translateY(-50%);

  border:
    1px solid rgba(43,124,255,.20);

  border-radius:
    9px;

  background:
    rgba(38,115,255,.055);

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}


.faq-item summary i::before,
.faq-item summary i::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width:
    12px;

  height:
    2px;

  border-radius:
    999px;

  background:
    #277aff;

  transform:
    translate(-50%,-50%);

  transition:
    transform .25s ease;
}


.faq-item summary i::after {
  transform:
    translate(-50%,-50%)
    rotate(90deg);
}


.faq-item[open] summary i {
  background:
    rgba(38,115,255,.10);

  border-color:
    rgba(43,124,255,.34);
}


.faq-item[open] summary i::after {
  transform:
    translate(-50%,-50%)
    rotate(0deg);
}


.faq-answer {
  padding:
    0 74px 26px 26px;

  color:
    #63738b;

  font-size:
    15px;

  line-height:
    1.68;
}


.faq-answer p {
  max-width:
    680px;

  margin:
    0;
}


.faq-answer strong {
  color:
    #12284b;

  font-weight:
    760;
}


@media (max-width: 900px) {

  .faq-shell {
    padding:
      95px 24px 105px;
  }


  .faq-inner {
    grid-template-columns:
      1fr;

    gap:
      48px;
  }


  .faq-heading {
    position:
      static;

    max-width:
      680px;

    text-align:
      center;

    margin:
      0 auto;
  }


  .faq-heading h2 {
    max-width:
      none;
  }


  .faq-heading > p:last-child {
    max-width:
      600px;

    margin:
      20px auto 0;
  }


  .faq-list {
    width:
      min(760px,100%);

    margin:
      0 auto;
  }

}


@media (max-width: 620px) {

  .faq-shell {
    padding:
      78px 17px 88px;

    scroll-margin-top:
      72px;
  }


  .faq-inner {
    gap:
      35px;
  }


  .faq-heading h2 {
    font-size:
      42px;
  }


  .faq-heading > p:last-child {
    font-size:
      14px;
  }


  .faq-list {
    gap:
      9px;
  }


  .faq-item {
    border-radius:
      13px;
  }


  .faq-item summary {
    min-height:
      72px;

    padding:
      19px 61px 19px 19px;

    font-size:
      15px;
  }


  .faq-item summary i {
    right:
      17px;

    width:
      32px;

    height:
      32px;

    border-radius:
      8px;
  }


  .faq-answer {
    padding:
      0 19px 21px;

    font-size:
      14px;

    line-height:
      1.62;
  }

}


@media (prefers-reduced-motion: reduce) {

  .faq-item,
  .faq-item summary i,
  .faq-item summary i::before,
  .faq-item summary i::after {
    transition:
      none !important;
  }

}


/* =========================================================
   WEB BY DON — CLIENT FEEDBACK RAILS
   ========================================================= */

.reviews-shell {
  position: relative;

  padding:
    115px 0 125px;

  overflow: hidden;

  scroll-margin-top:
    86px;

  color:
    #fff;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(29,93,205,.13),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #06162f 0%,
      #041126 100%
    );
}





.reviews-heading {
  position: relative;

  z-index: 10;

  width:
    min(900px, calc(100% - 48px));

  margin:
    0 auto 65px;

  text-align: center;
}


.reviews-heading .eyebrow {
  margin:
    0 0 16px;

  color:
    #398cff;
}


.reviews-heading h2 {
  margin:
    0;

  color:
    #fff;

  font-size:
    clamp(45px,5vw,68px);

  line-height:
    .96;

  letter-spacing:
    -.052em;
}


.reviews-heading > p:last-child {
  max-width:
    560px;

  margin:
    21px auto 0;

  color:
    rgba(255,255,255,.54);

  font-size:
    15px;

  line-height:
    1.6;
}


.reviews-marquee {
  position: relative;

  z-index: 3;

  width: 100%;

  overflow: hidden;

  /*
    Vertical breathing room lets hovered cards lift
    without being clipped by the marquee viewport.
    Negative top margin keeps the overall section
    spacing essentially unchanged.
  */

  padding:
    12px 0;

  margin:
    -12px 0 6px;
}


.reviews-marquee:last-child {
  margin-bottom:
    -12px;
}


.reviews-track {
  display: flex;

  width: max-content;

  will-change: transform;
}


.reviews-group {
  display: flex;

  flex-shrink: 0;

  gap:
    18px;

  padding-right:
    18px;
}


.reviews-marquee-left .reviews-track {
  animation:
    reviewsMoveLeft 115s linear infinite;
}


.reviews-marquee-right .reviews-track {
  animation:
    reviewsMoveRight 125s linear infinite;
}


@keyframes reviewsMoveLeft {

  from {
    transform:
      translate3d(0,0,0);
  }

  to {
    transform:
      translate3d(-50%,0,0);
  }

}


@keyframes reviewsMoveRight {

  from {
    transform:
      translate3d(-50%,0,0);
  }

  to {
    transform:
      translate3d(0,0,0);
  }

}


.review-card {
  position: relative;

  width:
    390px;

  min-height:
    245px;

  padding:
    28px 28px 24px;

  display: flex;

  flex-direction: column;

  justify-content:
    space-between;

  flex-shrink: 0;

  overflow: hidden;

  border:
    1px solid rgba(122,166,230,.13);

  border-radius:
    16px;

  background:
    linear-gradient(
      145deg,
      rgba(15,38,72,.86),
      rgba(8,27,56,.80)
    );

  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.028);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.review-card::after {
  content: "";

  position: absolute;

  width:
    170px;

  height:
    170px;

  right:
    -80px;

  bottom:
    -110px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(35,118,255,.12),
      transparent 70%
    );

  pointer-events: none;
}


.review-card-wide {
  width:
    430px;
}


.review-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(64,142,255,.30);

  box-shadow:
    0 23px 52px rgba(0,0,0,.24),
    0 0 32px rgba(29,107,255,.065),
    inset 0 1px 0 rgba(255,255,255,.04);
}


.reviews-marquee:hover .reviews-track {
  animation-play-state:
    paused;
}


.review-stars {
  margin-bottom:
    18px;

  color:
    #61a6ff;

  font-size:
    13px;

  letter-spacing:
    .13em;

  line-height:
    1;
}


.review-copy {
  flex:
    1;

  margin:
    0 0 28px;

  color:
    rgba(255,255,255,.78);

  font-size:
    15px;

  line-height:
    1.62;
}


.review-person {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  gap:
    13px;
}


.review-avatar {
  width:
    44px;

  height:
    44px;

  flex:
    0 0 44px;

  display:
    grid;

  place-items:
    center;

  color:
    #fff;

  border:
    1px solid rgba(102,166,255,.32);

  border-radius:
    50%;

  background:
    linear-gradient(
      145deg,
      #153f78,
      #0b244c
    );

  box-shadow:
    0 8px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.10);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    .04em;
}


.avatar-b,
.avatar-g {
  background:
    linear-gradient(
      145deg,
      #174c82,
      #102c55
    );
}


.avatar-c,
.avatar-h {
  background:
    linear-gradient(
      145deg,
      #25417a,
      #14234d
    );
}


.avatar-d,
.avatar-i {
  background:
    linear-gradient(
      145deg,
      #155676,
      #0d314d
    );
}


.avatar-e,
.avatar-j {
  background:
    linear-gradient(
      145deg,
      #234f91,
      #102d5d
    );
}


.review-person-copy {
  display: flex;

  flex-direction: column;

  gap:
    4px;
}


.review-person-copy strong {
  color:
    rgba(255,255,255,.92);

  font-size:
    13px;

  line-height:
    1.2;
}


.review-person-copy small {
  display: flex;

  align-items: center;

  gap:
    5px;

  color:
    rgba(255,255,255,.40);

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;
}


.review-person-copy small i {
  width:
    14px;

  height:
    14px;

  display:
    inline-grid;

  place-items:
    center;

  color:
    #4a9aff;

  border:
    1px solid rgba(73,151,255,.35);

  border-radius:
    50%;

  font-size:
    8px;

  font-style:
    normal;
}


@media (max-width: 760px) {

  .reviews-shell {
    padding:
      82px 0 92px;

    scroll-margin-top:
      68px;
  }


  .reviews-heading {
    width:
      calc(100% - 34px);

    margin-bottom:
      43px;
  }


  .reviews-heading h2 {
    font-size:
      42px;
  }


  .reviews-heading > p:last-child {
    font-size:
      14px;
  }


  .reviews-marquee {
    margin-bottom:
      12px;
  }


  .reviews-group {
    gap:
      12px;

    padding-right:
      12px;
  }


  .review-card,
  .review-card-wide {
    width:
      min(335px, calc(100vw - 42px));

    min-height:
      224px;

    padding:
      23px 22px 21px;

    border-radius:
      13px;
  }


  .review-copy {
    margin-bottom:
      23px;

    font-size:
      14px;
  }


  .reviews-marquee-left .reviews-track {
    animation-duration:
      105s;
  }


  .reviews-marquee-right .reviews-track {
    animation-duration:
      115s;
  }

}


@media (prefers-reduced-motion: reduce) {

  .reviews-track {
    animation:
      none !important;
  }


  .reviews-marquee {
    overflow-x:
      auto;

    scrollbar-width:
      none;
  }


  .reviews-marquee::-webkit-scrollbar {
    display:
      none;
  }


  .reviews-group[aria-hidden="true"] {
    display:
      none;
  }

}


/* =========================================================
   WEB BY DON — REVIEW RAIL REFINEMENT
   ========================================================= */

/*
  Fade cards naturally further away from the viewport edges.
  This replaces the previous dark overlay.
*/

.reviews-marquee {
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.18) 4%,
      #000 14%,
      #000 86%,
      rgba(0,0,0,.18) 96%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.18) 4%,
      #000 14%,
      #000 86%,
      rgba(0,0,0,.18) 96%,
      transparent 100%
    );
}


/*
  More compact cards now the accidental nested-footer
  styling has been removed.
*/

.review-card {
  min-height:
    205px;

  padding:
    24px 26px 22px;
}


.review-card-wide {
  width:
    420px;
}


.review-copy {
  margin-bottom:
    21px;

  line-height:
    1.55;
}


/*
  Explicitly keep the client row lightweight.
*/

.review-person {
  margin:
    0;

  padding:
    0;

  min-height:
    44px;

  background:
    transparent;

  border:
    0;

  box-shadow:
    none;
}


.review-person-copy small {
  color:
    rgba(255,255,255,.48);
}


.review-person-copy small i {
  color:
    #7ab7ff;

  background:
    rgba(42,126,255,.08);
}


@media (max-width:760px) {

  .reviews-marquee {
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%
      );

    mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%
      );
  }


  .review-card,
  .review-card-wide {
    min-height:
      205px;

    padding:
      21px 21px 19px;
  }

}


/* =========================================================
   WEB BY DON — LANGUAGE SELECTOR
   ========================================================= */

.hero-header-inner {
  grid-template-columns:
    220px
    minmax(0,1fr)
    auto
    auto;

  gap:
    20px;
}


.language-slot {
  position:
    relative;

  z-index:
    140;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  direction:
    ltr;
}


.language-switcher {
  position:
    relative;
}


.language-trigger {
  height:
    44px;

  min-width:
    82px;

  padding:
    0 12px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  color:
    rgba(255,255,255,.92);

  border:
    1px solid rgba(255,255,255,.16);

  border-radius:
    8px;

  background:
    rgba(255,255,255,.045);

  box-shadow:
    none;

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    750;

  cursor:
    pointer;

  transition:
    background .2s ease,
    border-color .2s ease;
}


.language-trigger:hover {
  background:
    rgba(255,255,255,.085);

  border-color:
    rgba(92,159,255,.34);
}


.language-current-flag {
  font-size:
    16px;

  line-height:
    1;
}


.language-current-code {
  min-width:
    18px;

  text-align:
    center;

  letter-spacing:
    .04em;
}


.language-chevron {
  position:
    relative;

  top:
    -1px;

  color:
    rgba(255,255,255,.52);

  font-size:
    13px;
}


.language-menu {
  position:
    absolute;

  z-index:
    180;

  top:
    calc(100% + 9px);

  right:
    0;

  width:
    190px;

  padding:
    7px;

  overflow:
    hidden;

  border:
    1px solid rgba(107,163,241,.18);

  border-radius:
    10px;

  background:
    rgba(4,17,39,.97);

  box-shadow:
    0 20px 48px rgba(0,0,0,.30);

  direction:
    ltr;
}


.language-menu[hidden] {
  display:
    none !important;
}


.language-option {
  width:
    100%;

  min-height:
    40px;

  padding:
    0 10px;

  display:
    grid;

  grid-template-columns:
    24px
    1fr
    auto;

  align-items:
    center;

  gap:
    8px;

  color:
    rgba(255,255,255,.74);

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  font:
    inherit;

  font-size:
    11px;

  text-align:
    left;

  cursor:
    pointer;
}


.language-option:hover,
.language-option.is-active {
  color:
    #fff;

  background:
    rgba(47,131,255,.12);
}


.language-option.is-active {
  box-shadow:
    inset 2px 0 0 #328cff;
}


.language-option-flag {
  font-size:
    16px;
}


.language-option-name {
  font-weight:
    650;
}


.language-option-code {
  color:
    rgba(255,255,255,.38);

  font-size:
    9px;

  font-weight:
    800;
}


@media (max-width: 1120px) {

  .hero-header-inner {
    grid-template-columns:
      170px
      minmax(0,1fr)
      auto
      auto;

    gap:
      13px;
  }


  .hero-nav {
    gap:
      18px;
  }


  .language-trigger {
    min-width:
      70px;

    padding:
      0 9px;
  }

}


@media (max-width: 760px) {

  .hero-header-inner {
    display:
      flex;

    justify-content:
      space-between;
  }


  .language-slot {
    margin-inline-start:
      auto;
  }


  .language-trigger {
    height:
      38px;

    min-width:
      72px;

    padding:
      0 9px;

    background:
      rgba(255,255,255,.04);
  }


  .language-menu {
    width:
      178px;
  }

}


/* =========================================================
   RTL LANGUAGE SUPPORT
   ========================================================= */

html[dir="rtl"] body {
  direction:
    rtl;
}


html[dir="rtl"] .language-switcher,
html[dir="rtl"] .review-copy,
html[dir="rtl"] .review-person {
  direction:
    ltr;
}


html[dir="rtl"] .review-copy,
html[dir="rtl"] .review-person {
  text-align:
    left;
}


html[dir="rtl"] .hero-v2-copy,
html[dir="rtl"] .faq-heading,
html[dir="rtl"] .faq-answer,
html[dir="rtl"] .final-panel {
  text-align:
    right;
}


html[dir="rtl"] .faq-item summary {
  padding:
    22px 26px 22px 74px;
}


html[dir="rtl"] .faq-item summary i {
  right:
    auto;

  left:
    24px;
}


@media (max-width: 620px) {

  html[dir="rtl"] .faq-item summary {
    padding:
      19px 19px 19px 61px;
  }


  html[dir="rtl"] .faq-item summary i {
    left:
      17px;
  }

}


/* =========================================================
   WEB BY DON — COMPACT MOBILE INCLUDED CARDS
   ========================================================= */

@media (max-width: 620px) {

  .mobile-compact-included article {
    min-height:
      118px !important;

    padding:
      18px 22px !important;

    display:
      flex;

    flex-direction:
      column;

    justify-content:
      center;
  }


  .mobile-compact-included article strong {
    margin-bottom:
      7px;
  }


  .mobile-compact-included article span {
    line-height:
      1.45;
  }

}


/* =========================================================
   WEB BY DON — PINNED STORY TABLET FIT

   Desktop keeps the original 370px / 660px minimums.
   Mobile keeps its existing stacked version.

   Tablet allows both columns to shrink inside the viewport
   while preserving the two-column pinned composition.
   ========================================================= */

@media (min-width: 761px) and (max-width: 1120px) {

  .story-pin-inner {
    grid-template-columns:
      minmax(0, .8fr)
      minmax(0, 1.2fr);

    gap:
      clamp(24px, 3vw, 36px);
  }


  .story-pin-copy,
  .story-pin-stage {
    min-width:
      0;
  }


  .story-pin-stage {
    width:
      100%;
  }


  .story-pin-copy h2 {
    font-size:
      clamp(36px, 4.3vw, 50px);
  }


  .story-pin-copy > p:not(.eyebrow) {
    font-size:
      14px;

    line-height:
      1.5;
  }

}


/* =========================================================
   WEB BY DON — MOBILE PORTFOLIO INTERACTION

   Desktop:
   whole card remains clickable through the link overlay.

   Mobile:
   only "View website" is clickable, reducing accidental
   navigation while the visitor scrolls.
   ========================================================= */

.work-card {
  position: relative;
}


.work-card-link {
  color: inherit;
  text-decoration: none;
}


.work-card-link > span {
  position: relative;
  z-index: 2;
}


@media (min-width: 681px) {

  .work-card-link {
    position: static;
  }


  .work-card-link::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;
  }

}


@media (max-width: 680px) {

  #work .work-card {
    opacity: .94;

    transform:
      translateY(12px)
      scale(.992);

    border-color:
      rgba(24,93,183,.10);

    box-shadow:
      0 12px 30px rgba(7,26,56,.075),
      0 2px 7px rgba(7,26,56,.035);

    transition:
      opacity .48s ease,
      transform .52s cubic-bezier(.2,.72,.2,1),
      box-shadow .52s ease,
      border-color .52s ease;
  }


  #work .work-card.is-mobile-visible {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    border-color:
      rgba(42,126,255,.20);

    box-shadow:
      0 24px 54px rgba(7,26,56,.14),
      0 5px 15px rgba(42,126,255,.075);
  }


  #work .work-card-link {
    position: relative;

    z-index: 3;

    display: inline-flex;

    touch-action:
      manipulation;
  }


  #work .work-card-link::after {
    content: none;
  }

}


@media (
  max-width: 680px
) and (
  prefers-reduced-motion: reduce
) {

  #work .work-card,
  #work .work-card.is-mobile-visible {
    opacity: 1;

    transform: none;

    transition: none;
  }

}