:root{
  --bg1:#7dd3fc;
  --bg2:#38bdf8;
  --text:#07121e;
  --muted:rgba(7,18,30,.72);

  --card:rgba(255,255,255,.14);
  --stroke:rgba(255,255,255,.22);
  --shadow: 0 18px 60px rgba(0,0,0,.18);
  --shadow2: 0 10px 30px rgba(0,0,0,.14);

  --radius: 18px;
  --radius2: 24px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.container{width:min(1120px, calc(100% - 32px)); margin:0 auto}
.small{font-size:12.5px}
.muted{color:var(--muted)}
h1,h2,h3,p{margin:0}

/* BACKGROUND */
.bg{position:fixed; inset:0; z-index:-2}
.sky{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 70% 15%, rgba(255,255,255,.75), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}
.sun{
  position:absolute; width:190px; height:190px; border-radius:50%;
  left:64%; top:8%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.85), rgba(255,255,255,.18) 40%, rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 50%, rgba(253,230,138,.95), rgba(251,191,36,.55) 55%, rgba(251,191,36,0) 75%);
  opacity:.95;
}
.cloud{
  position:absolute; width:220px; height:74px; border-radius:80px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 10px 40px rgba(255,255,255,.22);
}
.cloud::before,.cloud::after{
  content:""; position:absolute; background:rgba(255,255,255,.68);
  width:105px; height:105px; border-radius:50%;
  top:-38px; left:24px;
}
.cloud::after{width:135px; height:135px; top:-58px; left:86px}
.c1{left:6%; top:14%; opacity:.65; transform:scale(.82)}
.c2{left:40%; top:8%; opacity:.5; transform:scale(.7)}
.c3{left:6%; top:30%; opacity:.4; transform:scale(.62)}

.sea{
  position:absolute; left:0; right:0; bottom:110px;
  height:44%;
  background: linear-gradient(180deg, rgba(14,165,233,.92), rgba(2,132,199,.95));
  overflow:hidden;
}
.sparkles{
  position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 12% 30%, rgba(255,255,255,.8), rgba(255,255,255,0) 55%),
    radial-gradient(2px 2px at 22% 45%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
    radial-gradient(2px 2px at 36% 38%, rgba(255,255,255,.7), rgba(255,255,255,0) 55%),
    radial-gradient(2px 2px at 54% 50%, rgba(255,255,255,.7), rgba(255,255,255,0) 55%),
    radial-gradient(2px 2px at 68% 34%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%),
    radial-gradient(2px 2px at 82% 47%, rgba(255,255,255,.6), rgba(255,255,255,0) 55%);
  opacity:.5;
}
.wave{
  position:absolute; left:-10%; right:-10%;
  height:90px;
  background:
    radial-gradient(60px 40px at 10% 60%, rgba(224,242,254,.75), rgba(224,242,254,0) 60%),
    radial-gradient(60px 40px at 30% 30%, rgba(224,242,254,.65), rgba(224,242,254,0) 60%),
    radial-gradient(60px 40px at 52% 55%, rgba(224,242,254,.65), rgba(224,242,254,0) 60%),
    radial-gradient(60px 40px at 72% 35%, rgba(224,242,254,.7), rgba(224,242,254,0) 60%),
    radial-gradient(60px 40px at 90% 60%, rgba(224,242,254,.7), rgba(224,242,254,0) 60%);
  opacity:.55;
}
.w1{top:18%; animation: drift 10s linear infinite}
.w2{top:42%; opacity:.42; animation: drift 14s linear infinite reverse}
.w3{top:66%; opacity:.34; animation: drift 18s linear infinite}
@keyframes drift{0%{transform:translateX(0)} 100%{transform:translateX(6%)}}

.sand{
  position:absolute; left:0; right:0; bottom:0;
  height:170px;
  background:
    radial-gradient(900px 120px at 50% 0%, rgba(255,255,255,.20), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(253,230,138,.95), rgba(251,191,36,.92));
  box-shadow: inset 0 24px 70px rgba(0,0,0,.08);
}
.grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity:.55;
  pointer-events:none;
}

/* UI */
.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 0;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:950}
.logo{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:12px; background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: var(--shadow2);
}
.brand-text{font-size:15px; letter-spacing:.2px}

.nav{display:none; gap:14px}
.nav a{
  font-weight:900; padding:10px 12px; border-radius:14px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}

.right{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.select{
  height:44px;
  padding:0 10px;
  border-radius:16px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.18);
  color: rgba(7,18,30,.92);
  outline:none;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 14px; border-radius:16px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.22);
  box-shadow: var(--shadow2);
  font-weight:950;
  color: rgba(7,18,30,.92);
  cursor:pointer; user-select:none;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn.ghost{background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24)}
.btn.big{height:50px; border-radius:18px}
.btn.wide{width:100%}
.btn-icon{width:44px; padding:0}

.mobile-menu{
  padding: 10px 0 14px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.mobile-links{
  display:grid; gap:8px; padding: 0 0 10px;
}
.mobile-links a{
  padding:12px 12px; border-radius:16px;
  font-weight:900;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
}
.mobile-cta{display:grid; gap:10px}

.hero{padding: 30px 0 18px}
.hero-grid{display:grid; grid-template-columns: 1fr; gap:14px}
.pill{
  display:inline-flex; padding:10px 14px; border-radius:999px;
  background: rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.24);
  font-weight:950; box-shadow: var(--shadow2);
}
.h1{
  margin:14px 0 10px;
  font-size: clamp(28px, 7.2vw, 52px);
  line-height:1.04;
  letter-spacing:-.7px;
}
.accent{
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(224,242,254,.9));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow: 0 10px 30px rgba(255,255,255,.20);
}
.lead{font-size:15.5px; line-height:1.45; color: rgba(7,18,30,.78)}
.hero-cta{display:grid; gap:10px; margin-top:14px}

.badges{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.badge{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:16px;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  box-shadow: var(--shadow2);
  font-weight:900; color: rgba(7,18,30,.82);
}
.dot{width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.85); box-shadow: 0 0 0 4px rgba(255,255,255,.18)}

.glass{
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.card{padding:16px}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.mini-title{font-weight:950}
.secure{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:14px;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.20);
  font-weight:950; white-space:nowrap;
}
.list{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.list li{display:flex; gap:10px; font-weight:800; color: rgba(7,18,30,.84)}
.check{font-weight:950}
.card-foot{display:grid; gap:10px; margin-top:12px}

.float-note{
  margin-top:12px;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius: 18px;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  box-shadow: var(--shadow2);
  font-weight:900; color: rgba(7,18,30,.82);
}

.section{padding: 28px 0}
.section-head{margin-bottom:12px}
.h2{font-size: clamp(20px, 5.4vw, 30px); letter-spacing:-.2px}
.h3{font-size:18px}
.pricing-grid{display:grid; gap:12px}

.price-card{
  position:relative; padding:16px; border-radius: var(--radius2);
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
  display:flex; flex-direction:column; gap:12px;
}
.price-card.featured{background: rgba(255,255,255,.20); border:1px solid rgba(255,255,255,.26)}
.ribbon{
  position:absolute; top:12px; right:12px;
  padding:7px 10px; border-radius:999px;
  background: rgba(255,255,255,.24);
  border:1px solid rgba(255,255,255,.28);
  font-weight:950; font-size:12px;
}
.pc-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tag{
  padding:8px 10px; border-radius:999px;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.20);
  font-weight:950; font-size:12px;
}
.model{font-weight:950; color: rgba(7,18,30,.84)}
.price{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.price .big{font-weight:950; font-size:28px}
.price .small{font-weight:950; opacity:.88}
.per{font-weight:950; font-size:12px; opacity:.75; margin-left:4px}
.pc-list{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.pc-list li{display:flex; gap:10px; font-weight:800; color: rgba(7,18,30,.84)}

.note-line{
  margin-top:14px;
  display:flex; gap:10px; align-items:center; justify-content:center;
  flex-wrap:wrap;
  padding:12px 14px; border-radius: 18px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
}
.note-line .mini{font-weight:950; color: rgba(7,18,30,.84)}
.sep{opacity:.65}

.demo-box{
  display:grid; gap:12px;
  padding:16px; border-radius: var(--radius2);
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
}

.form-grid{display:grid; gap:14px; grid-template-columns: 1fr}
.form{padding:16px}
.row{display:grid; gap:12px; grid-template-columns: 1fr}
.field{display:flex; flex-direction:column; gap:8px}
label{font-weight:950; color: rgba(7,18,30,.85)}
input, textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.16);
  outline:none;
  color: rgba(7,18,30,.90);
  font-weight:800;
}
textarea{resize: vertical; min-height: 170px}
.status{margin-top:10px; font-weight:950; color: rgba(7,18,30,.78)}

.side{padding:16px}
.steps{margin:12px 0 0; padding-left:0; list-style:none; display:grid; gap:10px}
.steps li{display:flex; gap:10px; align-items:flex-start; font-weight:900; color: rgba(7,18,30,.84)}
.num{
  width:28px; height:28px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.22);
  font-weight:950;
}
.side-cta{display:grid; gap:10px; margin-top:14px}

.footer{padding: 18px 0 28px}
.footer-inner{
  display:grid; gap:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.18);
}
.foot-right{display:flex; gap:10px; flex-wrap:wrap}
.foot-right a{
  font-weight:950;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}

/* DESKTOP */
@media (min-width: 900px){
  .nav{display:flex}
  #menuBtn{display:none}
  .mobile-menu{display:none !important}

  .hero{padding: 58px 0 18px}
  .hero-grid{grid-template-columns: 1.15fr .85fr; gap:18px; align-items:start}
  .hero-cta{display:flex}
  .pricing-grid{grid-template-columns: repeat(3, 1fr)}
  .row{grid-template-columns: 1fr 1fr}
  .form-grid{grid-template-columns: 1.05fr .95fr; align-items:start}
  .demo-box{display:flex; align-items:center; justify-content:space-between}
  .footer-inner{display:flex; justify-content:space-between; align-items:center}
}