:root{--bg:#05070d;--bg2:#090d16;--panel:#0d121d;--panel2:#111827;--text:#f7f9ff;--muted:#9ba7ba;--line:rgba(255,255,255,.09);--accent:#19d3ff;--accent2:#7c5cff;--gold:#ffc857;--green:#32e6a1;--shadow:0 25px 80px rgba(0,0,0,.45)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',sans-serif;color:var(--text);background:radial-gradient(circle at 15% 5%,rgba(25,211,255,.08),transparent 25%),radial-gradient(circle at 90% 30%,rgba(124,92,255,.08),transparent 30%),var(--bg);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:50px 50px;mask-image:linear-gradient(to bottom,#000,transparent 75%);z-index:-1}a{text-decoration:none;color:inherit}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid var(--line);background:rgba(5,7,13,.78);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.logo{font-size:25px;font-weight:800;letter-spacing:-1px}.logo span{color:var(--accent);text-shadow:0 0 20px rgba(25,211,255,.35)}nav{display:flex;gap:28px;align-items:center;font-size:14px;font-weight:600}nav a{color:#cbd5e1;transition:.2s}nav a:hover{color:var(--accent)}.nav-cta{padding:11px 17px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#5d7cff);color:#031018!important;box-shadow:0 0 25px rgba(25,211,255,.18)}.menu{display:none;border:1px solid var(--line);background:rgba(255,255,255,.04);color:white;border-radius:9px;font-size:22px;padding:7px 11px}
.hero{min-height:calc(100vh - 78px);display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;padding:85px 7%;position:relative;background:radial-gradient(circle at 80% 20%,rgba(25,211,255,.12),transparent 25%),radial-gradient(circle at 65% 70%,rgba(124,92,255,.11),transparent 30%)}.hero:after{content:"";position:absolute;width:380px;height:380px;right:-150px;top:80px;border-radius:50%;background:rgba(25,211,255,.08);filter:blur(60px);pointer-events:none}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2.5px;color:var(--accent);margin:0 0 17px}.hero h1{font-size:clamp(48px,6vw,78px);line-height:.98;letter-spacing:-4px;margin:0 0 25px}.hero h1 em,.section h2 em,.contact h2 em{font-family:'Playfair Display',serif;color:var(--accent);font-weight:700;text-shadow:0 0 30px rgba(25,211,255,.18)}.lead{font-size:18px;line-height:1.7;color:var(--muted);max-width:590px}.actions{display:flex;gap:12px;margin:32px 0}.btn{display:inline-block;padding:14px 21px;border-radius:11px;font-weight:700;font-size:14px;border:1px solid var(--line);transition:.25s}.btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(0,0,0,.3)}.primary{background:linear-gradient(135deg,var(--accent),#6f70ff);color:#031018;border-color:transparent;box-shadow:0 8px 30px rgba(25,211,255,.14)}.ghost{background:rgba(255,255,255,.035);color:#f1f5f9}.trust{display:flex;gap:18px;flex-wrap:wrap;color:#7f8da3;font-size:12px;font-weight:600}.trust span:first-child{color:var(--green)}
.hero-card{position:relative;min-height:520px;display:grid;place-items:center;filter:drop-shadow(0 35px 70px rgba(0,0,0,.55));animation:float 5s ease-in-out infinite}.code-window{width:min(100%,620px);position:relative;z-index:2;border:1px solid rgba(255,255,255,.13);border-radius:24px;overflow:hidden;background:linear-gradient(145deg,#111827,#070a11 70%);box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 80px rgba(25,211,255,.08)}.window-bar{height:54px;display:flex;align-items:center;gap:7px;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.035)}.window-bar span{width:9px;height:9px;border-radius:50%;background:#4b5563}.window-bar b{margin-left:12px;font-size:11px;color:#718096;font-weight:600}.code-body{padding:30px 28px 38px;min-height:300px;background:radial-gradient(circle at 80% 15%,rgba(124,92,255,.1),transparent 35%)}.code-line{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:2.2;color:#8795aa;white-space:nowrap}.code-line i{display:inline-block;width:35px;color:#344155;font-style:normal}.code-line span{color:#7dd3fc}.code-line strong{color:#c4b5fd;font-weight:500}.code-line em{color:#86efac;font-style:normal}.code-line mark{background:linear-gradient(90deg,rgba(25,211,255,.14),transparent);color:#f8fafc;padding:2px 7px;border-radius:5px}.cursor{width:8px;height:18px;background:var(--accent);margin:7px 0 0 35px;box-shadow:0 0 15px var(--accent);animation:blink 1s infinite}.preview-strip{display:flex;align-items:center;gap:12px;padding:15px 20px;border-top:1px solid var(--line);font-size:10px;letter-spacing:1.2px}.preview-strip span{color:var(--accent);font-weight:800}.preview-strip b{font-size:9px;color:var(--green);text-shadow:0 0 10px var(--green)}.preview-strip small{margin-left:auto;color:#6f7d91;letter-spacing:0}.float-card{position:absolute;z-index:4;display:flex;align-items:center;gap:11px;padding:13px 16px;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(12,17,27,.78);backdrop-filter:blur(16px);box-shadow:0 18px 45px rgba(0,0,0,.35)}.float-card>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:rgba(25,211,255,.1);color:var(--accent);font-weight:800}.float-card b{display:block;font-size:12px}.float-card small{display:block;margin-top:2px;color:#738096;font-size:10px}.card-one{top:55px;right:-15px}.card-two{bottom:45px;left:-25px}.card-two>span{color:var(--green);background:rgba(50,230,161,.09)}.orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}.orb-one{width:210px;height:210px;right:-80px;top:-30px;background:radial-gradient(circle,rgba(25,211,255,.18),transparent 68%)}.orb-two{width:240px;height:240px;left:-100px;bottom:-70px;background:radial-gradient(circle,rgba(124,92,255,.16),transparent 68%)}@keyframes blink{50%{opacity:.15}}
.section{padding:105px 7%;position:relative}.alt{background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.025));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.section-head{max-width:780px;margin-bottom:48px}.section h2,.contact h2{font-size:clamp(34px,4vw,54px);line-height:1.08;letter-spacing:-2px;margin:0}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.benefit-grid article,.service-grid article{border:1px solid var(--line);padding:27px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));box-shadow:0 15px 45px rgba(0,0,0,.18);transition:.25s}.benefit-grid article:hover,.service-grid article:hover{transform:translateY(-6px);border-color:rgba(25,211,255,.3);box-shadow:0 20px 55px rgba(0,0,0,.3),0 0 30px rgba(25,211,255,.05)}.icon{width:45px;height:45px;border-radius:13px;background:rgba(25,211,255,.1);border:1px solid rgba(25,211,255,.18);color:var(--accent);display:grid;place-items:center;font-size:22px;margin-bottom:24px}.benefit-grid h3,.service-grid h3{margin:0 0 10px;font-size:18px}.benefit-grid p,.service-grid p{margin:0;color:var(--muted);line-height:1.65;font-size:14px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.service-grid span{font-size:12px;color:var(--accent);font-weight:800}.service-grid h3{margin-top:45px}.business-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.business-tags span{border:1px solid var(--line);border-radius:100px;padding:10px 15px;font-size:13px;color:#aeb9ca;background:rgba(255,255,255,.025)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.price{position:relative;border:1px solid var(--line);padding:35px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:0 20px 50px rgba(0,0,0,.22)}.price.featured{border:1px solid rgba(25,211,255,.6);box-shadow:0 15px 50px rgba(25,211,255,.08)}.badge{position:absolute;right:20px;top:20px;background:rgba(25,211,255,.12);color:var(--accent);border:1px solid rgba(25,211,255,.2);padding:7px 10px;border-radius:20px;font-size:10px}.price p{font-size:12px;font-weight:800;letter-spacing:1.5px;color:#8491a6}.price h3{font-size:32px;margin:15px 0 25px}.price ul{padding:0;list-style:none;line-height:2.3;color:#a9b4c5;font-size:14px;margin-bottom:28px}.price li:before{content:'✓';color:var(--green);font-weight:800;margin-right:10px}.note{font-size:12px;color:#738096;margin-top:22px}
.contact{margin:0 7% 80px;padding:70px;border-radius:25px;background:radial-gradient(circle at 80% 10%,rgba(25,211,255,.12),transparent 30%),linear-gradient(145deg,#101827,#070a11);border:1px solid var(--line);color:white;display:grid;grid-template-columns:1.4fr .8fr;gap:50px;align-items:center;box-shadow:var(--shadow)}.contact .eyebrow{color:var(--gold)}.contact h2{margin-bottom:20px}.contact>div>p:last-child{color:#9aa7b9;line-height:1.7;max-width:530px}.contact-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:30px;backdrop-filter:blur(15px)}.contact-card h3{margin-top:0}.phone{font-size:30px;font-weight:800;color:var(--accent)}.contact-card p{color:#8996aa;font-size:13px}.full{width:100%;text-align:center;margin-top:10px}footer{padding:35px 7%;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#04060b}footer p,footer small{font-size:12px;color:#68758a}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:900px){nav{display:none}.menu{display:block}.hero{grid-template-columns:1fr;padding-top:60px}.hero-card{max-width:650px}.benefit-grid,.service-grid{grid-template-columns:repeat(2,1fr)}.price-grid{grid-template-columns:1fr}.contact{grid-template-columns:1fr;margin:0 4% 50px;padding:45px 30px}footer{flex-direction:column;align-items:flex-start}}
@media(max-width:560px){.hero{padding:50px 5%}.hero h1{font-size:48px;letter-spacing:-2.5px}.lead{font-size:16px}.actions{flex-direction:column}.btn{text-align:center}.section{padding:70px 5%}.benefit-grid,.service-grid{grid-template-columns:1fr}.mock-nav span{display:none}.villa{height:220px}.villa h2{font-size:27px}.contact{margin-left:5%;margin-right:5%}}


/* =========================
   EXTRA MOBILE POLISH
   ========================= */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

img, svg, video, iframe {
  max-width: 100%;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 900px) {
  .nav {
    position: relative;
  }

  .nav-links {
    gap: 8px;
  }

  .menu-btn {
    min-width: 46px;
    min-height: 46px;
    border-radius: 14px;
  }
}

@media (max-width: 560px) {
  .container {
    width: min(100% - 28px, 1180px);
  }

  .hero {
    padding-top: 54px;
    padding-bottom: 54px;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 12vw, 4rem);
    line-height: .98;
  }

  .hero p {
    font-size: 15px;
    line-height: 1.7;
  }

  .actions {
    width: 100%;
  }

  .actions a,
  .actions button {
    width: 100%;
    min-height: 52px;
  }

  .code-window {
    transform: none;
  }

  .floating-card {
    display: none;
  }

  .section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .section-title {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .benefit-grid,
  .service-grid {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card {
    padding: 24px 20px;
  }

  .contact {
    padding: 28px 20px;
  }
}

@media (max-width: 380px) {
  .container {
    width: min(100% - 22px, 1180px);
  }

  .hero {
    padding-top: 42px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .trust {
    gap: 10px;
  }

  .trust span {
    font-size: 12px;
  }

  .code-window {
    font-size: 11px;
  }
}