*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,Arial;}
body{
  background: radial-gradient(circle at top left, #d8e7ff, #f7f9fc);
  color:#111827;
}

/* NAV */
.nav{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px;
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid #e9eef6;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-icon{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0d6efd,#11b49a);
  color:#fff;font-size:20px;
}
.brand-title{font-weight:900;font-size:14px;}
.brand-sub{font-size:12px;color:#6b7280;margin-top:2px;}

.nav-right{display:flex;align-items:center;gap:12px;}
.menu{display:flex;gap:14px;align-items:center;}
.menu-link{
  text-decoration:none;color:#374151;font-weight:800;font-size:13px;
  padding:8px 10px;border-radius:10px;
}
.menu-link:hover{background:#f1f5ff;color:#1f63d6;}

.auth-actions{display:flex;gap:10px;align-items:center;}
.btn-outline{
  border:1px solid #dbe2ef;background:#fff;
  padding:10px 12px;border-radius:12px;
  font-weight:900;font-size:13px;cursor:pointer;
}
.btn-outline:hover{background:#f9fafb;}

.btn-primary{
  border:none;background:#2b7bff;color:#fff;
  padding:12px 14px;border-radius:12px;
  font-weight:950;font-size:14px;cursor:pointer;
}
.btn-primary:hover{background:#1f63d6;}
.btn-primary.small{padding:10px 12px;font-size:13px;}

.profile-wrap{position:relative;display:none;}
.profile-btn{
  border:1px solid #dbe2ef;background:#fff;
  width:42px;height:42px;border-radius:14px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.avatar{font-size:18px;}
.dropdown{
  position:absolute;right:0;top:52px;
  width:260px;background:#fff;border:1px solid #e5e7eb;
  border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.12);
  padding:12px;display:none;
}
.drop-head{display:flex;gap:10px;align-items:center;}
.drop-avatar{
  width:42px;height:42px;border-radius:14px;
  background:#f3f4f6;display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.drop-name{font-weight:900;}
.drop-email{font-size:12px;color:#6b7280;margin-top:2px;word-break:break-all;}
.drop-line{height:1px;background:#e5e7eb;margin:10px 0;}
.drop-item{
  width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid #e5e7eb;background:#fff;
  cursor:pointer;font-weight:900;
}
.drop-item:hover{background:#f9fafb;}

/* PAGE */
.page{max-width:1180px;margin:0 auto;padding:24px 18px 60px;}

/* HERO */
.hero{
  display:grid;grid-template-columns: 1.15fr .85fr;
  gap:18px;align-items:center;
  background:linear-gradient(135deg, #0d6efd, #11b49a);
  border-radius:18px;padding:34px;
  box-shadow:0 18px 60px rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  position:relative;
}
.hero h1{font-size:36px;line-height:1.15;font-weight:950;}
.hero-sub{margin-top:12px;opacity:.92;max-width:560px;line-height:1.6;font-size:14px;}
.hero-actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;}
.btn-ghost{
  text-decoration:none;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;padding:12px 14px;border-radius:12px;
  font-weight:950;font-size:14px;
  background:rgba(255,255,255,.10);
}
.btn-ghost:hover{background:rgba(255,255,255,.18);}

/* hero right visual */
.hero-visual{
  position:relative;
  min-height:320px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
.bot-img{
  width:60%;
  height:150%;
  max-width:420px;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.25));
  display:block;
  
}

.float-card{
  position:absolute;
  width:56px;height:56px;border-radius:16px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  backdrop-filter: blur(6px);
}
.f1{top:22px;left:22px;}
.f2{top:26px;right:22px;}
.f3{bottom:24px;left:28px;}
.f4{bottom:26px;right:26px;}

/* feature strip white card (like screenshot) */
.feature-strip{
  width: calc(100% - 90px);
  margin: -26px auto 0 auto;   /* overlap hero like image */
  background:#fff;
  border:1px solid #e9eef6;
  border-radius:22px;
  box-shadow:0 22px 70px rgba(0,0,0,.14);
  padding:22px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  position:relative;
  z-index:5;
}

.feature-card{
  background:#ffffff;
  border:1px solid #eef2fb;
  border-radius:18px;
  padding:18px;
  text-align:center;
}

.feature-icon{
  width:62px;height:62px;border-radius:18px;
  background:#eef6ff;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px auto;
  font-size:24px;
}

.feature-title{font-weight:950;color:#111827;}
.feature-text{margin-top:8px;color:#6b7280;font-size:13px;line-height:1.45;}
.feature-link{
  display:inline-block;margin-top:10px;
  text-decoration:none;color:#1f63d6;font-weight:950;font-size:13px;
}
.feature-link:hover{text-decoration:underline;}

/* HOW */
.how{
  margin-top:22px;
  text-align:center;
}
.how h2{font-size:28px;font-weight:950;}
.how-sub{color:#6b7280;margin-top:8px;font-size:13px;}

.steps{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.step{
  background:#fff;border:1px solid #e9eef6;border-radius:18px;
  padding:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.06);
  text-align:center;
}
.step-num{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:950;
  margin:0 auto 10px auto;
  color:#fff;
}
.step-num.one{background:#2563eb;}
.step-num.two{background:#10b981;}
.step-num.three{background:#818cf8;}
.step-title{font-weight:950;}
.step-text{margin-top:8px;color:#6b7280;font-size:13px;line-height:1.45;}
.mini-link2{display:inline-block;margin-top:10px;color:#1f63d6;font-weight:950;font-size:13px;text-decoration:none;}
.mini-link2:hover{text-decoration:underline;}

/* CTA */
.cta{margin-top:20px;}
.cta-box{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:linear-gradient(135deg, #0d6efd, #11b49a);
  color:#fff;border-radius:18px;padding:22px;border:1px solid rgba(255,255,255,.25);
  box-shadow:0 18px 60px rgba(0,0,0,.12);
}
.cta-box h3{font-size:22px;font-weight:950;}
.cta-box p{margin-top:8px;opacity:.92;font-size:13px;max-width:650px;line-height:1.5;}


/* FOOTER */
.footer{
  margin-top:26px;
  background:#0b1220;
  color:#cbd5e1;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-inner{
  max-width:1180px;
  margin:0 auto;
  padding:26px 18px;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:18px;
}
.footer-col{display:flex;flex-direction:column;gap:10px;}
.footer-brand{display:flex;gap:10px;align-items:flex-start;}
.brand-icon.small{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0d6efd,#11b49a);
  color:#fff;font-size:18px;
}
.footer-title{font-weight:950;color:#fff;}
.footer-head{font-weight:950;color:#fff;margin-bottom:4px;}
.footer-text{font-size:13px;opacity:.9;line-height:1.5;}
.footer-link{
  color:#cbd5e1;text-decoration:none;font-size:13px;
  opacity:.9;
}
.footer-link:hover{opacity:1;text-decoration:underline;}
.social-row{display:flex;gap:10px;margin-top:8px;}
.soc{
  width:34px;height:34px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
}
.footer-bottom{
  text-align:center;
  padding:14px 18px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:13px;
  opacity:.9;
}
.tips-bar{
  width:100%;
  background:#fff;
  overflow:hidden;
  padding:8px 0;
  border-bottom:1px solid rgba(0,0,0,0.05);
}

.tips-track{
  display:flex;
  width:max-content;
  animation: scrollTips 13s linear infinite;
}

.tips-content{
  white-space:nowrap;
  padding-right:50px;
  font-weight:600;
  color:#125b5b;
}

@keyframes scrollTips{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}

@media (max-width:980px){
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .footer-inner{grid-template-columns:1fr;}
}