/* Viking Net LLC — Clean Minimal Theme */
:root{
  --bg:#0b0f14; --bg-2:#0f1720; --text:#e6eef7; --muted:#a8b7c7; --line:#1e2a3a;
  --brand:#00c2ff; --brand-2:#35e1ff; --accent:#7aa2ff;
  --radius:16px; --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, #071018 0%, rgba(7,16,24,0) 60%),
    radial-gradient(1200px 600px at 80% -20%, #0a1b29 0%, rgba(10,27,41,0) 60%),
    var(--bg);
}
.container{max-width:1100px;margin:0 auto;padding:0 22px}
.section{padding:72px 0}
.section-sm{padding:40px 0}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(11,15,20,.86);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand img{height:44px;width:auto;display:block;border-radius:10px}
.brand span{font-weight:800;letter-spacing:.2px;font-size:18px}
.nav-links{display:flex;gap:18px}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600}
.nav-links a.active,.nav-links a:hover{color:var(--brand)}
.nav-toggle{display:none}

/* Hero */
.hero{
  background:linear-gradient(180deg, var(--bg-2), transparent 60%);
  border-bottom:1px solid var(--line);
  text-align:center; padding:60px 0 36px;
}
.hero-logo{margin:0 auto 18px auto;max-height:96px;width:auto;display:block}
.hero h1{font-size:44px;line-height:1.12;margin:0 0 14px}
.hero p{color:var(--muted);margin:0 0 24px}
.badge{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(0,194,255,.1);
  border:1px solid rgba(0,194,255,.25);color:#cfefff;font-weight:700;font-size:13px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700;border:1px solid rgba(255,255,255,.06)}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#001018}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--text)}
.btn + .btn{margin-left:10px}

/* Cards */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}

/* Feature row */
.feature{display:grid;gap:24px;align-items:center;grid-template-columns:1.2fr .8fr}
.kpi{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.kpi .pill{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:#dbe9f4;font-weight:700;font-size:13px}

/* CTA */
.cta{text-align:center;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg, rgba(0,194,255,.06), rgba(255,255,255,.02));padding:34px;box-shadow:var(--shadow)}

/* Footer */
.footer{border-top:1px solid var(--line);color:var(--muted);padding:26px 0;text-align:center}

/* Forms (simple, single-column) */
.form{max-width:680px;margin:0 auto}
.label{display:block;margin:14px 0 8px;color:#cfe0f3;font-weight:700}
.input,.textarea{width:100%;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--line);outline:none}
.input:focus,.textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,194,255,.18)}

/* Chat (unchanged look; small footprint) */
.chat-button{position:fixed;bottom:18px;right:18px;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#001018;padding:14px 20px;border-radius:999px;font-weight:700;text-decoration:none;box-shadow:0 6px 20px rgba(0,194,255,.45);z-index:9999}
.chat-widget{position:fixed;bottom:80px;right:18px;width:300px;max-height:420px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:none;flex-direction:column;z-index:9998}
.chat-widget.open{display:flex}
.chat-header{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#001018;font-weight:700;padding:10px;border-radius:12px 12px 0 0;display:flex;justify-content:space-between;align-items:center}
.chat-messages{flex:1;padding:10px;overflow-y:auto;font-size:14px;display:flex;flex-direction:column;gap:6px}
.msg{margin-bottom:2px;padding:8px 10px;border-radius:10px;max-width:82%}
.msg.bot{background:rgba(0,194,255,.12);align-self:flex-start}
.msg.user{background:rgba(255,255,255,.08);align-self:flex-end}
.quick-replies{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px 0}
.quick-replies button{border:none;cursor:pointer;padding:6px 10px;border-radius:999px;background:rgba(0,194,255,.16);color:#e6faff;font-weight:700;box-shadow:inset 0 0 0 1px rgba(0,194,255,.35);transition:transform .06s ease, box-shadow .2s ease, background .2s ease}
.quick-replies button:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,194,255,.25)}
.quick-replies button:active{transform:translateY(0)}
.chat-input{display:flex;border-top:1px solid var(--line)}
.chat-input input{flex:1;padding:10px;border:none;background:transparent;color:var(--text)}
.chat-input button{background:var(--brand);border:none;padding:0 14px;cursor:pointer;font-weight:700}

/* Responsive */
@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-toggle{display:inline-flex; align-items:center; gap:8px; color:var(--muted); cursor:pointer}
  .nav-open .nav-links{display:flex; flex-direction:column; gap:12px; padding:12px 0}
}