/* DNS AXE */

:root{
  /* Backgrounds */
  --bg: #14244C;
  --alt: #0e1c33;;
  --bg-header: rgba(22, 50, 95, 0.5);
  --nav-panel: rgba(22, 50, 95, 0.9);
  --card: rgb(22, 50, 95);
  --footer: rgba(22, 50, 95, 0.3);

  /* Text */
  --txt: #EFEFEF;
  --muted: #efefefa0;
  --highlight: #73eded;

  /* Elements */
  --accent: #0CC;
  --radiance: rgba(16,197,212,0.5);

  /* Hero art */
  --hero-axe-size: 360px;
  --hero-axe-pos-x: 80%;
  --hero-axe-pos-y: 50%;
}

/* Base */
* {box-sizing:border-box}
html,body {margin:0;padding:0}
body {font-family:sans-serif;background:var(--bg);color:var(--txt);line-height:1.5}
img {max-width:100%;height:auto}
.mt-8 {margin-top:8px}
.mt-12 {margin-top:12px}
.mt-14 {margin-top:14px}
.container {max-width:1050px;margin:0 auto;padding:0 20px}
.section {padding:76px 0}
.section.alt {background:var(--alt)}
.btn {display:inline-block;border:2px solid var(--accent);padding:10px 10px;border-radius:12px}

/* Header */
.site-header {position:sticky;top:0;background:var(--bg-header);backdrop-filter:saturate(140%) blur(6px); z-index:50}
.nav {display:flex;align-items:center;justify-content:space-between;min-height:80px;gap:12px}
.brand {display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-wordmark {display:block;max-height:50px;width:auto;}
.menu {display:flex;align-items:center}
.menu a {color:var(--txt);text-decoration:none;margin-left:18px;}
.menu a:hover {color: var(--accent);}

.nav-toggle{display:none;position:relative;width:44px;height:44px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(255,255,255,.05);padding:10px;cursor:pointer;transition:background .2s,border-color .2s}
.nav-toggle span{display:block;height:2px;background:var(--txt);margin:6px 0;transition:transform .2s ease,opacity .2s ease}
.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (max-width:780px){
  .nav{position:relative}
  .menu{position:absolute;top:100%;right:0;left:0;flex-direction:column;align-items:flex-start;gap:10px;background:var(--nav-panel);padding:14px 18px;border-radius:0 0 14px 14px;border:1px solid rgba(255,255,255,.1);border-top:none;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease}
  .menu a{margin:0;padding:6px 0;width:100%;font-weight:700}
  .menu a.btn{width:100%;text-align:center;padding:10px}
  .nav-toggle{display:block}
  .menu-open .menu{opacity:1;pointer-events:auto;transform:translateY(0)}
  .menu-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menu-open .nav-toggle span:nth-child(2){opacity:0}
  .menu-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* Hero */
.hero{position:relative;padding:110px 0 70px;overflow:hidden;
  background:
    radial-gradient(1200px 500px at right 40%, rgba(16,197,212,.10), transparent 60%),
    linear-gradient(180deg, rgba(130,216,196,.08), transparent 40%);
}
.hero .container{position:relative;z-index:1} /* keep text above art */
.hero-art{position:absolute;inset:0;pointer-events:none;
  background:
    url("../img/dns-axe-logo-2025.svg")
    var(--hero-axe-pos-x) var(--hero-axe-pos-y) / var(--hero-axe-size) auto no-repeat;
  opacity:.9;filter:drop-shadow(0 0 30px var(--radiance))
}
@media (max-width:1100px){
  :root{
    --hero-axe-size: 340px;
    --hero-axe-pos-x: 74%;
    --hero-axe-pos-y: 52%;
  }
}
@media (max-width:780px){
  :root{
    --hero-axe-size: 260px;
    --hero-axe-pos-x: 78%;
    --hero-axe-pos-y: 56%;
  }
  .hero-art{opacity:0.3}
}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 12px;letter-spacing:.2px}
.subhead{max-width:780px;font-size:18px;margin:0 0 22px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.neon {color:var(--highlight)}
.btn-filled{background:var(--accent);border-color:var(--accent);color:var(--alt);font-weight:700}

/* Social icon via CSS mask (Colors the SVG to LinkedIn blue) */
.icon-li{
  display:inline-block;
  width:20px; height:20px;
  background:#0A66C2;                   /* LinkedIn Blue */
  -webkit-mask: url("/img/SocialLinkedInIcon.svg") no-repeat center / contain;
          mask: url("/img/SocialLinkedInIcon.svg") no-repeat center / contain;
  vertical-align:middle
}
.icon-li:hover{ filter:brightness(1.1) }

/* Contact form*/
#contact form label{display:block;font-weight:600;margin:6px 0 4px}
#contact input,#contact textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--detail);background:rgba(255,255,255,.04);color:var(--txt)}
#contact input:focus,#contact textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Footer*/
.site-footer {padding:24px 0;color:var(--muted);font-size:14px;background:var(--footer);}

/* CLASSIFY */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.grid-2.skew{grid-template-columns:1.1fr .9fr}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:16px}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px}
.card h3{margin-top:4px}
.card.list ul{margin:0;padding-left:18px}
.card.list li{margin:8px 0}

.checks{list-style:none;padding-left:0;margin-top:12px}
.checks li{margin:8px 0;padding-left:26px;position:relative}
.checks li::before{content:"✔";position:absolute;left:0;top:0.1em;color:var(--accent)}

.center{text-align:center}