:root {
  --paper: #f5f7fb;
  --ink: #10131a;
  --sun: #6f3398;
  --mint: #2baeb0;
  --rose: #6f3398;
  --card: #ffffff;
  --line: #d9e1ea;
  --shadow: 0 18px 50px rgba(16, 19, 26, 0.12);
  --radius-xl: 28px;
  --radius-md: 18px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Nunito Sans", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(43, 174, 176, 0.26), transparent 48%),
    radial-gradient(circle at 84% 5%, rgba(111, 51, 152, 0.18), transparent 42%),
    linear-gradient(180deg, #f7fafd 0%, #fbfcff 35%, #f5f8fd 100%);
  line-height: 1.6;
}

.container {
  width: min(1120px, calc(100% - 2.2rem));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(9px);
  background: rgba(245, 247, 251, 0.9);
  border-bottom: 1px solid rgba(43, 174, 176, 0.2);
}

.header-wrap {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
}

.brand {
  display: inline-block;
  position: relative;
  width: clamp(230px, 34vw, 460px);
  flex-shrink: 0;
  /* Coordinates are anchored to the original logo canvas (1465x451). */
  --logo-w: 1465;
  --logo-h: 451;

  /* Spark trajectory points in logo pixel coordinates (x/y). */
  --spark-start-x: 1024;
  --spark-start-y: 312;

  --spark-p1-x: 967;
  --spark-p1-y: 280;
  --spark-p2-x: 916;
  --spark-p2-y: 254;
  --spark-p3-x: 871;
  --spark-p3-y: 232;
  --spark-p4-x: 836;
  --spark-p4-y: 222;
  --spark-p5-x: 775;
  --spark-p5-y: 245;
  --spark-p6-x: 753;
  --spark-p6-y: 280;
  --spark-p7-x: 737;
  --spark-p7-y: 318;
  --spark-p8-x: 709;
  --spark-p8-y: 359;
  --spark-p9-x: 664;
  --spark-p9-y: 388;
  --spark-p10-x: 626;
  --spark-p10-y: 404;
  --spark-p11-x: 575;
  --spark-p11-y: 404;
  --spark-p12-x: 521;
  --spark-p12-y: 385;
  --spark-p13-x: 482;
  --spark-p13-y: 369;
  --spark-p14-x: 441;
  --spark-p14-y: 340;
  --spark-p15-x: 419;
  --spark-p15-y: 292;
  --spark-p16-x: 438;
  --spark-p16-y: 241;
  --spark-p17-x: 476;
  --spark-p17-y: 225;
  --spark-p18-x: 505;
  --spark-p18-y: 232;
  --spark-p19-x: 553;
  --spark-p19-y: 241;
  --spark-p20-x: 584;
  --spark-p20-y: 232;
  --spark-p21-x: 613;
  --spark-p21-y: 232;
  --spark-p22-x: 642;
  --spark-p22-y: 260;
  --spark-p23-x: 651;
  --spark-p23-y: 292;
  --spark-p24-x: 632;
  --spark-p24-y: 340;
  --spark-p25-x: 607;
  --spark-p25-y: 356;
  --spark-p26-x: 575;
  --spark-p26-y: 375;
  --spark-p27-x: 530;
  --spark-p27-y: 395;
  --spark-p28-x: 467;
  --spark-p28-y: 411;
  --spark-p29-x: 435;
  --spark-p29-y: 404;
  --spark-p30-x: 387;
  --spark-p30-y: 395;
  --spark-p31-x: 326;
  --spark-p31-y: 363;
  --spark-p32-x: 291;
  --spark-p32-y: 334;
  --spark-p33-x: 253;
  --spark-p33-y: 312;
  --spark-p34-x: 218;
  --spark-p34-y: 283;
  --spark-p35-x: 174;
  --spark-p35-y: 254;
  --spark-p36-x: 139;
  --spark-p36-y: 238;
  --spark-p37-x: 97;
  --spark-p37-y: 235;
  --spark-p38-x: 62;
  --spark-p38-y: 235;
  --spark-p39-x: 62;
  --spark-p39-y: 235;
  --spark-p40-x: 62;
  --spark-p40-y: 235;
  --spark-p41-x: 62;
  --spark-p41-y: 235;
  --spark-p42-x: 62;
  --spark-p42-y: 235;
  --spark-p43-x: 62;
  --spark-p43-y: 235;
  --spark-p44-x: 62;
  --spark-p44-y: 235;
  --spark-end-x: 62;
  --spark-end-y: 235;

  /* Blink point (defaults to the end of the spark path). */
  --blink-x: var(--spark-end-x);
  --blink-y: var(--spark-end-y);

  --spark-start-left: calc((var(--spark-start-x) / var(--logo-w)) * 100%);
  --spark-start-top: calc((var(--spark-start-y) / var(--logo-h)) * 100%);
  --blink-left: calc((var(--blink-x) / var(--logo-w)) * 100%);
  --blink-top: calc((var(--blink-y) / var(--logo-h)) * 100%);
  /* Right upper Y point in logo (adjust if needed). */
  --blink-y2-x: 1280;
  --blink-y2-y: 63;
  --blink-y2-left: calc((var(--blink-y2-x) / var(--logo-w)) * 100%);
  --blink-y2-top: calc((var(--blink-y2-y) / var(--logo-h)) * 100%);
}

.brand img {
  width: 100%;
  height: auto;
  display: block;
}

.brand::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(43, 174, 176, 0.88), 0 0 14px 6px rgba(43, 174, 176, 0.52);
  left: var(--spark-start-left);
  top: var(--spark-start-top);
  pointer-events: none;
  animation: sparkCable 7.69s linear 1;
}

.brand::before {
  content: "";
  position: absolute;
  width: 25.5px;
  height: 25.5px;
  border-radius: 50%;
  left: var(--blink-left);
  top: var(--blink-top);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(43, 174, 176, 1) 34%, rgba(43, 174, 176, 0) 82%);
  box-shadow: 0 0 18px 5px rgba(43, 174, 176, 0.85), 0 0 52px 18px rgba(43, 174, 176, 0.72);
  filter: blur(0.2px) saturate(1.2);
  opacity: 0;
  animation: connectorGlow 7.69s linear 1;
}

.brand .blink-y {
  position: absolute;
  width: 25.5px;
  height: 25.5px;
  border-radius: 50%;
  left: var(--blink-y2-left);
  top: var(--blink-y2-top);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(43, 174, 176, 1) 34%, rgba(43, 174, 176, 0) 82%);
  box-shadow: 0 0 18px 5px rgba(43, 174, 176, 0.85), 0 0 52px 18px rgba(43, 174, 176, 0.72);
  filter: blur(0.2px) saturate(1.2);
  opacity: 0;
  animation: connectorGlowY 7.69s linear 1;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  transition: transform 0.2s ease;
}

.contact-pill:hover {
  transform: translateY(-1px);
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 10px 22px rgba(19, 34, 56, 0.15);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.social-link:hover {
  transform: translateY(-2px);
  filter: saturate(1.15);
}

.social-instagram {
  background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af);
}

.social-facebook {
  background: #1877f2;
}

.social-whatsapp {
  background: #25d366;
}

.social-email {
  background: linear-gradient(135deg, #2baeb0, #6f3398);
}

.hero {
  padding: 5.2rem 0 4.8rem;
  animation: rise 0.7s ease forwards;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.2rem;
  align-items: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(31, 159, 148, 0.16);
  color: #0f6c64;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  font-family: "Cormorant Garamond", serif;
  line-height: 1.12;
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  margin-bottom: 1rem;
}

.hero p {
  font-size: clamp(1.05rem, 2vw, 1.24rem);
  max-width: 36ch;
  color: #39465a;
  margin-bottom: 1.4rem;
}

.hero-card {
  background: linear-gradient(145deg, #ffffff, #f4fbfd);
  border: 1px solid #cfe5e6;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 2rem;
  transform: rotate(-2deg);
}

.hero-card h3 {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

.hero-card p {
  margin-bottom: 0;
  max-width: none;
  font-size: 1rem;
}

.button-row {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.82rem 1.3rem;
  border-radius: 14px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(19, 34, 56, 0.16);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(130deg, var(--mint), #248f92);
}

.btn-soft {
  color: var(--ink);
  background: #fff;
  border-color: var(--line);
}

.section {
  padding: 4.3rem 0;
}

.section h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.75rem;
}

.section-head {
  margin-bottom: 1.5rem;
}

.section-sub {
  max-width: 62ch;
  color: #3e4f67;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.1rem;
}

.service {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: 0 8px 20px rgba(19, 34, 56, 0.08);
}

.service strong {
  color: #2a7f9f;
  display: block;
  margin-bottom: 0.35rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}

.gallery-item {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #d5dfeb;
  box-shadow: 0 16px 35px rgba(16, 19, 26, 0.14);
  background: #fff;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.about-box,
.review-box,
.contact-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 1.6rem;
}

.reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.review-box p {
  font-style: italic;
  color: #39465a;
}

.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

form {
  display: grid;
  gap: 0.72rem;
}

input,
textarea {
  width: 100%;
  border: 1px solid #d8cbbf;
  background: #fffdfb;
  border-radius: 12px;
  padding: 0.76rem 0.85rem;
  font: inherit;
  color: var(--ink);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.captcha-line {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.captcha-line label {
  font-weight: 700;
  color: #2a7f9f;
  min-width: 84px;
}

.submit {
  border: none;
  cursor: pointer;
  padding: 0.86rem 1rem;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(130deg, var(--sun), #56257a);
}

.floating-buttons {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 30;
}

.float-btn {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(19, 34, 56, 0.2);
  transition: transform 0.2s ease;
}

.float-btn:hover {
  transform: translateY(-2px);
}

.float-phone {
  background: linear-gradient(135deg, #2baeb0, #6f3398);
}

.float-phone svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}

.float-whatsapp {
  background: #25d366;
}

.float-whatsapp svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

footer {
  margin-top: 2.8rem;
  border-top: 1px solid rgba(43, 174, 176, 0.24);
  padding: 2rem 0 2.6rem;
  text-align: center;
  color: #405067;
}

@keyframes sparkCable {
  0% {
    left: var(--spark-start-left);
    top: var(--spark-start-top);
    opacity: 1;
  }
  1.4312% {
    left: calc((var(--spark-p1-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p1-y) / var(--logo-h)) * 100%);
  }
  2.7942% {
    left: calc((var(--spark-p2-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p2-y) / var(--logo-h)) * 100%);
  }
  4.0922% {
    left: calc((var(--spark-p3-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p3-y) / var(--logo-h)) * 100%);
  }
  5.3286% {
    left: calc((var(--spark-p4-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p4-y) / var(--logo-h)) * 100%);
  }
  6.506% {
    left: calc((var(--spark-p5-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p5-y) / var(--logo-h)) * 100%);
  }
  7.6274% {
    left: calc((var(--spark-p6-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p6-y) / var(--logo-h)) * 100%);
  }
  8.6952% {
    left: calc((var(--spark-p7-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p7-y) / var(--logo-h)) * 100%);
  }
  9.7124% {
    left: calc((var(--spark-p8-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p8-y) / var(--logo-h)) * 100%);
  }
  10.6811% {
    left: calc((var(--spark-p9-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p9-y) / var(--logo-h)) * 100%);
  }
  11.6036% {
    left: calc((var(--spark-p10-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p10-y) / var(--logo-h)) * 100%);
  }
  12.4822% {
    left: calc((var(--spark-p11-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p11-y) / var(--logo-h)) * 100%);
  }
  13.319% {
    left: calc((var(--spark-p12-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p12-y) / var(--logo-h)) * 100%);
  }
  14.1159% {
    left: calc((var(--spark-p13-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p13-y) / var(--logo-h)) * 100%);
  }
  14.8749% {
    left: calc((var(--spark-p14-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p14-y) / var(--logo-h)) * 100%);
  }
  15.5977% {
    left: calc((var(--spark-p15-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p15-y) / var(--logo-h)) * 100%);
  }
  16.2861% {
    left: calc((var(--spark-p16-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p16-y) / var(--logo-h)) * 100%);
  }
  16.9418% {
    left: calc((var(--spark-p17-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p17-y) / var(--logo-h)) * 100%);
  }
  17.5661% {
    left: calc((var(--spark-p18-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p18-y) / var(--logo-h)) * 100%);
  }
  18.1608% {
    left: calc((var(--spark-p19-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p19-y) / var(--logo-h)) * 100%);
  }
  18.7272% {
    left: calc((var(--spark-p20-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p20-y) / var(--logo-h)) * 100%);
  }
  19.2666% {
    left: calc((var(--spark-p21-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p21-y) / var(--logo-h)) * 100%);
  }
  19.7802% {
    left: calc((var(--spark-p22-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p22-y) / var(--logo-h)) * 100%);
  }
  20.2696% {
    left: calc((var(--spark-p23-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p23-y) / var(--logo-h)) * 100%);
  }
  20.7354% {
    left: calc((var(--spark-p24-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p24-y) / var(--logo-h)) * 100%);
  }
  21.1792% {
    left: calc((var(--spark-p25-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p25-y) / var(--logo-h)) * 100%);
  }
  21.6018% {
    left: calc((var(--spark-p26-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p26-y) / var(--logo-h)) * 100%);
  }
  22.0043% {
    left: calc((var(--spark-p27-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p27-y) / var(--logo-h)) * 100%);
  }
  22.3876% {
    left: calc((var(--spark-p28-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p28-y) / var(--logo-h)) * 100%);
  }
  22.7528% {
    left: calc((var(--spark-p29-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p29-y) / var(--logo-h)) * 100%);
  }
  23.1004% {
    left: calc((var(--spark-p30-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p30-y) / var(--logo-h)) * 100%);
  }
  23.4316% {
    left: calc((var(--spark-p31-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p31-y) / var(--logo-h)) * 100%);
  }
  23.7469% {
    left: calc((var(--spark-p32-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p32-y) / var(--logo-h)) * 100%);
  }
  24.0473% {
    left: calc((var(--spark-p33-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p33-y) / var(--logo-h)) * 100%);
  }
  24.3334% {
    left: calc((var(--spark-p34-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p34-y) / var(--logo-h)) * 100%);
  }
  24.6058% {
    left: calc((var(--spark-p35-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p35-y) / var(--logo-h)) * 100%);
  }
  24.8652% {
    left: calc((var(--spark-p36-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p36-y) / var(--logo-h)) * 100%);
  }
  25.1124% {
    left: calc((var(--spark-p37-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p37-y) / var(--logo-h)) * 100%);
  }
  25.3477% {
    left: calc((var(--spark-p38-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p38-y) / var(--logo-h)) * 100%);
  }
  25.5718% {
    left: calc((var(--spark-p39-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p39-y) / var(--logo-h)) * 100%);
  }
  25.7852% {
    left: calc((var(--spark-p40-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p40-y) / var(--logo-h)) * 100%);
  }
  25.9886% {
    left: calc((var(--spark-p41-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p41-y) / var(--logo-h)) * 100%);
  }
  26.1822% {
    left: calc((var(--spark-p42-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p42-y) / var(--logo-h)) * 100%);
  }
  26.3666% {
    left: calc((var(--spark-p43-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p43-y) / var(--logo-h)) * 100%);
  }
  26.5422% {
    left: calc((var(--spark-p44-x) / var(--logo-w)) * 100%);
    top: calc((var(--spark-p44-y) / var(--logo-h)) * 100%);
    opacity: 1;
  }
  26.7094% {
    left: calc((var(--blink-x) / var(--logo-w)) * 100% - 4px);
    top: calc((var(--blink-y) / var(--logo-h)) * 100% - 4px);
    opacity: 1;
  }
  27.6923% {
    left: calc((var(--blink-x) / var(--logo-w)) * 100% - 4px);
    top: calc((var(--blink-y) / var(--logo-h)) * 100% - 4px);
    opacity: 0;
  }
  100% {
    left: calc((var(--blink-x) / var(--logo-w)) * 100% - 4px);
    top: calc((var(--blink-y) / var(--logo-h)) * 100% - 4px);
    opacity: 0;
  }
}

@keyframes connectorGlow {
  0%,
  33.47% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
    filter: blur(0.2px) saturate(1.2) brightness(1);
  }
  36.8038% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
    filter: blur(0.2px) saturate(1.3) brightness(1.5);
  }
  43.2495% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.45);
    filter: blur(0.2px) saturate(1.35) brightness(1.9);
  }
  48.9913%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75);
    filter: blur(0.2px) saturate(1.2) brightness(1);
  }
}

@keyframes connectorGlowY {
  0%,
  46.4739% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
    filter: blur(0.2px) saturate(1.2) brightness(1);
  }
  49.8077% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
    filter: blur(0.2px) saturate(1.3) brightness(1.5);
  }
  56.2534% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.45);
    filter: blur(0.2px) saturate(1.35) brightness(1.9);
  }
  61.9952%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75);
    filter: blur(0.2px) saturate(1.2) brightness(1);
  }
}

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

@media (max-width: 980px) {
  .hero-layout,
  .contact-wrap {
    grid-template-columns: 1fr;
  }

  .hero-card {
    transform: none;
  }

  .services-grid,
  .gallery-grid,
  .reviews {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .header-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }

  .brand {
    width: min(82vw, 360px);
  }

  .brand img {
    width: 100%;
  }

  .header-right {
    position: relative;
    z-index: 2;
  }

  .services-grid,
  .gallery-grid,
  .reviews {
    grid-template-columns: 1fr;
  }

  .contact-pill {
    display: none;
  }

  .brand::after {
    width: 8px;
    height: 8px;
  }

  .section {
    padding: 3.6rem 0;
  }
}