:root{
  --bg:#0b0d14;
  --panel: rgba(255,255,255,.055);
  --panel2: rgba(0,0,0,.35);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.76);
  --line: rgba(255,255,255,.16);
  --line2: rgba(255,255,255,.14);
  --good: #38e3b3;
  --max: 1120px;
  --radius: 16px;
  --radiusBig: 22px;
  --shadow: 0 18px 44px rgba(0,0,0,.38);
  --navH: 74px;
  --accent: rgba(47,123,255,.95);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width: var(--max); margin:0 auto; padding: 0 20px; }

.nav{
  position: sticky;
  top:0;
  z-index: 100;
  height: var(--navH);
  display:flex;
  align-items:center;
  background: rgba(0,0,0,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.navInner{
  width:100%;
  max-width: var(--max);
  margin:0 auto;
  padding: 0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 950;
  letter-spacing: -.02em;
}
.logoDot{
  width:10px;height:10px;border-radius:999px;background: var(--accent);
  box-shadow: 0 0 0 6px rgba(47,123,255,.16);
}
.links{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.links a{ font-size: 13px; opacity:.84; }
.links a:hover{ opacity: 1; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  font-size: 13px;
  line-height:1;
  cursor:pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.btn.primary{
  background: rgba(47,123,255,.92);
  border-color: rgba(47,123,255,.92);
  color: white;
}
.btn.primary:hover{ background: rgba(47,123,255,.98); border-color: rgba(47,123,255,.98); }
.btn.ghost{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}

.hr{ height:1px; background: rgba(255,255,255,.10); margin: 22px 0; }

.sectionTitle{ margin: 28px 0 8px; font-size: 22px; letter-spacing:-.02em; }
.sectionDesc{ margin:0 0 14px; color: var(--muted); font-size: 13px; line-height:1.6; }

.panel{
  border-radius: var(--radiusBig);
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.26);
}
.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media(max-width: 980px){ .grid3{ grid-template-columns: 1fr; } }

.badge{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  font-size: 11px;
  font-weight: 950;
  opacity:.9;
}

.buildGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media(max-width: 980px){ .buildGrid{ grid-template-columns: 1fr; } }
.buildCard{
  border-radius: var(--radiusBig);
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.26);
}
.buildMedia{
  aspect-ratio: 3 / 4;
  background: rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
}

.buildMedia img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition: transform .25s ease;
}

.buildBody{ padding: 14px; }
.buildName{ margin:0 0 6px; font-size: 14px; font-weight: 950; }
.buildMeta{ margin:0; font-size: 12px; color: rgba(255,255,255,.72); line-height:1.45; }

.footer{
  margin: 24px 0 18px;
  padding: 18px 20px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}
.footer a{ opacity:.9; }
.footer a:hover{ opacity:1; }

.pageHead{
  padding: 24px 0 10px;
}
.pageKicker{
  font-size:12px;
  letter-spacing:.14em;
  text-transform: uppercase;
  opacity:.7;
}
.pageTitle{ margin: 6px 0 6px; font-size: clamp(26px, 3vw, 40px); letter-spacing:-.03em; }
.pageLead{ margin:0; color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 78ch; }

.list{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height:1.7;
}
.list li{ margin: 6px 0; }

.qa{ border-radius: var(--radiusBig); border:1px solid var(--line); background: var(--panel); padding: 14px; margin-top: 12px; }
.q{ margin:0 0 6px; font-weight: 950; font-size: 14px; }
.a{ margin:0; color: rgba(255,255,255,.74); font-size: 13px; line-height: 1.7; }

.form{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}
.field{
  display:grid;
  gap: 6px;
}
label{ font-size: 12px; color: rgba(255,255,255,.78); font-weight: 900; }
input, textarea, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  outline:none;
}
textarea{ min-height: 120px; resize: vertical; }
.small{ font-size: 12px; color: rgba(255,255,255,.68); line-height:1.6; }

/* Sticky CTA (mobile-first) */
.stickyCta{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1000;

  display: none;
  gap: 10px;
  padding: 10px;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.stickyCta .btn{
  flex: 1;
  justify-content: center;
  font-size: 13px;
  padding: 12px 14px;
}
@media (max-width: 768px){
  .stickyCta{ display: flex; }
  body{ padding-bottom: 84px; } /* room for sticky bar */
}


/* Build card hover effect */
.buildCard{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover:hover){
  .buildCard:hover{
    transform: translateY(-6px);
    box-shadow: 0 22px 60px rgba(0,0,0,.55);
    border-color: rgba(255,255,255,.22);
  }
  .buildCard:hover .buildMedia img{ transform: scale(1.03); }
}


/* Why we’re different */
.whyGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:980px){.whyGrid{grid-template-columns:1fr;}}
.whyItem{border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);padding:14px;}
.whyTitle{margin:0 0 6px;font-size:13px;font-weight:950;}
.whyDesc{margin:0;font-size:12px;line-height:1.55;color:rgba(255,255,255,.72);}


/* How we decide section */
.decideGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:980px){.decideGrid{grid-template-columns:1fr;}}
.decideItem{border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);padding:14px;}
.decideTitle{margin:0 0 6px;font-size:13px;font-weight:950;}
.decideDesc{margin:0;font-size:12px;line-height:1.55;color:rgba(255,255,255,.72);}
.decideBottom{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:980px){.decideBottom{grid-template-columns:1fr;}}
.stepsGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stepCard{border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);padding:12px;}
.stepNum{font-weight:950;font-size:12px;margin-bottom:6px;}
.stepText{font-size:12px;color:rgba(255,255,255,.72);}


/* What you get */
.getGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:980px){.getGrid{grid-template-columns:1fr;}}


/* FAQ Accordion */
.faqItem{border-radius: var(--radiusBig); border:1px solid var(--line); background: var(--panel); margin-top: 12px; overflow:hidden;}
.faqQuestion{width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:transparent; border:none; color:var(--text); font-size:14px; font-weight:950; cursor:pointer; text-align:left;}
.faqQuestion:hover{background: rgba(255,255,255,.03);}
.faqIcon{font-size:18px; font-weight:900; opacity:.7; transition: transform .2s ease;}
.faqAnswer{max-height:0; overflow:hidden; transition: max-height .25s ease; background: rgba(0,0,0,.18);}
.faqAnswer p{margin:0; padding:14px 16px; font-size:13px; line-height:1.7; color: rgba(255,255,255,.74);}
.faqItem.open .faqAnswer{max-height: 340px;}
.faqItem.open .faqIcon{transform: rotate(45deg);} 


/* Micro polish */
a:focus-visible, button:focus-visible{
  outline: 2px solid rgba(79,124,255,.65);
  outline-offset: 3px;
  border-radius: 12px;
}

.links a{ position:relative; }
@media(hover:hover){
  .links a::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-6px;
    height:1px;
    background: rgba(255,255,255,.18);
    opacity:0;
    transition: opacity .15s ease;
  }
  .links a:hover::after{ opacity:1; }
}

html{ scroll-behavior: smooth; }
:target{ scroll-margin-top: calc(var(--navH) + 16px); }

/* Footer full-width layout */
.footer{ width:100%; }
.footerInner{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
  justify-content: space-between;
  padding: 18px 0;
}
.footerLinks{ display:flex; gap: 12px; flex-wrap:wrap; justify-content:flex-end; }


/* Reviews */
.reviewGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media(max-width:980px){ .reviewGrid{ grid-template-columns: 1fr; } }
.reviewCard{
  border-radius: var(--radiusBig);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  padding: 14px;
}
.reviewTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.reviewName{ font-weight: 950; font-size: 13px; }
.reviewStars{ font-size: 13px; letter-spacing: .08em; opacity:.85; }
.reviewText{ margin:0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.74); }


/* Brand logo */
.brand a{ display:flex; align-items:center; gap:10px; }
.brandLogo{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  object-fit: cover;
}
.brandName{ font-weight: 950; letter-spacing: -.02em; }

/* Jump-to bar */
.jumpBar{
  margin-top: 14px;
  margin-bottom: 8px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 10px 12px;
}
.jumpLabel{
  font-size: 12px;
  font-weight: 950;
  opacity: .75;
  margin-right: 4px;
}
.jumpBar a{
  font-size: 12px;
  font-weight: 900;
  opacity: .82;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.jumpBar a:hover{ opacity: 1; border-color: rgba(255,255,255,.18); }

/* Quiz UI (modern) */
.quizShell{
  border-radius: var(--radiusBig);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 16px;
}
.quizStepper{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  margin: 10px 0 14px;
}
.quizStep{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-size: 12px;
  font-weight: 900;
  opacity:.82;
}
.quizStepNum{
  width: 22px; height: 22px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: 12px;
}
.choiceGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media(max-width:980px){ .choiceGrid{ grid-template-columns: 1fr; } }
.choice{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  padding: 12px;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  user-select:none;
}
@media(hover:hover){
  .choice:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); }
}
.choice input{ display:none; }
.choiceTitle{ font-weight: 950; font-size: 13px; margin:0 0 6px; }
.choiceDesc{ margin:0; font-size: 12px; color: rgba(255,255,255,.72); line-height:1.5; }
.choice.selected{
  border-color: rgba(79,124,255,.65);
  box-shadow: 0 0 0 3px rgba(79,124,255,.12);
}


/* === Launch polish === */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid rgba(79,124,255,.60);
  outline-offset: 3px;
  border-radius: 14px;
}
html{ scroll-behavior:smooth; }
:target{ scroll-margin-top: calc(var(--navH) + 16px); }

/* Full-width footer helper (in case any page still uses container) */
.footer{ width:100%; }
.footerInner{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:18px 0; }
.footerLinks{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }

/* === Quiz v2 (modern) === */
.quizWrap{
  display:grid;
  gap: 12px;
}

.stepper{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
}
.step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.78);
}
.stepDot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.22);
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}
.step.active{ border-color: rgba(79,124,255,.35); background: rgba(79,124,255,.10); color: rgba(255,255,255,.90); }
.step.active .stepDot{ background: rgba(79,124,255,.95); box-shadow: 0 0 0 6px rgba(79,124,255,.16); }

.quizGrid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media(max-width: 980px){ .quizGrid2{ grid-template-columns: 1fr; } }

.choiceGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media(max-width: 980px){ .choiceGrid{ grid-template-columns: 1fr; } }

.choice{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  padding: 12px;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  user-select:none;
}
@media(hover:hover){
  .choice:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.20); background: rgba(255,255,255,.05); }
}
.choice b{ display:block; font-size: 13px; margin-bottom: 6px; }
.choice span{ display:block; font-size: 12px; color: rgba(255,255,255,.72); line-height: 1.5; }

.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice.selected{ border-color: rgba(79,124,255,.45); background: rgba(79,124,255,.10); }
.choice.selected b{ color: rgba(255,255,255,.95); }

.inlineNote{ font-size:12px; color: rgba(255,255,255,.70); line-height:1.6; margin-top: 6px; }

.formCard{
  border-radius: var(--radiusBig);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px;
}


/* Dropdown navigation (corner menu) */
.navInner{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.navActions{ display:flex; align-items:center; gap:10px; }

.dropdown{ position:relative; }
.dropdownBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.90);
}
.dropdownBtn:hover{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.dropdownCaret{ opacity:.7; transform: translateY(-1px); }

.dropdownMenu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 260px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,14,24,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 60px rgba(0,0,0,.50);
  display:none;
  z-index: 999;
}
.dropdownMenu.open{ display:block; }
.dropdownMenu a{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding: 10px 10px;
  border-radius: 12px;
  font-weight: 950;
  font-size: 12px;
  color: rgba(255,255,255,.90);
}
.dropdownMenu a:hover{ background: rgba(255,255,255,.06); }
.dropdownMenu small{ font-size: 11px; opacity:.72; font-weight: 750; }

@media(max-width: 900px){
  .dropdownMenu{ left:0; right:auto; min-width: 270px; }
}



/* Showcase inquire overlay */
.inquireTag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  font-size:12px;
  font-weight:950;
  opacity:.85;
}
.inquireTag:hover{ opacity:1; }
.inquireOverlay{
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: rgba(0,0,0,.35);
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding: 14px;
  opacity:0;
  transition: opacity .22s ease;
}
.inquireOverlay span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(12,14,24,.72);
  font-weight:950;
  font-size:12px;
}
.inquireBuild{ position:relative; }
.inquireBuild:hover .inquireOverlay{ opacity:1; }



/* Brighten + breathe (subtle) */
body{
  background: radial-gradient(1200px 700px at 15% 10%, rgba(79,124,255,.10), transparent 55%),
              radial-gradient(1000px 600px at 85% 30%, rgba(0,255,200,.06), transparent 60%),
              rgba(8,10,16,1);
}
.panel.softPanel{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}
.sectionDesc{ color: rgba(255,255,255,.82); }



/* Build Profiles */
.profilesGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media(max-width:980px){ .profilesGrid{ grid-template-columns: 1fr; } }
.profileCard{
  border-radius: var(--radiusBig);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  padding: 14px;
}
.profileTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.profileMeta{ margin: 10px 0 8px; font-size:12px; line-height:1.6; color: rgba(255,255,255,.80); }
.profilePrice{ margin: 0 0 10px; font-size:12px; opacity:.92; }
.profileSpecs{ display:grid; gap:8px; font-size:12px; line-height:1.6; color: rgba(255,255,255,.76); }

.profilesMiniGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media(max-width:980px){ .profilesMiniGrid{ grid-template-columns: 1fr 1fr; } }
.profilesMiniCard{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.profilesMiniCard a{ font-size:12px; font-weight:950; opacity:.92; }
.profilesMiniCard a:hover{ opacity:1; }

.optionalDetails{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 10px 12px;
  margin-top: 12px;
}
.optionalDetails summary{
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-weight:950;
}
.optionalBody{ margin-top: 10px; display:grid; gap: 12px; }


/* Homepage guidance */
.startHere{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
  align-items:start;
}
@media(max-width:980px){ .startHere{ grid-template-columns:1fr; } }

.startHereGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.startHereCard{
  display:block;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  padding: 14px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.startHereCard b{ display:block; font-size:13px; }
.startHereCard span{ display:block; font-size:12px; opacity:.78; margin-top:6px; line-height:1.5; }
.startHereCard em{ display:block; font-style:normal; margin-top:10px; font-weight:950; font-size:12px; opacity:.9; }
.startHereCard:hover{ transform: translateY(-2px); border-color: rgba(79,124,255,.35); background: rgba(79,124,255,.08); }

.whyFlow{ padding: 0; }
.whyLines{ display:grid; gap:10px; }
.whyLine{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 10px 12px;
}
.whyLine summary{
  cursor:pointer;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  list-style:none;
}
.whyLine summary::-webkit-details-marker{ display:none; }
.whyLine summary b{ font-size:13px; }
.whyLine summary span{ font-size:12px; opacity:.72; }
.whyBody{ margin-top:8px; opacity:.82; line-height:1.6; }


/* Guided quiz (one step at a time) */
.stepScreen{ display:none; }
.stepScreen.active{ display:block; }
.stepQ{ margin: 0 0 8px; }
.stepHint{ margin: 0 0 12px; opacity:.78; }
.stepNav{ display:flex; justify-content:space-between; gap:10px; margin-top:12px; flex-wrap:wrap; }

.quizProgressBar{ height:8px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; border:1px solid rgba(255,255,255,.10); }
.quizProgressFill{ height:100%; background: rgba(79,124,255,.70); transition: width .28s ease; }
.quizProgressMeta{ display:flex; flex-direction:column; gap:4px; margin-top:10px; }
.quizProgressText{ font-weight:950; font-size:12px; opacity:.92; }
.quizProgressSub{ font-size:12px; opacity:.72; }

.stepScreen.enteringRight{ animation: enterR .28s ease both; }
.stepScreen.enteringLeft{ animation: enterL .28s ease both; }
.stepScreen.leavingLeft{ animation: leaveL .28s ease both; }
.stepScreen.leavingRight{ animation: leaveR .28s ease both; }
@keyframes enterR{ from{ opacity:0; transform: translateX(14px);} to{opacity:1; transform: translateX(0);} }
@keyframes enterL{ from{ opacity:0; transform: translateX(-14px);} to{opacity:1; transform: translateX(0);} }
@keyframes leaveL{ from{ opacity:1; transform: translateX(0);} to{opacity:0; transform: translateX(-14px);} }
@keyframes leaveR{ from{ opacity:1; transform: translateX(0);} to{opacity:0; transform: translateX(14px);} }


/* Big-site polish: focus + reveal + compact nav */
:focus-visible{
  outline: 2px solid rgba(79,124,255,.85);
  outline-offset: 3px;
  border-radius: 10px;
}

header.nav.navCompact{
  backdrop-filter: blur(12px);
  background: rgba(8,10,16,.70);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .42s ease, transform .42s ease;
}
.reveal.isVisible{
  opacity: 1;
  transform: translateY(0);
}

#toTop{
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,14,24,.78);
  color: rgba(255,255,255,.90);
  font-weight: 950;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
}
#toTop.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#toTop:hover{ border-color: rgba(79,124,255,.35); background: rgba(79,124,255,.12); }

/* Accessibility: skip link */
.skipLink{
  position:absolute;
  left:-9999px;
  top: 10px;
  padding:10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,14,24,.92);
  color: rgba(255,255,255,.92);
  font-weight: 950;
  z-index: 2000;
}
.skipLink:focus{ left: 12px; }

.socialIcons{display:flex;gap:14px;align-items:center;margin-top:12px}
.socialIcon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;opacity:.85;transition:transform .18s ease,opacity .18s ease}
.socialIcon svg{width:100%;height:100%;fill:rgba(255,255,255,.9)}
.socialIcon:hover{opacity:1;transform:translateY(-2px)}

/* Follow section */
.followBlock{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
  align-items:start;
}
@media(max-width:980px){ .followBlock{ grid-template-columns:1fr; } }

.followLinks{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media(max-width:980px){ .followLinks{ grid-template-columns: 1fr; } }

.followCard{
  display:block;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  padding: 14px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.followCard b{ display:block; font-size:13px; margin-top:10px; }
.followCard span{ display:block; font-size:12px; opacity:.75; margin-top:4px; }
.followCard em{ display:block; font-style:normal; margin-top:10px; font-weight:950; font-size:12px; opacity:.9; }

.followIcon{
  width: 22px;
  height: 22px;
  opacity:.92;
}
.followIcon svg{ width:100%; height:100%; fill: rgba(255,255,255,.9); }

.followCard:hover{
  transform: translateY(-2px);
  border-color: rgba(79,124,255,.35);
  background: rgba(79,124,255,.08);
}

/* Brand-colored social icons */
.socialIcon.instagram svg,
.followCard.instagram .followIcon svg{
  fill: #E1306C;
}
.socialIcon.tiktok svg,
.followCard.tiktok .followIcon svg{
  fill: #69C9D0;
}
.socialIcon.youtube svg,
.followCard.youtube .followIcon svg{
  fill: #FF0000;
}

/* Keep icons subtle until hover */
.socialIcon svg,
.followIcon svg{
  transition: filter .18s ease, transform .18s ease, opacity .18s ease;
  opacity: .85;
}

.socialIcon:hover svg,
.followCard:hover .followIcon svg{
  opacity: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}

/* Mobile landscape comfort */
@media (max-width: 920px) and (orientation: landscape){
  .heroStage{ min-height: 70vh; }
  .startHere{ grid-template-columns: 1fr 1.2fr; }
  .profilesMiniGrid{ grid-template-columns: 1fr 1fr; }
  .choiceGrid{ grid-template-columns: repeat(3, 1fr); }
  .quizGrid2{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 740px) and (orientation: landscape){
  .choiceGrid{ grid-template-columns: 1fr 1fr; }
}