html { scroll-padding-top: 96px; }
  body { font-feature-settings: "cv11","ss01"; }
  .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

  .glass-card { background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .mesh-gradient-bg {
    background:
      radial-gradient(at 0% 0%, rgba(0,32,104,0.10) 0px, transparent 50%),
      radial-gradient(at 100% 100%, rgba(0,106,98,0.10) 0px, transparent 50%);
  }
  .text-gradient {
    background: linear-gradient(135deg, #002068 0%, #006a62 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .bg-gradient-primary { background: linear-gradient(135deg, #002068 0%, #153ea3 55%, #006a62 100%); }

  /* ---------- Motion ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
    .reveal.in-view { opacity: 1; transform: translateY(0); }
    .reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
    .reveal-scale.in-view { opacity: 1; transform: scale(1); }

    @keyframes floatY { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-22px) translateX(10px); } }
    @keyframes floatY2 { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(18px) translateX(-14px); } }
    .blob-1 { animation: floatY 9s ease-in-out infinite; }
    .blob-2 { animation: floatY2 11s ease-in-out infinite; }

    @keyframes kenburns { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.12) translate(-1%,-1%); } }
    .kenburns { animation: kenburns 22s ease-out forwards; }

    @keyframes fadeInUp { from { opacity:0; transform: translateY(18px);} to { opacity:1; transform: translateY(0);} }
    .hero-anim-1 { animation: fadeInUp .8s cubic-bezier(.2,.7,.2,1) .1s both; }
    .hero-anim-2 { animation: fadeInUp .8s cubic-bezier(.2,.7,.2,1) .28s both; }
    .hero-anim-3 { animation: fadeInUp .8s cubic-bezier(.2,.7,.2,1) .46s both; }
    .hero-anim-4 { animation: fadeInUp .8s cubic-bezier(.2,.7,.2,1) .64s both; }

    @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(120,247,233,.55);} 70% { box-shadow: 0 0 0 12px rgba(120,247,233,0);} 100% { box-shadow: 0 0 0 0 rgba(120,247,233,0);} }
    .pulse-dot { animation: pulseRing 2.2s ease-out infinite; }

    @keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }
    .marquee-track { animation: marquee 42s linear infinite; }
    .marquee-wrap:hover .marquee-track { animation-play-state: paused; }

    @keyframes bounceArrow { 0%,100% { transform: translateY(0);} 50% { transform: translateY(8px);} }
    .bounce-arrow { animation: bounceArrow 1.8s ease-in-out infinite; }

    .tilt-card { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
  }

  /* Nav states */
  #site-nav { transition: box-shadow .3s ease, background-color .3s ease, height .3s ease; }
  #site-nav.scrolled { box-shadow: 0 8px 30px -12px rgba(0,32,104,.18); background-color: rgba(249,249,252,0.97); }

  /* Logo badge — always a clean, deliberate white card so the logo never floats on an odd background */
  .logo-badge { background: #ffffff; border-radius: 12px; padding: 6px 12px 6px 10px; box-shadow: 0 2px 10px -2px rgba(0,32,104,.12); border: 1px solid rgba(196,197,213,.35); transition: box-shadow .3s ease, transform .3s ease; }
  .logo-badge:hover { box-shadow: 0 8px 20px -4px rgba(0,32,104,.22); transform: translateY(-1px); }
  .logo-badge-footer { background: #ffffff; border-radius: 14px; padding: 10px 18px; display: inline-flex; align-items: center; box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); }

  /* Neon accents */
  .neon-border-top { position: relative; }
  .neon-border-top::before { content:""; position:absolute; top:0; left:16px; right:16px; height:3px; border-radius:0 0 3px 3px; background: linear-gradient(90deg, #002068, #006a62, #78f7e9); opacity:.85; }
  @keyframes neonPulse { 0%,100% { box-shadow: 0 0 0px rgba(120,247,233,0), 0 0 0px rgba(0,106,98,0); } 50% { box-shadow: 0 0 24px rgba(120,247,233,.45), 0 0 48px rgba(0,106,98,.18); } }
  .neon-hover:hover { animation: neonPulse 1.6s ease-in-out infinite; }
  .neon-text { text-shadow: 0 0 18px rgba(120,247,233,.55); }
  .neon-divider { height:1px; background: linear-gradient(90deg, transparent, rgba(120,247,233,.6), transparent); }

  /* Circuit / vector pattern backdrop (data-uri SVG, no external image dependency) */
  .circuit-bg {
    background-image:
      linear-gradient(rgba(0,32,104,.85), rgba(0,32,104,.92)),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2378f7e9' stroke-width='1' opacity='0.35'%3E%3Cpath d='M10 10h30v30M110 10H80V40M10 110h30V80M110 110H80V80'/%3E%3Ccircle cx='10' cy='10' r='2.5' fill='%2378f7e9'/%3E%3Ccircle cx='110' cy='10' r='2.5' fill='%2378f7e9'/%3E%3Ccircle cx='10' cy='110' r='2.5' fill='%2378f7e9'/%3E%3Ccircle cx='110' cy='110' r='2.5' fill='%2378f7e9'/%3E%3Ccircle cx='60' cy='60' r='2' fill='%2378f7e9'/%3E%3Cpath d='M40 60h40M60 40v40'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover, 120px 120px;
  }
  .hex-vector { position:absolute; inset:0; pointer-events:none; opacity:.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='0.06' d='M42 0 84 24v48L42 96 0 72V24z'/%3E%3C/svg%3E"); background-size: 84px 96px; }

  /* Solution card image tiles — visual sits in its own banded area,
     description always stays on a plain white surface below so text never loses contrast */
  .sol-tile { position: relative; height: 160px; overflow: hidden; display:flex; align-items:flex-end; justify-content:flex-start; padding: 14px; }
  .sol-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .group:hover .sol-tile img { transform: scale(1.08); }
  .sol-tile .sol-overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,32,104,.15) 0%, rgba(0,20,65,.75) 100%); }
  .sol-tile .sol-icon-bg { position:absolute; right:-10px; bottom:-18px; font-size: 130px; opacity:.16; color:#fff; }
  .sol-tile .sol-icon-fg { position:relative; z-index:2; color:#fff; font-size:26px; background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); backdrop-filter: blur(6px); width:46px; height:46px; border-radius: 12px; display:flex; align-items:center; justify-content:center; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .group:hover .sol-icon-fg { transform: scale(1.08) rotate(-3deg); }
  .sol-tile-1 { background: linear-gradient(135deg, #002068 0%, #153ea3 100%); }
  .sol-tile-2 { background: linear-gradient(135deg, #006a62 0%, #00201d 100%); }
  .sol-tile-3 { background: linear-gradient(135deg, #002657 0%, #004493 100%); }
  .sol-tile-4 { background: linear-gradient(135deg, #003399 0%, #007169 100%); }
  .sol-tile-5 { background: linear-gradient(135deg, #153ea3 0%, #006a62 100%); }
  .sol-tile-6 { background: linear-gradient(135deg, #003b81 0%, #001a41 100%); }

  /* Trusted-by client marquee */
  .client-badge {
    display: inline-flex; align-items: center; gap: 10px;
    white-space: nowrap; flex-shrink: 0;
    background: #f3f3f6; border: 1px solid rgba(196,197,213,.5);
    border-radius: 14px; padding: 14px 22px;
    color: #002068; font-weight: 600; font-size: 14px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
  }
  .client-badge .material-symbols-outlined { color: #006a62; font-size: 20px; }
  .client-badge:hover { transform: translateY(-3px); background: #ffffff; border-color: #78f7e9; box-shadow: 0 12px 24px -10px rgba(0,32,104,.18); }

  /* Testimonial carousel */
  .testimonial-slide { position: absolute; inset: 0; opacity: 0; transform: translateX(24px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
  .testimonial-slide.active { position: relative; opacity: 1; transform: translateX(0); pointer-events: auto; }
  .testimonial-slide.leaving { position: absolute; opacity: 0; transform: translateX(-24px); }
  .testi-dot { width: 9px; height: 9px; border-radius: 50%; background: #c4c5d5; transition: all .35s ease; cursor: pointer; border: none; padding: 0; }
  .testi-dot.active { background: #006a62; width: 26px; border-radius: 6px; }

  /* Scroll-driven campus journey (lightweight panel crossfade) */
  .tour-panel { position:absolute; inset:0; opacity:0; transition: opacity 1s ease; }
  .tour-panel.active { opacity:1; }
  .tour-panel img { width:100%; height:100%; object-fit:cover; transform: scale(1.06); transition: transform 4s ease; }
  .tour-panel.active img { transform: scale(1); }
  .tour-caption { position: absolute; opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
  .tour-caption.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
  #tour-scrollcue.hidden { opacity: 0; }
  .tour-dot { width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.3); transition: all .4s ease; }
  .tour-dot.active { background: #78f7e9; height: 26px; box-shadow: 0 0 10px rgba(120,247,233,.6); }

  /* Parallax helper */
  .parallax-layer { will-change: transform; }

  /* Mobile menu */
  #mobile-menu { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
  #mobile-menu.open { max-height: 480px; }

  /* Counter */
  .counter { font-variant-numeric: tabular-nums; }

  /* Timeline connector */
  .timeline-line { background: linear-gradient(90deg, transparent, #c4c5d5 10%, #c4c5d5 90%, transparent); }

  /* Form focus */
  .field-input:focus { outline: none; border-color: #002068; box-shadow: 0 0 0 3px rgba(0,32,104,.15); }

  ::selection { background: #78f7e9; color: #002068; }

  /* Back to top */
  #back-to-top { opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
  #back-to-top.show { opacity: 1; pointer-events: auto; }