:root {
  --navy: #0c2949;
  --navy-2: #123a63;
  --blue: #1554a1;
  --blue-2: #2279c9;
  --cyan: #39c7e5;
  --ink: #14253a;
  --muted: #68788a;
  --muted-light: #a8b5c2;
  --line: #d4dce4;
  --paper: #cfd5da;
  --white: #eceff1;
  --mint: #dff5f0;
  --ease: cubic-bezier(.22,.72,.24,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(135deg, #c9d0d6 0%, #dce1e5 25%, #cbd2d8 55%, #d9dee2 78%, #c4cdd4 100%);
  font-family: "DM Sans", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body, button, a { -webkit-tap-highlight-color: transparent; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
::selection { background: rgba(57,199,229,.27); color: var(--navy); }

.skip-link {
  position: fixed; z-index: 1000; left: 16px; top: 12px;
  padding: 10px 14px; color: #fff; background: var(--navy);
  border-radius: 8px; transform: translateY(-150%); transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
.section-wrap { width: min(1220px, calc(100% - 64px)); margin-inline: auto; }
.section-space { padding-block: 116px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 80;
  border-bottom: 1px solid rgba(113,137,158,.34);
  background: rgba(207,214,220,.9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled { background: rgba(218,224,229,.97); box-shadow: 0 8px 30px rgba(17,42,70,.12); }
.nav-shell { width: min(1300px, calc(100% - 64px)); height: 86px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; color: var(--navy); position: relative; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { color: var(--navy); font-family: Manrope, sans-serif; font-size: 19px; font-weight: 800; letter-spacing: .095em; }
.brand-copy > span { margin-top: 5px; color: #65778c; font-size: 9px; font-weight: 700; letter-spacing: .47em; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.5vw, 36px); }
.main-nav a { color: #485a70; font-size: 13px; font-weight: 600; transition: color .2s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--blue-2); }
.nav-actions { display: flex; align-items: center; gap: 17px; }
.nav-phone { display: inline-flex; align-items: center; gap: 8px; color: #3f5268; font-size: 12px; font-weight: 700; white-space: nowrap; }
.phone-icon { width: 17px; color: var(--blue); }
.phone-icon svg, .call-ring svg, .phone-mini-icon svg { width: 100%; height: 100%; }
.button { min-height: 54px; padding: 0 23px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; font-weight: 700; transition: transform .22s var(--ease), box-shadow .22s ease, background .22s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .text-link:focus-visible, .main-nav a:focus-visible, .nav-phone:focus-visible, .footer-links a:focus-visible { outline: 3px solid rgba(57,199,229,.6); outline-offset: 4px; border-radius: 5px; }
.button-small { min-height: 43px; padding: 0 17px; border-radius: 10px; font-size: 12px; gap: 9px; }
.button-small svg { width: 16px; }
.button-navy { color: white; background: var(--navy); box-shadow: 0 8px 18px rgba(11,33,60,.15); }
.button-navy:hover { background: #143c66; box-shadow: 0 12px 22px rgba(11,33,60,.2); }
.menu-toggle { display: none; }

/* Hero */
.hero { min-height: 632px; position: relative; isolation: isolate; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 34px; padding-block: 64px 72px; }
.hero::before { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: linear-gradient(118deg, #bfc8d0 0%, #d8dde1 31%, #e2e5e7 53%, #c4cdd4 100%); }
.hero::after { content: ""; position: absolute; z-index: -1; top: 0; right: -7vw; width: min(70vw, 900px); height: 380px; border-bottom-left-radius: 100% 95%; background: linear-gradient(126deg, #0c2949 3%, #14518a 48%, #237fc2 76%, #39d3e5 100%); opacity: .98; }
.hero-copy { padding-block: 10px; position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #52708f; font-family: Manrope, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.eyebrow-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(57,199,229,.13); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { max-width: 670px; margin: 24px 0 21px; color: var(--navy); font-family: Manrope, "Segoe UI", sans-serif; font-size: clamp(46px, 5.3vw, 73px); font-weight: 600; letter-spacing: -.065em; line-height: 1.08; }
.hero h1 em, h2 em { color: var(--blue); font-style: normal; }
.hero-lede { max-width: 540px; margin-bottom: 27px; color: #64758a; font-size: 16px; line-height: 1.78; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.button-primary { min-height: 58px; padding-inline: 21px; color: white; background: #1555a3; box-shadow: 0 12px 25px rgba(21,85,163,.22); }
.button-primary:hover { background: #0d458a; box-shadow: 0 16px 30px rgba(21,85,163,.3); }
.button-primary .whatsapp-icon { width: 21px; height: 21px; }
.whatsapp-icon svg { width: 100%; height: 100%; }
.button-arrow { width: 17px; transition: transform .22s ease; }
.button-primary:hover .button-arrow, .button-small:hover svg { transform: translateX(3px); }
.button-quiet { min-height: 54px; padding-inline: 15px; color: #465b72; background: transparent; }
.button-quiet:hover { background: white; box-shadow: 0 8px 18px rgba(23,48,76,.07); }
.call-ring { width: 34px; height: 34px; padding: 8px; display: grid; place-items: center; border: 1px solid #dce4ec; border-radius: 50%; color: var(--blue); background: rgba(255,255,255,.6); }
.hero-note { display: flex; align-items: center; gap: 9px; margin-top: 23px; color: #718096; font-size: 12px; }
.note-check { width: 17px; height: 17px; display: grid; place-items: center; color: #1a8e7a; background: #e4f6f1; border-radius: 50%; }
.note-check svg { width: 12px; height: 12px; }
.hero-art { min-height: 494px; position: relative; display: grid; place-items: center; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; z-index: -2; width: 88%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 48% 47%, #eaf8fc 0 22%, rgba(219,239,250,.87) 40%, rgba(216,231,246,.43) 58%, transparent 71%); }
.hero-art::after { content: ""; position: absolute; z-index: -3; inset: 5% 1% 4% 3%; border-radius: 44% 56% 47% 53% / 48% 48% 52% 52%; background: linear-gradient(135deg, rgba(212,239,248,.24), rgba(217,228,244,.52)); transform: rotate(-6deg); animation: art-drift 11s ease-in-out infinite alternate; }
.art-grid { position: absolute; z-index: -1; inset: 5%; opacity: .25; background-image: radial-gradient(#8bb5d1 .85px, transparent .85px); background-size: 20px 20px; mask-image: radial-gradient(ellipse at center, #000 16%, transparent 72%); }
.art-glow { position: absolute; z-index: -1; top: 22%; right: 7%; width: 120px; height: 120px; border-radius: 50%; background: rgba(67,197,224,.28); filter: blur(54px); animation: glow-pulse 6s ease-in-out infinite alternate; }
.art-orbit { position: absolute; border: 1px solid rgba(39,111,175,.18); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 88%; aspect-ratio: 1; transform: rotate(-25deg) scaleY(.84); }
.orbit-two { width: 104%; aspect-ratio: 1; transform: rotate(28deg) scaleY(.7); border-color: rgba(31,148,194,.15); }
.hero-logo-card { width: min(70%, 376px); aspect-ratio: 1; padding: 12px; position: relative; z-index: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.95); border-radius: 31px; background: rgba(255,255,255,.71); box-shadow: 0 28px 75px rgba(12,46,79,.16), 0 4px 12px rgba(12,46,79,.07); transform: rotate(-2deg); transition: transform .55s var(--ease), box-shadow .4s ease; animation: card-enter .8s var(--ease) both, card-float 7s ease-in-out 1s infinite; }
.hero-art:hover .hero-logo-card { transform: rotate(0deg) translateY(-5px); box-shadow: 0 38px 85px rgba(12,46,79,.2), 0 4px 12px rgba(12,46,79,.08); animation-play-state: paused; }
.hero-logo-card img { width: 100%; height: 100%; object-fit: contain; border-radius: 23px; }
.floating-note { position: absolute; z-index: 4; display: flex; align-items: center; gap: 11px; padding: 12px 16px; border: 1px solid rgba(225,233,241,.9); border-radius: 15px; background: rgba(255,255,255,.92); box-shadow: 0 14px 36px rgba(16,42,71,.12); backdrop-filter: blur(12px); animation: float-y 5.5s ease-in-out infinite; }
.floating-note strong, .floating-note small { display: block; white-space: nowrap; }
.floating-note strong { color: var(--navy); font-size: 11px; font-weight: 800; }
.floating-note small { margin-top: 1px; color: #75869a; font-size: 9px; }
.floating-note-top { top: 15%; left: 0; }
.floating-note-bottom { bottom: 11%; right: -1%; animation-delay: -2.2s; }
.floating-icon { width: 33px; height: 33px; display: grid; place-items: center; color: #1b6eb3; border-radius: 10px; background: #e7f4fb; }
.floating-icon svg { width: 21px; height: 21px; }
.mini-spark { width: 30px; height: 30px; display: grid; place-items: center; color: #9a6d16; border-radius: 9px; background: #fff6df; font-size: 17px; }
.floating-arrow { color: #2082b8; font-size: 14px; }
.art-stamp { position: absolute; bottom: 20%; left: 5%; width: 59px; height: 59px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(17,57,95,.17); border-radius: 50%; color: #386b99; background: rgba(255,255,255,.54); transform: rotate(-12deg); }
.art-stamp span { font-size: 7px; font-weight: 800; letter-spacing: .18em; }
.art-stamp b { margin-top: -2px; font-family: Manrope, sans-serif; font-size: 16px; }

/* Promise strip */
.promise-band { border-block: 1px solid #b9c4cd; background: linear-gradient(100deg, #c4cdd4 0%, #d2d9de 42%, #bec9d1 100%); }
.promise-inner { width: min(1120px, calc(100% - 64px)); min-height: 82px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.promise-item { display: flex; align-items: center; gap: 12px; color: #43566c; font-size: 12px; font-weight: 700; }
.promise-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; color: #276aa8; background: #edf5fa; }
.promise-icon svg { width: 19px; height: 19px; }
.promise-divider { width: 1px; height: 29px; background: #e1e7ed; }

/* Shared headings */
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 45px; }
.section-heading h2, .approach-copy h2, .clarity-copy h2, .faq-heading h2, .cta-content h2 { margin: 17px 0 0; color: var(--navy); font-family: Manrope, "Segoe UI", sans-serif; font-size: clamp(36px, 4.2vw, 55px); font-weight: 600; letter-spacing: -.06em; line-height: 1.12; }
.heading-side { max-width: 390px; padding-bottom: 4px; }
.heading-side p { margin-bottom: 13px; color: #728196; font-size: 13px; line-height: 1.75; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: #14589c; font-size: 12px; font-weight: 800; transition: color .2s ease, gap .2s ease; }
.text-link span { font-size: 17px; line-height: 1; transition: transform .2s ease; }
.text-link:hover { color: #0c3766; gap: 14px; }
.text-link:hover span { transform: translate(2px,-2px); }

/* Service cards */
.services { position: relative; isolation: isolate; padding-bottom: 123px; }
.services::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: linear-gradient(128deg, #c5ced5 0%, #d8dee2 43%, #c3cdd5 100%); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.service-card { min-height: 252px; padding: 23px 24px 22px; position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid rgba(198,211,223,.9); border-radius: 20px; background: #edf0f2; box-shadow: 0 8px 24px rgba(15,40,68,.07); transition: transform .28s var(--ease), box-shadow .28s ease, border-color .28s ease; }
.service-card::after { content: ""; position: absolute; right: -68px; bottom: -104px; width: 180px; height: 180px; border: 1px solid rgba(39,106,168,.12); border-radius: 50%; transition: transform .35s var(--ease); }
.service-card::before { content: ""; position: absolute; right: -35px; bottom: -76px; width: 120px; height: 120px; border: 1px solid rgba(39,106,168,.09); border-radius: 50%; transition: transform .35s var(--ease); }
.service-card:hover { z-index: 2; transform: translateY(-6px); border-color: rgba(62,151,202,.38); box-shadow: 0 20px 44px rgba(15,40,68,.1); }
.service-card:hover::before { transform: scale(1.17); }
.service-card:hover::after { transform: scale(1.11); }
.service-top { display: flex; align-items: start; justify-content: space-between; }
.service-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(50,119,176,.11); border-radius: 14px; color: #155c9e; background: rgba(255,255,255,.74); transition: transform .3s var(--ease); }
.service-icon svg { width: 31px; height: 31px; }
.service-card:hover .service-icon { transform: rotate(-5deg) scale(1.07); }
.card-arrow { width: 30px; height: 30px; display: grid; place-items: center; color: #597089; border: 1px solid rgba(112,136,158,.22); border-radius: 50%; font-size: 13px; transition: color .22s ease, background .22s ease, transform .22s ease; }
.service-card:hover .card-arrow { color: white; border-color: var(--blue); background: var(--blue); transform: rotate(45deg); }
.service-content { position: relative; z-index: 1; }
.service-kicker { color: #7d90a3; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.service-content h3 { margin: 6px 0 5px; color: var(--navy); font-family: Manrope, sans-serif; font-size: 23px; font-weight: 700; letter-spacing: -.04em; }
.service-content p { max-width: 290px; margin-bottom: 13px; color: #748397; font-size: 12px; line-height: 1.6; }
.service-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.service-tags span { padding: 4px 8px; color: #536d87; border: 1px solid rgba(69,113,152,.12); border-radius: 99px; background: rgba(255,255,255,.63); font-size: 9px; font-weight: 700; }
.service-card-blue { background: linear-gradient(145deg, #b9cddd 0%, #d6e0e7 78%); }
.service-card-lilac { background: linear-gradient(145deg, #c9cad9 0%, #dfdfe7 78%); }
.service-card-mint { background: linear-gradient(145deg, #bbd7d6 0%, #d7e4e3 78%); }
.service-card-sand { background: linear-gradient(145deg, #d8cec4 0%, #e7e1db 78%); }
.service-card-sky { background: linear-gradient(145deg, #b9cbd9 0%, #d7e0e6 78%); }
.service-card-dark { color: white; border-color: #0d294b; background: linear-gradient(145deg, #0b213c 0%, #123c68 100%); }
.service-card-dark .service-icon { color: #9ae9f2; border-color: rgba(210,242,251,.15); background: rgba(255,255,255,.08); }
.service-card-dark .service-kicker, .service-card-dark .service-content p { color: #b7cadc; }
.service-card-dark .service-content h3 { color: white; }
.service-card-dark .card-arrow { color: #c3e8f4; border-color: rgba(216,237,248,.3); }
.service-card-dark .service-tags span { color: #e0ebf4; border-color: rgba(216,237,248,.19); background: rgba(255,255,255,.08); }
.service-card-dark::before, .service-card-dark::after { border-color: rgba(130,205,231,.15); }

/* Approach panel */
.approach-section { position: relative; overflow: hidden; color: white; background: #0b213c; }
.approach-section::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(rgba(100,176,222,.36) .65px, transparent .65px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent, #000 48%, #000); }
.approach-section::after { content: ""; position: absolute; right: -250px; top: -310px; width: 730px; aspect-ratio: 1; border: 1px solid rgba(110,210,239,.12); border-radius: 50%; box-shadow: 0 0 0 44px rgba(79,163,210,.035), 0 0 0 95px rgba(79,163,210,.027); }
.approach-inner { min-height: 660px; padding-block: 105px; position: relative; z-index: 1; display: grid; grid-template-columns: .97fr 1.03fr; align-items: center; gap: 82px; }
.approach-visual { min-height: 425px; position: relative; display: grid; place-items: center; perspective: 900px; }
.approach-card { width: min(390px, 100%); height: 420px; padding: 27px; position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(220,240,249,.26); border-radius: 25px; background: linear-gradient(146deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); box-shadow: 0 30px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18); backdrop-filter: blur(12px); transform: rotateY(7deg) rotateX(2deg); transition: transform .5s var(--ease); }
.approach-visual:hover .approach-card { transform: rotateY(0deg) rotateX(0deg) translateY(-3px); }
.approach-card::before { content: ""; position: absolute; right: -78px; top: 82px; width: 280px; height: 280px; border: 1px solid rgba(92,207,232,.2); border-radius: 50%; }
.approach-card-top { display: flex; justify-content: space-between; align-items: center; color: #a5c0d4; }
.tiny-label { font-family: Manrope, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.approach-spark { color: #6ed4e5; font-size: 20px; }
.coverage-graphic { position: absolute; left: 50%; top: 47%; width: 240px; height: 240px; display: grid; place-items: center; transform: translate(-50%,-50%); }
.coverage-ring { position: absolute; inset: 0; border: 1px solid rgba(87,192,223,.23); border-radius: 50%; }
.ring-a { transform: scale(.98); }
.ring-b { transform: scale(.73) rotate(25deg); border-color: rgba(136,202,226,.2); }
.ring-c { transform: scale(.47) rotate(-18deg); border-color: rgba(182,224,239,.22); }
.coverage-graphic::before, .coverage-graphic::after { content: ""; position: absolute; inset: 8%; border: 1px dashed rgba(93,193,224,.27); border-radius: 44% 56% 49% 51%; transform: rotate(27deg); }
.coverage-graphic::after { inset: 18%; transform: rotate(-38deg); border-color: rgba(139,210,233,.22); }
.coverage-center { width: 86px; height: 86px; display: grid; place-items: center; color: #91e4ed; border: 1px solid rgba(140,223,239,.37); border-radius: 27px; background: linear-gradient(145deg, rgba(48,130,177,.46), rgba(25,83,129,.45)); box-shadow: 0 10px 40px rgba(37,168,203,.17); animation: center-breathe 5s ease-in-out infinite; }
.coverage-center svg { width: 46px; height: 46px; }
.orbit-dot { width: 7px; height: 7px; position: absolute; border-radius: 50%; background: #71d8ea; box-shadow: 0 0 15px rgba(95,222,238,.75); }
.dot-a { top: 25px; left: 58px; }
.dot-b { right: 29px; top: 98px; width: 5px; height: 5px; }
.dot-c { bottom: 33px; left: 76px; width: 6px; height: 6px; }
.approach-caption { position: absolute; left: 29px; bottom: 78px; display: flex; align-items: center; gap: 11px; color: #bed0df; font-size: 10px; line-height: 1.45; }
.approach-caption b { color: white; font-size: 12px; }
.caption-line { width: 25px; height: 1px; background: #3cb6d4; }
.approach-card-foot { position: absolute; right: 26px; bottom: 29px; left: 26px; display: flex; align-items: center; justify-content: space-between; color: #a6bed0; font-size: 8px; font-weight: 700; letter-spacing: .06em; }
.approach-card-foot i { width: 5px; height: 5px; border: 1px solid #5bc6df; border-radius: 50%; }
.visual-shadow { position: absolute; bottom: 6px; width: 66%; height: 28px; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(22px); }
.approach-copy { padding-block: 5px; }
.eyebrow-light { color: #9ab8d0; }
.approach-copy h2 { margin-top: 18px; color: white; }
.approach-copy h2 em { color: #6cd3e3; }
.approach-lede { max-width: 550px; margin: 19px 0 28px; color: #adc0d1; font-size: 14px; line-height: 1.82; }
.approach-list { margin-bottom: 28px; }
.approach-row { min-height: 69px; display: grid; grid-template-columns: 42px 1fr 24px; align-items: center; gap: 13px; border-top: 1px solid rgba(215,234,247,.12); }
.approach-row:last-child { border-bottom: 1px solid rgba(215,234,247,.12); }
.row-index { color: #6f8aa2; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.approach-row strong { color: #f4f8fb; font-size: 12px; }
.approach-row p { margin: 2px 0 0; color: #8fa8bc; font-size: 11px; }
.row-check { width: 21px; height: 21px; display: grid; place-items: center; color: #6ed4e5; border: 1px solid rgba(110,212,229,.35); border-radius: 50%; font-size: 11px; }
.button-light { min-height: 47px; color: var(--navy); background: #f5fbfe; box-shadow: 0 8px 18px rgba(0,0,0,.1); }
.button-light:hover { background: #dff5f9; }
.button-light span { color: var(--blue); font-size: 17px; }

/* Process */
.process { padding-bottom: 100px; background: linear-gradient(128deg, rgba(195,205,213,.58), rgba(222,226,229,.52) 52%, rgba(192,203,212,.58)); }
.process-heading { margin-bottom: 54px; }
.process-intro { width: min(350px, 38%); margin: 0 0 5px; color: #708197; font-size: 13px; line-height: 1.75; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.process-grid::before { content: ""; position: absolute; top: 40px; right: 17%; left: 17%; border-top: 1px dashed #c9d7e3; }
.process-step { min-height: 218px; padding: 0 23px 24px; position: relative; }
.step-number { height: 82px; position: relative; display: flex; align-items: start; justify-content: center; }
.step-number > span { position: absolute; left: 0; top: 8px; color: #b2bfcb; font-family: Manrope, sans-serif; font-size: 12px; font-weight: 800; }
.step-icon { width: 82px; height: 82px; position: relative; z-index: 1; display: grid; place-items: center; color: #1a66aa; border: 1px solid #dae6ef; border-radius: 50%; background: #fff; box-shadow: 0 7px 22px rgba(21,72,119,.08); transition: transform .3s var(--ease), box-shadow .3s ease; }
.step-icon svg { width: 30px; height: 30px; }
.process-step:hover .step-icon { transform: translateY(-4px) scale(1.05); box-shadow: 0 14px 25px rgba(21,72,119,.14); }
.process-step h3 { margin: 22px 0 7px; color: var(--navy); font-family: Manrope, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.035em; text-align: center; }
.process-step p { max-width: 270px; margin: 0 auto; color: #738398; font-size: 12px; line-height: 1.75; text-align: center; }
.process-cta { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 27px; padding-top: 24px; border-top: 1px solid #e4eaf0; color: #718195; font-size: 12px; }

/* Clarity section */
.clarity-section { overflow: hidden; border-block: 1px solid #b7c3cd; background: linear-gradient(115deg, #bdc8d1 0%, #ccd5dc 52%, #b9c6d0 100%); }
.clarity-inner { min-height: 500px; padding-block: 95px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 96px; }
.clarity-copy h2 { margin-bottom: 18px; }
.clarity-copy p { max-width: 420px; margin-bottom: 18px; color: #6e7f91; font-size: 13px; line-height: 1.82; }
.clarity-points { padding: 9px 0; border-top: 1px solid #d9e2e9; }
.clarity-point { min-height: 92px; display: grid; grid-template-columns: 47px 1fr 34px; align-items: center; gap: 15px; border-bottom: 1px solid #d9e2e9; }
.clarity-point-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #1c629f; border: 1px solid #c6d5e1; border-radius: 13px; background: rgba(239,243,246,.78); }
.clarity-point-icon svg { width: 22px; height: 22px; }
.clarity-point strong, .clarity-point span { display: block; }
.clarity-point strong { color: #1c324a; font-size: 12px; }
.clarity-point span { margin-top: 3px; color: #78889b; font-size: 11px; }
.clarity-point > b { color: #a2b2c1; font-family: Manrope, sans-serif; font-size: 11px; text-align: right; }

/* FAQ */
.faq { padding-top: 117px; padding-bottom: 112px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; background: linear-gradient(124deg, rgba(204,212,218,.57), rgba(222,226,229,.4) 54%, rgba(197,207,214,.5)); }
.faq-heading h2 { margin-bottom: 17px; }
.faq-heading p { margin: 0 0 12px; color: #77879a; font-size: 12px; }
.faq-list { border-top: 1px solid #b7c3cc; }
.faq-item { border-bottom: 1px solid #b7c3cc; }
.faq-item summary { min-height: 69px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #20344a; font-size: 13px; font-weight: 700; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid rgba(57,199,229,.7); outline-offset: 2px; border-radius: 5px; }
.faq-plus { width: 25px; height: 25px; flex: 0 0 auto; position: relative; border: 1px solid #b4c2ce; border-radius: 50%; background: rgba(229,234,238,.74); transition: background .2s ease, transform .2s ease; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1px; background: #2a6496; transform: translate(-50%,-50%); }
.faq-plus::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform .2s ease; }
.faq-item[open] .faq-plus { background: #e5f5f8; transform: rotate(180deg); }
.faq-item[open] .faq-plus::after { transform: translate(-50%,-50%) rotate(0deg); }
.faq-item p { max-width: 600px; margin: -2px 46px 19px 0; color: #748498; font-size: 12px; line-height: 1.8; animation: answer-in .25s ease both; }

/* Final callout + footer */
.final-cta { padding-bottom: 106px; }
.cta-card { min-height: 378px; padding: 60px 70px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 45px; border-radius: 28px; color: white; background: linear-gradient(113deg, #0c2748 0%, #124a81 64%, #146e9c 100%); box-shadow: 0 22px 55px rgba(13,56,99,.18); }
.cta-card::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(rgba(171,232,246,.55) .6px, transparent .6px); background-size: 20px 20px; mask-image: linear-gradient(90deg, transparent, #000); }
.cta-decoration { position: absolute; pointer-events: none; border: 1px solid rgba(149,223,241,.17); border-radius: 50%; }
.cta-decoration-one { width: 540px; height: 540px; right: 5%; top: -235px; box-shadow: 0 0 0 34px rgba(88,183,218,.035), 0 0 0 84px rgba(88,183,218,.025); }
.cta-decoration-two { width: 360px; height: 360px; right: 9%; bottom: -245px; border-color: rgba(149,223,241,.11); }
.cta-content, .cta-phone-card { position: relative; z-index: 1; }
.cta-content h2 { margin: 14px 0 13px; color: white; font-size: clamp(40px, 4.2vw, 56px); }
.cta-content h2 em { color: #7de0ec; }
.cta-content p { max-width: 450px; margin-bottom: 22px; color: #bed0e0; font-size: 13px; line-height: 1.75; }
.button-white { min-height: 49px; padding-inline: 18px; color: #14395f; background: #f9fdff; box-shadow: 0 8px 22px rgba(0,0,0,.14); }
.button-white:hover { background: #dff8fa; }
.button-white .whatsapp-icon { width: 19px; color: #1b8b70; }
.button-white > span:last-child { color: #27709d; font-size: 18px; }
.cta-phone-card { min-width: 220px; padding: 18px 21px; display: flex; align-items: center; gap: 13px; border: 1px solid rgba(255,255,255,.23); border-radius: 16px; background: rgba(255,255,255,.1); box-shadow: 0 18px 36px rgba(4,29,55,.12); backdrop-filter: blur(10px); transition: transform .25s ease, background .25s ease; }
.cta-phone-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.15); }
.phone-mini-icon { width: 40px; height: 40px; padding: 10px; display: grid; place-items: center; color: #8de4ef; border: 1px solid rgba(157,232,242,.28); border-radius: 12px; }
.cta-phone-card small, .cta-phone-card a { display: block; }
.cta-phone-card small { color: #b7cce0; font-size: 10px; }
.cta-phone-card a { margin-top: 3px; color: white; font-family: Manrope, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.site-footer { color: #aebccc; background: #091a2e; }
.footer-main { min-height: 285px; padding-block: 64px 48px; display: grid; grid-template-columns: 1.7fr .9fr .9fr 1.1fr; gap: 42px; }
.brand-footer .brand-mark { color: #d6e6f4; }
.brand-footer .brand-copy strong { color: white; }
.brand-footer .brand-copy > span { color: #9fb2c7; }
.footer-brand-column > p { margin: 18px 0 16px; color: #91a4b9; font-size: 11px; line-height: 1.75; }
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 31px; height: 31px; display: grid; place-items: center; color: #bfcedd; border: 1px solid rgba(197,216,233,.16); border-radius: 9px; background: rgba(255,255,255,.04); transition: color .2s ease, border .2s ease, background .2s ease; }
.footer-social a:hover { color: #88e3ed; border-color: rgba(104,210,229,.5); background: rgba(87,183,215,.08); }
.footer-social svg { width: 16px; height: 16px; }
.footer-links, .footer-contact { display: flex; flex-direction: column; align-items: start; gap: 9px; }
.footer-links > strong, .footer-contact > strong { margin: 4px 0 8px; color: #edf4fa; font-family: Manrope, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.footer-links a, .footer-contact a, .footer-location { color: #97aabe; font-size: 11px; transition: color .2s ease; }
.footer-links a:hover, .footer-contact a:hover { color: #84e0ed; }
.footer-location { display: flex; align-items: center; gap: 8px; }
.footer-location svg { width: 16px; height: 16px; color: #64bed6; }
.footer-bottom { min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(192,213,232,.12); color: #8195ab; font-size: 10px; }
.footer-tagline { color: #a5b9cd; }
.footer-tagline i { margin-left: 5px; color: #63d3e3; font-style: normal; }
.back-top { color: #a5b9cd; transition: color .2s ease; }
.back-top:hover { color: #76d8e8; }
.floating-whatsapp { min-height: 51px; padding: 0 18px 0 14px; position: fixed; z-index: 60; right: 24px; bottom: 23px; display: flex; align-items: center; gap: 10px; color: white; border: 1px solid rgba(255,255,255,.24); border-radius: 99px; background: #14856f; box-shadow: 0 12px 27px rgba(9,69,58,.28); font-size: 12px; font-weight: 800; transition: transform .22s var(--ease), background .22s ease, box-shadow .22s ease; }
.floating-whatsapp:hover { transform: translateY(-4px); background: #0c735f; box-shadow: 0 16px 32px rgba(9,69,58,.34); }
.floating-whatsapp svg { width: 22px; height: 22px; }

/* Scroll-in animation; content remains visible when motion is reduced. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .72s var(--ease), transform .72s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js .reveal-delay-1 { transition-delay: .12s; }
.js .reveal-delay-2 { transition-delay: .22s; }
.js .reveal-delay-3 { transition-delay: .32s; }
@keyframes card-enter { from { opacity: 0; transform: translateY(15px) rotate(-5deg) scale(.97); } to { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1); } }
@keyframes card-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes float-y { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes art-drift { from { transform: rotate(-6deg) translate(0,0); } to { transform: rotate(-2deg) translate(4px,-7px); } }
@keyframes glow-pulse { from { opacity: .55; transform: scale(.9); } to { opacity: .95; transform: scale(1.14); } }
@keyframes center-breathe { 0%,100% { box-shadow: 0 10px 40px rgba(37,168,203,.15); } 50% { box-shadow: 0 10px 49px rgba(37,168,203,.34); } }
@keyframes answer-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1100px) {
  .nav-shell { width: min(100% - 48px, 1300px); gap: 20px; }
  .section-wrap { width: min(100% - 48px, 1220px); }
  .main-nav { gap: 18px; }
  .main-nav a { font-size: 12px; }
  .nav-phone { display: none; }
  .hero { min-height: 580px; gap: 15px; }
  .hero-art { min-height: 440px; }
  .floating-note-top { left: -1%; }
  .approach-inner { gap: 45px; }
  .clarity-inner { gap: 55px; }
  .faq { gap: 65px; }
  .footer-main { gap: 28px; }
}

@media (max-width: 820px) {
  .section-wrap { width: min(100% - 40px, 650px); }
  .nav-shell { width: calc(100% - 40px); height: 74px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-copy strong { font-size: 17px; }
  .nav-actions { margin-left: auto; }
  .nav-actions .button-small { min-height: 40px; padding-inline: 13px; font-size: 11px; }
  .menu-toggle { width: 42px; height: 42px; padding: 0; display: grid; place-content: center; gap: 5px; border: 1px solid #dbe4ec; border-radius: 12px; color: var(--navy); background: #fff; cursor: pointer; }
  .menu-toggle span { width: 17px; height: 1.5px; display: block; background: currentColor; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.2px) rotate(-45deg); }
  .main-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 15px; border-bottom: 1px solid #cdd6df; background: rgba(232,236,240,.98); box-shadow: 0 18px 24px rgba(18,42,67,.12); opacity: 0; visibility: hidden; transform: translateY(-7px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .main-nav a { padding: 13px 4px; border-bottom: 1px solid #edf0f4; font-size: 13px; }
  .main-nav a:last-child { border-bottom: 0; }
  .hero { grid-template-columns: 1fr; padding-block: 65px 45px; gap: 14px; }
  .hero::after { top: 0; right: -5vw; width: 84vw; height: 290px; opacity: .12; }
  .hero-copy { max-width: 650px; }
  .hero h1 { max-width: 590px; font-size: clamp(48px, 9vw, 69px); }
  .hero-lede { max-width: 580px; }
  .hero-art { width: min(100%, 550px); min-height: 430px; margin: -2px auto 0; }
  .hero-logo-card { width: min(62%, 340px); }
  .floating-note-top { top: 13%; left: 2%; }
  .floating-note-bottom { right: 3%; bottom: 8%; }
  .art-stamp { bottom: 17%; left: 8%; }
  .promise-inner { width: min(100% - 40px, 650px); flex-wrap: wrap; justify-content: center; padding-block: 19px; gap: 17px 25px; }
  .promise-item { font-size: 11px; }
  .promise-divider { height: 22px; }
  .section-space { padding-block: 90px; }
  .section-heading { align-items: start; flex-direction: column; gap: 18px; margin-bottom: 33px; }
  .heading-side { max-width: 460px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { min-height: 240px; }
  .approach-inner { padding-block: 82px; grid-template-columns: 1fr; gap: 52px; }
  .approach-visual { min-height: 405px; }
  .approach-copy { max-width: 620px; }
  .process-grid { gap: 10px; }
  .process-step { padding-inline: 9px; }
  .process-step h3 { font-size: 16px; }
  .process-step p { font-size: 11px; }
  .process-intro { width: min(430px, 100%); }
  .clarity-inner { padding-block: 80px; grid-template-columns: 1fr; gap: 42px; }
  .clarity-copy { max-width: 570px; }
  .faq { padding-block: 90px; grid-template-columns: 1fr; gap: 34px; }
  .faq-heading h2 br { display: none; }
  .faq-heading { max-width: 500px; }
  .cta-card { min-height: 360px; padding: 50px 42px; }
  .footer-main { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-contact { grid-column: 2 / 4; }
}

@media (max-width: 560px) {
  html { scroll-padding-top: 78px; }
  .section-wrap { width: calc(100% - 36px); }
  .nav-shell { width: calc(100% - 32px); height: 69px; gap: 10px; }
  .brand { gap: 7px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-copy strong { font-size: 14px; letter-spacing: .08em; }
  .brand-copy > span { margin-top: 4px; font-size: 7px; }
  .nav-actions { gap: 7px; }
  .nav-actions .button-small { min-height: 38px; padding-inline: 10px; border-radius: 9px; font-size: 10px; }
  .nav-actions .button-small svg { width: 14px; }
  .menu-toggle { width: 38px; height: 38px; border-radius: 10px; }
  .hero { padding-block: 48px 37px; }
  .hero::after { right: -14vw; width: 96vw; height: 250px; opacity: .1; }
  .eyebrow { font-size: 9px; letter-spacing: .15em; }
  .hero h1 { margin: 19px 0 15px; font-size: clamp(41px, 11.4vw, 58px); line-height: 1.09; }
  .hero-lede { margin-bottom: 21px; font-size: 14px; line-height: 1.72; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .button-primary { min-height: 54px; justify-content: center; font-size: 13px; }
  .button-quiet { min-height: 47px; align-self: start; }
  .hero-note { margin-top: 17px; font-size: 11px; }
  .hero-art { min-height: 335px; margin-top: 2px; }
  .hero-logo-card { width: min(65%, 270px); padding: 7px; border-radius: 22px; }
  .hero-logo-card img { border-radius: 16px; }
  .floating-note { gap: 8px; padding: 9px 11px; border-radius: 12px; }
  .floating-note strong { font-size: 9px; }
  .floating-note small { font-size: 8px; }
  .floating-icon { width: 27px; height: 27px; border-radius: 8px; }
  .floating-icon svg { width: 17px; height: 17px; }
  .mini-spark { width: 25px; height: 25px; font-size: 14px; }
  .floating-note-top { top: 10%; left: -2%; }
  .floating-note-bottom { right: -2%; bottom: 5%; }
  .art-stamp { bottom: 18%; left: 1%; width: 48px; height: 48px; }
  .art-stamp span { font-size: 6px; }
  .art-stamp b { font-size: 14px; }
  .promise-inner { width: calc(100% - 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; padding-block: 19px; }
  .promise-item { gap: 8px; font-size: 10px; }
  .promise-item:last-child { grid-column: 1 / 3; justify-self: center; }
  .promise-divider { display: none; }
  .promise-icon { width: 28px; height: 28px; border-radius: 8px; }
  .promise-icon svg { width: 16px; height: 16px; }
  .section-space { padding-block: 72px; }
  .section-heading h2, .approach-copy h2, .clarity-copy h2, .faq-heading h2 { font-size: 37px; }
  .section-heading { margin-bottom: 27px; }
  .services { padding-bottom: 77px; }
  .service-grid { grid-template-columns: 1fr; gap: 12px; }
  .service-card { min-height: 205px; padding: 18px 19px; border-radius: 17px; }
  .service-icon { width: 43px; height: 43px; border-radius: 12px; }
  .service-icon svg { width: 28px; height: 28px; }
  .service-content h3 { font-size: 21px; }
  .service-content p { max-width: 320px; font-size: 11px; }
  .service-content { padding-top: 10px; }
  .approach-inner { padding-block: 67px; gap: 34px; }
  .approach-visual { min-height: 340px; }
  .approach-card { width: min(100%, 340px); height: 340px; padding: 20px; border-radius: 21px; }
  .coverage-graphic { top: 45%; width: 205px; height: 205px; }
  .coverage-center { width: 74px; height: 74px; border-radius: 23px; }
  .coverage-center svg { width: 39px; height: 39px; }
  .approach-caption { left: 20px; bottom: 61px; font-size: 9px; }
  .approach-caption b { font-size: 10px; }
  .approach-card-foot { right: 19px; bottom: 22px; left: 19px; font-size: 7px; }
  .approach-copy h2 { font-size: 39px; }
  .approach-lede { margin-block: 14px 21px; font-size: 12px; }
  .approach-row { grid-template-columns: 29px 1fr 22px; gap: 8px; min-height: 67px; }
  .approach-row strong { font-size: 11px; }
  .approach-row p { font-size: 10px; }
  .process { padding-bottom: 68px; }
  .process-heading { margin-bottom: 32px; }
  .process-grid { grid-template-columns: 1fr; gap: 17px; }
  .process-grid::before { top: 42px; bottom: 43px; right: auto; left: 41px; border-top: 0; border-left: 1px dashed #c9d7e3; }
  .process-step { min-height: 95px; padding: 0 0 0 98px; }
  .step-number { width: 82px; height: 82px; position: absolute; left: 0; top: 0; }
  .step-number > span { left: 0; top: 29px; transform: translateX(-3px); font-size: 9px; }
  .step-icon { width: 62px; height: 62px; margin-left: 28px; }
  .step-icon svg { width: 25px; height: 25px; }
  .process-step h3 { margin: 7px 0 4px; text-align: left; font-size: 14px; }
  .process-step p { max-width: 100%; margin: 0; text-align: left; font-size: 11px; }
  .process-cta { align-items: start; flex-direction: column; gap: 6px; margin-top: 17px; padding-top: 17px; font-size: 11px; }
  .clarity-inner { padding-block: 70px; gap: 28px; }
  .clarity-copy h2 { font-size: 36px; }
  .clarity-copy p { font-size: 12px; }
  .clarity-point { grid-template-columns: 39px 1fr 25px; min-height: 82px; gap: 10px; }
  .clarity-point-icon { width: 37px; height: 37px; border-radius: 11px; }
  .clarity-point-icon svg { width: 19px; height: 19px; }
  .clarity-point strong { font-size: 10px; }
  .clarity-point span { font-size: 9px; }
  .faq { padding-block: 72px; gap: 23px; }
  .faq-heading h2 { font-size: 39px; }
  .faq-item summary { min-height: 64px; font-size: 11px; }
  .faq-item p { margin-right: 8px; font-size: 11px; }
  .final-cta { padding-bottom: 72px; }
  .cta-card { min-height: unset; padding: 37px 25px 28px; align-items: start; flex-direction: column; gap: 24px; border-radius: 22px; }
  .cta-content h2 { font-size: 44px; }
  .cta-content p { font-size: 12px; }
  .cta-phone-card { min-width: 0; padding: 12px 15px; }
  .cta-phone-card a { font-size: 14px; }
  .cta-decoration-one { right: -60%; top: -40%; }
  .cta-decoration-two { right: -25%; bottom: -67%; }
  .footer-main { padding-block: 47px 35px; grid-template-columns: 1fr 1fr; gap: 31px 18px; }
  .footer-brand-column { grid-column: 1 / 3; }
  .footer-links { gap: 8px; }
  .footer-contact { grid-column: 1 / 3; }
  .footer-bottom { min-height: 74px; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-block: 14px; font-size: 9px; }
  .footer-tagline { display: none; }
  .floating-whatsapp { right: 14px; bottom: 14px; min-height: 48px; padding-inline: 13px 16px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}