:root{
      --purple:#4b197a;
      --yellow:#ffcf00;
      --green:#22c55e;
      --bg-dark:#0f1723;
      --card-bg: rgba(255,255,255,0.04);
      --glass: rgba(255,255,255,0.06);
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: 'Roboto', sans-serif;
      background: radial-gradient(circle at 10% 10%, rgba(107,0,133,0.12), transparent 10%),
                  linear-gradient(180deg, #071021 0%, #0f1723 100%);
      color: #f3f4f6;
      line-height:1.6;
      overflow-x:hidden;
    }

    .wrap{
      max-width:1100px;
      margin:40px auto;
      padding:24px;
    }

    header{
      display:flex;
      gap:16px;
      align-items:center;
      justify-content:space-between;
      margin-bottom:40px;
      transition: all 0.3s ease;
    }
    .brand{
      display:flex;
      gap:14px;
      align-items:center;
    }
    .logo{
      width:56px;
      height:56px;
      border-radius:12px;
      background: linear-gradient(135deg,var(--yellow), #ffb400);
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--purple);
      font-weight:800;
      font-size:2.0rem;
      box-shadow: 0 6px 18px rgba(255,207,0,0.18);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .logo:hover{transform:rotate(10deg) scale(1.1); box-shadow: 0 10px 30px rgba(255,207,0,0.25);}
    .brand h1{margin:0;font-size:1.5rem;color:var(--yellow);letter-spacing:0.6px}
    nav a{color:#cbd5e1;text-decoration:none;margin-left:18px;font-weight:600; transition: color 0.3s}
    nav a:hover{color:var(--yellow)}
    nav a.primary{color:var(--yellow)}

    .hero{
      display:grid;
      grid-template-columns: 1fr 520px;
      gap:28px;
      align-items:start;
    }
    @media (max-width:900px){
      .hero{grid-template-columns:1fr; padding-bottom:10px}
      .hero .visual{order:-1; margin-bottom:24px}
    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:18px;
      padding:32px;
      box-shadow: 0 10px 30px rgba(2,6,23,0.6);
      border: 1px solid rgba(255,255,255,0.03);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card:hover{transform: translateY(-4px); box-shadow: 0 16px 40px rgba(2,6,23,0.7);}

    .headline{
      color: var(--yellow);
      font-size:2.2rem;
      margin:0 0 10px 0;
      text-shadow: 0 6px 20px rgba(0,0,0,0.6);
      animation: fadeIn 1s ease forwards;
      opacity:0;
    }
    .sub{
      color:#d1d5db;
      margin:0 0 20px 0;
      font-size:1.05rem;
      opacity:0;
      animation: fadeIn 1.3s ease forwards;
    }

    @keyframes fadeIn{
      to{opacity:1;}
    }

    .features{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:18px;
    }
    .pill{
      background:var(--glass);
      padding:10px 14px;
      border-radius:12px;
      font-weight:600;
      color:#eef2ff;
      display:inline-flex;
      gap:8px;
      align-items:center;
      border:1px solid rgba(255,255,255,0.03);
      transition: transform 0.3s ease, background 0.3s ease;
    }
    .pill:hover{transform:scale(1.05); background:rgba(255,255,255,0.12);}

    .cta-row{margin-top:22px;display:flex;gap:12px;align-items:center; flex-wrap:wrap}
    .btn{
      background:var(--yellow);
      color:var(--purple);
      border:none;
      padding:12px 22px;border-radius:12px;
      font-weight:700;
      cursor:pointer;
      box-shadow: 0 8px 24px rgba(255,207,0,0.2);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .btn:hover{transform:translateY(-2px); box-shadow: 0 14px 32px rgba(255,207,0,0.28);}

    .visual{
      position:relative;
      height:400px;
      border-radius:20px;
      overflow:hidden;
      animation: float 6s ease-in-out infinite alternate;
    }
    .visual img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transform:scale(1.02);
      filter: contrast(1.05) saturate(1.1) brightness(0.9);
      transition: transform 0.5s ease;
    }
    .visual:hover img{transform:scale(1.08) rotate(1deg);}

    @keyframes float{
      0%{transform: translateY(0);}
      100%{transform: translateY(-12px);}
    }

    .contact-row{
      display:flex;
      gap:16px;
      margin-top:22px;
      align-items:flex-start;
      flex-wrap:wrap;
    }

    .contact-card{
      flex:1 1 320px;
      background: rgba(255,255,255,0.02);
      padding:16px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.03);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .contact-card:hover{transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,255,255,0.1);}

    .contact-card h3{margin:0 0 8px 0;color:var(--yellow);font-size:1rem}

    table{
      width:100%;
      border-collapse:collapse;
      margin-top:10px;
      font-size:0.9rem;
    }
    th, td{
      padding:6px 8px;
      border-bottom:1px solid rgba(255,255,255,0.06);
    }
    th{
      color:var(--green);
      background:rgba(255,255,255,0.06);
    }
    .check-box {
  display: flex;
  gap: 10px;
  margin: 15px 0;
}

.check-box input {
  flex: 1;
  padding: 10px;
  border: 2px solid var(--yellow);
  border-radius: 10px;
  background-color: #0b0b0b;
  color: #fff;
}

.check-box button {
  background: var(--yellow);
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}

.check-box button:hover {
  opacity: 0.8;
}

#result {
  margin-top: 15px;
}

.status-badge {
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 8px;
  color: #000;
}

.status-activated {
  background: #00e676;
}

.status-disabled {
  background: #ff1744;
  color: #fff;
}

.status-late {
  background: #ffd600;
}

.status-expiring {
  background: #ff9100;
}


    footer{margin-top:40px;text-align:center;color:#9ca3af;font-size:0.9rem;padding-bottom:30px}