/* =========================================================
   Elite Vending Solutions - Premium Bootstrap 5 UI System
   Corporate, responsive, conversion-focused visual theme
   ========================================================= */
:root{
  --navy:#0b1728;
  --navy-2:#12233a;
  --ink:#172033;
  --muted:#667085;
  --muted-2:#8791a3;
  --orange:#e95f1b;
  --orange-2:#ff8a3d;
  --teal:#0f9f8c;
  --cyan:#46c7bd;
  --paper:#ffffff;
  --surface:#f7f9fc;
  --surface-2:#eef3f8;
  --line:rgba(15,23,42,.11);
  --line-strong:rgba(15,23,42,.18);
  --shadow:0 24px 70px rgba(15,23,42,.13);
  --shadow-soft:0 12px 34px rgba(15,23,42,.08);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;text-size-adjust:100%}
body{
  margin:0;
  overflow-x:hidden;
  color:var(--ink);
  background:
    linear-gradient(180deg,rgba(247,249,252,.96),rgba(255,255,255,1) 420px),
    var(--paper);
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 55%);
}

a{color:inherit;text-decoration:none;transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
a:hover{color:var(--orange)}
img,svg,video{max-width:100%;height:auto}
::selection{background:var(--orange);color:#fff}

h1,h2,h3,h4,h5,h6,.navbar-brand,.btn,.fw-black{
  letter-spacing:0;
  color:var(--navy);
}
h1,h2,h3,h4,h5,h6{font-weight:800;line-height:1.08}
p{margin-top:0}
.small,small{line-height:1.55}
.text-secondary{color:var(--muted)!important}
.text-orange{color:var(--orange)!important}
.text-teal{color:var(--teal)!important}
.bg-navy{background:var(--navy)!important}
.bg-soft{background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.fw-black{font-weight:900}
.container{position:relative;z-index:2}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:46px;
  border-radius:999px;
  padding:.78rem 1.18rem;
  font-weight:800;
  line-height:1.15;
  white-space:normal;
  box-shadow:none!important;
}
.btn i{line-height:1}
.btn-orange{
  border:1px solid rgba(233,95,27,.72);
  color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--orange-2));
  box-shadow:0 14px 30px rgba(233,95,27,.24)!important;
}
.btn-orange:hover,.btn-orange:focus{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 20px 42px rgba(233,95,27,.30)!important;
}
.btn-outline-navy{
  border:1px solid var(--line-strong);
  color:var(--navy);
  background:rgba(255,255,255,.82);
}
.btn-outline-navy:hover,.btn-outline-navy:focus{
  border-color:var(--navy);
  color:#fff;
  background:var(--navy);
  transform:translateY(-2px);
}
.btn-success{
  border:1px solid rgba(15,159,140,.45);
  background:linear-gradient(135deg,#119c75,var(--teal));
  font-weight:800;
  box-shadow:0 14px 28px rgba(15,159,140,.18)!important;
}
.btn-sm{min-height:36px;padding:.52rem .78rem}

/* Navbar */
.navbar{
  padding:.72rem 0;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  box-shadow:0 16px 42px rgba(15,23,42,.06);
}
.navbar-scrolled{box-shadow:0 18px 48px rgba(15,23,42,.10)}
.navbar-brand{
  min-width:0;
  font-weight:900;
  color:var(--navy)!important;
}
.brand-mark{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:.92rem;
  font-weight:900;
  letter-spacing:0;
  background:linear-gradient(135deg,var(--navy),var(--teal) 58%,var(--orange));
  box-shadow:0 14px 30px rgba(15,23,42,.16);
}
.nav-link{
  color:#26384f!important;
  border-radius:999px;
  padding:.58rem .82rem!important;
  font-size:.94rem;
  font-weight:700;
}
.nav-link:hover,.nav-link.active{
  color:var(--orange)!important;
  background:rgba(233,95,27,.09);
}
.dropdown-menu{
  min-width:16rem;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 60px rgba(15,23,42,.14)!important;
}
.dropdown-item{
  color:#304158;
  font-size:.93rem;
  font-weight:700;
  padding:.66rem .78rem;
}
.dropdown-item:hover,.dropdown-item:focus{
  color:var(--navy);
  background:rgba(15,159,140,.10);
}
.navbar-toggler{
  border:1px solid var(--line);
  border-radius:12px;
  padding:.52rem .62rem;
}
.navbar-toggler:focus{box-shadow:0 0 0 .18rem rgba(15,159,140,.16)}

/* Hero */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:126px 0 76px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(239,245,250,.92)),
    linear-gradient(120deg,rgba(15,159,140,.10),transparent 42%),
    linear-gradient(300deg,rgba(233,95,27,.11),transparent 46%);
  border-bottom:1px solid var(--line);
}
.hero:before,.page-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,rgba(15,23,42,.06) 0 1px,transparent 1px 100%),
    linear-gradient(160deg,transparent 0 58%,rgba(15,159,140,.08) 58.2%,transparent 70%);
  background-size:100% 100%,auto;
  pointer-events:none;
}
.hero h1,.page-hero h1{
  max-width:980px;
  margin-bottom:0;
  color:var(--navy);
  font-size:5rem;
  font-weight:900;
  line-height:.96;
  letter-spacing:0;
}
.hero h1:after{
  content:"";
  display:block;
  width:88px;
  height:5px;
  margin-top:24px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--orange),var(--teal));
}
.lead{
  color:var(--muted);
  font-size:1.12rem;
  line-height:1.78;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  max-width:100%;
  padding:.44rem .78rem;
  border:1px solid rgba(233,95,27,.18);
  border-radius:999px;
  color:#b94b16;
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 26px rgba(15,23,42,.06);
  font-size:.78rem;
  font-weight:800;
  line-height:1.25;
}
.stat-num{
  color:var(--navy);
  font-size:2.35rem;
  font-weight:900;
  line-height:1;
  letter-spacing:0;
}

/* Machine illustration */
.machine-card{
  position:relative;
  min-height:470px;
  overflow:hidden;
  padding:28px;
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  border-radius:30px;
  background:linear-gradient(145deg,#172943,#071321 70%);
  box-shadow:0 38px 86px rgba(7,19,35,.30);
}
.machine-card:before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  pointer-events:none;
}
.machine-card h3,.machine-card h5{color:#fff;font-weight:800}
.machine-card small{color:rgba(255,255,255,.66)}
.machine-card .badge{
  border:1px solid rgba(70,199,189,.35);
  background:rgba(15,159,140,.18)!important;
  color:#bdf8f1;
}
.machine-card .bg-opacity-10{
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
}
.vending-visual{
  position:relative;
  height:315px;
  overflow:hidden;
  border:8px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:linear-gradient(180deg,#2a4367,#101f35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 24px 50px rgba(0,0,0,.25);
}
.vending-visual:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(118deg,transparent 0 42%,rgba(255,255,255,.10) 43%,transparent 50%);
}
.vending-visual .slots{
  position:absolute;
  left:20px;
  top:28px;
  width:min(166px,52%);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.slot{
  min-height:46px;
  border-radius:10px;
  background:linear-gradient(135deg,#ffffff,#dce7f4);
  box-shadow:inset 0 -10px 20px rgba(233,95,27,.12);
}
.vending-visual .screen{
  position:absolute;
  right:24px;
  top:35px;
  width:78px;
  height:104px;
  border-radius:15px;
  background:linear-gradient(135deg,var(--teal),#95fff2);
  box-shadow:0 0 34px rgba(15,159,140,.42);
}
.vending-visual .screen:after{
  content:"PAY";
  position:absolute;
  left:16px;
  top:42px;
  color:#07342e;
  font-size:12px;
  font-weight:900;
  letter-spacing:0;
}
.vending-visual .base{
  position:absolute;
  left:30px;
  right:30px;
  bottom:26px;
  height:40px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.13);
}
.floating-chip{
  position:absolute;
  z-index:3;
  max-width:220px;
  padding:.68rem .92rem;
  border:1px solid rgba(255,255,255,.70);
  border-radius:999px;
  color:#26384f;
  background:rgba(255,255,255,.88);
  box-shadow:0 18px 42px rgba(15,23,42,.12);
  backdrop-filter:blur(16px);
  font-size:.9rem;
  font-weight:800;
}
.chip-one{right:4%;top:24%}
.chip-two{right:34%;bottom:11%}

/* Sections and cards */
.section{position:relative;padding:92px 0}
.section-title{
  color:var(--navy);
  font-size:3.15rem;
  font-weight:900;
  line-height:1.05;
  letter-spacing:0;
}
.card-premium{
  position:relative;
  height:100%;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow-soft);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.card-premium:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--orange),var(--teal));
  opacity:0;
  transition:opacity .24s ease;
}
.card-premium:hover{
  border-color:rgba(15,159,140,.20);
  transform:translateY(-5px);
  box-shadow:var(--shadow);
}
.card-premium:hover:before{opacity:1}
.card-premium h3,.card-premium h4,.card-premium h5,.card-premium h6{
  font-weight:800;
  letter-spacing:0;
}
.card-premium p{line-height:1.72}
.icon-box{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid rgba(15,159,140,.14);
  border-radius:18px;
  color:var(--teal);
  background:linear-gradient(135deg,rgba(15,159,140,.13),rgba(255,255,255,.88));
  font-size:1.45rem;
}
.product-icon{
  height:178px;
  display:grid;
  place-items:center;
  margin-bottom:1.05rem;
  border:1px solid rgba(15,23,42,.07);
  border-radius:22px;
  color:var(--orange);
  background:
    linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.56)),
    linear-gradient(145deg,#fff1e9,#e8faf7);
  font-size:4rem;
}

/* Page hero */
.page-hero{
  position:relative;
  overflow:hidden;
  padding:150px 0 86px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(240,245,250,.94)),
    linear-gradient(115deg,rgba(15,159,140,.09),transparent 45%),
    linear-gradient(300deg,rgba(233,95,27,.10),transparent 48%);
}
.breadcrumb{
  --bs-breadcrumb-divider-color:rgba(15,23,42,.32);
  margin-bottom:1.1rem;
  font-size:.92rem;
}
.breadcrumb-item a{color:var(--orange);font-weight:800}
.breadcrumb-item.active{color:var(--muted)}

/* Forms, tables, utilities */
.feature-list{list-style:none;padding:0;margin:0}
.feature-list li{
  display:flex;
  align-items:flex-start;
  gap:.66rem;
  padding:.76rem 0;
  border-bottom:1px dashed rgba(15,23,42,.15);
  color:#43536b;
}
.feature-list li:before{
  content:"\2713";
  flex:0 0 auto;
  width:22px;
  height:22px;
  display:inline-grid;
  place-items:center;
  margin-top:.12rem;
  border-radius:50%;
  color:var(--teal);
  background:rgba(15,159,140,.12);
  font-size:.8rem;
  font-weight:900;
}
.form-label{
  margin-bottom:.45rem;
  color:#344054;
  font-size:.92rem;
  font-weight:700;
}
.form-control,.form-select{
  min-height:48px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:14px;
  padding:.82rem .95rem;
  color:var(--ink);
  background-color:rgba(255,255,255,.96);
  font-weight:600;
}
.form-control::placeholder{color:#98a2b3}
.form-control:focus,.form-select:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 .22rem rgba(15,159,140,.14);
}
textarea.form-control{min-height:130px;resize:vertical}
.alert{line-height:1.5}
.table{
  margin-bottom:0;
  color:var(--ink);
  vertical-align:middle;
}
.table>:not(caption)>*>*{
  padding:1rem;
  border-bottom-color:rgba(15,23,42,.09);
}
.table thead th{
  color:#475467;
  background:#f8fafc;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
  white-space:nowrap;
}
.table-bordered{border-color:rgba(15,23,42,.10)!important}
.table-responsive{
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
}
.badge-soft{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,159,140,.16);
  border-radius:999px;
  padding:.42rem .68rem;
  color:#087e70;
  background:rgba(15,159,140,.11);
  font-size:.82rem;
  font-weight:800;
}
.stats-card{
  padding:30px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:26px;
  color:#e8eef7;
  background:linear-gradient(145deg,var(--navy),#112943);
  box-shadow:0 26px 62px rgba(7,19,35,.20);
}
.stats-card .stat-num,.stats-card h1,.stats-card h2,.stats-card h3,.stats-card h4,.stats-card h5,.stats-card h6{color:#fff}
.stats-card p{color:rgba(255,255,255,.72)}
.timeline{position:relative;padding-left:30px}
.timeline:before{
  content:"";
  position:absolute;
  left:8px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(var(--orange),var(--teal));
}
.timeline-item{position:relative;margin-bottom:22px}
.timeline-item:before{
  content:"";
  position:absolute;
  left:-28px;
  top:4px;
  width:17px;
  height:17px;
  border:4px solid #fff;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 1px rgba(233,95,27,.28);
}

/* Footer */
.footer{
  position:relative;
  overflow:hidden;
  padding:76px 0 28px;
  color:#c9d5e7;
  background:
    linear-gradient(145deg,#071321,#0d1d31 68%,#112943),
    var(--navy);
}
.footer:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.06) 0 1px,transparent 1px 100%);
  pointer-events:none;
}
.footer h4,.footer h6{color:#fff}
.footer p{color:#cbd5e1}
.footer a{color:#dde7f4}
.footer a:hover{color:#fff}
.footer .brand-mark{box-shadow:none}
.footer .btn-outline-light{
  border-color:rgba(255,255,255,.24);
  color:#fff;
}
.footer .btn-outline-light:hover{
  color:var(--navy)!important;
  background:#fff;
}

/* Admin */
.admin-shell{
  min-height:100vh;
  background:linear-gradient(135deg,#f5f7fb,#edf3f8);
}
.admin-sidebar{
  position:sticky;
  top:0;
  min-height:100vh;
  color:#fff;
  background:linear-gradient(180deg,#081422,#10253d);
  box-shadow:18px 0 50px rgba(15,23,42,.12);
}
.admin-sidebar strong{color:#fff;letter-spacing:0}
.admin-sidebar a{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:.18rem 0;
  padding:.78rem .9rem;
  border-radius:14px;
  color:#c9d5e7;
  font-weight:700;
}
.admin-sidebar a.active,.admin-sidebar a:hover{
  color:#fff;
  background:rgba(255,255,255,.11);
  transform:translateX(2px);
}
.admin-shell main{min-width:0}
.admin-shell h1{font-size:2.75rem}

/* Conversion and trust blocks */
.trust-strip{
  padding:22px 0;
  border-block:1px solid var(--line);
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(14px);
}
.trust-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  max-width:100%;
  margin:.25rem;
  padding:.58rem .88rem;
  border:1px solid var(--line);
  border-radius:999px;
  color:#344054;
  background:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
  font-size:.9rem;
  font-weight:800;
}
.premium-band{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:30px;
  color:#fff;
  background:
    linear-gradient(145deg,var(--navy),#15314d),
    var(--navy);
  box-shadow:0 34px 80px rgba(15,23,42,.22);
}
.premium-band .section-title,.premium-band .lead,.premium-band h1,.premium-band h2,.premium-band h3{color:#fff}
.premium-band .eyebrow{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.premium-band .bg-opacity-10{border-radius:22px!important}

/* Motion */
[data-animate]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);
}
[data-animate].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  [data-animate]{opacity:1;transform:none}
}

@media(max-width:1199px){
  .navbar .btn{padding:.72rem .98rem}
  .nav-link{padding:.55rem .68rem!important}
}

@media(max-width:991px){
  body{font-size:15.5px}
  .hero{min-height:auto;padding:124px 0 62px}
  .page-hero{padding:128px 0 72px}
  .section{padding:66px 0}
  .hero h1,.page-hero h1{font-size:4rem}
  .section-title{font-size:2.65rem}
  .hero h1,.page-hero h1{letter-spacing:0}
  .machine-card{min-height:auto;margin-top:1.5rem}
  .floating-chip{display:none}
  .navbar-collapse{
    max-height:calc(100vh - 76px);
    overflow-y:auto;
    padding:1rem 0 .45rem;
  }
  .navbar-nav{align-items:stretch!important}
  .nav-link{padding:.72rem .85rem!important}
  .dropdown-menu{
    margin:.25rem 0 .75rem;
    border-radius:14px!important;
    box-shadow:none!important;
  }
  .admin-sidebar{
    position:relative;
    min-height:auto;
  }
  .admin-sidebar a{display:inline-flex;margin:.18rem .12rem}
  .admin-shell main{padding:1.35rem!important}
}

@media(max-width:767px){
  .hero,.page-hero{text-align:left}
  .hero h1,.page-hero h1{font-size:3.05rem}
  .lead{font-size:1rem}
  .section-title{font-size:2.25rem}
  .card-premium,.premium-band{border-radius:22px}
  .product-icon{height:148px;font-size:3.35rem}
  .stats-card{padding:24px}
  .table-responsive{border-radius:14px}
  .footer{padding-top:58px}
}

@media(max-width:575px){
  body:before{background-size:40px 40px}
  .container{padding-inline:1.05rem}
  .navbar{padding:.58rem 0}
  .navbar-brand span:last-child{
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.98rem;
  }
  .brand-mark{width:38px;height:38px;border-radius:12px}
  .hero{padding:112px 0 52px}
  .page-hero{padding:112px 0 58px}
  .hero h1:after{width:72px;height:4px;margin-top:18px}
  .hero h1,.page-hero h1{font-size:2.55rem}
  .section-title{font-size:2rem}
  .btn{width:100%;min-height:48px;padding:.82rem 1rem}
  .d-flex.flex-wrap.gap-2 .btn{margin-bottom:.1rem}
  .stat-num{font-size:1.7rem}
  .machine-card{padding:20px;border-radius:24px}
  .vending-visual{height:260px;border-width:6px}
  .vending-visual .screen{right:16px;width:64px;height:88px}
  .vending-visual .screen:after{left:12px;top:35px}
  .vending-visual .slots{left:14px;gap:8px}
  .slot{min-height:38px}
  .card-premium{border-radius:20px}
  .icon-box{width:52px;height:52px;border-radius:16px}
  .trust-pill{width:100%;justify-content:center;margin:.22rem 0}
  .section{padding:54px 0}
  .premium-band{border-radius:22px}
  .footer .btn:not(.btn-orange){width:auto}
  .footer .d-flex.gap-2{flex-wrap:wrap}
  .admin-sidebar a{width:100%;justify-content:flex-start}
}