*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0f172a; --text:#f1f5f9; --muted:#cbd5e1; --muted2:#94a3b8; --muted3:#64748b;
  --w5:rgba(255,255,255,.05); --w10:rgba(255,255,255,.10); --w15:rgba(255,255,255,.15);
  --emerald:#10b981; --emeraldH:#34d399;
  --container:72rem; --hdr-h:64px;
}

body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.sec{max-width:var(--container);margin-inline:auto;padding-inline:16px}
@media(min-width:640px){.sec{padding-inline:24px}}
.pt-header{padding-top:calc(var(--hdr-h) + 16px)}

.h1{font-size:32px;font-weight:800;line-height:1.15}
@media(min-width:640px){.h1{font-size:48px}}
.h2{font-size:28px;font-weight:700}
.h3{font-size:20px;font-weight:600}
.muted{color:var(--muted)}

.tg{
  background:linear-gradient(90deg,#60a5fa,#34d399 55%,#fbbf24);
  -webkit-background-clip:text;background-clip:text;color:transparent
}

/* HEADER */
.hdr{
  position:fixed;top:0;left:0;right:0;height:var(--hdr-h);
  z-index:40;background:rgba(15,23,42,.85);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--w10)
}
.row{display:flex;align-items:center;justify-content:space-between;height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:32px;height:32px}
.nav{display:none;gap:24px;font-size:14px}
@media(min-width:640px){.nav{display:flex}}
.bar{display:flex;gap:10px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:12px;font-weight:700;font-size:15px}
.btn-sm{padding:8px 12px;border-radius:10px;font-size:14px}
.green{background:var(--emerald);color:#0f172a}.green:hover{background:var(--emeraldH)}
.ghost{background:var(--w10)}.ghost:hover{background:var(--w15)}

/* HERO GRID */
.hero{display:grid;gap:28px}
@media(min-width:1024px){.hero{grid-template-columns:1fr 1fr;align-items:center}}

/* ✅ TAGS WITH ICONS */
.tags-wrap{
  width:100%;
  margin-top:16px;
  display:flex;
  justify-content:flex-start;
}

.tags{
  list-style:none;padding:0;margin:0;
  display:grid;gap:10px;width:fit-content;
  grid-template-columns:repeat(2,minmax(0,1fr));justify-content:flex-start;
}
@media(min-width:768px){.tags{grid-template-columns:repeat(4,max-content)}}

.tag{
  background:var(--w5);
  padding:12px 22px;
  border-radius:14px;
  font-size:13px;
  color:var(--muted);
  display:flex;align-items:center;gap:8px;
  white-space:nowrap;min-height:46px;
  border:1px solid rgba(255,255,255,.08);
}
.tag:hover{background:var(--w15)}
.tag svg{opacity:.8}

/* FEATURES GRID */
.grid4{display:grid;gap:16px}
@media(min-width:640px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--w5);padding:20px;border-radius:16px}
.card:hover{background:var(--w15)}

/* GRADIENT BORDER BOX */
.rim{border-radius:18px;background:linear-gradient(135deg,#10b98133,#0ea5e933,#facc1533);padding:1px}
.pane{border-radius:14px;background:rgba(15,23,42,.7);padding:22px}
.split{display:flex;flex-direction:column;gap:12px}
@media(min-width:640px){.split{flex-direction:row;justify-content:space-between;align-items:center}}

/* CTA */
.cta{border-radius:14px;background:rgba(15,23,42,.7);padding:32px;text-align:center}

/* FOOTER */
.ft{border-top:1px solid var(--w10);margin-top:60px}
.foot{display:flex;flex-direction:column;gap:16px}
@media(min-width:640px){.foot{flex-direction:row;justify-content:space-between;align-items:center}}