@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --turquoise: #10aecb;
  --turquoise-bright: #16bdd8;
  --turquoise-deep: #087f9d;
  --navy: #073d53;
  --navy-soft: #0c536b;
  --red: #ef332e;
  --white: #ffffff;
  --ink: #093e54;
  --muted: #6e8b96;
  --line: rgba(255, 255, 255, 0.22);
  --shadow: 0 22px 70px rgba(2, 47, 64, 0.2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--white); background: var(--turquoise); font-family: 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }
.site-shell { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; padding: 28px clamp(24px, 5vw, 88px) 25px; background: radial-gradient(circle at 82% 18%, rgba(255,255,255,.13), transparent 27%), linear-gradient(121deg, #0c9fc0 0%, var(--turquoise) 49%, #0a9fbe 100%); }
.ambient { position: absolute; border-radius: 999px; pointer-events: none; z-index: -1; filter: blur(1px); }
.ambient-one { width: 540px; height: 540px; top: 26%; right: -250px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 0 24px rgba(255,255,255,.025), 0 0 0 64px rgba(255,255,255,.018); }
.ambient-two { width: 620px; height: 210px; bottom: -155px; left: 15%; transform: rotate(-12deg); border: 1px solid rgba(255,255,255,.1); }
.topbar { display: flex; align-items: center; justify-content: space-between; max-width: 1310px; margin: 0 auto; }
.mini-brand { display: inline-flex; align-items: center; width: 190px; }
.mini-brand img { display: block; width: 100%; height: auto; }
.mini-mark { display: inline-flex; width: 27px; height: 27px; position: relative; align-items: center; justify-content: center; border: 2px solid var(--white); border-radius: 4px 4px 7px 7px; transform: translateY(2px); }
.mini-mark::before, .mini-mark::after { content: ''; position: absolute; width: 13px; height: 2px; top: -6px; background: var(--white); }
.mini-mark::before { left: 2px; transform: rotate(42deg); }
.mini-mark::after { right: 2px; transform: rotate(-42deg); }
.mini-mark span { width: 8px; height: 11px; align-self: flex-end; margin-bottom: 2px; border: 2px solid var(--red); border-bottom: 0; }
.status-pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; color: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.25); border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.status-pill i { display: block; width: 6px; height: 6px; background: #baf5dd; border-radius: 50%; box-shadow: 0 0 0 4px rgba(186,245,221,.12); }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(370px, .95fr); gap: clamp(42px, 8vw, 136px); align-items: center; max-width: 1310px; min-height: 570px; margin: 0 auto; padding: 70px 0 58px; }
.hero-copy { max-width: 600px; animation: lift-in .7s ease both; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: rgba(255,255,255,.74); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow-line { width: 32px; height: 1px; background: var(--red); }
h1, h2 { margin: 0; font-family: 'Manrope', sans-serif; letter-spacing: -.055em; }
h1 { max-width: 690px; font-size: clamp(49px, 6.3vw, 90px); line-height: .98; font-weight: 700; }
h1 em { color: #c9fbff; font-style: normal; }
.lead { max-width: 475px; margin: 29px 0 0; color: rgba(255,255,255,.8); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; }
.hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 38px; }
.whatsapp-cta { display: inline-flex; align-items: center; gap: 10px; }
.cta-hint { color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; gap: 16px; min-height: 50px; padding: 0 19px; border-radius: 3px; font-size: 13px; font-weight: 700; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.button span { font-size: 19px; line-height: 0; }
.whatsapp-icon { display: inline-grid; flex: 0 0 auto; width: 22px; height: 22px; padding: 4px; place-items: center; color: #fff; background: #25d366; border-radius: 50%; }
.whatsapp-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.button-primary { color: var(--navy); background: var(--white); box-shadow: 0 8px 24px rgba(0, 42, 58, .12); }
.button-primary:hover, .button-primary:focus-visible { transform: translateY(-3px); box-shadow: 0 13px 30px rgba(0, 42, 58, .2); }
.button-quiet { padding-left: 4px; color: rgba(255,255,255,.8); }
.button-quiet:hover, .button-quiet:focus-visible { color: var(--white); transform: translateY(-2px); }
.whatsapp-only { width: 58px; height: 58px; min-height: 58px; padding: 0; justify-content: center; border: 3px solid rgba(255,255,255,.85); border-radius: 50%; background: #25d366; box-shadow: 0 9px 22px rgba(0, 75, 43, .23); }
.whatsapp-only .whatsapp-icon { width: 100%; height: 100%; padding: 13px; color: #fff; background: transparent; }
.whatsapp-only:hover, .whatsapp-only:focus-visible { background: #20bd5a; transform: translateY(-3px) scale(1.04); box-shadow: 0 13px 28px rgba(0, 75, 43, .3); }
.button:focus-visible, a:focus-visible { outline: 3px solid rgba(255,255,255,.85); outline-offset: 4px; }
.hero-visual { position: relative; min-height: 370px; animation: lift-in .8s .08s ease both; }
.visual-frame { position: absolute; inset: 0 20px 31px 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.43); }
.corner { position: absolute; width: 35px; height: 35px; border-color: var(--white); border-style: solid; }
.corner-tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.corner-br { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.logo-panel { width: min(83%, 490px); aspect-ratio: 2 / 1; overflow: hidden; background: var(--white); box-shadow: var(--shadow); transform: rotate(-3deg); transition: transform .5s ease; }
.logo-panel:hover { transform: rotate(0deg) scale(1.015); }
.logo-panel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visual-caption { position: absolute; right: 21px; bottom: -17px; left: 33px; display: flex; justify-content: space-between; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.horizon-line { position: absolute; right: -31px; bottom: 5px; left: -40px; height: 44px; overflow: hidden; }
.horizon-line::before { content: ''; position: absolute; top: 18px; right: 0; left: 0; height: 1px; background: rgba(255,255,255,.5); }
.horizon-line span { position: absolute; top: 0; left: 27%; width: 120px; height: 64px; border: 1px solid rgba(255,255,255,.43); border-radius: 50%; }
.contact-strip { display: grid; grid-template-columns: .83fr 1.17fr; gap: 50px; align-items: center; max-width: 1310px; margin: 0 auto; padding: 31px 0 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact-strip .eyebrow { margin-bottom: 13px; }
h2 { font-size: clamp(24px, 2.2vw, 33px); line-height: 1.05; }
.contact-details { display: grid; grid-template-columns: 1fr 1.1fr; gap: 25px; }
.contact-item { display: flex; align-items: center; gap: 13px; min-height: 62px; }
.contact-link { position: relative; }
.contact-link:hover .contact-arrow { transform: translate(3px, -3px); }
.contact-icon { display: grid; flex: 0 0 35px; width: 35px; height: 35px; place-items: center; color: var(--navy); background: rgba(255,255,255,.9); border-radius: 50%; font-size: 25px; line-height: 1; }
.contact-icon.whatsapp-icon { width: 35px; height: 35px; padding: 7px; color: #fff; background: #25d366; }
.pin-icon { font-size: 21px; }
.contact-item small { display: block; margin-bottom: 6px; color: rgba(255,255,255,.64); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.contact-item strong { display: block; color: var(--white); font-size: 13px; font-weight: 600; line-height: 1.35; }
.contact-arrow { margin-left: auto; color: var(--white); font-size: 19px; transition: transform .25s ease; }
.footer { display: flex; align-items: center; justify-content: space-between; max-width: 1310px; margin: 0 auto; padding-top: 21px; color: rgba(255,255,255,.57); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.footer-divider { width: 4px; height: 4px; margin-left: auto; margin-right: 17px; background: var(--red); border-radius: 50%; }
.whatsapp-float { position: fixed; right: clamp(20px, 4vw, 55px); bottom: clamp(20px, 4vw, 36px); z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 0; color: #fff; background: #25d366; border: 3px solid rgba(255,255,255,.85); border-radius: 50%; box-shadow: 0 12px 30px rgba(4, 102, 58, .25); transition: transform .25s ease, box-shadow .25s ease; animation: float-in .8s .5s ease both; }
.whatsapp-float .whatsapp-icon { width: 20px; height: 20px; padding: 4px; color: #25d366; background: #fff; }
.whatsapp-float:hover, .whatsapp-float:focus-visible { transform: translateY(-4px) scale(1.04); box-shadow: 0 17px 34px rgba(4, 102, 58, .34); }
@keyframes lift-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 920px) { .hero { grid-template-columns: 1fr; gap: 42px; padding-top: 62px; } .hero-copy { max-width: 690px; } .hero-visual { min-height: 350px; max-width: 610px; width: 100%; margin-left: auto; } .contact-strip { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 600px) { .site-shell { padding: 21px 20px 25px; } .status-pill { padding: 7px 9px; font-size: 9px; } .mini-brand { width: 155px; } .mini-mark { width: 23px; height: 23px; } .hero { min-height: auto; padding: 76px 0 62px; } h1 { font-size: clamp(44px, 13vw, 63px); } .lead { margin-top: 23px; font-size: 15px; } .hero-actions { align-items: flex-start; flex-direction: column; gap: 9px; margin-top: 29px; } .button-quiet { min-height: 36px; } .hero-visual { min-height: 235px; } .visual-frame { inset: 0 9px 23px 0; } .logo-panel { width: 84%; } .visual-caption { right: 11px; bottom: -13px; left: 16px; font-size: 8px; } .horizon-line { right: -8px; bottom: 0; left: -16px; } .contact-strip { gap: 26px; padding: 27px 0 28px; } .contact-details { grid-template-columns: 1fr; gap: 17px; } .contact-item { min-height: 54px; } .footer { flex-wrap: wrap; gap: 10px; font-size: 8px; } .footer-divider { margin-left: 4px; margin-right: 4px; } .whatsapp-float { right: 18px; bottom: 18px; width: 58px; height: 58px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }