/* ========== Technovia Base Styles ========== */
:root{
  --bg-900:#07070b;
  --bg-800:#0b0b12;
  --bg-700:#11111b;
  --text-100:#f3f2fb;
  --text-300:#c8c7d9;
  --text-500:#9a99ad;
  --card:#0e0e16;
  --stroke:rgba(255,255,255,0.08);

  /* RGB gaming gradient */
  --magenta:#ff00a8;
  --pink:#ff4dd2;
  --purple:#7a5cff;
  --blue:#00d0ff;
  --grad:linear-gradient(135deg,var(--magenta),var(--pink),var(--purple),var(--blue));
  --grad-animated:linear-gradient(120deg,var(--magenta),var(--pink),var(--purple),var(--blue),var(--magenta));
  --shadow:0 2px 20px rgba(127, 0, 255, .25), 0 2px 40px rgba(0, 208, 255, .15);

  --container:1200px;
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --pad:20px;
  --pad-lg:28px;
  --speed:250ms;
}




*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text-100);
  background:var(--bg-900);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* ===== Futuristic RGB animated background ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--grad-animated);
  background-size: 400% 400%;
  animation: rgbBackground 20s ease infinite;
  opacity: 0.07; /* subtle */
  filter: blur(100px);
  z-index: -1;
  pointer-events: none;
}

@keyframes rgbBackground {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Layout helpers */
.container{width:min(100%,var(--container)); margin-inline:auto; padding-inline:20px}
.section{position:relative}
.pad-y{padding:80px 0}
.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 40%)}

h1,h2,h3{line-height:1.15;margin:0 0 10px}
h1{font-size:clamp(2rem, 1.2rem + 3vw, 3.5rem)}
h2{font-size:clamp(1.4rem, 1rem + 1.6vw, 2.2rem)}
h3{font-size:1.25rem}
p{margin:0 0 12px;color:var(--text-300)}
strong{color:var(--text-100)}
.overline{letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; color:var(--text-500)}

/* Gradient text & animated accents */
.gradient-text{
  background:var(--grad-animated);
  background-size:300% 300%;
  background-clip:text;              
  -webkit-background-clip:text;      
  color:transparent;                  
  -webkit-text-fill-color:transparent;
  animation:gradMove 10s ease infinite;
}
@keyframes gradMove{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}

/* Glassmorphism card */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--stroke);
  backdrop-filter:blur(10px);
  border-radius:var(--radius);
box-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 30px #00d4ff, 0 0 40px #00d4ff;


}

/* Header/Nav */
.site-header{position:sticky; top:0; z-index:1000; background:rgba(7,7,11,.6); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--stroke)}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; color:var(--text-100); text-decoration:none}

/* ===== Logo fix: remove forced glow ===== */
.brand-mark{
  display:grid; place-items:center;
  width:36px; height:36px;
  border-radius:10px;
  font-weight:700;
  background:none !important;
  box-shadow:none !important;
}

.brand-text{font-weight:700; letter-spacing:.2px}
.site-nav{display:flex; align-items:center; gap:24px}
.site-nav ul{display:flex; list-style:none; gap:18px; margin:0; padding:0}
.site-nav a{color:var(--text-300); text-decoration:none; padding:8px 10px; border-radius:8px}
.site-nav a:hover{color:var(--text-100); background:rgba(255,255,255,.04)}
.nav-cta .btn{margin-left:6px}
.nav-toggle{display:none; background:none; color:var(--text-100); border:0; padding:8px; border-radius:10px}
.nav-toggle:focus-visible{outline:2px solid var(--purple)}

/* Mobile nav */
body.nav-open { overflow: hidden; }

@media (max-width: 920px){
  .nav-toggle{ display: inline-grid; }

  .site-nav{
    position: fixed;
    inset: 64px 0 auto 0;              /* sits right under sticky header */
    background: rgba(7,7,11,.9);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--stroke);
    z-index: 1100;                      /* ensure it overlays everything */
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 20px;
    transform: translateY(-120%);
    transition: transform var(--speed) ease;

    /* for very short screens or long menus */
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
  }

  .site-nav.open{ transform: translateY(0); }

  .site-nav ul{ flex-direction: column; width: 100%; }
  .nav-cta{ width: 100%; }
  .nav-cta .btn{ display: block; width: 100%; }
}


/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:12px; border:1px solid var(--stroke); text-decoration:none; cursor:pointer; transition:transform var(--speed), box-shadow var(--speed), background var(--speed); font-weight:600}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--grad); color:#061018; border:0; box-shadow:var(--shadow)}
.btn-ghost{background:rgba(255,255,255,.05); color:var(--text-100)}
.btn-icon{background:rgba(255,255,255,.06); border:1px solid var(--stroke); border-radius:10px; padding:8px 12px; color:var(--text-100)}

/* Hero */
.hero{position:relative; padding:80px 0 40px}
.hero-bg{
  position:absolute; inset:0; background:
    radial-gradient(600px 300px at 80% 10%, rgba(0,208,255,.12), transparent 70%),
    radial-gradient(800px 400px at 10% 10%, rgba(255,0,168,.12), transparent 70%),
    url('../assets/img/hero-glow.webp');
  opacity:.9; pointer-events:none;
}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.hero-copy .lead{font-size:1.1rem}
.hero-actions{display:flex; gap:12px; margin:16px 0 10px}
.hero-bullets{display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:12px 0 0; list-style:none}
.hero-bullets li{padding:6px 10px; border:1px solid var(--stroke); border-radius:999px; color:var(--text-300); background:rgba(255,255,255,.03)}
.hero-art{position:relative; min-height:320px}
.card-hero{padding:18px; position:relative}
.kpi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px}
.kpi{background:rgba(0,0,0,.25); border:1px solid var(--stroke); border-radius:10px; padding:10px}
.kpi span{display:block; font-size:.8rem; color:var(--text-500)}
.kpi strong{font-size:1.1rem}
.spark{height:120px; margin-top:12px; border-radius:10px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); animation:spark 2.2s linear infinite}
@keyframes spark{0%{background-position:-200px 0}100%{background-position:200px 0}}
.glow-orb{position:absolute; filter:blur(40px); opacity:.7}
.orb-1{width:160px; height:160px; background:var(--magenta); top:-20px; right:20px}
.orb-2{width:140px; height:140px; background:var(--blue); bottom:10px; left:-10px}

@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr}
  .hero{padding-top:40px}
}


/* Sections */
.section-head{margin-bottom:24px}
.section-title{display:inline-block; margin-bottom:6px}
.section-sub{color:var(--text-500)}

/* Cards & grid */
.grid{display:grid; gap:16px}
.cards-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){ .cards-3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .cards-3{grid-template-columns:1fr} }

.card{
  background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius);
  padding:20px; transition:transform var(--speed), box-shadow var(--speed), border-color var(--speed);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(255,0,255,0.35)}
.card .link{color:var(--text-100); text-decoration:none; display:inline-block; margin-top:6px}
.icon-wrap{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid var(--stroke); margin-bottom:10px}


/* Solutions cards specifics */
.solution .checklist{margin:10px 0 0; padding:0 0 0 18px}
.checklist li{margin:6px 0}

/* Portfolio */
.portfolio-grid .folio-item{
  display:block; color:inherit; text-decoration:none; border-radius:16px; overflow:hidden;
  border:1px solid var(--stroke); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.folio-thumb{height:180px; background:var(--grad); background-size:200% 200%; animation:gradMove 8s ease infinite}
.folio-meta{padding:14px}

/* Process */
.process{list-style:none; padding:0; margin:0; counter-reset:step}
.process li{
  display:flex; align-items:center; gap:12px; padding:14px 16px; margin:12px 0;
  border:1px dashed var(--stroke); border-radius:12px; background:rgba(255,255,255,.02)
}
.process li span{
  width:28px; height:28px; display:inline-grid; place-items:center; border-radius:50%;
  background:var(--grad); color:#061018; font-weight:700
}

/* Pricing */
.price .price-amt{font-weight:800; font-size:1.6rem; color:var(--text-100)}
.price.featured{outline:2px solid rgba(255,0,255,0.35)}

/* Slider */
.slider{position:relative}
.slides{display:flex; overflow:hidden}
.slide{
  min-width:100%; padding:20px; border:1px solid var(--stroke); border-radius:var(--radius); background:rgba(255,255,255,.03);
}
blockquote{margin:0 0 8px}
.slider-controls{position:absolute; inset:auto 0 -10px 0; display:flex; justify-content:center; gap:8px}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0}
.chips li{padding:8px 12px; border:1px solid var(--stroke); border-radius:999px; background:rgba(255,255,255,.04)}

/* CTA */
.cta{padding-bottom:100px}
.cta-box{display:grid; place-items:center; text-align:center; padding:30px}

/* Footer */
.site-footer{border-top:1px solid var(--stroke); margin-top:60px; background:rgba(7,7,11,.7); backdrop-filter:blur(8px)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:20px; padding:24px 0}
.brand-footer .brand-mark{width:30px; height:30px}
.foot-links{list-style:none; padding:0; margin:0}
.foot-links li{margin:6px 0}
.foot-links a{color:var(--text-300); text-decoration:none}
.foot-links a:hover{color:var(--text-100)}
.muted{color:var(--text-500)}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--stroke); padding:14px 0}
.foot-legal{list-style:none; display:flex; gap:14px; margin:0; padding:0}
@media (max-width:920px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .foot-bottom{flex-direction:column; gap:10px}
}



.site-footer {
  position: relative;
  overflow: visible; /* allow glow to spill */
}

/* --- Footer Enhancements --- */

/* 1. Gradient line above bottom */
.foot-bottom {
  border-top: none !important; /* remove old border */
  position: relative;
}
.foot-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5px;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--magenta),
    var(--pink),
    var(--purple),
    var(--blue),
    var(--magenta)
  );
}

/* 2. Make footer section headers brand magenta */
.footer-grid h3,
.footer-grid h4 {
  color: #ff00a8 !important;
  font-weight: bold;
}

/* 3. Change link hover color to brand magenta */
.foot-links a:hover {
  color: #ff00a8 !important;
  transform: translateX(5px); /* hover slide */
  transition: all 0.3s ease;
}


/* Neon glow background */
.site-footer::before {
  content: "";
  position: absolute;
  top: -20px; /* slightly above footer */
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg, var(--magenta), var(--pink), var(--purple), var(--blue), var(--magenta));
  filter: blur(30px);
  opacity: 0.25;
  pointer-events: none;
}



/* Back-to-top */
.back-to-top{
  position:fixed; right:18px; bottom:18px; border:1px solid var(--stroke);
  border-radius:10px; background:rgba(255,255,255,.06); color:var(--text-100);
  padding:10px 12px; opacity:0; transform:translateY(10px); transition:opacity var(--speed), transform var(--speed);
}
.back-to-top.show{opacity:1; transform:translateY(0)}

/* A11y */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .gradient-text, .folio-thumb{animation:none}
}

/* --- PAGE HERO --- */
.page-hero {
    text-align: center;
    padding: 4rem 1rem;
    background: linear-gradient(90deg, magenta, pink, purple, blue);
    color: white;
}
.page-hero h1 {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
}
.page-hero p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* --- SERVICES GRID --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 3rem 5%;
    background: #0a0a0a;
}
.service-card {
    position: relative;
    background: #141414;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    z-index: 1;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}
.service-card .icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;

  /* animated RGB text gradient */
  background: var(--grad-animated);
  background-size: 300% 300%;
  background-clip: text;              /* standard */
  -webkit-background-clip: text;      /* WebKit */
  color: transparent;                  /* standard */
  -webkit-text-fill-color: transparent;/* WebKit (Safari) */
  animation: gradMove 10s ease infinite;
}
.service-card h3 {
    color: white;
    margin-bottom: 0.5rem;
}
.service-card p {
    color: #ccc;
    font-size: 0.95rem;
}

/* RGB Glow Animation for service cards */
@keyframes rgbGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.service-card::before {
  content: "";
  position: absolute;
  inset: -4px;
  background: rgba(20,20,20,0.9);
  background-size: 800% 800%;
  animation: rgbGlow 8s ease infinite;
  filter: blur(18px);
  opacity: 0.7;
  z-index: -1;
  border-radius: inherit;
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 4rem 10%;
    
}

.portfolio-card {
    background: #111;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(255, 0, 150, 0.4);
}

.portfolio-content {
    padding: 1.5rem;
}

.portfolio-content h3 {
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    color: white;
}

.portfolio-content p {
    font-size: 1rem;
    color: #bbb;
}

.neon-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1; /* behind all content */
  overflow: hidden;
}

.neon-logo {
  position: absolute;
  opacity: 0.7;
  transform-origin: center center;
}

.neon-path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 0;
  animation: dashAnim linear infinite;
}

@keyframes dashAnim {
  0% { stroke-dashoffset: 300; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 300; }
}

.neon-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.7;
  background: radial-gradient(circle, #ff00a8 0%, transparent 70%);
  box-shadow: 0 0 25px #ff00a8, 0 0 50px #7a5cff;
  transform-origin: center center;
}







/* ===== Mobile Fix Patch (append-only) ===== */

/* 0) Safety & resets that won’t fight your existing styles */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; } /* kill side-scroll */
img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
a { word-break: break-word; }

/* Lock scroll when mobile nav is open (JS toggles .nav-open on <body>) */
body.nav-open { overflow: hidden; }

/* 1) Containers & general spacing */
.container {
  width: min(100%, var(--container, 1120px));
  margin-inline: auto;
  padding-inline: 20px;
}

/* 2) Header & mobile nav overlay behavior */
.site-header { position: sticky; top: 0; z-index: 1000; }
@media (max-width: 920px){
  .nav-toggle{ display: inline-grid; }
  .site-nav{
    position: fixed;
    inset: 64px 0 auto 0;              /* sits below sticky header */
    background: rgba(7,7,11,.9);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--stroke);
    z-index: 1100;                      /* ensure it overlays everything */
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 20px;
    transform: translateY(-120%);
    transition: transform var(--speed, .3s) ease;
    max-height: calc(100dvh - 64px);    /* scroll within overlay for small screens */
    overflow-y: auto;
  }
  .site-nav.open{ transform: translateY(0); }
  .site-nav ul{ flex-direction: column; width: 100%; }
  .nav-cta{ width: 100%; }
  .nav-cta .btn{ display: block; width: 100%; }
}



/* 4) Cards / grids collapse rules (keep layout aligned) */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 920px){ .cards-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .cards-3{ grid-template-columns: 1fr; } }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

/* 5) Footer: center on mobile and avoid cramping */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 920px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){
  .footer-grid{ grid-template-columns: 1fr; text-align: center; }
  .foot-bottom{ flex-direction: column; gap: 10px; text-align: center; }
}

/* 6) Section spacing and safe headings */
section { padding-block: clamp(48px, 5vw, 80px); }
h1 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); line-height: 1.1; }
h2 { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); line-height: 1.2; }

/* 7) Utility: prevent “full-width” elements from forcing horizontal scroll */
.full-bleed,
.hero-bg,
.neon-layer,
.canvas-layer {
  max-width: 100vw;
  overflow: hidden;
}

/* 8) Buttons wrap nicely on small screens */
.btn { white-space: normal; }



  /* ===== HERO MOBILE FIX (INDEX) ===== */
@media (max-width: 920px) {
  .hero {
    overflow-x: hidden !important;
    padding-inline: 15px !important;
  }

  /* Force container to full width */
  .hero .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 15px !important;
  }

  /* Stack hero content */
  .hero-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Center text */
  .hero-copy,
  .hero-actions,
  .lead {
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Hero image / card */
  .hero-art {
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .card-hero {
    max-width: 95% !important;
    margin: 0 auto !important;
  }

  /* Background / neon layers */
  .hero-bg,
  .glow-orb,
  .orb-1,
  .orb-2 {
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  /* Orbs sizing */
  .orb-1, .orb-2 {
    width: 30vw !important;
    height: 30vw !important;
  }

  .hero-bg {
    width: 100vw !important;
  }

  /* Stack hero actions and bullets */
  .hero-actions {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .hero-bullets {
    justify-content: center !important;
    padding-inline: 0 !important;
  }
}

/* ===== OPTIMAL HERO MOBILE FIX ===== */
@media (max-width: 920px) {

  /* Hero container */
  .hero {
    overflow-x: hidden !important;
    padding-inline: 15px !important;
  }

  .hero .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;
  }

  /* Stack hero content */
  .hero-inner {
    display: grid !important;
    grid-template-columns: 1fr !important; /* single column */
    gap: 20px !important;
    justify-items: center; /* center content */
  }

  /* Center copy */
  .hero-copy {
    width: 100% !important;
    text-align: center !important;
  }

  /* Hero buttons */
  .hero-actions {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px;
  }

  /* Hero bullets */
  .hero-bullets {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding-inline: 0 !important;
    gap: 10px;
  }

  /* Hero card */
  .hero-art {
    width: 100% !important;
    text-align: center !important;
  }

  .card-hero {
    width: 100% !important;
    max-width: 95% !important;
    padding: 20px !important;
  }

  /* Adjust glow orbs */
  .glow-orb, .orb-1, .orb-2 {
    max-width: 30vw !important;
    max-height: 30vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Hero background */
  .hero-bg {
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}


/* ===== Footer Brand Center Mobile ===== */
@media (max-width: 920px) {
  .site-footer .brand-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
  }

  .site-footer .brand-footer img {
    margin-bottom: 8px; /* space between logo and text */
  }
}



/* ===== Header Navigation Brand Color & Style (Magenta) ===== */
.site-nav a {
  color: var(--magenta) !important;       /* force magenta */
  font-weight: 700;                        /* bold text */
  font-family: 'Orbitron', 'Rajdhani', system-ui, -apple-system, sans-serif; /* futuristic fonts */
  letter-spacing: 0.5px;                   /* slight spacing for techy look */
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus {
  color: var(--magenta) !important;
  text-shadow: 0 0 8px var(--magenta), 0 0 12px #ff4dd2; /* subtle neon glow */
  transform: scale(1.05); /* slight pop on hover */
}
.site-nav a.btn {
  color: #fff !important; /* force white text */
}


/* Dark scrollbar track with magenta thumb */
::-webkit-scrollbar {
  width: 12px; /* width of scrollbar */
}

::-webkit-scrollbar-track {
  background: #0b0b12; /* dark track */
}

::-webkit-scrollbar-thumb {
  background-color: var(--magenta); /* moving part in magenta */
  border-radius: 8px;
  border: 3px solid #0b0b12; /* adds spacing around thumb so track shows */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #ff33ff; /* brighter magenta on hover */
}







/* === Loading Screen === */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 15, 26, 0.9); /* dark transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 1s ease;
}

#loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* SVG animation */
#loading-screen svg polygon {
  stroke: var(--magenta); /* neon stroke */
  stroke-width: 2;
  fill-opacity: 0;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawFill 2s ease forwards;
}

@keyframes drawFill {
  0% {
    stroke-dashoffset: 1000;
    fill-opacity: 0;
  }
  50% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}







/* Neon Contact Popup */
.contact-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(20, 0, 40, 0.7); /* more transparent */
  padding: 40px 60px; /* wider popup */
  border-radius: 18px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  box-shadow: 0 0 15px #ff00a8, 0 0 30px #7a5cff, 0 0 40px #00d4ff;
  border: 2px solid #ff00a8;
  z-index: 10000;
  transition: transform 0.2s ease, opacity 0.2s ease; /* faster transition */
  opacity: 0;
}

.contact-popup.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  animation: neon-glow 1.2s ease infinite alternate;
}

.contact-popup p {
  margin: 0;
  font-size: 1.3rem;
}

/* Remove the close button */
.popup-close {
  display: none;
}



/* ===== Base Hamburger Design ===== */
#nav-toggle svg {
  width: 28px;
  height: 28px;
}

#nav-toggle svg path {
  stroke: #ff00a8; /* magenta */
  stroke-width: 3;
  stroke-linecap: round;
  transition: transform 0.4s ease, stroke 0.3s ease;
  transform-origin: center;
}

/* Hover effect */
#nav-toggle:hover svg path {
  stroke: #00d0ff; /* blue */
}

/* Base path */
#nav-toggle svg path {
  stroke: #ff00a8; /* magenta */
  stroke-width: 3;
  stroke-linecap: round;
  transition: transform 0.4s ease, stroke 0.3s ease;
  transform-origin: center;
}

/* Open state: skew and rotate for cyberpunk effect */
body.nav-open #nav-toggle svg path {
  transform: rotate(20deg) skewX(20deg) scaleX(1.2);
  stroke: #00d0ff; /* blue */
}