@import "tailwindcss";

:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { background: #050a0f; scroll-behavior: smooth; }
body { margin: 0; background: #050a0f; color: #f5fbff; font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }

main {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 78% 52%, rgba(15,174,180,.13), transparent 30%), linear-gradient(135deg, #060b11 0%, #09131c 55%, #05090d 100%);
}
main::before {
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: .18;
  background-image: radial-gradient(rgba(104,221,226,.65) .6px, transparent .6px); background-size: 27px 27px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
.ambient { position: absolute; z-index: -1; border-radius: 999px; filter: blur(80px); pointer-events: none; }
.ambient-one { width: 360px; height: 360px; right: 4%; bottom: 2%; background: rgba(15,174,180,.16); }
.ambient-two { width: 220px; height: 220px; left: 12%; top: 15%; background: rgba(36,111,162,.1); }

.site-header {
  width: min(1380px, calc(100% - 80px)); height: 108px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.logo-frame { position: relative; width: 230px; height: 72px; overflow: hidden; }
.logo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; transform: scale(1.2); }
.header-phone { font-size: 16px; font-weight: 700; letter-spacing: .04em; color: #c9d6dd; transition: color .2s ease; }
.header-phone:hover { color: #55dbe0; }

.hero {
  width: min(1380px, calc(100% - 80px)); min-height: calc(100svh - 184px); margin: 0 auto; display: grid;
  grid-template-columns: .86fr 1.3fr; align-items: center; gap: 24px; padding: 38px 0 54px;
}
.hero-copy { position: relative; z-index: 3; padding-left: 10px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: #62dce0; font-size: 11px; font-weight: 800; letter-spacing: .17em; line-height: 1.5; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: #28c4ca; box-shadow: 0 0 9px #28c4ca; }
h1 { margin: 22px 0 20px; max-width: 660px; font-size: clamp(48px, 4.8vw, 78px); line-height: .98; letter-spacing: -.052em; font-weight: 750; }
h1 span { display: block; color: #50d8dd; text-shadow: 0 0 32px rgba(15,174,180,.28); }
.hero-copy > p { max-width: 550px; margin: 0 0 32px; color: #aebdc5; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; }
.whatsapp-button {
  display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 25px; border-radius: 13px;
  background: linear-gradient(135deg, #17bfc4, #0d9ea4); box-shadow: 0 14px 34px rgba(15,174,180,.22), inset 0 1px rgba(255,255,255,.22);
  color: #031114; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-button:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(15,174,180,.32), inset 0 1px rgba(255,255,255,.22); }
.whatsapp-button svg { width: 23px; height: 23px; fill: currentColor; }
.trust-row { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: #71838e; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.trust-row i { width: 3px; height: 3px; border-radius: 50%; background: #1bb8bd; }

.machines { position: relative; height: min(70svh, 760px); min-height: 540px; display: flex; align-items: flex-end; justify-content: center; gap: clamp(0px, 1vw, 14px); }
.machines::after { content: ""; position: absolute; left: 6%; right: 0; bottom: 1%; height: 55px; border-radius: 50%; background: rgba(32,203,211,.23); filter: blur(25px); z-index: -1; }
.machine { position: relative; margin: 0; filter: drop-shadow(0 24px 24px rgba(0,0,0,.46)); }
.machine img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.machine-1 { width: 39%; height: 96%; }
.machine-2 { width: 31%; height: 89%; }
.machine-3 { width: 27%; height: 82%; align-self: center; margin-top: -2%; }

footer {
  width: min(1380px, calc(100% - 80px)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; gap: 28px;
  border-top: 1px solid rgba(255,255,255,.09); color: #647781; font-size: 12px; letter-spacing: .04em;
}
footer span:last-child { margin-left: auto; color: #4fc8cd; }

@media (max-width: 980px) {
  .site-header, .hero, footer { width: min(100% - 40px, 760px); }
  .hero { grid-template-columns: 1fr; padding-top: 62px; text-align: center; }
  .hero-copy { padding: 0; }
  .eyebrow { justify-content: center; }
  h1, .hero-copy > p { margin-left: auto; margin-right: auto; }
  .trust-row { justify-content: center; }
  .machines { height: 600px; min-height: 0; }
}
@media (max-width: 640px) {
  .site-header { width: calc(100% - 30px); height: 84px; }
  .logo-frame { width: 162px; height: 56px; }
  .header-phone { font-size: 12px; }
  .hero { width: calc(100% - 28px); padding: 46px 0 36px; }
  .eyebrow { font-size: 9px; letter-spacing: .12em; }
  h1 { margin-top: 16px; font-size: clamp(39px, 12vw, 58px); }
  .hero-copy > p { font-size: 16px; padding: 0 6px; }
  .whatsapp-button { width: 100%; justify-content: center; }
  .machines { height: 430px; gap: 0; margin-top: 16px; }
  .machine-1 { width: 42%; height: 96%; }
  .machine-2 { width: 34%; height: 87%; }
  .machine-3 { width: 29%; height: 77%; margin-left: -5px; }
  footer { width: calc(100% - 30px); padding: 22px 0; flex-wrap: wrap; justify-content: center; gap: 8px 18px; text-align: center; }
  footer span:last-child { width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .machine { animation: reveal .7s both ease-out; }
  .machine-2 { animation-delay: .09s; } .machine-3 { animation-delay: .18s; }
  @keyframes reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
}