:root{
  --bg:#000000;
  --card:#0a0a0a;
  --card-2:#050505;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --text:#f5f5f7;
  --muted:#c2c6cc;
  --muted-2:#8b9199;
  --accent:#d30720;
  --accent-soft:rgba(211,7,32,.16);
  --shadow:0 16px 44px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:#000;
  color:var(--text);
  font-family:"Manrope",sans-serif;
}
body{min-height:100vh}
.page{
  max-width:980px;
  margin:0 auto;
  padding:18px 14px 56px;
}
.hero{
  text-align:center;
  margin-bottom:20px;
}
.hero h1,.step-head h2{
  margin:0;
  font-family:"Manrope",sans-serif;
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.04em;
}
.hero h1{font-size:clamp(2.05rem,4.8vw,3.4rem)}
.hero-sub{
  margin:14px auto 0;
  max-width:760px;
  font-size:clamp(.98rem,1.8vw,1.16rem);
  line-height:1.52;
  color:#dde0e5;
}
.hero-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:18px auto 0;
}
.badge{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}
.badge-check{
  width:22px;height:22px;border-radius:999px;
  display:grid;place-items:center;
  background:var(--accent-soft);
  border:1px solid rgba(211,7,32,.55);
  color:#ff4159;
  font-weight:800;
  font-size:.84rem;
}
.quote-app{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.step-card,.total-bar{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:22px 16px;
  box-shadow:var(--shadow);
}
.step-head{
  text-align:center;
  margin-bottom:14px;
}
.step-head h2{font-size:clamp(1.75rem,4vw,2.35rem)}
.step-head p{
  margin:10px auto 0;
  max-width:700px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.5;
}
.project-grid,.size-presets,.system-grid,.addon-grid{
  display:grid;
  gap:12px;
}
.project-grid,.system-grid{grid-template-columns:repeat(3,1fr)}
.size-presets{grid-template-columns:repeat(3,1fr)}
.addon-grid{grid-template-columns:1fr 1fr}
.project-card,.size-card,.system-card,.addon-card{
  position:relative;
  background:#050505;
  border:2px solid var(--line);
  border-radius:16px;
  transition:.18s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.project-card:hover,.size-card:hover,.system-card:hover,.addon-card:hover{
  transform:translateY(-1px);
  border-color:var(--line-2);
}
.project-card.selected,.size-card.selected,.system-card.selected,.addon-card.selected{
  background:linear-gradient(180deg, rgba(211,7,32,.18), rgba(211,7,32,.12));
  border-color:var(--accent);
}
.project-card{
  min-height:108px;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
}
.project-inner{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.project-icon{font-size:1.5rem}
.project-title{font-size:1rem;font-weight:700}
.card-tag{
  position:absolute;
  top:10px;right:10px;
  padding:4px 8px;
  background:#f3f3f4;
  color:#111;
  border-radius:6px;
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
}
.selected-check{
  position:absolute;
  top:10px;left:10px;
  width:22px;height:22px;border-radius:999px;
  display:grid;place-items:center;
  background:var(--accent);
  color:#fff;
  font-size:.82rem;
  font-weight:800;
}
.size-card{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:14px 16px;
  text-align:center;
  font-size:1rem;
  font-weight:700;
}
.dimension-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
}
.field label{
  display:block;
  margin-bottom:8px;
  color:#dde0e5;
  font-size:.95rem;
}
.field input{
  width:100%;
  min-height:52px;
  border-radius:14px;
  border:2px solid var(--line);
  background:#050505;
  color:#fff;
  padding:0 14px;
  font-size:1rem;
}
.field input:focus{
  outline:none;
  border-color:rgba(255,255,255,.28);
}
.sqft-box{
  margin-top:18px;
  padding:18px 14px;
  border-radius:16px;
  background:#050505;
  border:2px solid var(--line);
  text-align:center;
}
.sqft-label{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.82rem;
  color:#bcc0c7;
}
.sqft-value{
  margin-top:10px;
  font-family:"Manrope",sans-serif;
  font-size:clamp(1.9rem,4vw,2.8rem);
  font-weight:800;
}
.system-card{
  min-height:168px;
  padding:18px 16px;
  cursor:pointer;
}
.system-title{
  margin:0 0 10px;
  font-family:"Manrope",sans-serif;
  font-size:1.1rem;
  line-height:1.16;
  font-weight:800;
}
.system-desc{
  margin:0;
  color:var(--muted);
  line-height:1.5;
  font-size:.94rem;
}
.system-price{
  margin-top:14px;
  font-weight:800;
}
.compare-toggle{
  width:100%;
  min-height:52px;
  margin-top:14px;
  border-radius:14px;
  border:2px solid var(--line);
  background:#050505;
  color:#ff2944;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  font-size:.96rem;
  font-weight:700;
  cursor:pointer;
}
.compare-panel{
  margin-top:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:#0a0a0a;
}
.hidden{display:none!important}
.compare-table{display:grid;gap:10px}
.compare-row{display:grid;gap:10px}
.compare-label,.compare-cell{
  padding:10px;
  border-radius:12px;
  background:#121316;
  border:1px solid rgba(255,255,255,.08);
}
.compare-label{font-weight:800}
.compare-cell{color:#d6d9df;line-height:1.45;font-size:.92rem}
.addon-card{
  padding:16px 14px;
  cursor:pointer;
}
.addon-title{margin:0;font-size:1rem;font-weight:800}
.addon-price{margin-top:8px;font-weight:800}
.addon-desc{margin:8px 0 0;color:var(--muted);line-height:1.5;font-size:.92rem}
.total-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}
.total-bar-label{
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:800;
  font-size:.95rem;
}
.total-bar-sub{
  margin-top:6px;
  color:var(--muted-2);
  font-size:.9rem;
}
.total-bar-value{
  font-family:"Manrope",sans-serif;
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:800;
  color:#ff1b38;
}
.final-card{text-align:center}
.final-kicker{
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#bcc0c7;
  font-size:.86rem;
  font-weight:700;
}
.final-range{
  margin-top:12px;
  font-family:"Manrope",sans-serif;
  font-size:clamp(2.4rem,6vw,4.2rem);
  font-weight:800;
  line-height:1;
}
.final-copy{
  margin:14px auto 0;
  max-width:700px;
  color:#d6d9df;
  line-height:1.55;
  font-size:.98rem;
}
.selection-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:20px;
}
.summary-pill{
  background:#121316;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px 10px;
}
.summary-pill-label{
  color:#aab0b8;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.summary-pill-value{
  margin-top:6px;
  font-weight:700;
  line-height:1.4;
  font-size:.92rem;
}
.disclaimer{
  margin:18px auto 0;
  max-width:760px;
  color:#979ba4;
  font-size:.86rem;
  line-height:1.55;
}
.cta-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.primary-btn,.secondary-btn{
  min-height:52px;
  padding:0 20px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:.96rem;
  font-weight:800;
}
.primary-btn{
  background:var(--accent);
  color:#fff;
}
.secondary-btn{
  background:transparent;
  color:#fff;
  border:2px solid var(--line);
  cursor:pointer;
}
@media (max-width:900px){
  .project-grid,.system-grid,.selection-summary{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:680px){
  .page{padding:14px 10px 38px}
  .hero{margin-bottom:18px}
  .hero h1{font-size:2.1rem;line-height:1.02}
  .hero-sub{font-size:.98rem;line-height:1.45;margin-top:12px}
  .hero-badges{gap:8px;margin-top:16px}
  .badge{width:100%;justify-content:center;font-size:.9rem;padding:10px 12px}
  .step-card,.total-bar{padding:16px 12px;border-radius:16px}
  .step-head{margin-bottom:12px}
  .step-head h2{font-size:1.7rem;line-height:1.05}
  .step-head p{font-size:.95rem;line-height:1.45;margin-top:10px}
  .project-grid,.size-presets,.system-grid,.addon-grid,.selection-summary,.dimension-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .project-card,.size-card,.system-card,.addon-card{
    min-height:auto;
    border-radius:14px;
  }
  .project-card{padding:14px 12px}
  .project-title{font-size:.98rem}
  .project-icon{font-size:1.35rem}
  .size-card{min-height:62px;padding:12px;font-size:.98rem}
  .field label{font-size:.95rem;margin-bottom:8px}
  .field input{min-height:50px;font-size:1rem;border-radius:12px}
  .sqft-box{margin-top:14px;padding:16px 12px;border-radius:14px}
  .sqft-label{font-size:.76rem}
  .sqft-value{font-size:2rem;margin-top:8px}
  .system-card{padding:14px 12px}
  .system-title{font-size:1rem;line-height:1.15;margin-bottom:8px}
  .system-desc{font-size:.9rem;line-height:1.4}
  .system-price{margin-top:10px;font-size:.95rem}
  .compare-toggle{min-height:50px;font-size:.92rem;padding:0 14px;border-radius:12px;margin-top:12px}
  .compare-panel{padding:10px;border-radius:12px}
  .compare-label,.compare-cell{padding:10px;font-size:.88rem;line-height:1.35}
  .addon-card{padding:14px 12px}
  .addon-title{font-size:.98rem}
  .addon-price{font-size:.92rem;margin-top:6px}
  .addon-desc{font-size:.88rem;line-height:1.4}
  .total-bar{flex-direction:column;align-items:flex-start;gap:10px}
  .total-bar-label{font-size:.88rem}
  .total-bar-sub{font-size:.84rem;margin-top:4px}
  .total-bar-value{font-size:2.2rem}
  .final-kicker{font-size:.78rem}
  .final-range{font-size:2.4rem;margin-top:10px}
  .final-copy{font-size:.94rem;line-height:1.45;margin-top:10px}
  .summary-pill{padding:12px 10px;border-radius:12px}
  .summary-pill-label{font-size:.72rem}
  .summary-pill-value{font-size:.92rem;line-height:1.35}
  .disclaimer{font-size:.82rem;line-height:1.45;margin-top:16px}
  .cta-row{flex-direction:column;gap:10px;margin-top:18px}
  .primary-btn,.secondary-btn{width:100%;min-height:50px;font-size:.95rem;border-radius:12px}
  .card-tag{font-size:.62rem;padding:3px 6px;top:8px;right:8px}
  .selected-check{width:20px;height:20px;top:8px;left:8px;font-size:.75rem}
}


.selection-wrap{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.change-btn{
  align-self:center;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:transparent;
  color:#d7dbe1;
  font:inherit;
  font-size:.92rem;
  font-weight:700;
  cursor:pointer;
}
.change-btn:hover{
  border-color:rgba(255,255,255,.28);
  color:#fff;
}
.project-grid.collapsed,
.size-presets.collapsed,
.system-grid.collapsed{
  grid-template-columns:1fr !important;
}
.project-grid.collapsed .project-card:not(.selected),
.size-presets.collapsed .size-card:not(.selected),
.system-grid.collapsed .system-card:not(.selected){
  display:none !important;
}
.project-grid.collapsed .project-card.selected,
.size-presets.collapsed .size-card.selected,
.system-grid.collapsed .system-card.selected{
  max-width:100%;
}
@media (max-width:680px){
  .change-btn{
    width:100%;
    min-height:42px;
    font-size:.9rem;
  }
}


.compare-panel{
  margin-top:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:#060606;
}
.compare-table{
  display:grid;
  gap:8px;
}
.compare-row{
  display:grid;
  gap:8px;
  align-items:stretch;
}
.compare-label,
.compare-cell{
  min-height:48px;
  padding:10px 12px;
  border-radius:12px;
  background:#0d0d0f;
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}
.compare-label{
  justify-content:flex-start;
  color:#f3f4f6;
  font-size:.88rem;
  font-weight:700;
  line-height:1.2;
}
.compare-label-head{
  color:#a7adb6;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.72rem;
  font-weight:800;
}
.compare-system-head{
  color:#ffffff;
  font-size:.78rem;
  font-weight:800;
  line-height:1.15;
  text-align:center;
}
.compare-value-cell{
  background:#09090b;
}
.compare-check{
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(211,7,32,.14);
  border:1px solid rgba(211,7,32,.5);
  color:#ff4159;
  font-size:.84rem;
  font-weight:800;
}
.compare-empty{
  width:22px;
  height:22px;
  display:block;
}

@media (max-width:680px){
  .compare-toggle{
    min-height:46px;
    font-size:.88rem;
    padding:0 12px;
  }
  .compare-panel{
    padding:8px;
    border-radius:12px;
  }
  .compare-table{
    gap:6px;
  }
  .compare-row{
    gap:6px;
  }
  .compare-label,
  .compare-cell{
    min-height:40px;
    padding:8px 8px;
    border-radius:10px;
  }
  .compare-label{
    font-size:.76rem;
    line-height:1.15;
  }
  .compare-label-head{
    font-size:.62rem;
  }
  .compare-system-head{
    font-size:.66rem;
    line-height:1.05;
  }
  .compare-check{
    width:18px;
    height:18px;
    font-size:.72rem;
  }
  .compare-empty{
    width:18px;
    height:18px;
  }
}


.field textarea{
  width:100%;
  min-height:110px;
  border-radius:14px;
  border:2px solid var(--line);
  background:#050505;
  color:#fff;
  padding:14px;
  font:inherit;
  font-size:1rem;
  resize:vertical;
  margin-top:16px;
}
.field textarea:focus{
  outline:none;
  border-color:rgba(255,255,255,.28);
}
.custom-notes.hidden{display:none !important;}
@media (max-width:680px){
  .field textarea{
    min-height:96px;
    font-size:.96rem;
    border-radius:12px;
    padding:12px;
    margin-top:12px;
  }
  .compare-system-head{
    font-size:.6rem !important;
    letter-spacing:-.01em;
  }
  .compare-label{
    font-size:.72rem !important;
  }
}


/* V11 compact add-ons */
.addon-grid{
  grid-template-columns:1fr;
  gap:10px;
}
.addon-card{
  padding:12px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.addon-top-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.addon-title-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.info-trigger{
  width:20px;
  height:20px;
  min-width:20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:#111214;
  color:#d7dbe1;
  display:grid;
  place-items:center;
  font-size:.72rem;
  font-weight:800;
  cursor:pointer;
}
.info-trigger:hover{
  border-color:rgba(255,255,255,.32);
  color:#fff;
}
.addon-title{
  margin:0;
  font-size:.94rem;
  font-weight:800;
  line-height:1.2;
}
.addon-price{
  margin:0;
  font-size:.88rem;
  white-space:nowrap;
}
.addon-desc{
  display:none;
}
.addon-card.selected{
  box-shadow:0 8px 22px rgba(211,7,32,.12);
}

.info-modal{
  position:fixed;
  inset:0;
  z-index:9999;
}
.info-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
}
.info-modal-card{
  position:relative;
  width:min(92vw, 460px);
  margin:10vh auto 0;
  background:#070708;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:18px 16px 16px;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.info-close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:#111214;
  color:#fff;
  font-size:1.2rem;
  cursor:pointer;
}
.info-modal-title{
  padding-right:42px;
  font-size:1.02rem;
  font-weight:800;
  line-height:1.25;
}
.info-modal-body{
  margin-top:12px;
  color:#d6d9df;
  font-size:.94rem;
  line-height:1.55;
}

@media (max-width:680px){
  .addon-grid{
    gap:8px;
  }
  .addon-card{
    padding:10px 10px;
    border-radius:14px;
  }
  .addon-title{
    font-size:.88rem;
  }
  .addon-price{
    font-size:.82rem;
  }
  .info-trigger{
    width:18px;
    height:18px;
    min-width:18px;
    font-size:.66rem;
  }
  .info-modal-card{
    width:min(94vw, 420px);
    margin:8vh auto 0;
    border-radius:16px;
    padding:16px 14px 14px;
  }
  .info-modal-title{
    font-size:.96rem;
  }
  .info-modal-body{
    font-size:.9rem;
    line-height:1.5;
  }
}


/* V12 scroll polish */
html{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

/* cleaner scrollbars */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.3);
}

.scroll-hint{
  text-align:center;
  font-size:0.8rem;
  color:rgba(255,255,255,0.5);
  margin:2px 0 16px;
  transition:opacity .25s ease, transform .25s ease;
}
.scroll-hint.hidden{
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
}

.scroll-fade{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:60px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0), #000);
  opacity:.9;
  transition:opacity .25s ease;
}
.scroll-fade.hidden{
  opacity:0;
}

@media (max-width:680px){
  .scroll-hint{
    font-size:0.76rem;
    margin:0 0 12px;
  }
  .scroll-fade{
    height:44px;
  }
}

.compare-text{
  color:#f3f4f6;
  font-size:.8rem;
  font-weight:700;
  line-height:1.15;
  text-align:center;
}
@media (max-width:680px){
  .compare-text{
    font-size:.68rem;
  }
}

.system-price{
  color:#b9bec6;
  font-size:.86rem;
  line-height:1.35;
  margin-top:10px;
}


/* V34 header + utility links */
.header-bar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  padding-top:4px;
}
.brand-title{
  text-align:center;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.48);
  font-weight:700;
  white-space:nowrap;
}


.flake-link{
  text-align:center;
  margin-top:14px;
}
.flake-link a{
  color:rgba(255,255,255,.72);
  text-decoration:none;
  font-size:.86rem;
  font-weight:700;
}
.flake-link a:hover{
  color:#fff;
}
.system-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.system-badge.aviation{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#f5f5f7;
}
.system-badge.commercial{
  background:rgba(211,7,32,.12);
  border:1px solid rgba(211,7,32,.35);
  color:#ff5b71;
}
.system-badge.trailer{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#f5f5f7;
}
.system-subcopy{
  margin:8px 0 0;
  color:#aeb4bc;
  font-size:.86rem;
  line-height:1.45;
  font-weight:600;
}
.compare-text{
  color:#f3f4f6;
  font-size:.8rem;
  font-weight:700;
  line-height:1.15;
  text-align:center;
}
.included-label{
  color:#4ade80;
  font-weight:800;
}
@media (max-width:680px){
  .header-bar{
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
  }
  .brand-title{
    grid-column:1 / -1;
    order:-1;
    font-size:.62rem;
    letter-spacing:.18em;
    margin-bottom:2px;
  }
  
  .system-badge{
    min-height:24px;
    padding:0 8px;
    font-size:.64rem;
    margin-bottom:8px;
  }
  .system-subcopy{
    font-size:.8rem;
    line-height:1.38;
  }
  .compare-text{
    font-size:.68rem;
  }
  .compare-system-head{
    font-size:.6rem !important;
    letter-spacing:-.01em;
  }
  .compare-label{
    font-size:.72rem !important;
  }
}




/* V37 compact hamburger header */
.header-bar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  min-height:24px;
}
.brand-title{
  text-align:center;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.48);
  font-weight:700;
  white-space:nowrap;
}
.menu-toggle{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:18px;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.menu-toggle span{
  display:block;
  width:100%;
  height:1.5px;
  background:rgba(255,255,255,0.72);
  border-radius:999px;
}
.menu-dropdown{
  position:absolute;
  top:26px;
  right:0;
  min-width:150px;
  background:#0a0a0a;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  z-index:50;
}
.menu-dropdown a{
  color:rgba(255,255,255,0.78);
  text-decoration:none;
  font-size:.72rem;
  font-weight:600;
  padding:8px 10px;
  border-radius:8px;
}
.menu-dropdown a:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
}
@media (max-width:680px){
  .header-bar{
    margin-bottom:12px;
  }
  .brand-title{
    font-size:.62rem;
    letter-spacing:.18em;
  }
  .menu-toggle{
    width:20px;
    height:16px;
  }
  .menu-dropdown{
    top:24px;
    min-width:140px;
  }
  .menu-dropdown a{
    font-size:.7rem;
    padding:8px 9px;
  }
}