/* ================================================================
   Asquare AI — Dark Feature Layer
   Adds the new UX (modern floating nav, micro-interactions,
   staggered reveals) to the ORIGINAL navy + gold theme.
   Loads AFTER global.css. No intro/preloader.
================================================================ */

/* ===== MODERN FLOATING ISLAND NAV (dark glass) ===== */
.navbar { padding: 18px 0; }
.nav-inner {
  max-width: 1180px; padding: 10px 14px 10px 20px; border-radius: 100px;
  background: rgba(10,18,32,0.55);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 16px 46px -20px rgba(0,0,0,0.75);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.navbar.scrolled { padding: 12px 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; box-shadow: none; }
.navbar.scrolled .nav-inner { background: rgba(6,12,22,0.88); box-shadow: 0 20px 54px -18px rgba(0,0,0,0.85); }
.nav-menu { gap: 30px; }

/* ===== MICRO-INTERACTIONS ===== */
.magnetic { transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1); will-change: transform; }

.tilt { transform-style: preserve-3d; transition: transform 0.42s cubic-bezier(0.16,1,0.3,1); will-change: transform; position: relative; }
.tilt-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(232,196,160,0.18), transparent 45%);
  opacity: 0; transition: opacity 0.24s ease;
}
.tilt:hover .tilt-glare { opacity: 1; }

.ripple-ink {
  position: absolute; border-radius: 50%; transform: translate(-50%,-50%) scale(0);
  background: rgba(255,255,255,0.18); pointer-events: none;
  animation: rippleOut 0.6s cubic-bezier(0.16,1,0.3,1) forwards; z-index: 3;
}
@keyframes rippleOut { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }

/* ===== STAGGERED SCROLL REVEAL ===== */
.reveal-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.reveal-stagger.in-view > * { opacity: 1; transform: none; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.35s; }

/* ================================================================
   PREMIUM GLASS — shared card surface (dark, gold-accented)
================================================================ */
.gcard {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.022) 45%, rgba(255,255,255,0.012) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 28px 56px -34px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.07);
}
.gcard::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,196,160,0.55), transparent);
  opacity: 0; transition: opacity 0.4s ease;
}
.gcard:hover::after { opacity: 1; }
.gcard:hover { border-color: rgba(196,149,106,0.35); box-shadow: 0 40px 80px -38px rgba(0,0,0,0.95), 0 0 0 1px rgba(196,149,106,0.1); }

/* ================================================================
   SERVICES — premium glass cards
================================================================ */
.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.svc-card { display: flex; flex-direction: column; padding: 32px; border-radius: 20px; text-decoration: none; color: inherit; }
.svc-c-num { position: absolute; top: 26px; right: 28px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.18); }
.svc-c-ic { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
  background: linear-gradient(140deg, rgba(196,149,106,0.20), rgba(196,149,106,0.05)); border: 1px solid rgba(196,149,106,0.28); position: relative; z-index: 1; }
.svc-c-ic svg { width: 25px; height: 25px; color: var(--gold-light); }
.svc-c-name { font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: 7px; letter-spacing: -0.01em; position: relative; z-index: 1; }
.svc-c-tag { font-size: 0.68rem; color: var(--gold); letter-spacing: 0.02em; margin-bottom: 16px; font-weight: 600; position: relative; z-index: 1; }
.svc-c-desc { font-size: 0.88rem; color: var(--white-40); line-height: 1.65; flex: 1; margin-bottom: 20px; position: relative; z-index: 1; }
.svc-c-arr { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 700; color: var(--gold); transition: gap 0.25s ease; position: relative; z-index: 1; }
.svc-card:hover .svc-c-arr { gap: 13px; }
.svc-c-arr svg { width: 15px; height: 15px; }

/* ================================================================
   WHY US — tidy 2x2 glass grid
================================================================ */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 52px; }
.why-card-d { padding: 38px; border-radius: 20px; }
.wcd-num { font-family: 'Space Grotesk', sans-serif; font-size: 2.1rem; font-weight: 800; line-height: 1; margin-bottom: 18px;
  background: linear-gradient(135deg, #F5D5B0, #C4956A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; position: relative; z-index: 1; }
.why-card-d h3 { font-size: 1.22rem; font-weight: 700; color: #fff; margin-bottom: 13px; letter-spacing: -0.01em; position: relative; z-index: 1; }
.why-card-d p { color: var(--white-40); line-height: 1.75; font-size: 0.92rem; position: relative; z-index: 1; }

/* ================================================================
   PROCESS — modern glass step cards w/ gold badges
================================================================ */
.process-grid-v2 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; border: none !important; margin-top: 52px; }
.process-v2 { border: 1px solid rgba(255,255,255,0.10) !important; border-right: 1px solid rgba(255,255,255,0.10) !important; border-radius: 20px; padding: 32px 28px !important;
  background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.022) 45%, rgba(255,255,255,0.012) 100%);
  box-shadow: 0 28px 56px -34px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.07); }
.process-v2:hover { border-color: rgba(196,149,106,0.35) !important; background: rgba(255,255,255,0.05) !important; }
.process-v2 .pv2-num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(140deg, rgba(196,149,106,0.22), rgba(196,149,106,0.05)); border: 1px solid rgba(196,149,106,0.3);
  font-size: 1.2rem; font-weight: 800; color: var(--gold-light); opacity: 1; margin-bottom: 20px; }
.process-v2 .pv2-line { display: none; }
.process-v2 h3 { color: #fff; }
.process-v2 p { color: var(--white-40); }

/* Process section — premium blue gradient backdrop */
.proc-blue { position: relative; overflow: hidden; background: linear-gradient(165deg, #060F1E 0%, #0A1B3C 46%, #0E2C58 100%); }
.proc-blue::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 52% at 82% -4%, rgba(37,99,235,0.28), transparent 60%),
              radial-gradient(ellipse 50% 50% at 8% 108%, rgba(196,149,106,0.12), transparent 62%); }
.proc-blue .container { position: relative; z-index: 1; }
.proc-blue .process-v2 { background: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.015) 100%); border-color: rgba(255,255,255,0.14) !important; }
.proc-blue .process-v2:hover { border-color: rgba(196,149,106,0.4) !important; }

/* ================================================================
   FEATURED CASE — refined glass panel (less blunt)
================================================================ */
.case-split { background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(255,255,255,0.09); border-radius: 26px;
  padding: 52px !important;
  box-shadow: 0 44px 90px -54px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.06); align-items: center !important; }
.case-metric { background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.09) !important; border-radius: 16px !important; }
.case-metric:hover { border-color: rgba(196,149,106,0.4) !important; background: rgba(196,149,106,0.06) !important; }

/* ===== RESPONSIVE (sections) ===== */
@media (max-width: 1000px) {
  .svc-cards { grid-template-columns: repeat(2, 1fr); }
  .process-grid-v2 { grid-template-columns: repeat(2, 1fr) !important; }
  .case-split { padding: 40px !important; }
}
@media (max-width: 640px) {
  .svc-cards, .why-grid, .process-grid-v2 { grid-template-columns: 1fr !important; }
  .case-split { padding: 28px !important; }
}

/* ================================================================
   TRUSTED BY — infinite logo slider + sparkle glow
   (ported from 21st.dev Sparkles/InfiniteSlider/ProgressiveBlur → vanilla)
================================================================ */
.trusted { position: relative; padding: clamp(72px,9vh,110px) 0 0; overflow: hidden; }
.trusted-head { text-align: center; max-width: 640px; margin: 0 auto 40px; position: relative; z-index: 2; }
.trusted-head .eyebrow { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.trusted-head h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: clamp(1.9rem,3.4vw,2.8rem); line-height: 1.12; letter-spacing: -0.02em; }
.trusted-head h2 .soft { color: var(--white-40); display: block; }
.trusted-head h2 .gold { color: var(--gold-light); }

/* Infinite slider */
.slider-wrap { position: relative; height: 116px; z-index: 2;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.slider-track { display: flex; align-items: center; gap: 22px; width: max-content; height: 100%; animation: sliderPan 34s linear infinite; }
.slider-wrap:hover .slider-track { animation-play-state: paused; }
@keyframes sliderPan { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.slide-chip { flex: 0 0 auto; width: 188px; height: 86px; border-radius: 16px; padding: 16px 24px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #FBFAF7 0%, #EFEBE3 100%);
  box-shadow: 0 22px 46px -28px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.3s var(--ease-out-expo); }
.slide-chip:hover { transform: translateY(-4px); }
.slide-chip img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }

/* Sparkle glow horizon */
.spark-stage { position: relative; height: 300px; margin-top: -90px; width: 100%; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 55%, #000, transparent); mask-image: radial-gradient(ellipse 55% 60% at 50% 55%, #000, transparent); }
.spark-stage .glow { position: absolute; inset: 0; opacity: 0.55;
  background: radial-gradient(circle at 50% 100%, rgba(196,149,106,0.55), rgba(37,99,235,0.18) 45%, transparent 72%); }
.spark-stage .horizon { position: absolute; left: -50%; top: 52%; width: 200%; aspect-ratio: 1/0.7; border-radius: 100%;
  border-top: 1px solid rgba(255,255,255,0.18); background: var(--navy-darkest); z-index: 2; }
.spark-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse 50% 55% at 50% 60%, #000, transparent 86%); mask-image: radial-gradient(ellipse 50% 55% at 50% 60%, #000, transparent 86%); }
@media (max-width: 640px) { .spark-stage { height: 220px; } .slide-chip { width: 150px; height: 76px; } }

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .magnetic, .tilt { transform: none !important; }
  .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .slider-track { animation: none !important; }
  .spark-canvas { display: none !important; }
}