:root{
  --bg:#0f1c1c; --card:#0b1616; --card2:#112828; --text:#d4f2f2; --muted:#9cdfe0;
  --accentA:#00ff88; --accentB:#00c8ff; --accent:#19c48c;
  --ok:#2bd08a; --x:#ff6a6a; --yellow:#ffd166;
  --shadow:0 8px 20px rgba(0,0,0,.25);
  --radius:16px; --line:#00c8ff22;
  --navH:64px; --scrollPad:64px;
}
@media (max-width:720px){ :root{ --navH:56px; --scrollPad:56px; } }

*{box-sizing:border-box}
html{ scroll-behavior:smooth; scroll-padding-top:var(--scrollPad); background:#0f1c1c; }
body{
  margin:0; font-family:'Inter',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text);
  background: var(--bg) url('../img/futuristic_portal_bg.png') bottom center no-repeat fixed;
  background-size:cover; overflow-x:hidden; position:relative; min-height:100vh;
}
body::after{content:""; position:fixed; inset:0; background:rgba(15,28,28,0.72); pointer-events:none; z-index:0}

.container{max-width:1180px; margin:0 auto; padding:0 1rem; position:relative; z-index:1}

/* Nav */
.nav{ position:sticky; top:0; left:0; right:0; z-index:60; background:#050f0f; }
.nav .row{ height:var(--navH); display:flex; align-items:center; gap:.8rem; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#bff; font-weight:800; letter-spacing:.2px }
.brand img{ width:28px; height:28px; }
.nav .menu{ margin-left:auto; display:flex; gap:.4rem; align-items:center; }
.nav .menu a{ color:#cfe; text-decoration:none; padding:.45rem .7rem; border-radius:10px; }
.nav .menu a:hover,.nav .menu a.active{ background:#0d2427 }
.btn{
  display:inline-block; font-weight:700; text-decoration:none; border-radius:10px; padding:.65rem .95rem; transition:.2s; border:1px solid transparent; color:#002;
  background:linear-gradient(135deg, var(--accentA), var(--accentB)); box-shadow:0 6px 16px rgba(0,200,255,.22), 0 0 8px #00ffcc, 0 0 16px rgba(0,255,204,.4);
}
.btn:hover{ transform:translateY(-1px); filter:saturate(1.1) }
.btn.ghost{ background:transparent; color:#dff; border:1px solid #00c8ff66; box-shadow:none }
.btn.ghost:hover{ background:#002933 }

/* Hero */
.hero{ padding:2.2rem 0 1.2rem }
.hero .wrap{ background:rgba(0,0,0,.55); border-radius:20px; padding:1.4rem; text-align:center; box-shadow:var(--shadow) }
.hero img.logo{ width:120px; margin:0 auto .8rem; filter:drop-shadow(0 0 10px rgba(0,255,204,.35)) }
.hero h1{ font-size:2.2rem; margin:.3rem 0 .3rem; text-shadow:0 0 3px rgba(0,240,204,.35) }
.hero p{ color:#bde9f4; font-size:1.06rem; max-width:900px; margin:.1rem auto .8rem }
.badges{ display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin:.4rem 0 .8rem }
.badge{ background:#0f2520; color:#cfe; border:1px solid #174e42; padding:.32rem .56rem; border-radius:999px; font-size:.86rem; display:inline-flex; align-items:center; gap:.36rem }

.section{ background:rgba(0,0,0,.6); border-radius:20px; box-shadow:var(--shadow); padding:1.6rem; margin:1.4rem 0 }
.section h2{ margin:0 0 .7rem; color:#cfe; font-size:1.66rem; text-align:center }
.section p.lead{ text-align:center; color:var(--muted); margin:.2rem auto 1rem; max-width:820px }

.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem }
@media (max-width:960px){ .grid-3,.grid-2{ grid-template-columns:1fr } }
.card{ background:#112828; border:1px solid var(--line); border-radius:14px; padding:1rem }
.card h3{ margin:.1rem 0 .4rem; color:#cfe; font-size:1rem }
.card p{ margin:0; color:#d9ffff; opacity:.9; font-size:.94rem }

.table{ width:100%; border-collapse:collapse; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92rem }
.table th,.table td{ padding:.6rem; border-bottom:1px solid #13393a }
.table th{ text-align:left }
.center{ text-align:center }

.pricing-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem; align-items:stretch }
@media (max-width:1100px){ .pricing-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .pricing-grid{ grid-template-columns:1fr } }
.plan{ background:#112828; border-radius:14px; border:1px solid var(--line); display:flex; flex-direction:column; padding:1rem; position:relative; padding-bottom:86px }
.plan.popular{ outline:2px solid var(--accent); box-shadow:0 0 0 6px rgba(0,255,204,.12) }
.plan h3{ margin:.05rem 0 .08rem; color:#9be8e8 }
.price{ font-size:1.9rem; font-weight:800 }
.per{ font-size:.9rem; color:#9cdfe0 }
.incl{ margin:.1rem 0 .2rem; color:#cfe; font-size:.92rem }
.list{ display:grid; gap:.42rem; flex:1 }
.row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:.6rem; border-radius:10px; padding:.48rem .6rem; border:1px solid }
.good{ background:#0f2b24; border-color:#1b6e58 }
.bad{ background:#2b1414; border-color:#6e1b2b }
.row .k{ font-size:.9rem; color:#cfe }
.row .v{ font-size:.9rem; font-weight:800 }
.check{ color:var(--ok) } .x{ color:var(--x) }
.plan .btn{ position:absolute; left:1rem; right:1rem; bottom:.8rem }

.footer{ color:#a9b; text-align:center; padding:2rem 1rem; font-size:.92rem }

/* Active toggle state */
.btn.active{ filter:saturate(1.2) }


/* Language selector styled like .btn */
.nav select#lang{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:.6rem .9rem; border-radius:999px;
  background:linear-gradient(135deg, var(--accentA), var(--accentB));
  color:#002; font-weight:700; border:1px solid transparent;
  box-shadow:0 6px 18px rgba(0,255,136,.22), 0 6px 18px rgba(0,200,255,.22);
}
.nav select#lang:hover{ filter:saturate(1.1); transform:translateY(-1px) }
.nav select#lang:focus{ outline:none; box-shadow:0 0 0 2px #00c8ff66, 0 6px 18px rgba(0,255,136,.22), 0 6px 18px rgba(0,200,255,.22) }
.nav .menu{ display:flex; align-items:center; gap:.2rem }


/* Nav dropdown ("More") */
.nav .menu{ display:flex; align-items:center; gap:.2rem }
.dropdown{ position:relative; }
.dropdown > .btn.ghost{ user-select:none }
.dropdown-menu{
  position:absolute; top:calc(100% + .4rem); right:0;
  min-width:220px; padding:.5rem;
  background:var(--card); border:1px solid #00c8ff33; border-radius:12px;
  box-shadow:var(--shadow); display:none; z-index:50;
}
.dropdown-menu a{
  display:block; padding:.55rem .7rem; border-radius:8px; text-decoration:none; color:var(--text);
}
.dropdown-menu a:hover{ background:#123; }
.dropdown:hover .dropdown-menu{ display:block; }

/* Queue running progress bar */
.runbox{
  background:rgba(0,0,0,.5); border:1px solid #00c8ff33; border-radius:16px; padding:1rem; margin:.5rem 0 1.2rem;
}
.runbox h3{ margin:.2rem 0 .4rem; }
.progress{
  height:12px; background:#0b1f25; border-radius:999px; overflow:hidden; position:relative;
  box-shadow:inset 0 0 0 1px #00c8ff22;
}
.progress .bar{
  position:absolute; left:-40%; top:0; height:100%; width:40%;
  background:linear-gradient(90deg, var(--accentA), var(--accentB));
  animation:slide 1.2s linear infinite;
}
@keyframes slide{
  0%{ left:-40%; } 100%{ left:100%; }
}
.runmeta{ display:flex; gap:1rem; margin-top:.6rem; font-size:.95rem; color:#cfe; flex-wrap:wrap }
.runmeta .k{ opacity:.8; margin-right:.35rem }


/* Queue lanes (classic single-page style) */
.queue-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem}
.queue{background:#102526; border:1px solid var(--line); border-radius:14px; padding:1rem}
.queue h4{margin:.1rem 0 .32rem; color:#cfe}
.lane{height:12px; background:#0b2021; border:1px solid #0e3b40; border-radius:999px; overflow:hidden}
.bar{height:100%; width:70%; background:linear-gradient(90deg, var(--accentA), var(--accentB)); animation:flow 2.8s infinite linear}
.tag{display:inline-block; margin-top:.42rem; font-size:.86rem; color:#aff; opacity:.85}
.eta{font-size:.9rem; color:#cfe; margin-top:.3rem}
.prio{font-weight:800}
@keyframes flow{from{transform:translateX(-40%)} to{transform:translateX(60%)}}
@media (prefers-reduced-motion: reduce){ .bar{animation:none} }
@media (max-width:1100px){.queue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.queue-grid{grid-template-columns:1fr}}


/* === Top Banner (Navigation) — unified & professional === */
.nav{ position:sticky; top:0; left:0; right:0; z-index:60; background:#050f0f; border-bottom:1px solid #00c8ff22; }
.nav .row{ max-width:1200px; margin:0 auto; height:56px; padding:0 .9rem; display:flex; align-items:center; gap:.8rem }
.brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color:#bff; font-weight:800; letter-spacing:.2px; height:56px }
.brand img{ width:28px; height:28px; object-fit:contain; display:block; filter:drop-shadow(0 0 6px rgba(0,255,204,.25)) }
.brand span{ font-size:1.02rem }
.menu{ display:flex; align-items:center; gap:.6rem; flex:1 }
.menu a{ color:#cfe; opacity:.95; text-decoration:none; padding:.42rem .62rem; border-radius:10px }
.menu a:hover,.menu a.active{ background:#0d2427 }
.dropdown{ position:relative }
.dropdown > .btn.ghost{ user-select:none }
.dropdown-menu{
  position:absolute; top:calc(100% + .4rem); right:0; min-width:240px; padding:.5rem;
  background:#0e2326; border:1px solid #13393a; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.35); display:none; z-index:80
}
.dropdown-menu a{ display:block; padding:.55rem .7rem; border-radius:8px; color:#cfe; text-decoration:none }
.dropdown-menu a:hover{ background:#0a1b1e }
.dropdown:hover .dropdown-menu{ display:block }

.banner-actions{ display:flex; align-items:center; gap:.6rem }
.banner-actions select#lang{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:.48rem .85rem; border-radius:10px;
  background:#0c1f21; color:#cfe; font-weight:600; border:1px solid #1a3c3f;
  background-image:url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%239cdfe0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .55rem center; padding-right:2rem;
}
.banner-actions select#lang:focus{ outline:none; box-shadow:0 0 0 3px #00c8ff40; border-color:#00c8ff66 }
@media (max-width:900px){ .menu{ gap:.4rem } .menu a{ padding:.35rem .5rem } }
@media (max-width:720px){
  .nav .row{ height:52px; padding:0 .7rem }
  .brand span{ font-size:.98rem }
  .banner-actions{ gap:.4rem }
}

.dropdown.open .dropdown-menu{ display:block }


/* Mobile polish for top banner */
@media (max-width:640px){
  .menu{ gap:.3rem }
  .menu a{ padding:.3rem .46rem; font-size:.92rem }
  .brand span{ display:none } /* keep icon-only brand to save space */
  .banner-actions select#lang{ padding:.4rem .7rem; padding-right:1.6rem }
  .banner-actions{ gap:.4rem }
  .btn.ghost{ padding:.42rem .6rem }
}
@media (max-width:480px){
  .menu{ overflow-x:auto; white-space:nowrap; scrollbar-width:none }
  .menu::-webkit-scrollbar{ display:none }
}