/* Homepage-only layout: hero mock browser + sector list. */

.hero { min-height: 730px; padding: 84px 0 120px; display: grid; grid-template-columns: 1fr .87fr; gap: 82px; align-items: center; position: relative; }
.hero::before { content: ''; position: absolute; width: min(69vw, 930px); height: 1px; right: -10vw; top: 17%; background: linear-gradient(90deg, transparent, rgba(16,17,20,.12), transparent); transform: rotate(-24deg); pointer-events: none; }
.hero h1 { max-width: 650px; font: 400 clamp(55px, 6.5vw, 96px)/.94 var(--display); letter-spacing: -.065em; margin-bottom: 32px; }
.hero-lede { max-width: 405px; color: #5f605b; font-size: 17px; line-height: 1.55; margin-bottom: 34px; }

.hero-stage { position: relative; min-height: 480px; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid rgba(16,17,20,.11); border-radius: 50%; }
.orbit-one { width: 540px; height: 260px; transform: rotate(-21deg); }
.orbit-two { width: 420px; height: 300px; transform: rotate(42deg); }
.browser-card {
  width: min(100%, 510px);
  background: #dfe6d5;
  border: 1px solid rgba(16,17,20,.2);
  border-radius: 8px;
  box-shadow: 20px 25px 0 rgba(16,17,20,.06), 0 30px 70px rgba(16,17,20,.15), inset 0 1px 0 rgba(255,255,255,.6);
  transform: rotate(3deg);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.browser-bar { height: 34px; padding: 0 14px; background: #f4f3ec; border-bottom: 1px solid rgba(16,17,20,.12); display: flex; align-items: center; justify-content: space-between; color: #777770; font-size: 9px; letter-spacing: .03em; }
.browser-dots { display: flex; gap: 4px; }
.browser-dots i { width: 5px; height: 5px; background: #b6b6ae; border-radius: 50%; }
.browser-shape { font-size: 13px; }
.browser-body { padding: 34px; min-height: 365px; background: linear-gradient(125deg, #dfe8d1, #e9e7da 70%); position: relative; overflow: hidden; }
.browser-body::after { content: ''; width: 260px; height: 260px; position: absolute; right: -112px; bottom: -140px; border-radius: 50%; border: 1px solid rgba(78,100,73,.22); box-shadow: 0 0 0 23px rgba(78,100,73,.05), 0 0 0 46px rgba(78,100,73,.035); }
.mini-topline { display: flex; justify-content: space-between; font-family: var(--label); font-size: 9px; letter-spacing: .14em; font-weight: 800; opacity: .6; }
.mini-kicker { margin: 47px 0 7px; font-family: var(--label); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.browser-body h2 { font: 400 clamp(40px, 5vw, 63px)/.87 var(--display); letter-spacing: -.07em; margin-bottom: 31px; }
.browser-body h2 em { color: #4e6449; font-family: var(--display-italic); }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; position: relative; z-index: 1; }
.mini-tile { min-height: 93px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 4px; }
.mini-tile span { font-size: 9px; opacity: .6; }
.mini-tile strong { font: 400 16px/1 var(--display); letter-spacing: -.04em; }
.mini-tile small { font-size: 8px; opacity: .68; }
.tile-olive { background: #c7d792; }
.tile-coral { background: #eea18d; }
.tile-blue { background: #abc4dd; }
.stage-note {
  position: absolute;
  right: -7px;
  bottom: 26px;
  transform: rotate(-90deg) translateX(100%);
  transform-origin: bottom right;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #72736e;
  font-family: var(--label);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.stage-line { height: 1px; width: 40px; background: #72736e; }

/* Sectors */
.sectors { padding: 0 0 160px; }
.sector-list { border-top: 1px solid var(--line); }
.sector-card {
  min-height: 177px;
  display: grid;
  grid-template-columns: 80px 1fr 30px;
  gap: 30px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: padding .3s ease, color .3s ease;
}
.sector-card::before { content: ''; position: absolute; inset: 0; transform: translateX(-102%); transition: transform .4s cubic-bezier(.2,.7,.2,1); z-index: -1; }
.sector-card:hover { padding-left: 22px; }
.sector-card:hover::before { transform: translateX(0); }
.sector-accent-acid::before { background: var(--acid); }
.sector-accent-coral::before { background: var(--coral); }
.sector-accent-blue::before { background: var(--blue); }
.sector-number { align-self: start; padding-top: 27px; font-family: var(--label); font-size: 11px; color: #84857f; }
.sector-card h3 { display: inline-flex; align-items: baseline; gap: 12px; font: 400 clamp(32px, 4vw, 55px)/1 var(--display); letter-spacing: -.06em; margin: 0 0 8px; }
.sector-card p { margin: 0; color: #777770; font-size: 13px; }
.sector-arrow { font-size: 23px; font-weight: 300; }
.sector-soon { font-family: var(--label); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #84857f; border: 1px solid var(--line); border-radius: 100px; padding: 4px 10px; }
article.sector-card { cursor: default; }

@media (max-width: 800px) {
  .hero { padding: 65px 0 100px; display: block; min-height: 0; }
  .hero::before, .showcase::before { display: none; }
  .hero h1 { font-size: clamp(53px, 15vw, 82px); }
  .hero-lede { font-size: 16px; }
  .hero-stage { margin-top: 72px; min-height: 390px; }
  .browser-card { transform: rotate(2deg); }
  .browser-body { padding: 25px; min-height: 310px; }
  .mini-kicker { margin-top: 35px; }
  .mini-grid { gap: 5px; }
  .mini-tile { padding: 9px; min-height: 70px; }
  .mini-tile strong { font-size: 12px; }
  .mini-tile small { font-size: 7px; }
  .orbit-one { width: 380px; height: 210px; }
  .orbit-two { width: 300px; height: 220px; }
  .stage-note { right: -21px; bottom: 10px; font-size: 8px; }
  .sectors { padding-bottom: 110px; }
  .sector-card { min-height: 145px; grid-template-columns: 42px 1fr 20px; gap: 12px; }
  .sector-card h3 { font-size: 38px; }
}

/* Conversion layer: a sharper proof of the system without adding remote media. */
.hero-copy { position: relative; z-index: 1; }
.hero-signals { display: flex; gap: 26px; margin-top: 58px; padding-top: 19px; border-top: 1px solid var(--line); max-width: 560px; }
.hero-signals > div { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; row-gap: 1px; min-width: 0; }
.hero-signals span { grid-row: 1 / span 2; font: 700 9px/1 var(--label); color: #8c8d87; letter-spacing: .08em; padding-top: 2px; }
.hero-signals strong { font: 700 10px/1.1 var(--label); letter-spacing: .01em; }
.hero-signals small { color: #888983; font-size: 10px; line-height: 1.2; }
.signal-rail { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; padding: 30px 0 33px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.signal-rail p { max-width: 390px; margin: 0; color: #666761; font: 400 18px/1.35 var(--display); letter-spacing: -.02em; }
.signal-rail p:last-child { justify-self: end; text-align: right; }
.signal-rail > span { color: #8e907d; font-size: 24px; }

.showcase { padding: 40px 0 168px; position: relative; }
.showcase::before { content: 'M'; position: absolute; right: -1vw; top: 83px; color: rgba(16,17,20,.035); font: 400 clamp(170px, 27vw, 390px)/.7 var(--display); letter-spacing: -.12em; pointer-events: none; }
.showcase-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 72px; align-items: center; }
.showcase-copy { padding-left: 2px; }
.showcase-index { color: #8b8c85; font: 700 10px var(--label); letter-spacing: .11em; margin-bottom: 38px; }
.showcase-copy h3 { font: 400 clamp(48px, 7vw, 92px)/.9 var(--display); letter-spacing: -.075em; margin: 0 0 19px; }
.showcase-copy > p:not(.showcase-index) { max-width: 300px; color: #666761; font-size: 15px; line-height: 1.55; margin-bottom: 39px; }
.showcase-tabs { display: flex; gap: 7px; margin-bottom: 32px; }
.showcase-tab { appearance: none; border: 1px solid var(--line); border-radius: 100px; color: #777871; background: transparent; padding: 9px 14px; cursor: pointer; font: 700 11px var(--label); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.showcase-tab:hover, .showcase-tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.showcase-frame { min-height: 470px; border: 1px solid rgba(16,17,20,.22); border-radius: 10px; overflow: hidden; background: #e6e5dc; box-shadow: 22px 25px 0 rgba(16,17,20,.05), 0 28px 72px rgba(16,17,20,.11); transition: background .4s ease, color .4s ease, transform .4s ease, box-shadow .4s ease; }
.showcase-frame:hover { transform: translateY(-5px) rotate(-.3deg); box-shadow: 25px 30px 0 rgba(16,17,20,.05), 0 35px 84px rgba(16,17,20,.15); }
.showcase-frame.mode-warm { background: #e8d8c5; }
.showcase-framebar { height: 38px; padding: 0 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(16,17,20,.13); background: rgba(244,243,236,.62); color: #777871; font: 700 9px var(--label); letter-spacing: .04em; }
.showcase-framebar > span { display: flex; gap: 5px; }
.showcase-framebar i { width: 6px; height: 6px; display: block; border-radius: 50%; background: #aaa9a0; }
.showcase-framebar small { justify-self: center; font: 600 9px var(--label); }
.showcase-framebar b { justify-self: end; font-size: 9px; font-weight: 700; }
.showcase-framebody { min-height: 432px; padding: 31px 39px 28px; display: flex; flex-direction: column; background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,0)); }
.showcase-framehead { display: flex; justify-content: space-between; color: rgba(16,17,20,.56); font: 800 9px var(--label); letter-spacing: .13em; }
.showcase-framehero { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.showcase-framehero p { margin: 0 0 17px; color: rgba(16,17,20,.62); font: 500 11px var(--label); letter-spacing: .06em; text-transform: uppercase; }
.showcase-framehero h3 { margin: 0; font: 400 clamp(53px, 6.5vw, 88px)/.82 var(--display); letter-spacing: -.085em; }
.showcase-framehero h3 em { color: #68714d; font-family: var(--display-italic); }
.mode-warm .showcase-framehero h3 em { color: #8a5d47; }
.showcase-framegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.showcase-framegrid span { min-height: 76px; padding: 12px; color: rgba(16,17,20,.57); background: rgba(255,255,255,.24); font: 700 9px/1.7 var(--label); }
.showcase-framegrid strong { color: var(--ink); font: 400 17px/1 var(--display); letter-spacing: -.03em; }
.mode-warm .showcase-framegrid span { background: rgba(117,70,41,.1); }
.closing-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; position: relative; z-index: 1; }
.closing-link { color: #c1c2b9; font: 700 12px var(--label); }
.closing-link:hover { color: var(--paper); }

@media (max-width: 800px) {
  .hero-signals { gap: 15px; margin-top: 45px; }
  .hero-signals > div { column-gap: 6px; }
  .hero-signals strong, .hero-signals small { font-size: 9px; }
  .signal-rail { display: block; padding: 24px 0 26px; }
  .signal-rail > span { display: block; margin: 13px 0 11px; transform: rotate(90deg); }
  .signal-rail p:last-child { text-align: left; }
  .showcase { padding: 0 0 112px; }
  .showcase-grid { display: flex; flex-direction: column; gap: 46px; align-items: stretch; }
  .showcase-copy h3 { font-size: 65px; }
  .showcase-frame { min-height: 390px; }
  .showcase-framebody { min-height: 352px; padding: 23px 22px 20px; }
  .showcase-framehero h3 { font-size: 65px; }
  .showcase-framegrid span { min-height: 64px; padding: 9px; }
  .showcase-framegrid strong { font-size: 14px; }
}