:root{
    --bg:#050b14;
    --bg2:#07162a;
    --bg3:#0a1b33;
  
    --soft:#081528;
    --primary:#1fb6ff;
    --accent:#00e0ff;
    --text:#e6f1ff;
    --muted:#8aa4c2;
    --glass:rgba(255,255,255,.06);
    --stroke:rgba(255,255,255,.10);
  
    /* hero title gradient (dark theme) */
    --heroFrom:#ffffff;
    --heroTo: var(--accent);
  
    --shadow: 0 25px 60px rgba(0,0,0,.55);
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  
  /* Light theme */
  [data-theme="light"]{
    --bg:#f6f8ff;
    --bg2:#eef3ff;
    --bg3:#ffffff;
  
    --soft:#eaf1ff;
    --text:#081120;
    --muted:#3f556f;
    --glass:rgba(0,0,0,.04);
    --stroke:rgba(0,0,0,.10);
  
    /* FIX: hero title visible on light */
    --heroFrom:#061225;
    --heroTo:#0d6efd;
  
    --shadow: 0 18px 45px rgba(16,36,64,.15);
  }
  
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    color:var(--text);
    overflow-x:hidden;
    /* FIX seams: single continuous background for whole page */
    background:
      radial-gradient(900px 600px at 50% 0%, rgba(31,182,255,.14), transparent 60%),
      radial-gradient(900px 600px at 85% 30%, rgba(0,224,255,.10), transparent 55%),
      radial-gradient(1200px 900px at 10% 65%, rgba(13,110,253,.10), transparent 60%),
      linear-gradient(180deg, var(--bg3), var(--bg));
  }
  
  a{text-decoration:none;color:inherit}
  .container{max-width:1200px;margin:auto;padding:0 24px}
  .muted{color:var(--muted)}
  .tiny{font-size:12px;color:var(--muted)}
  
  /* Header */
  .header{
    position:fixed;top:0;left:0;right:0;
    z-index:1000;
    backdrop-filter: blur(16px);
    background: linear-gradient(180deg, rgba(5,11,20,.82), rgba(5,11,20,.55));
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  [data-theme="light"] .header{
    background: linear-gradient(180deg, rgba(246,248,255,.86), rgba(246,248,255,.62));
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  
  .nav{display:flex;justify-content:space-between;align-items:center;padding:14px 0;gap:16px}
  .brand{display:flex;align-items:center;gap:12px}
  .brand-logo{height:40px;width:auto;display:block}
  .brand-name{font-family:Orbitron;font-weight:900;letter-spacing:1px;font-size:18px}
  
  .nav-links{display:flex;align-items:center;gap:22px}
  .nav-links a{opacity:.86;font-weight:600}
  .nav-links a:hover{opacity:1;color:var(--accent)}
  .nav-btn{
    padding:10px 14px;border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background: linear-gradient(135deg, rgba(31,182,255,.18), rgba(13,110,253,.12));
  }
  [data-theme="light"] .nav-btn{border:1px solid rgba(0,0,0,.10)}
  
  .nav-actions{display:flex;align-items:center;gap:10px}
  
  /* Theme button with tooltip */
  .icon-btn{
    width:44px;height:44px;border-radius:999px;
    border:1px solid var(--stroke);
    background: rgba(255,255,255,.04);
    display:grid;place-items:center;
    cursor:pointer;
    position:relative;
    transition: transform .2s var(--ease), background .2s var(--ease);
  }
  .icon-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07)}
  .icon-btn:active{transform: translateY(0) scale(.98)}
  .icon-btn .icon{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.9);transition:opacity .2s var(--ease),transform .2s var(--ease)}
  .icon-btn .icon svg{width:20px;height:20px}
  .icon-btn[data-state="dark"] .icon[data-icon="moon"]{opacity:1;transform:scale(1)}
  .icon-btn[data-state="light"] .icon[data-icon="sun"]{opacity:1;transform:scale(1)}
  
  .icon-btn[data-tooltip]::after{
    content: attr(data-tooltip);
    position:absolute;
    bottom:-42px;left:50%;transform:translateX(-50%) translateY(6px);
    padding:8px 10px;border-radius:12px;
    background: rgba(0,0,0,.75);
    color:#fff;
    font-size:12px;font-weight:700;
    border:1px solid rgba(255,255,255,.10);
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
  }
  [data-theme="light"] .icon-btn[data-tooltip]::after{background: rgba(10,18,40,.85)}
  .icon-btn:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
  
  /* Language */
  .lang{position:relative}
  .lang-btn{
    height:44px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid var(--stroke);
    background: rgba(255,255,255,.04);
    color:var(--text);
    font-weight:800;
    cursor:pointer;
    display:flex;align-items:center;gap:8px;
  }
  .chev{opacity:.8}
  .lang-menu{
    position:absolute;right:0;top:52px;
    min-width:160px;
    padding:8px;
    border-radius:16px;
    background: linear-gradient(180deg, rgba(20,35,60,.92), rgba(10,20,40,.92));
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
    display:none;
  }
  [data-theme="light"] .lang-menu{background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,248,255,.96));border:1px solid rgba(0,0,0,.08)}
  .lang.is-open .lang-menu{display:block}
  .lang-item{width:100%;padding:10px 12px;border-radius:12px;border:none;background:transparent;color:inherit;cursor:pointer;text-align:left;font-weight:700}
  .lang-item:hover{background: rgba(255,255,255,.06)}
  [data-theme="light"] .lang-item:hover{background: rgba(0,0,0,.05)}
  
  /* Burger + mobile */
  .burger{width:44px;height:44px;border-radius:999px;border:1px solid var(--stroke);background: rgba(255,255,255,.04);cursor:pointer;display:none;flex-direction:column;justify-content:center;gap:6px;padding:12px}
  .burger span{height:2px;width:100%;border-radius:2px;background: rgba(255,255,255,.85)}
  [data-theme="light"] .burger span{background: rgba(0,0,0,.65)}
  .mobile{display:none;padding: 10px 24px 18px}
  .mobile-panel{padding:14px}
  .mobile-link{display:block;padding:12px 12px;border-radius:14px;font-weight:800;opacity:.92}
  .mobile-link:hover{background: rgba(255,255,255,.06);opacity:1}
  
  /* Hero */
  .hero{position:relative;min-height:100vh;display:grid;place-items:center;padding: 110px 20px 70px}
  .hero-bg{
    position:absolute;inset:0;z-index:-1;
    /* add optional image + keep gradients */
    background:
      linear-gradient(180deg, rgba(5,11,20,.55), rgba(5,11,20,.70)),
      radial-gradient(circle at 50% 35%, rgba(31,182,255,.20), transparent 60%),
      radial-gradient(circle at 80% 40%, rgba(0,224,255,.12), transparent 55%),
      url("../img/hero-bg.png");
    background-size: cover;
    background-position: center;
  }
  [data-theme="light"] .hero-bg{
    background:
      linear-gradient(180deg, rgba(246,248,255,.65), rgba(246,248,255,.85)),
      radial-gradient(circle at 50% 35%, rgba(31,182,255,.12), transparent 60%),
      radial-gradient(circle at 80% 40%, rgba(13,110,253,.10), transparent 55%),
      url("../img/hero-bg.png");
    background-size: cover;
    background-position: center;
  }
  .hero-content{max-width:1050px;text-align:center}
  .hero h1{
    font-family:Orbitron;
    font-size:clamp(44px,6vw,78px);
    font-weight:900;
    background: linear-gradient(90deg, var(--heroFrom), var(--heroTo));
    -webkit-background-clip:text;
    background-clip:text;
    color: transparent;
    margin: 18px 0 18px;
  }
  .hero p{max-width:820px;margin:0 auto;color:var(--muted);font-size:18px}
  .hero-actions{margin-top:26px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
  
  /* Sections - FIX seams by removing section backgrounds and using soft overlays */
  .section{padding: 92px 0;position:relative}
  .section-inner{max-width:1200px;margin:auto;padding:0 24px;position:relative}
  .section::before{
    content:"";
    position:absolute;inset:0;
    background:
      radial-gradient(700px 450px at 20% 0%, rgba(31,182,255,.10), transparent 55%),
      radial-gradient(700px 450px at 80% 100%, rgba(0,224,255,.08), transparent 55%);
    pointer-events:none;
    opacity:.95;
  }
  .section-alt::before{
    background:
      radial-gradient(800px 520px at 15% 30%, rgba(13,110,253,.10), transparent 58%),
      radial-gradient(700px 450px at 85% 70%, rgba(31,182,255,.10), transparent 60%);
  }
  .section-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:28px}
  .section-desc{color:var(--muted);max-width:780px;margin-top:10px}
  
  h2{font-family:Orbitron;font-size:34px;margin-bottom:6px}
  h2::after{content:"";display:block;width:60px;height:3px;margin-top:10px;background:linear-gradient(90deg,var(--primary),transparent)}
  
  .pill{display:inline-flex;gap:10px;align-items:center;padding:10px 14px;border-radius:999px;border:1px solid var(--stroke);background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));font-weight:800;font-size:13px}
  
  .chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
  .chip{padding:10px 12px;border-radius:999px;border:1px solid var(--stroke);background: rgba(255,255,255,.04);color:var(--muted);font-weight:800;font-size:13px}
  
  .feature-main{max-width:820px;font-size:18px;margin: 18px auto 34px;color: rgba(255,255,255,.88)}
  [data-theme="light"] .feature-main{color: rgba(8,17,32,.85)}
  
  /* Grid + cards */
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;align-items:stretch}
  .grid-hero{margin-top:30px}
  .card{
    background: linear-gradient(180deg, var(--glass), rgba(255,255,255,.02));
    border-radius:22px;
    padding:22px;
    border:1px solid var(--stroke);
    backdrop-filter: blur(12px);
    transform-style: preserve-3d;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  .card:hover{box-shadow: var(--shadow);border-color: rgba(31,182,255,.22)}
  .card-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background: linear-gradient(135deg, rgba(31,182,255,.20), rgba(13,110,253,.10));border:1px solid rgba(255,255,255,.08);margin-bottom:12px}
  .card h3{font-family:Orbitron;font-weight:800;font-size:18px;margin-bottom:6px}
  .card p{color:var(--muted);font-size:14.5px}
  .card.highlight{background: linear-gradient(180deg, rgba(31,182,255,.18), rgba(255,255,255,.02));border-color: rgba(31,182,255,.35)}
  
  /* Buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.12);cursor:pointer;font-weight:900;transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);user-select:none}
  .btn:hover{transform: translateY(-2px)}
  .btn:active{transform: translateY(0) scale(.99)}
  .btn{background: linear-gradient(135deg, var(--primary), #0d6efd);box-shadow: 0 0 55px rgba(31,182,255,.35);border-color: rgba(31,182,255,.22)}
  .btn:hover{box-shadow: 0 0 85px rgba(31,182,255,.55)}
  .btn-ghost{background: rgba(255,255,255,.04);box-shadow:none;border-color: rgba(255,255,255,.12)}
  .btn-ghost:hover{border-color: rgba(255,255,255,.20);box-shadow:none}
  .btn-sm{padding:9px 12px;border-radius:14px}
  .btn-block{width:100%}
  [data-theme="light"] .btn-ghost{border-color: rgba(0,0,0,.10)}
  
  /* Stats */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;text-align:center;margin-top: 18px}
  .stat{padding:18px;border-radius:22px;border:1px solid var(--stroke);background: rgba(255,255,255,.03)}
  .stat-num{display:block;font-family:Orbitron;font-weight:900;font-size:34px}
  .stat small{color:var(--muted);font-weight:800}
  
  /* Forms */
  .page{padding-top: 92px}
  .form{max-width:600px;margin: 24px auto 0;display:grid;gap:14px}
  input,textarea,select{padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background: rgba(11,22,38,.85);color:var(--text);outline:none}
  input:focus,textarea:focus,select:focus{border-color: rgba(31,182,255,.55)}
  [data-theme="light"] input,[data-theme="light"] textarea,[data-theme="light"] select{background: rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.10);color:var(--text)}
  .form-row{display:flex;gap:12px;flex-wrap:wrap}
  
  /* Toast */
  .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);padding:12px 14px;border-radius:16px;border:1px solid var(--stroke);background: rgba(0,0,0,.70);color:#fff;font-weight:800;opacity:0;pointer-events:none;transition:opacity .25s var(--ease), transform .25s var(--ease);z-index:2000}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}
  [data-theme="light"] .toast{background: rgba(10,18,40,.85)}
  
  /* Footer */
  .footer{text-align:center;padding:44px 24px;color:var(--muted);border-top:1px solid rgba(255,255,255,.06)}
  
  /* Admin tabs */
  .tabs{display:flex;gap:10px;flex-wrap:wrap;margin: 8px 0 16px}
  .tab{padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background: rgba(255,255,255,.04);cursor:pointer;font-weight:900}
  .tab.is-active{border-color: rgba(31,182,255,.25);background: linear-gradient(135deg, rgba(31,182,255,.20), rgba(13,110,253,.12));box-shadow: 0 0 40px rgba(31,182,255,.18)}
  .tabpanels{display:block}
  .tabpanel{display:none}
  .tabpanel.is-active{display:block}
  
  /* Admin table */
  .admin-grid{grid-template-columns: 1.15fr .85fr}
  @media (max-width: 980px){.admin-grid{grid-template-columns: 1fr}}
  .admin-search{margin: 10px 0 12px}
  .tablewrap{overflow:auto;border-radius:18px;border:1px solid rgba(255,255,255,.08)}
  .table{width:100%;border-collapse:collapse;min-width:520px}
  .table th,.table td{padding:12px 12px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
  .table th{color:var(--muted);font-weight:900;font-size:12px;letter-spacing:.3px}
  .table tr:hover td{background: rgba(255,255,255,.03);cursor:pointer}
  
  .profile-top{display:flex;gap:12px;align-items:center;margin-top:10px}
  .avatar{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-family:Orbitron;font-weight:900;background: linear-gradient(135deg, rgba(31,182,255,.22), rgba(13,110,253,.12));border:1px solid rgba(255,255,255,.10)}
  .profile-name{font-family:Orbitron;font-weight:900;font-size:18px}
  .mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
  .mini{padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background: rgba(255,255,255,.03)}
  .mini-k{color:var(--muted);font-weight:900;font-size:12px}
  .mini-v{font-family:Orbitron;font-weight:900;font-size:18px;margin-top:6px}
  
  .cases{list-style:none;display:grid;gap:10px;margin-top:10px}
  .case{padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background: rgba(255,255,255,.03)}
  .case-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
  .badge{padding:6px 10px;border-radius:999px;border:1px solid rgba(31,182,255,.22);background: rgba(31,182,255,.12);font-weight:900;font-size:12px}
  .case-meta{color:var(--muted);font-size:13px;margin-top:6px}
  
  .apps{display:grid;gap:10px;margin-top:10px}
  .app{padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background: rgba(255,255,255,.03)}
  .app-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
  .app-name{font-family:Orbitron;font-weight:900}
  .app-meta{color:var(--muted);font-size:13px;margin-top:6px}
  .panel-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
  .panel-actions{margin-top:10px}
  .chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
  
  /* Responsive */
  @media (max-width: 980px){
    .nav-links{display:none}
    .burger{display:flex}
    .mobile{display:block}
    .section-head{flex-direction:column;align-items:flex-start}
    .chips{justify-content:flex-start}
  }