:root{
    --bg:#0b0b10;
    --bg2:#0f0f16;
    --panel:#14141f;
    --text:#ECECEC;
    --muted:#A1A6B2;
    --pink:#FF2DA4;
    --cyan:#00F0FF;
    --purple:#7B61FF;
    --lime:#B6FF40;
    --ring:0 0 0 3px rgba(255,45,164,0.25);
    --shadow-lg:0 20px 60px rgba(0,0,0,.45);
    --radius:18px;
}
html,body{height:100%}
body{
    margin:0; font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text); background:radial-gradient(1200px 700px at 20% -10%, rgba(255,45,164,.15), transparent 60%),
                        radial-gradient(900px 600px at 90% 10%, rgba(0,240,255,.13), transparent 60%),
                        linear-gradient(180deg, var(--bg), var(--bg2));
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{width:100%; padding:32px 0 80px}
.content-container{max-width:1120px; margin:0 auto; padding:0 20px}
header{display:flex; align-items:center; justify-content:space-between; gap:16px}
.header-content{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none}
.logo-img{
    width:44px; height:44px; border-radius:12px;
    filter:drop-shadow(0 0 24px rgba(255,45,164,.4));
    transition:transform 0.2s ease;
}
.logo-img:hover{
    transform:scale(1.05);
}
.wordmark{font-family:"Space Grotesk", sans-serif; font-weight:700; font-size:1.25rem; letter-spacing:.4px;
    background:linear-gradient(90deg, #fff, var(--pink) 45%, var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent;
    text-decoration:none; white-space:nowrap}
nav{display:flex; gap:8px; align-items:center}
nav a{color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px; transition:color 0.2s ease}
nav a:hover{color:var(--text)}

/* Mobile menu styles */
.mobile-menu-btn{display:none; background:none; border:none; color:var(--text); cursor:pointer; padding:8px; border-radius:8px}
.mobile-menu-btn:hover{background:rgba(255,255,255,.1)}
.mobile-menu{display:none; position:absolute; top:100%; right:0; background:var(--panel); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:8px; min-width:150px; box-shadow:var(--shadow-lg); z-index:1000}
.mobile-menu.show{display:block}
.mobile-menu a{display:block; padding:10px 12px; border-radius:8px; margin:2px 0; color:var(--muted) !important; text-decoration:none; transition:all 0.2s ease; font-weight:400}
.mobile-menu a:hover{background:rgba(255,255,255,.1); color:var(--text) !important}
.mobile-menu a:visited{color:var(--muted) !important}
.mobile-menu a:active{color:var(--text) !important}

@media (max-width:768px){
  nav{display:none}
  .mobile-menu-btn{display:block}
  .mobile-nav{position:relative}
}

.hero{margin-top:56px; position:relative; background-image:url('img/luke-chesser-JKUTrJ4vK00-unsplash.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; overflow:hidden; padding:40px 0; border-radius:var(--radius)}
.hero::before{content:''; position:absolute; inset:0; background:rgba(0,0,0,0.7); z-index:1}
.hero-content{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
@media (max-width:960px){.hero{grid-template-columns:1fr;}}
.h-eyebrow{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.02)}
.h-title{font-family:"Space Grotesk", sans-serif; font-size:clamp(2.1rem, 5vw, 3.6rem); font-weight:700; line-height:1.03; margin:.6rem 0 1rem}
.glow{background:linear-gradient(90deg, var(--pink), var(--purple) 55%, var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 30px rgba(255,45,164,.28)}
.h-sub{color:#D3D5DC; font-size:1.1rem; line-height:1.55; margin: 60px 0;}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 28px}
.badge{padding:8px 12px; border-radius:999px; font-size:.9rem; border:1px solid rgba(255,255,255,.08); color:#EAEAF1; background:rgba(255,255,255,.03)}

.panel{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius); box-shadow:var(--shadow-lg)}

.cta-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.btn{appearance:none; border:none; cursor:pointer; padding:14px 18px; border-radius:14px; font-weight:700; letter-spacing:.2px; font-family:"Space Grotesk", sans-serif}
.btn-primary{background:linear-gradient(90deg, var(--pink), var(--purple)); color:#111}
.btn-primary[disabled]{opacity:.55; cursor:not-allowed; filter:saturate(.6)}
.btn-ghost{background:transparent; color:#fff; border:1px dashed rgba(255,255,255,.25)}

.card-grid{margin-top:54px; padding:40px 0; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08)}
.card-grid-content{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:960px){.hero-content{grid-template-columns:1fr}
.card-grid-content{grid-template-columns:1fr}}
.card{padding:20px; position:relative}
.card-icon{color:var(--cyan); margin-bottom:12px; display:flex; align-items:center; justify-content:center; width:48px; height:48px; background:rgba(0,240,255,.1); border-radius:12px; margin:0 auto 16px}
.card h3{margin:8px 0 6px; font-family:"Space Grotesk", sans-serif; text-align:center}
.card p{color:var(--muted); line-height:1.55; text-align:center}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.9rem; color:#d9f7ff}
.pill{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
.pill svg{opacity:.9}

/* WAITLIST */
.waitlist{margin-top:56px; padding:40px 0; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08)}
.wl-head{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.wl-note{color:var(--muted)}
form{margin-top:18px}
fieldset{border:0; padding:0; margin:0}
.grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px}
@media (max-width:720px){.grid{grid-template-columns:1fr}}
label{font-size:.9rem; color:#DDE0E8}
input, select, textarea{width:100%; margin-top:8px; padding:12px 12px; color:#fff; background:#0e0e16; border-radius:12px; border:1px solid rgba(255,255,255,.12)}
input[disabled], select[disabled], textarea[disabled]{opacity:.55; cursor:not-allowed}
.wl-actions{display:flex; gap:12px; align-items:center; margin-top:6px}
.tag{font-size:.85rem; color:#0b0b10; background:linear-gradient(90deg, var(--pink), var(--cyan)); padding:8px 10px; border-radius:999px}

/* footer */
footer{margin-top:64px; padding:40px 0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border-top:1px solid rgba(255,255,255,.08)}
.footer-content{display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); flex-wrap:wrap}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:#fff}

/* Image sections */
.letterbox-section{margin:40px 0; overflow:hidden}
.letterbox-image{height:300px; overflow:hidden; position:relative; border-radius:var(--radius)}
.letterbox-img{width:100%; height:100%; object-fit:cover; object-position:center -190px; opacity: 0.6; filter:brightness(0.8) contrast(1.1)}

.image-section{margin:40px 0}
.section-img{width:100%; height:200px; object-fit:cover; object-position:center -470px; border-radius:var(--radius); opacity: 0.4; filter:brightness(0.9) contrast(1.05)}

/* Enhanced features grid */
.features-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:24px; margin-top:32px}

.feature-bubble{
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:24px;
  position:relative;
  transition:all 0.3s ease;
  backdrop-filter:blur(10px);
  overflow:hidden;
}

.feature-bubble::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}

.feature-bubble:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.2);
  box-shadow:0 20px 40px rgba(0,0,0,.3);
}

.feature-icon{
  font-size:2.2rem;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  background:linear-gradient(135deg, rgba(255,45,164,.2), rgba(123,97,255,.2));
  border:2px solid rgba(255,255,255,.15);
  border-radius:16px;
  margin:0 auto 16px;
  position:relative;
  backdrop-filter:blur(10px);
}

.feature-bubble h4{
  font-family:'Space Grotesk', sans-serif;
  font-size:1.1rem;
  font-weight:600;
  color:#fff;
  margin:0 0 12px;
  text-align:center;
}

.feature-bubble p{
  color:var(--muted);
  line-height:1.6;
  margin:0;
  text-align:center;
  font-size:0.95rem;
}

/* Tablet breakpoint */
@media (max-width:1024px){
  .letterbox-img{object-position:center -100px}
  .section-img{object-position:center -250px}
}

/* Mobile breakpoint */
@media (max-width:768px){
  .letterbox-image{height:150px}
  .letterbox-img{object-position:center center}
  .section-img{height:200px; object-position:center center}
  .features-grid{grid-template-columns:1fr; gap:20px}
  .feature-bubble{padding:20px}
}

/* simple toast */
.toast{position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
    background:#151525; color:#fff; padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.25s}
.toast.show{opacity:1}