: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(1080px, calc(100% - 32px)); margin:0 auto}
.small{font-size:12.5px}
.muted{color:var(--muted)}
h1,h2,h3,p{margin:0}

.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:180px; height:180px;
  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;
}

.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:900}
.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}

.right{display:flex; gap:10px; align-items:center}

.select{
  height:42px;
  max-width: 46vw;
  padding:0 10px;
  border-radius:14px;
  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:900;
  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:850;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
}
.mobile-cta{display:grid; gap:10px}

.hero{padding: 28px 0 18px}
.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:900;
  box-shadow: var(--shadow2);
}
.h1{
  margin:14px 0 10px;
  font-size: clamp(28px, 7.2vw, 48px);
  line-height:1.04;
  letter-spacing:-.6px;
}
.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{
  margin:0;
  font-size: 15.5px;
  line-height:1.45;
  color: rgba(7,18,30,.78);
}
.hero-cta{display:grid; gap:10px; margin-top:14px}

.glass{
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.card{padding:16px; margin-top:14px}
.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:900;
  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:750; 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:850;
  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-scroll{
  display:flex;
  gap:12px;
  overflow:auto;
  padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.pricing-scroll::-webkit-scrollbar{height:10px}
.pricing-scroll::-webkit-scrollbar-thumb{background: rgba(255,255,255,.22); border-radius:999px}

.price-card{
  min-width: 86%;
  scroll-snap-align: start;
  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:900;
  font-size:12px;
}
.model{font-weight:900; 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:900; opacity:.88}
.per{font-weight:900; 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:750; 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:900; 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);
}

.grid{display:grid; gap:14px}
.form-grid{grid-template-columns: 1fr}
.form{padding:16px}
.field{display:flex; flex-direction:column; gap:8px}
label{font-weight:900; 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:750;
}
textarea{resize: vertical; min-height: 160px}
.status{
  margin-top:10px;
  font-weight:900;
  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:800; 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);
}
.brand.small .brand-text{font-size:14px}
.foot-right{display:flex; gap:10px; flex-wrap:wrap}
.foot-right a{
  font-weight:900;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}

/* bigger screens */
@media (min-width: 860px){
  .container{width:min(1120px, calc(100% - 40px))}
  .hero{padding: 56px 0 18px}
  .hero-cta{grid-template-columns: auto auto; width:max-content}
  .pricing-scroll{display:grid; grid-template-columns: repeat(3, 1fr); overflow:visible}
  .price-card{min-width:auto}
  .form-grid{grid-template-columns: 1.05fr .95fr}
  .demo-box{display:flex; align-items:center; justify-content:space-between}
  .footer-inner{display:flex; justify-content:space-between; align-items:center}
}