.iq-page { background: #061427; }
.header-back { justify-self: end; color: var(--cyan); font-size: 24px; text-decoration: none; }
.iq-breadcrumbs { max-width: 1440px; margin: auto; padding: 22px 5vw 0; display: flex; justify-content: flex-start; gap: 9px; color: var(--steel); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.iq-breadcrumbs a { padding: 0; color: var(--white); }
.iq-breadcrumbs a::after { display: none; }
.iq-hero { max-width: 1440px; min-height: 610px; margin: auto; padding: 68px 5vw 86px; display: grid; grid-template-columns: 1fr .92fr; gap: 7vw; align-items: center; position: relative; }
.iq-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), rgba(33,212,253,.09) 12.5%); }
.iq-hero > * { position: relative; }
.iq-hero h1 { margin: 0; font: 900 clamp(58px, 6.8vw, 105px)/.8 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.iq-hero h1 em { color: var(--red); font-style: normal; }
.iq-hero__copy > p:last-of-type { max-width: 690px; margin: 34px 0; color: #c9d4e0; font-size: 17px; line-height: 1.65; }
.promise-list { margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.promise-list li { padding: 10px 13px; border: 1px solid var(--rule); color: var(--steel); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.promise-list b { color: var(--red); margin-right: 7px; }

.command-card { padding: 28px; background: var(--blue); border: 1px solid rgba(33,212,253,.35); box-shadow: 18px 18px 0 rgba(224,68,74,.1); }
.command-card__top { margin-bottom: 30px; display: flex; justify-content: space-between; gap: 15px; color: var(--cyan); font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.command-card__top i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 12px var(--cyan); }
.command-card__top strong { color: var(--steel); }
.command-card > label { display: block; margin-bottom: 8px; color: var(--steel); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.command-card textarea { width: 100%; min-height: 120px; padding: 16px; resize: vertical; border: 1px solid var(--rule); background: var(--navy); color: var(--white); font-size: 17px; line-height: 1.45; }
.command-card textarea:focus { border-color: var(--cyan); outline: 0; }
.command-options { margin-top: 14px; display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.command-options fieldset { margin: 0; padding: 0; border: 0; }
.command-options legend { margin-bottom: 7px; color: var(--steel); font-size: 9px; text-transform: uppercase; }
.command-options fieldset button { min-height: 44px; padding: 0 12px; border: 1px solid var(--rule); background: transparent; color: var(--steel); cursor: pointer; }
.command-options fieldset button.selected { background: var(--white); color: var(--navy); font-weight: 900; }
.ask-button { min-width: 150px; min-height: 48px; padding: 0 18px; border: 0; background: var(--red); color: white; font: 900 12px var(--display); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.ask-button span { margin-left: 12px; font-size: 18px; }
.ask-button:disabled { cursor: not-allowed; opacity: .45; }
.question-shortcuts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.question-shortcuts button { min-height: 44px; padding: 7px 10px; border: 1px solid var(--rule); background: transparent; color: var(--white); font-size: 9px; cursor: pointer; }
.question-shortcuts button:hover { border-color: var(--cyan); color: var(--cyan); }

.answer-workspace { padding: 90px 5vw; background: var(--white); color: var(--navy); }
.answer-header { max-width: 1440px; margin: 0 auto 30px; display: flex; justify-content: space-between; gap: 30px; align-items: end; }
.answer-header h2 { margin: 0; font: 900 clamp(38px, 4.6vw, 66px)/.92 var(--display); text-transform: uppercase; }
.answer-badges { display: flex; gap: 7px; }
.answer-badges span { padding: 8px 10px; background: var(--navy); color: var(--white); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.answer-badges span:first-child { background: var(--red); }
.answer-layout { max-width: 1440px; margin: auto; display: grid; grid-template-columns: 1.35fr .65fr; border: 1px solid #d6dde6; }
.answer-main { position: relative; min-height: 440px; padding: clamp(32px, 5vw, 70px); overflow: hidden; background: white; }
.answer-main__mark { position: absolute; right: -12px; bottom: -55px; color: #f0f3f6; font: 900 250px/.8 var(--display); pointer-events: none; }
.answer-short { position: relative; max-width: 840px; margin: 0; color: var(--navy); font: 900 clamp(27px, 3.2vw, 47px)/1.06 var(--display); text-transform: uppercase; }
.answer-explanation { position: relative; max-width: 800px; margin: 28px 0; color: #53647a; font-size: 16px; line-height: 1.7; }
.answer-scope { position: relative; margin: 42px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.answer-scope div { min-width: 145px; padding: 13px; background: #f0f3f6; border-left: 2px solid var(--red); }
.answer-scope dt { color: #738197; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.answer-scope dd { margin: 4px 0 0; font: 900 12px var(--display); text-transform: uppercase; }
.trace-panel { background: var(--navy); color: var(--white); }
.trace-panel section { padding: 28px; border-bottom: 1px solid var(--rule); }
.trace-panel h3, .why-panel h3 { margin: 0 0 16px; color: var(--cyan); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.evidence-list { display: grid; gap: 9px; }
.evidence-list > p { color: var(--steel); font-size: 12px; }
.evidence-item { display: block; padding: 14px; border: 1px solid var(--rule); color: var(--white); text-decoration: none; }
.evidence-item:hover { border-color: var(--cyan); }
.evidence-item strong { display: block; font: 900 15px var(--display); text-transform: uppercase; }
.evidence-item span { display: block; margin-top: 6px; color: var(--steel); font-size: 9px; }
.evidence-item.primary { border-left: 3px solid var(--red); }
.trace-panel ul { margin: 0; padding-left: 18px; color: #c5cfdb; }
.trace-panel li { margin: 9px 0; font-size: 12px; line-height: 1.5; }
.why-panel { max-width: 1440px; margin: 20px auto 0; border: 1px solid #d6dde6; background: white; }
.why-panel summary { min-height: 54px; padding: 18px 22px; cursor: pointer; font: 900 11px var(--display); text-transform: uppercase; letter-spacing: .1em; }
.why-panel > div { padding: 24px; display: grid; grid-template-columns: .6fr 1fr 1.4fr; gap: 30px; border-top: 1px solid #d6dde6; }
.why-panel h3 { color: var(--red); }
.why-panel p, .why-panel li { color: #53647a; font-size: 12px; line-height: 1.5; }
.token-list { display: flex; flex-wrap: wrap; gap: 6px; }
.token-list span { padding: 6px 8px; background: var(--navy); color: var(--cyan); font: 700 10px ui-monospace, monospace; }
.why-panel ol { margin: 0; padding-left: 18px; }

.guardrail-section { padding: 100px 5vw; background: var(--blue); }
.guardrail-section > div { max-width: 1440px; margin-left: auto; margin-right: auto; }
.guardrail-section h2 { max-width: 850px; margin: 0; font: 900 clamp(45px, 5.5vw, 78px)/.91 var(--display); text-transform: uppercase; }
.guardrail-grid { margin-top: 46px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.guardrail-grid article { min-height: 235px; padding: 27px; background: var(--navy); }
.guardrail-grid b { color: var(--red); font: 900 28px var(--display); }
.guardrail-grid h3 { margin: 38px 0 10px; font: 900 21px var(--display); text-transform: uppercase; }
.guardrail-grid p { margin: 0; color: var(--steel); font-size: 13px; line-height: 1.55; }

@media (max-width: 980px) {
  .iq-hero, .answer-layout { grid-template-columns: 1fr; }
  .guardrail-grid { grid-template-columns: repeat(2, 1fr); }
  .why-panel > div { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .iq-hero, .answer-workspace, .guardrail-section { padding-left: 18px; padding-right: 18px; }
  .iq-hero h1 { font-size: 56px; }
  .command-card { padding: 20px; box-shadow: 8px 8px 0 rgba(224,68,74,.1); }
  .command-options { align-items: stretch; flex-direction: column; }
  .ask-button { width: 100%; }
  .answer-header { align-items: flex-start; flex-direction: column; }
  .answer-main { padding: 30px 22px; }
  .guardrail-grid { grid-template-columns: 1fr; }
  .answer-scope { flex-direction: column; }
  .answer-scope div { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bar-track i { transition: none; } }