/* ==============================================================
   KRAKEN SMS · Landing v2 — cleaner spacing, clearer sections
   ============================================================== */
.landing{
  background:
    radial-gradient(1400px 700px at 100% -10%, rgba(212,162,76,.10), transparent 60%),
    radial-gradient(1200px 700px at -20% 30%, rgba(76,201,240,.08), transparent 60%),
    linear-gradient(180deg,#0A1A2F 0%, #0B1E36 45%, #08152A 100%);
  color:var(--text);
}
.landing .container{max-width:1240px;margin:0 auto;padding:0 40px}
.landing h1,.landing h2,.landing h3,.landing h4{letter-spacing:-.3px}

/* ============ Promo strip ============ */
.promo{
  background:linear-gradient(90deg,#8b6a2f 0%,#D4A24C 30%,#E9BD6C 55%,#D4A24C 80%,#8b6a2f 100%);
  color:#241800;padding:14px 24px;font-weight:600;font-size:13.5px;
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  letter-spacing:.2px;border-bottom:1px solid rgba(0,0,0,.15)
}
.promo .pulse{width:9px;height:9px;border-radius:50%;background:#241800;
  box-shadow:0 0 0 0 rgba(36,24,0,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(36,24,0,.7)}70%{box-shadow:0 0 0 10px rgba(36,24,0,0)}100%{box-shadow:0 0 0 0 rgba(36,24,0,0)}}
.promo-cta{background:#0B1E36;color:#F0D28A !important;padding:8px 18px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.4px;text-decoration:none;transition:.15s}
.promo-cta:hover{transform:translateY(-1px);background:#12294a}

/* ============ Header ============ */
.site-header{position:sticky;top:0;z-index:50;
  background:rgba(8,21,42,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(212,162,76,.18);
  box-shadow:0 4px 30px rgba(0,0,0,.35)}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;gap:24px;max-width:1240px;margin:0 auto}
.landing .brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.landing .brand strong{color:var(--text);font-size:16px;letter-spacing:1.4px;font-weight:700}
.site-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
.site-nav a{color:#C8D2E7;text-decoration:none;padding:10px 16px;border-radius:8px;
  font-size:14px;transition:.15s;font-weight:500}
.site-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.site-nav .tg{color:#7AD9F5}
.btn-login{padding:11px 22px;border-radius:999px;font-weight:700;letter-spacing:.3px;flex-shrink:0}

/* ============ Section wrapper (breathing room) ============ */
.section{padding:100px 40px;position:relative}
.section + .section{border-top:1px solid rgba(255,255,255,.04)}
.section-head{text-align:center;max-width:720px;margin:0 auto 56px}
.section-head .hero-badge{margin:0 0 18px}
.section-head h2{font-size:clamp(26px,3vw,38px);margin:0 0 14px;line-height:1.15;color:#F1F5FF}
.section-head p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0}

/* ============ Hero ============ */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;
  padding:80px 40px 60px;align-items:center;max-width:1240px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
  background:rgba(76,201,240,.10);border:1px solid rgba(76,201,240,.28);color:#7AD9F5;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600}
.hero-content > .hero-badge{margin-bottom:22px}
.hero-content h1{
  font-size:clamp(32px, 4.2vw, 56px);line-height:1.06;margin:0 0 22px;font-weight:800;
  color:#F1F5FF
}
.hero-content h1::first-line{color:var(--gold-2)}
.lead{color:#D6DEEE;font-size:17.5px;line-height:1.55;margin:0 0 14px;max-width:600px}
.desc{color:#94A5C2;font-size:14.5px;max-width:600px;line-height:1.75;margin:0 0 0}
.hero-features{list-style:none;padding:0;margin:32px 0 34px;
  display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:580px}
.hero-features li{display:flex;align-items:center;gap:12px;color:#CED8EE;font-size:13.5px;
  padding:12px 14px;border:1px solid rgba(255,255,255,.07);border-radius:12px;
  background:rgba(255,255,255,.02);line-height:1.35}
.hero-features .fi{width:30px;height:30px;border-radius:8px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(212,162,76,.15);color:var(--gold-2);font-weight:700;font-size:14px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.cta-row .btn.big{padding:15px 24px;border-radius:12px;font-size:14.5px;font-weight:600}
.cta-row .btn.primary{box-shadow:0 12px 30px rgba(212,162,76,.28)}

/* ============ Hero panel (SMS mockup) ============ */
.hero-panel{position:relative;background:linear-gradient(180deg,#122E52,#0E2745);
  border:1px solid rgba(212,162,76,.14);border-radius:22px;padding:26px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden}
.hero-panel::before{content:"";position:absolute;top:0;right:0;width:60%;height:60%;
  background:radial-gradient(400px 300px at 100% 0, rgba(212,162,76,.15), transparent 70%);
  pointer-events:none}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.06);position:relative}
.panel-head strong{font-size:14.5px;letter-spacing:.6px;color:#E9EEF7}
.counter{color:var(--gold-2);font-size:30px;font-weight:800;letter-spacing:-.5px;margin-top:8px;line-height:1}
.counter small{display:block;color:var(--muted);font-size:11px;font-weight:400;
  letter-spacing:2px;text-transform:uppercase;margin-top:6px}
.live{display:inline-flex;align-items:center;gap:7px;color:#7CE7B8;font-size:12.5px;font-weight:600;
  padding:5px 11px;background:rgba(61,220,151,.10);border:1px solid rgba(61,220,151,.28);border-radius:999px}
.live .dot{width:7px;height:7px;border-radius:50%;background:#3DDC97;animation:pulse 1.4s infinite}
.msg{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:12px;
  padding:12px 14px;margin-bottom:10px;position:relative;transition:.15s}
.msg:hover{background:rgba(255,255,255,.06);transform:translateX(2px)}
.msg:last-child{margin-bottom:0}
.msg .ml{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);
  margin-bottom:6px;letter-spacing:.4px}
.msg .lbl{color:var(--gold-2);font-weight:700;letter-spacing:.7px;font-size:11px}
.msg p{margin:0;font-size:13px;color:#DCE4F3;line-height:1.5}
.msg.kmp{border-left:3px solid #F7B801}
.msg.rmd{border-left:3px solid #4CC9F0}
.msg.otp{border-left:3px solid #3DDC97}
.msg.not{border-left:3px solid #B084EE}
.msg.inv{border-left:3px solid #EF476F}

/* ============ Stats bar ============ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding:20px 40px 100px;max-width:1240px;margin:0 auto}
.stat-card{display:flex;align-items:center;gap:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px 24px}
.s-icon{width:48px;height:48px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#D4A24C,#8b6a2f);color:#1a1200;font-weight:800;font-size:20px}
.s-value{font-size:22px;font-weight:700;color:var(--gold-2);line-height:1.1}
.s-label{color:var(--muted);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;margin-top:4px}

/* ============ Services ============ */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1240px;margin:0 auto}
.svc{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:26px 22px;transition:.2s}
.svc:hover{transform:translateY(-4px);border-color:rgba(212,162,76,.35);
  background:linear-gradient(180deg,rgba(212,162,76,.06),rgba(212,162,76,.02))}
.svc .si{width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(76,201,240,.10);color:#7AD9F5;font-size:22px;margin-bottom:16px}
.svc h4{margin:0 0 8px;font-size:15px;font-weight:700;color:#F1F5FF}
.svc p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

/* ============ Packages ============ */
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1240px;margin:0 auto}
.pkg{position:relative;background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:32px 24px 26px;transition:.2s}
.pkg:hover{transform:translateY(-6px);border-color:rgba(212,162,76,.3)}
.pkg.featured{border:1px solid var(--gold);
  box-shadow:0 20px 50px rgba(212,162,76,.18),0 0 0 1px rgba(212,162,76,.15) inset}
.pkg-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1200;
  padding:5px 16px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.pkg-name{color:var(--muted);font-size:11.5px;letter-spacing:2px;text-transform:uppercase;font-weight:600}
.pkg-price{color:var(--gold-2);font-size:38px;font-weight:800;margin:12px 0 6px;letter-spacing:-1px;line-height:1}
.pkg-price small{font-size:16px;color:var(--muted);font-weight:500;letter-spacing:0}
.pkg-sms{color:#B9C6E1;font-size:14px;margin-bottom:20px}
.pkg-list{list-style:none;padding:0;margin:0 0 24px;font-size:13.5px;color:#CED8EE;line-height:2.1}
.pkg .btn{width:100%;justify-content:center;text-align:center;
  display:inline-flex;padding:12px;font-weight:600}

/* ============ About ============ */
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;
  align-items:center;max-width:1240px;margin:0 auto}
.about-grid > div:first-child .hero-badge{margin-bottom:18px}
.about-grid h2{font-size:clamp(26px,3vw,36px);margin:0 0 18px;color:#F1F5FF;line-height:1.15}
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:26px;text-align:center}
.mini strong{display:block;font-size:34px;color:var(--gold-2);letter-spacing:-1px;margin-bottom:6px;font-weight:800}
.mini span{color:var(--muted);font-size:13px;letter-spacing:.4px}

/* ============ Contact ============ */
.contact-sec .contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1240px;margin:0 auto}
.contact-card{display:flex;align-items:center;gap:16px;padding:22px;border-radius:16px;
  text-decoration:none;color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);transition:.2s}
.contact-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.07);border-color:rgba(212,162,76,.3)}
.contact-card .ci{width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;font-size:22px;color:#fff}
.contact-card.tg .ci{background:linear-gradient(135deg,#4CC9F0,#3AA0C4)}
.contact-card.wa .ci{background:linear-gradient(135deg,#3DDC97,#1EB973)}
.contact-card.em .ci{background:linear-gradient(135deg,#D4A24C,#8b6a2f);color:#1a1200}
.contact-card.ph .ci{background:linear-gradient(135deg,#B084EE,#7C5CBF)}
.contact-card strong{display:block;font-size:15px;margin-bottom:2px;color:#F1F5FF}
.contact-card small{color:var(--muted);font-size:12.5px}

/* ============ Footer ============ */
.site-footer{background:#050F1F;border-top:1px solid rgba(212,162,76,.15);
  padding:44px 0 24px;margin-top:0}
.footer-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;
  padding:0 40px;max-width:1240px;margin:0 auto}
.footer-inner .brand{margin-bottom:12px}
.footer-inner p.muted{color:var(--muted);font-size:13.5px;margin:0;max-width:400px;line-height:1.6}
.foot-links{display:flex;flex-wrap:wrap;gap:16px 22px;justify-content:flex-end;align-items:center}
.foot-links a{color:#B9C6E1;text-decoration:none;font-size:14px;transition:.15s}
.foot-links a:hover{color:var(--gold-2)}
.copy{text-align:center;color:var(--muted);font-size:12.5px;
  padding:22px 40px 0;border-top:1px solid rgba(255,255,255,.05);margin:28px 0 0}

/* ============ Floating live support ============ */
.live-support{position:fixed;bottom:26px;right:26px;z-index:60;
  display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:999px;
  background:linear-gradient(135deg,#4CC9F0,#3AA0C4);color:#fff;text-decoration:none;
  box-shadow:0 18px 40px rgba(76,201,240,.35);transition:.2s;font-weight:600}
.live-support:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(76,201,240,.5)}
.ls-icon{font-size:20px}
.live-support small{display:block;opacity:.85;font-size:11.5px;font-weight:500;margin-top:1px}

/* ============ Responsive ============ */
@media (max-width: 1100px){
  .svc-grid,.pkg-grid,.contact-sec .contact-grid{grid-template-columns:repeat(2,1fr)}
  .hero{gap:44px}
  .section{padding:80px 40px}
}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr;gap:44px;padding:56px 32px 40px}
  .about-grid{grid-template-columns:1fr;gap:44px}
  .stats{grid-template-columns:1fr;padding:20px 32px 60px}
  .site-nav{display:none}
  .footer-inner{grid-template-columns:1fr;gap:24px}
  .foot-links{justify-content:flex-start}
  .section{padding:60px 32px}
  .landing .container{padding:0 32px}
  .header-inner{padding:14px 24px;gap:12px}
  .btn-login{padding:9px 16px;font-size:13px}
  .hero-features{grid-template-columns:1fr}
}

/* ==============================================================
   Bulk progress bar (bulk-progress.php)
   ============================================================== */
.progress-wrap{background:rgba(255,255,255,.04);border-radius:999px;height:22px;
  overflow:hidden;border:1px solid var(--line);margin:12px 0}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transition:width .35s ease;display:flex;align-items:center;justify-content:center;
  color:#1a1200;font-weight:700;font-size:12px}
.job-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.job-stat{background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:12px;padding:14px;text-align:center}
.job-stat .n{font-size:26px;font-weight:700}
.job-stat .l{color:var(--muted);font-size:12px;letter-spacing:.5px;text-transform:uppercase}