:root{
    --bg:#0b0b10;
    --bg2:#0f0f16;
    --panel:#14141f;
    --text:#ECECEC;
    --muted:#A1A6B2;
    --orange:#FF6B35;
    --yellow:#FFD23F;
    --amber:#FF8C42;
    --gold:#FFA726;
    --ring:0 0 0 3px rgba(255,107,53,0.25);
    --shadow-lg:0 20px 60px rgba(0,0,0,.45);
    --radius:18px;
}
html,body{height:100%}
body{
    margin:0; font-family:"Poppins", "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,107,53,.15), transparent 60%),
                        radial-gradient(900px 600px at 90% 10%, rgba(255,210,63,.13), transparent 60%),
                        linear-gradient(180deg, var(--bg), var(--bg2));
    background-attachment:fixed;
    -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:flex-start; 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,107,53,.4));
    transition:transform 0.2s ease;
}
.logo-img:hover{
    transform:scale(1.05);
}
.wordmark{font-family:"Nunito", "Space Grotesk", sans-serif; font-weight:700; font-size:1.25rem; letter-spacing:.4px;
    background:linear-gradient(90deg, #fff, var(--orange) 45%, var(--yellow)); -webkit-background-clip:text; background-clip:text; color:transparent;
    text-decoration:none; white-space:nowrap}
nav{display:flex; gap:8px; align-items:center; margin-left:auto}
nav a{color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px; transition:all 0.2s ease}
nav a:hover{color:var(--text)}
.login-btn{
  background:linear-gradient(90deg, var(--orange), var(--amber)) !important;
  color:#111 !important;
  font-weight:600;
  margin-left:8px;
  border-radius:12px !important;
}
.login-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(255,107,53,.3);
  color:#111 !important;
}

/* 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}
.mobile-menu .login-btn{
  background:linear-gradient(90deg, var(--orange), var(--amber)) !important;
  color:#111 !important;
  font-weight:600;
  margin-top:8px;
}
.mobile-menu .login-btn:hover{
  background:linear-gradient(90deg, var(--amber), var(--gold)) !important;
  color:#111 !important;
}

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

.hero{margin-top:56px; position:relative; background-image:url('img/hospitality-menuboards03.png'); 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:"Nunito", "Space Grotesk", sans-serif; font-size:clamp(2.1rem, 5vw, 3.6rem); font-weight:800; line-height:1.03; margin:.6rem 0 1rem}
.glow{background:linear-gradient(90deg, var(--orange), var(--amber) 55%, var(--yellow)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 30px rgba(255,107,53,.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:"Nunito", "Space Grotesk", sans-serif}
.btn-primary{background:linear-gradient(90deg, var(--orange), var(--amber)); 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(--yellow); margin-bottom:12px; display:flex; align-items:center; justify-content:center; width:48px; height:48px; background:rgba(255,210,63,.1); border-radius:12px; margin:0 auto 16px}
.card h3{margin:8px 0 6px; font-family:"Nunito", "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(--orange), var(--yellow)); 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:460px; overflow:hidden; position:relative; border-radius:var(--radius)}
.letterbox-img{width:100%; height:100%; object-fit:cover; object-position:center; opacity: 0.5; filter:brightness(0.8) contrast(1.1)}

.image-section{margin:40px 0}
.section-img{width:100%; height:400px; object-fit:cover; object-position:center -50px; 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,107,53,.2), rgba(255,140,66,.2));
  border:2px solid rgba(255,210,63,.15);
  border-radius:16px;
  margin:0 auto 16px;
  position:relative;
  backdrop-filter:blur(10px);
}

.feature-bubble h4{
  font-family:'Nunito', 'Space Grotesk', sans-serif;
  font-size:1.1rem;
  font-weight:700;
  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}
}

/* LOGIN PAGE STYLES */
.login-header-content{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.login-section{
  min-height:calc(100vh - 200px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 0;
}

.login-container{
  max-width:420px;
  width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:40px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(10px);
  box-sizing:border-box;
  margin:0 20px;
}

.login-header{
  text-align:center;
  margin-bottom:32px;
}

.login-title{
  font-family:"Nunito", "Space Grotesk", sans-serif;
  font-size:2rem;
  font-weight:700;
  margin:0 0 8px;
  color:#fff;
}

.login-subtitle{
  color:var(--muted);
  margin:0;
  font-size:1rem;
}

.login-form{
  margin-bottom:24px;
}

.form-group{
  margin-bottom:20px;
}

.form-group label{
  display:block;
  font-size:0.9rem;
  color:#DDE0E8;
  margin-bottom:8px;
  font-weight:500;
}

.form-group input{
  width:100%;
  padding:14px 16px;
  background:#0e0e16;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:#fff;
  font-size:1rem;
  transition:all 0.2s ease;
  box-sizing:border-box;
}

.form-group input:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:var(--ring);
}

.form-options{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  flex-wrap:wrap;
  gap:12px;
}

.checkbox-label{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:0.9rem;
}

.checkbox-label input[type="checkbox"]{
  width:auto;
  margin:0;
}

.checkbox-text{
  color:var(--muted);
}

.forgot-link{
  color:var(--orange);
  text-decoration:none;
  font-size:0.9rem;
  transition:color 0.2s ease;
}

.forgot-link:hover{
  color:var(--amber);
}

.login-btn-submit{
  width:100%;
  padding:14px;
  font-size:1rem;
  margin-bottom:0;
}

.login-footer{
  text-align:center;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
}

.login-footer p{
  color:var(--muted);
  margin:0;
  font-size:0.9rem;
}

.signup-link{
  color:var(--orange);
  text-decoration:none;
  font-weight:500;
  transition:color 0.2s ease;
}

.signup-link:hover{
  color:var(--amber);
}

/* Mobile responsiveness for login */
@media (max-width:480px){
  .login-container{
    padding:24px 20px;
    margin:0 16px;
    max-width:calc(100vw - 32px);
    width:calc(100vw - 32px);
  }
  
  .login-title{
    font-size:1.6rem;
  }
  
  .form-options{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
  
  .login-section{
    padding:20px 0;
  }
}

/* Additional breakpoint for very small screens */
@media (max-width:360px){
  .login-container{
    padding:20px 16px;
    margin:0 12px;
    max-width:calc(100vw - 24px);
    width:calc(100vw - 24px);
    border-radius:16px;
  }
  
  .login-title{
    font-size:1.4rem;
  }
  
  .form-group input{
    padding:12px 14px;
  }
}

/* Success and Error Messages */
.error-message, .success-message {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

.error-message {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.success-message {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #86efac;
}

/* 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}