:root{
  --bg: #f8fbfd;
  --card: #ffffff;
  --accent: #20c2b4;      /* main teal/green you can tweak */
  --accent-2: #14b8a6;
  --dark: #071428;
  --muted: #5f6f7a;
  --container-max: 1120px;
  --radius: 18px;
  --shadow-lg: 0 18px 40px rgba(17, 29, 44, 0.08);
  --shadow-s: 0 6px 16px rgba(17,29,44,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg),#ffffff 60%);
  color:var(--dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* centered frame with rounded card like the design */
.page-frame{
  max-width:1300px;
  margin:30px auto;
  background:linear-gradient(180deg, rgba(255,255,255,0.85), #fff);
  border-radius:18px;
  padding:28px;
  box-shadow: 0 30px 80px rgba(13,30,40,0.08);
}

/* container */
.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 28px;
}

/* topbar */
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.topbar{
  margin-bottom:28px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo-mark{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.brand-title{
  font-weight:700;
  letter-spacing:0.6px;
  color:var(--dark);
}
.nav{
  display:flex;
  gap:18px;
  align-items:center;
}
.nav a{
  text-decoration:none;
  color:var(--dark);
  font-weight:500;
  opacity:0.85;
}
.cta .btn-outline{
  padding:10px 18px;
  border-radius:12px;
  text-decoration:none;
  border:1.5px solid rgba(9,18,22,0.06);
  color:var(--dark);
  background:white;
  font-weight:600;
}

/* hero */
.hero{
  display:flex;
  align-items:center;
  gap:48px;
  padding:22px 0 42px 0;
}
.hero-left{flex:1;min-width:260px}
.hero-right{width:520px;display:flex;justify-content:center}

/* texts */
.headline{
  font-size:56px;
  margin:8px 0 18px 0;
  line-height:1.02;
  color:var(--dark);
  font-weight:800;
}
.lead{
  color:var(--muted);
  font-size:18px;
  max-width:520px;
  margin-bottom:22px;
}

/* buttons */
.btn{
  display:inline-block;
  text-decoration:none;
  border-radius:14px;
  padding:14px 22px;
  font-weight:700;
  box-shadow:var(--shadow-s);
}
.btn-primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:white;
  border:0;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(32,194,180,0.18) }

/* small hero */
.hero-actions{display:flex;flex-direction:column;gap:10px}
.hero-small{color:var(--muted);font-size:13px}

/* device card on the right to simulate the UI preview */
.device-card{
  width:420px;
  border-radius:20px;
  background:linear-gradient(180deg, #f4fbff, #eef7fb);
  padding:18px;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(12,23,32,0.03);
  overflow:hidden;
}
.device-header{
  height:22px;
  background:linear-gradient(90deg,#21364f,#274a6a);
  border-radius:8px;
  margin-bottom:12px;
  box-shadow:0 6px 14px rgba(16,28,38,0.06) inset;
}
.device-image{ width:100%; border-radius:12px; display:block; object-fit:cover; }

/* "How it Works" */
.how{padding:36px 28px 12px 28px}
.section-title{
  text-align:center;
  font-weight:700;
  margin-bottom:22px;
  font-size:28px;
  color:var(--dark);
}
.steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:18px;
  flex-wrap:wrap;
}
.step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-width:140px;
}
.icon-wrap{
  width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eaf6f4;border:1px solid rgba(32,194,180,0.06);
  box-shadow:0 8px 20px rgba(32,194,180,0.06);
}
.icon-wrap svg{width:34px;height:34px;color:var(--accent-2)}
.step-title{font-weight:600;color:var(--dark)}

/* arrow */
.arrow{font-size:22px;color:#97a9b4;margin-top:12px}

/* footer */
.footer{padding:28px 0 16px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;color:var(--muted);padding:12px 28px;border-top:1px dashed rgba(15,25,30,0.04);}

/* responsive */
@media (max-width:980px){
  .page-frame{margin:16px}
  .hero{flex-direction:column-reverse}
  .hero-right{width:100%}
  .headline{font-size:36px}
  .device-card{width:100%}
  .nav{display:none}
}


/* form section */
.form-section {
  background: var(--card);
  border-radius: var(--radius);
  padding: 32px;
  margin: 48px auto;
  max-width: 640px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.form-section .section-title {
  margin-bottom: 10px;
  font-size: 26px;
}

.form-subtitle {
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 22px;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.signup-form input,
.signup-form textarea {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(9,18,22,0.08);
  font-size: 15px;
  outline: none;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.signup-form input:focus,
.signup-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(32,194,180,0.2);
}

.signup-form textarea {
  min-height: 100px;
  resize: vertical;
}

.signup-form button {
  align-self: center;
  padding: 14px 36px;
  font-size: 16px;
  cursor: pointer;
}

.form-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 14px;
}
.form-note a {
  color: var(--accent-2);
  font-weight: 600;
  text-decoration: none;
}
.form-note a:hover {
  text-decoration: underline;
}


.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
         background: rgba(0,0,0,0.6); justify-content: center; align-items: center; }
.modal-content { background: #fff; padding: 2rem; border-radius: 12px; width: 90%; max-width: 500px; }
.close-btn { float: right; font-size: 1.5rem; cursor: pointer; }
.signup-form input, .signup-form textarea { width: 100%; margin: 8px 0; padding: 10px; border-radius: 8px; border: 1px solid #ddd; }
.signup-form button { margin-top: 10px; }