*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;}
:root{--nav-height:120px;}
body{background:#090b14;color:#fff;scroll-behavior:smooth;overflow-x:hidden;padding-top:0;}

/* NAVBAR — static (stays visually at top, doesn't scroll) */
.navbar.static{
  position:static;
  top:0;
  left:0;
  width:100%;
  height:var(--nav-height);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 3rem;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(10px);
  z-index:1000;
}
.nav-logo{
  width:260px;
  filter:drop-shadow(0 0 20px #a700ff80);
  transition:transform .3s ease;
}
.nav-logo:hover{transform:scale(1.03);}
.social-icons{display:flex;align-items:center;gap:18px;}
.social-icons .icon{color:#ccc;text-decoration:none;line-height:0;}
.social-icons svg{width:26px;height:26px;fill:currentColor;transition:.3s;}
.social-icons .icon:hover{
  color:#00c6ff;
  filter:drop-shadow(0 0 8px #a700ff80);
  transform:translateY(-1px);
}

/* HERO */
.hero{
  height:100vh;
  width:100%;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin-top:0; /* offset handled by body padding */
}
.hero video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.25;
  filter:blur(2px);
  z-index:-1;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(9,11,20,0.2),rgba(9,11,20,1));
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-content{text-align:center;padding-top:1rem;}
.hero-content h1{
  font-size:3rem;
  background:linear-gradient(90deg,#00c6ff,#a700ff,#00c6ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:200% 200%;
  animation:pulseGradient 8s ease-in-out infinite;
  text-shadow:0 0 10px rgba(167,0,255,0.6);
}
.hero-content p{color:#ddd;margin:1rem auto 2rem;max-width:600px;}

/* HEADERS + BUTTONS */
h1,h2{
  background:linear-gradient(90deg,#00c6ff,#a700ff,#00c6ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:200% 200%;
  animation:pulseGradient 8s ease-in-out infinite;
  text-shadow:0 0 8px rgba(167,0,255,0.5);
}
section p{color:#ccc;}

.btn{
  background:linear-gradient(90deg,#00c6ff,#a700ff,#00c6ff);
  background-size:200% 200%;
  color:#fff;
  padding:.8rem 1.6rem;
  border-radius:30px;
  text-decoration:none;
  display:inline-block;
  transition:transform .3s ease;
  animation:pulseGradient 5s ease-in-out infinite;
  box-shadow:0 0 15px rgba(167,0,255,0.4);
}
.btn:hover{
  transform:scale(1.05);
  box-shadow:0 0 25px rgba(167,0,255,0.8);
}

/* MAIN CONTENT */
main{margin-top:0;}
section{padding:4rem 2rem;text-align:center;}
.projects,.contact{
  background:linear-gradient(145deg,#0c0c0f 0%,#090b14 100%);
}

/* --- OUR SERVICES (base) --- */
.services{
  background:radial-gradient(circle at top left,#0b0d18 0%,#090b14 100%);
  padding:6rem 2rem;
  text-align:center;
}
.services h2{
  font-size:2.4rem;
  background:linear-gradient(90deg,#00c6ff,#a700ff,#00c6ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:200% 200%;
  /* (will be overridden below to keep pulseGradient) */
  animation:shiftHue 6s linear infinite;
  margin-bottom:0.5rem;
}
.services p{
  color:#cfd3ff;
  font-size:1.1rem;
  margin-bottom:3rem;
}

/* grid layout */
.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
  max-width:1100px;
  margin:0 auto;
}

/* cards */
.service-card{
  background:rgba(15,17,30,0.7);
  border:2px solid transparent; /* real border drawn by ::before */
  border-radius:16px;
  padding:2rem 1.5rem;
  color:#fff;
  transition:all .3s ease;
  box-shadow:0 0 0 rgba(167,0,255,0);
  backdrop-filter:blur(6px);
  /* (will be overridden below to stop hue shift) */
  animation:shiftHue 6s linear infinite;
}
.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  padding:2px;                    /* border thickness */
  border-radius:inherit;
  background:linear-gradient(90deg,#00c6ff,#a700ff,#00c6ff);
  background-size:200% 200%;
  animation:pulseGradient 8s linear infinite; /* same motion as text */
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;        /* show only the border area */
  pointer-events:none;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 0 25px rgba(167,0,255,0.4);
}

/* icons (SVG default) */
.service-card .icon{
  margin-bottom:1rem;
  display:flex;
  justify-content:center;
}
.service-card .icon svg{
  width:42px;
  height:42px;
  filter:drop-shadow(0 0 10px rgba(167,0,255,0.4));
  /* (will be overridden below to stop hue shift) */
  animation:shiftHue 6s linear infinite;
}
.service-card h3{
  font-size:1.15rem;
  margin-bottom:0.6rem;
}
.service-card p{
  font-size:0.95rem;
  color:#bbb;
  line-height:1.4;
}

/* hue shifting animation (kept for other parts if used) */
@keyframes shiftHue {
  0% { filter:hue-rotate(0deg); }
  50% { filter:hue-rotate(180deg); }
  100% { filter:hue-rotate(360deg); }
}

/* PROJECTS */
.project-grid,.buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
  margin-top:3rem;
}
.project{
  background:rgba(20,20,35,0.85);
  border:2px solid transparent; /* real border drawn by ::before */
  border-radius:16px;
  padding:1.5rem;
  width:220px;
  transition:.3s;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:1;
}
a.project{
  display:inline-block;
  text-decoration:none;
  color:inherit;
  width:220px;
}
.project img,
.project h3{pointer-events:none;}
.project:hover{
  transform:translateY(-5px);
  box-shadow:0 0 20px #a700ff66;
  z-index:5;
}
.project img{width:100%;border-radius:12px;margin-bottom:1rem;}
.coming-soon{opacity:.6;border-style:dashed;}
.email{
  color:#00c6ff;
  font-weight:600;
  text-decoration:none;
  display:block;
  margin-bottom:2rem;
}

/* FOOTER */
.site-footer{
  background:linear-gradient(145deg,#0c0c0f 0%,#090b14 100%);
  border-top:1px solid rgba(255,255,255,0.08);
  padding:2rem 1.5rem;
  color:#cfd3ff;
}
.site-footer .footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr auto 2fr;
  gap:1.5rem;
  align-items:center;
}
.site-footer .footer-logo{width:160px;filter:drop-shadow(0 0 12px #a700ff66);} 
.site-footer .copyright{font-size:.9rem;color:#9aa0c6;margin-top:.4rem;}
.site-footer .footer-links{display:flex;gap:1.2rem;justify-content:center;}
.site-footer .footer-links a{color:#cfd3ff;text-decoration:none;opacity:.9}
.site-footer .footer-links a:hover{color:#00c6ff;opacity:1}
.site-footer .footer-disclaimer{font-size:.9rem;line-height:1.4;color:#b9bfe0;text-align:left}

@media(max-width:768px){
  .site-footer .footer-inner{grid-template-columns:1fr; text-align:center}
  .site-footer .footer-disclaimer{text-align:center}
}

/* PARTNERS */
.partners{
  padding:4rem 2rem;
  /* Darken this section to match the logo tile better */
  background:#0a0a0d;
  text-align:center;
  overflow:hidden;
}
.partners h2{
  margin-bottom:2rem;
  font-size:1.8rem;
  background:linear-gradient(90deg,#00c6ff,#a700ff,#00c6ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:200% 200%;
  animation:pulseGradient 8s ease-in-out infinite;
}
.marquee{
  position:relative;
  height:160px;                 /* allow taller partner logos */
  width:min(92vw,420px);        /* responsive smaller travel window */
  margin:0 auto;                /* center the window */
  overflow:hidden;
  background:#0a0a0d;           /* match the CSE tile black */
  border-radius:18px;           /* echoes the image rounding */
  box-shadow:0 8px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) inset;
}

/* Single-logo smooth pass (no duplicate) */
.partner-logo{
  position:absolute;
  left:110%;                    /* start just off the right edge */
  top:50%;
  transform:translate(-50%,-50%);
  animation:oneLogoMarquee 14s linear infinite;
  cursor:pointer;
  isolation:isolate;            /* keep blend + shadow inside this item */
}
.marquee:hover .partner-logo{animation-play-state:paused;}

.partner-logo img{
  position:relative;
  z-index:1;
  display:block;
  height:120px;
  width:auto;
  border-radius:12px;             /* subtle rounding only */
  background:transparent;         /* transparent asset */
  filter:none;
  opacity:1;
  transition:transform .3s ease;
  mix-blend-mode:normal;          /* correct colors for transparent PNG */
}
.project::before{
  content:"";
  position:absolute;
  inset:0;
  padding:2px;                    /* border thickness */
  border-radius:inherit;
  background:linear-gradient(90deg,#00c6ff,#a700ff,#00c6ff);
  background-size:200% 200%;
  animation:pulseGradient 8s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.partner-logo:hover img{transform:scale(1.05);} 

/* Remove earlier camouflage layers (not needed with transparent logo) */
.partner-logo::before, .partner-logo::after { display:none; }

/* Soft top overlay to hide the remaining hard square corners */
.partner-logo::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:18px;
  pointer-events:none;
  z-index:2;
  background:radial-gradient(closest-side, rgba(10,10,13,0) 76%, rgba(10,10,13,1) 100%);
}

/* Start off-screen right, end off-screen left (within small window) */
@keyframes oneLogoMarquee{
  0%   { left:110%; }
  100% { left:-10%; }
}

/* --- MOBILE / REDUCED MOTION TWEAKS --- */
@media (max-width: 768px), (prefers-reduced-motion: reduce){
  .hero video{ display:none; }                /* save data/CPU */
}

@media (max-width: 600px){
  .marquee{ height:130px; width:min(94vw, 380px); }
  .partner-logo img{ height:90px; }
}

/* Larger touch targets for social icons */
.social-icons .icon{ padding:8px; border-radius:8px; }

/* CHART POPUP */
.chart-popup{
  position:fixed;
  bottom:120px;
  width:800px;
  height:450px;
  border-radius:16px;
  overflow:hidden;
  background:#0c0c0f;
  box-shadow:0 0 30px rgba(167,0,255,0.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease, transform .4s ease;
  z-index:500;
}
.chart-popup iframe{width:100%;height:100%;border:none;}
#chartPopupChippy{
  left:25%;
  transform:translateX(-25%) scale(0.95);
  z-index:550;
}
#chartPopupSupermark{
  left:75%;
  transform:translateX(-75%) scale(0.95);
  z-index:540;
}
#chartPopupChippy.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-25%) scale(1);
  z-index:1000;
}
#chartPopupSupermark.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-75%) scale(1);
  z-index:1000;
}

/* ANIMATIONS */
@keyframes pulseGradient{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* RESPONSIVE */
@media(max-width:768px){
  :root{--nav-height:90px;}
  .nav-logo{width:180px;}
  .chart-popup{width:95%;height:360px;}
  .project{width:80%;}
  .service-grid{grid-template-columns:1fr;}
}

/* ===================================================================
   SERVICES OVERRIDES — lock colours to brand gradient & clean PNGs
   =================================================================== */
.services h2{
  /* Match hero text behaviour */
  animation:pulseGradient 8s ease-in-out infinite;
}

.service-card{
  /* Stop previous hue-rotate animation so colours stay on-brand */
  animation:none;
  background:rgba(15,17,30,0.72);
  /* keep existing border-image gradient */
}

/* ICON WRAPPER — used to host the soft brand glow */
.service-card .icon{
  width:96px;height:96px;margin:0 auto 14px;position:relative;
}

/* Soft blue→purple glow behind each icon */
.service-card .icon::before{
  content:"";position:absolute;left:50%;top:50%;
  width:140px;height:140px;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side,
              rgba(0,198,255,.35),
              rgba(167,0,255,.35) 45%,
              rgba(0,0,0,0) 70%);
  filter:blur(18px);opacity:.75;
  animation:pulseGlow 6s ease-in-out infinite;
}

/* PNG ICONS (if used) */
.service-icon,
.service-card .icon img{
  width:100%;height:100%;display:block;object-fit:contain;
  mix-blend-mode:screen;                         /* removes black squares */
  filter:drop-shadow(0 0 14px rgba(167,0,255,.55));
  border-radius:14px;
  animation:none;
}

/* SVG ICONS (if used) — keep brand colour and glow, no hue shift */
.service-card .icon svg{
  width:96px;height:96px;
  animation:none;
  filter:drop-shadow(0 0 14px rgba(167,0,255,.55));
}

/* Subtle breathing glow for icons */
@keyframes pulseGlow{
  0%{opacity:.55; transform:translate(-50%,-50%) scale(.92);}
  50%{opacity:.9;  transform:translate(-50%,-50%) scale(1);}
  100%{opacity:.55; transform:translate(-50%,-50%) scale(.92);}
}

/* ===================================================================
   SERVICES ICON TWEAKS — stronger glow + hide PNG squares
   These override earlier rules without touching backups.
   =================================================================== */
.service-card .icon{
  width:110px;
  height:110px;
  border-radius:50%;
  overflow:hidden; /* clip image corners */
  margin:0 auto 14px;
  position:relative;
  background:transparent;
}

.service-card .icon::before{
  content:"";
  position:absolute;
  inset:0;                     /* keep entirely inside the circle */
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
              rgba(0,0,0,0) 62%,
              rgba(0,198,255,.22) 70%,
              rgba(167,0,255,.22) 78%,
              rgba(0,0,0,0) 86%);
  filter:blur(3px);            /* subtle, avoids bleeding past border */
  opacity:1;
}

/* removed extra rim to avoid odd double glow */

.service-card .icon img,
.service-icon{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
  mix-blend-mode:screen;  /* suppress black PNG backgrounds on dark theme */
  filter:none;            /* avoid square shadow */
}

.service-card:hover .icon::before{filter:blur(26px);opacity:1;}