:root{
  --ink:#0f172a;
  --dark:#0f172a;
  --slate:#1f2937;
  --accent:#f97316;
  --accent-2:#0ea5e9;
  --blue:#3b82f6;
  --soft:#f8fafc;
  --card:#ffffff;
  --border:#e2e8f0;
  --muted:#64748b;
  --glow:rgba(14,165,233,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Sora',sans-serif;
  color:var(--slate);
  background:
    radial-gradient(1200px 500px at 15% -10%,rgba(249,115,22,.18),transparent 60%),
    radial-gradient(800px 400px at 90% 0,rgba(14,165,233,.18),transparent 60%),
    var(--soft);
  line-height:1.6;
}
a{color:inherit}

header{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 2rem;background:var(--dark);color:#fff
}
nav a{margin-left:1rem;color:#fff;text-decoration:none;font-weight:600}
nav a:hover{color:var(--blue)}

.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:0.5rem;}
.menu-toggle span{display:block;width:25px;height:3px;background:#fff;margin:5px 0;transition:0.3s;}

.hero{
  padding:3.5rem 1.5rem 2.5rem;
}
.hero-inner{max-width:980px;margin:0 auto;text-align:center}
.hero-title{font-family:'Space Grotesk',sans-serif;font-size:2.4rem;color:var(--ink);margin-bottom:.6rem}
.hero-sub{max-width:760px;margin:0 auto;color:var(--muted)}
.hero-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin:1.4rem 0}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .8rem;
  border-radius:999px;
  background:#fff7ed;
  color:#c2410c;
  font-weight:600;
  border:1px solid #fed7aa;
  font-size:.85rem;
}
.breadcrumb{
  margin-top:.8rem;
  font-size:.9rem;
  color:var(--muted);
}

.steps{
  display:flex;
  gap:.7rem;
  justify-content:center;
  flex-wrap:wrap;
  margin:1.4rem auto 0;
}
.step{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .8rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-weight:600;
  font-size:.9rem;
}
.step-num{
  width:22px;
  height:22px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e2e8f0;
  color:var(--ink);
  font-size:.75rem;
}
.step.is-active{
  border-color:var(--accent-2);
  color:var(--ink);
  box-shadow:0 0 0 4px var(--glow);
}
.step.is-active .step-num{background:var(--accent-2);color:#fff}

.container{max-width:1100px;margin:0 auto;padding:2.5rem 1.5rem}
.section-title{font-family:'Space Grotesk',sans-serif;font-size:1.7rem;text-align:center;margin-bottom:.3rem;color:var(--ink)}
.section-sub{text-align:center;color:var(--muted);margin-bottom:1.8rem}

.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem}
.brand-card{
  background:var(--card);
  padding:1.4rem;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
  position:relative;
  overflow:hidden;
  animation:fadeUp .6s ease both;
}
.brand-card:before{
  content:"";
  position:absolute;
  inset:auto -30% 0 -30%;
  height:120px;
  background:linear-gradient(120deg,rgba(14,165,233,.08),rgba(249,115,22,.08));
  pointer-events:none;
  z-index:0;
}
.brand-card > *{position:relative;z-index:1}
.brand-logo{
  width:56px;
  height:56px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:var(--ink);
  background:#f1f5f9;
  border:1px solid var(--border);
  margin-bottom:.9rem;
}
.brand-card h3{font-family:'Space Grotesk',sans-serif;margin-bottom:.4rem;color:var(--ink)}
.brand-card p{color:var(--muted);font-size:.95rem;margin-bottom:1rem}
.card-actions{display:flex;gap:.6rem;flex-wrap:wrap}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-2);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  padding:.65rem 1.1rem;
  border-radius:999px;
  box-shadow:0 8px 20px rgba(14,165,233,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(14,165,233,.3)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--border);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent-2)}

.pricing-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.4rem;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}
.price-row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 0;
  border-bottom:1px dashed var(--border);
  font-weight:600;
}
.price-row span{color:var(--slate);font-weight:500}
.price-row:last-child{border-bottom:none}

.price-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.1rem;
}
.price-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem 1.2rem;
  display:flex;
  align-items:center;
  gap:1rem;
  box-shadow:0 10px 22px rgba(15,23,42,.05);
}
.price-icon{
  width:44px;
  height:44px;
  border:2px solid #ef4444;
  border-radius:12px;
  position:relative;
  flex:0 0 auto;
}
.price-icon.screen:after{
  content:"";
  position:absolute;
  inset:7px;
  border:2px solid #ef4444;
  border-radius:6px;
}
.price-icon.camera{
  border-radius:50%;
}
.price-icon.camera:after{
  content:"";
  position:absolute;
  inset:9px;
  border:2px solid #ef4444;
  border-radius:50%;
}
.price-icon.battery{
  border-radius:6px;
}
.price-icon.battery:after{
  content:"";
  position:absolute;
  inset:8px 12px 8px 8px;
  background:#ef4444;
  border-radius:3px;
}
.price-info h3{font-size:1rem;color:var(--ink);margin-bottom:.2rem}
.price-label{font-size:.85rem;color:#ef4444}
.price-values{margin-left:auto;text-align:right}
.price-main{font-weight:700;color:var(--ink)}
.price-student{font-weight:600;color:#ef4444;font-size:.95rem}
.price-note{text-align:center;color:var(--muted);margin-top:1.2rem}


.note{color:var(--muted);margin-top:1rem;text-align:center}
.site-footer{
  background:#0b1120;
  color:#cbd5f5;
  text-align:center;
  padding:1.4rem 1rem;
  margin-top:2rem;
}
.site-footer a{color:#f97316;text-decoration:none;font-weight:600}
.site-footer a:hover{text-decoration:underline}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:768px){
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--dark);
    flex-direction:column;padding:1rem;border-top:1px solid rgba(255,255,255,0.1);}
  nav.active{display:flex;}
  nav a{margin:0.5rem 0;}
  .menu-toggle{display:block;}
  .menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
  .menu-toggle.active span:nth-child(2){opacity:0;}
  .menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-6px);}
  .hero-title{font-size:2rem}
  .steps{gap:.5rem}
}