/* --- Base & Tokens --- */
:root{
  --bg: #0b0b0c;
  --panel: #111216;
  --panel-alt: #14161b;
  --text: #e9ecf1;
  --muted: #b9c0cc;
  --accent: #4f8cff;       /* primary */
  --accent-2: #20d6b5;     /* secondary */
  --border: #222632;
  --radius: 16px;
  --shadow: 0 8px 28px rgba(0,0,0,.25);
  --container: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:linear-gradient(180deg, #0a0b0c 0%, #0e1014 100%);
  line-height:1.6;
}

/* utilities */
.container{max-width:var(--container); margin-inline:auto; padding: 0 20px}
.grid{display:grid; gap:22px}
.section{padding:72px 0}
.section--alt{background:var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section__lead{color:var(--muted); margin-top:-6px}

h1,h2,h3{line-height:1.2; margin:0 0 10px}
h1{font-size:clamp(32px, 5vw, 46px)}
h2{font-size:clamp(24px, 3.6vw, 32px); margin-bottom:18px}
h3{font-size:20px}

/* buttons */
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  box-shadow:var(--shadow);
}
.btn:hover{filter:brightness(1.08)}
.btn--outline{
  background:transparent; border:1px solid var(--accent); color:var(--text)
}
.btn--ghost{
  background:transparent; border:1px dashed var(--border); color:var(--muted)
}
.btn--sm{padding:10px 14px; font-size:14px}

/* header */
.header{position:sticky; top:0; z-index:50; background:rgba(10,12,16,.72); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid rgba(255,255,255,.04)}
.header__row{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700}
.logo img{height:32px; width:auto}

.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--text); text-decoration:none; opacity:.92}
.nav a:hover{opacity:1}

.nav-toggle{display:none; background:none; border:0; color:var(--text); padding:8px; border-radius:10px}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; clip:rect(0,0,0,0); overflow:hidden}

/* hero */
.hero{padding:72px 0 36px; border-bottom:1px solid var(--border)}
.hero__grid{display:grid; gap:28px; grid-template-columns: 1.05fr .95fr; align-items:center}
.hero__copy p{color:var(--muted); margin:10px 0 18px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.hero__badges{display:flex; gap:12px; padding:0; margin:18px 0 0; list-style:none; flex-wrap:wrap}
.hero__badges li{background:var(--panel); border:1px solid var(--border); padding:8px 12px; border-radius:999px; color:var(--muted)}
.hero__image img{width:100%; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow)}
.accent{color:var(--accent-2)}

/* cards */
.cards{grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) )}
.card{
  background:var(--panel-alt); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); min-height:150px
}

/* CTA box */
.cta-box{
  margin-top:24px; background:linear-gradient(180deg, rgba(79,140,255,.1), rgba(32,214,181,.1));
  border:1px solid var(--border); border-radius:var(--radius); padding:18px
}
.cta-box__actions{display:flex; gap:12px; flex-wrap:wrap}

/* Phones for sale */
.phone-grid{grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) )}
.phone-card{
  background:var(--panel-alt); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden
}
.phone-card img{width:100%; height:180px; object-fit:cover}
.phone-card h3{padding:14px 14px 0}
.phone-card ul{padding:0 18px 18px 30px; margin:8px 0}

/* Brand logos */
.phone-card img.brand-logo {
  width: auto;
  max-width: 100px;
  height: 180px;
  object-fit:contain;
  display:block;
  margin: 0 auto 12px;
  margin-top: 20px;
}
/* Prepaid badges */
.carrier-badges{display:flex; gap:10px; list-style:none; padding:0; margin:14px 0 24px; flex-wrap:wrap}
.badge{background:#0e131a; border:1px solid var(--border); padding:8px 12px; border-radius:999px}

/* Steps */
.steps{display:grid; grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) ); gap:18px}
.step{background:var(--panel-alt); border:1px solid var(--border); border-radius:var(--radius); padding:18px}
.step__num{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:700; margin-bottom:8px
}

/* Features */
.features{grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) )}
.feature{background:var(--panel-alt); border:1px solid var(--border); border-radius:var(--radius); padding:18px}

/* Contact */
.section--contact{background:var(--panel); border-top:1px solid var(--border)}
.contact__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:22px}
.contact-list{list-style:none; padding:0; margin:0 0 16px}
.contact-list a{color:#fff; text-underline-offset:2px}
.map iframe{width:100%; height:320px; border:0; border-radius:var(--radius); box-shadow:var(--shadow)}
.contact-buttons{display:flex; gap:12px; flex-wrap:wrap}

/* Footer */
.footer{border-top:1px solid var(--border); background:#0b0c10}
.footer__row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0}
.footer nav a{color:var(--muted); margin-left:12px; text-decoration:none}
.footer nav a:hover{color:#fff}

/* Responsive */
@media (max-width: 900px){
  .hero__grid, .contact__grid{grid-template-columns: 1fr}
  .nav{display:none; position:absolute; top:64px; right:20px; left:20px; background:#0e1116; border:1px solid var(--border); border-radius:12px; padding:12px; flex-direction:column}
  .nav a{padding:8px 10px}
  .nav-toggle{display:block}
  .nav.open{display:flex}
}

/* --- Mobile polish --- */
@media (max-width: 600px){
  /* tighter sections + bigger, easier taps */
  .section{padding:56px 0}
  .btn{padding:14px 18px; font-size:16px}

  /* header */
  .header__row{height:60px}
  .logo img{height:24px}

  /* hero */
  .hero{padding:56px 0 24px}
  .hero__copy h1{font-size:32px}
  .hero__badges li{font-size:14px}

  /* cards & grids become single column */
  .cards, .phone-grid, .features, .steps{grid-template-columns: 1fr}

  /* logo cards: keep logos visible but not huge */
  .logo-card .brand-logo{height:64px}

  /* contact/map */
  .map iframe{height:240px}
  .contact-buttons .btn{flex:1}     /* full-width buttons on mobile */
}

/* very small phones */
@media (max-width: 380px){
  .btn{font-size:15px}
  .hero__cta{gap:10px}
  .hero__badges{gap:8px}
}