/* public/assets/css/theme.css
   Big Data Broadband - Theme (Bootstrap 5 + Alpine friendly)
*/

:root{
  --bdb-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --bdb-primary: #0b4aa2;
  --bdb-primary-2: #0ea5b7;
  --bdb-ink: #0b1220;
  --bdb-muted: #5b667a;

  --bdb-bg: #f6f8fc;
  --bdb-card: #ffffff;
  --bdb-border: rgba(15, 23, 42, 0.10);

  --bdb-radius: 18px;
  --bdb-radius-lg: 26px;

  --bdb-shadow: 0 14px 40px rgba(2, 6, 23, .10);
  --bdb-shadow-soft: 0 10px 28px rgba(2, 6, 23, .08);
  --bdb-shadow-xs: 0 6px 16px rgba(2, 6, 23, .06);

  --bdb-container-pad: 16px;
}

html, body { height: 100%; }

/* Base */
.bdb-body{
  font-family: var(--bdb-font);
  color: var(--bdb-ink);
  background: var(--bdb-bg);
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
}

a{ text-decoration: none; }
a:hover{ text-decoration: none; }

/* ---------- Bootstrap container padding fix (mobile edge issue) ----------
   Sometimes hosting CSS or custom resets kill container padding.
   This enforces safe padding on small screens everywhere.
*/
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl{
  padding-left: var(--bdb-container-pad) !important;
  padding-right: var(--bdb-container-pad) !important;
}

/* ===== Header Enhancements ===== */
.bdb-topbar{
  background: linear-gradient(135deg, var(--bdb-primary), var(--bdb-primary-2));
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.bdb-topbar i{ opacity: .95; }
.bdb-toplink{
  color: rgba(255,255,255,.92);
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bdb-toplink:hover{ color:#fff; text-decoration: underline; }
.bdb-topbtn{
  border-color: rgba(255,255,255,.30) !important;
  color: #fff !important;
  font-weight: 800;
  border-radius: 12px;
}
.bdb-topbtn:hover{
  background: rgba(255,255,255,.12) !important;
}
.bdb-topbtn2{
  font-weight: 900;
  border-radius: 12px;
}

/* More premium nav links */
.bdb-navlink{
  border-radius: 14px;
  padding: .55rem .9rem !important;
}
.bdb-navlink.active{
  background: rgba(11, 74, 162, .10);
}

/* Mobile action block */
.bdb-mobile-actions .btn{
  border-radius: 14px;
}

/* Typography helpers */
.bdb-title{
  font-weight: 900;
  letter-spacing: -0.04em;
}
.bdb-subtitle{
  color: rgba(2,6,23,.70);
  line-height: 1.6;
}

/* Header / Navbar */
.bdb-header{
  backdrop-filter: saturate(180%) blur(12px);
}
.bdb-navbar{
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--bdb-border);
  transition: box-shadow .18s ease, background .18s ease;
}
body.bdb-scrolled .bdb-navbar{
  box-shadow: var(--bdb-shadow-xs);
  background: rgba(255,255,255,.96);
}

.bdb-logo{
  width: 86px;     /* your logo is wide; keep it */
  height: 60px;
  object-fit: contain;
}
.bdb-brand-name{
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 15px;
  line-height: 1.15;
}
.bdb-brand-sub{
  font-size: 12px;
  color: var(--bdb-muted);
  margin-top: 2px;
}

.navbar .nav-link{
  font-weight: 700;
  color: rgba(2, 6, 23, .78);
  padding: .55rem .9rem;
  border-radius: 12px;
}
.navbar .nav-link:hover{
  color: rgba(2, 6, 23, 1);
  background: rgba(11, 74, 162, .06);
}
.navbar .nav-link.active{
  color: var(--bdb-primary);
  background: rgba(11, 74, 162, .08);
}

/* Mobile menu */
.bdb-mobile-menu{
  background: #fff;
  border: 1px solid var(--bdb-border);
  border-radius: var(--bdb-radius);
  padding: 12px;
  box-shadow: var(--bdb-shadow-soft);
}
.bdb-mobile-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  border-radius: 12px;
  color: rgba(2, 6, 23, .85);
  font-weight: 750;
}
.bdb-mobile-link:hover{
  background: rgba(11, 74, 162, .06);
}
.bdb-mobile-link.active{
  background: rgba(11, 74, 162, .08);
  color: var(--bdb-primary);
}

/* Buttons */
.btn-bdb-primary{
  border: 0;
  color: #fff;
  font-weight: 850;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bdb-primary), var(--bdb-primary-2));
  box-shadow: 0 10px 22px rgba(11, 74, 162, .18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-bdb-primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 14px 28px rgba(11, 74, 162, .22);
  color: #fff;
}

.btn-bdb-soft{
  border: 1px solid rgba(11, 74, 162, .22);
  background: rgba(11, 74, 162, .06);
  color: rgba(2,6,23,.92);
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 14px;
  transition: transform .15s ease, background .15s ease;
}
.btn-bdb-soft:hover{
  background: rgba(11, 74, 162, .10);
  transform: translateY(-1px);
}

/* Sections */
.bdb-section{
  padding: 56px 0;
}

/* Hero */
.bdb-hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--bdb-border);
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(14, 165, 183, .20) 0%, rgba(14, 165, 183, 0) 55%),
    radial-gradient(900px 420px at 95% 20%, rgba(11, 74, 162, .20) 0%, rgba(11, 74, 162, 0) 55%),
    linear-gradient(180deg, #ffffff, #f3f7ff);
}
.bdb-hero .bdb-hero-inner{
  padding: 52px 0 40px;
}
@media (max-width: 576px){
  .bdb-hero .bdb-hero-inner{
    padding: 34px 0 26px; /* tighter on mobile */
  }
}

.bdb-kicker{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid rgba(11, 74, 162, .18);
  background: rgba(11, 74, 162, .06);
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(2,6,23,.90);
}
.bdb-hero-title{
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 1.05;
  font-size: clamp(30px, 4.3vw, 54px);
  margin: 14px 0 10px;
}
.bdb-hero-sub{
  color: rgba(2,6,23,.70);
  font-size: 16px;
  line-height: 1.65;
  max-width: 56ch;
}

.bdb-hero-pills{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bdb-pill{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(2, 6, 23, .10);
  background: rgba(255,255,255,.72);
  font-weight: 750;
  font-size: 13px;
  color: rgba(2, 6, 23, .82);
}

/* Cards */
.bdb-card{
  background: var(--bdb-card);
  border: 1px solid var(--bdb-border);
  border-radius: var(--bdb-radius);
  box-shadow: var(--bdb-shadow-soft);
}
.bdb-card-pad{
  padding: 18px;
}
.bdb-card-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.bdb-muted{
  color: var(--bdb-muted);
}

/* Plan cards */
.bdb-plan{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: linear-gradient(180deg, #0a3e8f 0%, #0b2f6b 65%, #0b2a5f 100%);
  box-shadow: 0 18px 44px rgba(2,6,23,.18);
  color: #fff;
  padding: 18px;
  min-height: 170px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bdb-plan:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 54px rgba(2,6,23,.22);
}
.bdb-plan::before{
  content: "";
  position: absolute;
  inset: -40px -40px auto auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 30% 30%, rgba(14,165,183,.35), rgba(14,165,183,0) 60%);
  transform: rotate(22deg);
}
.bdb-plan small{
  opacity: .82;
  font-weight: 750;
}
.bdb-plan-speed{
  font-weight: 950;
  letter-spacing: -0.03em;
  font-size: 28px;
  margin-top: 8px;
}
.bdb-plan-price{
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 26px;
  margin-top: 12px;
}
.bdb-plan-meta{
  opacity: .86;
  font-weight: 750;
  margin-top: 2px;
}

/* Feature cards */
.bdb-feature{
  border-radius: 20px;
  border: 1px solid var(--bdb-border);
  background: rgba(255,255,255,.88);
  box-shadow: var(--bdb-shadow-soft);
  padding: 16px;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bdb-feature:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
}
.bdb-feature .icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 74, 162, .08);
  border: 1px solid rgba(11, 74, 162, .12);
  margin-bottom: 10px;
}
.bdb-feature h5{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.bdb-feature p{
  margin: 0;
  color: rgba(2,6,23,.68);
  line-height: 1.6;
}

/* Form */
.bdb-form{
  border-radius: 22px;
  border: 1px solid var(--bdb-border);
  background: rgba(255,255,255,.94);
  box-shadow: var(--bdb-shadow);
  padding: 18px;
}
.bdb-form .form-label{
  font-weight: 800;
  color: rgba(2,6,23,.82);
}
.bdb-form .form-control, .bdb-form .form-select{
  border-radius: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(15, 23, 42, .12);
}
.bdb-form .form-control:focus, .bdb-form .form-select:focus{
  border-color: rgba(11,74,162,.35);
  box-shadow: 0 0 0 .20rem rgba(11,74,162,.12);
}

/* Sticky CTA (mobile bottom bar) */
.bdb-sticky-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 1040;
  pointer-events: none;
}
.bdb-sticky-inner{
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 10px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--bdb-border);
  border-radius: 18px;
  padding: 10px;
  box-shadow: var(--bdb-shadow);
}
.bdb-sticky-btn{
  border-radius: 14px;
  padding: 10px 10px;
  text-align: center;
  display: grid;
  gap: 4px;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, .10);
  background: rgba(2,6,23,.02);
  color: rgba(2,6,23,.90);
  font-weight: 900;
  font-size: 12px;
}
.bdb-sticky-btn i{ font-size: 16px; }
.bdb-sticky-main{
  border: 0;
  background: linear-gradient(135deg, var(--bdb-primary), var(--bdb-primary-2));
  color: #fff;
}

/* Footer (base) */
.bdb-footer{
  background:
    radial-gradient(900px 460px at 15% 10%, rgba(14,165,183,.22) 0%, rgba(14,165,183,0) 60%),
    radial-gradient(900px 460px at 95% 20%, rgba(11,74,162,.22) 0%, rgba(11,74,162,0) 60%),
    linear-gradient(180deg, #0b1220, #060b14);
  color: rgba(255,255,255,.88);
  border-top: 1px solid rgba(255,255,255,.08);
}
.bdb-footer a{
  color: rgba(255,255,255,.76);
}
.bdb-footer a:hover{
  color: #fff;
}
.bdb-footer .bdb-footer-title{
  font-weight: 950;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: #fff;
}
.bdb-footer .bdb-footer-text{
  color: rgba(255,255,255,.72);
  line-height: 1.65;
}
.bdb-footer-links a{
  display: inline-block;
  padding: 7px 0;
  color: rgba(255,255,255,.80);
  font-weight: 750;
}
.bdb-footer-links a:hover{
  color: #fff;
}
.bdb-contact-line{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  color: rgba(255,255,255,.78);
  margin-bottom: 10px;
}
.bdb-contact-line i{
  font-size: 18px;
  margin-top: 2px;
}

/* Small tweaks */
.bdb-divider{
  height: 1px;
  background: var(--bdb-border);
}

/* ADD THESE at the END of public/assets/css/theme.css */

/* ===== Home: premium hero slider ===== */
.bdb-gradient-text{
  background: linear-gradient(135deg,var(--bdb-primary),var(--bdb-primary-2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.bdb-hero-slider{
  padding-bottom: 10px;
}
.bdb-hero-bottomfade{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 44px;
  background: linear-gradient(180deg, rgba(246,248,252,0), rgba(246,248,252,1));
  pointer-events:none;
}

.bdb-hero-trust{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 768px){
  .bdb-hero-trust{ grid-template-columns: repeat(3, 1fr); }
}
.bdb-trust-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  box-shadow: var(--bdb-shadow-xs);
}
.bdb-trust-item i{
  width: 38px; height: 38px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(11,74,162,.08);
  border: 1px solid rgba(11,74,162,.12);
  color: rgba(11,74,162,.95);
  font-size: 18px;
}

/* Hero carousel card */
.bdb-carousel{
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--bdb-shadow);
  background: #fff;
}
.bdb-hero-media{
  position: relative;
  height: 360px;
}
@media (max-width: 576px){
  .bdb-hero-media{ height: 280px; }
}
.bdb-hero-media img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.bdb-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,.06), rgba(2,6,23,.52));
}
.bdb-hero-media-overlay{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  color: #fff;
}
.bdb-media-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.12);
  font-weight: 900;
  font-size: 12px;
}
.bdb-media-title{
  font-weight: 950;
  letter-spacing: -0.03em;
  font-size: 22px;
  margin-top: 10px;
}
.bdb-media-sub{
  opacity: .92;
  margin-top: 2px;
  font-weight: 700;
}

/* mini CTA below hero carousel */
.bdb-hero-cta-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--bdb-shadow-soft);
  padding: 14px;
}

/* ===== Power factors ===== */
.bdb-factor{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.88);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--bdb-shadow-soft);
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bdb-factor:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(2,6,23,.12);
}
.bdb-factor-ic{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(11,74,162,.10);
  border: 1px solid rgba(11,74,162,.14);
  margin-bottom: 10px;
}
.bdb-factor-ic i{ font-size: 20px; color: rgba(11,74,162,.95); }
.bdb-factor-title{
  font-weight: 950;
  letter-spacing: -0.02em;
}
.bdb-factor-text{
  margin-top: 6px;
  color: rgba(2,6,23,.68);
  line-height: 1.6;
  font-weight: 600;
}

/* ===== Split sections with image ===== */
.bdb-split-media{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--bdb-shadow);
  background: #fff;
}
.bdb-split-media img{
  width: 100%;
  height: 430px;
  object-fit: cover;
}
@media (max-width: 576px){
  .bdb-split-media img{ height: 300px; }
}
.bdb-split-float{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--bdb-shadow-soft);
}
.bdb-split-float-ic{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(11,74,162,.10);
  border: 1px solid rgba(11,74,162,.14);
}
.bdb-split-float-ic i{ font-size: 18px; color: rgba(11,74,162,.95); }

/* mini cards inside split content */
.bdb-mini-card{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.82);
  box-shadow: var(--bdb-shadow-xs);
}
.bdb-mini-card i{
  width: 38px; height: 38px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(11,74,162,.08);
  border: 1px solid rgba(11,74,162,.12);
  color: rgba(11,74,162,.95);
}

/* Section head layout */
.bdb-section-head{
  display:flex;
  flex-direction:column;
  gap: 12px;
  justify-content:space-between;
}
@media (min-width: 768px){
  .bdb-section-head{ flex-direction:row; align-items:flex-end; }
}

/* CTA surface (form section) */
.bdb-cta-surface{
  border-radius: 26px;
  border: 1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(900px 420px at 12% 5%, rgba(14,165,183,.14) 0%, rgba(14,165,183,0) 60%),
    radial-gradient(900px 420px at 95% 20%, rgba(11,74,162,.14) 0%, rgba(11,74,162,0) 60%),
    rgba(255,255,255,.88);
  box-shadow: var(--bdb-shadow);
  padding: 18px;
}
.bdb-cta-points{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
@media (min-width: 768px){
  .bdb-cta-points{ grid-template-columns: 1fr 1fr; }
}
.bdb-cta-point{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  font-weight: 800;
  color: rgba(2,6,23,.84);
}
.bdb-cta-point i{ color: rgba(14,165,183,.95); }

/* ===== Alerts (if not already in your components.css) ===== */
.bdb-alert{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--bdb-shadow-soft);
  background: rgba(255,255,255,.92);
  position: relative;
}
.bdb-alert-ic{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
  font-size: 20px;
}
.bdb-alert-title{ font-weight: 950; letter-spacing: -.02em; }
.bdb-alert-text{ color: rgba(2,6,23,.70); font-weight: 650; line-height:1.55; }
.bdb-alert-close{
  position:absolute;
  right: 12px;
  top: 12px;
  color: rgba(2,6,23,.50);
}
.bdb-alert-close:hover{ color: rgba(2,6,23,.80); }
.bdb-alert-success .bdb-alert-ic{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.20); color: rgba(16,185,129,.95); }
.bdb-alert-danger .bdb-alert-ic{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.20); color: rgba(239,68,68,.95); }