:root{
  --bg:#0e0e0f;
  --panel:#151617;
  --glass:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.08);
  --muted:#a8acb3;
  --text:#f1f3f5;
  --brand:#ff8a32;
  --brand-2:#ffb36e;
  --ok:#18cf86;
  --chip:#262728;
  --chip-stroke:#404245;
  --radius:18px;
  --radius-lg:22px;
  --shadow:0 8px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body.bg-app{
  margin:0;
  background: radial-gradient(1200px 600px at 10% -10%, #1b1410 0%, #0f0f10 45%), var(--bg);
  color:var(--text);
  font:14px/1.45 ui-sans-serif, system-ui, -apple-system, "SF Pro", Inter, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
}

.container{
  width:min(1200px, 92vw);
  margin:32px auto 120px;
}

/* NAV – same vibe as your landing */
.page-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(to right, rgba(255,138,50,.05), transparent 30%) ;
  border-bottom:1px solid var(--stroke);
}
.page-header__inner{
  width:min(1200px, 92vw);
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px}
.brand__logo{height:26px; width:auto}
.brand__name{font-weight:600; opacity:.9}

.top-nav{display:flex; align-items:center; gap:10px}
.chip{
  padding:10px 16px; border-radius:999px;
  background:var(--chip);
  border:1px solid var(--chip-stroke);
  color:var(--text); text-decoration:none;
  transition:.18s ease;
}
.chip:hover{border-color:var(--brand); box-shadow:0 0 0 2px rgba(255,138,50,.15) inset}

/* GLASS PANELS */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

/* INTRO + FORM */
.intro{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:24px;
  padding:28px;
}
.intro h1{
  font-size:42px; letter-spacing:-.02em; margin:6px 0 10px;
}
.c2{color:var(--brand)}
.eyebrow{color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-size:12px; margin:0}
.lede{font-size:16px; color:#cfd3d8; margin:8px 0 18px}

.channels{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px;
}
.channel{
  display:flex; flex-direction:column; gap:4px;
  padding:14px 14px 12px;
  background:var(--chip);
  border:1px solid var(--chip-stroke);
  border-radius:14px;
  text-decoration:none; color:var(--text);
}
.channel__icon{font-size:18px}
.channel__title{font-weight:600}
.channel__sub{color:var(--muted); font-size:12px}

.contact-form{
  padding:16px;
  background:rgba(10,10,11,.4);
  border:1px solid var(--stroke);
  border-radius:16px;
}
.field-row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.field{display:flex; flex-direction:column; gap:8px; margin:10px 0}
label{font-size:12px; color:#c7cbd2}
input, select, textarea{
  appearance:none;
  border-radius:12px;
  border:1px solid var(--chip-stroke);
  background: #17181a;
  color:var(--text);
  padding:12px 12px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea{resize:vertical}
input:focus, select:focus, textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(255,138,50,.15);
}
.file-wrap{display:flex; align-items:center; gap:10px}
#file{padding:10px 12px}
#clearFile{margin-left:auto}

.char-row{display:flex; align-items:center; justify-content:space-between; margin-top:6px}
.muted{color:var(--muted); font-size:12px}

.actions{display:flex; align-items:center; gap:10px; margin-top:10px}
.btn{
  border-radius:12px; border:1px solid var(--chip-stroke);
  background:var(--chip); color:var(--text);
  padding:12px 14px; cursor:pointer;
}
.btn--brand{
  border-color:rgba(255,138,50,.35);
  background:linear-gradient(180deg, #ff8a32, #ff6a00);
  color:#111; font-weight:700;
}
.btn--brand .btn__icon{margin-right:8px}
.btn--ghost{background:transparent}
.btn:hover{filter:brightness(1.02)}
.btn--ghost:hover{border-color:var(--brand)}

.fineprint{color:var(--muted); font-size:12px; margin-top:12px}
.link{color:var(--brand); text-decoration:none; border-bottom:1px dashed rgba(255,138,50,.4)}
.link:hover{text-decoration:underline}

/* SOCIAL + FAQ */
.faq-social{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:18px;
  margin-top:22px;
}
.panel{padding:18px}
.panel__title{margin:0 0 10px; font-size:18px}
.faq .faq__item{
  border:1px solid var(--stroke); border-radius:14px;
  background:rgba(255,255,255,.02);
  margin:10px 0; overflow:hidden;
}
.faq summary{
  cursor:pointer; padding:14px 16px; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{border-bottom:1px solid var(--stroke)}
.faq p{padding:12px 16px; margin:0; color:#cfd3d8}

.social__list{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:6px 0 10px;
}
.badge{
  display:inline-flex; align-items:center;
  padding:10px 14px; border-radius:999px;
  background:var(--chip);
  border:1px solid var(--chip-stroke);
  text-decoration:none; color:var(--text); font-weight:600;
}
.badge:hover{border-color:var(--brand)}

.prose{color:#cfd3d8}
.prose a.link{color:var(--brand); text-decoration:none; border-bottom:1px dashed rgba(255,138,50,.4)}
.prose a.link:hover{text-decoration:underline}

/* HONEYPOT truly hidden */
.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;
}

/* Autofill reset – avoids bright/white boxes */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0px 1000px #17181a inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* Responsive */
@media (max-width: 980px){
  .intro{grid-template-columns:1fr; gap:16px}
  .channels{grid-template-columns: 1fr}
  .field-row{grid-template-columns:1fr}
  .faq-social{grid-template-columns:1fr; gap:16px}
}

/* ====== Launch-style navbar for contact page ====== */
/* Uses the same tokens/classes as the landing screen. If your page
   already defines some of these CSS variables, this will reuse them. */
:root{
  --bg: #0b0b0b;
  --txt:#f6f6f6;
  --muted:#c7c7c7;
  --orange:#ff7a18;
  --orange-strong:#ff8c32;
  --glass-stroke: rgba(255,255,255,0.18);
}

body { background: var(--bg); color: var(--txt); }

.container{ width:min(1200px, 92vw); margin-inline:auto; }

/* Header layout */
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 0;              /* matches launch spacing */
}

/* Brand/logo */
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--txt); font-weight:800; }
.logo{ height:100px; width:auto; display:block; } /* same logo scale as launch */

/* Right side group */
.header-right{ display:flex; align-items:center; gap:12px; }

/* Primary nav (pill links) */
.nav{ display:flex; gap:1rem; align-items:center; }
.nav a{
  color:var(--txt); text-decoration:none; opacity:.9;
  padding:.6rem .9rem; border-radius:10px; transition:all .25s ease;
}
.nav a:hover{ background: rgba(255,122,24,0.12); opacity:1; }

/* Generic button pill (used for “Join Beta”) */
.btn{
  display:inline-block; text-decoration:none; color:var(--txt);
  padding:.9rem 1.2rem; border-radius:14px;
  border:1px solid var(--glass-stroke);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255,122,24,0.25), 0 10px 30px rgba(0,0,0,0.45); }
.btn.ghost{ background:transparent; border-color:transparent; }

/* Login button with glass bubble */
.login-btn{
  display:flex; align-items:center; gap:0; text-decoration:none; color:var(--txt);
  font-weight:600; font-size:.95rem; padding:.3rem .6rem; border-radius:50px;
  background:transparent; border:none; cursor:pointer; position:relative;
}
.icon-wrap{
  position:relative; width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px); display:grid; place-items:center; z-index:2;
}
.profile-icon{ font-size:1.2rem; line-height:1; }
.alert{ position:absolute; top:-2px; right:-2px; width:14px; height:14px; background:var(--bg); border-radius:50%; }
.alert::after{ content:""; width:8px; height:8px; background:#ff3b30; border-radius:50%; display:block; margin:3px auto; }

/* Slide-out “Login” bubble (glass) */
.login-bubble{
  position:relative; margin-left:-10px; max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  padding:.5rem 1rem .5rem 1.1rem; border-radius:0 999px 999px 0; border:1px solid rgba(255,122,24,0.45); border-left:none;
  color:var(--txt);
  background:
    linear-gradient(135deg, rgba(255,122,24,0.18), rgba(255,122,24,0.08)),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(255,122,24,0.25), inset 0 0 24px rgba(255,122,24,0.12);
  transition: max-width .35s ease, opacity .35s ease, transform .35s ease;
  transform: translateX(-6px) scale(.98);
}
.login-bubble::before{
  content:""; position:absolute; left:-18px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background: linear-gradient(135deg, rgba(255,122,24,0.18), rgba(255,122,24,0.08)), linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border:1px solid rgba(255,122,24,0.45); backdrop-filter:blur(10px);
  box-shadow: 0 8px 20px rgba(255,122,24,0.22), inset 0 0 18px rgba(255,122,24,0.10);
  z-index:1;
}
.login-btn:hover .login-bubble{ max-width:140px; opacity:1; transform: translateX(0) scale(1); }

/* Mobile: hide non-CTA links like on launch */
@media (max-width: 640px){
  .nav a:not(.btn){ display:none; }
}

/* 🔧 Tighten space directly under the navbar on the contact page */

/* 1) Reduce header vertical padding + gap below it */
header.header {
  padding-block: 14px;        /* was larger */
  margin-bottom: 8px;         /* small buffer so it doesn't touch */
}

/* 2) Make sure the first block under the header doesn't add extra margin */
main.contact-main > *:first-child,
.contact-page main > *:first-child,
.header + .container,
.header + .section,
.header + .contact-hero {
  margin-top: 0 !important;
  padding-top: 8px;           /* optional: tiny breathing room */
}

/* 3) Safety: no default body margin creating phantom space */
body { margin: 0; }

/* 4) If you use anchor scrolling offsets elsewhere, this doesn't affect layout */
section { scroll-margin-top: 84px; } /* keep your header height for in-page links */

/* Custom file input wrapper */
.file-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

/* Hide the ugly default input */
.file-upload input[type="file"] {
  display: none;
}

/* Replace with a styled label acting as the button */
.file-upload label {
  background: linear-gradient(145deg, #ff6a00, #ff3c00);
  color: #fff;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 100, 0, 0.3);
}

.file-upload label:hover {
  background: linear-gradient(145deg, #ff8533, #ff4d1a);
  transform: translateY(-2px);
}

/* File name preview */
.file-name {
  color: #ddd;
  font-size: 0.9rem;
  font-style: italic;
}

/* Style the clear button to match */
.file-upload .clear-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.file-upload .clear-btn:hover {
  background: rgba(255, 80, 0, 0.3);
  border-color: #ff6a00;
}

/* Custom file input wrapper */
.file-upload {
  display: flex;
  align-items: center;
  gap: 20px; /* Increase spacing between elements */
  margin-top: 12px;
}

/* File button */
.file-upload label {
  background: linear-gradient(145deg, #ff6a00, #ff3c00);
  color: #fff;
  font-weight: 600;
  padding: 12px 24px; /* More padding for breathing room */
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 100, 0, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px; /* Consistent button size */
  text-align: center;
}

/* File name preview */
.file-name {
  color: #ddd;
  font-size: 1rem;
  font-style: italic;
  flex-grow: 1; /* Takes remaining space */
}

/* Clear button */
.file-upload .clear-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.file-upload .clear-btn:hover {
  background: rgba(255, 80, 0, 0.3);
  border-color: #ff6a00;
}

/* File upload container */
.file-upload {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
  flex-wrap: nowrap; /* 🔥 Prevent wrapping */
}

/* File button */
.file-upload label {
  background: linear-gradient(145deg, #ff6a00, #ff3c00);
  color: #fff;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 100, 0, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  white-space: nowrap; /* Keep text in one line */
}

/* File name preview */
.file-name {
  color: #ddd;
  font-size: 1rem;
  font-style: italic;
  white-space: nowrap; /* 🔥 Prevents breaking to new line */
  overflow: hidden;
  text-overflow: ellipsis; /* Truncate if too long */
  max-width: 250px; /* Adjust so it doesn’t push Clear too far */
}

/* Clear button */
.file-upload .clear-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap; /* Keep button text on one line */
}

.file-upload .clear-btn:hover {
  background: rgba(255, 80, 0, 0.3);
  border-color: #ff6a00;
}