:root{
  --blue:#0b6fe8;
  --blue-dark:#061b3f;
  --green:#16c957;
  --green-2: #42d85a;
  --teal:#00b8a9;
  --text:#122033;
  --muted:#637083;
  --bg:#f7fbff;
  --white:#ffffff;
  --shadow:0 20px 60px rgba(7, 38, 86, .12);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Inter', sans-serif;
  color:var(--text);
  background:var(--bg);
}
.container{width:min(1140px, 92%); margin:auto}
.site-header{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid rgba(11,111,232,.08);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.brand img{height:58px; display:block}
nav{display:flex; gap:28px}
nav a{
  color:var(--blue-dark);
  text-decoration:none;
  font-weight:600;
  font-size:15px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 24px;
  background:linear-gradient(135deg,var(--blue),var(--green));
  color:#fff;
  text-decoration:none;
  font-weight:800;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(11,111,232,.24);
}
.btn-small{padding:11px 18px; font-size:14px}
.btn-secondary{
  background:#fff;
  color:var(--blue-dark);
  box-shadow:inset 0 0 0 1px rgba(11,111,232,.14);
}
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 85% 12%, rgba(6,199,90,.16), transparent 30%),
    linear-gradient(110deg,#fff 0%,#f5fbff 48%,#eaf7ff 100%);
  padding:86px 0 48px
}

.hero-visual {
    position: relative;
    height: 610px;
}

.glow {
    position: absolute;
    inset: 40px;
    border-radius: 40px;
    background: linear-gradient(135deg, rgba(6, 199, 90, .18), rgba(8, 126, 245, .18));
    filter: blur(30px);
}

.phone-card {
    position: absolute;
    right: 100px;
    top: 20px;
    width: 275px;
    height: 565px;
    border: 10px solid #1a2b3d;
    border-radius: 42px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--shadow);
    z-index: 2;
}
.phone-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.charger-head {
    position: absolute;
    top: 36px;
    width: 108px;
    height: 190px;
    border-radius: 28px;
    background: #132d3c;
    border: 5px solid #e8f3fb;
    box-shadow: inset 0 0 0 3px var(--green);
}
.charger-screen {
    position: absolute;
    top: 95px;
    text-align: center;
    color: white;
    font-weight: 800;
}
.charger-dot {
    position: absolute;
    bottom: 70px;
    width: 52px;
    height: 8px;
    border-radius: 99px;
    background: #d9e8f2;
}
.charger-card {
    position: absolute;
    right: 0;
    bottom: 52px;
    width: 160px;
    height: 380px;
    border-radius: 42px;
    background: linear-gradient(#fff, #eef8ff);
    border: 1px solid #d8e8f5;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center;
}
.eyebrow{
  display:inline-block;
  color:var(--green);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:13px;
  margin-bottom:18px;
}
h1{
  font-family:'Exo 2', sans-serif;
  font-size:68px;
  line-height:1.02;
  margin:0 0 22px;
  color:var(--blue-dark);
}
h1 span{color:var(--blue)}
.hero p, .split p, .cta p{
  font-size:18px;
  line-height:1.75;
  color:var(--muted);
  margin:0 0 30px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.stats{
  display:flex;
  gap:28px;
  margin-top:36px;
}
.stats div{
  background:#fff;
  padding:18px 22px;
  border-radius:18px;
  box-shadow:var(--shadow);
}
.stats strong{display:block; font-size:24px; color:var(--blue-dark)}
.stats small{color:var(--muted); font-weight:700}
.hero-card{
  min-height:520px;
  position:relative;
  display:grid;
  place-items:center;
}
.phone{
  width:300px;
  height:560px;
  background:linear-gradient(145deg,#071833,#0e77ff);
  border-radius:44px;
  padding:13px;
  box-shadow:var(--shadow);
  transform:rotate(-5deg);
}
.screen{
  height:100%;
  border-radius:34px;
  background:
    radial-gradient(circle at 70% 30%,rgba(22,201,87,.25),transparent 24%),
    radial-gradient(circle at 30% 70%,rgba(11,111,232,.22),transparent 28%),
    #fff;
  position:relative;
  overflow:hidden;
}
.screen:before{
  content:"";
  position:absolute;
  width:110px;
  height:28px;
  background:#061b3f;
  border-radius:0 0 18px 18px;
  top:0;
  left:50%;
  transform:translateX(-50%);
}
.map-dot{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 10px rgba(22,201,87,.12);
}
.dot-1{top:150px; left:70px}
.dot-2{top:250px; right:65px; background:var(--blue)}
.dot-3{bottom:135px; left:110px}
.charge-card{
  position:absolute;
  left:24px;
  right:24px;
  bottom:42px;
  background:#fff;
  border-radius:24px;
  padding:22px;
  box-shadow:var(--shadow);
}
.charge-card span{color:var(--green); font-weight:800; font-size:13px}
.charge-card h3{margin:8px 0; color:var(--blue-dark)}
.charge-card p{font-size:14px; margin:0 0 16px}
.charge-card button{
  border:0;
  width:100%;
  padding:12px;
  border-radius:12px;
  color:#fff;
  font-weight:800;
  background:linear-gradient(135deg,var(--blue),var(--green));
}
.floating-badge{
  position:absolute;
  right:20px;
  top:100px;
  background:#fff;
  padding:14px 18px;
  border-radius:999px;
  box-shadow:var(--shadow);
  font-weight:800;
}
.section{padding:78px 0}
.section-title{text-align:center; max-width:720px; margin:0 auto 38px}
.section-title span{color:var(--green); font-weight:800; text-transform:uppercase; letter-spacing:.12em}
h2{
  font-family:'Exo 2', sans-serif;
  font-size:42px;
  line-height:1.15;
  margin:12px 0 0;
  color:var(--blue-dark);
}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.card,.step{
  background:#fff;
  border-radius:26px;
  padding:32px;
  box-shadow:var(--shadow);
}
.icon{font-size:36px; margin-bottom:16px}
.card h3,.step h3{margin:0 0 12px; color:var(--blue-dark)}
.card p,.step p{color:var(--muted); line-height:1.7; margin:0}
.gradient-section{
  background:linear-gradient(135deg,var(--blue-dark),var(--blue) 50%,var(--green));
  color:#fff;
}
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.light{color:#b5ffcf}
.gradient-section h2,.gradient-section p{color:#fff}
.list-box{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  border-radius:28px;
  padding:30px;
}
.list-box li{
  list-style:none;
  margin:16px 0;
  font-weight:700;
}
.list-box li:before{
  content:"✓";
  color:#b5ffcf;
  margin-right:12px;
}
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.step b{color:var(--green); font-size:28px}
.cta{padding:50px 0 82px}
.cta-box{
  text-align:center;
  background:#fff;
  border-radius:34px;
  padding:58px 24px;
  box-shadow:var(--shadow);
}
.cta-box h2{margin-top:0}
footer{
  background:var(--blue-dark);
  color:#fff;
  padding:24px 0;
}
.footer {
    background: #031126;
    color: rgba(255, 255, 255, 0.78);
    padding: 58px 0 22px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 34px;
    align-items: start;
}

.footer-brand img {
    width: 210px;}

.footer-col h4 {
    color: var(--white);
    font-size: 20px;
    margin-bottom: 16px;
    margin-top:5px;
}
.footer-col p {
    line-height: 1.8;
    margin: 0;
}
.footer a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none !important;
}
.footer a:hover {
    color: var(--green-2);
}
.footer span{color:#b9c7db}

@media(max-width:900px){
  nav{display:none}
  .hero-grid,.split,.cards,.steps{grid-template-columns:1fr}
  h1{font-size:48px}
  .hero-card{min-height:470px}
  .phone{width:250px;height:470px}
}
@media(max-width:560px){
  .brand img{height:44px}
  .btn-small{display:none}
  h1{font-size:40px}
  h2{font-size:32px}
  .stats{flex-direction:column; gap:14px}
}