/* styles.css - MM&CK Construction - Complete | UPGRADED v2 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* CORE PALETTE */
  --navy:        #080F1A;
  --navy-mid:    #0D1826;
  --navy-light:  #142035;
  --navy-soft:   #1C2E4A;

  /* GOLD SYSTEM */
  --gold:        #C8992E;
  --gold-light:  #DBA83A;
  --gold-bright: #E8BF5A;
  --gold-pale:   #F5E6C0;
  --gold-dim:    rgba(200,153,46,.10);
  --gold-mid:    rgba(200,153,46,.30);
  --gold-glow:   0 0 40px rgba(200,153,46,.28);

  /* NEUTRALS */
  --charcoal:    #1E2533;
  --slate:       #3D4B60;
  --mist:        #7A8898;
  --silver:      #B8C4D0;
  --white:       #F8F9FB;
  --off-white:   #EEF1F6;
  --green-wa:    #25D366;
  --paper:       #040810;
  --paper2:      #070C14;

  --M:           'Share Tech Mono', monospace;
  --ease:        cubic-bezier(.22,1,.36,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:   'DM Sans', system-ui, sans-serif;
  --font-mono:   'DM Mono', monospace;
  --nav-h:             88px;
  --nav-scrolled-h:    68px;
  --section-pad:       100px;
  --container:         1200px;
  --shadow-sm:  0 2px 8px rgba(4,8,16,.18);
  --shadow-md:  0 8px 32px rgba(4,8,16,.28);
  --shadow-lg:  0 20px 60px rgba(4,8,16,.40);
  --radius:     6px;
  --radius-lg:  12px;
}

/* ANIMATIONS */
@keyframes ticker     { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes pulse      { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
@keyframes fadeIn     { to{opacity:1} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes heroLineIn { to{opacity:1;transform:translateY(0)} }
@keyframes heroZoom   { from{transform:scale(1.06) translateZ(0)} to{transform:scale(1.12) translateZ(0)} }
@keyframes scanBar    { to{left:200%} }
@keyframes loaderOut  { to{opacity:0;pointer-events:none;visibility:hidden} }
@keyframes drawLine   { to{stroke-dashoffset:0} }
@keyframes stripSheen { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
@keyframes lightPulse { from{opacity:.6;transform:scale(1)} to{opacity:1;transform:scale(1.18)} }
@keyframes waRipple   { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.8);opacity:0} }
@keyframes loaderBar  { 0%{left:-30%} 100%{left:100%} }
@keyframes floatParticle {
  0%  {opacity:0;transform:translateY(0) translateX(0)}
  15% {opacity:var(--max-op,.4)}
  85% {opacity:var(--max-op,.4)}
  100%{opacity:0;transform:translateY(-120px) translateX(var(--drift,20px))}
}

/* BASE */
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.6;
  overscroll-behavior: none;
}
body.loading { overflow:hidden; height:100%; position:fixed; width:100%; overscroll-behavior:none; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
@media (max-width: 768px) {
  .container,.hero-content,.ann-bar,nav { padding-left:1rem; padding-right:1rem; }
}

/* LOADER */
#loader {
  position:fixed; inset:0; background:var(--paper);
  z-index:10000; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:2rem; pointer-events:none;
}
#loader button,#loader a { pointer-events:auto; }
#loader-svg { width:min(600px,90vw); height:auto; }
#loader-label {
  font-family:var(--M); font-size:11px; letter-spacing:4px;
  color:var(--gold); text-transform:uppercase; opacity:0;
  animation:fadeIn .5s ease 1.2s forwards;
}
#loader-bar { width:200px; height:1px; background:var(--gold-dim); position:relative; overflow:hidden; }
#loader-bar::after {
  content:''; position:absolute; inset-block:0; left:-100%; width:100%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:scanBar 1.5s ease .4s infinite;
}
#loader.hide { animation:loaderOut .6s var(--ease) forwards; }
.draw { stroke-dasharray:2000; stroke-dashoffset:2000; }
.draw.go { animation:drawLine 2s var(--ease) forwards; }

/* UTILITIES */
.container { max-width:var(--container); margin:0 auto; padding:0 2rem; }
section { padding:var(--section-pad) 0; }
a { text-decoration:none; }

/* TYPOGRAPHY */
.section-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:1rem;
}
.section-eyebrow::before,.section-eyebrow::after {
  content:''; display:block; width:28px; height:1px; background:var(--gold); opacity:.55;
}
.section-eyebrow.center { justify-content:center; }
.section-title {
  font-family:var(--font-display);
  font-size:clamp(36px,5vw,60px);
  font-weight:700; line-height:1.06; color:var(--white); letter-spacing:-.5px;
}
.section-title .accent { color:var(--gold); }
.section-sub { font-size:16px; font-weight:400; color:var(--silver); line-height:1.8; max-width:560px; }

/* MOBILE MENU */
.mobile-overlay {
  position:fixed; inset:0; background:rgba(4,8,16,.65);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  z-index:9998; opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.mobile-overlay.open { opacity:1; pointer-events:all; }
.mobile-menu {
  position:fixed; top:0; right:0; width:85%; max-width:340px; height:100vh;
  background:rgba(8,15,26,.88);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-left:1px solid rgba(200,153,46,.22); z-index:9999;
  transform:translateX(100%) scale(.98); opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease;
  padding:120px 28px 40px;
}
.mobile-menu.open { transform:translateX(0) scale(1); opacity:1; }
.mobile-menu ul { list-style:none; display:flex; flex-direction:column; gap:22px; }
.mobile-menu li { opacity:0; transform:translateX(30px); transition:all .4s ease; }
.mobile-menu.open li { opacity:1; transform:translateX(0); }
.mobile-menu.open li:nth-child(1){transition-delay:.08s}
.mobile-menu.open li:nth-child(2){transition-delay:.14s}
.mobile-menu.open li:nth-child(3){transition-delay:.20s}
.mobile-menu.open li:nth-child(4){transition-delay:.26s}
.mobile-menu.open li:nth-child(5){transition-delay:.32s}
.mobile-menu.open li:nth-child(6){transition-delay:.38s}
.mobile-menu a { font-size:16px; color:#E6ECF5; text-decoration:none; font-weight:500; position:relative; transition:.3s; }
.mobile-menu a:hover { color:var(--gold); transform:translateX(6px); }
.mobile-cta {
  margin-top:10px; display:inline-block;
  background:var(--gold); color:#080F1A !important;
  padding:12px 18px; border-radius:var(--radius); font-weight:700;
}

/* HAMBURGER */
.hamburger { position:relative; z-index:10000; }
.hamburger span { display:block; width:26px; height:2px; background:#fff; transition:all .35s ease; }
.hamburger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:14px; font-weight:600;
  letter-spacing:.5px; padding:14px 28px; border-radius:var(--radius);
  border:none; cursor:pointer; transition:all .25s var(--ease-out);
  text-decoration:none; white-space:nowrap; position:relative; overflow:hidden;
}
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background .2s; border-radius:inherit; }
.btn:active::after { background:rgba(255,255,255,.1); }
.btn-primary { background:var(--gold); color:var(--navy); box-shadow:0 4px 20px rgba(200,153,46,.38); }
.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 32px rgba(200,153,46,.55); }
.btn-primary:active { transform:translateY(0); }
.btn-outline { background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.22); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); background:rgba(200,153,46,.08); transform:translateY(-1px); }
.btn-wa { background:var(--green-wa); color:#fff; box-shadow:0 4px 16px rgba(37,211,102,.28); }
.btn-wa:hover { background:#1da851; transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,211,102,.48); }
.btn-dark { background:var(--navy-mid); color:var(--white); border:1.5px solid rgba(255,255,255,.14); }
.btn-dark:hover { background:var(--navy-light); border-color:var(--gold); transform:translateY(-1px); }

/* NAVIGATION */
#fixedHeader { position:fixed; top:0; left:0; right:0; z-index:500; transition:transform .35s var(--ease); }
#fixedHeader.nav-hidden { transform:translateY(-100%); }

/* Announcement / scarcity bar — warm dark strip, gold accent */
.ann-bar, .scarcity-banner {
  background:linear-gradient(90deg, #120800 0%, #200D00 50%, #120800 100%);
  border-bottom:1px solid rgba(200,153,46,.45);
  padding:9px 2rem; text-align:center;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:1.5px;
  color:var(--silver); display:flex; align-items:center; justify-content:center; gap:10px;
  position:relative; overflow:hidden;
}
.ann-bar::before, .scarcity-banner::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(200,153,46,.025) 40px,rgba(200,153,46,.025) 41px);
}
.ann-bar span, .scarcity-text span { color:var(--gold-bright); font-weight:700; }
.ann-bar .ann-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); animation:pulse 2s infinite; flex-shrink:0; }
.scarcity-text {
  font-family:'Barlow Condensed',sans-serif; font-size:15px;
  font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:#DEC98A; position:relative; z-index:1;
}
@media (max-width:768px) {
  .scarcity-text { font-size:11px; letter-spacing:.5px; }
  .ann-bar,.scarcity-banner { padding:10px 12px; }
}

nav {
  position:relative; z-index:2001; height:var(--nav-h);
  padding-inline:clamp(1rem,4vw,2rem);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(8,15,26,.0);
  transition:height .4s ease,background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
nav.scrolled {
  background:rgba(8,15,26,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(200,153,46,.18);
  box-shadow:0 4px 32px rgba(0,0,0,.35);
  height:var(--nav-scrolled-h);
}
.nav-logo { display:flex; align-items:center; text-decoration:none; }
.nav-logo-img { height:72px; width:auto; max-width:260px; object-fit:contain; display:block; transition:height .4s ease,opacity .3s,filter .3s; }
.nav-logo:hover .nav-logo-img { opacity:.85; }
nav.scrolled .nav-logo-img { height:54px; }
.nav-links { display:flex; gap:2.2rem; list-style:none; align-items:center; }
.nav-links a { text-decoration:none; color:var(--silver); font-size:13.5px; font-weight:500; letter-spacing:.3px; transition:color .25s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--gold); transition:width .3s ease; border-radius:2px; }
.nav-links a:hover { color:var(--white); }
.nav-links a:hover::after { width:100%; }
.nav-links a.active { color:var(--white); }
.nav-links a.active::after { width:100%; }
.nav-cta {
  background:var(--gold) !important; color:var(--navy) !important;
  padding:10px 22px !important; border-radius:var(--radius) !important;
  font-weight:700 !important; letter-spacing:.3px;
  transition:background .25s,transform .2s,box-shadow .25s !important; font-size:13.5px !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { background:var(--gold-light) !important; color:var(--navy) !important; transform:translateY(-1px) !important; box-shadow:0 6px 20px rgba(200,153,46,.45) !important; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; z-index:1100; }
.hamburger span { display:block; width:26px; height:2px; background:var(--white); transition:all .3s; border-radius:2px; }
.hamburger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* REVEAL SYSTEM */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s var(--ease-out),transform .75s var(--ease-out); }
.reveal.revealed { opacity:1; transform:translateY(0); }
.reveal-delay-1{transition-delay:.1s} .reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s} .reveal-delay-4{transition-delay:.4s}

/* ================================================================
   HERO — COMPLETE REBUILD
================================================================ */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:clip; }

.hero-bg {
  position:absolute; inset:0;
  background-image:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1800&q=80');
  background-size:cover; background-position:center;
  transform:scale(1.08) translateZ(0); will-change:transform;
  animation:heroZoom 22s ease-in-out infinite alternate;
}

.hero-particles { position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.hero-particle {
  position:absolute; width:2px; height:2px; background:var(--gold); border-radius:50%; opacity:0;
  animation:floatParticle var(--dur,8s) var(--delay,0s) ease-in-out infinite;
}

.hero-light {
  position:absolute; top:-20%; right:-10%; width:600px; height:600px;
  background:radial-gradient(ellipse at center,rgba(200,153,46,.09) 0%,transparent 70%);
  pointer-events:none; z-index:4; animation:lightPulse 6s ease-in-out infinite alternate;
}

/* Deepened overlay for premium contrast */
.hero-overlay {
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(
    108deg,
    rgba(8,15,26,.97)  0%,
    rgba(8,15,26,.91) 38%,
    rgba(8,15,26,.76) 65%,
    rgba(8,15,26,.87) 100%
  );
}
.hero-overlay::after {
  content:''; pointer-events:none; position:absolute; inset:0;
  background:linear-gradient(145deg,transparent 55%,rgba(200,153,46,.08) 100%);
}

.hero-content {
  position:relative; z-index:10; max-width:var(--container); margin:0 auto;
  padding-inline:clamp(1rem,4vw,2rem);
  padding-top:140px; padding-bottom:70px;
}

/* Badge tag */
.hero-tag {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(200,153,46,.13); border:1px solid rgba(200,153,46,.40);
  border-radius:100px; padding:7px 18px 7px 10px;
  margin-bottom:2.2rem; opacity:0;
  animation:fadeInDown .8s var(--ease-out) .3s forwards;
}
.hero-tag-dot { width:8px; height:8px; border-radius:50%; background:var(--gold-bright); animation:pulse 2s infinite; }
.hero-tag span { font-family:var(--font-mono); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold-bright); }

/* Hero title — larger, tighter, more commanding */
.hero-title {
  font-family:var(--font-display);
  font-size:clamp(52px,8vw,104px);
  line-height:.97; letter-spacing:-2.5px;
  color:var(--white); margin-bottom:1.75rem; overflow:hidden;
}
/* Gold accent — brightest gold + warm glow */
.hero-title .accent {
  color:var(--gold-bright);
  text-shadow:0 0 80px rgba(200,153,46,.40),0 0 20px rgba(200,153,46,.20);
}
/* Faded word — legible at .58, clearly subordinate */
.hero-title .faded { color:rgba(248,249,251,.58); }

.hero-title-line {
  display:block; opacity:0; transform:translateY(40px);
  animation:heroLineIn .9s var(--ease-out) var(--line-delay,.5s) forwards;
}

/* Hero subtext — weight 400, higher-contrast silver */
.hero-sub {
  font-size:clamp(15px,1.8vw,18px); font-weight:400;
  color:var(--silver); max-width:540px; line-height:1.75;
  margin-bottom:2.5rem; opacity:0; animation:fadeInUp .8s var(--ease-out) .9s forwards;
}

.hero-ctas {
  display:flex; gap:1rem; flex-wrap:wrap; opacity:0;
  animation:fadeInUp .8s var(--ease-out) 1.1s forwards; margin-bottom:3.5rem;
}

/* Stats row — gold-tinted separator, brighter numbers */
.hero-stats {
  display:flex; gap:3.5rem; flex-wrap:wrap; opacity:0;
  animation:fadeInUp .8s var(--ease-out) 1.3s forwards;
  padding-top:2.5rem; border-top:1px solid rgba(200,153,46,.22);
}
.hero-stat-num {
  font-family:var(--font-display); font-size:44px; font-weight:700;
  color:var(--gold-bright); line-height:1; letter-spacing:-1px;
}
.hero-stat-label { font-size:13px; color:var(--silver); margin-top:5px; letter-spacing:.3px; }

/* ================================================================
   CREDENTIALS STRIP
================================================================ */
.credentials-strip {
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-light) 55%,var(--gold) 100%);
  padding:20px 0; position:relative; overflow:hidden;
}
.credentials-strip::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
  animation:stripSheen 4s ease-in-out infinite;
}
.credentials-strip .container { display:flex; align-items:center; justify-content:center; gap:3rem; flex-wrap:wrap; position:relative; z-index:1; }
.cred-item { display:flex; align-items:center; gap:10px; transition:transform .25s var(--ease-out); }
.cred-item:hover { transform:translateY(-2px); }
.cred-icon { font-size:22px; flex-shrink:0; }
.cred-text { font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--navy); letter-spacing:.3px; }
.cred-divider { width:1px; height:28px; background:rgba(8,15,26,.22); }

/* SERVICES GRID */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(200,153,46,.08); }
.service-card { background:var(--navy-mid); padding:40px 32px; position:relative; overflow:hidden; transition:background .35s var(--ease-out),transform .3s var(--ease-out); cursor:default; }
.service-card::before { content:''; position:absolute; top:0; left:0; width:3px; height:0; background:linear-gradient(to bottom,var(--gold-bright),var(--gold)); transition:height .45s var(--ease-out); }
.service-card::after { content:''; position:absolute; top:0; right:0; width:100%; height:100%; background:linear-gradient(135deg,rgba(200,153,46,0) 60%,rgba(200,153,46,.05) 100%); opacity:0; transition:opacity .35s; }
.service-card:hover { background:var(--navy-light); }
.service-card:hover::before { height:100%; }
.service-card:hover::after { opacity:1; }
.service-card-num { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:3px; color:var(--gold); opacity:.65; margin-bottom:1rem; }
.service-card-icon { font-size:32px; margin-bottom:1rem; display:block; transition:transform .35s var(--ease-out); }
.service-card:hover .service-card-icon { transform:scale(1.1) rotate(-4deg); }
.service-card-title { font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--white); margin-bottom:.6rem; line-height:1.2; }
.service-card-desc { font-size:14px; color:var(--mist); line-height:1.7; margin-bottom:1.5rem; font-weight:300; }
.service-card-link { font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:gap .25s var(--ease-out),color .2s; text-decoration:none; }
.service-card-link:hover { gap:14px; color:var(--gold-bright); }

/* PORTFOLIO GRID */
.portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:280px; gap:3px; }
.portfolio-item { position:relative; overflow:hidden; background:var(--navy-light); }
.portfolio-item.large  { grid-column:span 2; grid-row:span 2; }
.portfolio-item.medium { grid-column:span 1; grid-row:span 2; }
.portfolio-item.small  { grid-column:span 1; grid-row:span 1; }
.portfolio-img { width:100%; height:100%; min-height:220px; object-fit:cover; display:block; transition:transform .65s var(--ease-out),filter .4s; filter:brightness(.88); }
.portfolio-item:hover .portfolio-img { transform:scale(1.07); filter:brightness(.65); }
.portfolio-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(8,15,26,.96) 0%,transparent 55%); display:flex; align-items:flex-end; padding:24px; opacity:0; transition:opacity .35s; }
.portfolio-item:hover .portfolio-overlay { opacity:1; }
.portfolio-info-title { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--white); margin-bottom:4px; }
.portfolio-info-tag { font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; color:var(--gold); }

/* PORTFOLIO SINGLE-COL */
.portfolio-single-col { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:2rem; padding:0 1rem; }
.pf-card { position:relative; border-radius:1.5rem; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.5); opacity:0; transition:opacity .7s var(--ease),transform .7s var(--ease); }
.pf-card.from-left  { transform:translateX(-80px); }
.pf-card.from-right { transform:translateX(80px); }
.pf-card.visible    { opacity:1; transform:translateX(0); }
.pf-card img { width:100%; height:420px; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.pf-card:hover img { transform:scale(1.03); }
.pf-overlay { position:absolute; bottom:0; left:0; right:0; padding:2rem 1.75rem 1.75rem; background:linear-gradient(to top,rgba(4,8,16,.97) 0%,rgba(4,8,16,.82) 55%,rgba(4,8,16,0) 100%); pointer-events:none; }
.pf-overlay-title { font-family:var(--font-display); font-size:1.35rem; font-weight:700; color:var(--white); margin-bottom:.5rem; line-height:1.2; }
.pf-overlay-tag { display:inline-block; font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-bright); margin-bottom:.6rem; }
.pf-overlay-bullets { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.3rem .8rem; }
.pf-overlay-bullets li { font-size:12.5px; color:rgba(184,196,208,.9); display:flex; align-items:center; gap:5px; }
.pf-overlay-bullets li::before { content:''; width:4px; height:4px; background:var(--gold); border-radius:50%; flex-shrink:0; }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-img-stack { position:relative; height:500px; }
.about-img-main { position:absolute; top:0; left:0; width:80%; height:85%; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); transition:transform .4s var(--ease-out); }
.about-img-stack:hover .about-img-main { transform:scale(1.015); }
.about-img-second { position:absolute; bottom:0; right:0; width:55%; height:52%; object-fit:cover; border-radius:var(--radius-lg); border:4px solid var(--navy-mid); box-shadow:var(--shadow-md); transition:transform .4s var(--ease-out) .05s; }
.about-img-stack:hover .about-img-second { transform:translate(-4px,-4px); }
.about-badge { position:absolute; bottom:60px; left:-20px; background:var(--gold); border-radius:var(--radius); padding:20px 22px; text-align:center; box-shadow:var(--shadow-md),0 0 30px rgba(200,153,46,.28); }
.about-badge-num { font-family:var(--font-display); font-size:38px; font-weight:900; color:var(--navy); line-height:1; }
.about-badge-sub { font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--navy); opacity:.75; margin-top:4px; }
.about-features { display:flex; flex-direction:column; gap:1.5rem; margin-top:2rem; }
.about-feature { display:flex; gap:16px; align-items:flex-start; transition:transform .25s var(--ease-out); }
.about-feature:hover { transform:translateX(4px); }
.about-feature-icon { width:44px; height:44px; background:rgba(200,153,46,.1); border:1px solid rgba(200,153,46,.28); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; transition:background .25s,border-color .25s; }
.about-feature:hover .about-feature-icon { background:rgba(200,153,46,.2); border-color:rgba(200,153,46,.55); }
.about-feature-title { font-weight:700; font-size:15px; color:var(--white); margin-bottom:3px; }
.about-feature-desc { font-size:13.5px; color:var(--mist); line-height:1.65; }

/* CREDENTIALS SECTION */
.credentials-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:rgba(200,153,46,.08); }
.cred-card { background:var(--navy-mid); padding:48px 40px; display:flex; gap:24px; align-items:flex-start; transition:background .3s; position:relative; overflow:hidden; }
.cred-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--gold-bright),transparent); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-out); }
.cred-card:hover { background:var(--navy-light); }
.cred-card:hover::after { transform:scaleX(1); }
.cred-card-icon-wrap { width:64px; height:64px; background:rgba(200,153,46,.1); border:1.5px solid rgba(200,153,46,.32); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; transition:background .25s,transform .3s var(--ease-out); }
.cred-card:hover .cred-card-icon-wrap { background:rgba(200,153,46,.2); transform:scale(1.05); }
.cred-card-label { font-family:var(--font-mono); font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:8px; font-weight:500; }
.cred-card-title { font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--white); margin-bottom:10px; line-height:1.2; }
.cred-card-desc { font-size:14px; color:var(--mist); line-height:1.7; font-weight:300; }
.cred-card-badge { display:inline-flex; align-items:center; gap:6px; margin-top:12px; background:rgba(200,153,46,.1); border:1px solid rgba(200,153,46,.25); border-radius:100px; padding:5px 14px; font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); }

/* PROCESS STEPS */
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.process-steps::before { content:''; position:absolute; top:36px; left:12%; right:12%; height:1px; background:rgba(200,153,46,.25); }
.process-step { padding:0 24px; text-align:center; }
.process-step-num { width:72px; height:72px; border-radius:50%; background:var(--navy-mid); border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--gold); margin:0 auto 1.5rem; transition:background .3s,transform .3s var(--ease-out),box-shadow .3s; }
.process-step:hover .process-step-num { background:var(--gold); color:var(--navy); transform:scale(1.08); box-shadow:0 0 28px rgba(200,153,46,.4); }
.process-step-title { font-weight:700; font-size:16px; color:var(--white); margin-bottom:.6rem; }
.process-step-desc { font-size:13.5px; color:var(--mist); line-height:1.7; font-weight:300; }

/* WHO WE SERVE */
.serve-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:rgba(200,153,46,.1); }
.serve-card { background:var(--navy-mid); padding:44px 28px; text-align:center; transition:background .3s var(--ease-out),transform .3s var(--ease-out); position:relative; overflow:hidden; }
.serve-card::before { content:''; position:absolute; bottom:0; left:50%; right:50%; height:2px; background:var(--gold); transition:left .35s var(--ease-out),right .35s var(--ease-out); }
.serve-card:hover { background:var(--navy-light); transform:translateY(-3px); }
.serve-card:hover::before { left:0; right:0; }
.serve-card-icon { font-size:44px; margin-bottom:1rem; display:block; transition:transform .35s var(--ease-out); }
.serve-card:hover .serve-card-icon { transform:scale(1.1) translateY(-2px); }
.serve-card-title { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--white); margin-bottom:.6rem; }
.serve-card-desc { font-size:13.5px; color:var(--mist); line-height:1.7; }

/* TESTIMONIALS */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(255,255,255,.04); }
.testimonial-card { background:var(--navy-mid); padding:40px 32px; transition:background .3s; position:relative; overflow:hidden; }
.testimonial-card::after { content:'"'; position:absolute; top:16px; right:24px; font-family:var(--font-display); font-size:100px; color:rgba(200,153,46,.07); line-height:1; pointer-events:none; transition:color .3s; }
.testimonial-card:hover { background:var(--navy-light); }
.testimonial-card:hover::after { color:rgba(200,153,46,.13); }
.testimonial-stars { color:var(--gold); font-size:13px; margin-bottom:1rem; }
.testimonial-text { font-size:15px; font-weight:300; color:var(--silver); line-height:1.8; margin-bottom:2rem; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:14px; }
.testimonial-avatar { width:46px; height:46px; border-radius:50%; background:var(--navy-light); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--gold); border:2px solid rgba(200,153,46,.3); transition:border-color .25s,transform .25s var(--ease-out); }
.testimonial-card:hover .testimonial-avatar { border-color:var(--gold); transform:scale(1.05); }
.testimonial-name { font-weight:700; font-size:14px; color:var(--white); }
.testimonial-role { font-family:var(--font-mono); font-size:11px; letter-spacing:1px; color:var(--gold); margin-top:2px; }

/* CONTACT */
.contact-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; align-items:start; }
.contact-info-item { display:flex; gap:16px; align-items:flex-start; margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.06); transition:transform .25s var(--ease-out); }
.contact-info-item:hover { transform:translateX(4px); }
.contact-info-item:last-child { border-bottom:none; }
.contact-info-icon { width:50px; height:50px; background:rgba(200,153,46,.1); border:1.5px solid rgba(200,153,46,.25); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; transition:background .25s,border-color .25s; }
.contact-info-item:hover .contact-info-icon { background:rgba(200,153,46,.2); border-color:var(--gold); }
.contact-info-label { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:5px; }
.contact-info-value { font-size:15px; color:var(--white); font-weight:500; }
.contact-form { background:var(--navy-mid); padding:48px; border-radius:var(--radius-lg); border:1px solid rgba(200,153,46,.14); transition:border-color .3s,box-shadow .3s; }
.contact-form:focus-within { border-color:rgba(200,153,46,.3); box-shadow:0 8px 40px rgba(8,15,26,.4); }
.contact-form-title { font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--white); margin-bottom:.4rem; }
.contact-form-sub { font-size:14px; color:var(--mist); margin-bottom:2rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-group.full { grid-column:span 2; }
.form-label { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:var(--mist); }
.form-input,.form-select,.form-textarea { background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.09); border-radius:var(--radius); padding:13px 16px; color:var(--white); font-family:var(--font-body); font-size:15px; outline:none; transition:border-color .25s,background .25s,box-shadow .25s; }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--gold); background:rgba(200,153,46,.05); box-shadow:0 0 0 3px rgba(200,153,46,.1); }
.form-textarea { resize:vertical; min-height:120px; }
.form-select option { background:var(--navy-mid); }
.form-submit { width:100%; margin-top:1.5rem; background:var(--gold); color:var(--navy); padding:17px; font-family:var(--font-body); font-size:15px; font-weight:700; letter-spacing:.5px; border:none; border-radius:var(--radius); cursor:pointer; transition:all .3s var(--ease-out); position:relative; overflow:hidden; }
.form-submit::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent); transform:translateX(-100%); transition:transform .5s; }
.form-submit:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 28px rgba(200,153,46,.45); }
.form-submit:hover::before { transform:translateX(100%); }
.form-submit:active { transform:translateY(0); }

/* CTA SECTION */
.cta-section { background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 55%,#E8BF5A 100%); padding:var(--section-pad) 0; text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; background:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1800') center/cover; opacity:.05; }
.cta-section::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(8,15,26,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(8,15,26,.05) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; }
.cta-title { font-family:var(--font-display); font-size:clamp(40px,5.5vw,70px); color:var(--navy); line-height:1.0; margin-bottom:1.2rem; }
.cta-sub { font-size:17px; color:rgba(8,15,26,.72); margin-bottom:2.5rem; font-weight:400; }
.cta-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* PAGE HERO */
.page-hero { min-height:380px; display:flex; align-items:flex-end; position:relative; padding-bottom:60px; margin-top:116px; }
.page-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(8,15,26,1) 25%,rgba(8,15,26,.55) 100%); }
.page-hero-content { position:relative; z-index:2; }
.page-hero-title { font-family:var(--font-display); font-size:clamp(48px,7vw,88px); line-height:.95; color:var(--white); }
.page-hero-title span { color:var(--gold-bright); }

/* FOOTER */
footer { background:var(--navy); border-top:1px solid rgba(200,153,46,.14); padding:72px 0 32px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:60px; margin-bottom:60px; }
.footer-logo-img { height:72px; width:auto; max-width:240px; object-fit:contain; display:block; margin-bottom:1rem; }
.footer-brand-desc { font-size:14px; color:var(--mist); line-height:1.8; margin-bottom:1.5rem; font-weight:300; }
.footer-heading { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links a { text-decoration:none; font-size:14px; color:var(--mist); transition:color .2s,padding-left .25s var(--ease-out); cursor:pointer; display:block; }
.footer-links a:hover { color:var(--white); padding-left:6px; }
.footer-contact-item { display:flex; gap:10px; margin-bottom:12px; font-size:14px; color:var(--mist); }
.footer-contact-item span:first-child { color:var(--gold); font-size:16px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06); padding-top:28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:13px; color:var(--mist); }
.footer-copy span { color:var(--gold); }

/* WHATSAPP FLOAT */
.whatsapp-float { position:fixed; bottom:28px; right:28px; z-index:2000; width:62px; height:62px; background:var(--green-wa); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .3s var(--ease-out),box-shadow .3s; text-decoration:none; }
.whatsapp-float::before,.whatsapp-float::after { content:''; position:absolute; width:100%; height:100%; border-radius:50%; background:var(--green-wa); opacity:0; z-index:-1; }
.whatsapp-float::before { animation:waRipple 2.5s ease-out 1s infinite; }
.whatsapp-float::after  { animation:waRipple 2.5s ease-out 1.8s infinite; }
.whatsapp-float:hover { transform:scale(1.12); box-shadow:0 8px 32px rgba(37,211,102,.6); }
.whatsapp-float svg { width:30px; height:30px; fill:#fff; position:relative; z-index:1; }
.whatsapp-tooltip { position:absolute; right:72px; background:var(--navy-mid); color:var(--white); padding:9px 14px; border-radius:var(--radius); font-family:var(--font-mono); font-size:12px; letter-spacing:1px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .25s,transform .25s var(--ease-out); transform:translateX(8px); border:1px solid rgba(200,153,46,.22); }
.whatsapp-float:hover .whatsapp-tooltip { opacity:1; transform:translateX(0); }

/* WA PANEL */
.wa-panel { background:linear-gradient(135deg,#128C7E,#25D366); border-radius:var(--radius); padding:28px; margin-top:2rem; transition:transform .3s var(--ease-out),box-shadow .3s; }
.wa-panel:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(37,211,102,.25); }
.wa-panel-label { font-family:var(--font-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:6px; }
.wa-panel-title { font-family:var(--font-display); font-size:26px; color:#fff; margin-bottom:.6rem; font-weight:700; }
.wa-panel-desc { font-size:14px; color:rgba(255,255,255,.82); margin-bottom:1.5rem; line-height:1.6; }
.wa-panel-btn { display:inline-block; background:#fff; color:#128C7E; padding:13px 26px; border-radius:var(--radius); font-weight:700; font-size:14px; letter-spacing:.3px; text-decoration:none; transition:opacity .2s,transform .25s var(--ease-out); }
.wa-panel-btn:hover { opacity:.9; transform:translateY(-1px); }

/* RESPONSIVE */
@media (max-width:1024px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
  .about-grid { grid-template-columns:1fr; gap:48px; }
  .contact-layout { grid-template-columns:1fr; gap:48px; }
  .process-steps { grid-template-columns:repeat(2,1fr); gap:40px; }
  .process-steps::before { display:none; }
  .serve-grid { grid-template-columns:repeat(2,1fr); }
  .credentials-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  :root { --nav-h:68px; --nav-scrolled-h:58px; --section-pad:70px; }
  .nav-links,.nav-cta { display:none; }
  .hamburger { display:flex; }
  .ann-bar,.scarcity-banner { font-size:10px; letter-spacing:.8px; padding:8px 1rem; }
  .hero-content { padding-top:110px; }
  .page-hero { margin-top:104px; }
  .hero-title { font-size:clamp(42px,11vw,68px); letter-spacing:-1.5px; }
  .hero-stats { gap:2rem; }
  .services-grid { grid-template-columns:1fr; }
  .testimonials-grid { grid-template-columns:1fr; }
  .portfolio-grid { grid-template-columns:1fr; grid-auto-rows:220px; }
  .portfolio-item.large,.portfolio-item.medium,.portfolio-item.small { grid-column:span 1 !important; grid-row:span 1 !important; }
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .form-grid { grid-template-columns:1fr; }
  .form-group.full { grid-column:span 1; }
  .contact-form { padding:28px; }
  .process-steps { grid-template-columns:1fr; }
  .serve-grid { grid-template-columns:1fr; }
  .about-img-stack { height:340px; }
  .about-badge { left:0; font-size:28px; padding:14px 16px; }
  .footer-logo-img { height:58px; }
  .credentials-strip .container { gap:1.5rem; }
  .cred-divider { display:none; }
  .hero-light { display:none; }
  .hero-particle { display:none; }
  .whatsapp-tooltip { display:none; }
  .pf-card img { height:300px; }
  .pf-overlay-title { font-size:1.1rem; }
  .pf-overlay-bullets li { font-size:11.5px; }
}
@media (max-width:480px) {
  .hero-stats { gap:1.5rem; }
  .hero-stat-num { font-size:34px; }
  .cta-buttons { flex-direction:column; align-items:center; }
  .hero-ctas { flex-direction:column; }
  .hero-ctas .btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
  .pf-card { opacity:1 !important; transform:none !important; transition:none !important; }
}