/* =========================================================
   Target One — Site Stylesheet
   Signature motif: the "blueprint" diagonal grid + circular
   badge language lifted straight from the company profile
   cover page, used as a recurring texture across the site.
========================================================= */

:root{
  --navy:#0F3D63;
  --navy-dark:#0A2A46;
  --sky:#2E8BC0;
  --gold:#F5A623;
  --sun:#FFD34D;
}

html{scroll-behavior:smooth;}
body{ overflow-x:hidden; }

/* ---------- Blueprint diagonal texture (signature element) ---------- */
.blueprint-bg{
  background-image:
    repeating-linear-gradient(135deg, rgba(15,61,99,0.05) 0px, rgba(15,61,99,0.05) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(45deg, rgba(15,61,99,0.04) 0px, rgba(15,61,99,0.04) 1px, transparent 1px, transparent 64px);
}
.blueprint-bg-dark{
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 64px);
}
.blueprint-navy{
  background-color:var(--navy);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 56px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 56px);
}

/* ---------- Loading screen ---------- */
#loader{ transition:opacity .6s ease, visibility .6s ease; }
#loader.loader-hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-ring{
  position:absolute; inset:-22px; border-radius:9999px;
  border:3px solid rgba(15,61,99,0.12);
  border-top-color:var(--gold);
  border-right-color:var(--sky);
  animation:spin 1.4s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.loader-logo{ animation:pulseLogo 1.8s ease-in-out infinite; }
@keyframes pulseLogo{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
.loader-name, .loader-tag{ opacity:0; animation:fadeUp .7s ease forwards; animation-delay:.3s; }
.loader-tag{ animation-delay:.5s; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.skyline-strip{
  width:min(90vw,520px); height:80px;
  background-size:cover; background-position:center;
  opacity:.55; -webkit-mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
          mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
}

/* ---------- Header ---------- */
#site-header{ background:transparent; }
#site-header[data-state="scrolled"]{
  background:rgba(10,42,70,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 24px -10px rgba(0,0,0,.35);
}
#site-header[data-state="top"]{ background:linear-gradient(to bottom, rgba(10,42,70,0.55), transparent); }
.nav-brand-text{ text-shadow:0 1px 6px rgba(0,0,0,.25); }
.nav-link{
  color:rgba(255,255,255,0.88);
  padding:.55rem .9rem; border-radius:999px; position:relative;
  transition:.25s;
}
.nav-link:hover{ background:rgba(255,255,255,0.12); color:#fff; }
.mnav-link{ color:#fff; padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.08); }
.lang-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  color:#fff; background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.25);
  padding:.45rem .9rem; border-radius:999px; font-size:.8rem; font-weight:600;
  transition:.25s;
}
.lang-pill:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy-dark); }
.btn-gold{
  background:linear-gradient(135deg, var(--gold), var(--sun));
  color:var(--navy-dark); font-weight:800; padding:.6rem 1.4rem; border-radius:999px;
  box-shadow:0 8px 20px -6px rgba(245,166,35,.55);
  transition:.25s; font-size:.85rem;
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -6px rgba(245,166,35,.7); }

/* ---------- Buttons (general) ---------- */
.btn-primary{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--gold); color:var(--navy-dark); font-weight:800;
  padding:.85rem 1.8rem; border-radius:999px; transition:.25s;
  box-shadow:0 10px 24px -8px rgba(245,166,35,.6);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -8px rgba(245,166,35,.7); }
.btn-outline{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1.5px solid rgba(255,255,255,.55); color:#fff; font-weight:700;
  padding:.8rem 1.7rem; border-radius:999px; transition:.25s;
}
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* ---------- Hero ---------- */
.hero-section{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:linear-gradient(120deg, rgba(10,42,70,0.94), rgba(15,61,99,0.86) 45%, rgba(46,139,192,0.55)), var(--navy);
  overflow:hidden;
}
.hero-bg-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.35; mix-blend-mode:luminosity;
}
.hero-skyline{
  position:absolute; bottom:0; inset-inline:0; height:18vw; max-height:220px;
  background-repeat:repeat-x; background-size:auto 100%; background-position:bottom;
  opacity:.5;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25);
  color:#fff; padding:.4rem 1rem; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.02em;
  backdrop-filter:blur(6px);
}
.hero-title-shine{
  background:linear-gradient(90deg,#fff, #cfe8fa 40%, var(--sun) 70%, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.float-orb{
  position:absolute; border-radius:9999px; filter:blur(60px); opacity:.35; pointer-events:none;
}

/* parallax layers */
.parallax-layer{ will-change:transform; }

/* ---------- Section labels ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'JetBrains Mono', monospace; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sky); font-weight:600;
}
.eyebrow::before{ content:''; width:22px; height:2px; background:var(--gold); display:inline-block; }

/* ---------- Cards ---------- */
.vm-card{
  background:#fff; border-radius:1.5rem; padding:2.2rem;
  box-shadow:0 10px 30px -14px rgba(15,61,99,.25);
  border:1px solid rgba(15,61,99,.06);
  position:relative; overflow:hidden; transition:.35s;
}
.vm-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -16px rgba(15,61,99,.35); }
.vm-card::after{
  content:''; position:absolute; inset-inline-end:-40px; top:-40px; width:140px; height:140px;
  background:radial-gradient(circle, rgba(245,166,35,.15), transparent 70%);
  border-radius:9999px;
}

.expertise-card{
  background:#fff; border:1px solid rgba(15,61,99,.08); border-radius:1.1rem;
  padding:1.6rem 1.3rem; text-align:center; transition:.3s; cursor:default;
  position:relative;
}
.expertise-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 34px -14px rgba(15,61,99,.3);
  border-color:transparent;
  background:linear-gradient(180deg,#fff, #F0F7FC);
}
.expertise-icon{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  margin:0 auto .9rem; background:linear-gradient(135deg, var(--navy), var(--sky));
  color:#fff; transition:.3s;
}
.expertise-card:hover .expertise-icon{ transform:rotate(-8deg) scale(1.08); background:linear-gradient(135deg, var(--gold), var(--sun)); color:var(--navy-dark); }

/* ---------- Work / experience tabs ---------- */
.tab-btn{
  padding:.65rem 1.3rem; border-radius:999px; font-size:.85rem; font-weight:700;
  color:var(--navy); background:#fff; border:1px solid rgba(15,61,99,.15); transition:.25s; white-space:nowrap;
}
.tab-btn.active, .tab-btn:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadeUp .5s ease; }

/* ---------- Project cards ---------- */
.project-card{
  background:#fff; border-radius:1.25rem; overflow:hidden; position:relative;
  box-shadow:0 8px 24px -14px rgba(15,61,99,.3); border:1px solid rgba(15,61,99,.06);
  transition:.35s;
}
.project-card:hover{ transform:translateY(-8px); box-shadow:0 22px 40px -16px rgba(15,61,99,.35); }
.project-card .pc-img{ height:220px; overflow:hidden; position:relative; }
.project-card .pc-img img{ width:100%; height:100%; object-fit:cover; transition:.6s ease; }
.project-card:hover .pc-img img{ transform:scale(1.12); }
.project-card .pc-tag{
  position:absolute; top:.9rem; inset-inline-start:.9rem; background:rgba(10,42,70,.75);
  color:#fff; font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.08em;
  padding:.3rem .7rem; border-radius:999px; backdrop-filter:blur(4px);
}

/* ---------- Marquee (clients) ---------- */
.marquee-track{ display:flex; gap:3rem; animation:marquee 28s linear infinite; width:max-content; }
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
[dir="rtl"] .marquee-track{ animation-name:marquee-rtl; }
@keyframes marquee-rtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }
.brand-pill{
  display:flex; align-items:center; justify-content:center;
  padding:.9rem 1.8rem; border:1px solid rgba(15,61,99,.12); border-radius:.8rem;
  font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--navy); background:#fff;
  white-space:nowrap; transition:.3s;
}
.brand-pill:hover{ background:var(--navy); color:#fff; transform:translateY(-3px); }

/* ---------- Company info badges ---------- */
.info-badge{
  background:#fff; border:1px dashed rgba(15,61,99,.25); border-radius:1rem; padding:1.6rem 1rem; text-align:center;
  transition:.3s;
}
.info-badge:hover{ border-style:solid; border-color:var(--gold); transform:translateY(-4px); }
.info-badge .ib-icon{ width:46px; height:46px; margin:0 auto .7rem; color:var(--gold); }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden; border-radius:2rem;
  background:linear-gradient(120deg, var(--navy-dark), var(--navy) 60%, var(--sky));
}

/* ---------- Scroll-top + WhatsApp float ---------- */
.whatsapp-float{
  position:fixed; bottom:24px; inset-inline-end:24px; z-index:60;
  width:58px; height:58px; border-radius:9999px; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -6px rgba(37,211,102,.6);
  animation:floatBounce 2.6s ease-in-out infinite;
}
@keyframes floatBounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.scroll-top-btn{
  position:fixed; bottom:24px; inset-inline-start:24px; z-index:60;
  width:44px; height:44px; border-radius:9999px; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transition:.3s; box-shadow:0 8px 20px -6px rgba(15,61,99,.5);
}
.scroll-top-btn.show{ opacity:1; visibility:visible; }

.social-btn{
  width:38px; height:38px; border-radius:9999px; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:.25s;
  border:1px solid rgba(255,255,255,.12);
}
.social-btn:hover{ background:var(--gold); color:var(--navy-dark); border-color:var(--gold); }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- Misc ---------- */
.section-pad{ padding-block:5.5rem; }
@media (max-width:768px){ .section-pad{ padding-block:3.5rem; } }

.stat-number{ font-family:'JetBrains Mono',monospace; }

::selection{ background:var(--gold); color:#fff; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#eef3f7; }
::-webkit-scrollbar-thumb{ background:var(--sky); border-radius:99px; }