/* Premium Light UI */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{--brand:#0f766e;--brand-700:#115e59;--brand-900:#042f2e;--ink:#0b1220;--muted:#5b6b7f;--bg:#f5f7fb;--surface:#ffffff;--border:rgba(11,18,32,.10);--border2:rgba(11,18,32,.06);--radius:16px;--radius2:22px;--shadow:0 18px 48px rgba(11,18,32,.10);--shadow-sm:0 10px 28px rgba(11,18,32,.08)}
html{font-size:16px}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
.navbar.bg-white{background:rgba(255,255,255,.92)!important;border-bottom:1px solid var(--border2)}
.brand-dot{width:10px;height:10px;border-radius:999px;background:var(--brand);box-shadow:0 0 0 6px rgba(20,184,166,.12);display:inline-block}
.btn{border-radius:12px;font-weight:600}
.btn-primary{background:var(--brand);border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-700);border-color:var(--brand-700)}
.card{border-radius:var(--radius2);border:1px solid var(--border2);box-shadow:none}
.card-glow{border:1px solid var(--border2);box-shadow:none;border-radius:var(--radius2)}
.surface{background:var(--surface);border:1px solid var(--border2);border-radius:24px;box-shadow:0 12px 30px rgba(2,6,23,.06)}
.text-muted{color:var(--muted)!important}
.form-control,.form-select{border-radius:12px;border-color:rgba(15,23,42,.14)}
.form-control:focus,.form-select:focus{border-color:rgba(15,118,110,.50);box-shadow:0 0 0 .25rem rgba(15,118,110,.12)}
.table-modern{border:1px solid var(--border2);border-radius:var(--radius2);overflow:hidden}
.table-modern thead th{background:rgba(15,23,42,.02);color:rgba(15,23,42,.72);font-weight:600}
.table-modern tbody tr:hover{background:rgba(15,118,110,.04)}
.navbar-vertical{background:rgba(255,255,255,.96)!important;border-right:1px solid var(--border2)}
.navbar-vertical .nav-link{border-radius:12px;color:rgba(15,23,42,.74);padding:.6rem .75rem}
.navbar-vertical .nav-link:hover{background:rgba(15,23,42,.04)}
.navbar-vertical .nav-link.active{background:rgba(15,118,110,.10);color:rgba(15,23,42,.92)}
.navbar-vertical .nav-link-icon{color:rgba(15,118,110,.92)}
.hero,.panel-hero{background:transparent!important}
.panel-hero{border:1px solid var(--border2);border-radius:24px;box-shadow:none}
.stat-card{border:1px solid var(--border2);border-radius:20px;background:var(--surface);box-shadow:none}
.site-footer{border-top:1px solid var(--border2);background:rgba(255,255,255,.88)}

/* Hero background upgrade */
.hero{position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-2px;background:
  radial-gradient(900px 420px at 20% 10%, rgba(15,118,110,.18), transparent 60%),
  radial-gradient(820px 420px at 85% 20%, rgba(20,184,166,.12), transparent 60%),
  radial-gradient(900px 520px at 50% 120%, rgba(45,212,191,.10), transparent 55%);
  pointer-events:none}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cpath fill='none' stroke='%230f172a' stroke-opacity='.08' d='M0 .5H160M0 40.5H160M0 80.5H160M0 120.5H160M.5 0V160M40.5 0V160M80.5 0V160M120.5 0V160'/%3E%3C/svg%3E");
  background-size:160px 160px;mix-blend-mode:multiply}
.hero .container{position:relative}

/* Featured packages (homepage) – more minimal */
.featured-packages{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.1) blur(10px)}
.featured-packages{max-width:500px;margin-left:auto}
.featured-packages .plan-card{padding:.6rem!important;border-color:rgba(15,23,42,.10)!important}
.featured-packages .plan-card .h6{font-size:1.02rem}
.featured-packages .plan-card .fw-bold{font-size:.98rem}
.featured-packages .plan-card .small{font-size:.82rem}
.featured-packages .plan-card ul{margin-top:.5rem!important;margin-bottom:.65rem!important}
.featured-packages .plan-card li{margin-bottom:.25rem}
.featured-packages .plan-card .btn{padding:.55rem .8rem;border-radius:12px}
.featured-packages .pricing-pop{box-shadow:0 10px 22px rgba(15,118,110,.12);border-color:rgba(15,118,110,.24)!important}

/* Make featured plans feel lighter */
.featured-packages .plan-card{background:rgba(255,255,255,.72)}
.featured-packages .plan-card ul{padding-left:1.1rem}
.featured-packages .badge{font-weight:600;border-radius:999px}

/* Panel layout spacing */
.panel-content{padding:0 0 1rem}
@media (min-width:992px){.panel-content{padding:0 0 1.1rem}}
.page-body{padding-top:0!important;margin-top:0!important}
.page-wrapper{padding-top:0!important}
.page-header{padding:1rem 0 .75rem!important;margin:0 0 1rem!important}
.page-body > .container-xl{padding-top:0!important}

/* Panel hero (top info) — align to top and feel premium */
.panel-hero{padding:1rem 1.25rem!important;margin-top:0!important}
.panel-hero.mb-4{margin-bottom:1rem!important}

/* Status pills (avoid “school project” badges) */
.status-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .6rem;border-radius:999px;
  font-weight:600;font-size:.82rem;border:1px solid rgba(15,23,42,.10);background:rgba(15,23,42,.03);color:rgba(15,23,42,.85)}
.status-pill:before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(15,23,42,.35)}
.status-pill.approved{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.22);color:rgba(5,150,105,.95)}
.status-pill.approved:before{background:rgba(16,185,129,.85)}
.status-pill.pending{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.22);color:rgba(180,83,9,.95)}
.status-pill.pending:before{background:rgba(245,158,11,.9)}
.status-pill.rejected{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.22);color:rgba(185,28,28,.95)}
.status-pill.rejected:before{background:rgba(239,68,68,.9)}
.status-pill.info{background:rgba(56,189,248,.10);border-color:rgba(56,189,248,.22);color:rgba(3,105,161,.95)}
.status-pill.info:before{background:rgba(56,189,248,.9)}
.status-pill.primary{background:rgba(99,102,241,.10);border-color:rgba(99,102,241,.22);color:rgba(67,56,202,.95)}
.status-pill.primary:before{background:rgba(99,102,241,.9)}

/* Sidebar polishing */
.page > .navbar-vertical{margin:12px 0 12px 12px;border-radius:22px;overflow:hidden;box-shadow:0 14px 30px rgba(2,6,23,.06)}
@media (max-width:991px){.page > .navbar-vertical{margin:0;border-radius:0;box-shadow:none}}
.navbar-vertical .navbar-nav{gap:6px}
.navbar-vertical .nav-link{display:flex;align-items:center;gap:.5rem}
.navbar-vertical .nav-link-icon{margin-right:.25rem}

/* Footer polish */
footer.border-top{border-top:1px solid var(--border2)!important;background:rgba(255,255,255,.88)}



/* Corporate polish */
.navbar.bg-white{
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border2)!important;
}
.brand-dot{
  width:10px;height:10px;border-radius:999px;
  background:linear-gradient(135deg,var(--brand),#2dd4bf);
  box-shadow:0 0 0 6px rgba(20,184,166,.12);
}
.btn{
  border-radius:14px;
  font-weight:600;
  letter-spacing:.1px;
}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-700))!important;
  border:0!important;
  box-shadow:0 10px 22px rgba(15,118,110,.22);
}
.btn-primary:hover{filter:brightness(.98)}
.btn-outline-secondary{
  border-color:rgba(11,18,32,.18)!important;
}
.card,.premium-card{
  border-radius:var(--radius2);
  border:1px solid var(--border2);
  box-shadow:var(--shadow-sm);
}
.card:hover,.premium-card:hover{
  box-shadow:var(--shadow);
  transform:translateY(-1px);
  transition:all .2s ease;
}
.form-control,.form-select{
  border-radius:14px;
  border-color:rgba(11,18,32,.14);
}
.form-control:focus,.form-select:focus{
  border-color:rgba(15,118,110,.48);
  box-shadow:0 0 0 .25rem rgba(15,118,110,.14);
}
.section-title{letter-spacing:-.02em}
.home-hero{
  position:relative;
  background:
    radial-gradient(900px 320px at 18% 0%, rgba(15,118,110,.16), transparent 55%),
    radial-gradient(700px 280px at 90% 10%, rgba(20,184,166,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.0));
}
.home-hero:after{
  content:'';
  position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(11,18,32,.10), transparent);
}
.badge-soft{
  background:rgba(15,118,110,.10);
  color:var(--brand-900);
  border:1px solid rgba(15,118,110,.14);
}


/* -------------------------------------------------
   Homepage Hero – Premium (Option A)
--------------------------------------------------*/
.home-hero{
  overflow:hidden;
}
.home-hero:before{
  content:'';
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1100px 520px at 15% 15%, rgba(15,118,110,.20), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(56,189,248,.10), transparent 62%),
    radial-gradient(1000px 600px at 55% 120%, rgba(45,212,191,.16), transparent 55%);
  pointer-events:none;
}
.home-hero .container{position:relative; z-index:1;}
.home-hero .lead{max-width:38ch}
.home-hero-title{
  letter-spacing:-.03em;
  line-height:1.05;
}
.home-hero-title .accent{
  background:linear-gradient(90deg, rgba(15,118,110,1), rgba(20,184,166,1));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.home-hero-metrics i{
  color:rgba(15,118,110,.92)!important;
}

/* subtle grain/noise */
.home-hero .hero-grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* mockup */
.hero-mock{
  position:relative;
  padding:1.25rem;
}
.hero-mock:before{
  content:'';
  position:absolute;
  inset:18% 8% 18% 8%;
  background:radial-gradient(circle at 30% 20%, rgba(45,212,191,.26), transparent 60%),
             radial-gradient(circle at 70% 40%, rgba(15,118,110,.22), transparent 60%);
  filter:blur(18px);
  opacity:.8;
  pointer-events:none;
}
.hero-mock-card{
  border-radius:26px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(255,255,255,.70);
  backdrop-filter:saturate(1.1) blur(10px);
  box-shadow:0 24px 60px rgba(11,18,32,.14);
  transform:perspective(1100px) rotateY(-10deg) rotateX(4deg);
  transition:transform .35s ease, box-shadow .35s ease;
}
.hero-mock-card:hover{
  transform:perspective(1100px) rotateY(-6deg) rotateX(2deg) translateY(-4px);
  box-shadow:0 30px 72px rgba(11,18,32,.16);
}
.hero-mock-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:22px;
}

/* buttons a bit more premium */
.btn.btn-primary.btn-lg{
  padding:.82rem 1.15rem;
  border-radius:16px;
}
.btn.btn-outline-secondary.btn-lg{
  padding:.82rem 1.15rem;
  border-radius:16px;
  border-color:rgba(11,18,32,.14);
}



/* ===== EXACT PREMIUM HERO STYLE ===== */

.home-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(59,130,246,.35), transparent 60%),
    radial-gradient(1000px 600px at 90% 0%, rgba(20,184,166,.30), transparent 65%),
    linear-gradient(180deg,#eaf2ff 0%, #f7fbff 100%);
}

.home-hero:before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.5), transparent 70%);
  pointer-events:none;
}

.home-hero-title{
  font-size:3rem;
  line-height:1.05;
  letter-spacing:-.03em;
}

.home-hero-title .accent{
  background:linear-gradient(90deg,#ef4444,#8b5cf6,#3b82f6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.home-hero .lead{
  font-size:1.1rem;
  color:#334155;
  max-width:520px;
}

.btn.btn-primary{
  background:linear-gradient(135deg,#0f766e,#14b8a6);
  border:none;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.btn.btn-light{
  background:#ffffff;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.hero-mock{
  position:relative;
}

.hero-mock-card{
  transform:perspective(1200px) rotateY(-12deg) rotateX(6deg);
  border-radius:24px;
  background:#ffffff;
  box-shadow:0 40px 90px rgba(0,0,0,.18);
}

.hero-mock-card img{
  border-radius:20px;
}



/* ===== ULTRA HERO BACKGROUND (match design) ===== */

.home-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#dbeafe 0%, #eef2ff 40%, #f0fdfa 100%);
}

.home-hero::before{
  content:'';
  position:absolute;
  top:-200px;
  left:-200px;
  width:900px;
  height:900px;
  background:radial-gradient(circle, rgba(59,130,246,.45) 0%, transparent 60%);
  filter:blur(60px);
  opacity:.8;
}

.home-hero::after{
  content:'';
  position:absolute;
  top:-150px;
  right:-150px;
  width:800px;
  height:800px;
  background:radial-gradient(circle, rgba(16,185,129,.45) 0%, transparent 60%);
  filter:blur(60px);
  opacity:.8;
}

.home-hero .container{
  position:relative;
  z-index:2;
}