@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root{
  --bg0:#050615;
  --bg1:#070b22;
  --card: rgba(14, 18, 44, .58);
  --card2: rgba(10, 12, 32, .46);
  --border: rgba(255,255,255,.11);
  --text:#ecf2ff;
  --muted:#b9c7ff;
  --teal:#32f3de;
  --purple:#7b5cff;
  --pink:#ff4fd8;
  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --radius: 22px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1100px 700px at 10% 10%, rgba(50,243,222,.22), transparent 60%),
    radial-gradient(900px 650px at 95% 18%, rgba(255,79,216,.18), transparent 58%),
    radial-gradient(1000px 720px at 55% 95%, rgba(123,92,255,.16), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Links */
a{
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(50,243,222,.22);
}
a:hover{ color: var(--pink); border-bottom-color: rgba(255,79,216,.45); }

/* Keep "button-like" links clean */
.navlink, .btn, .item, .colCard{
  color: var(--text);
  border-bottom: none;
}

/* Typography */
.brand h1, .hTitle, .sectionTitle h3, .colTitle, .articleHeader h2{
  font-family: "Space Grotesk", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: -0.2px;
}

/* Aurora ribbon */
body::before{
  content:"";
  position: fixed;
  inset: -30vmax;
  background: conic-gradient(from 190deg,
    rgba(50,243,222,.10),
    rgba(123,92,255,.16),
    rgba(255,79,216,.12),
    rgba(50,243,222,.10)
  );
  filter: blur(60px);
  animation: spin 16s linear infinite;
  z-index: -2;
}

/* Subtle noise */
body::after{
  content:"";
  position: fixed;
  inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity: .07;
  pointer-events:none;
  z-index: -1;
}

@keyframes spin{
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.wrap{max-width:var(--max); margin:0 auto; padding:28px 18px 50px;}

header{
  position: sticky;
  top: 14px;
  z-index: 10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.brand{display:flex; align-items:center; gap:12px; min-width: 240px;}

.siteLogo{
  height: 38px;
  width: auto;
  display:block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.logoMark{
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(16px 16px at 30% 30%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(135deg, rgba(50,243,222,.95), rgba(255,79,216,.95));
  box-shadow: 0 14px 35px rgba(0,0,0,.35);
}

.brand h1{margin:0; font-size: 18px; letter-spacing: .2px; line-height: 1.1;}
.brand p{margin:3px 0 0; font-size: 12px; color: var(--muted);}

nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.navlink{
  text-decoration:none;
  padding:9px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,32,.45);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  font-size: 13px;
}
.navlink:hover{transform: translateY(-1px); border-color: rgba(50,243,222,.35); background: rgba(10,12,32,.62);}

.hero{margin-top: 18px; display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; align-items: stretch;}

.card{
  border:1px solid rgba(255,255,255,.10);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  padding: 20px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(50,243,222,.25);
  background: rgba(50,243,222,.10);
  color: var(--muted);
  font-size: 13px;
}
.badge .spark{
  width:10px;
  height:10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--teal), var(--pink));
  box-shadow: 0 0 0 5px rgba(255,79,216,.12);
}

.hTitle{
  margin: 12px 0 8px;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.6px;
}

.gradientText{
  background: linear-gradient(90deg, var(--teal), var(--purple), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead{
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.ctaRow{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,12,32,.50);
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,79,216,.35); background: rgba(10,12,32,.68); box-shadow: 0 12px 30px rgba(0,0,0,.35);}
.btn.primary{
  color: #071024;
  border-color: rgba(255,255,255,.20);
  background: linear-gradient(135deg, rgba(50,243,222,.95), rgba(123,92,255,.90), rgba(255,79,216,.90));
}

.embed{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  box-shadow: 0 16px 45px rgba(0,0,0,.38);
  aspect-ratio: 16 / 9;
}
.embed iframe{width:100%; height:100%; border:0; display:block;}

.sectionTitle{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin: 0 0 10px;}
.sectionTitle h3{margin:0; font-size: 18px; letter-spacing: .1px;}
.sectionTitle .hint{margin:0; font-size: 12px; color: var(--muted);}

.grid2{margin-top: 18px; display:grid; grid-template-columns: 1fr 1fr; gap:18px;}

.list{display:grid; gap:10px; margin-top: 10px;}
.item{
  display:flex;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,32,.42);
  text-decoration:none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.item:hover{transform: translateY(-1px); border-color: rgba(50,243,222,.32); background: rgba(10,12,32,.60);}

.icon{
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(50,243,222,.18), rgba(255,79,216,.14));
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.item strong{display:block; font-size: 14px; margin-top: 2px}
.item span{display:block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4}

.columnsEmpty{
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.20);
  background: rgba(10,12,32,.35);
  padding: 14px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 13px;
}

.columnsGrid{display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px;}

.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.pager .pagerInfo{
  color: var(--muted);
  font-size: 12px;
}

.pager .pagerBtns{display:flex; gap:10px; align-items:center;}

.pagerBtn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,12,32,.50);
  color: var(--text);
  border-radius: 14px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 700;
  font-size: 13px;
}
.pagerBtn:hover{border-color: rgba(50,243,222,.32);}
.pagerBtn:disabled{opacity:.45; cursor:not-allowed;}

.colCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,12,32,.46);
  border-radius: 18px;
  padding: 14px;
  text-decoration:none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  min-height: 132px;
}

.colCard:hover{transform: translateY(-2px); border-color: rgba(255,79,216,.30); background: rgba(10,12,32,.64);}

.colMeta{display:flex; gap:10px; flex-wrap: wrap; align-items:center; margin-bottom: 10px;}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 12px;
}

.colTitle{margin: 0 0 8px; font-size: 15px; line-height: 1.3;}
.colExcerpt{margin:0; color: var(--muted); font-size: 13px; line-height: 1.55;}

.articleWrap{max-width: 920px; margin: 0 auto; padding: 26px 18px 60px;}

.articleHeader{margin-top: 18px;}
.articleHeader h2{margin: 0 0 10px; font-size: 34px; line-height: 1.12; letter-spacing: -0.4px;}

.shareRow{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.shareRow .btn{
  padding: 10px 12px;
  font-size: 13px;
}

.articleBody{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,32,.48);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.articleBody h1,.articleBody h2,.articleBody h3{line-height: 1.2;}
.articleBody p{color: var(--text); line-height: 1.75;}
.articleBody a{color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(50,243,222,.25);}
.articleBody a:hover{border-bottom-color: rgba(255,79,216,.45); color: var(--pink);}
.articleBody img{max-width:100%; height:auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.12);}
.articleBody blockquote{
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 3px solid rgba(50,243,222,.55);
  background: rgba(50,243,222,.08);
  border-radius: 14px;
  color: var(--muted);
}

footer{
  margin-top: 22px;
  text-align:center;
  color: var(--muted);
  font-size: 12px;
  padding: 18px 10px;
}

/* Modal */
.modalBack{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 999;
}
.modalBack[aria-hidden="false"]{display:flex;}

.modal{
  width: min(980px, 100%);
  max-height: min(86vh, 900px);
  overflow: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,10,28,.82);
  box-shadow: 0 30px 120px rgba(0,0,0,.65);
  backdrop-filter: blur(14px);
}

.modalTop{
  position: sticky;
  top: 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.modalTitle{margin:0; font-size: 14px; color: var(--muted)}

.modalActions{display:flex; gap:10px; align-items:center;}

.shareBtn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(50,243,222,.25), rgba(255,79,216,.18));
  color: var(--text);
  border-radius: 14px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 800;
  font-size: 13px;
}
.shareBtn:hover{border-color: rgba(50,243,222,.38);}

.xBtn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,12,32,.55);
  color: var(--text);
  border-radius: 14px;
  padding: 8px 10px;
  cursor:pointer;
}
.xBtn:hover{border-color: rgba(255,79,216,.35);}

.modalBody{padding: 14px;}

.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(10,12,32,.88);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  font-size: 13px;
  z-index: 1000;
}

@media (max-width: 980px){
  header{position: static;}
  .hero{grid-template-columns: 1fr;}
}

@media (max-width: 720px){
  .grid2{grid-template-columns: 1fr;}
  .columnsGrid{grid-template-columns: 1fr;}
  .hTitle{font-size: 30px;}
  .brand{min-width: unset;}
}