:root{
  --kotel: #0f766e;
  --kotel-2: #16a34a;
  --kotel-soft: rgba(15,118,110,.10);
  --text: #0b1220;
  --muted: rgba(11,18,32,.62);
  --card-radius: 20px;
}
body{ background:#fff; color: var(--text); }
a{ color: inherit; }
.brand{ letter-spacing:-0.02em; }
.nav-glass{ background: rgba(255,255,255,.78); backdrop-filter: blur(10px); }

.btn-kotel{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--kotel);
  --bs-btn-border-color: var(--kotel);
  --bs-btn-hover-bg: #0b5f59;
  --bs-btn-hover-border-color: #0b5f59;
  --bs-btn-focus-shadow-rgb: 15,118,110;
  border-radius: 999px;
}
.btn-kotel-outline{
  --bs-btn-color: var(--kotel);
  --bs-btn-border-color: rgba(15,118,110,.35);
  --bs-btn-hover-bg: var(--kotel-soft);
  --bs-btn-hover-border-color: rgba(15,118,110,.55);
  border-radius: 999px;
}

.hero{ position: relative; padding: 68px 0 40px; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:-120px -120px auto -120px; height: 420px;
  background: radial-gradient(closest-side, rgba(15,118,110,.18), transparent 70%),
              radial-gradient(closest-side, rgba(22,163,74,.14), transparent 70%);
  transform: translateY(-30px); pointer-events:none;
}
.hero-card{
  border-radius: 26px;
  border: 1px solid var(--cardBorder);
  background: var(--card);
  box-shadow: 0 18px 60px rgba(11,18,32,.08);
}
.hero-illus{
  width:96px;
  height:96px;
  border-radius:22px;
  border:1px solid var(--cardBorder);
  background: var(--bg);
  padding: 10px;
  object-fit: contain;
}
.badge-soft{
  background: rgba(15,118,110,.10);
  color: #0b5f59;
  border: 1px solid rgba(15,118,110,.22);
  border-radius: 999px;
  padding: .45rem .7rem;
  font-weight: 700;
  font-size: .82rem;
}
.section-title{ letter-spacing: -0.03em; }
.k-card{
  border-radius: var(--card-radius);
  border: 1px solid var(--cardBorder);
  background: var(--card);
}
.k-card:hover{ box-shadow: 0 18px 60px rgba(11,18,32,.08); transform: translateY(-1px); transition: .2s ease; }
.k-shadow{ box-shadow: 0 18px 60px rgba(11,18,32,.08); }
.icon-pill{
  width:44px;height:44px; border-radius: 16px;
  background: rgba(15,118,110,.12);
  border: 1px solid rgba(15,118,110,.20);
  display:flex;align-items:center;justify-content:center;
}
.muted{ color: var(--muted); }

.banner{
  border-radius: 26px;
  border: 1px solid rgba(11,18,32,.10);
  background: linear-gradient(135deg, rgba(15,118,110,.10), rgba(22,163,74,.07));
  overflow:hidden;
}
.banner img{ width:100%; height:100%; object-fit: cover; opacity:.95; }

.admin-shell{ min-height: 100vh; background: linear-gradient(180deg, rgba(15,118,110,.05), rgba(255,255,255,1) 280px); }
.admin-card{
  border-radius: 22px;
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: 0 14px 50px rgba(11,18,32,.06);
}
.small-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .86rem;
}
.thumb{
  width: 48px; height: 40px; border-radius: 10px; object-fit: cover;
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(11,18,32,.04);
}


/* Navbar fixes */
.navbar .nav-link{ font-size:.95rem; padding-top:.55rem; padding-bottom:.55rem; }
.navbar .navbar-brand{ white-space: nowrap; }
.navbar .btn{ white-space: nowrap; }

/* Mobile floating actions (bottom-right) */
.floating-actions{
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.floating-actions .fab{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow: 0 18px 60px rgba(11,18,32,.20);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(10px);
}
.floating-actions .fab:active{ transform: translateY(1px); }
.floating-actions .fab-wa{
  background: linear-gradient(180deg, rgba(15,118,110,.95), rgba(15,118,110,.88));
  color: #ffffff;
}
.floating-actions .fab-call{
  background: linear-gradient(180deg, rgba(22,163,74,.92), rgba(22,163,74,.84));
  color: #ffffff;
}


@keyframes fabPulse {
  0% { box-shadow: 0 18px 60px rgba(11,18,32,.20), 0 0 0 0 rgba(15,118,110,.22); }
  70% { box-shadow: 0 18px 60px rgba(11,18,32,.20), 0 0 0 14px rgba(15,118,110,0); }
  100% { box-shadow: 0 18px 60px rgba(11,18,32,.20), 0 0 0 0 rgba(15,118,110,0); }
}
.floating-actions .fab-wa{ animation: fabPulse 2.8s infinite; }


/* THEME VARIABLES */
:root{
  --bg: #ffffff;
  --text: #0b1220;
  --muted: rgba(11,18,32,.65);
  --card: rgba(255,255,255,.92);
  --cardBorder: rgba(11,18,32,.08);
  --soft: rgba(15,118,110,.10);
}
body[data-theme="dark"]{
  --bg:#07101e;
  --text:#eaf2ff;
  --muted: rgba(234,242,255,.70);
  --card: rgba(255,255,255,.06);
  --cardBorder: rgba(255,255,255,.12);
  --soft: rgba(15,118,110,.16);
}
@media (prefers-color-scheme: dark){
  body[data-theme="auto"]{
    --bg:#07101e;
    --text:#eaf2ff;
    --muted: rgba(234,242,255,.70);
    --card: rgba(255,255,255,.06);
    --cardBorder: rgba(255,255,255,.12);
    --soft: rgba(15,118,110,.16);
  }
}
body{ background: var(--bg); color: var(--text); }
.muted, .text-muted{ color: var(--muted) !important; }
.k-card, .admin-card{ background: var(--card); border-color: var(--cardBorder) !important; }
.badge-soft{ background: var(--soft); }


/* Navbar alignment */
.navbar .container{ align-items: center; }
.navbar .nav-link, .navbar .btn, .navbar .navbar-brand{ white-space: nowrap; }
.navbar-nav{ gap: .25rem; }
.nav-phones{ line-height: 1.15; }
.nav-phones .nav-phone{ white-space: nowrap; }


/* Equal card sizes + consistent images */
.service-card{ height:100%; }
.service-card .card-body{ display:flex; flex-direction:column; }
.service-card .service-desc{
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: 3.9em;
}
.portfolio-card{ height:100%; }
.portfolio-card .thumb-media{ aspect-ratio: 4/3; background:#0b1220; border-radius:14px; overflow:hidden; }
.portfolio-card .thumb-media img{ width:100%; height:100%; object-fit:cover; }
.review-card{ height:100%; }



/* DARK THEME NAV */
body[data-theme="dark"] .nav-glass,
body[data-theme="auto"] .nav-glass{
  background: rgba(7,16,30,.72);
  border-color: rgba(255,255,255,.08) !important;
}
body[data-theme="dark"] .navbar .nav-link,
body[data-theme="auto"] .navbar .nav-link,
body[data-theme="dark"] .navbar .navbar-brand,
body[data-theme="auto"] .navbar .navbar-brand{
  color: var(--text) !important;
}
body[data-theme="dark"] .navbar .nav-link:hover,
body[data-theme="auto"] .navbar .nav-link:hover{
  opacity: .9;
}
body[data-theme="dark"] .btn-kotel-outline,
body[data-theme="auto"] .btn-kotel-outline{
  color: var(--text);
  border-color: rgba(255,255,255,.22);
}
body[data-theme="dark"] .btn-kotel-outline:hover,
body[data-theme="auto"] .btn-kotel-outline:hover{
  background: rgba(255,255,255,.08);
}
body[data-theme="dark"] .nav-phones .nav-phone,
body[data-theme="auto"] .nav-phones .nav-phone{
  color: var(--text);
}

.nav-phones .nav-phone{ white-space:nowrap; font-size:.92rem; }

.mobile-phones a{ color: inherit; }


/* BRAND CARDS */


/* BRAND CARDS */
.brand-card{ display:flex; flex-direction:column; }
.brand-card-media{
  height: 240px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: rgba(11,18,32,.55);
}
@media (max-width: 576px){
  .brand-card-media{ height: 200px; }
}
.brand-card-img{
  max-width: 86%;
  max-height: 86%;
  width: auto;
  height: auto;
  object-fit: contain;
  padding: 0 !important;
}
.brand-card-footer{
  margin-top:auto;
  background: var(--soft);
  border-top: 1px solid var(--cardBorder);
}
.brand-card-title{ color: var(--text); }



/* DARK MODE OVERRIDES */
/* DARK MODE OVERRIDES */

body[data-theme="dark"] .section-title, body[data-theme="auto"] .section-title{ color: var(--text); }


/* DARK MODE OVERRIDES */
/* When theme = dark */
body[data-theme="dark"] .bg-light{ background-color: rgba(255,255,255,.04) !important; }
body[data-theme="dark"] .text-dark{ color: var(--text) !important; }
body[data-theme="dark"] .navbar{
  background: rgba(7,16,30,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
body[data-theme="dark"] .navbar .navbar-brand,
body[data-theme="dark"] .navbar .nav-link{ color: var(--text) !important; }
body[data-theme="dark"] .border{ border-color: rgba(255,255,255,.12) !important; }

/* When theme = auto AND device prefers dark */
@media (prefers-color-scheme: dark){
  body[data-theme="auto"] .bg-light{ background-color: rgba(255,255,255,.04) !important; }
  body[data-theme="auto"] .text-dark{ color: var(--text) !important; }
  body[data-theme="auto"] .navbar{
    background: rgba(7,16,30,.72) !important;
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
  }
  body[data-theme="auto"] .navbar .navbar-brand,
  body[data-theme="auto"] .navbar .nav-link{ color: var(--text) !important; }
  body[data-theme="auto"] .border{ border-color: rgba(255,255,255,.12) !important; }
}



/* NAVBAR COMPACT */


/* NAVBAR COMPACT */
.nav-glass .navbar-collapse{ flex-wrap: nowrap; }
.nav-glass .navbar-nav{ flex-wrap: nowrap; }
.nav-glass .navbar-nav .nav-link{
  padding-left: .55rem;
  padding-right: .55rem;
  font-size: .95rem;
}
.nav-phones{ flex: 0 0 auto; }
.nav-phones .nav-phone{ font-size: .95rem; }


/* DARK THEME MORE */


/* DARK THEME MORE */
body[data-theme="dark"] .bg-white{ background-color: rgba(255,255,255,.06) !important; }
@media (prefers-color-scheme: dark){
  body[data-theme="auto"] .bg-white{ background-color: rgba(255,255,255,.06) !important; }
}

body[data-theme="dark"] .hero-card img{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; }
@media (prefers-color-scheme: dark){
  body[data-theme="auto"] .hero-card img{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; }
}

body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .form-control::placeholder{ color: rgba(234,242,255,.55) !important; }
body[data-theme="dark"] .dropdown-menu{
  background: rgba(7,16,30,.96) !important;
  border-color: rgba(255,255,255,.14) !important;
}
body[data-theme="dark"] .dropdown-item{ color: var(--text) !important; }
body[data-theme="dark"] .dropdown-item:hover{ background: rgba(255,255,255,.06) !important; }

@media (prefers-color-scheme: dark){
  body[data-theme="auto"] .form-control,
  body[data-theme="auto"] .form-select{
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: var(--text) !important;
  }
  body[data-theme="auto"] .form-control::placeholder{ color: rgba(234,242,255,.55) !important; }
  body[data-theme="auto"] .dropdown-menu{
    background: rgba(7,16,30,.96) !important;
    border-color: rgba(255,255,255,.14) !important;
  }
  body[data-theme="auto"] .dropdown-item{ color: var(--text) !important; }
  body[data-theme="auto"] .dropdown-item:hover{ background: rgba(255,255,255,.06) !important; }
}

.nav-glass .nav-phone{ color: inherit; }

/* Make some bootstrap helpers theme-aware */
body[data-theme="dark"] .bg-white{ background-color: rgba(255,255,255,.06) !important; }
body[data-theme="dark"] .btn-light{ background-color: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.16) !important; color: var(--text) !important; }
body[data-theme="dark"] .brand-card-footer{ color: var(--text); }
body[data-theme="dark"] .brand-card-footer .brand-card-title{ color: var(--text) !important; }