/* JMOREX / KIRO OPERATING EXPERIENCE SHELL
   Reuses the proven Sparky/PetOps interaction pattern while preserving
   JMOREX's own corporate identity, typography, palette, and authority. */

:root{
  --kiro-gold:#C9A55A;
  --kiro-gold-hi:#E8C880;
  --kiro-bone:#F3EFE6;
  --kiro-stone:#9A9386;
  --kiro-onyx:#0E0C12;
  --kiro-obsidian:#07060A;
  --kiro-silver:#C0C6CC;
  --kiro-line:rgba(243,239,230,.14);
  --kiro-line-gold:rgba(201,165,90,.42);
  --kiro-shadow:0 24px 72px rgba(0,0,0,.46);
}

html{scroll-behavior:smooth}
body{isolation:isolate}

.jmx-experience-rail{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  z-index:180;
  background:rgba(243,239,230,.06);
  pointer-events:none;
}
.jmx-experience-rail>i{
  display:block;
  width:100%;
  height:var(--jmx-scroll,0%);
  background:var(--kiro-gold);
  box-shadow:0 0 18px rgba(201,165,90,.22);
  transition:height 80ms linear;
}

.jmx-experience-index{
  position:fixed;
  left:18px;
  bottom:20px;
  z-index:170;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(243,239,230,.54);
  font:650 9px/1.2 JetBrains Mono,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
  pointer-events:none;
}
.jmx-experience-index::before{
  content:"";
  width:26px;
  height:1px;
  background:rgba(201,165,90,.52);
}
.jmx-experience-index b{color:var(--kiro-gold-hi);font-weight:700}

.jmx-cinematic{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
}
.jmx-cinematic::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid transparent;
  pointer-events:none;
  transition:border-color .28s ease,transform .28s ease;
}
@media (hover:hover) and (pointer:fine){
  .jmx-cinematic:hover::after{border-color:rgba(243,239,230,.08);transform:translate3d(0,0,12px)}
}

.jmx-reveal{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1);
}
.jmx-reveal.is-visible{opacity:1;transform:none}

.jmx-depth-line{
  position:absolute;
  width:1px;
  height:72px;
  background:rgba(201,165,90,.24);
  pointer-events:none;
}
.jmx-depth-line--a{top:8%;right:4%;transform:rotate(18deg)}
.jmx-depth-line--b{bottom:9%;left:3%;height:48px;transform:rotate(-18deg)}

.kiro-shell{
  position:fixed;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));
  z-index:520;
  width:64px;
  height:64px;
  color:var(--kiro-bone);
  font-family:var(--jv-type-font-ui);
}
.kiro-launcher{
  position:absolute;
  right:0;
  bottom:0;
  width:64px;
  height:64px;
  border:1px solid var(--kiro-line-gold);
  border-radius:50%;
  background:var(--kiro-obsidian);
  color:var(--kiro-bone);
  padding:0;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 12px 38px rgba(0,0,0,.42),0 0 0 1px rgba(243,239,230,.04) inset;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.kiro-launcher:hover,.kiro-launcher:focus-visible{
  transform:translateY(-3px) scale(1.025);
  border-color:var(--kiro-gold-hi);
  box-shadow:0 18px 52px rgba(0,0,0,.52),0 0 0 1px rgba(232,200,128,.14) inset;
}
.kiro-launcher:focus-visible{outline:2px solid var(--kiro-gold-hi);outline-offset:3px}
.kiro-launcher img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 17%;
  transform:scale(1.62) translateY(15%);
  transform-origin:50% 20%;
}
.kiro-launcher::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(243,239,230,.18);
  border-radius:50%;
  pointer-events:none;
}
.kiro-status-dot{
  position:absolute;
  right:-1px;
  bottom:4px;
  width:13px;
  height:13px;
  border:2px solid var(--kiro-obsidian);
  border-radius:50%;
  background:var(--kiro-gold);
  box-shadow:0 0 14px rgba(201,165,90,.48);
}
.kiro-shell[data-state="thinking"] .kiro-status-dot,
.kiro-shell[data-state="listening"] .kiro-status-dot{animation:kiroPulse 1s ease-in-out infinite}
.kiro-shell[data-state="error"] .kiro-status-dot{background:#B86A63}
.kiro-shell[data-state="speaking"] .kiro-status-dot{background:var(--kiro-gold-hi)}

.kiro-dock{
  position:absolute;
  right:0;
  bottom:78px;
  width:min(390px,calc(100vw - 28px));
  height:min(610px,calc(100dvh - 130px));
  display:grid;
  grid-template-rows:auto 1fr auto;
  border:1px solid var(--kiro-line);
  background:rgba(7,6,10,.975);
  box-shadow:var(--kiro-shadow);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,14px,0) scale(.985);
  transform-origin:100% 100%;
  transition:opacity .2s ease,transform .24s cubic-bezier(.22,.61,.36,1),visibility .2s;
}
.kiro-shell.is-open .kiro-dock{opacity:1;visibility:visible;transform:none}
.kiro-dock::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:72px;
  height:2px;
  background:var(--kiro-gold);
  pointer-events:none;
}
.kiro-dock__head{
  display:grid;
  grid-template-columns:50px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:13px 13px 12px;
  border-bottom:1px solid var(--kiro-line);
  background:#09080c;
}
.kiro-dock__portrait{
  width:50px;height:50px;border:1px solid rgba(201,165,90,.34);overflow:hidden;background:#08070b;
}
.kiro-dock__portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 17%;transform:scale(1.5) translateY(14%);transform-origin:50% 20%}
.kiro-dock__title strong{display:block;font-size:.92rem;letter-spacing:.01em}
.kiro-dock__title span{display:block;margin-top:3px;color:var(--kiro-stone);font:650 9px/1.35 JetBrains Mono,monospace;letter-spacing:.1em;text-transform:uppercase}
.kiro-dock__actions{display:flex;gap:2px}
.kiro-icon-btn{
  width:38px;height:38px;border:0;background:transparent;color:var(--kiro-stone);
  display:grid;place-items:center;cursor:pointer;font-size:16px
}
.kiro-icon-btn:hover,.kiro-icon-btn:focus-visible{color:var(--kiro-bone);background:rgba(243,239,230,.05)}
.kiro-icon-btn:focus-visible{outline:1px solid var(--kiro-gold);outline-offset:-2px}

.kiro-messages{
  overflow:auto;
  padding:18px 15px 22px;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
.kiro-message{display:flex;margin:0 0 13px}
.kiro-message--user{justify-content:flex-end}
.kiro-message__bubble{
  max-width:86%;
  padding:10px 12px;
  border:1px solid var(--kiro-line);
  color:rgba(243,239,230,.9);
  background:#0c0b10;
  font:400 .89rem/1.52 var(--jv-type-font-ui);
}
.kiro-message--user .kiro-message__bubble{
  border-color:rgba(201,165,90,.28);
  background:#121016;
}
.kiro-message__name{
  display:block;
  margin-bottom:5px;
  color:var(--kiro-gold);
  font:700 8px/1 JetBrains Mono,monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.kiro-message__bubble a{color:var(--kiro-gold-hi);text-decoration:none;border-bottom:1px solid rgba(232,200,128,.28)}
.kiro-message__bubble a:hover{border-bottom-color:var(--kiro-gold-hi)}
.kiro-thinking{color:var(--kiro-stone);font:650 10px/1.4 JetBrains Mono,monospace;letter-spacing:.08em;text-transform:uppercase}
.kiro-thinking i{display:inline-block;width:4px;height:4px;margin-left:4px;border-radius:50%;background:var(--kiro-gold);animation:kiroPulse .9s ease-in-out infinite}

.kiro-composer{
  padding:10px;
  border-top:1px solid var(--kiro-line);
  background:#09080c;
}
.kiro-composer__row{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:end}
.kiro-composer textarea{
  width:100%;
  min-height:42px;
  max-height:118px;
  resize:none;
  border:1px solid var(--kiro-line);
  background:#0d0c11;
  color:var(--kiro-bone);
  font:400 .88rem/1.4 var(--jv-type-font-ui);
  padding:10px 11px;
  outline:none;
}
.kiro-composer textarea:focus{border-color:rgba(201,165,90,.55);box-shadow:0 0 0 2px rgba(201,165,90,.08)}
.kiro-send{
  width:42px;height:42px;border:1px solid var(--kiro-gold);background:var(--kiro-gold);color:#08070b;
  cursor:pointer;font-weight:800;font-size:18px
}
.kiro-send:hover,.kiro-send:focus-visible{background:var(--kiro-gold-hi);border-color:var(--kiro-gold-hi)}
.kiro-send:disabled{opacity:.45;cursor:not-allowed}
.kiro-composer__meta{
  display:flex;justify-content:space-between;gap:10px;margin-top:7px;color:rgba(154,147,134,.72);
  font:600 8px/1.35 JetBrains Mono,monospace;letter-spacing:.05em
}
.kiro-composer__meta a{color:var(--kiro-stone)}
.kiro-quick{
  display:flex;gap:6px;overflow:auto;padding:0 0 8px;scrollbar-width:none
}
.kiro-quick::-webkit-scrollbar{display:none}
.kiro-quick button{
  flex:0 0 auto;border:1px solid var(--kiro-line);background:transparent;color:var(--kiro-stone);
  padding:7px 9px;font:650 8px/1 JetBrains Mono,monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer
}
.kiro-quick button:hover,.kiro-quick button:focus-visible{color:var(--kiro-bone);border-color:rgba(201,165,90,.4)}

.kiro-cgi-stage{
  position:relative;
  min-height:180px;
  perspective:900px;
  transform-style:preserve-3d;
}
.kiro-cgi-stage__frame{
  position:absolute;inset:8% 11%;
  border:1px solid rgba(243,239,230,.09);
  transform:rotateY(-7deg) rotateX(3deg);
  box-shadow:18px 24px 52px rgba(0,0,0,.28);
}
.kiro-cgi-stage__frame::before,
.kiro-cgi-stage__frame::after{
  content:"";position:absolute;background:rgba(201,165,90,.25);pointer-events:none
}
.kiro-cgi-stage__frame::before{width:1px;top:-20px;bottom:-20px;left:18%}
.kiro-cgi-stage__frame::after{height:1px;left:-20px;right:-20px;bottom:22%}
.kiro-cgi-stage img{
  position:relative;z-index:2;display:block;width:min(230px,62%);height:auto;margin:auto;
  filter:drop-shadow(0 24px 22px rgba(0,0,0,.4));
  transform:translateZ(28px)
}

@keyframes kiroPulse{0%,100%{opacity:.45;transform:scale(.88)}50%{opacity:1;transform:scale(1.12)}}

@media(max-width:700px){
  .jmx-experience-index{display:none}
  .kiro-shell{right:12px;bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px))}
  .kiro-launcher{width:58px;height:58px}
  .kiro-shell{width:58px;height:58px}
  .kiro-dock{bottom:70px;width:min(370px,calc(100vw - 24px));height:min(68dvh,560px)}
  .kiro-dock__head{grid-template-columns:44px minmax(0,1fr) auto}
  .kiro-dock__portrait{width:44px;height:44px}
  .kiro-message__bubble{max-width:91%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .jmx-reveal{opacity:1;transform:none;transition:none}
  .jmx-cinematic,.jmx-cinematic:hover{transform:none!important}
  .kiro-shell *{animation:none!important;transition:none!important}
  .kiro-cgi-stage__frame{transform:none}
  .kiro-cgi-stage img{transform:none}
}


/* JMOREX cross-site cinematic application layer */
body.page::before,
body.page::after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  border:1px solid rgba(243,239,230,.045);
  transform-style:preserve-3d;
}
body.page::before{
  width:360px;height:360px;right:-180px;top:18vh;
  transform:rotate(42deg) skew(-7deg,-7deg);
}
body.page::after{
  width:260px;height:260px;left:-150px;bottom:10vh;
  transform:rotate(-36deg) skew(8deg,8deg);
  border-color:rgba(201,165,90,.055);
}
.page-hero,.hero{overflow:hidden}
.page-hero .shell,.hero .shell{position:relative}
.page-hero .shell::after,
.hero .shell::after{
  content:"";
  position:absolute;
  width:96px;height:96px;
  right:0;top:10%;
  border-top:1px solid rgba(201,165,90,.3);
  border-right:1px solid rgba(201,165,90,.3);
  transform:translateZ(0) rotate(8deg);
  pointer-events:none;
}
.page-hero h1,.hero h1{text-wrap:balance}
.page-hero h1::after{
  content:"";
  display:block;
  width:44px;height:1px;
  margin-top:22px;
  background:var(--kiro-gold);
}

.jmx-kiro-feature{
  position:relative;
  padding:clamp(5rem,9vw,9rem) 0;
  border-top:1px solid rgba(243,239,230,.09);
  border-bottom:1px solid rgba(243,239,230,.09);
  background:#08070b;
  overflow:hidden;
}
.jmx-kiro-feature::before{
  content:"KIRO";
  position:absolute;
  right:-.02em;
  top:50%;
  transform:translateY(-52%);
  color:rgba(243,239,230,.018);
  font:700 clamp(9rem,28vw,29rem)/.7 var(--jv-type-font-ui);
  letter-spacing:-.08em;
  pointer-events:none;
}
.jmx-kiro-feature__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:clamp(2rem,7vw,7rem);
  align-items:center;
}
.jmx-kiro-feature__copy{max-width:690px}
.jmx-kiro-feature__roles{
  display:flex;flex-wrap:wrap;gap:7px;margin:1.6rem 0 1.8rem
}
.jmx-kiro-feature__roles span{
  border:1px solid rgba(243,239,230,.11);
  padding:8px 10px;
  color:rgba(243,239,230,.7);
  font:650 9px/1 JetBrains Mono,monospace;
  letter-spacing:.08em;text-transform:uppercase
}
.jmx-kiro-feature__caption{
  position:absolute;
  left:50%;
  bottom:5%;
  z-index:4;
  width:min(270px,78%);
  transform:translateX(-50%) translateZ(44px);
  margin:0;
  padding:10px 12px;
  border-left:1px solid var(--kiro-gold);
  background:rgba(7,6,10,.92);
  box-shadow:0 14px 34px rgba(0,0,0,.3)
}
.jmx-kiro-feature__caption span{
  display:block;color:var(--kiro-gold);
  font:700 8px/1.2 JetBrains Mono,monospace;letter-spacing:.11em
}
.jmx-kiro-feature__caption b{
  display:block;margin-top:5px;color:rgba(243,239,230,.86);
  font:500 .78rem/1.35 var(--jv-type-font-ui)
}

/* Services: executive instrument deck rather than generic cards */
.page-services .engagement-grid{
  perspective:1200px;
  transform-style:preserve-3d;
}
.page-services .engagement-grid>.card{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .28s ease,border-color .28s ease,background-color .28s ease;
}
.page-services .engagement-grid>.card::after{
  content:"";
  position:absolute;
  right:14px;bottom:14px;
  width:32px;height:32px;
  border-right:1px solid rgba(201,165,90,.24);
  border-bottom:1px solid rgba(201,165,90,.24);
  pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .page-services .engagement-grid>.card:hover{transform:translate3d(0,-5px,22px)}
}

/* Work: case studies read like physical dossiers */
.page-work .case-list{perspective:1300px}
.page-work .case{
  position:relative;
  transform-origin:50% 50%;
  transition:transform .32s ease,border-color .32s ease;
}
.page-work .case::before{
  content:"CASE / PROOF";
  position:absolute;right:18px;top:16px;
  color:rgba(201,165,90,.42);
  font:700 8px/1 JetBrains Mono,monospace;letter-spacing:.12em;
  pointer-events:none
}
@media(hover:hover) and (pointer:fine){
  .page-work .case:hover{transform:translate3d(0,-4px,18px) rotateX(.45deg)}
}

/* Insights: editorial intelligence cards */
.page-insights .grid-3{perspective:1200px}
.page-insights .card{
  min-height:280px;
  display:flex;flex-direction:column;
  position:relative;
}
.page-insights .card .inline{margin-top:auto}
.page-insights .card::after{
  content:"READ / JMOREX";
  position:absolute;bottom:18px;right:18px;
  color:rgba(243,239,230,.22);
  font:650 7px/1 JetBrains Mono,monospace;letter-spacing:.1em
}

/* About: make the architecture diagram feel like a system map */
.page-about .org-map{
  position:relative;
  perspective:1200px;
}
.page-about .org-map::before{
  content:"";
  position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:rgba(201,165,90,.15);pointer-events:none
}
.page-about .org-node{position:relative;z-index:1}
.page-about .org-node:nth-child(even){transform:translate3d(8px,0,8px)}
.page-about .org-node:nth-child(odd){transform:translate3d(-8px,0,14px)}

/* Contact: turn inquiry lanes into a compact operating console */
.page-contact .engagement-fit-grid,
.page-contact .inquiry-grid{perspective:1000px}
.page-contact .engagement-fit-grid a,
.page-contact .inquiry-grid>div{
  position:relative;
  transition:transform .24s ease,border-color .24s ease
}
.page-contact .engagement-fit-grid a::before,
.page-contact .inquiry-grid>div::before{
  content:"";
  position:absolute;top:0;left:0;width:26px;height:1px;background:var(--kiro-gold)
}
@media(hover:hover) and (pointer:fine){
  .page-contact .engagement-fit-grid a:hover,
  .page-contact .inquiry-grid>div:hover{transform:translate3d(0,-3px,14px)}
}

/* Trust: quiet security/ledger visual language */
.page-trust .trust-ledger{
  position:relative;
  border-left:1px solid rgba(201,165,90,.2);
  box-shadow:-18px 0 44px rgba(0,0,0,.15)
}
.page-trust .trust-ledger::before{
  content:"PROVENANCE / CONTROL / RECEIPTS";
  display:block;
  margin:0 0 1.3rem;
  color:rgba(201,165,90,.55);
  font:700 8px/1.25 JetBrains Mono,monospace;letter-spacing:.12em
}

/* Legal/security pages still share the visual system without distracting motion */
.page-privacy main,.page-terms main,.page-accessibility main,.page-security main{
  position:relative;
}
.page-privacy main::before,.page-terms main::before,.page-accessibility main::before,.page-security main::before{
  content:"JMOREX / GOVERNED PUBLIC SURFACE";
  position:fixed;right:20px;top:50%;
  writing-mode:vertical-rl;
  color:rgba(243,239,230,.12);
  font:650 8px/1 JetBrains Mono,monospace;letter-spacing:.13em;
  pointer-events:none
}

@media(max-width:860px){
  .jmx-kiro-feature__grid{grid-template-columns:1fr}
  .kiro-cgi-stage{min-height:460px}
  .jmx-kiro-feature::before{font-size:38vw;top:66%}
  .page-about .org-map::before{left:18px}
  .page-about .org-node:nth-child(n){transform:none}
}

@media(max-width:520px){
  body.page::before{width:220px;height:220px;right:-150px}
  body.page::after{display:none}
  .page-hero .shell::after,.hero .shell::after{width:54px;height:54px;right:8px}
  .jmx-kiro-feature{padding:4.5rem 0}
  .kiro-cgi-stage{min-height:390px}
  .kiro-cgi-stage img{width:min(230px,72%)}
}

@media(prefers-reduced-motion:reduce){
  .page-services .engagement-grid>.card,
  .page-work .case,
  .page-contact .engagement-fit-grid a,
  .page-contact .inquiry-grid>div,
  .page-about .org-node{transform:none!important;transition:none!important}
}


/* ── JMOREX transformation board ─────────────────────────────────────────
   Public explanation layer: concrete business friction -> useful system.
   It deliberately behaves like an executive storyboard, not a SaaS card grid. */
.jmx-transformation{
  position:relative;
  overflow:clip;
  padding:clamp(5rem,8vw,8.5rem) 0;
  border-block:1px solid var(--kiro-line);
  background:var(--kiro-obsidian);
}
.jmx-transformation::before{
  content:"SYSTEM / EXPERIENCE / AUTOMATION / CREATIVE";
  position:absolute;
  right:-1.1rem;
  top:50%;
  writing-mode:vertical-rl;
  transform:translateY(-50%);
  color:rgba(243,239,230,.08);
  font:700 clamp(8px,.8vw,11px)/1 JetBrains Mono,monospace;
  letter-spacing:.18em;
  pointer-events:none;
}
.jmx-transformation__head{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.72fr);
  align-items:end;
  gap:clamp(2rem,6vw,6rem);
  padding-bottom:clamp(2.2rem,5vw,4.5rem);
}
.jmx-transform-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--kiro-line);
  border-bottom:1px solid var(--kiro-line);
  perspective:1400px;
}
.jmx-transform-card{
  position:relative;
  min-height:320px;
  padding:clamp(1.25rem,2.1vw,2rem);
  border-right:1px solid var(--kiro-line);
  background:rgba(14,12,18,.72);
  transform-style:preserve-3d;
  transition:transform .28s ease,background-color .28s ease,border-color .28s ease;
}
.jmx-transform-card:last-child{border-right:0}
.jmx-transform-card::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:44px;
  height:1px;
  background:var(--kiro-gold);
}
.jmx-transform-index{
  display:block;
  color:rgba(243,239,230,.34);
  font:700 .64rem/1 JetBrains Mono,monospace;
  letter-spacing:.14em;
}
.jmx-transform-from{
  margin:clamp(2.2rem,4vw,3.4rem) 0 .65rem;
  color:var(--kiro-stone);
  font:600 .72rem/1.25 JetBrains Mono,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.jmx-transform-arrow{
  display:block;
  width:max-content;
  margin:.4rem 0 .8rem;
  color:var(--kiro-gold-hi);
  font-size:1.35rem;
  transform:translateZ(18px);
}
.jmx-transform-card h3{
  margin:0;
  max-width:12ch;
  color:var(--kiro-bone);
  font-size:clamp(1.35rem,2vw,2rem);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.045em;
}
.jmx-transform-card>p:last-child{
  margin:1rem 0 0;
  max-width:30ch;
  color:rgba(243,239,230,.6);
  font-size:.9rem;
  line-height:1.62;
}
@media(hover:hover) and (pointer:fine){
  .jmx-transform-card:hover{
    z-index:2;
    transform:translate3d(0,-8px,28px) rotateX(.6deg);
    background:rgba(18,16,24,.96);
    border-color:rgba(201,165,90,.35);
  }
}
.jmx-operating-sequence{
  display:grid;
  grid-template-columns:auto minmax(24px,1fr) auto minmax(24px,1fr) auto minmax(24px,1fr) auto;
  align-items:center;
  gap:.75rem;
  padding:1.35rem 0 0;
  color:rgba(243,239,230,.5);
  font:650 .63rem/1.4 JetBrains Mono,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.jmx-operating-sequence i{
  display:block;
  height:1px;
  background:rgba(201,165,90,.28);
  position:relative;
}
.jmx-operating-sequence i::after{
  content:"";
  position:absolute;
  right:0;
  top:-2px;
  width:5px;
  height:5px;
  border-top:1px solid var(--kiro-gold);
  border-right:1px solid var(--kiro-gold);
  transform:rotate(45deg);
}

@media(max-width:980px){
  .jmx-transformation__head{grid-template-columns:1fr;align-items:start}
  .jmx-transform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jmx-transform-card:nth-child(2){border-right:0}
  .jmx-transform-card:nth-child(-n+2){border-bottom:1px solid var(--kiro-line)}
  .jmx-operating-sequence{
    grid-template-columns:1fr;
    gap:.45rem;
  }
  .jmx-operating-sequence i{width:1px;height:18px;margin-left:4px}
  .jmx-operating-sequence i::after{right:-2px;top:auto;bottom:0;transform:rotate(135deg)}
}
@media(max-width:560px){
  .jmx-transformation{padding:4.3rem 0}
  .jmx-transformation::before{display:none}
  .jmx-transform-grid{grid-template-columns:1fr}
  .jmx-transform-card{
    min-height:0;
    padding:1.5rem 0 1.7rem;
    border-right:0;
    border-bottom:1px solid var(--kiro-line);
  }
  .jmx-transform-card:last-child{border-bottom:0}
  .jmx-transform-card:nth-child(-n+2){border-bottom:1px solid var(--kiro-line)}
  .jmx-transform-from{margin-top:1.6rem}
}
@media(prefers-reduced-motion:reduce){
  .jmx-transform-card{transition:none!important;transform:none!important}
}


/* KIRO PUBLIC PAGE v1.0.0 — 2026-09-21 */
.page-kiro .page-hero{padding-bottom:clamp(4rem,8vw,8rem)}
.kiro-page-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);
  gap:clamp(2.5rem,7vw,7rem);
  align-items:center;
}
.kiro-page-hero__copy{max-width:760px}
.kiro-page-hero__copy h1{max-width:9ch}
.kiro-page-boundary{
  max-width:64ch;
  margin:1.25rem 0 0;
  padding-left:14px;
  border-left:1px solid rgba(201,165,90,.48);
  color:rgba(154,147,134,.88);
  font:600 .76rem/1.55 JetBrains Mono,monospace;
}
.kiro-page-portrait{
  position:relative;
  min-height:650px;
  display:grid;
  place-items:end center;
  overflow:hidden;
  border-left:1px solid rgba(201,165,90,.42);
  border-top:1px solid rgba(243,239,230,.10);
  border-bottom:1px solid rgba(243,239,230,.10);
  background:#09080c;
  perspective:1100px;
}
.kiro-page-portrait::before{
  content:"";
  position:absolute;
  inset:9% 12%;
  border:1px solid rgba(243,239,230,.07);
  transform:rotateY(-7deg) rotateX(2deg);
  pointer-events:none;
}
.kiro-page-portrait img{
  position:relative;
  z-index:2;
  display:block;
  width:min(430px,78%);
  height:auto;
  max-height:620px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 28px 30px rgba(0,0,0,.5));
}
.kiro-page-portrait__rails::before,
.kiro-page-portrait__rails::after{
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
  background:rgba(243,239,230,.09);
}
.kiro-page-portrait__rails::before{width:1px;top:8%;bottom:8%;left:50%}
.kiro-page-portrait__rails::after{height:1px;left:8%;right:8%;top:52%}
.kiro-page-portrait__plate{
  position:absolute;
  left:22px;
  bottom:20px;
  z-index:3;
  max-width:min(340px,72%);
  padding:11px 13px;
  border-left:1px solid var(--kiro-gold);
  background:rgba(7,6,10,.94);
  box-shadow:0 16px 44px rgba(0,0,0,.36);
}
.kiro-page-portrait__plate span{
  display:block;
  color:var(--kiro-gold);
  font:700 8px/1.2 JetBrains Mono,monospace;
  letter-spacing:.11em;
}
.kiro-page-portrait__plate strong{
  display:block;
  margin-top:5px;
  color:rgba(243,239,230,.86);
  font:500 .8rem/1.38 var(--jv-type-font-ui);
}
.kiro-page-capabilities{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-block:1px solid rgba(243,239,230,.11);
}
.kiro-page-capabilities article{
  position:relative;
  min-height:260px;
  padding:26px 24px 28px;
  border-right:1px solid rgba(243,239,230,.09);
}
.kiro-page-capabilities article:last-child{border-right:0}
.kiro-page-capabilities article>span{
  display:block;
  color:var(--kiro-gold);
  font:700 9px/1 JetBrains Mono,monospace;
  letter-spacing:.12em;
}
.kiro-page-capabilities h3{
  margin:2rem 0 .65rem;
  font-size:clamp(1.15rem,2vw,1.6rem);
  font-weight:500;
  letter-spacing:-.035em;
}
.kiro-page-capabilities p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}
.kiro-page-system{background:#08070b}
.kiro-page-lanes{
  display:grid;
  grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);
  align-items:stretch;
  border-block:1px solid rgba(243,239,230,.11);
}
.kiro-page-lane{padding:30px 28px}
.kiro-page-lane>span{
  color:var(--kiro-gold);
  font:700 8px/1.2 JetBrains Mono,monospace;
  letter-spacing:.12em;
}
.kiro-page-lane h3{margin:1rem 0 1.1rem;font-weight:500;font-size:1.55rem}
.kiro-page-lane ul{margin:0;padding:0;list-style:none}
.kiro-page-lane li{
  padding:10px 0;
  border-top:1px solid rgba(243,239,230,.08);
  color:rgba(243,239,230,.7);
}
.kiro-page-lane-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-inline:1px solid rgba(243,239,230,.09);
  color:var(--kiro-gold);
}
.kiro-page-lane-link i{display:block;width:1px;height:70px;background:rgba(201,165,90,.28)}
.kiro-page-lane-link b{font:700 9px/1 JetBrains Mono,monospace;letter-spacing:.16em}
@media(hover:hover) and (pointer:fine){
  .kiro-page-capabilities article{transition:background-color .22s ease,transform .22s ease}
  .kiro-page-capabilities article:hover{background:rgba(243,239,230,.015);transform:translateY(-3px)}
}
@media(max-width:900px){
  .kiro-page-hero__grid{grid-template-columns:1fr}
  .kiro-page-portrait{min-height:560px}
  .kiro-page-capabilities{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kiro-page-capabilities article:nth-child(2){border-right:0}
  .kiro-page-capabilities article:nth-child(-n+2){border-bottom:1px solid rgba(243,239,230,.09)}
  .kiro-page-lanes{grid-template-columns:1fr}
  .kiro-page-lane-link{min-height:82px;flex-direction:row;border-inline:0;border-block:1px solid rgba(243,239,230,.09)}
  .kiro-page-lane-link i{width:70px;height:1px}
}
@media(max-width:560px){
  .kiro-page-portrait{min-height:470px}
  .kiro-page-portrait img{width:min(320px,82%);max-height:450px}
  .kiro-page-capabilities{grid-template-columns:1fr}
  .kiro-page-capabilities article{min-height:0;border-right:0;border-bottom:1px solid rgba(243,239,230,.09)}
  .kiro-page-capabilities article:last-child{border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .kiro-page-portrait::before,.kiro-page-capabilities article{transform:none!important;transition:none!important}
}


/* KIRO BUSINESS WARDROBE MODES v1.0.0 — 2026-09-21 */
.kiro-look-switcher{
  position:absolute;
  z-index:4;
  top:18px;
  right:18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:5px;
  max-width:min(330px,76%);
}
.kiro-look-switcher button{
  min-height:30px;
  padding:0 9px;
  border:1px solid rgba(243,239,230,.13);
  background:rgba(7,6,10,.88);
  color:rgba(243,239,230,.62);
  font:700 8px/1 JetBrains Mono,monospace;
  letter-spacing:.075em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background-color .18s ease,transform .18s ease;
}
.kiro-look-switcher button[aria-pressed="true"]{
  border-color:rgba(201,165,90,.7);
  color:var(--kiro-gold-hi);
  background:rgba(201,165,90,.08);
}
.kiro-look-switcher button:focus-visible{
  outline:2px solid var(--kiro-gold-hi);
  outline-offset:2px;
}
@media(hover:hover) and (pointer:fine){
  .kiro-look-switcher button:hover{
    border-color:rgba(232,200,128,.48);
    color:var(--kiro-bone);
    transform:translateY(-1px);
  }
}
@media(max-width:620px){
  .kiro-look-switcher{
    top:12px;
    right:12px;
    left:12px;
    max-width:none;
    justify-content:center;
  }
  .kiro-look-switcher button{
    min-height:34px;
    padding-inline:8px;
    font-size:7px;
  }
}
@media(prefers-reduced-motion:reduce){
  .kiro-look-switcher button{transition:none;transform:none!important}
}


/* KIRO PUBLIC OPERATING MAP v1.0.0 — FLIP COMMAND-CENTER PATTERN, PUBLIC-SAFE */
.kiro-operating-map-section{position:relative;overflow:clip}
.kiro-operating-map{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:stretch;
}
.kiro-operating-map__graph{
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);
  grid-template-rows:auto 34px auto;
  gap:0;
  align-items:center;
  min-width:0;
  border-block:1px solid rgba(243,239,230,.11);
  padding:22px 0;
  perspective:1200px;
}
.kiro-operating-map__graph>i{
  display:block;height:1px;background:rgba(201,165,90,.3);position:relative
}
.kiro-operating-map__graph>i::after{
  content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;
  border-top:1px solid var(--kiro-gold);border-right:1px solid var(--kiro-gold);transform:rotate(45deg)
}
.kiro-system-node{
  appearance:none;
  min-height:150px;
  padding:18px 16px;
  border:1px solid rgba(243,239,230,.12);
  background:#09080c;
  color:var(--kiro-bone);
  text-align:left;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease;
}
.kiro-system-node>span{display:block;color:rgba(243,239,230,.34);font:700 8px/1 JetBrains Mono,monospace;letter-spacing:.14em}
.kiro-system-node>strong{display:block;margin-top:2rem;font:700 .82rem/1.1 JetBrains Mono,monospace;letter-spacing:.08em;color:var(--kiro-silver)}
.kiro-system-node>small{display:block;margin-top:.45rem;color:var(--kiro-stone);font-size:.72rem;line-height:1.4}
.kiro-system-node[aria-pressed="true"]{border-color:rgba(201,165,90,.68);background:#0c0a0e;transform:translateZ(12px)}
.kiro-system-node[aria-pressed="true"]>strong{color:var(--kiro-gold-hi)}
.kiro-system-node:focus-visible{outline:2px solid var(--kiro-gold-hi);outline-offset:3px}
.kiro-system-node--brand{border-left-color:var(--kiro-gold)}
.kiro-system-node--kiro{border-top-color:rgba(232,200,128,.45)}
.kiro-operating-map__fork{grid-column:1/-1;grid-row:2;position:relative;height:34px}
.kiro-operating-map__fork::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(201,165,90,.28)}
.kiro-operating-map__fork::after{content:"";position:absolute;left:12.5%;right:12.5%;bottom:0;height:1px;background:rgba(201,165,90,.28)}
.kiro-system-node--secondary{grid-row:3}
.kiro-system-node--secondary:nth-last-of-type(2){grid-column:2/4}
.kiro-system-node--secondary:nth-last-of-type(1){grid-column:5/7}
.kiro-operating-map__inspector{
  min-height:100%;
  padding:clamp(1.5rem,3vw,2.2rem);
  border-left:1px solid rgba(201,165,90,.48);
  border-top:1px solid rgba(243,239,230,.1);
  border-bottom:1px solid rgba(243,239,230,.1);
  background:#0a090d;
}
.kiro-operating-map__inspector>span{display:block;color:var(--kiro-gold);font:700 8px/1.2 JetBrains Mono,monospace;letter-spacing:.12em;text-transform:uppercase}
.kiro-operating-map__inspector h3{margin:1.15rem 0 .8rem;font-size:clamp(1.55rem,3vw,2.45rem);font-weight:500;letter-spacing:-.045em}
.kiro-operating-map__inspector p{margin:0;color:rgba(243,239,230,.68);font-size:.92rem;line-height:1.68}
.kiro-operating-map__inspector b{display:block;margin-top:1.4rem;padding-top:1rem;border-top:1px solid rgba(243,239,230,.09);color:var(--kiro-stone);font:650 .67rem/1.55 JetBrains Mono,monospace;letter-spacing:.04em}
.kiro-operating-map__inspector a{display:inline-block;margin-top:1.25rem;color:var(--kiro-gold-hi);font-size:.8rem;text-decoration:none;border-bottom:1px solid rgba(201,165,90,.3)}
@media(hover:hover) and (pointer:fine){.kiro-system-node:hover{border-color:rgba(232,200,128,.44);transform:translateY(-3px)}}
@media(max-width:980px){
  .kiro-operating-map{grid-template-columns:1fr}
  .kiro-operating-map__graph{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .kiro-operating-map__graph>i,.kiro-operating-map__fork{display:none}
  .kiro-system-node--secondary:nth-last-of-type(2),.kiro-system-node--secondary:nth-last-of-type(1){grid-column:auto;grid-row:auto}
  .kiro-system-node{min-height:0}
  .kiro-system-node>strong{margin-top:1rem}
}
@media(prefers-reduced-motion:reduce){.kiro-system-node{transition:none!important;transform:none!important}}