/* --- Jolte‑Bikes starter styles --- */
:root{
  --bg: #0a0f13;
  --card: #0f1720cc;
  --text: #e8f1f6;
  --muted: #b7c6cf;
  --accent: #36d1dc;
  --accent2: #5b86e5;
  --chip: #1a2530;
  --leaf: #7bd389;
  --trunk: #7b5e57;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

.wrap{
  position:relative;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:4rem 1.25rem;
  text-align:center;
  z-index:1;
}

.brand .logo{filter:drop-shadow(0 6px 16px #0008); animation:float 6s ease-in-out infinite}
.brand h1{margin:.5rem 0 0; letter-spacing:.02em; font-size:clamp(2rem,4vw,3rem)}
.tagline{color:var(--muted); margin:.25rem 0 0; font-size:clamp(1rem,2.2vw,1.25rem)}

.card{
  margin-top:1.5rem;
  background:var(--card);
  border:1px solid #ffffff1a;
  backdrop-filter: blur(8px);
  border-radius:16px;
  padding:1.5rem;
  max-width:720px;
  box-shadow:0 10px 40px #0008;
}
.card h2{margin:0 0 .5rem; font-size:clamp(1.5rem,3vw,2rem)}
.card p{margin:.5rem 0; line-height:1.6}
.card a{color:var(--accent); text-decoration:none; border-bottom:1px solid #36d1dc66}
.card a:hover{color:#8fd3f4}

.chips{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:1rem}
.chip{background:var(--chip); color:var(--muted); border:1px solid #ffffff12; padding:.35rem .6rem; border-radius:999px; font-size:.9rem}

.footer{margin-top:1.25rem; color:var(--muted); font-size:.9rem}

.bg{position:fixed; inset:0; z-index:0; overflow:hidden}
.grad{
  position:absolute; inset:-20%;
  background: radial-gradient(60% 60% at 70% 20%, #36d1dc33 0%, transparent 60%),
              radial-gradient(50% 50% at 20% 70%, #5b86e533 0%, transparent 60%);
  filter: blur(60px);
  transform: scale(1);
  animation: pulse 14s ease-in-out infinite;
}

.scene{position:absolute; bottom:-10px; left:0; width:120%; height:auto; color:var(--leaf)}
.hill{fill:#0f1a14}
.tree .trunk{fill:var(--trunk)}
.tree .crown{fill:url(#leaf)}
.wheel{stroke:#98e2ff; stroke-width:3; fill:none; filter:drop-shadow(0 3px 6px #0008)}
.frame,.bar{stroke:#d1e8ff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round}
.motor{fill:#36d1dc}

@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* small screens */
@media (max-width:480px){
  .card{padding:1.1rem}
}

/* email sparkle */
.email{position:relative; display:inline-block}
.burst{position:absolute; inset:-6px; border-radius:999px; border:2px solid #8fd3f4cc; animation:burst .6s ease forwards}
@keyframes burst{from{opacity:1; transform:scale(0.9)} to{opacity:0; transform:scale(1.3)}}