:root {
      --background:#0f1419;
      --fg:#e2e8f0;--muted:#94a3b8;
      --accent:#dcd9e2;--accent-hover:#a297b9;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;
      --ink:#251c54;--card:#402f5070;--card-hover:#56477445;--ring:#38bdf8;--border:rgb(100 85 135 / 40%);--shadow:rgb(0 0 0 / 24%);
      --gradient-primary:linear-gradient(135deg,#667eea 0%,#764ba2 50%);
      --nav-bg:#ffffff;--nav-fg:#0b1220;--nav-ring:rgba(56,189,248,.55);--menu-shadow:0 14px 40px rgba(0,0,0,.18)
    }
    .fa-solid,.fa-brands,.fa-regular,i[class^="fa-"],i[class*=" fa-"]{
        background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    }
    .nav-trigger i, .nav-menu i {
        font-size: 1.125rem;
    }
    [data-theme=light]{--bg:#fff;--fg:#1e293b;--muted:#7a899f;--accent:#3b82f6;--accent-hover:#2563eb;--ink:#ffffff;--card:#fff;--card-hover:#f8fafc;--ring:#3b82f6;--border:rgba(203,213,225,.6);--shadow:rgba(0,0,0,.1)}
    [data-theme="dark"]{--nav-bg:#0f172a;--nav-fg:#e5e7eb;--menu-shadow:0 14px 40px rgba(0,0,0,.6)}
    *{box-sizing:border-box}
    html,body,h1,h2,h3,h4,h5,h6,p,a,button,small,li{font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif}
    body{margin:0;background:var(--bg);color:var(--fg);line-height:1.6;transition:all .3s cubic-bezier(.4,0,.2,1);font-feature-settings:'cv01','cv02','cv03','cv04'}
    ::selection{background:var(--accent);color:#fff}
    a{color:#171819;text-decoration:none;transition:all .2s ease}
    a:hover{color:var(--accent-hover);text-decoration:underline}

    /* FA gradient */
    .fa-solid,.fa-brands,.fa-regular,i[class^="fa-"],i[class*=" fa-"]{
      background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent
    }
    .cta .fa-solid,.cta .fa-brands{background:none;-webkit-text-fill-color:#fff;color:#fff}

    .container{max-width:1200px;margin:0 auto;padding:0 2rem}
    @media (max-width:768px){.container{padding:0 1rem}}

    /* Main content spacing to avoid sticky header overlap */
    main{padding-top:1rem}

    /* ========= NAVIGATION STYLES ========= */
    .header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(15,20,25,.95);
      backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 2px solid;
      border-image: var(--gradient-primary) 1;
      box-shadow: 0 1px 3px var(--shadow);
    }
    [data-theme=light] .header {
      background: rgba(255,255,255,.95);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.75rem 0;
    }

    .nav__data {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .nav__logo {
      display: flex;
      align-items: center;
    }

    .nav__logo-img {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,.15);
      transition: transform .2s ease;
    }

    .nav__logo-img:hover {
      transform: scale(1.05);
    }

    .nav__toggle {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      cursor: pointer;
    }

    .nav__burger, .nav__close {
      font-size: 1.25rem;
      color: var(--fg);
      transition: color .3s ease;
    }

    .nav__close {
      display: none;
    }

    .nav__menu {
      display: flex;
      align-items: center;
      gap: 2rem;
    }

    .nav__list {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav__link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.55rem 0.9rem;
      border-radius: 0.75rem;
      border: 1px solid rgba(2,6,23,.1);
      background: var(--nav-bg);
      color: var(--nav-fg);
      box-shadow: 0 1px 0 rgba(0,0,0,.02);
      transition: all .2s ease;
      cursor: pointer;
      text-decoration: none;
      font-weight: 500;
    }

    .nav__link:hover {
      box-shadow: 0 6px 20px rgba(0,0,0,.08);
      transform: translateY(-1px);
      text-decoration: none;
    }

    .nav__link--active {
      background: var(--accent);
      color: var(--ink);
    }

    .dropdown__item {
      position: relative;
    }

    .dropdown__menu {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
      min-width: 18rem;
      margin: 0.35rem 0 0;
      padding: 0.4rem;
      border-radius: 0.75rem;
      border: 1px solid rgba(2,6,23,.1);
      background: var(--nav-bg);
      box-shadow: var(--menu-shadow);
      list-style: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all .3s ease;
    }

    .dropdown__item.show-dropdown .dropdown__menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .dropdown__link {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.55rem 0.6rem;
      border-radius: 0.55rem;
      color: var(--nav-fg);
      text-decoration: none;
      transition: all .15s ease;
    }

    .dropdown__link:hover {
      background: rgba(135,116,134,0.2);
      text-decoration: none;
    }

    .dropdown__link--active {
      background: rgba(135,116,134,0.2);
    }

    .dropdown__arrow {
      margin-left: 0.25rem;
      transition: transform .3s ease;
    }

    .dropdown__item.show-dropdown .dropdown__arrow {
      transform: rotate(180deg);
    }

    .nav__buttons {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .change-theme {
      font-size: 1.25rem;
      cursor: pointer;
      transition: all .3s ease;
      padding: 0.5rem;
      border-radius: 50%;
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
      background: var(--card);
    }

    .change-theme:hover {
      background: var(--accent);
      color: var(--ink);
      transform: scale(1.05);
    }

    .btn--cta {
      display: inline-flex;
      gap: 0.5rem;
      align-items: center;
      padding: 0.75rem 1.5rem;
      border-radius: 0.75rem;
      background: var(--gradient-primary);
      color: #fff;
      border: none;
      font-weight: 600;
      font-size: 0.875rem;
      text-decoration: none;
      transition: all .2s ease;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(128,59,246,.3);
    }

    .btn--cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(128,59,246,.4);
      color: #fff;
      text-decoration: none;
    }

    /* Mobile Navigation */
    @media (max-width: 768px) {
      .nav__toggle {
        display: flex;
      }

      .nav__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--card);
        flex-direction: column;
        justify-content: center;
        transition: right .3s ease;
        z-index: 999;
      }

      .nav__menu.show-menu {
        right: 0;
      }

      .nav__list {
        flex-direction: column;
        gap: 2rem;
      }

      .nav__menu.show-menu .nav__close {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
      }

      .nav__menu.show-menu .nav__burger {
        display: none;
      }

      .dropdown__menu {
        position: static;
        box-shadow: none;
        border: none;
        background: transparent;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin-top: 1rem;
      }
    }

    /* Dark theme adjustments */
    [data-theme="dark"] .nav__link {
      border-color: rgba(255,255,255,.1);
      box-shadow: 0 1px 0 rgba(255,255,255,.02);
    }

    [data-theme="dark"] .dropdown__menu {
      border-color: rgba(255,255,255,.1);
      background: #0f172a;
    }

    [data-theme="dark"] .dropdown__link {
      color: #e5e7eb;
    }

    [data-theme="dark"] .dropdown__link:hover {
      background: #87748660;
    }

    /* Animation keyframes */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .animate-fade-in-up {
      animation: fadeInUp 0.6s ease-out;
    }

    /* Override AOS transform that causes overlap */
    .hero {
      transform: none !important;
    }

    /* Footer styling */
    footer {
      margin-top: 2rem;
      padding: 3rem 2rem 2rem;
      background: rgba(172, 60, 224, 0.811);
      border: 3px solid #ffffff !important;
      border-radius: 0rem;
      position: relative;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 
                  0 8px 16px rgba(103, 126, 234, 0.05),
                  inset 0 1px 0 rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(25px) saturate(20%);
      transform: translateY(-5px);
    }
    [data-theme="dark"] footer {
      background: rgba(0, 0, 0, 0.1);
      border: 3px solid #ffffff !important;
    }
    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      background: linear-gradient(135deg, rgba(139, 82, 208, 0.283) 0%, rgba(118, 75, 162, 0.01) 100%);
      border-radius: inherit;
      pointer-events: none;
    }
    footer::after {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(135deg, rgba(109, 60, 168, 0.283) 0%, rgba(118, 75, 162, 0.08) 100%);
      border-radius: inherit;
      z-index: -1;
      opacity: 0.3;
    }
    .foot {
      display: grid;
      gap: 2rem;
      position: relative;
      z-index: 1;
    }
    @media (min-width: 768px) {
      .foot {
        grid-template-columns: 1fr 1fr;
      }
    }
    .footer-title {
      font-size: 1.5rem;
      font-weight: 800;
      margin: 0 0 1rem;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .footer-subtitle {
      font-size: 1.125rem;
      font-weight: 600;
      margin: 1.5rem 0 0.75rem;
      color: var(--fg);
    }
    .footer-text-muted {
      color: var(--muted);
      margin: 0.5rem 0;
      line-height: 1.6;
    }
    .footer-contact {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .footer-socials {
      display: flex;
      gap: 0.75rem;
      margin: 1rem 0;
    }
    .footer-nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .footer-nav li {
      margin: 0.5rem 0;
    }
    .footer-nav a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--fg);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .footer-nav a:hover {
      color: var(--accent);
    }
    .footer-legal {
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--border);
    }
    .footer-toplink {
      margin-top: 1rem;
    }
    .footer-toplink a {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--accent);
      text-decoration: none;
      font-weight: 600;
    }

    header{position:sticky;top:0;z-index:1000;background:rgba(15,20,25,.95);backdrop-filter:blur(20px)saturate(180%);border-bottom:2px solid;border-image:var(--gradient-primary) 1;box-shadow:0 1px 3px var(--shadow)}
    [data-theme=light] header{background:rgba(255,255,255,.95)}
    .hdr{display:flex;align-items:center;padding:0.5rem 0;gap:2rem}

    .logo{display:flex;align-items:center;gap:1rem;flex-shrink:0}
    .logo img{width:48px;height:48px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:transform .2s ease}
    .logo img:hover{transform:scale(1.05)}
    .logo .brand{font-weight:800;font-size:1.25rem;letter-spacing:-.025em;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    .logo small{color:var(--muted);font-size:.875rem;font-weight:500}

    nav{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}
    .site-nav{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

    /* Dropdown triggers (wit) */
    .nav-trigger{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:.75rem;border:1px solid rgba(2,6,23,.1);background:var(--nav-bg);color:var(--nav-fg);box-shadow:0 1px 0 rgba(0,0,0,.02);transition:transform .06s ease, box-shadow .2s ease;cursor:pointer}
    .nav-trigger:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-1px)}
    .nav-trigger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--nav-ring)}
    .nav-trigger:hover>i,.nav-trigger:hover>span{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
    .nav-menu a:hover{background:rgba(135,116,134,0.2)!important}
    .nav-menu a:hover i{color:#fff!important;background:none!important;-webkit-text-fill-color:#fff!important}
    .nav-menu a:hover span{background:var(--gradient-primary)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
    .nav-menu a:focus{background:#87748631}

    .nav-dropdown{position:relative}
    .nav-menu{position:absolute;top:100%;left:0;z-index:1000;min-width:18rem;margin:.35rem 0 0;padding:.4rem;border-radius:.75rem;border:1px solid rgba(2,6,23,.1);background:var(--nav-bg);box-shadow:var(--menu-shadow);list-style:none}
    .nav-menu[hidden]{display:none}
    .nav-menu a{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:.55rem;color:var(--nav-fg);text-decoration:none;transition:all .15s ease}   
    @media (prefers-color-scheme: dark){
      .nav-trigger{border-color:rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.02)}
      .nav-menu{border-color:rgba(255,255,255,.1);background:#0f172a}
      .nav-menu a{color:#e5e7eb}
      .nav-menu a:hover{background:#8774860a;
    }

    /* Theme toggle (fixed) */
    #theme-toggle{position:fixed;top:1rem;right:1rem;z-index:1000;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--fg);font-size:1.25rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all .2s ease}
    #theme-toggle:hover{background:var(--accent);color:var(--ink);transform:scale(1.05)}

    .hero{padding:4rem 0 3rem;text-align:center}
    .hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.2;margin:1rem 0 0.1rem;letter-spacing:-.025em;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    .hero h2{margin-top:0.1rem;margin-bottom:1rem}
    .hero p{color:var(--muted);font-size:1.125rem;max-width:640px;margin:0 auto 1rem;line-height:1.7}
    .badge{display:inline-flex;gap:.5rem;align-items:center;padding:.5rem 1rem;border-radius:50px;background:linear-gradient(135deg,var(--success),#059669);color:#fff;font-size:.875rem;font-weight:600;box-shadow:0 4px 12px rgba(16,185,129,.3);margin-bottom:1rem}

    .brand-figure{text-align:center;margin:1rem auto 2rem}
    .brand-figure img{border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.1);transition:transform .3s ease}
    .brand-figure img:hover{transform:scale(1.05)}

    .grid{display:grid;gap:1.5rem;margin:3rem 0}
    @media(min-width:768px){.grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}

    .card{background:var(--card);border:1px solid rgba(100,85,135,.6);border-radius:1rem;padding:2rem;transition:all .3s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;height:100%;text-align:center}
    .card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary);opacity:0;transition:opacity .3s ease}
    .card:hover{background:var(--card-hover);border-color:#ffffff8c;transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,.05)}
    .card:hover::before{opacity:1}
    .card h2{margin:0 0 1rem;font-size:1.375rem;font-weight:700}
    .card p{color:var(--muted);margin-bottom:1.5rem;line-height:1.6}
    .cta{display:inline-flex;gap:.5rem;align-items:center;padding:.75rem 1.5rem;border-radius:.75rem;background:var(--gradient-primary);color:#fff;border:none;font-weight:600;font-size:.875rem;text-decoration:none;transition:all .2s ease;cursor:pointer;box-shadow:0 4px 12px rgba(128,59,246,.3)}
    .cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(128,59,246,.4);color:#fff;border:1px solid rgba(255,255,255,.64);text-decoration:none}
    .cta.secondary{background:var(--card);color:var(--fg);border:2px solid rgba(56,189,248,.4);box-shadow:0 2px 8px var(--shadow)}
    .cta.secondary:hover{background:var(--card-hover);border-color:rgba(56,189,248,.7);text-decoration:none}
    .cta.secondary .fa-solid,.cta.secondary .fa-brands{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
    .card .cta{align-self:center;margin-top:auto}

    /* Portfolio grid */
    .brands{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;margin-top:1rem}
    .portfolio-brand{background:var(--card);border:1px solid rgba(100,85,135,.6);border-radius:1rem;padding:1.5rem;transition:all .3s ease;backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden}
    .portfolio-brand::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary);opacity:0;transition:opacity .3s ease}
    .portfolio-brand:hover{background:var(--card-hover);border-color:#ffffff8c;transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,.05)}
    .portfolio-brand:hover::before{opacity:1}
    .portfolio-brand h3{font-weight:700;font-size:1.125rem;margin:0 0 .25rem;display:flex;align-items:center;justify-content:center}
    .portfolio-brand h3{color:#000000}
    [data-theme="dark"] .portfolio-brand h3{color:#fff;-webkit-text-fill-color:#fff;background:none}
    .portfolio-brand h4{color:#94a3b8;font-weight:600;font-size:1rem;margin:.5rem 0}
    .portfolio-brand p{color:var(--muted);font-size:1rem;line-height:1.5;margin:0}
    .portfolio-brand svg{width:1.5rem;height:1.5rem;fill:url(#iconGradient);vertical-align:middle;margin-right:.5rem}

    footer{margin-top:4rem;border-top:1px solid var(--border);background:var(--card)}
    .foot{display:grid;gap:2rem;padding:3rem 0}
    @media(min-width:768px){.foot{grid-template-columns:1fr 1fr;align-items:start}}

    /* Accessibility helpers */
    .skip{position:absolute;left:-9999px;background:var(--accent);color:#fff;padding:.5rem 1rem;border-radius:.5rem;font-weight:600;text-decoration:none;z-index:9999}
    .skip:focus{left:1rem;top:1rem}
    .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

    /* Small screens */
    @media (max-width:480px){
      .hero h1{font-size:1.75rem}
      .cta-group{flex-direction:column;align-items:stretch}
      .cta{justify-content:center;width:100%}
      .nav-trigger{font-size:.875rem;padding:.5rem .7rem}
      .card{padding:1.5rem}
    }
    }
/* ========= Footer ========= */
footer.container {
  padding-block: 2rem;
}

.foot {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .foot {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}

/* Typography */
.footer-title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.footer-subtitle {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg, #0f172a);
}

/* Address & contact */
.footer-address {
  margin: 0 0 1rem;
  font-style: normal;
}

.footer-text-muted {
  color: var(--muted, #6b7280);
}

.footer-contact a {
  color: var(--accent, #2563eb);
  text-decoration: none;
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Socials */
.footer-socials {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.footer-socials .icon-btn {
  padding: 0.5rem;
  display: inline-flex;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.footer-socials .icon-btn:hover,
.footer-socials .icon-btn:focus-visible {
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--accent, #2563eb) 12%, transparent);
  border-color: color-mix(in oklab, var(--accent, #2563eb) 35%, transparent);
  outline: none;
}

/* Utility nav (policies) */
.footer-nav {
  margin: 0;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted, #6b7280);
  font-size: 0.875rem;
  text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--fg, #0f172a);
  text-decoration: underline;
  outline: none;
}

/* Divider & legal line */
.footer-legal {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border, #e5e7eb);
}

.footer-legal p {
  margin: 0;
}

.footer-legal .small {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

/* Back to top */
.footer-toplink {
  margin-top: 0.5rem;
}

.footer-toplink a {
  color: var(--accent, #2563eb);
  text-decoration: none;
}

.footer-toplink a:hover,
.footer-toplink a:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .footer-socials .icon-btn {
    transition: none;
  }
}

/* Print nicety */
@media print {
  .footer-socials,
  .footer-toplink { display: none !important; }
}
.icon {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  vertical-align: text-bottom;
}

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
}

/* basis: gradient uit sprite wordt gebruikt via <use> */
.icon use { transition: filter .25s ease, transform .25s ease; }

/* hover/focus: path wordt effectief wit met paarse gloed */
.icon-link:hover .icon use,
.icon-link:focus-visible .icon use {
  filter:
    drop-shadow(0 0 2px #a855f7)
    drop-shadow(0 0 6px #9333ea);
}

/* Optioneel: ook de fill naar wit “simuleren” via CSS filter-trick op de parent */
.icon-link:hover .icon,
.icon-link:focus-visible .icon {
  /* ietsje groter voor ‘lift’ */
  transform: translateY(-1px);
}

/* Toegankelijk: duidelijke focusring voor keyboard */
.icon-link:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: 2px;
}

/* Reduced motion respecteren */
@media (prefers-reduced-motion: reduce) {
  .icon use, .icon { transition: none; }
}