:root{
  --bg:#141416;
  --g:48px; /* grid size */
  --thin: rgba(255,255,255,0.03);
  --thick: rgba(255,255,255,0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:#ddd;
}

.panel{
  position:fixed;
  inset:0;
  display:grid;
  /* center hero content vertically and horizontally */
  place-items:center;
  padding-top:0;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* grid layer - full screen, animated downward */
.grid{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, var(--thin) 1px, transparent 1px),
    linear-gradient(to bottom, var(--thin) 1px, transparent 1px),
    linear-gradient(to right, var(--thick) 1px, transparent 1px),
    linear-gradient(to bottom, var(--thick) 1px, transparent 1px);
  background-size: var(--g) var(--g), var(--g) var(--g), calc(var(--g) * 4) calc(var(--g) * 4), calc(var(--g) * 4) calc(var(--g) * 4);
  background-position: 0 0, 0 0, 0 0, 0 0;
  opacity:1;
  animation: scrollGrid 8s linear infinite;
}

@keyframes scrollGrid{
  from{ background-position: 0 0, 0 0, 0 0, 0 0; }
  to{   background-position: 0 calc(var(--g)), 0 calc(var(--g)), 0 calc(var(--g)), 0 calc(var(--g)); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .grid{ animation: none; }
}

.logo{
  position:relative;
  z-index:1;
  /* larger default size, but still responsive */
  width:360px;
  max-width:75vw;
  height:auto;
  display:block;
  transition:transform .25s ease, filter .25s ease, opacity .36s ease;
  opacity:0;
}

.logo:focus, .logo:hover{ transform:scale(1.03); filter:drop-shadow(0 6px 20px rgba(0,0,0,.6)); }

/* small screens tweak */
@media (max-width:420px){ :root{--g:36px} .logo{width:240px} }

/* hero content (stacked under the logo) */
.hero-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* reduced vertical gaps to tighten layout */
  gap:20px;
  padding:12px 20px 8px;
}

.hero-text{
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight:700;
  font-size:1.05rem;
  margin:0;
  text-align:center;
  color:#ffffff;
  letter-spacing:0.2px;
}

.btn-row{ display:flex; gap:12px; align-items:center; justify-content:center; }

.btn-github{
  /* GitHub solid black variant (no gradient) */
  --btn-bg:#000000; /* pure black */
  background: var(--btn-bg);
  color: #fff;
}

.btn-left i{
  display:block;
  font-size:20px;
  color: #ffffff;
  line-height:1;
}

.btn-squarcle{
  /* compact badge style without glows */
  --btn-bg:#e23b3b; /* red */
  --btn-bg-2:#c53030;
  appearance:none;
  border:0;
  background:linear-gradient(180deg,var(--btn-bg) 0%, var(--btn-bg-2) 100%);
  color:white;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  height:44px;
  border-radius:12px;
  /* removed outer glow / heavy shadows to make it flat like the attachment */
  box-shadow:none;
  cursor:pointer;
  transform:translateZ(0);
  transition:transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, filter .18s ease;
  will-change: transform, box-shadow;
  text-decoration: none;
}

.btn-left{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  /* remove white box so the SVG sits directly on the red badge */
  background:transparent;
  border-radius:6px;
}

.btn-left img{
  display:block;
  width:22px; /* larger icon */
  height:auto;
  object-fit:contain;
}
.btn-left svg{ display:block }

.btn-labels{ display:flex; flex-direction:column; align-items:flex-start; line-height:1 }
.btn-title{ font-size:0.95rem; font-weight:800; margin:0; padding:0 }
.btn-sub{ font-size:0.68rem; font-weight:500; opacity:0.85; color:rgba(255,255,255,0.9); margin-top:2px }

.btn-squarcle:active{ transform:translateY(0) scale(.995) }
.btn-squarcle:hover{
  transform:translateY(-4px) scale(1.02);
  /* subtle shadow on hover for depth (no glow) */
  box-shadow:0 10px 20px rgba(0,0,0,0.18);
  filter:brightness(1.03);
}
.btn-squarcle:focus{ outline:2px solid rgba(255,255,255,0.06); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  .btn-squarcle, .btn-squarcle *{ transition:none !important; transform:none !important }
}

/* Ensure github variant overrides the default red background on the shared .btn-squarcle selector */
.btn-squarcle.btn-github{
  background: #000 !important; /* force pure black */
  color: #fff;
}

/* Keep hover behavior but avoid any brightness/gradient change that could reveal red */
.btn-squarcle.btn-github:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 10px 20px rgba(0,0,0,0.22);
  filter:none; /* don't brighten */
}

@media (max-width:420px){
  .hero-text{ font-size:1rem }
  .btn-squarcle{ padding:8px 10px; height:40px }
  .btn-left{ width:32px; height:32px }
  .btn-title{ font-size:0.9rem }
  .btn-sub{ font-size:0.6rem }
}

/* copyright text under the buttons */
.copyright{
  margin:6px 0 0 0;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size:0.85rem;
  color: rgba(255,255,255,0.65);
  text-align:center;
  z-index:1;
}

@media (max-width:420px){ .copyright{ font-size:0.78rem } }