/* ===== New Hero Redesign Styles ===== */
:root {
  --c-bg: #0A0C1A;
  --c-border: rgba(0, 174, 239, 0.2);
  --c-border-soft: rgba(0, 174, 239, 0.1);
  --c-text-dim: rgba(255, 255, 255);
  --c-text: #E6F4FF;
  --c-primary: #00AEEF;
  --c-primary-rgb: 0,174,239; /* added for rgba alpha variants */
  --c-primary-alt: #1C2A64;
  --c-accent: rgba(0, 174, 239, 0.35);
  --c-accent-soft: rgba(0, 174, 239, 0.15);
  --shadow-accent: rgba(0, 174, 239, 0.45);
  --grad-accent: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.25), rgba(0,0,0,0) 65%);
  --ease: cubic-bezier(.6,.2,.2,1);
}

* { box-sizing: border-box; }
body { font-family: 'Manrope', sans-serif; background: var(--c-bg); color: var(--c-text); -webkit-font-smoothing: antialiased; overflow-x:hidden; }

/* Utility Spacing (inspired by tailwind-like tokens) */
.pt-10 { padding-top:4rem !important; }
.pb-10 { padding-bottom:4rem !important; }
.md\:pb-15 { padding-bottom:4rem !important; }
.xl\:pb-25 { padding-bottom:4rem !important; }
.xl\:pt-18 { padding-top:4rem !important; }
@media (min-width: 768px){
  .md\:pb-15 { padding-bottom:6rem !important; }
}
@media (min-width: 1200px){
  .xl\:pb-25 { padding-bottom:10rem !important; }
  .xl\:pt-18 { padding-top:7rem !important; }
}

/* What Are We Section */
.what-are-we { position:relative; background:radial-gradient(circle at 50% 0%, rgba(0,174,239,0.12), rgba(0,0,0,0) 70%); }
.what-are-we .eyebrow { font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; color:var(--c-primary); font-weight:600; }
.heading-gradient { background:linear-gradient(90deg, #fff, #60d6ff 45%, #fff 90%); -webkit-background-clip:text; color:transparent; }
.what-are-we .feature-grid { position:relative; z-index:2; }
.feature-tile { position:relative; padding:1.5rem 1.4rem 1.4rem; background:rgba(255,255,255,0.04); border:1px solid var(--c-border-soft); border-radius:18px; backdrop-filter:blur(8px); display:flex; flex-direction:column; gap:.4rem; transition: border-color .4s var(--ease), background .5s var(--ease), transform .45s var(--ease), box-shadow .5s var(--ease); }
.feature-tile::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,0)); opacity:0; transition:opacity .5s var(--ease); pointer-events:none; }
.feature-tile:hover { background:rgba(255,255,255,0.07); border-color:var(--c-border); transform:translateY(-4px); box-shadow:0 10px 34px -10px rgba(0,174,239,0.25), 0 2px 8px -2px rgba(0,0,0,0.4); }
.feature-tile:hover::before { opacity:1; }
.icon-bullet { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:linear-gradient(145deg, rgba(0,174,239,0.3), rgba(0,174,239,0.05)); box-shadow:0 0 0 1px var(--c-border) inset, 0 0 16px -4px var(--c-accent); font-size:1.1rem; }
.what-are-we p { color:var(--c-text-dim); }
@media (max-width: 576px){
  .feature-tile { padding:1.25rem 1.1rem 1.1rem; }
  .icon-bullet { width:38px; height:38px; font-size:1rem; }
}

/* ===== About (What Are We) Enhanced Layout ===== */
.about-intro-row { position:relative; }
.about-key-points .about-bullet { width:24px; height:24px; flex:0 0 24px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(145deg, rgba(var(--c-primary-rgb),0.35), rgba(var(--c-primary-rgb),0.08)); border-radius:8px; font-size:.7rem; letter-spacing:.05em; box-shadow:0 0 0 1px var(--c-border-soft), 0 0 10px -2px var(--c-accent-soft); margin-top:2px; }
.about-key-points li span:last-child { font-size:.875rem; line-height:1.35; color:var(--c-text-dim); }

.about-visual-grid { position:relative; display:grid; grid-template-columns:repeat(12, 1fr); grid-auto-rows:140px; gap:1.1rem; }
.about-visual-grid .img-block { position:relative; overflow:hidden; border-radius:20px; background:#101522; border:1px solid var(--c-border-soft); box-shadow:0 4px 26px -6px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,0.05) inset; isolation:isolate; }
.about-visual-grid .img-block img { width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05); transition:transform .9s var(--ease), filter .9s var(--ease); }
.about-visual-grid .img-block:hover img { transform:scale(1.08); filter:saturate(1.15) contrast(1.1); }
.about-visual-grid .img-block::after { content:""; position:absolute; inset:0; background:linear-gradient(160deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55)); opacity:.55; pointer-events:none; mix-blend-mode:overlay; }
.about-visual-grid figure { margin:0; }
.about-visual-grid figcaption { position:absolute; left:12px; bottom:10px; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; font-weight:600; opacity:.85; }

/* Mosaic specific placement */
.about-visual-grid .img-a { grid-column:1 / span 7; grid-row:1 / span 3; }
.about-visual-grid .img-b { grid-column:8 / span 5; grid-row:1 / span 2; }
.about-visual-grid .img-c { grid-column:8 / span 5; grid-row:3 / span 2; }

.about-float-card { position:absolute; top:12%; left:54%; transform:translate(-50%, -50%); background:rgba(0,174,239,0.08); border:1px solid var(--c-border); padding:.95rem 1.15rem; border-radius:18px; width:min(320px, 58%); backdrop-filter:blur(10px); box-shadow:0 8px 34px -10px rgba(0,174,239,0.28), 0 4px 18px -8px rgba(0,0,0,.55); animation:floatCard 10s ease-in-out infinite; line-height:1.3; }
.about-float-card .label { font-size:.55rem; letter-spacing:.25em; text-transform:uppercase; color:var(--c-primary); font-weight:600; display:block; margin-bottom:.4rem; }
@keyframes floatCard { 0%,100% { transform:translate(-50%, -50%) translateY(-6px); } 50% { transform:translate(-50%, -50%) translateY(8px); } }

@media (max-width: 1200px){
  .about-visual-grid { grid-auto-rows:120px; }
  .about-float-card { top:14%; width:60%; }
}
@media (max-width: 992px){
  .about-visual-grid { grid-template-columns:repeat(6,1fr); grid-auto-rows:120px; }
  .about-visual-grid .img-a { grid-column:1 / span 6; grid-row:1 / span 2; }
  .about-visual-grid .img-b { grid-column:1 / span 3; grid-row:3 / span 2; }
  .about-visual-grid .img-c { grid-column:4 / span 3; grid-row:3 / span 2; }
  .about-float-card { position:relative; top:auto; left:auto; transform:none; width:100%; margin-top:.75rem; animation:none; }
}
@media (max-width: 576px){
  .about-visual-grid { grid-template-columns:repeat(4,1fr); grid-auto-rows:110px; gap:.85rem; }
  .about-visual-grid .img-a { grid-column:1 / span 4; grid-row:1 / span 2; }
  .about-visual-grid .img-b { grid-column:1 / span 2; grid-row:3 / span 2; }
  .about-visual-grid .img-c { grid-column:3 / span 2; grid-row:3 / span 2; }
  .about-key-points li span:last-child { font-size:.8rem; }
}

/* === Simplified Intro Variant (Screenshot Style) === */
.about-intro-block { background: linear-gradient(180deg, #000 0%, #0F1830 32%, #08101C 78%, #070B14 92%), radial-gradient(circle at 50% 40%, rgba(0,174,239,0.18), rgba(0,0,0,0) 60%); position:relative; }
.about-intro-block::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:900px; max-width:100%; height:100%; pointer-events:none; opacity:0.7; }
.about-intro-block::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:140px; background:linear-gradient(180deg, rgba(7,11,20,0) 0%, rgba(7,11,20,0.85) 65%, #000000ff 100%); pointer-events:none; opacity:.9; }
.about-intro { position:relative; z-index:2; }
.intro-badge { font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); padding:.55rem 1.35rem; border-radius:40px; font-weight:600; box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset, 0 4px 18px -8px rgba(0,0,0,0.5); }
.intro-badge-icon { font-size:.75rem; filter:drop-shadow(0 0 4px rgba(255,255,255,.45)); }
.intro-badge-text { letter-spacing:.18em; }
.intro-title { line-height:1.05; }
.intro-sub { font-size:1rem; color:var(--c-text-dim); }

/* Cards row */
.about-cards { margin-top:3.25rem; }
.about-card { position:relative; }
.about-card-inner { flex:1 1 auto; width:100%; background:linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.12); border-radius:32px; padding:2.1rem 2rem 2rem; display:flex; flex-direction:row; align-items:center; gap:1rem; box-shadow:0 6px 26px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,0.05) inset; transition:background .5s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease); }
.about-card-inner::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 30% 15%, rgba(255,255,255,0.18), rgba(255,255,255,0) 70%); opacity:0; transition:opacity .6s var(--ease); }
.about-card-inner:hover { background:linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)); transform:translateY(-6px); box-shadow:0 16px 48px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 28px -6px rgba(0,174,239,0.25); border-color:rgba(255,255,255,0.2); }
.about-card-inner:hover::before { opacity:1; }
.about-card-icon { width:64px; height:64px; min-width:64px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-right:1rem; box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset, 0 4px 18px -8px rgba(0,0,0,0.45); }
.about-card-icon img { width:48px; height:48px; object-fit:cover; display:block; border-radius:10px; }
.about-card-title { letter-spacing:.01em; }
.about-card-text { font-size:.92rem; line-height:1.4; color:var(--c-text-dim); }

.about-card-body { display:flex; flex-direction:column; justify-content:center; flex:1 1 auto; }
.about-card-body .about-card-title { margin-bottom:0.35rem; }

@media (max-width: 1200px){
  .about-card-inner { padding:1.85rem 1.65rem 1.7rem; }
  .about-card-icon { width:56px; height:56px; font-size:1.25rem; margin-right:.85rem; }
}
@media (max-width: 992px){
  .about-cards { margin-top:2.5rem; }
}
@media (max-width: 576px){
  .intro-title { font-size:2.05rem; }
  .about-card-inner { padding:1.65rem 1.35rem 1.4rem; border-radius:26px; flex-direction:column; align-items:flex-start; }
  .about-card-icon { width:52px; height:52px; font-size:1.2rem; margin-right:0; margin-bottom:1rem; }
  .about-card-text { font-size:.85rem; }
}
.global-network-section { position:relative; background: linear-gradient(180deg, #000 0%, #0F1830 30%, var(--c-bg) 80%, #000 100%), radial-gradient(circle at 50% 40%, rgba(var(--c-primary-rgb),0.18), rgba(0,0,0,0) 60%); }
.gn-bg-gradient { position:absolute; inset:0; background:radial-gradient(circle at 50% 35%, rgba(0,174,239,0.18), rgba(0,0,0,0) 70%); opacity:.4; pointer-events:none; }
.gn-badge { font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); padding:.5rem 1rem; border-radius:50px; font-weight:600; color:var(--c-text-dim); }
.gn-title { line-height:1.05; }
.gn-sub { color:var(--c-text-dim); }

.network-map-wrapper { max-width:1220px; position:relative; }
.map-surface { --br:36px; border-radius:var(--br)!important; overflow:hidden; background:#061021; box-shadow:0 10px 40px -18px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.05) inset; }
.ratio-21x9 { aspect-ratio:21/9; }
.network-map-img { width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.05) brightness(.9); opacity:.92; animation: mapFade 1.2s var(--ease) .1s both; }
/* Marquee */
.logo-marquee { position:relative; padding:2.75rem 0; background:transparent; overflow:hidden; }
.map-pin { position:absolute; top:var(--y); left:var(--x); transform:translate(-50%,-50%); width:54px; height:54px; background:transparent; border:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; filter: drop-shadow(0 8px 18px rgba(0, 174, 239, 0.35)) brightness(1.6);}
.map-pin .dot { width:10px; height:10px; background:var(--c-primary); border-radius:50%; box-shadow:0 0 0 2px rgba(var(--c-primary-rgb),0.35), 0 0 14px -2px var(--c-primary); animation:dotPulse 4s ease-in-out infinite; }
.map-pin .pulse { position:absolute; width:54px; height:54px; border:1px solid rgba(0,174,239,0.5); border-radius:50%; animation:pinPulse 4s ease-in-out infinite; }
.map-pin .pulse::after { content:""; position:absolute; inset:8px; border:1px solid rgba(var(--c-primary-rgb),0.35); border-radius:50%; }
.map-pin .pin-tooltip { position:absolute; top:-8px; left:50%; transform:translate(-50%, -100%) translateY(-6px); background:rgba(0,0,0,0.75); padding:.55rem .75rem .6rem; border-radius:10px; font-size:.65rem; line-height:1.25; letter-spacing:.05em; color:#e6f7ff; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.1); box-shadow:0 4px 18px -8px rgba(0,0,0,.6); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.map-pin:hover .pin-tooltip, .map-pin:focus-visible .pin-tooltip { opacity:1; transform:translate(-50%, -100%) translateY(-2px); }
.map-pin:focus-visible { outline:none; }
/* Advanced expansion label (top side: label above, line grows downwards below it, repeating) */
.map-pin .pin-expansion { position:absolute; top:50%; left:50%; transform:translate(-50%, -100%); pointer-events:none; display:flex; flex-direction:column-reverse; align-items:center; gap:.65rem; font-size:.65rem; }
.map-pin .pin-line { position:relative; display:block; width:1px; height:0; background:linear-gradient(180deg, rgba(0,174,239,0), rgba(0,174,239,0.8), rgba(0,174,239,0)); box-shadow:0 0 12px -2px rgba(0,174,239,0.65); opacity:0; }
.map-pin .pin-label { position:relative; background:rgba(0,0,0,0.78); border:1px solid rgba(var(--c-primary-rgb),0.45); padding:.45rem .65rem .5rem; border-radius:10px; display:flex; flex-direction:column; gap:2px; line-height:1.15; letter-spacing:.05em; font-weight:600; color:#dff8ff; opacity:0; transform:translateY(4px); min-width:120px; backdrop-filter:blur(8px); box-shadow:0 6px 20px -8px rgba(0,0,0,.75), 0 0 0 1px rgba(var(--c-primary-rgb),0.15) inset; }
.map-pin .pin-label strong { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.map-pin .pin-label small { font-size:.55rem; letter-spacing:.12em; opacity:.8; font-weight:600; }
.map-pin.show-line .pin-line { animation:pinLineRepeat 4s ease-in-out infinite; }
.map-pin.show-line .pin-label { animation:pinLabelRepeat 4s ease-in-out infinite; }
@keyframes pinLineRepeat { 0%, 100% { height:0; opacity:0; } 10%, 90% { height:80px; opacity:1; } }
@keyframes pinLabelRepeat { 0%, 100% { opacity:0; transform:translateY(6px); } 10%, 90% { opacity:1; transform:translateY(0); } }

/* Hover triggers (overrides the animation to stay shown) */
.map-pin:hover .pin-line { animation-play-state:paused; height:80px; opacity:1; }
.map-pin:hover .pin-label { animation-play-state:paused; opacity:1; transform:translateY(0); }
.logo-marquee::before, .logo-marquee::after { content:""; position:absolute; top:0; width:120px; height:100%; z-index:2; pointer-events:none; }
.logo-marquee::before { left:0; background:linear-gradient(90deg, var(--c-bg) 0%, rgba(10,12,26,0) 100%); }
.gn-stats .gn-stat { text-align:center; padding:1.4rem 1rem; background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.12); border-radius:22px; box-shadow:0 6px 26px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,0.05) inset; transition:transform .55s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease); }
.gn-stats .gn-stat:hover { transform:translateY(-6px); box-shadow:0 16px 48px -18px rgba(0,0,0,.85), 0 0 24px -6px rgba(0,174,239,0.22), 0 0 0 1px rgba(255,255,255,0.08) inset; }
.gn-stats .val { font-size:1.9rem; font-weight:700; letter-spacing:.01em; background:linear-gradient(90deg,#fff,#60d6ff 55%,#fff); -webkit-background-clip:text; color:transparent; animation:statFade 1s var(--ease) both; }
.gn-stats .label { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; margin-top:.5rem; color:var(--c-text-dim); }
.logo-marquee::after { right:0; background:linear-gradient(270deg, var(--c-bg) 0%, rgba(10,12,26,0) 100%); }
.marquee-mask { width:100%; overflow:hidden; }
@keyframes mapFade { 0%{opacity:0; transform:scale(1.03);} 100%{opacity:1; transform:scale(1);} }
@keyframes pinPulse { 0%,100%{ transform:scale(.7); opacity:.6; } 50%{ transform:scale(1); opacity:.2; } }
@keyframes dotPulse { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.55); opacity:.6; } }
@keyframes statFade { 0%{ opacity:0; transform:translateY(12px);} 100%{ opacity:1; transform:translateY(0);} }
.marquee-track { display:flex; width:max-content; animation:marqueeScroll 36s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
.map-pin { opacity:0; animation:fadeInPin .9s var(--ease) forwards; }
@keyframes fadeInPin { 0%{opacity:0; transform:translate(-50%,-50%) scale(.6);} 100%{opacity:1; transform:translate(-50%,-50%) scale(1);} }
.map-pin:nth-of-type(1){ animation-delay:.15s; }
.map-pin:nth-of-type(2){ animation-delay:.28s; }
.map-pin:nth-of-type(3){ animation-delay:.41s; }
.map-pin:nth-of-type(4){ animation-delay:.54s; }
.map-pin:nth-of-type(5){ animation-delay:.67s; }
.map-pin:nth-of-type(6){ animation-delay:.8s; }
.marquee-group { display:flex; gap:4.5rem; padding:0 2.5rem; align-items:center; }
.logo-marquee .logo { height:70px; width:auto; filter: brightness(1.2); transition:opacity .4s var(--ease), filter .4s var(--ease), transform .4s var(--ease); }
.logo-marquee .logo:hover { opacity:1; filter:grayscale(0%) brightness(100%) contrast(100%); transform:translateY(-4px); }
@media (max-width: 992px){
  .marquee-group { gap:3rem; }
  .logo-marquee .logo { height:60px; }
}
@media (max-width: 576px){
  .marquee-group { gap:2.2rem; }
  .logo-marquee .logo { height:50px; }
}
@keyframes marqueeScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

.hero-section { position:relative; }
.hero-section .bg-layer { position:absolute; inset:0; pointer-events:none; }
.gradient-wash {
  background: linear-gradient(180deg, #0F1830 0%, #0A0C1A 80%, #000 100%);
}
.radial-halo {
  background: radial-gradient(circle at 50% 40%, rgba(0,174,239,0.25), rgba(0,0,0,0) 60%);
}

/* Transparent hero background image layer */
.hero-device-bg { 
  background: url("../assets/images/hero-device.png") center 48% / min(1780px,70%) no-repeat;
  opacity:.28;
  mix-blend-mode:screen;
  filter:drop-shadow(0 40px 90px rgba(0,0,0,.85)) brightness(1.15);
  z-index:1; /* stays behind canvas/star effects (z=2) and before wave-floor (default stacking) */
}


.wave-floor { mask:linear-gradient(0deg, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 90%); opacity:.9; }
.floor-svg { width:100%; height:100%; opacity:.55; transform:translateY(6%); }
.ambient-canvas { position:absolute; inset:0; z-index:0; opacity:.55; }

/* Navigation */
/* Fixed transparent header like screenshot */
.hero-nav { position:fixed; top:0; left:0; width:100%; z-index:50; background:transparent; border-bottom:0px solid rgba(255,255,255,0.08); }
.nav-inner { height:72px; display:flex; align-items:center; }
/* provide top offset so hero content isn't hidden under fixed header */
.hero-section { padding-top:72px; }
/* subtle fade when scrolling (optional enhancement) */
/* body.scrolled .hero-nav { background:rgba(255, 255, 255, 0.35); backdrop-filter:blur(8px); } */
.hero-nav { background:transparent; backdrop-filter:blur(14px); position:fixed; top:0; left:0; width:100%; padding:0 1.25rem; }
.hero-nav::before { content:""; position:absolute; z-index:-1; inset:0 0 -40px 0; /* extend for fade overflow */ pointer-events:none; background:linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 80%); }
.hero-nav::after { content:""; position:absolute; left:0; right:0; bottom:0; height:0px; background:linear-gradient(to right, rgba(255,255,255,0.15), rgba(255,255,255,0.45), rgba(255,255,255,0.15)); }
/* Hide-on-scroll behavior */
.hero-nav { transition: transform .55s var(--ease), opacity .5s var(--ease); will-change: transform; }
.hero-nav.nav-hidden { transform: translateY(-110%); opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  .hero-nav { transition:none; }
}
@media (max-width: 992px){
  .nav-inner { height:64px; }
  .hero-section { padding-top:64px; }
}
/* New plain image logo (wrapper removed) */
.site-logo { height:86px; width:auto; display:block; object-fit:contain; filter: drop-shadow(0 8px 18px rgba(0, 174, 239, 0.35)) brightness(1.9);}
@media (max-width: 576px){
  .site-logo { height:68px; }
}
/* Mobile nav slide-down animation */
#mobileNav { position:absolute; top:100%; left:0; width:100%; background:rgba(0,0,0,0.92); backdrop-filter:blur(18px); border-bottom:1px solid rgba(255,255,255,0.08); padding:0 1.25rem 1.25rem; transform:translateY(-14px); opacity:0; pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
#mobileNav.show { opacity:1; transform:translateY(0); pointer-events:auto; }
#mobileNav.collapsing { height:auto !important; opacity:0; transform:translateY(-14px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
#mobileNav .nav-link { padding:.65rem 0; font-size:.9rem; }
#mobileNav .btn-whitepaper { font-size:.75rem; letter-spacing:.12em; font-weight:800; }
.nav-link { color:var(--c-text-dim); font-weight:500; font-size:1rem; letter-spacing:.02em; position:relative; transition:color .35s var(--ease); }
.nav-link:hover { color: var(--c-primary); }
.btn-whitepaper { background: var(--c-primary); color: var(--c-primary-alt); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; border:0; box-shadow:0 0 0 1px var(--c-primary) inset, 0 0 24px var(--c-accent); transition:background .35s var(--ease), transform .35s var(--ease); }
.btn-whitepaper:hover { background: var(--c-primary-alt); color: var(--c-primary); transform:translateY(-2px); }
.btn-menu { background:rgba(255,255,255,.06); border:1px solid var(--c-border-soft); border-radius:10px; display:inline-flex; flex-direction:column; gap:5px; padding:10px 12px; }
.btn-menu .menu-bar { width:22px; height:2px; background: var(--c-primary); display:block; }

/* Intro badge */
.badge-intro { display:inline-flex; align-items:center; gap:.75rem; padding:.55rem 1.4rem; background:rgba(255,255,255,0.07); border:1px solid var(--c-border); border-radius:999px; font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-text-dim); backdrop-filter:blur(6px); animation:fadeInUp .9s var(--ease) .15s both; }
.badge-intro .icon-zap { font-size:.9rem; filter:drop-shadow(0 0 6px rgba(255,255,255,.55)); }

/* Heading */
.hero-heading { line-height:1.05; letter-spacing:-.02em; max-width:880px; }
.hero-heading .line { opacity:0; transform:translateY(22px); animation:staggerUp .9s var(--ease) forwards; }
.hero-heading .line:nth-child(2){ animation-delay:.18s; }
.hero-sub { max-width:560px; color:var(--c-text-dim); animation:fadeInUp 1s var(--ease) .35s both; }

.btn-cta { 
  background: var(--c-primary); color: var(--c-primary-alt); font-size:1rem; letter-spacing:.04em; text-transform:none; border:0; box-shadow:0 0 0 1px var(--c-primary) inset, 0 0 14px var(--c-accent); transition:background .35s var(--ease), transform .35s var(--ease); }
.btn-cta:hover  
{ background: var(--c-primary-alt); color: var(--c-primary); transform:translateY(-2px); }

/* Core device */
.core-device { position:relative; margin-top:1rem; height:170px; width:170px; display:flex; align-items:center; justify-content:center; }
.device-glow { position:absolute; inset:0; background:radial-gradient(circle at 50% 55%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%); filter:blur(48px); opacity:.35; animation:glowPulse 6s ease-in-out infinite; }
.device-frame { position:relative; width:130px; height:130px; border-radius:28px; background:linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); box-shadow:0 0 0 1px var(--c-border), 0 16px 48px -12px rgba(0,0,0,.8), 0 0 32px -4px rgba(0,174,239,0.25); display:flex; align-items:center; justify-content:center; }
.device-frame::after { content:""; position:absolute; inset:10px; border-radius:22px; background:rgba(255,255,255,.05); box-shadow:0 0 0 1px rgba(255,255,255,.15) inset; }
.device-inner { position:relative; width:86px; height:86px; border-radius:20px; background:linear-gradient(160deg, rgba(255,255,255,.15), rgba(255,255,255,.04)); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 0 0 1px rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; animation:innerRotate 20s linear infinite; }
.onion-symbol { position:relative; width:56px; height:56px; }
.onion-symbol span { position:absolute; inset:0; border:2px solid rgba(255,255,255,.85); border-radius:50%; animation:ringPulse 6s ease-in-out infinite; }
.onion-symbol span:nth-child(2){ inset:8px; animation-delay:1s; }
.onion-symbol span:nth-child(3){ inset:16px; animation-delay:2s; }
.onion-symbol span:nth-child(4){ inset:24px; animation-delay:3s; }
/* center and rotate the svg placed as the 4th child */
.onion-symbol .onion-svg { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(0deg); width:28px; height:28px; display:block; }
@keyframes onion-rotate { 0%{ transform:translate(-50%,-50%) rotate(0deg); } 100%{ transform:translate(-50%,-50%) rotate(360deg); } }
.onion-symbol .onion-svg { animation: onion-rotate 8s linear infinite; }

/* Partners */
.partners-bar { border-top:1px solid var(--c-border-soft); border-bottom:1px solid var(--c-border-soft); background:rgba(0,0,0,.35); backdrop-filter:blur(6px); z-index:4; }
.partner { font-size:.65rem; letter-spacing:.25em; text-transform:uppercase; color:var(--c-text-dim); position:relative; }
.partner::after { content:""; position:absolute; right:-18px; top:50%; transform:translateY(-50%); width:4px; height:4px; background:rgba(255,255,255,.2); border-radius:50%; }
.partner:last-child::after { display:none; }

/* Animations */
@keyframes fadeInUp { 0%{opacity:0; transform:translateY(18px);} 100%{opacity:1; transform:translateY(0);} }
@keyframes staggerUp { 0%{opacity:0; transform:translateY(30px);} 100%{opacity:1; transform:translateY(0);} }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 1px #fff inset,0 14px 40px -10px rgba(255,255,255,.25);} 50%{ box-shadow:0 0 0 1px #fff inset,0 18px 55px -8px rgba(255,255,255,.45);} }
@keyframes glowPulse { 0%,100%{opacity:.25;} 50%{opacity:.55;} }
@keyframes innerRotate { 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} }
@keyframes ringPulse { 0%,100%{opacity:.9; } 50%{opacity:.2;} }

/* Responsive */
@media (max-width: 992px){
  .hero-heading { font-size:2.0rem; }
  .core-device { transform:scale(.8); }
  .partners-bar .partner { letter-spacing:.18em; }
}
@media (max-width: 576px){
  .badge-intro { font-size:.55rem; letter-spacing:.14em; }
  .btn-cta { width:100%; }
}

/* ==== Provide / Services Section (3 + 2 layout matching reference) ==== */
.provide-section { position:relative; background: linear-gradient(180deg, #070B14 0%, #081120 14%, #0B182B 55%, #000000ff 95%), radial-gradient(circle at 52% 30%, rgba(0,174,239,0.20), rgba(0,0,0,0) 60%); }
.provide-section::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, #070B14, rgba(0,0,0,0) 70%); pointer-events:none; }
.provide-section::after { content:""; position:absolute; top:-120px; left:0; right:0; height:180px; background:linear-gradient(180deg, #070B14 0%, rgba(7,11,20,0.92) 40%, rgba(7,11,20,0) 100%); filter:blur(8px); opacity:.75; pointer-events:none; }
.provide-bg-gradient { position:absolute; inset:0; background:radial-gradient(circle at 62% 48%, rgba(0,174,239,0.22), rgba(0,0,0,0) 70%); opacity:.35; pointer-events:none; }
.micro-pill { font-size:.55rem; letter-spacing:.28em; text-transform:uppercase; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); padding:.55rem 1.4rem .5rem; border-radius:40px; font-weight:600; color:var(--c-text-dim); display:inline-block; }
.provide-title { line-height:1.05; }
.provide-sub { color:var(--c-text-dim); }
.provide-grid { position:relative; display:grid; gap:1.65rem; grid-template-columns:repeat(12, 1fr); }
.provide-card { position:relative; background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.14); border-radius:28px; padding:1.6rem 1.55rem 1.7rem; display:flex; flex-direction:column; box-shadow:0 8px 34px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,0.06) inset; overflow:hidden; transition:background .6s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease); }
.provide-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 15%, rgba(255,255,255,0.22), rgba(255,255,255,0) 70%); opacity:0; transition:opacity .6s var(--ease); }
.provide-card:hover { background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)); transform:translateY(-6px); box-shadow:0 18px 54px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,0.1) inset, 0 0 34px -6px rgba(0,174,239,0.28); border-color:rgba(255,255,255,0.26); }
.provide-card:hover::before { opacity:1; }
/* Grid placement */
.provide-card.card-a { grid-column:1 / span 4; }
.provide-card.card-b { grid-column:5 / span 5; }
.provide-card.card-c { grid-column:10 / span 3; }
.provide-wide { grid-column: span 6; }
.provide-card.card-d { grid-column:1 / span 7; }
.provide-card.card-e { grid-column:8 / span 5; }
/* Media placeholder styles */
.provide-card-media {
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:20px;
  position:relative;
  margin-bottom:1.1rem;
  display:block;
  align-items:center;
  justify-content:center;
  /* border:1px solid rgba(255,255,255,0.18);
  background:linear-gradient(150deg, rgba(0,174,239,0.45), rgba(0,174,239,0.06)); */
  overflow:hidden;
}

.provide-card-media img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  z-index:0; /* sit beneath overlays/labels */
  /* soft mask to fade the bottom edge; supported in modern browsers */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
  /* preserve the card radius for the image */
  border-radius:inherit;
}

/* Card-A specific: show a centered, contained image (doesn't fill the media area) */
.provide-card.card-a .provide-card-media img {
  position:relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  object-position: center center !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  z-index: 0;
}
.provide-card.card-c .provide-card-media img {
  width: auto !important;
  height: auto !important;
  max-width: 120% !important;
  max-height: 120% !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
  object-position: center center !important;
}
/* Video inside media containers should behave like the image: full-bleed and masked */
.provide-card-media .provide-media-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  z-index:0;
  border-radius:inherit;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
}

/* Decorative label (keeps previous behavior) */
.provide-card-media::after {
  content:"IMAGE";
  font-size:.65rem;
  letter-spacing:.3em;
  font-weight:600;
  opacity:.85;
  color:#fff;
  position:absolute;
  left:12px;
  top:12px;
}

/* Additional overlay to ensure a smooth bottom fade on browsers without mask support */
.provide-card-media::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:36%;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.24) 55%, rgba(0,0,0,0.34) 100%);
  pointer-events:none;
  z-index:1; /* overlay sits above images */
}
/* Variant decorative pseudo layers to emulate reference visuals */
.media-dots::before, .media-dots::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 25% 30%, rgba(255,255,255,0.35), rgba(0,0,0,0) 60%), repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 2px, rgba(255,255,255,0) 2px 8px); mix-blend-mode:overlay; opacity:.35; }
.media-list::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0)), repeating-linear-gradient(0deg, rgba(255,255,255,0.12) 0 8px, rgba(255,255,255,0) 8px 16px); mix-blend-mode:overlay; opacity:.4; }
.media-icons::before { content:"\25A0\25CF\25B2"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.8rem; letter-spacing:.5rem; color:rgba(255,255,255,0.12); }
.media-blades::before { content:""; position:absolute; inset:0; background:conic-gradient(from 0deg, rgba(255,255,255,0.15), rgba(0,0,0,0) 75%); filter:blur(2px); opacity:.5; }
.media-code::before { content:"// code"; position:absolute; top:8px; left:12px; font-size:.6rem; letter-spacing:.15em; color:rgba(255,255,255,0.55); }
.provide-card-body p { font-size:.9rem; color:var(--c-text-dim); }
@media (max-width: 1200px){
  .provide-grid { grid-template-columns:repeat(12, 1fr); gap:1.25rem; }
  .provide-card { padding:1.45rem 1.35rem 1.5rem; }
}
@media (max-width: 992px){
  .provide-card.card-a, .provide-card.card-b, .provide-card.card-c, .provide-card.card-d, .provide-card.card-e, .provide-wide { grid-column:1 / -1; }
  .provide-grid { grid-template-columns:repeat(6, 1fr); }
  .provide-card-media { aspect-ratio: 17 / 9; }
}
@media (max-width: 576px){
  .provide-grid { gap:1rem; }
  .provide-card { padding:1.35rem 1.15rem 1.4rem; border-radius:24px; }
  .provide-card-body p { font-size:.82rem; }
}

/* ===== Footer (Enhanced) ===== */
.site-footer { position:relative; padding:5.5rem 0 2.8rem; background:linear-gradient(180deg,#000 0%,#05070A 30%,#040607 100%); border-top:1px solid rgba(255,255,255,0.08); }
.footer-aura, .site-footer::before { content:""; position:absolute; inset:0; pointer-events:none; }
.site-footer::before { background:radial-gradient(circle at 25% 40%, rgba(0,174,239,0.17), rgba(0,0,0,0) 65%), radial-gradient(circle at 78% 30%, rgba(0,174,239,0.12), rgba(0,0,0,0) 70%); opacity:.4; }
.footer-aura { background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 35%); mix-blend-mode:overlay; opacity:.25; }
.footer-shell { position:relative; z-index:2; }
.footer-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:3rem 2.2rem; }
.footer-col { position:relative; }
.brand-col { grid-column:span 4; }
.footer-col nav, .footer-col ul { margin:0; padding:0; }
.footer-logo { height:80px; width:auto; display:block; filter:drop-shadow(0 8px 18px rgba(var(--c-primary-rgb),0.35)) brightness(2); }
.brand-link { position:relative; }
.footer-brand-text { font-size:1.1rem; letter-spacing:.02em; }
.footer-mission { font-size:.8rem; line-height:1.5; color:rgba(255,255,255,0.68); max-width:340px; }
.foot-heading { font-size:.8rem; letter-spacing:.25em; text-transform:uppercase; font-weight:700; color:#fff; margin:0 0 1.1rem; opacity:.9; }
.foot-list { list-style:none; display:flex; flex-direction:column; gap:.65rem; }
.foot-list a { font-size:.82rem; letter-spacing:.01em; position:relative; display:inline-block; color:rgba(255,255,255,0.70); text-decoration:none; transition:color .45s var(--ease); }
.foot-list a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:linear-gradient(90deg,#fff,var(--c-primary)); transition:width .5s var(--ease); }
.foot-list a:hover { color:#fff; }
.foot-list a:hover::after { width:100%; }
.social-row { margin-top:.25rem; }
.soc { --sz:40px; width:var(--sz); height:var(--sz); display:flex; align-items:center; justify-content:center; border-radius:14px; background:linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.12); color:#fff; font-size:.9rem; position:relative; overflow:hidden; box-shadow:0 4px 16px -6px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,0.04) inset; backdrop-filter:blur(6px); transition:background .55s var(--ease), transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease); }
.soc::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25), rgba(255,255,255,0) 70%); opacity:0; transition:opacity .6s var(--ease); }
.soc:hover { background:linear-gradient(145deg, rgba(var(--c-primary-rgb),0.5), rgba(var(--c-primary-rgb),0.08)); border-color:rgba(var(--c-primary-rgb),0.6); transform:translateY(-6px); box-shadow:0 18px 48px -14px rgba(var(--c-primary-rgb),0.45),0 0 0 1px rgba(255,255,255,0.08) inset; }
.soc:hover::before { opacity:1; }
.soc-ghost { background:linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); }
.newsletter-col { grid-column:span 4; }
.newsletter-form { margin-top:.25rem; }
.nf-group { display:flex; align-items:stretch; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:14px; overflow:hidden; box-shadow:0 4px 18px -8px rgba(0,0,0,0.65); backdrop-filter:blur(8px); }
.nf-input { flex:1 1 auto; background:transparent; border:0; padding:.75rem .95rem; font-size:.78rem; color:#fff; outline:none; }
.nf-input::placeholder { color:rgba(255,255,255,0.45); letter-spacing:.05em; }
.nf-btn { background:var(--c-primary); color:#04121D; border:0; padding:.65rem 1.05rem; font-size:.7rem; letter-spacing:.15em; font-weight:700; text-transform:uppercase; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .4s var(--ease), color .4s var(--ease); }
.nf-btn:hover { background:#04121D; color:var(--c-primary); }
.nf-disclaimer { display:block; margin-top:.55rem; font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,0.45); }
.footer-note { font-size:.7rem; color:rgba(255,255,255,0.55); max-width:300px; }
.footer-divider { height:1px; margin:3.25rem 0 2.25rem; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%); }
.footer-bottom { font-size:.7rem; }
.footer-copy { color:rgba(255,255,255,0.6); font-size:.65rem; letter-spacing:.08em; }
.legal-list { list-style:none; display:flex; gap:1.2rem; padding:0; }
.legal-list a { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,0.55); text-decoration:none; position:relative; transition:color .45s var(--ease); }
.legal-list a:hover { color:#fff; }
.backtop { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:12px; color:#fff; text-decoration:none; font-size:1rem; box-shadow:0 6px 20px -8px rgba(0,0,0,.65); transition:background .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease); }
.backtop:hover { background:var(--c-primary); color:#04121D; border-color:var(--c-primary); transform:translateY(-6px); }
@media (max-width:1200px){
  .brand-col { grid-column:span 5; }
  .newsletter-col { grid-column:span 7; }
}
@media (max-width:992px){
  .footer-grid { grid-template-columns:repeat(8,1fr); gap:2.4rem 1.65rem; }
  .brand-col { grid-column:span 8; }
  .newsletter-col { grid-column:span 8; }
  .footer-divider { margin:2.75rem 0 1.85rem; }
}
@media (max-width:576px){
  .footer-grid { grid-template-columns:repeat(4,1fr); gap:2.2rem 1.4rem; }
  .brand-col { grid-column:span 4; }
  nav.footer-col { grid-column:span 2; }
  .newsletter-col { grid-column:span 4; }
  .foot-heading { font-size:.72rem; letter-spacing:.22em; margin-bottom:.9rem; }
  .foot-list a { font-size:.75rem; }
  .footer-mission { font-size:.72rem; }
  .soc { --sz:38px; font-size:.85rem; }
  .footer-copy { font-size:.58rem; }
  .legal-list { gap:.9rem; }
  .legal-list a { font-size:.55rem; }
}

  /* =============================================================
     Light Theme Variant (darker / higher contrast adjustments)
     Usage: add class "theme-light" to the <html> or <body> element
     This version darkens the very pale surfaces while keeping
     the text palette dark for readability.
     ============================================================= */

  /* Core tokens override (scoped so dark remains default) */
  body.theme-light, html.theme-light {
    /* Slightly darker base than the previous ultra-light */
    --c-bg: #EBF5FB; /* subtle cool tint */
    --c-text: #08121A; /* keep text dark and legible */
    --c-text-dim: #324A5C; /* stronger dim color */
    --c-primary: #0076A8; /* a touch darker for stronger CTAs */
    --c-primary-alt: #FFFFFF; /* text on primary buttons */
    --c-border: rgba(0,118,168,0.45);
    --c-border-soft: rgba(0,118,168,0.22);
    --c-accent: rgba(0,118,168,0.32);
    --c-accent-soft: rgba(0,118,168,0.14);
    --shadow-accent: rgba(0,118,168,0.36);
    --grad-accent: radial-gradient(circle at 50% 0%, rgba(0,118,168,0.24), rgba(0,118,168,0) 65%);
    color: var(--c-text);
    background: var(--c-bg);
  }

  /* Global body adjustments */
  body.theme-light { -webkit-font-smoothing:antialiased; }

  /* Generic surface overrides (slightly darker surfaces for less glare) */
  body.theme-light .feature-tile,
  body.theme-light .about-card-inner,
  body.theme-light .provide-card,
  body.theme-light .gn-stats .gn-stat,
  body.theme-light .soc,
  body.theme-light .nf-group,
  body.theme-light .backtop {
    background: linear-gradient(180deg, rgba(240,246,250,0.98), rgba(237,244,249,0.95));
    border-color: var(--c-border-soft);
    box-shadow: 0 6px 22px -10px rgba(6,30,44,0.06), 0 0 0 1px rgba(255,255,255,0.6) inset;
  }
  body.theme-light .feature-tile:hover,
  body.theme-light .about-card-inner:hover,
  body.theme-light .provide-card:hover,
  body.theme-light .gn-stats .gn-stat:hover,
  body.theme-light .soc:hover,
  body.theme-light .backtop:hover {
    background: linear-gradient(180deg, rgba(247,250,252,1), rgba(243,248,251,0.98));
    box-shadow: 0 14px 36px -18px rgba(6,30,44,0.10), 0 0 0 1px rgba(255,255,255,0.9) inset, 0 0 28px -6px var(--c-accent);
  }

  /* Text color adjustments inside shared surfaces */
  body.theme-light .about-card-text,
  body.theme-light .provide-card-body p,
  body.theme-light .gn-sub,
  body.theme-light .hero-sub,
  body.theme-light .footer-mission,
  body.theme-light .foot-list a,
  body.theme-light .footer-copy,
  body.theme-light .legal-list a,
  body.theme-light .nf-disclaimer {
    color: var(--c-text-dim);
  }

  /* Hero & navigation */
  body.theme-light .gradient-wash {
    background: linear-gradient(180deg, #EEF6FB 0%, #E6F1F7 70%, #E3EEF6 100%);
  }
  body.theme-light .radial-halo { background: radial-gradient(circle at 50% 40%, rgba(0,118,168,0.22), rgba(255,255,255,0) 60%); }
  body.theme-light .hero-nav::before { background: linear-gradient(to bottom, rgba(255,255,255,0.95) 20%, rgba(255,255,255,0.88) 70%, rgba(255,255,255,0) 80%); }
  body.theme-light .nav-link { color: var(--c-text-dim); }
  body.theme-light .nav-link:hover { color: var(--c-primary); }

  /* Buttons */
  body.theme-light .btn-whitepaper,
  body.theme-light .btn-cta {
    background: var(--c-primary);
    color: var(--c-primary-alt);
    box-shadow: 0 0 0 1px var(--c-primary) inset, 0 0 18px var(--c-accent);
  }
  body.theme-light .btn-whitepaper:hover,
  body.theme-light .btn-cta:hover { background:#005774; color:#fff; }

  /* Provide / Services section */
  body.theme-light .provide-section {
    background: linear-gradient(180deg, #EEF6FA 0%, #E9F4F9 14%, #E2F0F7 55%, #F5FAFD 95%), radial-gradient(circle at 52% 30%, rgba(0,118,168,0.16), rgba(0,118,168,0) 60%);
  }
  body.theme-light .provide-section::after,
  body.theme-light .provide-section::before,
  body.theme-light .provide-bg-gradient { background: radial-gradient(circle at 50% 0%, rgba(0,118,168,0.10), rgba(0,118,168,0) 70%); opacity:.5; }

  /* About intro block */
  body.theme-light .about-intro-block {
    background: linear-gradient(180deg, #F6FAFD 0%, #EEF6FB 32%, #EAF3F9 78%, #E8F2F8 92%), radial-gradient(circle at 50% 40%, rgba(0,118,168,0.14), rgba(0,118,168,0) 60%);
  }

  /* Map / Global network adjustments */
  body.theme-light .global-network-section {
    background: linear-gradient(180deg, #F6FAFD 0%, #EEF6F9 30%, #F7FBFD 80%, #FDFEFE 100%), radial-gradient(circle at 50% 40%, rgba(0,118,168,0.16), rgba(0,118,168,0) 60%);
  }
  body.theme-light .map-surface { background:#F8FBFD; box-shadow:0 8px 36px -18px rgba(6,30,44,0.08), 0 0 0 1px rgba(0,0,0,0.04) inset; }
  body.theme-light .network-map-img { filter:contrast(1.03) saturate(1.05) brightness(1.03); opacity:.96; }
  body.theme-light .map-pin .dot { background:var(--c-primary); box-shadow:0 0 0 2px var(--c-accent), 0 0 14px -2px var(--c-primary); }
  body.theme-light .map-pin .pulse { border-color:rgba(0,118,168,0.48); }

  /* Footer */
  body.theme-light .site-footer { background: linear-gradient(180deg,#F7FBFD 0%, #F0F6FA 30%, #EFF6FA 100%); border-top:1px solid var(--c-border-soft); }
  body.theme-light .site-footer::before { background: radial-gradient(circle at 25% 40%, rgba(0,118,168,0.14), rgba(0,118,168,0) 65%), radial-gradient(circle at 78% 30%, rgba(0,118,168,0.10), rgba(0,118,168,0) 70%); }
  body.theme-light .foot-list a { color: rgba(7,22,30,0.65); }
  body.theme-light .foot-list a:hover { color:#08121A; }
  body.theme-light .foot-list a::after { background: linear-gradient(90deg,#006B94,var(--c-primary)); }
  body.theme-light .footer-copy, body.theme-light .legal-list a { color: rgba(7,22,30,0.55); }
  body.theme-light .legal-list a:hover { color:#08121A; }
  body.theme-light .soc { color:#08121A; }

  /* Form */
  body.theme-light .nf-group { background:rgba(245,249,252,0.96); }
  body.theme-light .nf-input { color:#08121A; }
  body.theme-light .nf-input::placeholder { color:rgba(7,22,30,0.36); }
  body.theme-light .nf-btn { background:var(--c-primary); color:#fff; }
  body.theme-light .nf-btn:hover { background:#005774; color:#fff; }

  /* Partners bar */
  body.theme-light .partners-bar { background:rgba(246,250,253,0.95); border-color:var(--c-border-soft); }
  body.theme-light .partner { color: var(--c-text-dim); }
  body.theme-light .partner::after { background: rgba(7,22,30,0.16); }

  /* Micro elements */
  body.theme-light .icon-bullet { background:linear-gradient(145deg, rgba(0,118,168,0.16), rgba(0,118,168,0.04)); box-shadow:0 0 0 1px var(--c-border) inset, 0 0 12px -4px var(--c-accent); }
  body.theme-light .about-key-points .about-bullet { background:linear-gradient(145deg, rgba(0,118,168,0.28), rgba(0,118,168,0.08)); box-shadow:0 0 0 1px var(--c-border-soft), 0 0 8px -2px var(--c-accent-soft); }

  /* Headings gradient adaptation */
  body.theme-light .heading-gradient,
  body.theme-light .gn-stats .val {
  background: linear-gradient(90deg, #003E55, var(--c-primary) 55%, #003E55);
    -webkit-background-clip:text; color:transparent;
  }

  /* Optional transition for theme swap */
  html.theme-light body, body.theme-light * { transition: background-color .38s ease, color .38s ease, border-color .38s ease, box-shadow .45s ease; }

  /* Accessibility: ensure focus-visible remains clear on light */
  body.theme-light :focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }

  /* End Light Theme Variant */

/* ===== Added: Process Section ===== */
.process-section { position:relative; background:linear-gradient(180deg,#000 0%,#07101B 35%, #091a27 70%, #000 100%); }
.process-bg { position:absolute; inset:0; background:radial-gradient(circle at 60% 30%, rgba(0,174,239,0.18), rgba(0,0,0,0) 65%); opacity:.35; pointer-events:none; }
.process-flow { position:relative; }
.process-line { position:absolute; top:0; left:50%; transform:translateX(-50%); width:2px; height:100%; background:linear-gradient(180deg, rgba(0,174,239,0.4), rgba(0,174,239,0) 80%); filter:blur(.4px); display:none; }
@media (min-width:1200px){ .process-line { display:block; } }
.proc-card { position:relative; background:linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.12); border-radius:26px; padding:1.6rem 1.4rem 1.55rem; box-shadow:0 6px 26px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,0.05) inset; transition:background .55s var(--ease), transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease); }
.proc-card:hover { background:linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)); transform:translateY(-6px); border-color:rgba(255,255,255,0.22); box-shadow:0 16px 48px -18px rgba(0,0,0,.9), 0 0 32px -8px rgba(0,174,239,0.25), 0 0 0 1px rgba(255,255,255,0.07) inset; }
.proc-step { width:46px; height:46px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem; background:linear-gradient(145deg, rgba(var(--c-primary-rgb),0.45), rgba(var(--c-primary-rgb),0.08)); border:1px solid var(--c-border); border-radius:16px; margin-bottom:1rem; box-shadow:0 0 0 1px rgba(var(--c-primary-rgb),0.45) inset, 0 0 22px -6px rgba(var(--c-primary-rgb),0.55); }
.proc-card p { color:var(--c-text-dim); }

/* ===== Standards Section ===== */
.standards-section { position:relative; background:linear-gradient(180deg,#070B14 0%,#091424 40%,#050a12 90%); }
.standards-bg { position:absolute; inset:0; background:radial-gradient(circle at 40% 35%, rgba(var(--c-primary-rgb),0.2), rgba(0,0,0,0) 65%); opacity:.4; pointer-events:none; }
.std-card { position:relative; padding:1.1rem 1rem 1.05rem; background:linear-gradient(150deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.14); border-radius:20px; box-shadow:0 6px 22px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,0.05) inset; min-height:108px; display:flex; flex-direction:column; justify-content:center; transition:background .55s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease); }
.std-card:hover { background:linear-gradient(150deg, rgba(255,255,255,0.15), rgba(255,255,255,0.04)); transform:translateY(-6px); border-color:rgba(255,255,255,0.24); box-shadow:0 16px 40px -18px rgba(0,0,0,.85), 0 0 32px -6px rgba(0,174,239,0.28), 0 0 0 1px rgba(255,255,255,0.08) inset; }
.std-card .tiny { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-text-dim); opacity:.85; }

/* ===== Industries Section ===== */
.industries-section { position:relative; background:linear-gradient(180deg,#05090F 0%,#07121D 45%, #091d2b 85%, #020406 100%); }
.industries-bg { position:absolute; inset:0; background:radial-gradient(circle at 55% 30%, rgba(0,174,239,0.22), rgba(0,0,0,0) 65%); opacity:.35; pointer-events:none; }
.ind-card { position:relative; padding:.95rem .95rem .9rem 1.15rem; background:linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.14); border-radius:18px; font-size:.85rem; font-weight:500; letter-spacing:.01em; display:flex; align-items:center; gap:.55rem; box-shadow:0 4px 18px -8px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,0.05) inset; transition:background .55s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease); }
.ind-card .ic { font-size:.8rem; color:var(--c-primary); text-shadow:0 0 8px rgba(0,174,239,0.55); }
.ind-card:hover { background:linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)); transform:translateY(-4px); border-color:rgba(255,255,255,0.22); box-shadow:0 14px 36px -16px rgba(0,0,0,.85), 0 0 28px -6px rgba(0,174,239,0.25), 0 0 0 1px rgba(255,255,255,0.07) inset; }

/* ===== Contact Section ===== */
.contact-section { position:relative; background:linear-gradient(180deg,#000 0%, #081829 55%, #000 100%); }
.contact-bg { position:absolute; inset:0; background:radial-gradient(circle at 30% 35%, rgba(0,174,239,0.26), rgba(0,0,0,0) 65%), radial-gradient(circle at 80% 60%, rgba(0,174,239,0.18), rgba(0,0,0,0) 70%); opacity:.35; pointer-events:none; }
.contact-form { position:relative; background:linear-gradient(165deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.15); border-radius:32px; padding:2.2rem 2rem 2rem; box-shadow:0 10px 38px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,0.05) inset; }
.cf-input { width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.18); border-radius:14px; padding:.75rem .9rem; font-size:.85rem; color:#fff; outline:none; resize:vertical; transition:background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.cf-input:focus { background:rgba(255,255,255,0.1); border-color:var(--c-primary); box-shadow:0 0 0 1px var(--c-primary) inset, 0 0 0 3px rgba(0,174,239,0.25); }
.cf-input option { color:#08121A; }
.form-status { font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--c-primary); opacity:0; transform:translateY(6px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.form-status.show { opacity:1; transform:translateY(0); }
.contact-highlights .chk { display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; background:linear-gradient(145deg, rgba(0,174,239,0.55), rgba(0,174,239,0.12)); border:1px solid var(--c-border); border-radius:8px; font-size:.8rem; margin-right:.55rem; box-shadow:0 0 0 1px rgba(0,174,239,0.5) inset, 0 0 16px -4px rgba(0,174,239,0.55); }
.contact-highlights span { color:var(--c-text-dim); }
@media (max-width: 576px){ .contact-form { padding:1.65rem 1.25rem 1.4rem; border-radius:26px; } }

/* ===== Shared Section Utilities ===== */
.section-head p.lead { color:var(--c-text-dim); }
.micro-pill.alt { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); }

/* ===== Reveal Animation System ===== */
[data-animate] { opacity:0; transform:translateY(28px) scale(.98); transition:opacity .9s var(--ease), transform .9s var(--ease), box-shadow .9s var(--ease); }
[data-animate].in { opacity:1; transform:translateY(0) scale(1); }
.enhanced [data-animate] { will-change: transform, opacity; }
/* Specific stagger variants for about / services cards */
.about-card[data-animate], .provide-card[data-animate], .proc-card[data-animate], .std-card[data-animate], .ind-card[data-animate] { opacity:0; transform:translateY(32px) scale(.97); }
.about-card[data-animate].in, .provide-card[data-animate].in, .proc-card[data-animate].in, .std-card[data-animate].in, .ind-card[data-animate].in { opacity:1; transform:translateY(0) scale(1); }

/* Smooth scroll preference */
html { scroll-behavior:smooth; }

/* ===== Minor Tweaks ===== */
.gn-stat[data-animate] { transition-duration:1.1s; }
.gn-stat[data-animate].in { }

/* Light theme extensions */
body.theme-light .proc-card,
body.theme-light .std-card,
body.theme-light .ind-card,
body.theme-light .contact-form,
body.theme-light .cf-input { background:linear-gradient(180deg,#F7FBFD,#F1F6FA); border-color:var(--c-border-soft); box-shadow:0 6px 22px -12px rgba(6,30,44,0.08), 0 0 0 1px rgba(255,255,255,0.65) inset; }
body.theme-light .proc-card:hover,
body.theme-light .std-card:hover,
body.theme-light .ind-card:hover,
body.theme-light .contact-form:hover { background:linear-gradient(180deg,#FFFFFF,#F1F7FA); box-shadow:0 14px 40px -20px rgba(6,30,44,0.12), 0 0 0 1px rgba(255,255,255,0.85) inset; }
body.theme-light .proc-step { background:linear-gradient(145deg, rgba(0,118,168,0.4), rgba(0,118,168,0.08)); border-color:var(--c-border); box-shadow:0 0 0 1px var(--c-border) inset, 0 0 18px -4px var(--c-accent); color:#04202E; }
body.theme-light .cf-input { background:rgba(255,255,255,0.85); }
body.theme-light .cf-input:focus { background:#fff; }

/* Light theme adjustments for map label */
body.theme-light .map-pin .pin-label { background:rgba(255,255,255,0.9); color:#052432; border-color:rgba(0,118,168,0.4); }
body.theme-light .map-pin .pin-line { background:linear-gradient(90deg, rgba(0,118,168,0), rgba(0,118,168,.9), rgba(0,118,168,0)); }

/* === Mobile adjustments for map pin expansion to avoid clipping (labels showing under previous element) === */
@media (max-width: 768px){
  .network-map-wrapper { overflow:visible; }
  .map-surface { overflow:visible; }
  .map-pin { z-index:5; width:38px; height:38px; }
  .map-pin .pulse { width:38px; height:38px; }
  .map-pin .pulse::after { inset:6px; }
  .map-pin .dot { width:8px; height:8px; }
  .map-pin .pin-line { height:0; animation:pinLineRepeatMobile 4s ease-in-out infinite; }
  .map-pin.show-line .pin-line { animation:pinLineRepeatMobile 4s ease-in-out infinite; }
  .map-pin .pin-label { transform:translateY(0); animation:pinLabelRepeatMobile 4s ease-in-out infinite; min-width:90px; padding:.35rem .55rem .4rem; font-size:.55rem; }
  .map-pin .pin-label strong { font-size:.5rem; letter-spacing:.14em; }
  .map-pin .pin-label small { font-size:.48rem; }
  .map-pin.show-line .pin-label { animation:pinLabelRepeatMobile 4s ease-in-out infinite; }
  @keyframes pinLineRepeatMobile { 0%,100%{ height:0; opacity:0; } 10%,90%{ height:42px; opacity:1; } }
  @keyframes pinLabelRepeatMobile { 0%,100%{ opacity:0; transform:translateY(4px); } 10%,90%{ opacity:1; transform:translateY(0); } }
}

.hero-fixed-height { min-height:1200px; max-height:1200px; display:flex; }
@media (max-height:840px){
  .hero-fixed-height { min-height:760px; }
}
@media (max-width:992px){
  .hero-fixed-height { min-height:680px; }
}


/* ===================== Services Page (Extraordinary) ===================== */
.services-hero .radial-halo { background: radial-gradient(circle at 50% 40%, rgba(var(--c-primary-rgb),0.3), rgba(0,0,0,0) 60%); }
.services-hero .gradient-wash { background: linear-gradient(180deg, #101a33 0%, #0A0C1A 80%, #000 100%); }

/* Services sections with continuous gradient flow */
.services-catalog { position:relative; }

/* ISO Section: Flows from page header into first section */
#iso-services.services-catalog { 
  background: linear-gradient(180deg, #070B14 0%, #081120 50%, #0A1528 100%); 
}
#iso-services.services-catalog::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 30% 20%, rgba(0,174,239,0.12), transparent 60%);
  pointer-events:none;
}

/* FDA Section: Continues from ISO */
#fda-services.services-catalog { 
  background: linear-gradient(180deg, #0A1528 0%, #0C1830 50%, #0A1528 100%); 
}
#fda-services.services-catalog::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 70% 30%, rgba(52,152,219,0.10), transparent 60%);
  pointer-events:none;
}

/* Other Section: Continues from FDA and fades to black */
#other-services.services-catalog { 
  background: linear-gradient(180deg, #0A1528 0%, #081120 50%, #050810 100%); 
}
#other-services.services-catalog::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 40%, rgba(46,204,113,0.08), transparent 60%);
  pointer-events:none;
}

.svc-bg-gradient { position:absolute; inset:0; background: radial-gradient(circle at 58% 32%, rgba(var(--c-primary-rgb),0.22), rgba(0,0,0,0) 70%); opacity:.35; pointer-events:none; }
.services-grid { position:relative; display:grid; gap:1.65rem; grid-template-columns:repeat(12, 1fr); }
.svc-card { position:relative; grid-column: span 4; background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.14); border-radius:28px; padding:1.6rem 1.55rem 1.5rem; display:flex; flex-direction:column; box-shadow:0 8px 34px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,0.06) inset; overflow:hidden; transition:background .6s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease); }
.svc-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 15%, rgba(255,255,255,0.22), rgba(255,255,255,0) 70%); opacity:0; transition:opacity .6s var(--ease); }
.svc-card:hover { background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)); transform:translateY(-6px); box-shadow:0 18px 54px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,0.1) inset, 0 0 34px -6px rgba(0,174,239,0.28); border-color:rgba(255,255,255,0.26); }
.svc-card:hover::before { opacity:1; }
.svc-media { width:100%; aspect-ratio: 16 / 9; border-radius:20px; position:relative; margin-bottom:1rem; overflow:hidden; }
.svc-media img, .svc-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%); }
.svc-body p { color:var(--c-text-dim); }
.svc-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem .75rem; }
.svc-list li { font-size:.78rem; padding:.35rem .55rem; border-radius:10px; background:linear-gradient(145deg, rgba(var(--c-primary-rgb),0.28), rgba(var(--c-primary-rgb),0.06)); border:1px solid var(--c-border); box-shadow:0 0 0 1px rgba(var(--c-primary-rgb),0.32) inset; }

@media (max-width: 1200px){ .svc-card { grid-column: span 6; } }
@media (max-width: 992px){ .services-grid { grid-template-columns:repeat(6,1fr); } .svc-card { grid-column: 1 / -1; } }
@media (max-width: 576px){ .svc-card { padding:1.35rem 1.15rem 1.3rem; border-radius:24px; } .svc-list li { font-size:.74rem; } }

.engagement-section { position:relative; background: linear-gradient(180deg, #000 0%, #0c1526 55%, #000 100%); }
.eng-bg { position:absolute; inset:0; background: radial-gradient(circle at 62% 48%, rgba(var(--c-primary-rgb),0.22), rgba(0,0,0,0) 70%); opacity:.3; pointer-events:none; }
.eng-card { position:relative; background:linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.12); border-radius:26px; padding:1.6rem 1.4rem 1.4rem; box-shadow:0 6px 26px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,0.05) inset; transition:background .55s var(--ease), transform .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease); overflow:hidden; }
.eng-card:hover { background:linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)); transform:translateY(-6px); border-color:rgba(255,255,255,0.22); box-shadow:0 16px 48px -18px rgba(0,0,0,.9), 0 0 32px -8px rgba(0,174,239,0.25), 0 0 0 1px rgba(255,255,255,0.07) inset; }
.eng-head { margin-bottom:.75rem; }
.eng-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.eng-list li { font-size:.86rem; color:var(--c-text-dim); display:flex; align-items:center; gap:.5rem; }
.eng-list li::before { content:"✔"; color:var(--c-primary); font-size:.9rem; filter: drop-shadow(0 0 6px var(--c-primary)); }

.faq-section { position:relative; background: linear-gradient(180deg, #070B14 0%, #0A1326 60%, #000 100%); }
.faq-bg { position:absolute; inset:0; background: radial-gradient(circle at 38% 32%, rgba(var(--c-primary-rgb),0.18), rgba(0,0,0,0) 70%); opacity:.35; pointer-events:none; }
.faq-accordion .accordion-item { background: transparent; border:1px solid rgba(255,255,255,0.12); border-radius:16px; overflow:hidden; margin-bottom:1rem; }
.faq-accordion .accordion-button { background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); color:#fff; }
.faq-accordion .accordion-button:not(.collapsed) { color:#fff; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08); }
.faq-accordion .accordion-body { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); color:var(--c-text-dim); }

/* Tilt interaction easing reset (cards already have translate on hover) */
.svc-card, .eng-card { will-change: transform; transform-style: preserve-3d; }

/* ===== Certification Category Cards (What We Provide Section) ===== */
.cert-category-card { 
  position:relative; 
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); 
  border:1px solid rgba(255,255,255,0.14); 
  border-radius:26px; 
  padding:1.6rem 1.5rem 1.5rem; 
  box-shadow:0 8px 32px -14px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,0.06) inset; 
  transition:background .55s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
  overflow:hidden;
}
.cert-category-card::before { 
  content:""; 
  position:absolute; 
  inset:0; 
  background:radial-gradient(circle at 30% 15%, rgba(255,255,255,0.18), rgba(255,255,255,0) 70%); 
  opacity:0; 
  transition:opacity .6s var(--ease); 
}
.cert-category-card:hover { 
  background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)); 
  transform:translateY(-6px); 
  box-shadow:0 18px 48px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,0.1) inset, 0 0 30px -8px rgba(0,174,239,0.28); 
  border-color:rgba(255,255,255,0.24); 
}
.cert-category-card:hover::before { opacity:1; }

.cert-category-header { 
  display:flex; 
  align-items:center; 
  gap:1rem; 
  margin-bottom:1.25rem; 
  padding-bottom:1rem; 
  border-bottom:1px solid rgba(255,255,255,0.1); 
}
.cert-category-icon { 
  filter: brightness(1.1) drop-shadow(0 4px 12px rgba(0,174,239,0.25)); 
}

.cert-list { 
  list-style:none; 
  padding:0; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
  gap:.65rem; 
}
.cert-list li { 
  font-size:.85rem; 
  color:var(--c-text-dim); 
  display:flex; 
  align-items:center; 
  gap:.5rem; 
  line-height:1.35;
}
.cert-badge { 
  display:inline-block;
  font-size:.68rem; 
  font-weight:700;
  letter-spacing:.08em;
  padding:.3rem .55rem; 
  border-radius:8px; 
  background:linear-gradient(145deg, rgba(var(--c-primary-rgb),0.4), rgba(var(--c-primary-rgb),0.1)); 
  border:1px solid rgba(var(--c-primary-rgb),0.5); 
  box-shadow:0 0 0 1px rgba(var(--c-primary-rgb),0.35) inset, 0 0 12px -4px rgba(0,174,239,0.45);
  color:#fff;
  white-space:nowrap;
  min-width:70px;
  text-align:center;
}
.cert-more { 
  font-style:italic; 
  opacity:.8; 
}

/* Light theme adjustments for cert category cards */
body.theme-light .cert-category-card { 
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,251,253,0.95)); 
  border-color:var(--c-border-soft); 
  box-shadow:0 6px 24px -12px rgba(6,30,44,0.08), 0 0 0 1px rgba(255,255,255,0.6) inset; 
}
body.theme-light .cert-category-card:hover { 
  background:linear-gradient(180deg, #fff, rgba(248,252,254,0.98)); 
  box-shadow:0 14px 40px -18px rgba(6,30,44,0.12), 0 0 0 1px rgba(255,255,255,0.85) inset; 
}
body.theme-light .cert-category-header { 
  border-bottom-color:var(--c-border-soft); 
}
body.theme-light .cert-list li { 
  color:var(--c-text-dim); 
}
body.theme-light .cert-badge { 
  background:linear-gradient(145deg, rgba(0,118,168,0.35), rgba(0,118,168,0.1)); 
  border-color:rgba(0,118,168,0.4); 
  color:#04202E; 
}

@media (max-width: 992px){
  .cert-category-card { padding:1.4rem 1.3rem; }
}
@media (max-width: 576px){
  .cert-category-card { padding:1.25rem 1.1rem; border-radius:22px; }
  .cert-category-header { gap:.75rem; margin-bottom:1rem; padding-bottom:.85rem; }
  .cert-list li { font-size:.8rem; }
  .cert-badge { font-size:.62rem; padding:.25rem .45rem; min-width:60px; }
}

/* ===== Services Page - New Categorized Layout ===== */

/* Services Page Nav (when not on hero) */
.services-page-nav {
  position:relative !important;
  background:rgba(0,0,0,0.95);
  border-bottom:1px solid var(--c-border-soft);
}

/* Services Page Header */
.services-page-header {
  padding:6rem 0 4rem;
  background:linear-gradient(180deg, #000 0%, #050810 50%, #070B14 100%);
  position:relative;
}
.services-page-header::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(0,174,239,0.18), transparent 60%);
  pointer-events:none;
}

/* Override Bootstrap text-muted for dark theme */
.text-muted {
  color:rgba(200, 210, 225, 0.75) !important;
}

/* Service Card Links */
.service-card-link {
  text-decoration:none;
  display:block;
  color:inherit;
}

/* Individual Service Cards */
.service-card {
  position:relative;
  background:linear-gradient(180deg, rgba(20,28,50,0.9), rgba(10,16,32,0.95));
  border:1px solid var(--c-border-soft);
  border-radius:20px;
  padding:1.75rem 1.5rem;
  display:flex;
  flex-direction:column;
  transition:all .4s var(--ease);
  overflow:hidden;
}
.service-card::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg, rgba(255,255,255,.08), transparent);
  opacity:0;
  transition:opacity .4s var(--ease);
  pointer-events:none;
}
.service-card:hover {
  border-color:var(--c-border);
  transform:translateY(-6px);
  box-shadow:0 14px 44px -12px rgba(0,174,239,0.25), 0 4px 18px -6px rgba(0,0,0,0.5);
}
.service-card:hover::before {
  opacity:1;
}

/* Service Card Badge */
.service-card-badge {
  display:inline-block;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.35rem .75rem;
  border-radius:8px;
  background:linear-gradient(145deg, rgba(var(--c-primary-rgb),0.45), rgba(var(--c-primary-rgb),0.15));
  border:1px solid rgba(var(--c-primary-rgb),0.5);
  color:#fff;
  margin-bottom:1rem;
  width:fit-content;
}

/* FDA-specific badge */
.badge-fda {
  background:linear-gradient(145deg, rgba(52,152,219,0.45), rgba(52,152,219,0.15));
  border-color:rgba(52,152,219,0.5);
}

/* Other certifications badge */
.badge-other {
  background:linear-gradient(145deg, rgba(46,204,113,0.45), rgba(46,204,113,0.15));
  border-color:rgba(46,204,113,0.5);
}

/* Service Card Features List */
.service-card-features {
  list-style:none;
  padding:0;
  margin:0 0 1rem;
  flex-grow:1;
}
.service-card-features li {
  position:relative;
  padding-left:1.35rem;
  font-size:.825rem;
  color:var(--c-text-dim);
  margin-bottom:.5rem;
}
.service-card-features li::before {
  content:"";
  position:absolute;
  left:0;
  top:.5em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--c-primary);
  opacity:.7;
}

/* Service Card CTA */
.service-card-cta {
  font-size:.8rem;
  font-weight:600;
  color:var(--c-primary);
  transition:transform .3s var(--ease);
  display:inline-block;
  margin-top:auto;
}
.service-card:hover .service-card-cta {
  transform:translateX(4px);
}

/* Section Background Variants */
.services-fda {
  background:linear-gradient(180deg, rgba(10,16,32,0.4), rgba(6,18,36,0.8));
}
.services-other {
  background:linear-gradient(180deg, #070B14, rgba(6,12,22,0.9));
}

.svc-bg-gradient-fda {
  background:radial-gradient(ellipse at 50% 100%, rgba(52,152,219,0.12), transparent 55%);
}
.svc-bg-gradient-other {
  background:radial-gradient(ellipse at 50% 100%, rgba(46,204,113,0.12), transparent 55%);
}

/* Section Icons */
.section-icon {
  object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

/* Animation states */
.service-card[data-animate] {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.service-card[data-animate].in {
  opacity:1;
  transform:translateY(0);
}

@media (max-width: 992px){
  .services-page-header { padding:5rem 0 3rem; }
  .service-card { padding:1.5rem 1.25rem; }
  .section-head .d-flex { flex-wrap:wrap; }
}
@media (max-width: 576px){
  .services-page-header { padding:4rem 0 2.5rem; }
  .services-page-header h1 { font-size:1.75rem !important; }
  .service-card { padding:1.35rem 1.1rem; border-radius:16px; }
  .service-card-badge { font-size:.6rem; padding:.3rem .6rem; }
  .service-card-features li { font-size:.78rem; }
  .section-icon { height:35px !important; }
}


/* ===================== Service Detail Pages ===================== */

/* Service Detail Header */
.service-detail-header {
  padding:7rem 0 4rem;
  background:linear-gradient(180deg, #000 0%, #070B14 40%, #0A1528 100%);
  position:relative;
}
.service-detail-header::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 30% 20%, rgba(0,174,239,0.15), transparent 55%);
  pointer-events:none;
}

/* Breadcrumb */
.breadcrumb {
  background:transparent;
  padding:0;
  margin:0;
}
.breadcrumb-item a {
  color:var(--c-text-dim);
  text-decoration:none;
  font-size:.85rem;
  transition:color .3s ease;
}
.breadcrumb-item a:hover {
  color:var(--c-primary);
}
.breadcrumb-item.active {
  color:rgba(255,255,255,0.6);
  font-size:.85rem;
}
.breadcrumb-item+.breadcrumb-item::before {
  color:rgba(255,255,255,0.3);
  content:"›";
}

/* Service Detail Badge & Icon */
.service-detail-icon {
  height:55px;
  object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.service-detail-badge {
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.5rem 1rem;
  border-radius:10px;
  background:linear-gradient(145deg, rgba(0,174,239,0.45), rgba(0,174,239,0.15));
  border:1px solid rgba(0,174,239,0.5);
  color:#fff;
}

/* Visual Badge (Large number display) */
.service-detail-visual {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:280px;
}
.visual-glow {
  position:absolute;
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(0,174,239,0.35), transparent 70%);
  border-radius:50%;
  filter:blur(40px);
}
.visual-badge-large {
  position:relative;
  text-align:center;
  padding:2rem;
}
.visual-number {
  display:block;
  font-size:5rem;
  font-weight:800;
  letter-spacing:-.02em;
  background:linear-gradient(180deg, #fff, rgba(0,174,239,0.8));
  -webkit-background-clip:text;
  color:transparent;
  line-height:1;
}
.visual-label {
  display:block;
  font-size:1.1rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--c-text-dim);
  margin-top:.5rem;
}

/* Service Stats */
.service-stats {
  padding:2.5rem 0;
  background:linear-gradient(180deg, #0A1528, #0C1830);
  border-top:1px solid var(--c-border-soft);
  border-bottom:1px solid var(--c-border-soft);
}
.stat-card {
  padding:1.25rem 1rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--c-border-soft);
  border-radius:16px;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.stat-card:hover {
  transform:translateY(-4px);
  border-color:var(--c-border);
}
.stat-value {
  font-size:2rem;
  font-weight:700;
  background:linear-gradient(90deg, #fff, #60d6ff);
  -webkit-background-clip:text;
  color:transparent;
  margin-bottom:.25rem;
}
.stat-label {
  font-size:.75rem;
  color:var(--c-text-dim);
  line-height:1.3;
}

/* Service Sections */
.service-section {
  background:linear-gradient(180deg, #0C1830, #0A1528);
  position:relative;
}
.service-section-alt {
  background:linear-gradient(180deg, #0A1528, #081220, #0A1528);
  position:relative;
}

/* Info Cards Stack */
.info-card-stack {
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.info-card {
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1.25rem;
  background:linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid var(--c-border-soft);
  border-radius:16px;
  transition:all .4s var(--ease);
}
.info-card:hover {
  transform:translateX(8px);
  border-color:var(--c-border);
  background:linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
}
.info-card-icon {
  font-size:1.5rem;
  flex-shrink:0;
}

/* Benefit Cards */
.benefit-card {
  padding:1.75rem 1.5rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border:1px solid var(--c-border-soft);
  border-radius:20px;
  transition:all .45s var(--ease);
}
.benefit-card:hover {
  transform:translateY(-6px);
  border-color:var(--c-border);
  box-shadow:0 14px 40px -12px rgba(0,0,0,0.5), 0 0 28px -6px rgba(0,174,239,0.2);
}
.benefit-icon {
  font-size:2rem;
  margin-bottom:1rem;
}

/* Clause Cards */
.clause-card {
  display:flex;
  align-items:flex-start;
  gap:1.25rem;
  padding:1.5rem;
  background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--c-border-soft);
  border-radius:18px;
  transition:all .4s var(--ease);
}
.clause-card:hover {
  border-color:var(--c-border);
  transform:translateY(-4px);
}
.clause-number {
  width:48px;
  height:48px;
  min-width:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  font-weight:700;
  background:linear-gradient(145deg, rgba(var(--c-primary-rgb),0.4), rgba(var(--c-primary-rgb),0.1));
  border:1px solid rgba(var(--c-primary-rgb),0.5);
  border-radius:12px;
  color:#fff;
}
.clause-content {
  flex:1;
}

/* Process Timeline */
.process-timeline {
  position:relative;
  max-width:800px;
  margin:0 auto;
}
.process-timeline::before {
  content:"";
  position:absolute;
  left:24px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg, var(--c-primary), rgba(var(--c-primary-rgb),0.2));
  opacity:.4;
}
.timeline-item {
  display:flex;
  gap:1.5rem;
  padding-bottom:2rem;
  position:relative;
}
.timeline-item:last-child {
  padding-bottom:0;
}
.timeline-step {
  width:50px;
  height:50px;
  min-width:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  font-weight:700;
  background:linear-gradient(145deg, rgba(var(--c-primary-rgb),0.45), rgba(var(--c-primary-rgb),0.08));
  background-color: #0B162C;
  border:2px solid var(--c-primary);
  border-radius:50%;
  color:#fff;
  position:relative;
  z-index:1;
  box-shadow:0 0 20px -4px rgba(var(--c-primary-rgb),0.5);
}
.timeline-content {
  flex:1;
  padding-top:.5rem;
}

/* Industry Tags */
.industry-tag {
  padding:.85rem 1rem;
  background:linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border:1px solid var(--c-border-soft);
  border-radius:12px;
  font-size:.9rem;
  transition:all .35s var(--ease);
}
.industry-tag:hover {
  transform:translateY(-3px);
  border-color:var(--c-border);
  background:linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
}

/* Integration Cards */
.integration-card-link {
  text-decoration:none;
  display:block;
  color:inherit;
}
.integration-card {
  padding:1.75rem 1.5rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border:1px solid var(--c-border-soft);
  border-radius:20px;
  transition:all .45s var(--ease);
}
.integration-card:hover {
  transform:translateY(-6px);
  border-color:var(--c-primary);
  box-shadow:0 14px 40px -12px rgba(0,0,0,0.5), 0 0 28px -6px rgba(0,174,239,0.25);
}
.integration-badge {
  display:inline-block;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.35rem .75rem;
  border-radius:8px;
  background:linear-gradient(145deg, rgba(var(--c-primary-rgb),0.35), rgba(var(--c-primary-rgb),0.1));
  border:1px solid rgba(var(--c-primary-rgb),0.4);
  color:#fff;
}

/* Service CTA */
.service-cta {
  background:linear-gradient(180deg, #0A1528, #070B14, #000);
  position:relative;
}
.service-cta::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 30%, rgba(0,174,239,0.12), transparent 60%);
  pointer-events:none;
}
.cta-card {
  position:relative;
  padding:3.5rem 2rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--c-border-soft);
  border-radius:28px;
  max-width:900px;
  margin:0 auto;
}

/* Primary Glow Button */
.btn-primary-glow {
  background:linear-gradient(145deg, var(--c-primary), rgba(var(--c-primary-rgb),0.8));
  border:none;
  color:#fff;
  box-shadow:0 4px 20px -4px rgba(var(--c-primary-rgb),0.5);
  transition:all .35s var(--ease);
}
.btn-primary-glow:hover {
  background:linear-gradient(145deg, var(--c-primary), var(--c-primary));
  transform:translateY(-2px);
  box-shadow:0 8px 30px -4px rgba(var(--c-primary-rgb),0.6);
  color:#fff;
}

/* FAQ Accordion */
.faq-accordion .accordion-item {
  background:transparent;
  border:1px solid var(--c-border-soft);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:1rem;
}
.faq-accordion .accordion-button {
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color:#fff;
  font-weight:600;
  padding:1.25rem 1.5rem;
  box-shadow:none;
}
.faq-accordion .accordion-button:not(.collapsed) {
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow:none;
}
.faq-accordion .accordion-button::after {
  filter:invert(1);
}
.faq-accordion .accordion-body {
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  color:var(--c-text-dim);
  padding:1.25rem 1.5rem;
}

/* Service Detail Responsive */
@media (max-width: 992px){
  .service-detail-header { padding:5.5rem 0 3rem; }
  .service-detail-visual { min-height:200px; }
  .visual-number { font-size:3.5rem; }
  .process-timeline::before { left:20px; }
  .timeline-step { width:42px; height:42px; min-width:42px; font-size:1rem; }
}
@media (max-width: 576px){
  .service-detail-header { padding:4.5rem 0 2.5rem; }
  .service-detail-header h1 { font-size:1.75rem !important; }
  .service-detail-icon { height:40px; }
  .service-detail-badge { font-size:.6rem; padding:.4rem .75rem; }
  .stat-value { font-size:1.5rem; }
  .stat-label { font-size:.7rem; }
  .benefit-card, .clause-card, .integration-card { padding:1.35rem 1.15rem; }
  .clause-number { width:40px; height:40px; min-width:40px; font-size:1rem; }
  .cta-card { padding:2.5rem 1.5rem; }
}

/* Utility: Hover White */
.hover-white:hover { color: #fff !important; }

/* ===== Contact Info Stack (Redesigned) ===== */
.contact-info-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s var(--ease);
}

.contact-info-item:hover {
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border-color: var(--c-primary);
    transform: translateX(5px);
}

.contact-info-item .icon-box {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 174, 239, 0.1);
    border-radius: 12px;
    font-size: 1.2rem;
    color: var(--c-primary);
    border: 1px solid rgba(0, 174, 239, 0.2);
}

.contact-info-item .info-content {
    flex: 1;
}

.contact-info-item .label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-text-dim);
    margin-bottom: 0.2rem;
    font-weight: 600;
}

.contact-info-item .value {
    margin: 0;
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.3;
}

/* Light theme adjustments for contact stack */
body.theme-light .contact-info-item {
    background: linear-gradient(145deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
    border-color: var(--c-border-soft);
}
body.theme-light .contact-info-item:hover {
    background: #fff;
    border-color: var(--c-primary);
}
body.theme-light .contact-info-item .value {
    color: var(--c-text);
}

.x-small { font-size: 0.7rem !important; }