/* v4 additions on top of v3 */
.hero { min-height: min(100svh, 1000px); }
.hero-h { font-size: clamp(3rem, 7.2vw, 7.2rem); max-width: 15ch !important; }
.hero-inner { padding-bottom: 44px; }
.trust-bar { position: relative; z-index: 1; border-top: 1px solid rgba(242,245,246,0.14); background: rgba(7,9,10,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.trust-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust-cell { padding: 20px 20px 22px 0; display: grid; gap: 6px; min-width: 0; }
.trust-cell + .trust-cell { padding-left: 20px; border-left: 1px solid rgba(242,245,246,0.12); }
.trust-cell .mono { color: var(--on-night-3); }
.trust-cell b { font-weight: 500; color: var(--on-night); }
@media (max-width: 860px) { .trust-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust-cell:nth-child(3) { padding-left: 0; border-left: 0; } .trust-cell:nth-child(n+3) { border-top: 1px solid rgba(242,245,246,0.12); } }

/* Roles */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); }
@media (max-width: 960px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .roles { grid-template-columns: 1fr; } }
.role { padding: 28px 26px 26px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; gap: 12px; align-content: start; background: var(--paper); transition: background 180ms; min-width: 0; }
.role:hover { background: var(--paper-card); }
.role > .mono { color: var(--aqua-ink); }
.role h3 { font: 700 1.7rem/1.05 var(--f-display); font-stretch: 110%; letter-spacing: -0.03em; color: var(--ink); }
.role p { color: var(--ink-2); }
.role-m { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 0.92rem; display: grid; gap: 4px; }
.role-m .mono { color: var(--ink-3); }

/* Why */
.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
@media (max-width: 1000px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .why { grid-template-columns: 1fr; } }
.why article { padding: 26px 24px 8px 0; display: grid; gap: 12px; align-content: start; min-width: 0; }
.why article + article { padding-left: 24px; border-left: 1px solid var(--rule); }
@media (max-width: 1000px) { .why article:nth-child(3) { padding-left: 0; border-left: 0; } .why article:nth-child(n+3) { border-top: 1px solid var(--rule); } }
@media (max-width: 600px) { .why article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }
.why-n { font: 700 2.6rem/1 var(--f-display); font-stretch: 112%; color: var(--aqua-ink); letter-spacing: -0.04em; }
.why h3 { font: 600 1.3rem/1.2 var(--f-sans); letter-spacing: -0.015em; color: var(--ink); }
.why p { color: var(--ink-2); }
.instead { font-size: 0.92rem; padding: 12px 0 18px; border-top: 1px dashed var(--rule); margin-top: 6px; display: grid; gap: 4px; color: var(--ink-3) !important; }
.instead .mono { color: var(--ink-3); }

/* Industry panels without photos: result figure on the left */
.ind-v4 { min-height: 0; align-items: stretch; background: linear-gradient(135deg, #10181B, var(--night-2) 60%); border: 1px solid var(--night-rule); border-top: 0; }
.ind-v4::after { background: repeating-radial-gradient(circle at 100% 0%, rgba(0,212,197,0.06) 0 1px, transparent 1px 34px); }
.ind-v4 .ind-content { align-items: center; padding-block: clamp(36px, 5vw, 64px); }
.ind-left { display: grid; gap: 18px; min-width: 0; }
.ind-left h3 { max-width: 16ch; }
.ind-left p { margin-top: 0 !important; }
.ind-result { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--night-rule); margin-top: 6px; }
.ind-result b { font: 700 clamp(3rem, 6vw, 5rem)/0.9 var(--f-display); font-stretch: 115%; letter-spacing: -0.04em; color: var(--aqua); }
.ind-result span { color: var(--on-night); max-width: 24ch; font-size: 1.05rem; line-height: 1.35; }
.ind-result em { display: block; font-style: normal; color: var(--on-night-3); font-size: 0.9rem; margin-top: 4px; }

/* Systems */
.systems { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
@media (max-width: 960px) { .systems { grid-template-columns: 1fr; gap: 36px; } }
.sys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 560px) { .sys-grid { grid-template-columns: 1fr; } }
.sys { background: var(--paper-card); padding: 24px; display: grid; gap: 8px; align-content: start; min-height: 150px; }
.sys .mono { color: var(--aqua-ink); }
.sys b { font: 600 1.15rem var(--f-sans); color: var(--ink); }
.sys > span:last-child { color: var(--ink-3); }
.sys-dim { background: var(--paper-2); }
.sys-dim .mono { color: var(--ink-3); }

/* Security */
.sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
@media (max-width: 900px) { .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sec-grid { grid-template-columns: 1fr; } }
.sec-grid > div { padding: 24px 24px 26px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 8px; align-content: start; }
.sec-grid h3 { font: 600 1.12rem var(--f-sans); color: var(--ink); display: flex; gap: 10px; align-items: center; }
.sec-grid h3::before { content: ""; width: 8px; height: 8px; background: var(--aqua-ink); }
.sec-grid p { color: var(--ink-2); max-width: 34ch; }

/* Case study */
.case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
@media (max-width: 960px) { .case { grid-template-columns: 1fr; gap: 32px; } }
.case-body { display: grid; gap: 22px; }
.case-quote { margin: 0; font: 400 clamp(1.4rem, 2.4vw, 2rem)/1.35 var(--f-sans); letter-spacing: -0.015em; color: var(--on-night); }
.case-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--night-rule); }
.case-facts div { padding: 18px 12px 0 0; display: grid; gap: 4px; }
.case-facts b { font: 700 2rem/1 var(--f-display); color: var(--aqua); }
.case-facts span { color: var(--on-night-2); font-size: 0.92rem; }
.tbc { white-space: normal; overflow-wrap: anywhere; font-size: 0.7rem; line-height: 1.6; letter-spacing: 0.04em; vertical-align: middle; }
.disp .tbc { font-size: 0.9rem; }
.hero > .wrap { width: 100%; }

/* Industry panels with a product screen */
.ind-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important; gap: 48px !important; align-items: center; }
@media (max-width: 1080px) { .ind-grid { grid-template-columns: 1fr !important; } }
.ind-left h3 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
.ind-list { display: grid; gap: 0; border-top: 1px solid var(--night-rule); }
.ind-list li { padding: 10px 0 10px 18px; border-bottom: 1px solid var(--night-rule); color: var(--on-night); position: relative; }
.ind-list li::before { content: ""; position: absolute; left: 0; top: 1.2em; width: 8px; height: 1px; background: var(--aqua); }
.ind-result { border-top: 0; padding-top: 6px; }
.ind-meas { color: var(--on-night-3); }
.scr { box-shadow: 0 50px 100px -50px rgba(0, 212, 197, 0.3), 0 30px 60px -30px rgba(0,0,0,0.9); }
.scr-body { padding: 18px 20px 20px; display: grid; gap: 14px; }
.scr-title { margin: 0; font: 600 17px var(--f-sans); color: var(--on-night); letter-spacing: -0.01em; }
.scr-tbl td { padding: 10px; }
.scr-tbl td:last-child { color: var(--on-night-2); font-size: 12.5px; }
.pill2 { font-size: 11px; font-weight: 600; padding: 2px 9px; white-space: nowrap; }
.pill2.hi { background: rgba(232,145,58,0.16); color: #F0A55A; }
.pill2.md { background: var(--night-3); color: var(--on-night-2); }
.pill2.lo { background: rgba(0,212,197,0.12); color: var(--aqua); }
.scr-ask { display: grid; gap: 8px; }
.scr-ask .bubble-u { justify-self: end; margin: 0; }
.scr-ask .bubble-j { gap: 4px; }

/* Proof-session form */
.contact { padding-block: clamp(90px, 11vw, 150px); }
.contact-grid { display: grid !important; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; justify-items: stretch !important; }
@media (max-width: 1000px) { .contact-grid { grid-template-columns: 1fr; gap: 44px; } }
.contact-left { display: grid; gap: 24px; }
.contact-lede { color: var(--on-night-2); font-size: 1.1rem; max-width: 44ch; }
.next { display: grid; border-top: 1px solid var(--night-rule); }
.next li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--night-rule); }
.next .mono { color: var(--aqua); }
.next b { font-weight: 600; color: var(--on-night); font-size: 1.05rem; }
.next span:last-child { color: var(--on-night-2); }
.pform { background: var(--night-2); border: 1px solid var(--night-rule); padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; }
.f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .f2 { grid-template-columns: 1fr; } }
.fld { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fld label, .fld legend { font-size: 0.86rem; font-weight: 500; color: var(--on-night-2); padding: 0; }
.fld legend span { color: var(--on-night-3); font-weight: 400; }
.pform input:not([type="checkbox"]), .pform select, .pform textarea { width: 100%; background: var(--night); border: 1px solid var(--night-rule); color: var(--on-night); font: 400 1rem var(--f-sans); padding: 12px 14px; border-radius: 0; }
.pform textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.pform input::placeholder, .pform textarea::placeholder { color: var(--on-night-3); }
.pform input:focus, .pform select:focus, .pform textarea:focus { outline: none; border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(0,212,197,0.18); }
.pform [aria-invalid="true"] { border-color: #F0A55A !important; }
.pform select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--on-night-2) 50%), linear-gradient(135deg, var(--on-night-2) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.pform option { background: var(--night-2); color: var(--on-night); }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 4px; }
@media (max-width: 560px) { .checks { grid-template-columns: 1fr; } }
.checks label, .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.93rem; color: var(--on-night); font-weight: 400; cursor: pointer; }
.pform input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--aqua); flex: none; }
.consent { color: var(--on-night-2); }
.consent a { color: var(--aqua); }
.err { margin: 0; min-height: 0; color: #F0A55A; font-size: 0.85rem; }
.err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pform-submit { justify-self: start; border: 0; cursor: pointer; }
.pform-submit:disabled { opacity: 0.6; cursor: progress; }
.pform-done { display: grid; gap: 10px; padding: 12px 0; outline: none; }
.pform-done h3 { margin: 0; font: 700 1.8rem/1.1 var(--f-display); font-stretch: 108%; letter-spacing: -0.02em; }
.pform-done p:last-child { color: var(--on-night-2); }

/* Value calculator */
.calc-grid, .faq-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
@media (max-width: 1000px) { .calc-grid, .faq-grid { grid-template-columns: 1fr; gap: 36px; } }
.calc { background: var(--paper-card); border: 1px solid var(--rule); padding: clamp(20px, 3vw, 32px); display: grid; gap: 22px; color: var(--ink); }
.calc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.calc-tabs label { cursor: pointer; }
.calc-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.calc-tabs label { padding: 9px 14px; border: 1px solid var(--rule); font: 500 0.92rem var(--f-sans); color: var(--ink-2); }
.calc-tabs label:has(input:checked) { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
.calc-tabs label:has(input:focus-visible) { outline: 2px solid var(--aqua); outline-offset: 2px; }
.calc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .calc-fields { grid-template-columns: 1fr; } }
.cf { display: grid; gap: 6px; min-width: 0; }
.cf-wide { grid-column: 1 / -1; }
.cf label { font-size: 0.88rem; color: var(--ink-2); }
.cf b { color: var(--aqua-ink); }
.cf input[type="number"], .cf select { width: 100%; background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink); font: 500 1.05rem var(--f-sans); padding: 11px 13px; font-variant-numeric: tabular-nums; }
.cf input:focus, .cf select:focus { outline: none; border-color: var(--aqua-ink); box-shadow: 0 0 0 3px rgba(0,212,197,0.18); }
.cf input[type="range"] { width: 100%; accent-color: var(--aqua-ink); }
.calc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
@media (max-width: 560px) { .calc-out { grid-template-columns: 1fr; } }
.calc-out div { padding: 18px 16px 4px 0; display: grid; gap: 6px; min-width: 0; }
.calc-out .mono { color: var(--ink-3); }
.calc-out b { font: 700 clamp(2rem, 4vw, 3rem)/1 var(--f-display); font-stretch: 110%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc-out .hi b { color: var(--aqua-ink); }
.calc-cta { justify-self: start; }

/* FAQ */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font: 600 1.12rem/1.35 var(--f-sans); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 1.6rem var(--f-sans); color: var(--aqua-ink); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 64ch; }
.faq a { color: var(--aqua-ink); }

/* Trust Center */
.trust-hero { padding-top: 170px; }
.trust-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.trust-toc a { text-decoration: none; border: 1px solid var(--night-rule); padding: 8px 14px; font-size: 0.9rem; color: var(--on-night-2); }
.trust-toc a:hover { color: var(--on-night); border-color: var(--aqua); }
.trust-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
@media (max-width: 900px) { .trust-cols { grid-template-columns: 1fr; } }
.trust-cols article { padding: 32px 0; border-top: 1px solid var(--ink); display: grid; gap: 12px; align-content: start; scroll-margin-top: 100px; }
.trust-cols .mono { color: var(--aqua-ink); }
.trust-cols h2 { font: 700 1.9rem/1.05 var(--f-display); font-stretch: 110%; letter-spacing: -0.03em; color: var(--ink); }
.trust-cols p { color: var(--ink-2); max-width: 56ch; }
.trust-cols ul { display: grid; gap: 0; margin-top: 4px; }
.trust-cols li { padding: 10px 0 10px 20px; border-bottom: 1px solid var(--rule); color: var(--ink); position: relative; }
.trust-cols li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 8px; height: 8px; background: var(--aqua-ink); }
#security-faq { scroll-margin-top: 90px; }
.mono-inline { font-family: var(--f-mono); color: var(--on-night); }

/* How we start: five steps */
.flow-head { margin-top: clamp(64px, 8vw, 104px); display: grid; gap: 12px; max-width: 64ch; }
.flow-head h3 { color: var(--ink); }
.flow-head p { color: var(--ink-2); }
.steps5 { margin-top: 28px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: s5; }
.steps5 li { position: relative; display: grid; gap: 6px; align-content: start; padding: 0 20px 0 0; min-width: 0; }
.steps5 li::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 1px; background: var(--rule); z-index: 0; }
.steps5 li:last-child::before { right: auto; width: 0; }
.s5n { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 1px solid var(--aqua-ink); color: var(--aqua-ink); font: 600 0.85rem var(--f-mono); margin-bottom: 10px; }
.steps5 li:last-child .s5n { background: var(--aqua-ink); color: var(--paper-2); }
.steps5 b { color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.steps5 li > span:last-child { color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 900px) {
  .steps5 { grid-template-columns: 1fr; gap: 20px; }
  .steps5 li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; padding: 0; }
  .steps5 li::before { left: 15px; right: auto; top: 32px; bottom: -20px; width: 1px; height: auto; }
  .steps5 li:last-child::before { display: none; }
  .s5n { grid-row: span 2; margin: 0; }
}

/* How Juron works: pipeline */
.pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; counter-reset: s; }
.pipe::before { content: ""; position: absolute; left: 0; right: 0; top: 170px; height: 2px; background: linear-gradient(90deg, rgba(0,212,197,0.15), rgba(0,212,197,0.7), rgba(0,212,197,0.15)); }
@media (prefers-reduced-motion: no-preference) {
  .js .pipe::after { content: ""; position: absolute; top: 166px; left: 0; width: 80px; height: 10px; border-radius: 10px; background: radial-gradient(closest-side, rgba(0,212,197,0.9), transparent); animation: travel 4.5s linear infinite; }
  @keyframes travel { from { left: 0; } to { left: calc(100% - 80px); } }
}
.pstage { padding: 0 22px 0 0; display: grid; gap: 14px; align-content: start; position: relative; min-width: 0; }
.pstage + .pstage { padding-left: 22px; }
.pnum { color: var(--aqua); }
.pvis { height: 230px; border: 1px solid var(--night-rule); background: var(--night); display: grid; place-items: center; padding: 16px; position: relative; z-index: 1; overflow: hidden; }
.pstage h3 { font: 700 1.5rem/1.1 var(--f-display); font-stretch: 108%; letter-spacing: -0.02em; color: var(--on-night); margin-top: 6px; }
.pstage p { color: var(--on-night-2); }
.pv-data { grid-template-columns: repeat(2, auto); gap: 8px; align-content: center; justify-content: center; }
.pv-data span { font: 500 0.76rem var(--f-mono); letter-spacing: 0.06em; color: var(--on-night-2); border: 1px solid var(--night-rule); padding: 8px 12px; text-align: center; background: var(--night-2); }
.pv-flow svg { width: 100%; max-width: 230px; height: auto; }
@media (prefers-reduced-motion: no-preference) { .js .pv-flow .pl { stroke-dasharray: 4 5; animation: flow 1.4s linear infinite; } }
.pfrozen .pvis { border-color: rgba(0,212,197,0.55); background: linear-gradient(160deg, rgba(0,212,197,0.12), var(--night) 60%); }
.pv-api { place-items: stretch; align-content: center; gap: 12px; }
.api-top { display: flex; align-items: center; gap: 10px; color: var(--on-night); }
.api-top b { font: 600 0.95rem var(--f-mono); }
.api-top em { margin-left: auto; font: 500 0.7rem var(--f-mono); font-style: normal; color: var(--aqua); border: 1px solid rgba(0,212,197,0.5); padding: 2px 7px; }
.lock { width: 14px; height: 12px; border: 2px solid var(--aqua); border-radius: 2px; position: relative; margin-top: 6px; flex: none; }
.lock::before { content: ""; position: absolute; left: 1px; top: -9px; width: 8px; height: 8px; border: 2px solid var(--aqua); border-bottom: 0; border-radius: 6px 6px 0 0; }
.pv-api code { font: 500 0.78rem var(--f-mono); color: var(--on-night-2); background: var(--night-2); border: 1px solid var(--night-rule); padding: 10px 12px; }
.api-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.api-tags span { font: 500 0.7rem var(--f-mono); color: var(--aqua); background: rgba(0,212,197,0.1); padding: 3px 8px; }
.pv-app { place-items: stretch; align-content: start; gap: 10px; }
.mini-bar { display: flex; gap: 5px; padding-bottom: 8px; border-bottom: 1px solid var(--night-rule); }
.mini-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--night-rule); }
.mini-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-kpi span { height: 44px; border: 1px solid var(--night-rule); background: linear-gradient(180deg, transparent 60%, rgba(0,212,197,0.18) 60%); }
.mini-rows { display: grid; gap: 9px; padding-top: 6px; }
.mini-rows span { height: 12px; background: var(--night-3); border-left: 3px solid var(--aqua); }
.we-do { margin-top: 56px; border: 1px solid var(--night-rule); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 18px 22px; background: var(--night); }
.we-do .mono { color: var(--aqua); }
.we-do ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.we-do li { color: var(--on-night); font-weight: 500; position: relative; padding-left: 16px; }
.we-do li::before { content: "✓"; position: absolute; left: 0; color: var(--aqua); font-size: 0.85rem; }
@media (max-width: 1000px) {
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 0; }
  .pipe::before, .pipe::after { display: none; }
  .pstage:nth-child(3) { padding-left: 0; }
}
@media (max-width: 600px) { .pipe { grid-template-columns: 1fr; } .pstage, .pstage + .pstage { padding: 0; } .pvis { height: 200px; } }
.pipe { gap: 0 28px; }
.pstage, .pstage + .pstage { padding: 0; }
.api-top b { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.api-top em { white-space: nowrap; }
@media (max-width: 1000px) { .pipe { gap: 40px 28px; } }

/* Project view (Data tab) */
.proj { display: grid; }
.proj-head { padding: 18px 20px 0; display: grid; gap: 8px; border-bottom: 1px solid var(--night-rule); }
.proj-head .mono { color: var(--aqua); font-size: 10px; }
.proj-head h4 { margin: 0; font: 650 20px var(--f-sans); color: var(--on-night); letter-spacing: -0.015em; }
.proj-tabs { display: flex; gap: 22px; margin-top: 6px; }
.proj-tabs span { padding: 10px 0; font: 500 13px var(--f-sans); color: var(--on-night-3); border-bottom: 2px solid transparent; }
.proj-tabs span.on { color: var(--on-night); border-bottom-color: var(--aqua); }
.proj-tabs em, .subtabs em { font-style: normal; font: 500 10.5px var(--f-mono); margin-left: 6px; padding: 1px 6px; background: var(--night-3); color: var(--on-night-2); }
.subtabs { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 20px; border-bottom: 1px solid var(--night-rule); font-size: 12.5px; color: var(--on-night-3); }
.subtabs .on { color: var(--on-night); }
.files { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 380px; }
.ftree { border-right: 1px solid var(--night-rule); padding: 12px 10px; display: grid; gap: 2px; align-content: start; font-size: 12.5px; }
.ftree .grp { font: 500 10px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-night-3); padding: 12px 10px 4px; }
.ftree a { display: flex; justify-content: space-between; padding: 6px 10px; color: var(--on-night-2); text-decoration: none; }
.ftree a.on { background: var(--night-3); color: var(--on-night); box-shadow: inset 2px 0 0 var(--aqua); }
.ftree em { font-style: normal; font: 500 10.5px var(--f-mono); color: var(--on-night-3); }
.ftbl { font-size: 12.5px; }
.ftbl td { color: var(--on-night-2); white-space: nowrap; }
.ftbl td.nm { color: var(--on-night); font-weight: 500; white-space: normal; }
.stt { font-size: 11px; font-weight: 600; padding: 2px 8px; }
.stt.ok { background: rgba(0,212,197,0.12); color: var(--aqua); }
.stt.dr { background: rgba(232,145,58,0.16); color: #F0A55A; }
.stt.none { color: var(--on-night-3); border: 1px solid var(--night-rule); font-weight: 500; }
@media (max-width: 1180px) { .ftbl .hide-m { display: none; } }
@media (max-width: 760px) { .files { grid-template-columns: 1fr; } .ftree { display: none; } }

/* Apps tab: deploy and share */
.appview-share { grid-template-columns: minmax(0, 1fr) 320px; }
.share { border-left: 1px solid var(--night-rule); background: var(--night); padding: 14px; display: grid; gap: 10px; align-content: start; }
.share-card { border: 1px solid var(--night-rule); background: var(--night-2); padding: 12px 14px; display: grid; gap: 8px; font-size: 12.5px; color: var(--on-night-2); }
.sc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sc-h b { color: var(--on-night); font-size: 14px; font-weight: 600; }
.sc-h .mono { font-size: 10.5px; color: var(--on-night-3); }
.sc-btn { display: block; text-align: center; background: var(--aqua); color: #04110F; font-weight: 600; padding: 8px; font-size: 13px; }
.big-n { font: 700 1.9rem/1 var(--f-display); font-stretch: 110%; color: var(--aqua); letter-spacing: -0.03em; }
.roles-list li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--night-rule); }
.roles-list li:last-child { border-bottom: 0; }
.roles-list b { color: var(--on-night); font-weight: 500; font-family: var(--f-mono); }
.avatars { display: flex; align-items: center; }
.avatars i { width: 24px; height: 24px; border-radius: 50%; background: #1B2A2C; border: 2px solid var(--night-2); margin-left: -6px; display: grid; place-items: center; font: 600 8.5px var(--f-sans); font-style: normal; color: var(--aqua); }
.avatars i:first-child { margin-left: 0; }
.avatars em { font-style: normal; font: 500 11px var(--f-mono); margin-left: 8px; color: var(--on-night-2); }
.ver li { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline; padding: 5px 0; }
.ver b { color: var(--on-night); }
.ver em { font-style: normal; color: var(--on-night-3); text-align: right; font-size: 11.5px; }
@media (max-width: 960px) { .appview-share { grid-template-columns: 1fr; } .share { border-left: 0; border-top: 1px solid var(--night-rule); grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .share { grid-template-columns: 1fr; } }

/* Hero v2: product stage with depth */
.hero { min-height: 0; display: block; padding-top: 0; }
.hero-inner { padding-top: clamp(130px, 16vw, 190px) !important; padding-bottom: 0 !important; gap: 26px !important; }
.hero-h { font-size: clamp(2.9rem, 6.6vw, 6.6rem) !important; max-width: 16ch !important; }
.hero-row { display: flex !important; flex-wrap: wrap; gap: 24px 40px; align-items: center !important; justify-content: space-between; }
.hero-row .hero-sub { max-width: 52ch; }
.stage { position: relative; margin-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 72px); perspective: 2200px; }
.stage-glow { position: absolute; left: 10%; right: 10%; top: 18%; bottom: 0; background: radial-gradient(50% 55% at 50% 50%, rgba(0,212,197,0.32), rgba(0,212,197,0.08) 45%, transparent 72%); filter: blur(40px); pointer-events: none; }
.stage-tilt { position: relative; transform-style: preserve-3d; transform: rotateX(16deg) rotateY(var(--ry, 0deg)) rotateZ(0deg); transform-origin: 50% 0%; transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.stage-screen { position: relative; border: 1px solid #2A3236; background: var(--night-2); box-shadow: 0 0 0 1px rgba(0,212,197,0.08), 0 80px 160px -60px rgba(0,212,197,0.45), 0 50px 100px -40px rgba(0,0,0,0.95); font-size: 13px; line-height: 1.45; color: var(--on-night-2); overflow: hidden; border-radius: 10px; }
.stage-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,9,10,0.85) 100%); pointer-events: none; }
.ss-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.ss-side { border-right: 1px solid var(--night-rule); padding: 12px 10px; display: grid; gap: 2px; align-content: start; }
.ss-side .grp { font: 500 10px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-night-3); padding: 12px 10px 4px; }
.ss-side a { display: flex; justify-content: space-between; padding: 6px 10px; color: var(--on-night-2); }
.ss-side a.on { background: var(--night-3); color: var(--on-night); }
.ss-side em { font-style: normal; font: 500 10.5px var(--f-mono); color: var(--on-night-3); }
.ss-main { padding: 18px 20px; display: grid; gap: 14px; min-width: 0; }
.ss-chart { border: 1px solid var(--night-rule); height: 150px; }
.ss-chart svg { width: 100%; height: 100%; display: block; }
.chip-float { position: absolute; z-index: 2; display: grid; gap: 4px; padding: 14px 16px; background: rgba(14,17,19,0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(0,212,197,0.35); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9), 0 0 40px -10px rgba(0,212,197,0.25); transform: translateZ(80px) translate(var(--px, 0px), var(--py, 0px)); transition: transform 500ms cubic-bezier(.2,.7,.2,1); color: var(--on-night); border-radius: 8px; }
.chip-float .mono { color: var(--aqua); font-size: 10px; }
.chip-float em { font-style: normal; font-size: 12px; color: var(--on-night-2); }
.chip-float .big { font: 700 2rem/1 var(--f-display); font-stretch: 112%; color: var(--aqua); letter-spacing: -0.03em; }
.chip-float.c1 { display: flex; align-items: center; gap: 12px; left: -2%; top: 34%; }
.chip-float.c1 b { font: 600 0.95rem var(--f-mono); }
.chip-float.c1 div { display: grid; gap: 2px; }
.chip-float.c2 { right: -2%; top: 12%; }
.chip-float.c3 { right: 6%; top: 62%; }
@media (max-width: 1100px) { .chip-float.c1 { left: 2%; } .chip-float.c2 { right: 2%; } }
@media (max-width: 860px) {
  .ss-body { grid-template-columns: 1fr; } .ss-side { display: none; }
  .stage-tilt { transform: rotateX(10deg); }
  .chip-float.c1 { top: auto; bottom: -6%; left: 3%; } .chip-float.c2 { top: -8%; right: 3%; } .chip-float.c3 { display: none; }
}
@media (max-width: 560px) {
  .ss-main .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-main .tbl td:last-child, .ss-main .filters { display: none; }
  .chip-float { padding: 10px 12px; } .chip-float .big { font-size: 1.5rem; } .chip-float.c1 em { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .stage-tilt { animation: rise 1400ms cubic-bezier(.16,.8,.2,1) both 200ms; }
  @keyframes rise { from { transform: rotateX(34deg) translateY(60px); } }
  .js .chip-float { animation: pop 900ms cubic-bezier(.2,.8,.2,1) both; }
  .js .chip-float.c1 { animation-delay: 900ms; } .js .chip-float.c2 { animation-delay: 1100ms; } .js .chip-float.c3 { animation-delay: 1300ms; }
  @keyframes pop { from { transform: translateZ(80px) translateY(18px); opacity: 0.2; } }
  .js .hl-line { stroke-dasharray: 900; animation: draw 2200ms ease-out both 700ms; }
}

/* Scroll reveal (JS adds .rv only below the fold, so content is never hidden without JS) */
.rv { transform: translateY(26px); opacity: 0.15; transition: transform 900ms cubic-bezier(.2,.7,.2,1), opacity 900ms ease; }
.rv.in { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rv { transform: none; opacity: 1; transition: none; } }
.chip-float.c1 { left: 3%; top: 46%; }
.chip-float.c2 { right: 3%; top: -7%; }
.chip-float.c3 { right: 5%; top: 58%; }
@media (max-width: 860px) { .chip-float.c1 { top: auto; bottom: 4%; left: 3%; } .chip-float.c2 { top: -9%; right: 3%; } }
@media (max-width: 860px) { .stage { margin-top: 96px; } .chip-float.c2 { top: -64px; } .app-top .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } }
.cal { display: grid; gap: 10px; justify-items: start; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--night-rule); } .cal[hidden] { display: none; }

/* Inner pages */
.page-hero { padding-top: clamp(140px, 16vw, 190px); padding-bottom: clamp(64px, 8vw, 100px); background: radial-gradient(60% 80% at 80% 0%, rgba(0,212,197,0.12), transparent 60%), var(--night); }
.page-h { font-size: clamp(2.8rem, 6.4vw, 6rem) !important; max-width: 17ch; }
.ind-more { color: var(--aqua); text-decoration: none; font-weight: 500; }
.ind-more:hover { text-decoration: underline; }
.ind-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--night-rule); border: 1px solid var(--night-rule); }
@media (max-width: 860px) { .ind-index { grid-template-columns: 1fr; } }
.ind-card-link { background: var(--night-2); padding: clamp(24px, 3vw, 36px); display: grid; gap: 14px; align-content: start; text-decoration: none; color: var(--on-night); transition: background 200ms; }
.ind-card-link:hover { background: #121A1D; }
.ind-card-link .mono { color: var(--aqua); }
.ind-card-link h2 { font: 700 clamp(1.8rem, 3vw, 2.5rem)/1.02 var(--f-display); font-stretch: 110%; letter-spacing: -0.03em; margin: 0; }
.ind-card-link p { color: var(--on-night-2); max-width: 52ch; }
.ind-card-link .go { color: var(--aqua); font-weight: 500; }
.ind-result.sm b { font-size: clamp(2rem, 4vw, 3rem); }
.ind-hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
@media (max-width: 1080px) { .ind-hero-grid { grid-template-columns: 1fr; } }
.ind-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
@media (max-width: 860px) { .ind-detail { grid-template-columns: 1fr; gap: 40px; } }
.ind-list.light { margin-top: 16px; border-top-color: var(--ink); }
.ind-list.light li { color: var(--ink); border-bottom-color: var(--rule); font-size: 1.1rem; padding-block: 14px; }
.ind-list.light li::before { background: var(--aqua-ink); }
.big-measure { font: 700 clamp(1.8rem, 3.2vw, 2.6rem)/1.08 var(--f-display); font-stretch: 108%; letter-spacing: -0.025em; color: var(--ink); margin: 16px 0 14px; }
.two-col { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
@media (max-width: 960px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }
.prose-l { display: grid; gap: 18px; font-size: 1.1rem; color: var(--ink-2); max-width: 62ch; }
.prose-d { display: grid; gap: 28px; font-size: 1.1rem; color: var(--on-night-2); max-width: 62ch; }
.facts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--night-rule); }
@media (max-width: 560px) { .facts-row { grid-template-columns: 1fr; } }
.facts-row div { padding: 16px 12px 0 0; display: grid; gap: 4px; }
.facts-row .mono { color: var(--on-night-3); }
.facts-row b { color: var(--on-night); font-weight: 500; }
.facts-row a { color: var(--aqua); text-decoration: none; }
.why-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.why-3:has(article:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .why-3, .why-3:has(article:nth-child(3):last-child) { grid-template-columns: 1fr; } .why-3 article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }
.roles-table { border-top: 1px solid var(--ink); }
.rrow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 0.6fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
@media (max-width: 760px) { .rrow { grid-template-columns: 1fr; gap: 6px; } }
.rrow h3 { margin: 0; font: 600 1.25rem var(--f-sans); color: var(--ink); letter-spacing: -0.01em; }
.rrow p { color: var(--ink-2); margin-top: 4px; }
.rrow .mono { color: var(--ink-3); }
.apply { margin-top: 28px; color: var(--ink-2); }
.apply b { color: var(--ink); }
.draft-banner { justify-self: start; font: 500 0.78rem var(--f-mono); letter-spacing: 0.06em; color: var(--amber); border: 1px dashed var(--amber); padding: 6px 10px; }
.legal-body { max-width: 760px; display: grid; gap: 14px; }
.legal-body h2 { margin: 26px 0 0; font: 700 1.5rem/1.1 var(--f-display); font-stretch: 108%; letter-spacing: -0.02em; color: var(--ink); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { color: var(--ink-2); line-height: 1.7; }
.contact-page .contact { padding-top: clamp(140px, 16vw, 190px); }

/* Calm version: no entrance or parallax motion; content is all visible at once */
.stage-tilt, .js .stage-tilt { animation: none !important; transform: perspective(2200px) rotateX(8deg) !important; transition: none; }
.chip-float, .js .chip-float { animation: none !important; transform: translateZ(0) !important; transition: none; }
.js .hl-line { animation: none !important; stroke-dasharray: none !important; }
.js .pipe::after { display: none !important; }
.js .pv-flow .pl, .js .canvas .edge { animation: none !important; }
.rv { transform: none !important; opacity: 1 !important; }
#signal { display: none; }

/* Home industries grid and CTA band */
.ind-grid-home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ind-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ind-grid-home { grid-template-columns: 1fr; } }
.ind-grid-home .ind-card-link h3 { margin: 0; font: 700 1.45rem/1.08 var(--f-display); font-stretch: 108%; letter-spacing: -0.02em; }
.ind-grid-home .ind-result { margin-top: auto; }
.ind-grid-home .ind-result b { font-size: 2rem; }
.ind-grid-home .ind-result span { font-size: 0.9rem; color: var(--on-night-2); }
.ind-card-link { min-height: 240px; }
.ind-card-cta { background: linear-gradient(160deg, rgba(0,212,197,0.14), var(--night-2) 70%); }
.cta-band { background: var(--night); border-top: 1px solid var(--night-rule); padding-block: clamp(80px, 10vw, 130px); }
.cta-inner { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: end; justify-content: space-between; }

/* Flat hero product shot */
.stage { perspective: none; }
.stage-tilt, .js .stage-tilt { transform: none !important; }
.stage-screen { border-radius: 12px; }
.stage-screen::after { background: linear-gradient(180deg, transparent 70%, rgba(7,9,10,0.6) 100%); }
.stage-glow { top: 30%; }
@media (max-width: 860px) { .stage { margin-top: 48px; } }

/* Hero: replica of a real Juron app (executive summary) */
.exapp { --exb: #0B1A33; --exb2: #10244A; --exl: #22406E; --ext: #E8EEF8; --ext2: #9DB0CC; --exa: #F5B544; --exg: #45D98C; --exlink: #7CB4FF;
  background: radial-gradient(90% 70% at 85% 100%, rgba(40,90,170,0.45), transparent 60%), radial-gradient(70% 60% at 0% 0%, rgba(30,60,120,0.5), transparent 60%), linear-gradient(180deg, #0A1830, #081428);
  color: var(--ext); padding: 20px 20px 22px; display: grid; gap: 14px; font-size: 12.5px; border-color: #1E3460 !important; box-shadow: 0 60px 120px -60px rgba(40,110,220,0.55), 0 40px 80px -40px rgba(0,0,0,0.9) !important; }
.exapp::after { display: none; }
.ex-head { display: grid; gap: 4px; justify-items: start; }
.ex-kick { font: 500 10px var(--f-mono); letter-spacing: 0.14em; color: var(--ext2); }
.ex-title { font: 700 28px/1.1 var(--f-sans); letter-spacing: -0.02em; color: #fff; display: flex; align-items: center; gap: 8px; }
.ex-title span { color: #6FA8FF; }
.ex-i { font: 600 11px var(--f-sans); font-style: normal; width: 18px; height: 18px; border: 1.5px solid #6FA8FF; color: #6FA8FF; border-radius: 50%; display: inline-grid; place-items: center; }
.ex-sub { color: var(--ext2); font-size: 12.5px; }
.ex-dep { margin-top: 6px; border: 1px solid var(--exl); border-radius: 999px; padding: 5px 12px; color: var(--exg); font-size: 12.5px; }
.ex-dep b { margin-right: 4px; }
.ex-tabs { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--exl); border-radius: 10px; background: rgba(10,24,48,0.6); overflow: hidden; white-space: nowrap; }
.ex-tabs span { padding: 9px 13px; color: var(--ext2); border-radius: 7px; font-size: 12px; }
.ex-tabs span.on { background: linear-gradient(180deg, #2E5BB0, #24479A); color: #fff; font-weight: 600; box-shadow: 0 0 0 1px #4A7BD6 inset; }
.ex-built { display: flex; align-items: center; gap: 10px; border: 1px solid var(--exl); border-radius: 10px; padding: 9px 14px; background: rgba(10,24,48,0.5); }
.ex-built b { color: var(--exg); font-weight: 600; }
.ex-built .m { font: 500 10px var(--f-mono); letter-spacing: 0.1em; color: var(--ext2); }
.ex-built u { color: var(--exlink); }
.ex-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ex-card, .ex-insight { border: 1px solid var(--exl); border-radius: 10px; background: linear-gradient(180deg, rgba(20,42,84,0.75), rgba(12,28,58,0.75)); display: grid; gap: 8px; align-content: start; padding: 12px 12px 0; min-width: 0; }
.ex-ch { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.ex-ch i { width: 22px; height: 22px; border: 1px solid #3A64A8; border-radius: 5px; display: grid; place-items: center; font-style: normal; color: #8FB8FF; font-size: 11px; }
.ex-ch b { font-weight: 600; color: #fff; font-size: 12.5px; line-height: 1.3; }
.ex-ch em { font-style: normal; font-size: 10.5px; color: var(--ext2); background: rgba(255,255,255,0.06); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ex-ch em::before { content: "● "; font-size: 8px; color: #7F93B3; }
.ex-num { font: 800 34px/1 var(--f-sans); letter-spacing: -0.02em; }
.ex-num.amber { color: var(--exa); } .ex-num.green { color: var(--exg); }
.ex-card p, .ex-insight p { color: var(--ext2); font-size: 11.5px; line-height: 1.45; }
.ex-insight p { color: var(--ext); font-size: 12.5px; }
.d { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.d.amber { background: var(--exa); } .d.green { background: var(--exg); }
.ex-src { margin: 4px -12px 0; padding: 9px 12px; border-top: 1px solid var(--exl); color: var(--exlink); font-weight: 600; font-size: 11px; }
.ex-src i { font-style: normal; display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid var(--exlink); border-radius: 50%; font-size: 9px; margin-left: 4px; }
.ex-insight { padding-bottom: 0; }
.ex-chat { position: absolute; right: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%; background: #3D7BE8; box-shadow: 0 10px 30px -6px rgba(61,123,232,0.7); color: #fff; display: grid; place-items: center; font-size: 15px; }
@media (max-width: 1100px) { .ex-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ex-cards .ex-card:nth-child(n+4) { display: none; } }
@media (max-width: 640px) { .ex-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ex-cards .ex-card:nth-child(n+3) { display: none; } .ex-title { font-size: 22px; } .ex-insight { display: none; } .ex-chat { display: none; } }
@media (max-width: 640px) { .ex-ch { grid-template-columns: 22px minmax(0, 1fr); } .ex-ch em { display: none; } }

/* App gallery: same platform, different themes */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }
.gal { margin: 0; display: grid; gap: 12px; min-width: 0; }
.gal figcaption { display: grid; gap: 2px; }
.gal figcaption b { color: var(--ink); font-weight: 600; }
.gal figcaption span { color: var(--ink-3); font-size: 0.9rem; }
.mapp { border-radius: 12px; padding: 16px; display: grid; gap: 12px; align-content: start; min-height: 250px; font-size: 12px; box-shadow: 0 30px 60px -36px rgba(10,20,24,0.45); border: 1px solid transparent; }
.mk { font: 500 9.5px var(--f-mono); letter-spacing: 0.12em; opacity: 0.75; }
.mt { font: 700 17px/1.2 var(--f-sans); letter-spacing: -0.015em; }
.mkpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mkpis div { border-radius: 8px; padding: 8px; display: grid; gap: 2px; }
.mkpis small { font-size: 10px; opacity: 0.75; }
.mkpis b { font: 800 18px/1.1 var(--f-sans); }
.msrc { font-size: 10.5px; font-weight: 600; padding-top: 8px; margin-top: auto; border-top: 1px solid; }
.mlist { display: grid; }
.mlist li { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid; font-weight: 500; }
.mlist i { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.mbars { display: grid; gap: 8px; }
.mbars div { display: grid; gap: 3px; }
.mbars span { font-size: 11px; }
.mbars i { display: block; height: 8px; border-radius: 4px; }
.mspark { width: 100%; height: 70px; }
/* navy executive */
.t-navy { background: radial-gradient(90% 70% at 90% 100%, rgba(40,90,170,0.5), transparent 60%), linear-gradient(180deg, #0B1A33, #081428); color: #E8EEF8; border-color: #1E3460; }
.t-navy .mt span { color: #6FA8FF; }
.t-navy .mkpis div { background: rgba(20,42,84,0.8); border: 1px solid #22406E; }
.t-navy .a { color: #F5B544; } .t-navy .g { color: #45D98C; }
.t-navy .msrc { color: #7CB4FF; border-color: #22406E; }
/* high-contrast light */
.t-light { background: #FFFFFF; color: #111827; border-color: #E5E7EB; }
.t-light .mk { color: #2563EB; opacity: 1; }
.t-light .mlist li { border-color: #EEF0F3; }
.t-light .hi { background: #FEE2E2; color: #B91C1C; } .t-light .md { background: #FEF3C7; color: #92400E; } .t-light .lo { background: #DCFCE7; color: #166534; }
.t-light .msrc { color: #6B7280; border-color: #EEF0F3; font-weight: 500; }
/* brand violet */
.t-violet { background: linear-gradient(180deg, #F7F5FF, #FFFFFF); color: #1E1B4B; border-color: #E4DEFF; }
.t-violet .mk { color: #6D28D9; opacity: 1; }
.t-violet .mbars i { background: linear-gradient(90deg, #7C3AED, #A78BFA); }
.t-violet .mbars div:not(:first-child) i { background: #DDD6FE; }
.t-violet .msrc { color: #6D28D9; border-color: #E4DEFF; }
/* utility dark */
.t-grid { background: linear-gradient(180deg, #1A1F1D, #121614); color: #E9EDE8; border-color: #2A322E; }
.t-grid .mk { color: #F4B23E; opacity: 1; }
.t-grid .mkpis div { background: #202724; border: 1px solid #2E3833; }
.t-grid .y { color: #F4B23E; }
.mapp { height: 262px; } .gal { align-content: start; }