/* ==========================================================
   MODERN INFOSITE — DESIGN TOKENS
   ========================================================== */
:root{
  --navy-deep:   #05012E;
  --navy:        #0D05A9;
  --blue:        #2C3BE0;
  --blue-bright: #3B5BFF;
  --cyan:        #4FD1E8;
  --bg-soft:     #F4F6FC;
  --bg-panel:    #FFFFFF;
  --ink:         #0F1130;
  --ink-soft:    #565A78;
  --line:        #E3E6F5;
  --radius:      14px;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg-soft);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,.brand-text,.footer-brand span{
  font-family:var(--font-display);
  letter-spacing:-0.01em;
}

a{ text-decoration:none; color:inherit; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-bright);
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}
.eyebrow::before{
  content:"";
  width:22px;height:2px;
  background:var(--blue-bright);
  display:inline-block;
}

.section{ padding:5rem 0; }
@media (max-width:768px){ .section{ padding:3.2rem 0; } }

.section-title{
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  font-weight:700;
  margin-top:0.6rem;
  margin-bottom:1rem;
}
.section-lede{
  color:var(--ink-soft);
  font-size:1.05rem;
  max-width:640px;
}

/* ==========================================================
   TOP STRIP
   ========================================================== */
.top-strip{
  background:var(--navy-deep);
  color:#c9cdf5;
  font-size:0.85rem;
  padding:0.45rem 0;
}
.top-strip__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:0.4rem;
}
.top-strip__contact a{
  margin-right:1.2rem;
  color:#c9cdf5;
  transition:color .2s;
}
.top-strip__contact a:hover{ color:#fff; }
.top-strip__social a{
  color:#c9cdf5;
  margin-left:0.9rem;
  font-size:0.95rem;
  transition:color .2s;
}
.top-strip__social a:hover{ color:var(--cyan); }

/* ==========================================================
   HEADER / NAV
   ========================================================== */
.site-header{
  background:#fff;
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 1px 0 var(--line);
}
.navbar{ padding:0.7rem 0; }
.navbar-brand{
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.navbar-brand img{ height:48px; width:48px; object-fit:contain; }
.brand-text{
  font-weight:700;
  font-size:1.05rem;
  line-height:1;
  color:var(--navy);
}
.brand-text small{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:0.62rem;
  letter-spacing:0.22em;
  color:var(--ink-soft);
}
.nav-link{
  font-weight:500;
  color:var(--ink);
  margin:0 0.55rem;
  position:relative;
  padding:0.4rem 0.1rem !important;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:2px;
  background:var(--blue-bright);
  transition:width .25s ease;
}
.nav-link:hover::after,
.nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--navy); }

.btn-node{
  font-family:var(--font-mono);
  font-size:0.82rem;
  background:var(--navy);
  color:#fff !important;
  padding:0.55rem 1.1rem;
  border-radius:100px;
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  transition:background .2s, transform .2s;
}
.btn-node:hover{ background:var(--blue-bright); transform:translateY(-2px); }

.btn-ghost{
  font-family:var(--font-mono);
  font-size:0.82rem;
  border:1.5px solid rgba(255,255,255,0.35);
  color:#fff;
  padding:0.55rem 1.1rem;
  border-radius:100px;
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  transition:border-color .2s, background .2s;
}
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.08); color:#fff; }

/* ==========================================================
   CIRCUIT MOTIF (signature element)
   ========================================================== */
.circuit-line{
  stroke:rgba(255,255,255,0.22);
  stroke-width:1.4;
  fill:none;
}
.circuit-node{
  fill:var(--cyan);
  filter:drop-shadow(0 0 4px rgba(79,209,232,0.9));
}
.pulse{
  animation:pulseTravel 4.5s linear infinite;
}
@keyframes pulseTravel{
  0%{ opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .pulse{ animation:none; opacity:0.85; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position:relative;
  background:radial-gradient(120% 140% at 85% 0%, #171a9e 0%, var(--navy-deep) 60%);
  color:#fff;
  overflow:hidden;
  padding:5.5rem 0 6rem;
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.9), transparent 85%);
}
.hero__svg{
  position:absolute;
  right:-6%;
  top:50%;
  transform:translateY(-50%);
  width:56%;
  max-width:640px;
  opacity:0.9;
}
@media (max-width:991px){ .hero__svg{ display:none; } }
.hero .container{ position:relative; z-index:2; }
.hero h1{
  font-size:clamp(2.2rem,4.6vw,3.6rem);
  font-weight:700;
  line-height:1.08;
  margin:0.9rem 0 1.1rem;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--cyan),#8FA8FF);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p.lede{
  color:#c3c7f2;
  font-size:1.12rem;
  max-width:520px;
  margin-bottom:2rem;
}
.hero-cta{ display:flex; gap:0.9rem; flex-wrap:wrap; }

.hero-stats{
  display:flex;
  gap:2.4rem;
  margin-top:3rem;
  flex-wrap:wrap;
}
.hero-stats .stat b{
  font-family:var(--font-display);
  font-size:1.9rem;
  display:block;
  color:#fff;
}
.hero-stats .stat span{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  color:#9fa4d6;
  text-transform:uppercase;
}

/* mode badges (Online / Site Visit) */
.mode-badge{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.05em;
  padding:0.3rem 0.7rem;
  border-radius:100px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  color:#dfe2fa;
}
.mode-badge.light{
  background:#EEF0FC;
  border-color:var(--line);
  color:var(--navy);
}
.mode-badge i{ color:var(--cyan); }
.mode-badge.light i{ color:var(--blue-bright); }

/* ==========================================================
   MARQUEE STRIP (from banner: Technology / WebDev / Digital / Support)
   ========================================================== */
.capability-strip{
  background:var(--navy);
  color:#fff;
}
.capability-strip .cap-item{
  display:flex;
  align-items:center;
  gap:0.8rem;
  padding:1.4rem 1rem;
  border-left:1px solid rgba(255,255,255,0.14);
}
.capability-strip .cap-item:first-child{ border-left:none; }
.capability-strip .cap-item i{
  font-size:1.5rem;
  color:var(--cyan);
}
.capability-strip .cap-item span{
  font-weight:600;
  font-size:0.95rem;
  line-height:1.25;
}
@media (max-width:768px){
  .capability-strip .cap-item{ border-left:none; border-top:1px solid rgba(255,255,255,0.14); }
  .capability-strip .cap-item:first-child{ border-top:none; }
}

/* ==========================================================
   CARDS
   ========================================================== */
.service-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem 1.7rem;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
  overflow:hidden;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -14px rgba(13,5,169,0.28);
  border-color:transparent;
}
.service-card .icon-box{
  width:56px; height:56px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--navy),var(--blue-bright));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.4rem;
  margin-bottom:1.2rem;
}
.service-card h3{
  font-size:1.18rem;
  font-weight:700;
  margin-bottom:0.6rem;
}
.service-card p{
  color:var(--ink-soft);
  font-size:0.95rem;
  margin-bottom:1rem;
}
.service-card ul{
  list-style:none;
  padding:0; margin:0 0 1.1rem;
  font-size:0.88rem;
  color:var(--ink);
}
.service-card ul li{
  padding:0.28rem 0;
  display:flex;
  gap:0.5rem;
  align-items:flex-start;
}
.service-card ul li i{ color:var(--blue-bright); margin-top:0.2rem; }
.service-card .modes{ display:flex; gap:0.5rem; flex-wrap:wrap; }

.service-card--dark{
  background:linear-gradient(160deg,var(--navy-deep),#100b6b);
  color:#fff;
  border:none;
}
.service-card--dark p{ color:#b9bde8; }
.service-card--dark h3{ color:#fff; }
.service-card--dark ul{ color:#e3e5fb; }

/* Number badge for process steps */
.step{
  display:flex; gap:1.1rem;
  padding:1.6rem 0;
  border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step .num{
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--blue-bright);
  min-width:2.6rem;
}
.step h4{ font-weight:700; margin-bottom:0.3rem; }
.step p{ color:var(--ink-soft); margin:0; font-size:0.94rem; }

/* Value / about cards */
.value-card{
  padding:1.8rem;
  border-radius:var(--radius);
  background:#fff;
  border:1px solid var(--line);
  height:100%;
}
.value-card i{
  font-size:1.5rem;
  color:var(--navy);
  margin-bottom:0.8rem;
  display:block;
}
.value-card h4{ font-weight:700; font-size:1.05rem; margin-bottom:0.4rem; }
.value-card p{ color:var(--ink-soft); font-size:0.92rem; margin:0; }

/* Panel / dark section */
.panel-dark{
  background:var(--navy-deep);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.panel-dark .section-lede{ color:#b9bde8; }

/* Team-less about visual block */
.badge-pill{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  background:#EEF0FC;
  color:var(--navy);
  padding:0.32rem 0.8rem;
  border-radius:100px;
  margin:0.2rem 0.35rem 0.2rem 0;
}

/* ==========================================================
   CONTACT
   ========================================================== */
.contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem;
  display:flex;
  gap:1rem;
  align-items:flex-start;
  height:100%;
}
.contact-card .icon-box{
  width:46px; height:46px; flex:none;
  border-radius:10px;
  background:#EEF0FC;
  color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem;
}
.contact-card h4{ font-size:1rem; font-weight:700; margin-bottom:0.2rem; }
.contact-card p, .contact-card a{ font-size:0.92rem; color:var(--ink-soft); margin:0; }
.contact-card a:hover{ color:var(--navy); }

.form-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem;
}
.form-panel label{
  font-size:0.85rem;
  font-weight:600;
  margin-bottom:0.35rem;
}
.form-control, .form-select{
  border-radius:10px;
  border:1px solid var(--line);
  padding:0.65rem 0.9rem;
  font-size:0.95rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--blue-bright);
  box-shadow:0 0 0 0.2rem rgba(59,91,255,0.15);
}
.mode-toggle{
  display:flex; gap:0.7rem; flex-wrap:wrap;
}
.mode-toggle .form-check{
  border:1px solid var(--line);
  border-radius:10px;
  padding:0.6rem 1rem 0.6rem 2.2rem;
  flex:1;
  min-width:150px;
}
.mode-toggle .form-check-input:checked ~ .form-check-label{ color:var(--navy); font-weight:600; }

.alert-success-custom{
  background:#E9FBF1;
  border:1px solid #B7EFCB;
  color:#0F6B33;
  border-radius:10px;
  padding:1rem 1.2rem;
  font-size:0.92rem;
}

/* map */
.map-frame{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  filter:grayscale(0.15);
}

/* ==========================================================
   CTA BAND
   ========================================================== */
.cta-band{
  background:linear-gradient(120deg,var(--navy) 0%, #171a9e 55%, var(--blue-bright) 100%);
  color:#fff;
  border-radius:20px;
  padding:3rem;
  position:relative;
  overflow:hidden;
}
@media (max-width:768px){ .cta-band{ padding:2.2rem 1.4rem; text-align:center; } }
.cta-band h3{ font-size:1.7rem; font-weight:700; margin-bottom:0.5rem; }
.cta-band p{ color:#d6d8fb; margin-bottom:0; }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{
  background:var(--navy-deep);
  color:#c9cdf5;
  padding:4.5rem 0 0;
  position:relative;
}
.footer-brand{
  display:flex; align-items:center; gap:0.6rem;
  margin-bottom:1rem;
}
.footer-brand img{ height:44px; width:44px; object-fit:contain; }
.footer-brand span{
  color:#fff; font-weight:700; font-size:1.02rem; line-height:1.1;
}
.footer-brand span small{
  font-family:var(--font-mono);
  font-weight:500; font-size:0.6rem;
  letter-spacing:0.2em; color:#9fa4d6;
}
.footer-about{ font-size:0.9rem; color:#a6aade; max-width:320px; margin-bottom:1.1rem; }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  color:#fff; margin-right:0.5rem;
  transition:background .2s, border-color .2s;
}
.footer-social a:hover{ background:var(--blue-bright); border-color:var(--blue-bright); }
.footer-heading{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#8b8fc6;
  margin-bottom:1.1rem;
}
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:0.65rem; }
.footer-links a{ font-size:0.92rem; color:#c9cdf5; transition:color .2s; }
.footer-links a:hover{ color:#fff; }
.footer-contact{ list-style:none; padding:0; margin:0; font-size:0.9rem; }
.footer-contact li{ margin-bottom:0.75rem; display:flex; gap:0.6rem; align-items:flex-start; }
.footer-contact i{ color:var(--cyan); margin-top:0.2rem; }
.footer-contact a{ color:#c9cdf5; }
.footer-contact a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:3rem;
  padding:1.4rem 0;
  font-size:0.82rem;
  color:#8b8fc6;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem;
}

/* whatsapp float */
.whatsapp-float{
  position:fixed;
  bottom:22px; right:22px;
  width:56px; height:56px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  box-shadow:0 10px 24px rgba(37,211,102,0.45);
  z-index:1200;
  animation:floatBob 3s ease-in-out infinite;
}
@keyframes floatBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

/* ==========================================================
   PAGE HEADER (inner pages)
   ========================================================== */
.page-header{
  background:radial-gradient(120% 160% at 90% 0%, #171a9e 0%, var(--navy-deep) 60%);
  color:#fff;
  padding:3.6rem 0 3rem;
  position:relative;
  overflow:hidden;
}
.page-header .eyebrow{ color:var(--cyan); }
.page-header h1{
  font-size:clamp(1.9rem,3.6vw,2.7rem);
  font-weight:700;
  margin:0.6rem 0 0.4rem;
}
.page-header p{ color:#c3c7f2; max-width:560px; margin:0; }
.breadcrumb-mini{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:#9fa4d6;
  margin-top:1rem;
}
.breadcrumb-mini a{ color:#c3c7f2; }
.breadcrumb-mini a:hover{ color:#fff; }

/* utility */
.text-navy{ color:var(--navy); }
.bg-soft{ background:var(--bg-soft); }
.divider-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--blue-bright); display:inline-block; margin:0 0.5rem;
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }