:root {
  --noso-accent: #ff9b54;
  --noso-accent-soft: #ffc18f;
  --noso-dark: #0d120d;
  --noso-panel: #131b16;
  --noso-cream: #f1eee4;
}

.noso-page { background: var(--noso-dark); }
.noso-page .site-header { position: absolute; }
.noso-page .brand-mark { fill: var(--noso-accent); }
.noso-page .nav-cta { border-color: rgba(255, 155, 84, .55); color: var(--noso-accent-soft); }
.noso-page .section-number { color: var(--noso-accent); }

.noso-hero {
  min-height: 830px;
  padding: 180px clamp(24px, 6.5vw, 104px) 90px;
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(430px, 1.02fr);
  gap: clamp(45px, 7vw, 110px);
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 75% 42%, rgba(255, 137, 63, .17), transparent 34%),
    var(--noso-dark);
  background-size: 55px 55px, 55px 55px, auto, auto;
}
.noso-hero-copy { position: relative; z-index: 1; }
.noso-kicker { display: flex; align-items: center; gap: 11px; margin: 0 0 32px; color: var(--noso-accent); font: 10px ui-monospace, monospace; letter-spacing: .17em; }
.noso-kicker span { width: 30px; height: 1px; background: var(--noso-accent); }
.noso-hero h1 { font-size: clamp(62px, 7.4vw, 116px); }
.noso-hero h1 em { color: var(--noso-accent); }
.noso-lede { max-width: 660px; margin: 38px 0 0; color: #aeb8ad; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.7; }
.noso-page .button-primary { background: var(--noso-accent); }
.release-strip { display: flex; flex-wrap: wrap; gap: 13px 28px; margin-top: 40px; color: #7f8d80; font: 9px ui-monospace, monospace; letter-spacing: .13em; }
.release-strip span { display: inline-flex; align-items: center; }
.release-strip i { width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--noso-accent); box-shadow: 0 0 12px rgba(255,155,84,.9); }

.noso-terminal { border: 1px solid rgba(255, 183, 128, .25); background: rgba(6, 10, 7, .93); box-shadow: 0 45px 100px rgba(0,0,0,.38); transform: rotate(1deg); }
.terminal-bar { display: flex; justify-content: space-between; gap: 20px; padding: 16px 19px; border-bottom: 1px solid rgba(255,255,255,.09); color: #748076; font: 9px ui-monospace, monospace; letter-spacing: .15em; }
.terminal-status { color: var(--noso-accent-soft); }
.terminal-status i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--noso-accent); }
.terminal-body { padding: clamp(25px, 4vw, 45px); color: #cbd2ca; font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.terminal-body > p:first-child { margin: 0 0 38px; color: #dce1da; font-size: 13px; }
.terminal-body b { color: var(--noso-accent); }
.terminal-answer { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); }
.terminal-answer span, .terminal-grid span, .terminal-next span { display: block; margin-bottom: 8px; color: #647066; font-size: 9px; letter-spacing: .14em; }
.terminal-answer strong { color: var(--noso-accent-soft); font-weight: 500; }
.terminal-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.terminal-grid div { padding: 18px 0; }
.terminal-grid div + div { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.1); }
.terminal-grid strong { color: #a9e0c7; font-size: 11px; }
.terminal-answer.dim p { margin: 0; color: #879188; }
.terminal-next { margin: 5px 0 0; padding-top: 18px; color: #9ca59c; }

.noso-statement { padding: 120px clamp(24px, 9vw, 145px); display: grid; grid-template-columns: 1fr 3fr; gap: 50px; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); background: #111812; }
.noso-statement > p:last-child { max-width: 1080px; margin: 0; color: #929d92; font: 400 clamp(32px, 4.2vw, 64px)/1.2 Georgia, serif; letter-spacing: -.035em; }
.noso-statement strong { color: var(--noso-cream); font-weight: 400; }

.noso-section { padding: 130px clamp(24px, 7vw, 110px); }
.noso-heading { display: grid; grid-template-columns: .75fr 1.45fr 1fr; gap: 45px; align-items: start; margin-bottom: 75px; }
.noso-heading h2, .install-section h2, .noso-cta h2 { margin: 0; color: var(--noso-cream); font: 400 clamp(48px, 5.5vw, 82px)/.98 Georgia, serif; letter-spacing: -.05em; }
.noso-heading > p:last-child { margin: 8px 0 0; color: #8c988e; line-height: 1.7; }
.workflow-rail { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.13); border-left: 1px solid rgba(255,255,255,.13); }
.workflow-rail article { position: relative; min-height: 330px; padding: 28px; border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
.workflow-rail article::after { content: "→"; position: absolute; top: 27px; right: 26px; color: var(--noso-accent); }
.workflow-rail article:last-child::after { content: "✓"; }
.workflow-rail span { color: var(--noso-accent); font: 10px ui-monospace, monospace; }
.workflow-rail h3 { margin: 130px 0 14px; color: var(--noso-cream); font: 400 29px Georgia, serif; }
.workflow-rail p { margin: 0; color: #7f8b81; line-height: 1.65; }

.noso-principles { background: var(--noso-cream); color: #182019; }
.noso-principles .section-number { color: #a44e16; }
.noso-principles .noso-heading h2 { color: #182019; }
.principle-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.principle-cards article { min-height: 380px; padding: 30px; display: flex; flex-direction: column; background: #182019; color: var(--noso-cream); }
.principle-cards article:nth-child(2) { background: #ca6c2d; color: #17150f; }
.principle-cards span { color: var(--noso-accent); font: 10px ui-monospace, monospace; letter-spacing: .15em; }
.principle-cards article:nth-child(2) span { color: #3a261a; }
.principle-cards h3 { margin: auto 0 18px; font: 400 clamp(28px, 2.6vw, 39px)/1.1 Georgia, serif; }
.principle-cards p { margin: 0; color: #9aa69c; line-height: 1.7; }
.principle-cards article:nth-child(2) p { color: rgba(23,21,15,.72); }

.install-section { padding: 135px clamp(24px, 7vw, 110px); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px, 8vw, 120px); background: #111812; }
.install-intro > p:not(.section-number) { max-width: 560px; margin: 28px 0; color: #8d998f; font-size: 17px; line-height: 1.7; }
.architecture-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 38px; }
.architecture-links a { display: flex; justify-content: space-between; width: min(100%, 360px); padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.13); color: #aeb8af; text-decoration: none; font: 11px ui-monospace, monospace; letter-spacing: .08em; }
.architecture-links a:hover { color: var(--noso-accent); }
.install-panel { align-self: center; border: 1px solid rgba(255,255,255,.14); background: #080d09; }
.install-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,.12); }
.install-tab { padding: 15px 22px; border: 0; border-right: 1px solid rgba(255,255,255,.12); background: transparent; color: #748076; font: 10px ui-monospace, monospace; letter-spacing: .13em; cursor: pointer; }
.install-tab.active { background: rgba(255,155,84,.12); color: var(--noso-accent-soft); }
.code-block { position: relative; padding: 34px 26px; overflow-x: auto; }
.code-block pre { margin: 0; }
.code-block code { color: #b9c4bb; font: 11px/1.9 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.copy-command { position: absolute; top: 13px; right: 14px; padding: 6px 9px; border: 1px solid rgba(255,155,84,.35); background: transparent; color: var(--noso-accent); font: 8px ui-monospace, monospace; letter-spacing: .12em; cursor: pointer; }
.first-run { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px; padding: 18px 25px; border-top: 1px solid rgba(255,255,255,.12); color: #667168; font: 9px ui-monospace, monospace; letter-spacing: .12em; }
.first-run code { color: #a9e0c7; letter-spacing: 0; }

.noso-cta { padding: 130px clamp(24px, 9vw, 145px); background: var(--noso-accent); color: #16140f; }
.noso-cta .section-number { color: #55311c; }
.noso-cta h2 { margin: 24px 0 45px; color: #16140f; }
.noso-cta > div { display: flex; flex-wrap: wrap; gap: 14px; }
.noso-cta .button-primary { background: #101712; color: var(--noso-cream); }
.noso-cta .button-quiet { border-color: rgba(22,20,15,.3); color: #2e2219; }

@media (max-width: 980px) {
  .noso-hero { grid-template-columns: 1fr; }
  .noso-terminal { max-width: 720px; transform: none; }
  .noso-heading { grid-template-columns: 1fr 2fr; }
  .noso-heading > p:last-child { grid-column: 2; }
  .workflow-rail { grid-template-columns: 1fr 1fr; }
  .principle-cards { grid-template-columns: 1fr; }
  .principle-cards article { min-height: 300px; }
  .install-section { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .noso-hero { min-height: auto; padding: 145px 22px 80px; gap: 60px; }
  .noso-hero h1 { font-size: clamp(57px, 18vw, 82px); }
  .noso-terminal { margin: 0 -5px; }
  .terminal-body { padding: 25px 19px; }
  .release-strip { flex-direction: column; }
  .noso-statement, .noso-heading { grid-template-columns: 1fr; }
  .noso-statement, .noso-section, .install-section, .noso-cta { padding: 88px 22px; }
  .noso-heading > p:last-child { grid-column: auto; }
  .workflow-rail { grid-template-columns: 1fr; }
  .workflow-rail article { min-height: 250px; }
  .workflow-rail h3 { margin-top: 80px; }
  .principle-cards article { min-height: 330px; }
  .code-block { padding: 48px 18px 26px; }
}