/* ==========================================================
   Btech Technologies — design tokens & overrides on Bootstrap 5
   ========================================================== */
:root{
  --navy:#0B1B2B;
  --navy-2:#0F2438;
  --paper:#F5F3EE;
  --paper-2:#ECE8DD;
  --teal:#12898C;
  --teal-bright:#1FB5B0;
  --gold:#E4A73B;
  --ink:#10151C;
  --mist:#9FB0BE;
  --mist-dim:#5D707E;
  --line: rgba(255,255,255,0.12);
  --line-dark: rgba(16,21,28,0.12);

  --bs-body-font-family: 'IBM Plex Sans', sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; }

h1,h2,h3,h4,.font-display{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.08;
}
.mono{ font-family:'IBM Plex Mono', monospace; }

a{ text-decoration:none; }
.text-teal{ color:var(--teal) !important; }
.text-teal-bright{ color:var(--teal-bright) !important; }
.text-gold{ color:var(--gold) !important; }
.text-mist{ color:var(--mist) !important; }
.text-mist-dim{ color:var(--mist-dim) !important; }
.bg-navy{ background:var(--navy) !important; }
.bg-navy-2{ background:var(--navy-2) !important; }
.bg-paper-2{ background:var(--paper-2) !important; }

/* ---------- Buttons ---------- */
.btn-teal{
  background:var(--teal-bright); color:#062022;
  font-family:'Space Grotesk'; font-weight:600;
  border-radius:2px; border:1px solid transparent;
  padding:.7rem 1.4rem;
}
.btn-teal:hover{ background:#3fcdc7; color:#062022; }
.btn-outline-light-2{
  border:1px solid var(--line); color:#fff;
  border-radius:2px; font-family:'Space Grotesk'; font-weight:600;
  padding:.7rem 1.4rem;
}
.btn-outline-light-2:hover{ border-color:#fff; color:#fff; }
.btn-white-cta{
  background:#fff; color:var(--navy);
  font-family:'Space Grotesk'; font-weight:600; border-radius:2px;
  padding:.8rem 1.6rem;
}
.btn-white-cta:hover{ background:var(--gold); color:var(--navy); }

/* ---------- Eyebrow label ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:currentColor; }

/* ---------- Navbar ---------- */
#mainNav{
  background:rgba(11,27,43,0.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
#mainNav .navbar-brand{
  font-family:'Space Grotesk'; font-weight:700; font-size:1.2rem; color:#fff;
  display:flex; align-items:center; gap:.5rem;
}
#mainNav .nav-link{
  color:var(--mist) !important; font-weight:500; font-size:.92rem;
  padding:.5rem 1rem !important;
}
#mainNav .nav-link:hover, #mainNav .nav-link.active{ color:#fff !important; }
#mainNav .dropdown-menu{
  background:var(--navy-2); border:1px solid var(--line); border-radius:2px;
}
#mainNav .dropdown-item{ color:var(--mist); font-size:.9rem; }
#mainNav .dropdown-item:hover{ background:rgba(255,255,255,.05); color:#fff; }
.navbar-toggler{ border-color:var(--line); }

/* ---------- Hero ---------- */
.hero{
  background:radial-gradient(ellipse 90% 60% at 70% 0%, #143349 0%, var(--navy) 55%), var(--navy);
  color:#fff;
  padding:6rem 0 4.5rem;
  overflow:hidden;
}
.hero h1{ font-size:clamp(32px,4.4vw,56px); color:#fff; }
.hero h1 span.hl{ color:var(--teal-bright); }
.hero .lead-p{ color:var(--mist); font-size:1.1rem; max-width:520px; }

.hero-stats{ border-top:1px solid var(--line); padding-top:1.5rem; margin-top:2.5rem; }
.hero-stats .num{ font-family:'Space Grotesk'; font-size:1.7rem; font-weight:700; color:#fff; }
.hero-stats .lbl{ font-size:.78rem; color:var(--mist-dim); }

.net-node{ fill:var(--teal-bright); }
.net-node.gold{ fill:var(--gold); }
.net-line{ stroke:rgba(31,181,176,0.45); stroke-width:1; }
.pulse{ animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.35;} 50%{opacity:1;} }
.draw{ stroke-dasharray:400; stroke-dashoffset:400; animation:draw 2.4s ease forwards; }
@keyframes draw{ to{stroke-dashoffset:0;} }

/* ---------- Ticker ---------- */
.ticker-band{
  background:var(--navy-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1.1rem 0; overflow:hidden;
}
.ticker-track{
  display:flex; gap:4rem; white-space:nowrap; width:max-content;
  animation: scroll-x 26s linear infinite;
  font-family:'IBM Plex Mono'; font-size:.82rem; color:var(--mist);
}
@keyframes scroll-x{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- Page header (inner pages) ---------- */
.page-header{
  background:var(--navy); color:#fff; padding:5rem 0 3.5rem;
}
.page-header h1{ color:#fff; font-size:clamp(28px,4vw,44px); }
.breadcrumb-mono{ font-family:'IBM Plex Mono'; font-size:.8rem; color:var(--mist); }
.breadcrumb-mono a{ color:var(--mist); }
.breadcrumb-mono a:hover{ color:#fff; }

/* ---------- Section head ---------- */
.section-head{ max-width:640px; }
.section-head h2{ font-size:clamp(26px,3.2vw,38px); color:var(--ink); }
.section-head p{ color:var(--mist-dim); font-size:1rem; }

/* ---------- Service cards ---------- */
.service-card{
  background:var(--paper); border:1px solid var(--line-dark); padding:2.2rem 1.9rem;
  transition:background .25s, box-shadow .25s; height:100%;
}
.service-card:hover{ background:#fff; box-shadow:0 10px 30px rgba(16,21,28,.06); }
.service-card h3{ font-size:1.25rem; color:var(--ink); margin:1rem 0 .7rem; }
.service-card p{ color:var(--mist-dim); font-size:.92rem; }
.service-card .go{ font-size:.85rem; font-weight:600; color:var(--teal); }
.service-card .go svg{ width:14px; height:14px; transition:transform .2s; }
.service-card:hover .go svg{ transform:translateX(3px); }

/* ---------- Check list ---------- */
.check-list{ list-style:none; padding:0; }
.check-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; color:#EDEDE8; margin-bottom:1rem; }
.check-list svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--gold); }

.architecture-card{ border:1px solid var(--line); background:var(--navy-2); padding:1.8rem; border-radius:2px; }
.arch-row{ display:flex; justify-content:space-between; padding:.85rem 0; border-bottom:1px solid var(--line); font-size:.88rem; }
.arch-row:last-child{ border-bottom:none; }
.arch-row .v{ font-family:'IBM Plex Mono'; color:var(--teal-bright); }

/* ---------- Process ---------- */
.process-step .num{
  font-family:'Space Grotesk'; font-size:.95rem; color:var(--teal); font-weight:700;
  border:1px solid var(--teal); width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem;
}
.process-step h3{ font-size:1.1rem; color:var(--ink); }
.process-step p{ font-size:.88rem; color:var(--mist-dim); }

/* ---------- Testimonials ---------- */
.testi-card{
  background:#fff; border:1px solid var(--line-dark); padding:1.8rem; border-radius:2px; height:100%;
}
.testi-card .quote{ font-size:.96rem; color:var(--ink); line-height:1.65; }
.avatar{
  width:38px; height:38px; border-radius:50%; background:var(--teal); color:#fff;
  font-family:'Space Grotesk'; font-weight:700; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--teal) 0%, #0E6D6F 100%);
  color:#fff; text-align:center; padding:5rem 0;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.85); max-width:520px; margin:0 auto; }

/* ---------- Forms ---------- */
.form-control, .form-select{
  background:#fff; border:1px solid var(--line-dark); border-radius:2px; padding:.75rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--teal-bright); box-shadow:0 0 0 .2rem rgba(31,181,176,.15);
}
label.form-label{ font-size:.85rem; font-weight:600; color:var(--ink); }

/* ---------- Footer ---------- */
footer{ background:var(--navy); color:var(--mist); padding:4rem 0 1.6rem; }
footer h4{ color:#fff; font-size:.78rem; font-family:'IBM Plex Mono'; letter-spacing:.05em; text-transform:uppercase; margin-bottom:1.1rem; }
footer ul{ list-style:none; padding:0; }
footer ul li{ margin-bottom:.65rem; }
footer ul a{ color:var(--mist); font-size:.9rem; }
footer ul a:hover{ color:#fff; }
footer p{ color:var(--mist-dim); font-size:.9rem; }
.foot-social a{
  width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; color:var(--mist);
  margin-right:.5rem; font-size:.75rem;
}
.foot-social a:hover{ border-color:var(--teal-bright); color:var(--teal-bright); }
.foot-bottom{ border-top:1px solid var(--line); padding-top:1.4rem; font-size:.82rem; color:var(--mist-dim); }
.foot-bottom a{ color:var(--mist-dim); margin-left:1.3rem; }
.foot-bottom a:hover{ color:#fff; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- Shop ---------- */
.product-card{
  background:#fff; border:1px solid var(--line-dark); border-radius:2px; overflow:hidden;
  display:flex; flex-direction:column; height:100%; transition:box-shadow .2s, transform .2s;
}
.product-card:hover{ box-shadow:0 14px 30px rgba(16,21,28,.08); transform:translateY(-2px); }
.product-card .thumb{
  aspect-ratio:1/1; background:var(--paper-2); overflow:hidden;
}
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-card .body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex-grow:1; }
.product-card .cat{ font-family:'IBM Plex Mono'; font-size:.7rem; color:var(--teal); text-transform:uppercase; letter-spacing:.04em; }
.product-card h3{ font-size:1rem; color:var(--ink); margin:.4rem 0 .5rem; line-height:1.3; }
.product-card .price{ font-family:'Space Grotesk'; font-weight:700; font-size:1.15rem; color:var(--ink); }
.product-card .price.was{ font-size:.85rem; color:var(--mist-dim); text-decoration:line-through; font-weight:500; margin-left:.4rem; }
.product-card .stock-badge{ font-size:.72rem; }
.product-card .mt-auto-actions{ margin-top:auto; padding-top:.9rem; }

.cat-pill{
  display:inline-block; padding:.4rem .9rem; border:1px solid var(--line-dark);
  border-radius:20px; font-size:.85rem; color:var(--mist-dim); margin:0 .4rem .5rem 0;
}
.cat-pill.active, .cat-pill:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

.product-gallery{
  background:var(--paper-2); border-radius:4px; overflow:hidden; aspect-ratio:1/1;
}
.product-gallery img{ width:100%; height:100%; object-fit:cover; }

.qty-input{
  width:70px; text-align:center;
}

.cart-row img{ width:64px; height:64px; object-fit:cover; border-radius:3px; background:var(--paper-2); }

.delivery-option{
  border:1px solid var(--line-dark); border-radius:4px; padding:1rem 1.2rem; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.delivery-option:hover{ border-color:var(--teal); }
.delivery-option.selected{ border-color:var(--teal); background:rgba(18,137,140,.05); }
.delivery-option input{ margin-right:.6rem; }

/* ---------- WhatsApp ---------- */
.foot-social-whatsapp{ background:#25D366; border-color:#25D366 !important; color:#fff !important; }
.foot-social-whatsapp:hover{ background:#1ebc59; border-color:#1ebc59 !important; color:#fff !important; }

.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:1050;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:transform .2s, box-shadow .2s;
}
.whatsapp-float:hover{ transform:scale(1.08); box-shadow:0 10px 26px rgba(0,0,0,.3); }
@media (max-width:576px){
  .whatsapp-float{ width:52px; height:52px; right:16px; bottom:16px; }
}

/* ---------- Portfolio ---------- */
.portfolio-card{
  background:#fff; border:1px solid var(--line-dark); border-radius:2px; overflow:hidden;
  display:flex; flex-direction:column; height:100%; transition:box-shadow .2s, transform .2s;
}
.portfolio-card:hover{ box-shadow:0 14px 30px rgba(16,21,28,.08); transform:translateY(-2px); }
.portfolio-card .thumb{ aspect-ratio:4/3; background:var(--paper-2); overflow:hidden; }
.portfolio-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.portfolio-card .body{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex-grow:1; }
.portfolio-card .cat{ font-family:'IBM Plex Mono'; font-size:.7rem; color:var(--teal); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem; }
.portfolio-card h3{ font-size:1.1rem; color:var(--ink); margin:0 0 .3rem; line-height:1.3; }
.portfolio-card .client{ font-size:.82rem; }
.portfolio-card p{ color:var(--mist-dim); font-size:.9rem; flex-grow:1; }
.portfolio-card .go{ font-size:.85rem; font-weight:600; color:var(--teal); margin-top:.8rem; }
.portfolio-card .go svg{ width:14px; height:14px; transition:transform .2s; }
.portfolio-card:hover .go svg{ transform:translateX(3px); }

/* ---------- Events ---------- */
.event-block .ratio iframe{ width:100%; height:100%; border-radius:2px; }