*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
  --sky:#0ea5e9;
  --sky-light:#38bdf8;
  --sky-dark:#0284c7;
  --sky-bg:#f0f9ff;
  --sky-bg2:#e0f2fe;
  --white:#ffffff;
  --surface:#f8fafc;
  --border:#e2e8f0;
  --border-sky:#bae6fd;
  --text:#0f172a;
  --text-2:#475569;
  --text-3:#94a3b8;
  --radius:14px;
  --radius-sm:9px;
  --font:'DM Sans',sans-serif;
}
body{
  font-family: var(--font);
  background: linear-gradient(
    50deg,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(255,255,255,0.95) 60%
  );
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;

  background-image: url('../img/Logononbg.png');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body::before{
  content:'';
  position:fixed;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(240,249,255,0.88) 0%,rgba(255,255,255,0.95) 60%);
  pointer-events:none;
}
a{text-decoration:none;color:inherit}

/* ── NAVBAR ── */
.navbar{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 32px;height:64px;
  background:#6ed1ff;
  border-bottom:1px solid var(--border-sky);
}
.nav-brand{display:flex;align-items:center;gap:12px}
.navbar-logo{
  width:38px;height:38px;border-radius:9px;
  background:rgba(255,255,255,0.9);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.navbar-logo img{width:100%;height:100%;object-fit:contain;padding:3px}
.brand-name{font-size:17px;font-weight:700;color:#fff;letter-spacing:-0.2px}
.brand-sub{font-size:11px;color:rgba(255,255,255,0.8)}

.back-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.9);
  border:1px solid rgba(255,255,255,0.6);
  font-size:13px;font-weight:600;color:var(--sky-dark);
  transition:all 0.15s ease;
}
.back-btn:hover{background:#fff;color:var(--sky)}
.back-btn i{font-size:12px}

/* ── WRAP ── */
.wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:56px 24px 80px}

/* ── HERO ── */
/* ───────── HERO ───────── */

.hero{
    max-width:900px;
    margin:0 auto 80px;
    padding:20px;
    text-align:center;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 18px;
    margin-bottom:24px;

    border-radius:999px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(0,162,255,0.18);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.hero-badge img{
    width:18px;
    height:18px;
    object-fit:contain;
    display:block;
}

.hero-badge span{
    font-size:12px;
    font-weight:700;
    letter-spacing:.7px;
    text-transform:uppercase;
    color:var(--text);
}

.hero h1{
    font-size:clamp(42px,6vw,72px);
    line-height:1.05;
    font-weight:800;
    letter-spacing:-2px;
    color:var(--text);
    margin-bottom:24px;
}

.hero h1 span{
    background:linear-gradient(
        90deg,
        #00bfff,
        #6dd5ff,
        #ffffff
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.hero p{
    max-width:720px;
    margin:0 auto;

    font-size:17px;
    line-height:1.9;

    color:var(--text-2);
}

/* ── TYPE TABS ── */
.tabs-wrap{
  display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;margin-bottom:52px;
}
.tab-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 20px;border-radius:var(--radius-sm);
  background:var(--white);border:1.5px solid var(--border);
  font-size:13px;font-weight:600;color:var(--text-2);
  cursor:pointer;transition:all 0.16s ease;user-select:none;
  font-family:var(--font);
}
.tab-btn i{font-size:13px;color:var(--text-3);transition:color 0.16s}
.tab-btn:hover{border-color:var(--border-sky);color:var(--sky);background:var(--sky-bg)}
.tab-btn:hover i{color:var(--sky)}
.tab-btn.active{
  background:var(--sky);border-color:var(--sky);
  color:#fff;
}
.tab-btn.active i{color:rgba(255,255,255,0.85)}

/* ── PANEL ── */
.type-panel{display:none}
.type-panel.active{display:block;animation:fadeUp 0.22s ease}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.panel-head{text-align:center;margin-bottom:36px}
.panel-head h2{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px}
.panel-head p{font-size:13px;color:var(--text-3)}

/* ── CARDS GRID ── */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:22px;
}

/* ── CARD ── */
.card{
  background:rgb(0, 0, 0);
  border:1px solid rgb(8, 172, 248);
  border-radius:var(--radius);
  padding:28px 24px 24px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:transform 0.18s ease,border-color 0.18s ease;
}
.card::after{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#38bdf8,transparent);
  opacity:0;transition:opacity 0.18s;
}
.card:hover{transform:translateY(-4px);border-color:rgba(56,189,248,0.4)}
.card:hover::after{opacity:1}

/* Card accent top bar */
.card-accent{
  width:36px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,#0ea5e9,#38bdf8);
  margin-bottom:18px;
}

.card .header{display:flex;flex-direction:column;margin-bottom:6px}

.card .title{
  font-size:1rem;font-weight:700;color:#fff;
  letter-spacing:-0.1px;margin-bottom:2px;
}

.card .price{
  font-size:2.8rem;line-height:1.05;font-weight:700;color:#fff;
  margin:6px 0 2px;letter-spacing:-1px;
}
.card .price-sub{font-size:11px;color:rgba(148,163,184,1);margin-bottom:6px}

.card .desc{
  font-size:13px;line-height:1.6;
  color:rgba(156,163,175,1);
  margin:10px 0 16px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}

.card .lists{
  list-style:none;margin-bottom:24px;flex:1;
  display:flex;flex-direction:column;gap:9px;
}
.card .list{
  display:flex;align-items:center;gap:9px;
  font-size:13px;color:rgba(203,213,225,1);
}
.card .list svg{
  width:16px;height:16px;flex-shrink:0;
  color:#38bdf8;
}

.card .action{
  display:block;width:100%;border:none;outline:none;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,#0ea5e9,#38bdf8);
  padding:13px 20px;
  text-align:center;font-weight:700;font-size:13px;
  letter-spacing:0.03em;color:#fff;cursor:pointer;
  text-decoration:none;font-family:var(--font);
  transition:opacity 0.15s,transform 0.1s;
}
.card .action:hover{opacity:0.9}
.card .action:active{transform:scale(0.98)}

/* ── EMPTY ── */
.empty-state{
  text-align:center;padding:80px 20px;
  color:var(--text-3);
}
.empty-state i{font-size:32px;margin-bottom:12px;display:block;color:var(--border-sky)}
.empty-state p{font-size:14px}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .navbar{padding:0 16px}
  .brand-sub{display:none}
  .wrap{padding:32px 16px 60px}
  .hero{margin-bottom:36px}
  .hero h1{font-size:28px}
  .hero p{font-size:14px}
  .tabs-wrap{gap:6px;margin-bottom:36px}
  .tab-btn{padding:9px 14px;font-size:12px;gap:7px}
  .tab-btn span.tab-label{display:none}
  .tab-btn i{font-size:15px}
  .cards-grid{grid-template-columns:1fr;gap:16px}
  .card{padding:22px 18px 20px}
  .card .price{font-size:2.2rem}
}
@media(max-width:360px){
  .back-btn span{display:none}
  .back-btn{padding:8px 12px}
}