:root { --bg:#f4f7f9; --ink:#1e1e1e; --steel:#112535; --muted:#3d4f58; --blue:#0089b8; --red:#e22b1e; --white:#fff; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter, Arial, Helvetica, sans-serif; }
.landing { min-height:100svh; position:relative; overflow:hidden; display:flex; flex-direction:column; padding:clamp(28px,5vw,68px); isolation:isolate; }
.grid { position:absolute; inset:0; z-index:-3; opacity:.42; background-image:linear-gradient(rgba(0,137,184,.10) 1px, transparent 1px),linear-gradient(90deg, rgba(0,137,184,.10) 1px, transparent 1px); background-size:54px 54px; mask-image:linear-gradient(to bottom, black, transparent 78%); }
.orb { position:absolute; border-radius:50%; filter:blur(2px); z-index:-2; opacity:.65; }
.orb-one { width:min(52vw,700px); height:min(52vw,700px); background:radial-gradient(circle, rgba(0,137,184,.12), transparent 67%); right:-15vw; top:-13vw; animation:drift 11s ease-in-out infinite alternate; }
.orb-two { width:min(40vw,540px); height:min(40vw,540px); background:radial-gradient(circle, rgba(226,43,30,.055), transparent 68%); left:-12vw; bottom:-18vw; animation:drift 13s ease-in-out infinite alternate-reverse; }
.scan-line { position:absolute; z-index:-1; top:-25%; left:0; width:100%; height:180px; background:linear-gradient(transparent, rgba(0,137,184,.065), transparent); transform:skewY(-8deg); animation:scan 8s linear infinite; }
.content { width:min(720px,100%); margin:auto 0; padding:70px 0 44px; }
.brand { margin-bottom:clamp(52px,9vh,100px); }.brand img { display:block; width:clamp(210px,29vw,350px); height:auto; }
.eyebrow { color:var(--blue); font-size:.68rem; font-weight:700; letter-spacing:.17em; display:flex; align-items:center; gap:10px; margin:0 0 18px; }
.eyebrow span { width:28px; height:2px; background:var(--red); box-shadow:0 0 10px rgba(226,43,30,.45); }
h1 { font-family:'Space Grotesk', Inter, Arial, sans-serif; font-size:clamp(2.6rem,6.4vw,5.45rem); line-height:.98; letter-spacing:-.055em; margin:0; font-weight:700; max-width:720px; }
h1 em { color:var(--blue); font-style:normal; text-shadow:0 0 30px rgba(0,137,184,.12); }
.intro { color:var(--muted); max-width:590px; font-size:clamp(1rem,1.6vw,1.13rem); line-height:1.65; margin:28px 0 22px; }
.signal-track { height:20px; width:min(340px, 82vw); display:flex; align-items:center; gap:10px; margin:0 0 22px; position:relative; }
.signal-track::before { content:''; position:absolute; height:1px; left:0; right:0; background:linear-gradient(90deg, rgba(0,137,184,.12), rgba(0,137,184,.65), rgba(0,137,184,.12)); }
.signal-track span, .signal-track i, .signal-track b { position:relative; display:block; flex:0 0 auto; border-radius:50%; background:var(--blue); }
.signal-track span { width:7px; height:7px; box-shadow:0 0 0 5px rgba(0,137,184,.11), 0 0 15px rgba(0,137,184,.5); }
.signal-track i { width:4px; height:4px; opacity:.65; }.signal-track i:nth-of-type(2) { opacity:.46; }.signal-track i:nth-of-type(3) { opacity:.3; }
.signal-track b { width:5px; height:5px; margin-left:auto; background:var(--red); box-shadow:0 0 0 5px rgba(226,43,30,.1); }
.signal-track::after { content:''; position:absolute; width:58px; height:2px; border-radius:4px; background:linear-gradient(90deg, transparent, var(--blue), transparent); animation:signal 3.8s ease-in-out infinite; }
.whatsapp { color:var(--white); background:var(--red); border-radius:4px; padding:15px 17px; display:inline-flex; align-items:center; gap:11px; text-decoration:none; font-size:.92rem; font-weight:700; transition:transform .2s, box-shadow .2s, background .2s; box-shadow:0 0 0 0 rgba(226,43,30,.3); animation:pulse 2.8s infinite; }
.whatsapp:hover { transform:translateY(-3px); background:#c92318; box-shadow:0 12px 28px rgba(226,43,30,.22); }
.whatsapp svg { width:20px; fill:currentColor; }.whatsapp i { font-style:normal; font-size:1.15rem; margin-left:7px; }
.contact-options { display:flex; align-items:center; gap:17px; }
.qr-card { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.04em; text-decoration:none; text-transform:uppercase; transition:color .2s, transform .2s; }
.qr-card:hover { color:var(--blue); transform:translateY(-2px); }.qr-card img { width:52px; height:52px; padding:4px; background:var(--white); border:1px solid rgba(17,37,53,.14); border-radius:3px; image-rendering:auto; }
.services { list-style:none; padding:0; margin:48px 0 0; display:flex; flex-wrap:wrap; gap:9px 20px; color:#43555e; font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.services li { display:flex; align-items:center; }.services li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--blue); margin-right:8px; }
footer { margin-top:auto; padding-top:28px; border-top:1px solid rgba(17,37,53,.16); color:#43555e; display:flex; justify-content:space-between; align-items:end; gap:20px; font-size:.73rem; line-height:1.4; letter-spacing:.025em; }
footer p { margin:0; max-width:460px; } footer span { white-space:nowrap; }
@keyframes scan { from { transform:translateY(-20vh) skewY(-8deg); } to { transform:translateY(135vh) skewY(-8deg); } }
@keyframes drift { to { transform:translate(7%, 8%) scale(1.12); } }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(226,43,30,.25); } 55% { box-shadow:0 0 0 13px rgba(226,43,30,0); } }
@keyframes signal { 0%,100% { transform:translateX(0); opacity:.1; } 42% { opacity:1; } 60% { transform:translateX(280px); opacity:.8; } 80% { transform:translateX(280px); opacity:0; } }
@media (max-width:560px) { .landing { padding:24px; }.content { padding:42px 0; }.brand { margin-bottom:58px; } h1 { font-size:2.72rem; }.services { margin-top:38px; gap:10px 14px; }.services li { font-size:.65rem; } .contact-options { align-items:flex-start; gap:13px; }.qr-card { flex-direction:column; gap:4px; font-size:.57rem; text-align:center; }.qr-card img { width:58px; height:58px; } footer { align-items:flex-start; flex-direction:column; gap:12px; } .orb-one { width:92vw; height:92vw; right:-44vw; top:-17vw; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }