/* LiminalWAN — Dark operator-first theme (structure unchanged) */
/* No external dependencies. */

:root{
  /* Brand accents */
  --secondary: #60d7ff;      /* Tech Blue */
  --accent: #ffb24a;         /* Orange */
  --accent-hover: #ffa02a;

  /* Surfaces */
  --bg0: #050816;
  --bg1: #0b1328;
  --bg-white: rgba(255,255,255,.04);  /* used by existing markup */
  --bg-light: rgba(255,255,255,.03);

  /* Text */
  --text-main: rgba(255,255,255,.92);
  --text-light: rgba(255,255,255,.72);

  /* Borders / shadows */
  --border: rgba(255,255,255,.12);
  --shadow: 0 18px 55px rgba(0,0,0,.40);

  /* Legacy var kept for inline styles */
  --primary: rgba(255,255,255,.92);
  --primary-light: rgba(255,255,255,.78);

  --radius: 14px;
  --max-width: 1200px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text-main);
  background:
    radial-gradient(1100px 620px at 15% 10%, rgba(96,215,255,.16), transparent 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(255,178,74,.12), transparent 62%),
    radial-gradient(900px 620px at 55% 100%, rgba(167,139,250,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 45%, var(--bg0) 100%);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
p{color: var(--text-light); line-height:1.65}
ul{color: var(--text-light)}
.container{max-width: var(--max-width); margin: 0 auto; padding: 0 20px;}
.section{padding: 4rem 0;}
.text-center{text-align:center}
.text-light{color: var(--text-light)}
.grid{display:grid; gap: 2rem;}
.grid-2{grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));}
.grid-3{grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));}

/* Header / nav */
header{
  position: sticky; top:0; z-index:100;
  border-bottom: 1px solid var(--border);
  background: rgba(5,8,22,.62);
  backdrop-filter: blur(12px);
}
.nav-container{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 0;
  gap: 1rem;
}
.logo{
  display:flex; align-items:center; gap: .6rem;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 1.15rem;
  color: var(--text-main);
}
.logo span{color: var(--secondary)}
.logo svg{color: var(--accent)}
.nav-links{
  display:flex; align-items:center; gap: 1rem;
}
.nav-links a{
  color: var(--text-light);
  font-weight: 700;
  padding: .5rem .7rem;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-links a:hover{
  color: var(--text-main);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.mobile-toggle{
  display:none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text-main);
  border-radius: 12px;
  padding: .55rem .7rem;
  cursor:pointer;
}
@media (max-width: 860px){
  .mobile-toggle{display:inline-block}
  .nav-links{
    display:none;
    position:absolute;
    right: 20px;
    top: 64px;
    flex-direction: column;
    align-items:stretch;
    background: rgba(5,8,22,.86);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: .6rem;
    width: min(320px, calc(100% - 40px));
  }
  .nav-links.active{display:flex}
  .nav-links a{padding:.75rem .8rem}
}

/* Hero */
.hero{
  padding: 5rem 0 4rem;
  background:
    radial-gradient(900px 320px at 12% 0%, rgba(96,215,255,.20), transparent 60%),
    radial-gradient(900px 320px at 88% 20%, rgba(255,178,74,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero h1{
  margin: 0 0 .8rem;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  letter-spacing: -.7px;
}
.hero p{max-width: 70ch; margin: 0 auto 1.6rem; font-size: 1.05rem;}
.hero-btns{display:flex; gap: 1rem; justify-content:center; flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-block;
  padding: 0.85rem 1.2rem;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text-main);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.08)}
.btn-primary{
  background: linear-gradient(135deg, rgba(96,215,255,.20), rgba(255,178,74,.12));
  border-color: rgba(96,215,255,.38);
}
.btn-primary:hover{border-color: rgba(96,215,255,.58)}
.btn-accent{
  background: linear-gradient(135deg, rgba(255,178,74,.22), rgba(96,215,255,.10));
  border-color: rgba(255,178,74,.42);
}
.btn-accent:hover{border-color: rgba(255,178,74,.62)}
.btn-outline{
  background: transparent;
  border: 1px solid rgba(255,255,255,.34);
  color: rgba(255,255,255,.92);
}
.btn-outline:hover{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.50)}

/* Cards */
.card{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 1.6rem;
  box-shadow: 0 14px 45px rgba(0,0,0,.26);
}
.card h3{margin-top: 0; margin-bottom: .5rem; color: rgba(255,255,255,.92)}
.card p{margin: 0.6rem 0 0}
.card-icon{
  width: 46px; height: 46px;
  display:grid; place-items:center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(96,215,255,.16), rgba(255,178,74,.12));
  border: 1px solid rgba(255,255,255,.14);
  margin-bottom: 1rem;
}
.card-icon svg{width: 22px; height: 22px}

.breadcrumb{
  font-size: .9rem;
  color: rgba(255,255,255,.62);
  margin-bottom: 1rem;
}
.breadcrumb a{
  color: rgba(255,255,255,.72);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.22);
}
.breadcrumb a:hover{color: rgba(255,255,255,.92); text-decoration-color: rgba(96,215,255,.44)}

/* Tables */
table{
  width:100%;
  border-collapse: collapse;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow:hidden;
  background: rgba(255,255,255,.03);
}
th, td{
  padding: 1rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align:left;
  vertical-align: top;
  color: rgba(255,255,255,.78);
}
th{
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font-weight: 950;
}
tr:last-child td{border-bottom:none}

/* Forms */
input, textarea, select{
  width: 100%;
  padding: .85rem .9rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,8,22,.55);
  color: rgba(255,255,255,.92);
  outline:none;
}
textarea{min-height: 120px}
label{display:block; font-size: .9rem; color: rgba(255,255,255,.72); margin: 1rem 0 .4rem}
.form-group{margin-bottom: 1.1rem}

/* FAQ details */
details{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: .9rem 1rem;
}
details + details{margin-top: 1rem}
summary{
  cursor:pointer;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  list-style:none;
}
summary::-webkit-details-marker{display:none}
.faq-content{margin-top: .7rem; color: rgba(255,255,255,.74); line-height: 1.6}

/* SVG diagrams (ensure crisp + responsive) */
svg{max-width:100%; height:auto}
.diagram-caption{margin-top: .6rem; font-size: .9rem; color: rgba(255,255,255,.62)}

/* Footer */
footer{
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 3rem 0 2rem;
  background: rgba(0,0,0,.08);
}
.footer-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.footer-col h4{margin: 0 0 .7rem; color: rgba(255,255,255,.92)}
.footer-col ul{margin:0; padding-left: 1.1rem}
.footer-col a{color: rgba(255,255,255,.72)}
.footer-col a:hover{color: rgba(255,255,255,.92); text-decoration: underline; text-decoration-color: rgba(96,215,255,.44)}
.disclaimer{margin-top: 2rem; color: rgba(255,255,255,.62); font-size: .92rem}
.disclaimer p{margin: .35rem 0}

/* Focus */
:focus-visible{outline: 2px solid rgba(96,215,255,.9); outline-offset: 3px}