/* ===== Reset & base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:    #0b0e14;
  --surf:  rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.08);
  --text:  #e8eaed;
  --muted: rgba(255,255,255,0.55);
  --gold:  #f0c756;
  --gold2: #d4a030;
  --pos:   #34d399;
  --pos-bg:rgba(52,211,153,0.08);
  --adm:   #60a5fa;
  --adm-bg:rgba(96,165,250,0.08);
  --radius:16px;
  --font:  "Inter","SF Pro Display",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

html{
  height:100%;
  scroll-behavior:smooth;
}

body{
  min-height:100%;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  font-size:15px;
}

::selection{background:rgba(240,199,86,0.22);color:inherit}

/* Grain overlay */
.noise{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:256px 256px;
}

/* Ambient glow blobs */
body::before,body::after{
  content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(120px);opacity:0.12;
}
body::before{
  width:700px;height:500px;top:-120px;left:-80px;
  background:radial-gradient(circle,var(--gold),transparent 70%);
}
body::after{
  width:600px;height:500px;bottom:-100px;right:-60px;
  background:radial-gradient(circle,var(--adm),transparent 70%);
}

/* ===== Layout ===== */
.page{
  position:relative;z-index:1;
  max-width:860px;margin:0 auto;
  padding:48px 24px 40px;
}

/* ===== Hero ===== */
.hero{text-align:center;margin-bottom:40px}

.hero-logo{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:20px;
}
.hero-logo svg{flex-shrink:0}
.hero-wordmark{
  font-size:20px;font-weight:700;letter-spacing:0.02em;
  color:var(--muted);
}

.hero-title{
  font-size:clamp(28px,5vw,42px);
  font-weight:800;letter-spacing:-0.03em;
  line-height:1.15;
  background:linear-gradient(135deg,#fff 40%,rgba(255,255,255,0.55));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-sub{
  margin-top:10px;color:var(--muted);font-size:16px;max-width:460px;margin-inline:auto;
}

/* ===== Platform hint ===== */
.platform-hint{
  display:flex;align-items:center;gap:8px;justify-content:center;
  padding:8px 16px;border-radius:999px;
  background:rgba(240,199,86,0.08);border:1px solid rgba(240,199,86,0.18);
  color:var(--gold);font-size:13px;font-weight:500;
  margin:-10px auto 30px;width:fit-content;
  animation:fadeUp .4s ease both;
}
.platform-hint[hidden]{display:none}

/* ===== App cards ===== */
.apps{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
  margin-bottom:28px;
}

.app-card{
  position:relative;overflow:hidden;
  background:var(--surf);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 24px 24px;
  display:flex;flex-direction:column;gap:16px;
  transition:border-color .25s,box-shadow .25s;
}
.app-card:hover{
  border-color:rgba(255,255,255,0.14);
  box-shadow:0 12px 40px rgba(0,0,0,0.25);
}

/* Colour glow per card */
.app-card-glow{
  position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:260px;height:160px;border-radius:50%;
  pointer-events:none;filter:blur(70px);opacity:0.18;
  transition:opacity .3s;
}
.app-card:hover .app-card-glow{opacity:0.28}
.app-card-glow--pos{background:var(--pos)}
.app-card-glow--admin{background:var(--adm)}

/* Badge */
.app-badge{
  width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;
  flex-shrink:0;
}
.app-badge--pos{background:var(--pos-bg);color:var(--pos);border:1px solid rgba(52,211,153,0.18)}
.app-badge--admin{background:var(--adm-bg);color:var(--adm);border:1px solid rgba(96,165,250,0.18)}

/* Info */
.app-info{flex:1}
.app-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.app-name{font-size:18px;font-weight:700;letter-spacing:-0.01em}
.app-desc{color:var(--muted);font-size:13.5px;margin-top:6px;line-height:1.5}
.app-version{
  display:inline-block;margin-top:8px;
  font-size:12px;font-weight:600;letter-spacing:0.03em;
  color:var(--muted);
  padding:3px 10px;border-radius:999px;
  background:rgba(255,255,255,0.05);border:1px solid var(--border);
}

/* Pills */
.pill{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
  padding:3px 9px;border-radius:999px;
}
.pill--required{background:rgba(240,199,86,0.12);color:var(--gold);border:1px solid rgba(240,199,86,0.24)}
.pill--optional{background:rgba(255,255,255,0.05);color:var(--muted);border:1px solid var(--border)}

/* Download buttons */
.app-buttons{display:flex;gap:10px;flex-wrap:wrap}

.dl-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:12px;
  font-size:14px;font-weight:650;
  text-decoration:none;
  transition:all .2s ease;
  cursor:pointer;
}

.dl-btn--primary{
  background:rgba(255,255,255,0.07);color:var(--text);
  border:1px solid rgba(255,255,255,0.12);
}
.dl-btn--primary:hover{
  background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.2);
  transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.2);
}

.dl-btn--secondary{
  background:transparent;color:var(--muted);
  border:1px solid var(--border);
}
.dl-btn--secondary:hover{
  background:rgba(255,255,255,0.04);color:var(--text);border-color:rgba(255,255,255,0.16);
  transform:translateY(-1px);
}

/* Detected platform highlight */
.dl-btn--detected.dl-btn--primary{
  background:linear-gradient(135deg,rgba(240,199,86,0.16),rgba(240,199,86,0.06));
  border-color:rgba(240,199,86,0.32);color:#fff;
}
.dl-btn--detected.dl-btn--primary:hover{
  background:linear-gradient(135deg,rgba(240,199,86,0.24),rgba(240,199,86,0.10));
  border-color:rgba(240,199,86,0.45);
}
.dl-btn--detected.dl-btn--secondary{
  background:rgba(240,199,86,0.06);border-color:rgba(240,199,86,0.2);color:var(--gold);
}
.dl-btn--detected.dl-btn--secondary:hover{
  background:rgba(240,199,86,0.12);border-color:rgba(240,199,86,0.32);
}

.app-install-hint{
  font-size:12px;color:var(--muted);opacity:0.7;
  margin-top:auto;
}

/* ===== Guide / Accordion ===== */
.guide{
  background:var(--surf);border:1px solid var(--border);
  border-radius:var(--radius);margin-bottom:10px;
  transition:border-color .2s;
}
.guide:hover{border-color:rgba(255,255,255,0.12)}
.guide[open]{border-color:rgba(255,255,255,0.14)}

.guide-toggle{
  display:flex;align-items:center;gap:10px;
  padding:16px 20px;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--text);
  list-style:none;
  user-select:none;
}
.guide-toggle::-webkit-details-marker{display:none}

.guide-chevron{
  margin-left:auto;transition:transform .25s ease;color:var(--muted);
}
.guide[open] .guide-chevron{transform:rotate(180deg)}

.guide-steps{
  padding:0 20px 18px 48px;
  color:rgba(255,255,255,0.72);font-size:14px;line-height:1.7;
}
.guide-steps li{margin-bottom:4px}
.guide-steps code{
  background:rgba(255,255,255,0.06);border:1px solid var(--border);
  padding:1px 6px;border-radius:6px;font-size:12.5px;
}

/* ===== Footer ===== */
.foot{
  text-align:center;padding:28px 0 0;
  font-size:12px;color:var(--muted);opacity:0.5;
}

/* ===== Animations ===== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.app-card{animation:fadeUp .5s ease both}
.app-card:nth-child(2){animation-delay:.08s}
.guide{animation:fadeUp .5s ease both;animation-delay:.15s}
.guide+.guide{animation-delay:.2s}

/* ===== Responsive ===== */
@media(max-width:640px){
  .page{padding:32px 16px 32px}
  .apps{grid-template-columns:1fr;gap:16px}
  .app-card{padding:22px 18px 20px}
  .hero{margin-bottom:28px}
  .hero-title{font-size:26px}
  .guide-toggle{padding:14px 16px;font-size:13px}
  .guide-steps{padding-left:38px;font-size:13px}
}