/* =============================================
   RESET & TOKENS
   ============================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
html{scroll-behavior:auto;scrollbar-gutter:stable}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:#111110;background:var(--black);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
:root{
  --black:#191919;--white:#fff;--grey:#E0E0E0;--bg:#FAFAFA;
  --accent:#F56002;--text-secondary:#454545;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

/* =============================================
   TYPOGRAPHY
   ============================================= */
.headline-xl{font-size:clamp(2.5rem,5.5vw,4.5rem);font-weight:300;line-height:1.05;letter-spacing:-0.03em}
.headline-lg{font-size:clamp(2rem,4vw,3.2rem);font-weight:400;line-height:1.1;letter-spacing:-0.02em}
.body-lg{font-size:1.125rem;font-weight:400;line-height:1.6;color:var(--text-secondary)}
.body-sm{font-size:0.875rem;line-height:1.5}
.label-sm{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em}

/* =============================================
   BUTTONS
   ============================================= */
.btn{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.875rem;font-weight:600;padding:0.75rem 1.25rem;
  border-radius:1.5rem;transition:background 0.3s,border-color 0.3s,color 0.3s,backdrop-filter 0.3s;
  cursor:pointer;
}
.btn--primary{
  background:var(--black);color:#fff;border:1px solid transparent;
  transition:all 0.3s ease;
}
.btn--primary:hover{
  color:#111 !important;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,0.5);
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
}
.btn--primary-light{
  background:var(--black);color:#fff;border:1px solid transparent;
  transition:all 0.3s ease;
}
.btn--primary-light:hover{
  color:#111 !important;
  background:rgba(0,0,0,0.05);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-color:rgba(0,0,0,0.12);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.btn--outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.4)}
.btn--outline:hover{background:rgba(255,255,255,0.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,0.5)}
.btn--ghost{background:transparent;color:var(--black);border:1px solid var(--grey)}
.btn--ghost:hover{background:rgba(0,0,0,0.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--black)}

/* =============================================
   NAV
   ============================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:0.875rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
  max-width:80rem;margin:0 auto;
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.nav.nav--hidden{transform:translateY(calc(-100% - 1rem))}
.nav__pill{
  display:flex;align-items:center;gap:0.25rem;
  padding:0.375rem 0.5rem;
  border-radius:100px;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.1);
  transition:background 0.35s,border-color 0.35s,backdrop-filter 0.35s;
}
.nav--solid .nav__pill{
  background:rgba(255,255,255,0.95);
  border-color:rgba(0,0,0,0.06);
}
.nav__logo{display:flex;align-items:center;padding:0 0.5rem}
.nav__logo img{height:1.125rem;transition:filter 0.3s,opacity 0.3s}
.nav__logo .logo-light{position:absolute}
.nav__logo .logo-dark{opacity:0}
.nav--solid .nav__logo .logo-light{opacity:0}
.nav--solid .nav__logo .logo-dark{opacity:1;position:relative}
.nav__link{
  font-size:0.8125rem;font-weight:500;
  padding:0.5rem 0.875rem;border-radius:100px;
  color:rgba(255,255,255,0.85);white-space:nowrap;
  display:flex;align-items:center;gap:0.25rem;
  transition:color 0.2s,background 0.2s;
}
.nav__link:hover{color:#fff;background:rgba(255,255,255,0.1)}
.nav--solid .nav__link{color:var(--text-secondary)}
.nav--solid .nav__link:hover{color:var(--black);background:rgba(0,0,0,0.04)}
.nav__link svg{width:10px;height:10px;opacity:0.6}
.nav__login{
  font-size:0.8125rem;font-weight:500;
  padding:0.5rem 1rem;border-radius:100px;
  color:rgba(255,255,255,0.85);white-space:nowrap;
  border:1px solid rgba(255,255,255,0.3);
  transition:color 0.2s,border-color 0.2s,background 0.2s;
}
.nav__login:hover{color:#fff;border-color:rgba(255,255,255,0.5)}
.nav--solid .nav__login{color:var(--black);border-color:rgba(0,0,0,0.15)}
.nav--solid .nav__login:hover{border-color:var(--black)}
a.nav__cta{
  font-size:0.8125rem;font-weight:600;
  padding:0.5rem 1.125rem;border-radius:100px;
  white-space:nowrap;text-decoration:none;
  color:#fff;background:#111110;
  border:1px solid transparent;
  transition:all 0.3s ease;
}
a.nav__cta:hover{
  color:#111 !important;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,0.5);
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
}
.nav--solid a.nav__cta{
  color:var(--black);
  background:rgba(0,0,0,0.04);
  border:1px solid rgba(0,0,0,0.1);
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.nav--solid a.nav__cta:hover{
  color:var(--black);
  background:rgba(0,0,0,0.08);
  border-color:rgba(0,0,0,0.18);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.nav__divider{
  width:1px;height:1rem;
  background:rgba(255,255,255,0.15);margin:0 0.125rem;
}
.nav--solid .nav__divider{background:rgba(0,0,0,0.08)}
.nav__dropdown{position:relative}
.nav__dropdown>.nav__link{cursor:pointer}
.nav__dropdown>.nav__link svg{transition:transform 0.25s}
.nav__dropdown.is-open>.nav__link svg{transform:rotate(180deg)}
.nav__dropdown-panel{
  position:absolute;top:calc(100% + 0.75rem);left:0;
  display:flex;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:0.75rem;
  box-shadow:0 12px 48px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.06);
  opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:opacity 0.25s ease,visibility 0.25s ease,transform 0.25s ease;
  z-index:100;min-width:36rem;overflow:hidden;
}
.nav__dropdown.is-open .nav__dropdown-panel{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav__dropdown-left{
  flex:1;padding:1.5rem;
  display:flex;flex-direction:column;gap:0.25rem;
}
.nav__dropdown-item{
  display:block;padding:0.75rem 1rem;border-radius:0.5rem;
  transition:background 0.15s;
}
.nav__dropdown-item:hover{background:rgba(0,0,0,0.03)}
.nav__dropdown-item-title{
  font-size:0.875rem;font-weight:600;color:var(--black);
  margin-bottom:0.125rem;
}
.nav__dropdown-item-desc{
  font-size:0.8125rem;color:var(--text-secondary);line-height:1.4;
}
.nav__dropdown-right{
  width:16rem;background:var(--black);
  padding:1.5rem;
  display:flex;flex-direction:column;gap:0.125rem;
  border-radius:0 0.75rem 0.75rem 0;
}
.nav__dropdown-featured-label{
  font-size:0.6875rem;font-weight:600;text-transform:uppercase;
  letter-spacing:0.06em;color:rgba(255,255,255,0.4);
  padding:0.5rem 0.75rem;margin-bottom:0.25rem;
  display:flex;align-items:center;gap:0.5rem;
}
.nav__dropdown-featured-label::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,0.5);
}
.nav__dropdown-featured-link{
  display:block;font-size:0.9375rem;font-weight:500;
  color:rgba(255,255,255,0.75);padding:0.625rem 0.75rem;
  border-radius:0.375rem;transition:color 0.15s,background 0.15s;
}
.nav__dropdown-featured-link:hover{
  color:#fff;background:rgba(255,255,255,0.08);
}
.nav-blur-overlay{
  position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,0.1);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 0.35s ease,visibility 0.35s ease;
}
.nav-blur-overlay.is-active{opacity:1;visibility:visible}

@media(max-width:768px){
  .nav{padding:0.75rem 1rem}
  .nav__pill--left .nav__link{display:none}
  .nav__pill--left .nav__dropdown{display:none}
  .nav__pill--right .nav__link{display:none}
  .nav__pill--right .nav__divider{display:none}
  .nav__login{display:none}
}

/* =============================================
   DEMO PAGE (auth-style layout)
   ============================================= */
/* Video background */
.demo-video-bg{
  position:fixed;inset:0;z-index:0;
  overflow:hidden;
}
.demo-video-bg video{
  width:100%;height:100%;object-fit:cover;
  filter:blur(4px);
  transform:scale(1.02);/* prevents blur white edges */
}
.demo-video-bg::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,0.55);
}

.auth-page{
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:7rem 1.5rem 3rem;
  position:relative;z-index:1;
}
.auth-header{
  text-align:center;
  margin-bottom:2rem;
}
.auth-header h1{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:clamp(1.75rem,3.5vw,2.25rem);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:#fff;
  margin-bottom:0.5rem;
}
.auth-header p{
  font-size:0.9375rem;
  color:rgba(255,255,255,0.55);
  line-height:1.5;
}
.auth-card{
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:1rem;
  padding:3rem;
  width:100%;
  max-width:32rem;
  box-shadow:0 8px 40px rgba(0,0,0,0.2);
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.75rem;
}
@media(max-width:480px){
  .form-row{grid-template-columns:1fr}
}
.form-group{
  margin-bottom:1.25rem;
}
.form-group label{
  display:block;
  font-size:0.8125rem;
  font-weight:500;
  color:rgba(255,255,255,0.7);
  margin-bottom:0.375rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea{
  width:100%;
  padding:0.75rem 1rem;
  border:1px solid rgba(255,255,255,0.15);
  border-radius:0.5rem;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:0.9375rem;
  color:#fff;
  background:rgba(255,255,255,0.06);
  outline:none;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:rgba(255,255,255,0.4);
  box-shadow:0 0 0 3px rgba(255,255,255,0.06);
}
.form-group input::placeholder,
.form-group textarea::placeholder{
  color:rgba(255,255,255,0.3);
}
.form-group select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
  cursor:pointer;
}
.form-group select option{
  background:var(--black);color:#fff;
}
.form-group select:invalid{
  color:rgba(255,255,255,0.3);
}
.form-group textarea{
  resize:vertical;
  min-height:auto;
}
.btn-submit{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  font-size:0.9375rem;
  font-weight:600;
  padding:0.875rem 1.5rem;
  border-radius:1.5rem;
  background:#fff;
  color:var(--black);
  border:1px solid transparent;
  cursor:pointer;
  transition:all 0.3s ease;
}
.btn-submit:hover{
  background:rgba(255,255,255,0.85);
  box-shadow:0 2px 12px rgba(0,0,0,0.15);
}
.btn-submit:disabled{
  opacity:0.6;
  cursor:not-allowed;
}
.btn-submit:disabled:hover{
  background:#fff;
  color:var(--black);
  box-shadow:none;
}
.form-hint{
  text-align:center;
  margin-top:0.75rem;
  font-size:0.8125rem;
  color:rgba(255,255,255,0.4);
  line-height:1.5;
}
.auth-email{
  text-align:center;
  margin-top:1.25rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:0.8125rem;
  color:rgba(255,255,255,0.4);
}
.auth-email a{
  color:rgba(255,255,255,0.7);
  font-weight:500;
  border-bottom:1px solid rgba(255,255,255,0.2);
  padding-bottom:0.125rem;
  transition:color 0.2s,border-color 0.2s;
}
.auth-email a:hover{
  color:#fff;
  border-color:#fff;
}
.auth-wordmark{
  margin-top:3rem;
  text-align:center;
}
.auth-wordmark a{
  display:inline-block;
  opacity:0.15;
  transition:opacity 0.2s;
}
.auth-wordmark a:hover{
  opacity:0.3;
}
.auth-wordmark svg{
  height:1.25rem;
  width:auto;
}

@media(max-width:480px){
  .auth-card{
    padding:2rem 1.5rem;
    border-radius:0.75rem;
  }
  .auth-page{
    padding:6rem 1rem 2rem;
  }
}