/* FAIME Construction — Futuristic Visual Layer (CSS-only, zero JS, ~9KB)
   Gradient-border glass cards, shimmer headings, marquee strip, glow CTAs,
   grid-line hero overlay. GPU-cheap: only transform/opacity animate. */

/* ─────────── SHIMMER SECTION HEADINGS ─────────── */
.section-title span{
  background:linear-gradient(100deg,#C9A84C 20%,#F5E08A 40%,#E5C060 60%,#C9A84C 80%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:fxShimmer 5s linear infinite;
}
@keyframes fxShimmer{ to{ background-position:200% center; } }

/* ─────────── HERO: TECH GRID OVERLAY ─────────── */
#hero::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:
    linear-gradient(rgba(201,168,76,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,168,76,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 30% 40%,#000 0%,transparent 75%);
          mask-image:radial-gradient(ellipse 90% 80% at 30% 40%,#000 0%,transparent 75%);
}

/* ─────────── MARQUEE TRADE STRIP ─────────── */
.fx-marquee{
  background:var(--navy2,#071428); border-top:1px solid rgba(201,168,76,.25);
  border-bottom:1px solid rgba(201,168,76,.25);
  overflow:hidden; padding:18px 0; position:relative;
}
.fx-marquee::before,.fx-marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.fx-marquee::before{ left:0; background:linear-gradient(90deg,var(--navy2,#071428),transparent); }
.fx-marquee::after{ right:0; background:linear-gradient(-90deg,var(--navy2,#071428),transparent); }
.fx-marquee-track{
  display:flex; width:max-content; gap:0;
  animation:fxMarquee 28s linear infinite;
  will-change:transform;
}
.fx-marquee span{
  font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:900;
  letter-spacing:4px; text-transform:uppercase; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(201,168,76,.55);
  padding:0 28px; display:flex; align-items:center; gap:28px;
}
.fx-marquee span::after{ content:'◆'; font-size:10px; color:var(--gold,#C9A84C); -webkit-text-stroke:0; }
@keyframes fxMarquee{ to{ transform:translateX(-50%); } }
.fx-marquee:hover .fx-marquee-track{ animation-play-state:paused; }

/* ─────────── GRADIENT-BORDER GLASS CARDS ─────────── */
.service-card,.why-card,.testi-client-card,.gc-card,.promise-card,.process-step{
  position:relative; z-index:1; overflow:hidden;
}
.service-card::after,.why-card::after,.testi-client-card::after{
  content:''; position:absolute; inset:0; z-index:-1; padding:1px;
  background:linear-gradient(135deg,rgba(201,168,76,.55),transparent 35%,transparent 65%,rgba(201,168,76,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s;
  border-radius:inherit; pointer-events:none;
}
.service-card:hover::after,.why-card:hover::after,.testi-client-card:hover::after{ opacity:1; }
.service-card:hover,.why-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(12,31,63,.16), 0 0 0 1px rgba(201,168,76,.25), 0 8px 28px rgba(201,168,76,.12);
}

/* Sweep light across cards on hover */
.service-card::before,.gc-card::before{
  content:''; position:absolute; top:0; left:-70%; width:45%; height:100%; z-index:0;
  background:linear-gradient(105deg,transparent,rgba(201,168,76,.10),transparent);
  transform:skewX(-18deg); transition:left .65s ease; pointer-events:none;
}
.service-card:hover::before,.gc-card:hover::before{ left:135%; }

/* ─────────── GLOW CTAS ─────────── */
.btn-gold,.cta-btn,.nav-cta{
  position:relative;
  box-shadow:0 0 0 rgba(201,168,76,0);
  transition:transform .25s,box-shadow .3s,background .25s !important;
}
.btn-gold:hover,.nav-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(201,168,76,.45), 0 0 18px rgba(201,168,76,.25);
}
.btn-outline:hover,.btn-outline-white:hover{
  box-shadow:0 0 22px rgba(201,168,76,.25);
}

/* ─────────── STAT NUMBERS: GOLD PULSE UNDERLINE ─────────── */
.stat-item{ position:relative; overflow:hidden; }
.stat-item::after{
  content:''; position:absolute; left:50%; bottom:0; width:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold,#C9A84C),transparent);
  transform:translateX(-50%); transition:width .45s ease;
}
.stat-item:hover::after{ width:70%; }
.stat-number{ transition:transform .3s, text-shadow .3s; }
.stat-item:hover .stat-number{ transform:scale(1.06); text-shadow:0 0 24px rgba(201,168,76,.35); }

/* ─────────── SECTION DIVIDER: ANGLED GOLD BEAM ─────────── */
.fx-beam{
  height:2px; border:none; margin:0;
  background:linear-gradient(90deg,transparent 0%,rgba(201,168,76,.65) 35%,#E5C060 50%,rgba(201,168,76,.65) 65%,transparent 100%);
  position:relative; overflow:visible;
}
.fx-beam::after{
  content:''; position:absolute; left:50%; top:50%; width:9px; height:9px;
  background:#E5C060; transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 16px rgba(229,192,96,.9);
}

/* ─────────── NAV: GLASS BLUR + GOLD HAIRLINE ─────────── */
nav#navbar{
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(201,168,76,.22) !important;
}

/* ─────────── PROJECT CARDS: ZOOM + GOLD FRAME ─────────── */
.project-card{ overflow:hidden; position:relative; }
.project-card img{ transition:transform .8s cubic-bezier(.22,1,.36,1); }
.project-card:hover img{ transform:scale(1.07); }
.project-card::after{
  content:''; position:absolute; inset:10px; border:1px solid rgba(201,168,76,0);
  transition:border-color .4s, inset .4s; pointer-events:none;
}
.project-card:hover::after{ border-color:rgba(201,168,76,.55); inset:14px; }

/* ─────────── REDUCED MOTION / MOBILE SANITY ─────────── */
@media (prefers-reduced-motion:reduce){
  .section-title span{ animation:none; }
  .fx-marquee-track{ animation:none; }
}
@media (max-width:768px){
  .fx-marquee span{ font-size:17px; letter-spacing:3px; padding:0 18px; }
  #hero::before{ background-size:44px 44px; }
}

/* ─────────── PREMIUM TYPE SCALE (ashira-grade presence) ─────────── */
.hero-static-headline{
  font-size:clamp(44px, 6.2vw, 92px) !important;
  line-height:1.02 !important; letter-spacing:-1px;
}
.hero-desc{ font-size:clamp(14px, 1.15vw, 17px); max-width:600px; }
.section-title{ font-size:clamp(38px, 4.6vw, 64px); letter-spacing:-.5px; }
section{ scroll-margin-top:90px; }

/* ─────────── DEEP CINEMATIC VIGNETTES ON NAVY SECTIONS ─────────── */
#for-contractors,#precision-numbers,#cta-band{
  background-image:radial-gradient(ellipse 120% 90% at 50% -10%,rgba(201,168,76,.07) 0%,transparent 55%),
                   radial-gradient(ellipse 100% 100% at 50% 110%,rgba(0,0,0,.35) 0%,transparent 60%) !important;
  background-color:var(--navy2,#071428) !important;
}

/* ─────────── HERO SLIDES: RICHER GRADE ─────────── */
.hero-slide{ filter:saturate(1.08) contrast(1.05); }
.hero-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(7,20,40,.92) 0%,rgba(7,20,40,.55) 45%,rgba(7,20,40,.25) 100%);
}

/* ─────────── EYEBROW TAGS: GOLD TICK ─────────── */
.section-tag{ position:relative; }
.section-tag::before{
  content:''; display:inline-block; width:26px; height:2px; margin-right:10px;
  background:linear-gradient(90deg,var(--gold,#C9A84C),transparent); vertical-align:middle;
}

/* ─────────── FOOTER: TOP GOLD HAIRLINE GLOW ─────────── */
footer{ position:relative; }
footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,.6),transparent);
}

/* ─────────── OFFER MODAL ─────────── */
#faime-promo{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center; }
#faime-promo .fp-backdrop{
  position:absolute; inset:0; background:rgba(7,20,40,.72);
  backdrop-filter:blur(6px); animation:fpFade .4s ease both;
}
#faime-promo .fp-card{
  position:relative; width:min(480px,calc(100vw - 36px));
  background:linear-gradient(160deg,#0C1F3F 0%,#071428 100%);
  border:1px solid rgba(201,168,76,.45); border-top:3px solid #C9A84C;
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(201,168,76,.12);
  padding:38px 36px 30px; text-align:center;
  animation:fpPop .5s cubic-bezier(.22,1,.36,1) both;
  font-family:'Barlow',sans-serif;
}
@keyframes fpFade{ from{opacity:0} to{opacity:1} }
@keyframes fpPop{ from{opacity:0; transform:translateY(26px) scale(.96)} to{opacity:1; transform:none} }
#faime-promo.fp-out{ transition:opacity .3s; opacity:0; }
.fp-close{
  position:absolute; top:10px; right:14px; background:none; border:none;
  font-size:26px; color:rgba(255,255,255,.45); cursor:pointer; line-height:1;
}
.fp-close:hover{ color:#C9A84C; }
.fp-kicker{
  font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:rgba(201,168,76,.85); margin-bottom:14px;
}
.fp-title{
  font-family:'Barlow Condensed',sans-serif; font-size:clamp(26px,4vw,34px);
  font-weight:900; color:#fff; line-height:1.1; text-transform:uppercase;
  letter-spacing:.5px; margin-bottom:14px;
}
.fp-title span{
  background:linear-gradient(100deg,#C9A84C 20%,#F5E08A 50%,#C9A84C 80%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; animation:fxShimmer 4s linear infinite;
}
.fp-body{ font-size:14px; line-height:1.7; color:rgba(255,255,255,.72); margin-bottom:16px; }
.fp-body strong{ color:#E5C060; font-weight:700; }
.fp-code{
  display:inline-block; font-size:12.5px; letter-spacing:1px; color:rgba(255,255,255,.65);
  border:1px dashed rgba(201,168,76,.5); padding:8px 18px; margin-bottom:20px;
}
.fp-code strong{ color:#E5C060; letter-spacing:3px; }
.fp-cta{
  display:block; background:linear-gradient(95deg,#C9A84C,#E5C060);
  color:#0C1F3F; font-family:'Barlow Condensed',sans-serif; font-size:17px;
  font-weight:900; letter-spacing:2px; text-transform:uppercase;
  padding:15px 18px; text-decoration:none; transition:transform .25s, box-shadow .3s;
}
.fp-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 34px rgba(201,168,76,.5); }
.fp-trust{ margin-top:16px; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.35); }
@media (max-width:600px){ #faime-promo .fp-card{ padding:30px 22px 24px; } }

/* ─────────── FILM GRAIN ON NAVY SECTIONS (premium texture, ~0KB) ─────────── */
#for-contractors::after,#precision-numbers::after,#cta-band::after,#hero .hero-slides::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.04; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
#for-contractors,#precision-numbers,#cta-band{ position:relative; }
