.page-home {
  --home-cyan:#27cbff;
  --home-blue:#248dff;
  --home-violet:#8454ff;
  --home-panel:rgba(7,31,70,.92);
  --home-line:rgba(52,154,226,.64);
  overflow-x:hidden;
  background:#020a1d url('../images/homepage-neon-city-v1.png') center top / cover fixed no-repeat;
}
.page-home::before { display:none; }
.page-home main { min-height:0; background:linear-gradient(180deg,rgba(1,8,24,.04),rgba(1,8,24,.1) 42%,rgba(1,8,24,.42) 67%,rgba(1,7,20,.7)); }

/* Header: slim transparent bar and rounded controls from the approved mockup. */
.page-home .site-header {
  width:100%;
  max-width:none;
  height:70px;
  margin:0;
  padding:0 max(72px,calc((100vw - 1248px)/2));
  gap:25px;
  border:0;
  border-bottom:1px solid rgba(55,143,214,.24);
  background:linear-gradient(180deg,rgba(2,10,28,.24),rgba(2,10,28,.08));
  box-shadow:none;
  backdrop-filter:blur(16px);
}
.page-home .brand-logo { display:block; width:190px; height:44px; object-fit:contain; mix-blend-mode:screen; }
.page-home .main-nav { align-self:stretch; align-items:center; gap:3px; }
.page-home .main-nav a,.page-home .icon-link {
  height:auto;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:18px;
  color:#d3e0ef;
  font-size:13px;
  font-weight:600;
}
.page-home .main-nav a::after { display:none; }
.page-home .main-nav a:hover,.page-home .main-nav a.active,.page-home .icon-link:hover {
  color:#fff;
  border-color:rgba(65,160,239,.48);
  background:linear-gradient(135deg,rgba(20,84,161,.62),rgba(32,63,134,.52));
  box-shadow:inset 0 0 15px rgba(68,173,255,.12);
}
.page-home .header-actions { gap:10px; }
.page-home .coin-balance,.page-home .language-button {
  min-height:38px;
  padding:6px 10px;
  border-color:rgba(64,135,199,.34);
  border-radius:18px;
  background:rgba(3,18,43,.55);
}
.page-home .header-diamond { width:28px; height:28px; overflow:visible; filter:drop-shadow(0 0 8px rgba(49,197,255,.52)); }
.page-home .header-login,.page-home .header-register {
  min-height:38px;
  padding:8px 17px;
  border-radius:17px;
  font-size:13px;
}
.page-home .header-login { min-width:76px; border-color:rgba(83,169,235,.72); background:rgba(3,19,45,.5); }
.page-home .header-register { min-width:116px; border-color:transparent; background:linear-gradient(105deg,#24c7ff,#2d82ff 55%,#824cff); }
.page-home .header-actions .button-danger {
  min-width:110px;
  min-height:38px;
  padding:8px 18px;
  border-color:rgba(77,177,255,.72);
  border-radius:18px;
  color:#fff;
  background:linear-gradient(105deg,#24c7ff,#2d82ff 55%,#824cff);
  box-shadow:none;
}

.neon-home { min-height:0; padding-bottom:28px; }
.neon-hero {
  display:flex;
  align-items:flex-start;
  width:min(1248px,calc(100% - 56px));
  min-height:375px;
  margin:0 auto;
  padding:29px 0 25px;
}
.neon-hero-copy { width:min(690px,57%); }
.neon-hero h1 {
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(44px,3.65vw,56px);
  font-weight:900;
  line-height:.98;
  letter-spacing:-.035em;
  text-shadow:0 5px 30px rgba(0,5,20,.72);
}
.neon-hero h1 span {
  color:transparent;
  background:linear-gradient(90deg,#21d3ff 0%,#398fff 48%,#9652ff 100%);
  background-clip:text;
  -webkit-background-clip:text;
  filter:drop-shadow(0 0 16px rgba(49,169,255,.2));
}
.neon-benefits { display:grid; gap:8px; margin:0 0 20px; padding:0; list-style:none; }
.neon-benefits li { color:#c8d9ed; font-size:16px; line-height:1.35; text-shadow:0 2px 12px #000; }
.neon-benefits li::before { content:'–'; margin-right:8px; color:var(--home-cyan); font-weight:900; }
.neon-hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.neon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  min-width:190px;
  min-height:43px;
  padding:9px 24px;
  border:1px solid rgba(76,178,255,.85);
  border-radius:22px;
  color:#fff;
  font-size:14px;
  font-weight:800;
  transition:transform .2s ease,box-shadow .2s ease;
}
.neon-button:hover { color:#fff; transform:translateY(-2px); box-shadow:0 10px 26px rgba(35,141,255,.28); }
.neon-button-primary,.neon-button-small { border-color:transparent; background:linear-gradient(105deg,#24caff,#2887ff 52%,#8450ff); }
.neon-button-ghost { background:rgba(3,24,58,.58); backdrop-filter:blur(12px); }
.neon-button-small { min-width:140px; min-height:34px; padding:7px 18px; border-radius:18px; }

.neon-section { width:min(1248px,calc(100% - 56px)); margin:0 auto; padding:7px 0 11px; }
.neon-section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:11px; }
.neon-section-heading h2 { margin:0; color:#fff; font-size:25px; line-height:1.1; text-shadow:0 3px 18px #000; }
.neon-section-heading>a { display:flex; align-items:center; gap:10px; color:#64cfff; font-size:13px; }

/* Standalone program objects from the approved concept. */
.neon-program-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.neon-program-card {
  position:relative;
  display:grid;
  grid-template-columns:205px minmax(0,1fr);
  height:156px;
  overflow:hidden;
  border:1px solid var(--home-line);
  border-radius:20px;
  background:radial-gradient(circle at 14% 55%,rgba(32,112,183,.24),transparent 34%),linear-gradient(120deg,rgba(10,40,84,.95),rgba(6,29,66,.88));
  box-shadow:0 17px 42px rgba(0,5,20,.36),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(16px);
}
.neon-program-card::after { content:''; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg,transparent,var(--home-cyan),transparent); opacity:.28; }
.neon-program-monsters { border-color:rgba(120,79,235,.7); background:radial-gradient(circle at 15% 52%,rgba(115,42,213,.3),transparent 35%),linear-gradient(120deg,rgba(16,34,79,.96),rgba(17,24,70,.9)); }
.neon-program-visual { position:relative; min-width:0; overflow:hidden; }
.neon-program-visual::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 65%,rgba(8,33,73,.94)); pointer-events:none; }
.neon-program-monsters .neon-program-visual::after { background:linear-gradient(90deg,transparent 66%,rgba(16,29,76,.92)); }
.neon-program-visual img { width:100%; height:100%; object-fit:contain; transform:scale(1.14); filter:drop-shadow(0 0 15px rgba(55,187,255,.3)); }
.neon-program-monsters .neon-program-visual img { transform:scale(1.18) translateY(5px); filter:drop-shadow(0 0 16px rgba(151,64,255,.42)); }
.neon-program-content { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:15px 23px 14px 7px; }
.neon-program-content h3 { margin:0 0 6px; color:#fff; font-size:19px; }
.neon-program-content p { display:-webkit-box; min-height:38px; margin:0 0 9px; overflow:hidden; color:#bdcee2; font-size:13px; line-height:1.4; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.neon-market { padding-top:6px; }
.neon-listing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.neon-listing-card {
  display:grid;
  grid-template-columns:205px minmax(0,1fr);
  gap:13px;
  height:156px;
  padding:10px;
  overflow:hidden;
  border:1px solid rgba(57,144,210,.58);
  border-radius:18px;
  background:linear-gradient(125deg,rgba(10,39,82,.95),rgba(6,27,62,.9));
  box-shadow:0 15px 36px rgba(0,5,20,.34),inset 0 1px rgba(255,255,255,.035);
  transition:transform .2s ease,border-color .2s ease;
}
.neon-listing-card:hover { border-color:var(--home-cyan); transform:translateY(-3px); }
.neon-listing-image { position:relative; min-width:0; height:100%; overflow:hidden; border-radius:12px; background:#07172e; }
.neon-listing-image::after { content:''; position:absolute; inset:0; box-shadow:inset -12px 0 22px rgba(4,24,56,.25); pointer-events:none; }
.neon-listing-image-link { display:block; width:100%; height:100%; color:inherit; }
.neon-listing-image img,.neon-listing-image .image-placeholder { width:100%; height:100%; object-fit:cover; }
.neon-listing-slide { display:none; }
.neon-listing-slide.active { display:block; }
.neon-listing-arrow { position:absolute; z-index:3; top:50%; display:grid; place-items:center; width:28px; height:36px; padding:0; border:1px solid rgba(112,207,255,.55); border-radius:14px; color:#fff; background:rgba(2,15,37,.76); box-shadow:0 5px 18px rgba(0,0,0,.3); transform:translateY(-50%); cursor:pointer; font-size:24px; line-height:1; }
.neon-listing-arrow:hover { border-color:#66dcff; background:rgba(12,57,105,.9); }
.neon-listing-arrow.previous { left:6px; }
.neon-listing-arrow.next { right:6px; }
.neon-listing-counter { position:absolute; z-index:3; right:8px; bottom:6px; padding:2px 7px; border-radius:10px; color:#dff8ff; background:rgba(2,13,33,.76); font-size:9px; }
.neon-listing-body { display:flex; flex-direction:column; min-width:0; padding:2px 4px 2px 0; }
.neon-listing-body h3 { margin:0 0 5px; overflow:hidden; color:#fff; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.neon-listing-meta { display:flex; align-items:center; gap:5px; margin:0 0 4px; color:#a9bdd2; font-size:10px; }
.neon-listing-meta svg { width:13px; height:13px; flex:0 0 13px; fill:none; stroke:#d9e8fa; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.neon-listing-meta span { color:#a9bdd2; }
.neon-listing-meta strong { color:#fff; }
.neon-listing-description { display:-webkit-box; margin:1px 0 0; overflow:hidden; color:#c3d0df; font-size:10.5px; line-height:1.3; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.neon-listing-price { display:flex; align-items:center; gap:5px; margin-top:auto; color:#22dcff; font-size:18px; line-height:1; }
.neon-listing-price strong { font-weight:800; }
.neon-empty { grid-column:1/-1; padding:30px; border:1px dashed var(--home-line); border-radius:18px; color:#a9bfd5; text-align:center; background:rgba(4,21,49,.75); }

/* Compact horizontal footer from the approved mockup, with the existing content retained. */
.page-home .site-footer {
  position:relative;
  display:grid;
  grid-template-columns:minmax(390px,1.45fr) auto auto minmax(140px,.45fr);
  align-items:center;
  gap:28px;
  min-height:100px;
  width:100%;
  max-width:none;
  margin:0;
  padding:18px max(72px,calc((100vw - 1390px)/2));
  border-top:1px solid rgba(56,140,207,.34);
  background:rgba(1,8,23,.86);
  backdrop-filter:blur(18px);
}
.page-home .footer-brand { display:flex; align-items:center; gap:22px; }
.page-home .footer-brand p { max-width:310px; margin:0; padding-left:22px; border-left:1px solid rgba(65,123,174,.46); }
.page-home .site-footer .brand-logo { width:164px; height:auto; }
.page-home .site-footer p,.page-home .site-footer a,.page-home .site-footer span { color:#91a8c1; font-size:11px; }
.page-home .footer-nav { display:flex; align-items:center; gap:23px; white-space:nowrap; }
.page-home .footer-nav a:hover { color:#fff; }
.page-home .footer-socials { display:flex; align-items:center; gap:14px; padding-right:20px; border-right:1px solid rgba(65,123,174,.46); }
.page-home .footer-socials a { display:grid; width:22px; height:22px; place-items:center; color:#a9c4e6; }
.page-home .footer-socials svg { width:20px; height:20px; fill:currentColor; }
.page-home .footer-socials strong { font-size:11px; }
.page-home .footer-socials a:hover { color:#55d5ff; }
.page-home .footer-legal { display:grid; gap:4px; }

@media(max-width:1100px) {
  .page-home .site-header { padding:0 22px; gap:16px; }
  .page-home .main-nav { gap:2px; }
  .page-home .main-nav a { padding:8px 7px; font-size:12px; }
  .neon-hero,.neon-section { width:calc(100% - 44px); }
  .neon-hero-copy { width:62%; }
  .neon-program-card { grid-template-columns:165px minmax(0,1fr); }
  .neon-listing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-home .site-footer { grid-template-columns:1fr auto; padding:22px; gap:18px; }
  .page-home .footer-brand { grid-column:1/-1; }
  .page-home .footer-nav { flex-wrap:wrap; }
}
@media(max-width:700px) {
  .page-home { background-attachment:scroll; background-size:auto 720px; background-position:64% 108px; }
  .page-home .site-header { width:100%; max-width:100%; min-height:68px; height:auto; margin:0; padding:10px 14px; border-radius:0; }
  .page-home .brand-logo { width:180px; height:42px; }
  .page-home .main-nav { top:68px; padding:12px; border-bottom:1px solid var(--home-line); background:rgba(2,12,32,.97); }
  .page-home .main-nav a { border-radius:14px; }
  .page-home .header-actions { display:grid; grid-template-columns:auto auto auto; width:100%; min-width:0; flex:0 0 100%; justify-content:space-between; gap:7px; }
  .page-home .coin-balance { min-width:70px; }
  .page-home .header-actions .button-danger { min-width:92px; max-width:110px; }
  .neon-home { padding-bottom:15px; }
  .neon-hero { width:100%; min-height:570px; padding:44px 20px 230px; background:linear-gradient(180deg,rgba(1,9,27,.76),rgba(1,9,27,.18) 58%,rgba(1,9,27,.62)); }
  .neon-hero-copy { width:100%; }
  .neon-hero h1 { max-width:100%; font-size:clamp(30px,8.4vw,40px); overflow-wrap:break-word; }
  .neon-benefits li { font-size:14px; }
  .neon-hero-actions { display:grid; grid-template-columns:1fr; }
  .neon-button { width:100%; }
  .neon-section { width:calc(100% - 28px); padding:14px 0; }
  .neon-section-heading { align-items:flex-end; }
  .neon-section-heading h2 { font-size:22px; }
  .neon-section-heading>a { font-size:11px; }
  .neon-program-grid,.neon-listing-grid { grid-template-columns:1fr; }
  .neon-program-card { grid-template-columns:130px minmax(0,1fr); height:170px; }
  .neon-program-content { padding:14px 14px 14px 2px; }
  .neon-program-content h3 { font-size:17px; }
  .neon-program-content p { font-size:12px; }
  .neon-button-small { width:auto; min-width:128px; }
  .neon-listing-card { height:170px; }
  .neon-listing-card { grid-template-columns:42% minmax(0,1fr); }
  .page-home .site-footer { grid-template-columns:1fr; padding:26px 20px; }
  .page-home .footer-brand { grid-column:auto; flex-wrap:wrap; }
  .page-home .footer-brand p { padding-left:0; border-left:0; }
  .page-home .footer-nav { gap:13px 18px; }
  .page-home .footer-socials { padding-right:0; border-right:0; }
}