/* css/style.css - Cleaned & merged modern theme for SpyPhoneHub */
:root{
  --bg:#070b16;
  --panel:#0b1626;
  --card:#0f1b2b;
  --primary:#6b8cff;
  --primary-600:#3657f0;
  --accent:#ff6b6b;
  --muted:#9fb0d3;
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
  --container:1100px;
  --brand:#0b63ff;
  --brand-muted:#6b7280;
  --card-contrast:#fff;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #e6eef8;
  font-size:16px;
}

/* base */
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  padding:0;
  background:
    radial-gradient(800px 400px at 10% 5%, rgba(107,140,255,0.08), transparent 8%),
    linear-gradient(180deg,#061022,#071226);
  color:var(--muted);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--container);margin:0 auto;padding:22px}

/* header */
.site-header{
  position:sticky;
  top:0;
  background:rgba(2,6,12,0.6);
  backdrop-filter: blur(6px);
  padding:12px 0;
  z-index:60;
  border-bottom:1px solid rgba(255,255,255,0.02)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-logo{height:42px;width:42px;display:inline-block}
.brand-name{font-weight:700;color:#eaf1ff}
.nav-toggle{display:none;background:transparent;border:0;color:var(--muted)}
.main-nav{display:flex;gap:14px;align-items:center}
.main-nav a{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:8px}
.main-nav a:hover{color:var(--primary);background:rgba(107,140,255,0.06)}

/* Buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:700}
.large{padding:14px 22px}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary-600));color:#fff;box-shadow:0 10px 40px rgba(54,87,240,0.14)}
.btn-outline{border:1px solid rgba(255,255,255,0.06);color:var(--muted);background:transparent}
.btn-ghost{background:transparent;color:var(--primary);border-radius:8px;padding:8px 12px}
.nav-cta{background:linear-gradient(90deg,var(--primary),var(--primary-600));color:#fff;padding:8px 12px;border-radius:10px}

/* HERO */
.hero-modern{padding:48px 0}
.hero-inner{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
.kicker{color:var(--primary);font-weight:700;margin-bottom:8px}
.hero-left h1{font-size:28px;line-height:1.05;color:#eaf1ff;margin:0 0 10px}
.lead{color:var(--muted);margin:0 0 18px;max-width:640px}
.hero-actions{display:flex;gap:12px;margin-bottom:14px}
.trust-row{display:flex;gap:12px;flex-wrap:wrap}
.trust-item{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:8px 12px;border-radius:10px;color:var(--muted);font-weight:600}

/* hero right */
.hero-right{display:flex;gap:12px;flex-direction:column;align-items:center}
.hero-card{width:320px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#0c1a2b,#0a1624);box-shadow:0 30px 80px rgba(10,30,80,0.45);position:relative}
.hero-card img{width:100%;height:180px;object-fit:cover;display:block}
.hero-card-info{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,0.06);padding:8px 10px;border-radius:10px;color:#fff;font-weight:700}
.tag.now{background:linear-gradient(90deg,var(--primary),var(--primary-600));padding:6px 8px;border-radius:8px;color:#fff;margin-right:8px;font-weight:800}

/* feature highlights small */
.feature-highlights .fh{background:linear-gradient(90deg,#21365f,#1e3a6d);padding:10px 18px;border-radius:12px;color:#dfeeff;margin-top:12px;font-weight:700}

/* sections */
.section{padding:36px 0}
.section-title{font-size:20px;color:#eaf1ff;margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 18px}

/* features grid */
.features-grid.improved{display:grid;grid-template-columns:1fr;gap:14px}
.feature-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:16px;border-radius:12px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 20px 60px rgba(8,20,40,0.35)}
.feature-icon{min-width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff}

/* pricing */
.bg-gradient{background:linear-gradient(180deg,transparent, rgba(255,255,255,0.01));padding-top:10px}
.pricing-grid{display:grid;grid-template-columns:1fr;gap:16px}
.price-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:14px;box-shadow:0 30px 80px rgba(8,20,40,0.3);text-align:center}
.price-card.featured{border:1px solid rgba(107,140,255,0.12);transform:translateY(-8px)}
.price-head{font-weight:700;color:#cfe0ff}
.price-amount{font-size:22px;color:var(--primary);margin:8px 0}
.badge{position:absolute;background:linear-gradient(90deg,var(--primary),var(--accent));padding:6px 10px;border-radius:12px;color:#fff;font-weight:800;margin-top:-12px}

/* testimonials */
.testimonials-grid{display:grid;grid-template-columns:1fr;gap:14px}
.testimonial{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));Padding:18px;border-radius:12px;font-style:italic;color:#dfeeff}

/* footer */
.site-footer{padding:28px 0;background:transparent;border-top:1px solid rgba(255,255,255,0.02)}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.footer-left strong{color:#eaf1ff}

/* action grid (default) */
.action-grid{display:flex;gap:8px;overflow-x:auto;padding:12px 0;margin-top:12px}
.action-item{min-width:92px;background:linear-gradient(180deg,#fff0,#ffffff0.02);padding:12px;border-radius:12px;text-align:center;color:var(--muted);text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,0.06)}
.action-ico{font-size:22px;margin-bottom:6px}

/* map */
.dashboard-map{width:100%;height:300px;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.12);margin-top:8px;overflow:hidden;position:relative;z-index:1}
.leaflet-popup-content-wrapper{border-radius:12px !important;padding:12px !important}
.leaflet-popup-content{font-size:14px;color:#08233a}

/* popup card style example */
.map-popup-card{background:#fff;padding:10px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.12);max-width:320px}
.map-popup-card .address{font-weight:700;color:#0b2545}
.map-popup-card .when{font-size:12px;color:#6b7280;margin-top:6px}

/* cards row (horizontal scroll) */
.cards-row{display:flex;gap:12px;overflow-x:auto;padding:14px 0}
.stat-card{min-width:260px;background:linear-gradient(180deg,#fff,#fbfdff);padding:14px;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.06)}
.stat-list{margin-top:10px}
.stat-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed rgba(0,0,0,0.04)}
.photo-thumb{width:80px;height:80px;object-fit:cover;border-radius:8px}

/* responsive layout rules */
@media(min-width:900px){
  .hero-inner{grid-template-columns:1fr 420px}
  .features-grid.improved{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:repeat(3,1fr)}
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-map{height:420px}
  .action-grid{flex-wrap:wrap}
}

/* mobile nav */
@media(max-width:899px){
  .nav-toggle{display:inline-block}
  .main-nav{display:none;position:fixed;right:16px;top:64px;background:linear-gradient(180deg,#041022,#071226);padding:12px;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.6)}
  .main-nav.show{display:flex;flex-direction:column;gap:8px}
  .main-nav a{display:block;padding:10px 12px;color:var(--muted);border-radius:8px}
  .main-nav a:hover{background:rgba(255,255,255,0.02);color:var(--primary)}
  @keyframes navFade { from { opacity: 0; transform: translateY(-6px); } to   { opacity: 1; transform: translateY(0); } }
}

/* action-grid-circle (rounded icon grid) */
.action-grid-circle{display:flex;gap:22px;align-items:flex-start;overflow-x:auto;padding:10px 0;-webkit-overflow-scrolling:touch}
.action-grid-circle .action-item{display:flex;flex-direction:column;align-items:center;min-width:110px;text-decoration:none;color:var(--muted);text-align:center}
.action-circle{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,0.25);margin-bottom:10px}
.action-label{font-weight:600;color:#0b2545;font-size:15px;line-height:1.1}


/* Action grid labels – brighter & readable */
.action-grid-circle .action-item .action-label{
  color:#ffffff;           /* pure white */
  font-weight:700;
  opacity:1;               /* make sure not faded */
  text-shadow:0 2px 8px rgba(0,0,0,.35); /* contrast on dark bg */
}


/* gradients for circles */
.bg-grad-purple{ background: linear-gradient(135deg,#7c4dff,#9b6bff); }
.bg-grad-pink{ background: linear-gradient(135deg,#ff7a88,#ff9aa8); }
.bg-grad-green{ background: linear-gradient(135deg,#00c853,#00e676); }
.bg-grad-blue{ background: linear-gradient(135deg,#40a9ff,#4cc9ff); }
.bg-grad-orange{ background: linear-gradient(135deg,#ff8a00,#ffb86b); }
.bg-grad-violet{ background: linear-gradient(135deg,#b388ff,#d6b3ff); }

/* overlay & content cards (map overlap) */
.dashboard-map{position:relative;z-index:1;margin-top:12px;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.12)}
.content-overlay{position:relative;z-index:2;margin-top:-60px;padding-top:18px;pointer-events:auto}
@media (max-width:420px){ .content-overlay{ margin-top:-44px } .dashboard-map{height:240px!important} }

/* cards & stat row (duplicate-safe) */
.cards-row{display:flex;gap:12px;overflow-x:auto;padding:14px 0}
.stat-card{min-width:260px;background:linear-gradient(180deg,#fff,#fbfdff);padding:14px;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.06)}
.stat-list{margin-top:10px}
.stat-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed rgba(0,0,0,0.04)}
.photo-thumb{width:80px;height:80px;object-fit:cover;border-radius:8px}

/* content cards / tables / sms */
.content-card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 18px 50px rgba(5,15,40,0.06);margin:0 0 18px 0;color:#0b2545}
.table-wrap{overflow-x:auto;border-radius:10px}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table thead th{text-align:left;padding:10px 8px;color:#334155;font-weight:700}
.table tbody td{padding:10px 8px;border-top:1px solid rgba(15,23,42,0.04);color:#223049}
.sms-list{display:flex;flex-direction:column;gap:10px}
.sms-item{background:#fbfdff;padding:10px;border-radius:10px;box-shadow:0 8px 20px rgba(6,20,44,0.04)}
.small{color:var(--muted);font-size:13px}
.muted{color:#475569;font-size:14px}
audio{width:100%;max-width:100%;outline:none;margin-top:6px}

/* final tiny tweaks */
.avatar-sm{width:32px;height:32px;border-radius:50%}
.device-name{font-weight:700;color:#eaf1ff;font-size:18px}
.device-meta{font-size:13px;color:var(--muted)}