:root{
  --bg: #0b0b10;
  --bg-2: #121218;
  --text: #f6f7fb;
  --muted: #aeb3c2;
  --accent: #FFD166; /* honey */
  --accent-2: #FF9F1C; /* amber */
  --card: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.12);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #1a1a24 0%, var(--bg) 50%),
              radial-gradient(1000px 900px at 110% 10%, #171720 0%, var(--bg-2) 60%);
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji;
  line-height:1.6;
  overflow-x:hidden;
}

.wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 64px);
  position: relative;
  z-index: 1;
}

/* Background honeycomb */
.bg{ position: fixed; inset: 0; opacity: .25; pointer-events:none; }
.bg__honeycomb{
  width: 140vmax; min-width: 1200px;
  position:absolute; top:-10vmax; left:-10vmax;
  animation: drift 40s linear infinite;
  filter: drop-shadow(0 0 20px rgba(255,209,102,0.18));
}
@keyframes drift{
  0%{ transform: translate3d(0,0,0) rotate(0deg); }
  50%{ transform: translate3d(5%,3%,0) rotate(5deg); }
  100%{ transform: translate3d(0,0,0) rotate(0deg); }
}

/* Brand */
.brand{ display:flex; align-items:center; gap:14px; margin-bottom: 18px; }
.brand__logo{
  width:72px; height:72px; object-fit:contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
}
.brand__title{
  margin:0; font-size: clamp(28px, 4vw, 40px); letter-spacing:.2px;
  font-weight: 800;
  display:flex; align-items:baseline; gap:.1em;
}
.dot{ color: var(--accent); font-weight: 900 }

/* Carded hero */
.hero{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(18px, 4vw, 32px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.hero__headline{
  font-size: clamp(26px, 5.2vw, 56px);
  line-height:1.1; margin: 8px 0 8px;
  letter-spacing:.3px;
}
.accent{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.hero__sub{
  margin: 0 0 20px;
  color: var(--muted);
  font-size: clamp(15px, 2.6vw, 18px);
}

/* Waitlist form */
.waitlist{
  display:flex; gap:10px; flex-wrap:wrap;
  margin: 10px 0 26px;
}
.waitlist input{
  flex:1 1 280px;
  padding: 14px 16px;
  background: var(--glass);
  border:1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  outline:none;
}
.waitlist input::placeholder{ color: #cfd3e0aa }
.btn{
  padding: 14px 18px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#1a1200; border:0; font-weight:800; letter-spacing:.2px;
  border-radius: 12px; cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05) }
.waitlist__notice{ width:100%; margin:6px 2px 0; color:#C9F4AB }

/* Hide honeypot field from human users */
.hp{ position:absolute; left:-9999px; opacity:0; }

/* Feature points */
.points{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px; margin-top: 8px;
}
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 14px; padding: 16px;
}
.card__icon{ font-size: 22px; margin-bottom: 6px }
.card h3{ margin: 6px 0; font-size: 17px }
.card p{ margin: 0; color: var(--muted); font-size: 14px }

/* Social links */
.social{ display:flex; gap:12px; margin-top: 18px; }
.social a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background: #ffffff10; border:1px solid var(--border);
  transition: transform .15s ease, background .2s ease;
}
.social a:hover{ transform: translateY(-1px); background: #ffffff18 }
.social svg{ fill: var(--text) }

/* Footer */
.foot{
  text-align:center; color: #cfd3e0aa; margin-top: 18px;
  font-size: 13px;
}

/* A11y helper */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Responsive */
@media (max-width: 860px){
  .points{ grid-template-columns: 1fr }
}