:root{
  --font-serif: "Playfair Display", serif;
  --font-sans: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --bg0: #050816;
  --bg1: #030513;
  --card: rgba(255,255,255,0.045);
  --border: rgba(255,255,255,0.12);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.66);
  --accent: #4f6bff;
  --accent2: #7dd3fc;
  --accent-ink: #ffffff;
}

html{
  border: none;
  margin: 0;
  padding: 0;
}

html[data-theme="light"]{
  --bg0: #ffffff;
  --bg1: #f5f7ff;
  --card: rgba(2,6,23,0.03);
  --border: rgba(2,6,23,0.10);
  --text: rgba(2,6,23,0.92);
  --muted: rgba(2,6,23,0.62);
  --accent: #2f4cff;
  --accent2: #2563eb;
  --accent-ink: #ffffff;
}

body{
  font-family: var(--font-sans);
  background: radial-gradient(1200px 700px at 15% 10%, rgba(59,91,255,0.16), transparent 58%),
              radial-gradient(900px 600px at 80% 0%, rgba(96,165,250,0.08), transparent 45%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  border: none;
  margin: 0;
  padding: 0;
}

html[data-theme="dark"] body{
  background: radial-gradient(1200px 700px at 15% 10%, rgba(79,107,255,0.18), transparent 58%),
              radial-gradient(900px 600px at 80% 0%, rgba(125,211,252,0.10), transparent 45%),
              radial-gradient(800px 520px at 70% 80%, rgba(79,107,255,0.10), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{color: inherit; text-decoration: none;}
a{transition: color 180ms ease, opacity 180ms ease;}
a:hover{color: var(--accent);}

.bg-body{background: transparent !important;}
.text-muted{color: var(--muted) !important;}

@media (min-width: 992px){
  .w-lg-auto{width: auto !important;}
}

.site-main{min-height: calc(100vh - 180px);}

.site-header .topbar{
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.site-header .navbar{
  background: rgba(0,0,0,0.34);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 42px rgba(0,0,0,0.22);
  position: relative;
}

html[data-theme="light"] .site-header .navbar,
html[data-theme="light"] .site-header .topbar{background: rgba(255,255,255,0.72);}

html[data-theme="light"] .site-header .navbar{box-shadow: 0 14px 42px rgba(2,6,23,0.10);}

.site-header .navbar-brand{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.badge-status{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 500;
}

.navbar-dark .navbar-nav .nav-link{
  color: var(--text);
  opacity: 0.9;
  border-radius: 12px;
  transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.navbar-dark .navbar-nav .nav-link svg {
  transition: all 0.3s ease;
  color: var(--text);
}

.navbar-dark .navbar-nav .nav-link:hover{
  opacity: 1;
  transform: translateY(-1px);
  background: rgba(255,255,255,0.05);
}

.navbar-dark .navbar-nav .nav-link:hover svg {
  color: var(--accent);
  transform: scale(1.1);
}

html[data-theme="light"] .navbar-dark .navbar-nav .nav-link:hover{background: rgba(2,6,23,0.04);}

.theme-switch{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
}
html[data-theme="light"] .theme-switch{background: rgba(2,6,23,0.03);}

.theme-icon{color: var(--muted);}
html[data-theme="dark"] .theme-switch .theme-icon:last-child{color: var(--text);}
html[data-theme="light"] .theme-switch .theme-icon:first-child{color: var(--text);}

.theme-toggle{
  position: relative;
  width: 52px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.theme-track{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  transition: background 220ms ease, border-color 220ms ease;
}

.theme-thumb{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), background 220ms ease;
}

.theme-toggle input:checked ~ .theme-track{
  background: linear-gradient(135deg, rgba(59,91,255,0.92), rgba(96,165,250,0.72));
  border-color: rgba(96,165,250,0.55);
}

.theme-toggle input:checked ~ .theme-thumb{
  transform: translateX(24px);
  background: rgba(255,255,255,0.98);
}

.theme-toggle input:focus-visible ~ .theme-track{
  outline: 2px solid rgba(96,165,250,0.75);
  outline-offset: 2px;
}



.btn-outline-secondary{
  color: var(--text);
  border-color: var(--border);
  background: transparent;
}

.btn-outline-secondary:hover{
  color: var(--text);
  border-color: rgba(96,165,250,0.55);
  background: rgba(255,255,255,0.06);
}

.btn-outline-light{
  color: var(--text);
  border-color: rgba(255,255,255,0.22);
}

.btn-outline-light:hover{
  color: var(--text);
  border-color: rgba(96,165,250,0.55);
  background: rgba(255,255,255,0.06);
}

.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-primary{
  color: var(--text);
  border-color: var(--border);
  background: transparent;
}

.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-primary:hover{
  color: var(--text);
  border-color: rgba(96,165,250,0.55);
  background: rgba(255,255,255,0.06);
}

.alert{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

.alert-success,
.alert-danger,
.alert-warning,
.alert-info,
.alert-primary,
.alert-secondary{
  border-left: 3px solid rgba(96,165,250,0.75);
}

.badge.text-bg-success,
.badge.text-bg-warning,
.badge.text-bg-danger,
.badge.text-bg-primary,
.badge.text-bg-info,
.badge.text-bg-secondary{
  color: var(--text) !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid var(--border);
}

.badge.text-bg-secondary-subtle{
  color: var(--text) !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--border) !important;
}

.table-dark{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,0.03);
  --bs-table-hover-bg: rgba(255,255,255,0.05);
  --bs-table-border-color: var(--border);
  color: var(--text);
}

.table-dark thead th{color: var(--text); opacity: 0.9;}

.brand-title{font-family: var(--font-serif); font-weight: 700; letter-spacing: 0.2px; display:block; line-height: 1.1;}

.brand-subtitle{display:block; font-size: 12px; opacity: 0.72;}

.hero{padding: 50px 0 40px; position: relative; overflow:hidden;}

.hero::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(850px 520px at 20% 20%, rgba(59,91,255,0.26), transparent 60%),
    radial-gradient(850px 520px at 80% 50%, rgba(96,165,250,0.10), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.0));
  pointer-events:none;
}

.hero > .container{position:relative; z-index:1;}

.hero-kicker{letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px; opacity: 0.75; margin-bottom: 8px;}

.hero-title{font-family: var(--font-serif); font-size: clamp(40px, 4.8vw, 62px); line-height: 1.05; margin-bottom: 8px;}

.hero-tagline{font-size: 18px; opacity: 0.92; margin-bottom: 8px;}

.btn-accent{
  background: linear-gradient(135deg, rgba(59,91,255,1), rgba(96,165,250,0.92));
  border: none;
  color: var(--accent-ink);
  font-weight: 600;
}

.btn-accent:hover{filter: brightness(0.98); color: var(--accent-ink);}

.btn{
  transition: transform 180ms ease, filter 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.btn svg {
  transition: all 0.3s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.btn:active{transform: translateY(1px);}

.btn{
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}

html[data-theme="light"] .btn{
  box-shadow: 0 10px 28px rgba(2,6,23,0.10);
}

.btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
}

.btn:hover svg {
  transform: scale(1.1) rotate(3deg);
  filter: drop-shadow(0 2px 4px rgba(79,107,255,0.3));
}

.btn:focus-visible,
.navbar-dark .navbar-nav .nav-link:focus-visible,
.theme-toggle input:focus-visible ~ .theme-track{
  outline: none;
  box-shadow: 0 0 0 3px rgba(96,165,250,0.35);
}

html[data-theme="light"] .btn:focus-visible,
html[data-theme="light"] .navbar-dark .navbar-nav .nav-link:focus-visible,
html[data-theme="light"] .theme-toggle input:focus-visible ~ .theme-track{
  box-shadow: 0 0 0 3px rgba(47,76,255,0.25);
}

 .form-control,
 .form-select,
 .input-group-text{
   border-color: var(--border) !important;
   background: rgba(255,255,255,0.06);
   color: var(--text);
   border-radius: 14px;
 }

 html[data-theme="light"] .form-control,
 html[data-theme="light"] .form-select,
 html[data-theme="light"] .input-group-text{
   background: rgba(2,6,23,0.03);
 }

 .form-control:focus,
 .form-select:focus{
   border-color: rgba(96,165,250,0.55) !important;
   box-shadow: 0 0 0 3px rgba(96,165,250,0.20) !important;
 }

 html[data-theme="light"] .form-control:focus,
 html[data-theme="light"] .form-select:focus{
   border-color: rgba(47,76,255,0.45) !important;
   box-shadow: 0 0 0 3px rgba(47,76,255,0.16) !important;
 }

 .modal-content{
   border: 1px solid var(--border);
   background: radial-gradient(800px 420px at 20% 10%, rgba(59,91,255,0.12), transparent 55%), var(--card);
   backdrop-filter: blur(14px);
   border-radius: 18px;
   box-shadow: 0 24px 80px rgba(0,0,0,0.40);
 }

 html[data-theme="light"] .modal-content{
   box-shadow: 0 24px 80px rgba(2,6,23,0.18);
 }

 .modal-header,
 .modal-footer{
   border-color: var(--border) !important;
 }

 .dropdown-menu{
   border: 1px solid var(--border);
   background: rgba(0,0,0,0.38);
   backdrop-filter: blur(14px);
   box-shadow: 0 18px 60px rgba(0,0,0,0.35);
   border-radius: 14px;
 }

 html[data-theme="light"] .dropdown-menu{
   background: rgba(255,255,255,0.75);
   box-shadow: 0 18px 60px rgba(2,6,23,0.12);
 }

 .dropdown-item{
   color: var(--text);
   border-radius: 10px;
 }

 .dropdown-item:hover,
 .dropdown-item:focus{
   background: rgba(255,255,255,0.08);
 }

 html[data-theme="light"] .dropdown-item:hover,
 html[data-theme="light"] .dropdown-item:focus{
   background: rgba(2,6,23,0.05);
 }

 .table{
   border-color: var(--border);
 }

 .table thead th{
   color: var(--text);
   border-color: var(--border);
 }

 .table tbody td{
   border-color: rgba(255,255,255,0.06);
 }

 html[data-theme="light"] .table tbody td{
   border-color: rgba(2,6,23,0.08);
 }

.card-glass,
.feature,
.review-card,
.cta,
.portfolio-tile{
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
  box-shadow: 0 18px 60px rgba(0,0,0,0.18);
}

html[data-theme="light"] .card-glass,
html[data-theme="light"] .feature,
html[data-theme="light"] .review-card,
html[data-theme="light"] .cta,
html[data-theme="light"] .portfolio-tile{
  box-shadow: 0 18px 60px rgba(2,6,23,0.10);
}
.card-glass:hover,
.feature:hover,
.review-card:hover,
.cta:hover,
.portfolio-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(96,165,250,0.28);
}

.section{padding: 30px 0 10px;}
.section:last-child{padding-bottom: 0;}
.section-alt{background: rgba(255,255,255,0.03); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);}

.section-title{font-family: var(--font-serif); font-weight: 700;}
.section-heading{margin-bottom: 12px;}

.meta-pill{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  margin-right: 8px;
  font-size: 13px;
}

.feature{
  padding: 14px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
}

.review-card{
  border: 1px solid var(--border);
  border-radius: 18px;
  background: radial-gradient(800px 400px at 10% 10%, rgba(59,91,255,0.18), transparent 55%), var(--card);
  padding: 18px;
}

.cta{border-radius: 18px; border: 1px solid var(--border); background: radial-gradient(900px 450px at 20% 30%, rgba(59,91,255,0.20), transparent 55%), var(--card);}
.cta-inner{padding: 18px;}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior: auto !important;}
  a,
  .btn,
  .card,
  .card-glass,
  .feature,
  .review-card,
  .cta,
  .portfolio-tile,
  .theme-track,
  .theme-thumb{
    transition: none !important;
  }
}

.page-hero{padding: 72px 0 24px;}
.page-title{font-family: var(--font-serif); font-weight: 700; font-size: clamp(32px, 3.6vw, 44px);}

.portfolio-tile{position:relative; display:block; border-radius: 16px; overflow:hidden; border: 1px solid var(--border);}
.portfolio-img{width:100%; padding-top: 75%; background-size: cover; background-position: center; filter: saturate(1.05) contrast(1.02);}
.portfolio-overlay{position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.78)); opacity: 0; transition: 200ms ease;}
.portfolio-label{position:absolute; left: 14px; bottom: 12px; font-weight: 600;}
.portfolio-tile:hover .portfolio-overlay{opacity: 1;}

.site-footer{border-top: 1px solid var(--border); background: rgba(0,0,0,0.25);}
html[data-theme="light"] .site-footer{background: rgba(255,255,255,0.65);}

.toplink{font-size: 13px; color: var(--muted);}
.toplink:hover{color: var(--accent);}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 992px) {
    .brand-text {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .brand-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.brand-title {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

.brand-location {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 500;
    margin-top: 0.2rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}


.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  padding: 12px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(59,91,255,1), rgba(96,165,250,0.90));
  color: var(--accent-ink);
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.18);
}



 .nb-promo{
   position: fixed;
   inset: 0;
   z-index: 2000;
   display: grid;
   place-items: center;
   padding: 18px;
 }

 .nb-promo[hidden]{
   display: none;
 }

 .nb-promo-backdrop{
   position: absolute;
   inset: 0;
   background: rgba(0,0,0,0.65);
   backdrop-filter: blur(6px);
 }

 html[data-theme="light"] .nb-promo-backdrop{
   background: rgba(2,6,23,0.50);
 }

 .nb-promo-dialog{
   position: relative;
   width: min(560px, 100%);
   border-radius: 20px;
   border: 1px solid var(--border);
   background: radial-gradient(800px 420px at 20% 10%, rgba(59,91,255,0.14), transparent 55%), var(--card);
   backdrop-filter: blur(16px);
   box-shadow: 0 26px 90px rgba(0,0,0,0.45);
   padding: 18px 18px 16px;
   transform: translateY(10px);
   opacity: 0;
   transition: transform 220ms ease, opacity 220ms ease;
 }

 html[data-theme="light"] .nb-promo-dialog{
   box-shadow: 0 26px 90px rgba(2,6,23,0.22);
 }

 .nb-promo.nb-promo-open .nb-promo-dialog{
   transform: translateY(0);
   opacity: 1;
 }

 .nb-promo-close{
   position: absolute;
   top: 10px;
   right: 10px;
   width: 42px;
   height: 42px;
   border-radius: 999px;
   border: 1px solid var(--border);
   background: rgba(255,255,255,0.06);
   color: var(--text);
   font-size: 26px;
   line-height: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }

 html[data-theme="light"] .nb-promo-close{
   background: rgba(2,6,23,0.03);
 }

 .nb-promo-close:hover{
   background: rgba(255,255,255,0.10);
 }

 html[data-theme="light"] .nb-promo-close:hover{
   background: rgba(2,6,23,0.06);
 }

 .nb-promo-badge{
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 10px;
   border-radius: 999px;
   border: 1px solid var(--border);
   background: rgba(255,255,255,0.06);
   color: var(--text);
   font-weight: 600;
   font-size: 12px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
 }

 html[data-theme="light"] .nb-promo-badge{
   background: rgba(2,6,23,0.03);
 }

 .nb-promo-title{
   margin-top: 14px;
   margin-bottom: 8px;
   font-family: var(--font-serif);
   font-weight: 700;
   font-size: clamp(22px, 3.2vw, 30px);
 }

 .nb-promo-text{
   margin-bottom: 0;
 }

 .nb-promo-wa{
   margin-top: 12px;
 }

 .nb-promo-wa-btn{
   width: 100%;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
   border-radius: 14px;
   border: 1px solid var(--border);
   background: rgba(255,255,255,0.05);
   box-shadow: 0 14px 46px rgba(0,0,0,0.18);
 }

 html[data-theme="light"] .nb-promo-wa-btn{
   background: rgba(2,6,23,0.03);
   box-shadow: 0 14px 46px rgba(2,6,23,0.10);
 }

 .nb-promo-wa-btn:hover{
   border-color: rgba(96,165,250,0.50);
   transform: translateY(-1px);
 }

 .nb-promo-wa-icon{
   width: 38px;
   height: 38px;
   border-radius: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(37,211,102,0.18);
   border: 1px solid rgba(37,211,102,0.35);
 }

 .nb-promo-wa-label{
   font-weight: 700;
 }

 .nb-promo-actions{
   margin-top: 14px;
   display: flex;
   justify-content: flex-end;
 }

 @media (max-width: 420px){
   .nb-promo-actions{
     justify-content: stretch;
   }
   .nb-promo-actions .btn{
     width: 100%;
   }
 }