:root{
    --bg:#0b0f14;
    --card:#101824;
    --text:#e8eef6;
    --muted:#a9b5c4;
    --line:#1f2a3a;
    --accent:#5bd6ff;
    --accent2:#8b5bff;
    --btn:#1a2738;
    --btn2:#121b28;
    --ok:#59d18f;
    --bad:#ff6b6b;
  }
  
  *{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, "Apple Color Emoji","Segoe UI Emoji";
    background: radial-gradient(1000px 600px at 20% 0%, rgba(91,214,255,.18), transparent 60%),
                radial-gradient(900px 600px at 80% 10%, rgba(139,91,255,.16), transparent 55%),
                var(--bg);
    color:var(--text);
  }
  
  .wrap{max-width:980px;margin:0 auto;padding:24px}
  
  .header{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    position:sticky;top:0;background:rgba(11,15,20,.75);backdrop-filter: blur(10px);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  
  .brand{display:flex;align-items:center;gap:12px}
  .logo{
    width:44px;height:44px;border-radius:12px;
    background: linear-gradient(135deg, rgba(91,214,255,.9), rgba(139,91,255,.9));
    display:grid;place-items:center;
    font-weight:800;color:#061018;
  }
  .name{font-weight:700}
  .tag{color:var(--muted);font-size:.92rem}
  
  .nav{display:flex;gap:14px}
  .nav a{color:var(--muted);text-decoration:none;font-size:.95rem}
  .nav a:hover{color:var(--text)}
  
  .hero{padding:38px 0 18px}
  .hero h1{font-size:2.2rem;line-height:1.12;margin:0 0 10px}
  .hero p{color:var(--muted);max-width:760px;font-size:1.06rem;line-height:1.6}
  .cta{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
  
  .card{
    margin:18px 0;
    padding:22px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
  }
  
  .grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
    margin-top:14px;
  }
  .tile{
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:16px;
    background: rgba(16,24,36,.55);
  }
  .tile h3{margin:0 0 8px}
  .tile p{margin:0 0 10px;color:var(--muted);line-height:1.5}
  .tile ul{margin:0;padding-left:18px;color:var(--muted)}
  .tile li{margin:6px 0}
  
  .steps{margin:12px 0 0;color:var(--muted);line-height:1.7}
  .steps strong{color:var(--text)}
  
  .contact .muted{margin-top:-6px}
  .muted{color:var(--muted)}
  
  label{display:block;margin:12px 0;color:var(--muted);font-size:.95rem}
  input, textarea{
    width:100%;
    margin-top:6px;
    padding:12px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(10,14,20,.6);
    color:var(--text);
    outline:none;
  }
  input:focus, textarea:focus{border-color: rgba(91,214,255,.55)}
  
  .row{display:flex;gap:12px}
  .row > label{flex:1}
  .row.bottom{align-items:center;justify-content:space-between;flex-wrap:wrap}
  
  .button{
    display:inline-flex;align-items:center;justify-content:center;
    padding:11px 16px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background: linear-gradient(135deg, rgba(91,214,255,.22), rgba(139,91,255,.18));
    color:var(--text);
    text-decoration:none;
    cursor:pointer;
    font-weight:600;
  }
  .button:hover{border-color: rgba(255,255,255,.22)}
  .button.secondary{background: rgba(26,39,56,.55)}
  
  .status{min-height:22px;color:var(--muted);font-size:.95rem}
  .status.ok{color:var(--ok)}
  .status.bad{color:var(--bad)}
  
  .footer{
    display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
    margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);
  }
  
  @media (max-width: 860px){
    .grid{grid-template-columns:1fr}
    .row{flex-direction:column}
    .header{position:relative}
  }