/* =========================================================
   ENJAZ INFORMATION TECHNOLOGY — brand redesign
   ========================================================= */

:root{
  --navy:        #144f8b;
  --navy-dark:   #0d3862;
  --navy-light:  #1c66b3;
  --ink:         #161616;
  --ink-soft:    #3a3d42;
  --gold:        #d7af36;
  --gold-light:  #f0cf6d;
  --paper:       #ffffff;
  --paper-soft:  #f5f7fa;
  --paper-mist:  #eef2f7;
  --line:        #e3e8ef;
  --muted:       #6b7280;

  --font-head: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --container: 1200px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 4px 14px rgba(13,56,98,.08);
  --shadow: 0 14px 40px rgba(13,56,98,.12);
  --shadow-lg: 0 24px 60px rgba(13,56,98,.18);

  --ease: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--paper);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ font-family: var(--font-head); color: var(--ink); margin:0 0 .5em; line-height:1.25; font-weight:700; }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background: var(--gold); color: var(--ink); }

.container{ width:100%; max-width: var(--container); margin:0 auto; padding: 0 24px; }

section{ position: relative; }
.section{ padding: 120px 0; }
.section--tight{ padding: 90px 0; }
.section--alt{ background: var(--paper-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-head);
  font-size: 13px; font-weight:600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}
.eyebrow::before{
  content:''; width: 26px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--navy));
}
.section-head{ max-width: 640px; margin: 0 0 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 42px); }
.section-head p{ color: var(--muted); font-size: 17px; }
.accent{ color: var(--gold); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 32px; border-radius: 999px; font-weight:600; font-size:15px;
  font-family: var(--font-head);
  border: 2px solid transparent; transition: all .3s var(--ease); white-space: nowrap;
}
.btn-primary{ background: var(--navy); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--navy-dark); transform: translateY(-3px); box-shadow: var(--shadow); }
.btn-gold{ background: var(--gold); color: var(--ink); box-shadow: 0 10px 24px rgba(215,175,54,.35); }
.btn-gold:hover{ background: var(--gold-light); transform: translateY(-3px); }
.btn-outline{ border-color: rgba(255,255,255,.5); color:#fff; }
.btn-outline:hover{ border-color:#fff; background: rgba(255,255,255,.1); transform: translateY(-3px); }
.btn-outline-navy{ border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover{ background: var(--navy); color:#fff; transform: translateY(-3px); }
.btn i{ font-size: 13px; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-scale{ opacity:0; transform: scale(.92); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-scale.in{ opacity:1; transform:none; }
.stagger.in > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position: fixed; inset:0; z-index: 9999; background: var(--paper);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.preloader.is-hidden{ opacity:0; visibility:hidden; }
.preloader-mark{ width:56px; height:56px; position:relative; }
.preloader-mark::before{
  content:''; position:absolute; inset:0; border-radius: 8px;
  background: var(--navy); transform: rotate(45deg);
  animation: markPulse 1.1s ease-in-out infinite;
}
@keyframes markPulse{
  0%,100%{ transform: rotate(45deg) scale(1); opacity:1; }
  50%{ transform: rotate(45deg) scale(.6); opacity:.4; }
}

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  padding: 22px 0; transition: all .35s var(--ease);
}
.navbar.is-scrolled{
  padding: 12px 0; background: rgba(255,255,255,.88); backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(13,56,98,.08); border-bottom: 1px solid var(--line);
}
.navbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; font-family: var(--font-head); }
.brand-mark{ height:38px; width:auto; transition: filter .3s var(--ease); }
.brand-mark-light{ display:none; }
.navbar.is-scrolled .brand-mark-dark{ display:none; }
.navbar.is-scrolled .brand-mark-light{ display:block; }
.brand-word{ font-size: 20px; font-weight:700; letter-spacing:.01em; color:#fff; }
.brand-word span{ color: var(--gold-light); font-weight:500; }
.navbar.is-scrolled .brand-word{ color: var(--ink); }
.navbar.is-scrolled .brand-word span{ color: var(--navy); }
.footer-brand .brand-word{ color:#fff; }
.footer-brand .brand-word span{ color: var(--gold-light); font-weight:500; }

.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
  font-family: var(--font-head); font-size:14.5px; font-weight:500;
  color: var(--ink-soft); position: relative; padding: 6px 0;
}
.nav-on-dark .nav-links a{ color: rgba(255,255,255,.88); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background: var(--gold); transition: width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color: var(--navy); }
.nav-on-dark .nav-links a:hover, .nav-on-dark .nav-links a.active{ color:#fff; }
.nav-links a:hover::after, .nav-links a.active::after{ width: 100%; }
.navbar.is-scrolled .nav-links a{ color: var(--ink-soft); }
.navbar.is-scrolled .nav-links a:hover, .navbar.is-scrolled .nav-links a.active{ color: var(--navy); }

.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-toggle{
  display:none; width:44px; height:44px; border-radius:10px; border:none;
  background: rgba(20,79,139,.08); align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.nav-on-dark .nav-toggle{ background: rgba(255,255,255,.14); }
.navbar.is-scrolled .nav-toggle{ background: rgba(20,79,139,.08); }
.nav-toggle span{ width:20px; height:2px; background: var(--navy); border-radius:2px; transition: all .3s var(--ease); }
.nav-on-dark .nav-toggle span{ background:#fff; }
.navbar.is-scrolled .nav-toggle span{ background: var(--navy); }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative; min-height: 100vh; display:flex; align-items:center;
  padding: 140px 0 90px; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(215,175,54,.16), transparent 60%),
    radial-gradient(900px 560px at -6% 108%, rgba(28,102,179,.35), transparent 55%),
    linear-gradient(160deg, var(--ink) 0%, var(--navy-dark) 46%, var(--navy) 100%);
  color:#fff;
}
.hero-grid{
  position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(700px 500px at 70% 30%, #000, transparent 75%);
          mask-image: radial-gradient(700px 500px at 70% 30%, #000, transparent 75%);
}
.hero-diamond{
  position:absolute; border: 1.5px solid rgba(215,175,54,.35); border-radius: 22%;
  transform: rotate(45deg); pointer-events:none;
}
.hero-diamond.d1{ width:340px; height:340px; top:8%; right:6%; animation: floatY 9s ease-in-out infinite; }
.hero-diamond.d2{ width:170px; height:170px; bottom:10%; right:22%; border-color: rgba(255,255,255,.16); animation: floatY 7s ease-in-out infinite 1s; }
.hero-diamond.d3{ width:90px; height:90px; top:24%; left:6%; border-color: rgba(215,175,54,.5); animation: floatY 6s ease-in-out infinite .5s; display:none; }
@keyframes floatY{ 0%,100%{ transform: rotate(45deg) translateY(0); } 50%{ transform: rotate(45deg) translateY(-18px); } }

.hero-content{ position: relative; z-index:2; display:grid; grid-template-columns: 1.15fr .85fr; gap:56px; align-items:center; }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 18px 8px 8px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius: 999px; font-size:13px; font-weight:600; margin-bottom:26px; color: var(--gold-light);
}
.hero-badge img{ height:20px; }
.hero h1{
  color:#fff; font-size: clamp(34px, 4.6vw, 58px); line-height:1.14; margin-bottom:24px; letter-spacing:-.01em;
}
.hero h1 em{ font-style:normal; color: var(--gold); }
.hero-lede{ color: rgba(255,255,255,.78); font-size:18px; max-width:520px; margin-bottom:38px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px; }
.hero-stats{ display:flex; gap:44px; flex-wrap:wrap; }
.hero-stats .stat-num{ font-family: var(--font-head); font-size: 30px; font-weight:700; color:#fff; }
.hero-stats .stat-num span{ color: var(--gold); }
.hero-stats .stat-label{ font-size:13px; color: rgba(255,255,255,.6); letter-spacing:.04em; }

.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-visual-ring{
  position:relative; width: min(420px, 84%); aspect-ratio:1;
  border-radius: 32px; border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
}
.hero-visual-ring::before{
  content:''; position:absolute; inset:-1px; border-radius: 32px; padding:1px;
  background: linear-gradient(135deg, rgba(215,175,54,.7), transparent 40%, rgba(255,255,255,.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
.hero-visual-mark{ width: 56%; filter: drop-shadow(0 20px 50px rgba(0,0,0,.35)); animation: markPulse 4s ease-in-out infinite; position:relative; z-index:1; }
@keyframes markPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.05); } }
@keyframes spinSlow{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } }
.hero-visual-orbit{
  position:absolute; inset:14%; border-radius:50%;
  border: 1.5px dashed rgba(255,255,255,.18);
  pointer-events:none;
}
.hero-visual-orbit::before, .hero-visual-orbit::after{
  content:''; position:absolute; inset:-1.5px; border-radius:50%;
  border: 1.5px solid transparent;
}
.hero-visual-orbit::before{
  border-top-color: var(--gold); border-right-color: rgba(215,175,54,.35);
  animation: spinSlow 9s linear infinite;
}
.hero-visual-orbit::after{
  border-bottom-color: rgba(255,255,255,.5);
  animation: spinSlow 14s linear infinite reverse;
}

.hero-scroll{
  position:absolute; bottom:28px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color: rgba(255,255,255,.55); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  z-index:2;
}
.hero-scroll::after{
  content:''; width:1px; height:34px; background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{ opacity:0; transform: scaleY(0); transform-origin: top; } 40%{ opacity:1; transform: scaleY(1); transform-origin: top; } 100%{ opacity:0; transform: scaleY(1); transform-origin: bottom; } }

/* =========================================================
   MARQUEE (trust strip)
   ========================================================= */
.trust-strip{ background: var(--ink); padding: 18px 0; overflow:hidden; }
.trust-track{ display:flex; align-items:center; gap:64px; width:max-content; animation: marquee 34s linear infinite; }
.trust-strip:hover .trust-track{ animation-play-state: paused; }
.trust-track span{ font-family: var(--font-head); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.45); white-space:nowrap; }
.trust-track span strong{ color: var(--gold); font-weight:600; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* =========================================================
   ABOUT
   ========================================================= */
.about{ overflow:hidden; }
.about-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:70px; align-items:center; }
.about-visual{ position:relative; }
.about-frame{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/5;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
  box-shadow: var(--shadow-lg);
  display:flex; align-items:center; justify-content:center;
}
.about-frame img{ width:44%; opacity:.95; filter: drop-shadow(0 16px 30px rgba(0,0,0,.3)); }
.about-frame::before{
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.about-badge{
  position:absolute; bottom:-28px; right:-28px; background:#fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 22px 26px; text-align:center; min-width:150px;
}
.about-badge .num{ font-family: var(--font-head); font-size:34px; font-weight:700; color: var(--navy); }
.about-badge .num span{ color: var(--gold); }
.about-badge .lbl{ font-size:12.5px; color: var(--muted); letter-spacing:.03em; }
.about-copy p{ color: var(--muted); font-size:16.5px; }
.about-points{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin: 30px 0 36px; }
.about-point{ display:flex; align-items:flex-start; gap:12px; }
.about-point i{
  width:34px; height:34px; min-width:34px; border-radius:10px; background: rgba(20,79,139,.08); color: var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:14px; margin-top:2px;
}
.about-point strong{ display:block; font-family: var(--font-head); font-size:14.5px; color: var(--ink); }
.about-point p{ margin:2px 0 0; font-size:13.5px; color: var(--muted); }

/* =========================================================
   SERVICES
   ========================================================= */
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; }
.service-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 40px 32px; transition: all .35s var(--ease); overflow:hidden;
}
.service-card::before{
  content:''; position:absolute; left:0; top:0; height:4px; width:100%;
  background: linear-gradient(90deg, var(--navy), var(--gold)); transform: scaleX(0); transform-origin:left;
  transition: transform .4s var(--ease);
}
.service-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card:hover::before{ transform: scaleX(1); }
.service-num{ font-family: var(--font-head); font-size:13px; font-weight:700; color: var(--gold); letter-spacing:.1em; }
.service-icon{
  width:58px; height:58px; border-radius:16px; background: rgba(20,79,139,.08); color: var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:24px; margin: 18px 0 24px;
  transition: all .35s var(--ease);
}
.service-card:hover .service-icon{ background: var(--navy); color:#fff; }
.service-card h3{ font-size:20px; margin-bottom:12px; }
.service-card p{ color: var(--muted); font-size:15px; margin-bottom:0; }

/* =========================================================
   WHY US
   ========================================================= */
.why-us{ background: var(--ink); color:#fff; position:relative; overflow:hidden; }
.why-us::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(700px 420px at 90% 10%, rgba(20,79,139,.5), transparent 60%);
}
.why-us .section-head p{ color: rgba(255,255,255,.62); }
.why-us .eyebrow{ color: var(--gold-light); }
.why-grid{ position:relative; display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; }
.why-card{
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  padding: 32px 26px; transition: all .35s var(--ease);
}
.why-card:hover{ background: rgba(255,255,255,.08); border-color: rgba(215,175,54,.4); transform: translateY(-6px); }
.why-card i{ font-size:26px; color: var(--gold); margin-bottom:18px; display:block; }
.why-card h4{ color:#fff; font-size:17px; margin-bottom:10px; }
.why-card p{ color: rgba(255,255,255,.6); font-size:14px; margin:0; }

/* =========================================================
   CLIENTS
   ========================================================= */
.clients-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
.client-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px; display:flex; align-items:center; gap:14px; transition: all .3s var(--ease);
}
.client-card:hover{ box-shadow: var(--shadow); transform: translateY(-4px); border-color: rgba(20,79,139,.25); }
.client-logo{
  width:52px; height:52px; min-width:52px; border-radius:12px; overflow:hidden; background: var(--paper-mist);
  display:flex; align-items:center; justify-content:center;
}
.client-logo img{ width:100%; height:100%; object-fit:cover; }
.client-info h5{ font-family: var(--font-head); font-size:13.5px; font-weight:600; color: var(--ink); margin:0 0 3px; line-height:1.3; }
.client-info p{ font-size:12px; color: var(--muted); margin:0; display:flex; align-items:center; gap:5px; }
.client-info p i{ color: var(--gold); font-size:10px; }
.clients-more{ text-align:center; margin-top:40px; }

/* =========================================================
   PROJECTS
   ========================================================= */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:48px; }
.filter-btn{
  padding:10px 22px; border-radius:999px; border:1px solid var(--line); background:#fff;
  font-family: var(--font-head); font-size:13.5px; font-weight:600; color: var(--ink-soft);
  transition: all .25s var(--ease);
}
.filter-btn:hover{ border-color: var(--navy); color: var(--navy); }
.filter-btn.active{ background: var(--navy); border-color: var(--navy); color:#fff; }

.projects-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; }
.project-card{
  position:relative; border-radius: var(--radius); overflow:hidden; background:#fff;
  border:1px solid var(--line); transition: all .35s var(--ease);
}
.project-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: transparent; }

.project-frame{ background: var(--paper-mist); border-bottom:1px solid var(--line); }
.frame-bar{ display:flex; align-items:center; gap:6px; padding:12px 16px; background:#fff; border-bottom:1px solid var(--line); }
.frame-bar span{ width:9px; height:9px; border-radius:50%; background:#e1e5eb; }
.frame-bar span:nth-child(1){ background:#ff5f57; }
.frame-bar span:nth-child(2){ background:#febc2e; }
.frame-bar span:nth-child(3){ background:#28c840; }

.project-thumb{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio: 16/9; overflow:hidden;
  background: var(--paper-mist); border:none; padding:16px; margin:0; cursor: zoom-in;
}
.project-thumb img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  filter: drop-shadow(0 6px 16px rgba(13,56,98,.12));
  transition: transform .45s var(--ease);
}
.project-card:hover .project-thumb img{ transform: scale(1.045); }
.project-zoom-icon{
  position:absolute; inset:0; background: rgba(13,56,98,.38);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px;
  opacity:0; transition: opacity .3s var(--ease);
}
.project-card:hover .project-zoom-icon{ opacity:1; }

.project-body{ padding: 20px 24px 24px; }
.project-tag{
  display:inline-block; font-family: var(--font-head); font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color: var(--navy); background: rgba(20,79,139,.08);
  padding:5px 11px; border-radius:999px; margin-bottom:10px;
}
.project-body h4{ font-size:16.5px; margin-bottom:8px; }
.project-visit{
  display:inline-flex; align-items:center; gap:6px; font-family: var(--font-head); font-weight:600;
  font-size:12.5px; color: var(--navy); white-space:nowrap;
}
.project-visit:hover{ color: var(--gold); }
.project-visit i{ font-size:10px; }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index: 1100; background: rgba(9,17,28,.92);
  display:flex; align-items:center; justify-content:center; padding: 40px;
  opacity:0; visibility:hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-figure{ margin:0; max-width: min(1100px, 92vw); max-height: 86vh; text-align:center; }
.lightbox-figure img{
  max-width:100%; max-height: 78vh; width:auto; height:auto; margin:0 auto; border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5); transform: scale(.94); transition: transform .3s var(--ease);
}
.lightbox.is-open .lightbox-figure img{ transform:none; }
.lightbox-figure figcaption{
  color: rgba(255,255,255,.85); font-family: var(--font-head); font-weight:600; font-size:14.5px; margin-top:18px;
}
.lightbox-close{
  position:absolute; top:24px; right:24px; width:46px; height:46px; border-radius:50%; border:none;
  background: rgba(255,255,255,.1); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:18px; transition: all .25s var(--ease);
}
.lightbox-close:hover{ background: var(--gold); color: var(--ink); transform: rotate(90deg); }
@media (max-width:600px){
  .lightbox{ padding: 20px; }
  .lightbox-close{ top:14px; right:14px; width:40px; height:40px; }
}

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner{
  position:relative; overflow:hidden; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--navy-dark), var(--navy) 60%, var(--navy-light));
  padding: 70px 60px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  color:#fff;
}
.cta-banner::after{
  content:''; position:absolute; width:340px; height:340px; border-radius:24%; border:1px solid rgba(215,175,54,.35);
  transform: rotate(45deg); right:-90px; top:-140px; pointer-events:none;
}
.cta-banner h3{ color:#fff; font-size: clamp(24px,3vw,32px); max-width:520px; margin-bottom:10px; }
.cta-banner p{ color: rgba(255,255,255,.7); margin:0; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; margin-bottom:56px; }
.contact-grid--two{ grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left:auto; margin-right:auto; }
.contact-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 30px 28px;
  display:flex; gap:18px; align-items:flex-start; transition: all .3s var(--ease);
}
.contact-card:hover{ box-shadow: var(--shadow); transform: translateY(-4px); }
.contact-card i{
  width:48px; height:48px; min-width:48px; border-radius:14px; background: rgba(20,79,139,.08); color: var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:19px;
}
.contact-card h5{ font-family: var(--font-head); font-size:15px; color: var(--ink); margin-bottom:8px; }
.contact-card p, .contact-card a{ font-size:14.5px; color: var(--muted); margin:0; display:block; }
.contact-card a:hover{ color: var(--navy); }

.social-row{ display:flex; align-items:center; justify-content:center; gap:14px; padding-top: 40px; margin-top: 40px; border-top:1px solid var(--line); }
.social-row a{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line); color: var(--navy);
  display:flex; align-items:center; justify-content:center; transition: all .3s var(--ease); font-size:16px;
}
.social-row a:hover{ background: var(--navy); border-color: var(--navy); color:#fff; transform: translateY(-4px); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--ink); color: rgba(255,255,255,.6); padding: 64px 0 26px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:44px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-brand .brand-word{ color:#fff; }
.footer-about p{ font-size:14px; color: rgba(255,255,255,.5); margin: 16px 0 0; max-width:280px; }
.footer-col h6{ font-family: var(--font-head); color:#fff; font-size:14px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:20px; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col a{ font-size:14.5px; color: rgba(255,255,255,.55); transition: color .25s var(--ease); }
.footer-col a:hover{ color: var(--gold); }
.footer-col p{ font-size:14.5px; color: rgba(255,255,255,.55); margin-bottom:10px; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top: 26px; flex-wrap:wrap; gap:12px; }
.footer-bottom p{ margin:0; font-size:13.5px; color: rgba(255,255,255,.4); }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.7); font-size:14px; transition: all .25s var(--ease); }
.footer-social a:hover{ background: var(--gold); color: var(--ink); }

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top{
  position: fixed; right: 26px; bottom: 26px; width:48px; height:48px; border-radius:50%;
  background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow); opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .3s var(--ease); z-index: 900; font-size:16px;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background: var(--gold); color: var(--ink); }

/* =========================================================
   COUNTER
   ========================================================= */
.counter-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
.counter-item{ text-align:center; padding: 34px 20px; background:#fff; border:1px solid var(--line); border-radius: var(--radius); }
.counter-item .num{ font-family: var(--font-head); font-size:38px; font-weight:700; color: var(--navy); }
.counter-item .num span{ color: var(--gold); }
.counter-item .lbl{ font-size:13.5px; color: var(--muted); margin-top:6px; letter-spacing:.02em; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  .hero-content{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; max-width:340px; margin: 0 auto 20px; }
  .about-grid{ grid-template-columns: 1fr; }
  .about-visual{ max-width:420px; margin: 0 auto; }
  .why-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .services-grid{ grid-template-columns: 1fr 1fr; }
  .projects-grid{ grid-template-columns: 1fr 1fr; }
  .clients-grid{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .counter-row{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px){
  .nav-links{
    position: fixed; top: 0; right:0; height:100vh; width: min(320px,80vw);
    background:#fff; flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding: 110px 32px 32px; gap:26px; box-shadow: -20px 0 50px rgba(0,0,0,.15);
    transform: translateX(100%); transition: transform .4s var(--ease); z-index: 999;
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-links a{ color: var(--ink) !important; font-size:16px; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn-primary{ display:none; }
  .section{ padding: 84px 0; }
  .hero{ padding-top: 120px; }
  .hero-visual{ margin-top: 10px; }
  .hero-visual-ring{ width: min(280px, 78%); }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-stats{ gap:26px; }
  .about-points{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
  .projects-grid{ grid-template-columns: 1fr; }
  .clients-grid{ grid-template-columns: 1fr; }
  .counter-row{ grid-template-columns: 1fr 1fr; }
  .cta-banner{ padding: 44px 28px; flex-direction:column; align-items:flex-start; }
  .footer-top{ grid-template-columns: 1fr; }
}