/* style.css — SamTech neon theme */
:root{
  --bg: #0b0f0c;
  --panel: #0f1511;
  --text: #e6f6ec;
  --muted: #9fb8a7;
  --neon: #39FF14;
  --neon-soft: rgba(57,255,20,0.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(circle at 50% 20%, #0f1a12 0%, var(--bg) 60%);
  overflow-x:hidden;
}

a{color:var(--text); text-decoration:none}
a:hover{color:var(--neon)}

.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:12px; top:12px; background:#000; color:#fff; padding:8px 10px; z-index:10000}

.topbar{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
  backdrop-filter:saturate(120%) blur(4px);
  z-index:50;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{width:36px; height:auto; filter:drop-shadow(0 0 6px var(--neon-soft))}
.brand-name{font-weight:700; letter-spacing:0.4px; opacity:.9}

.social a{margin-left:16px; font-weight:600; opacity:.9}
.social a:hover{opacity:1; text-shadow:0 0 6px var(--neon-soft)}

.logo-wrap{
  width:min(520px, 70vw);
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  filter: drop-shadow(0 0 18px var(--neon-soft)) drop-shadow(0 0 42px rgba(57,255,20,0.17));
}
.hero-logo{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:16px;
}

/* Bubble ring */
.bubble-ring{
  list-style:none; margin:0; padding:0;
  position:absolute; inset:0;
  display:grid; place-items:center;
}
.bubble-ring > li{
  position:absolute;
  transform: translate(calc(var(--x,0px)), calc(var(--y,0px)));
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.bubble:hover{
  transform: translate(calc(var(--x,0px)), calc(var(--y,0px))) scale(1.05);
  box-shadow:
    0 0 0 2px rgba(57,255,20,0.16) inset,
    0 8px 22px rgba(0,0,0,.45),
    0 0 30px rgba(57,255,20,0.35);
}

/* Modal */
.modal[aria-hidden="true"]{display:none}
.modal.show{display:block}
.modal .modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(2px);
  animation: fadeIn .2s ease;
}
.modal .modal-card{
  position:fixed; inset:0; margin:auto; width:min(720px, 92vw);
  background: linear-gradient(180deg, #0f1612, #0a120e);
  border:1px solid rgba(57,255,20,0.25);
  border-radius:16px;
  box-shadow: 0 0 0 1px rgba(57,255,20,0.10) inset, 0 18px 46px rgba(0,0,0,0.55), 0 0 60px rgba(57,255,20,0.18);
  padding:22px;
  top:50%; transform:translateY(-50%);
  animation: popIn .2s ease;
}
.modal-close{
  position:absolute; right:12px; top:6px;
  background:transparent; border:none; color:var(--text);
  font-size:28px; line-height:1; cursor:pointer;
  filter: drop-shadow(0 0 8px var(--neon-soft));
}
.modal h2{margin:6px 0 12px; font-size:clamp(20px, 3vw, 28px)}
.modal .modal-body{line-height:1.6; color:#d7e9dd}
.modal .check{padding-left:18px}
.modal .check li{margin:8px 0}
.modal .modal-actions{display:flex; gap:10px; margin-top:18px}
.btn{display:inline-block; padding:10px 14px; border-radius:10px; font-weight:700}
.btn.primary{background:var(--neon); color:#001600; box-shadow:0 0 18px var(--neon-soft)}
.btn.ghost{border:1px solid rgba(57,255,20,0.35); color:var(--text)}

.site-footer{
  text-align:center; padding:32px 16px; background:linear-gradient(to top, #050806, transparent);
  border-top:1px solid rgba(57,255,20,0.18);
  color:var(--muted);
}
.site-footer a{color:var(--text)}

.tiny{font-size:12px; opacity:.7; margin-top:6px}

@keyframes popIn{from{opacity:0; transform:translateY(calc(-50% + 12px))} to{opacity:1; transform:translateY(-50%)}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

/* Responsive tweaks */
@media (max-width: 640px){
  .bubble{font-size:14px; padding:10px 14px}
  .brand-name{display:none}
  .logo-wrap{width:min(420px, 80vw)}
}

.bubble-ring > li {
  transform: translate(calc(var(--x, 0px)), calc(var(--y, 0px)));
}

.bubble {
  transform: translate(calc(var(--x, 0px)), calc(var(--y, 0px)));
}

.logo-text {
    font-size: clamp(40px, 8vw, 110px);
    font-weight: 650;
    color: #b6ffb0;
    text-align: center;
    letter-spacing: 2px;

    text-shadow:
        0 0 6px #39FF14,
        0 0 12px rgba(57,255,20,0.45),
        0 0 24px rgba(57,255,20,0.30);

    filter: drop-shadow(0 0 14px rgba(57,255,20,0.25));
}

.hero {
  height: calc(100dvh - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  overflow: visible;
  
  min-height: calc(100dvh - 150px);
}

.logo-wrap {
  margin-bottom: 50px;
}

.bubble:hover {
  box-shadow:
    0 0 18px rgba(57,255,20,0.25),
    0 0 30px rgba(57,255,20,0.35) inset;
  transform: translate(calc(var(--x)), calc(var(--y))) scale(1.08);
}

.site-footer {
  margin-top: 20px;
  padding: 16px;
}

.bubble {
  padding: 16px 30px;
  border-radius: 50px;
  /*font-size: clamp(18px, 2vw, 24px);*/
  font-weight: 600;

  border: 1px solid rgba(57,255,20,0.40);
  background: rgba(20, 28, 23, 0.65);
  color: #eaffea;

  box-shadow:
    0 0 10px rgba(57,255,20,0.20),
    0 0 16px rgba(57,255,20,0.35) inset;

  cursor: pointer;
  backdrop-filter: blur(8px);
  white-space: nowrap;

  text-align: center;
  
  min-width: 210px;
  padding: 14px 24px;
  font-size: clamp(16px, 1.8vw, 20px);  
}