/* --- Ride Hines starter styles --- */
:root{
  --bg: #0b120e;
  --card: #0e1712cc;
  --text: #eef7f1;
  --muted: #c7d6cc;
  --accent: #45e38a;
  --accent2: #3bac6b;
  --chip: #14231a;
  --leaf: #86e3a2;
  --trunk: #7b5e57;
  --water: #70c1ff;
}

*{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";
  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:760px;
  box-shadow:0 10px 40px #0008;
}
.card.slim{max-width:760px; margin-top:1rem}
.card h2,.card h3{margin:0 0 .5rem}
.card p{margin:.5rem 0; line-height:1.6}
.card a{color:var(--accent); text-decoration:none; border-bottom:1px solid #45e38a66}
.card a:hover{color:#8ef2b6}

.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%, #45e38a33 0%, transparent 60%),
              radial-gradient(50% 50% at 20% 70%, #3bac6b33 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:#0e1a14}
.tree .trunk{fill:var(--trunk)}
.tree .crown{fill:url(#leaf)}
.wheel{stroke:#aaf0c8; stroke-width:3; fill:none; filter:drop-shadow(0 3px 6px #0008)}
.frame,.bar{stroke:#d3ffe6; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round}
.motor{fill:#45e38a}

.maplet{margin-top:.75rem}
.maplet svg{width:min(100%,640px); height:auto}
.map-bg{fill:#0b1510; stroke:#ffffff1a; stroke-width:1}
.road{stroke:#d2e3d8; stroke-width:3; stroke-linecap:round; opacity:.9}
.river{stroke:var(--water); stroke-width:6; fill:none; opacity:.6}
.pin{fill:#45e38a; stroke:#0b120e; stroke-width:2}
.pin-label{font: 12px ui-sans-serif, system-ui; fill:#cfe6d7}
.mill{fill:#2a3b30; stroke:#fff1; stroke-width:1}

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

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

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