:root {
  --emerald: #1ead7e;
  --emerald-dark: #63e6b8;
  --emerald-soft: #12382b;
  --blue: #2356d7;
  --slate: #a9b9b2;
  --ink: #eff8f4;
  --muted: #94a69e;
  --line: #22332c;
  --paper: #07110d;
  --white: #0c1813;
  --dark: #050a07;
  --dark-soft: #0e1c16;
  --radius: 8px;
  --container: 1240px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .38);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.045em; line-height: 1.05; }
p { color: var(--muted); }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.section-pad { padding: 120px 0; }
.skip-link { position: fixed; z-index: 1000; left: 18px; top: 14px; transform: translateY(-180%); background: var(--ink); color: var(--white); padding: 10px 14px; border-radius: 4px; }
.skip-link:focus { transform: translateY(0); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: none; }
.section-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--emerald-dark); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.section-kicker::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr); align-items: end; gap: 80px; margin-bottom: 72px; }
.section-heading h2 { margin: 18px 0 0; font-size: clamp(42px, 5.5vw, 72px); font-weight: 500; }
.section-heading > p { margin: 0 0 6px; font-size: 17px; }
.section-heading-light h2 { color: var(--white); }
.section-heading-light .section-kicker { color: #6fe0b9; }
.section-heading-light > p { color: #afc5bd; }

.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 11px 18px; border: 1px solid transparent; border-radius: 5px; font-size: 13px; font-weight: 600; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(35, 86, 215, .28); outline-offset: 3px; }
.button-primary { background: var(--emerald); color: #06291f; }
.button-primary:hover { background: #3ec895; }
.button-dark { background: var(--dark); color: var(--white); }
.button-light { background: var(--white); color: var(--dark); }
.button-large { min-height: 54px; padding-inline: 24px; font-size: 14px; }
.button-outline-light { border-color: rgba(255,255,255,.3); color: var(--white); }
.button-outline-light:hover { border-color: var(--white); background: rgba(255,255,255,.06); }
.text-link { display: inline-flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 600; }
.text-link span { color: var(--emerald-dark); font-size: 18px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; background: rgba(247,250,249,.92); border-bottom: 1px solid transparent; backdrop-filter: blur(18px); transition: border-color .2s, box-shadow .2s; }
.site-header.scrolled { border-color: var(--line); box-shadow: 0 8px 30px rgba(36,62,52,.06); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { width: 150px; display: inline-flex; }
.brand img { width: 100%; display: block; }
.desktop-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 42px); margin-left: auto; }
.desktop-nav a { color: #52615b; font-size: 13px; font-weight: 500; transition: color .2s; }
.desktop-nav a:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.language-switch { display: flex; align-items: center; gap: 5px; color: #9aa7a2; font-size: 11px; font-weight: 700; }
.language-switch a { padding: 6px 2px; }
.language-switch a.active { color: var(--ink); }
.header-cta { min-height: 42px; }
.menu-toggle { width: 44px; height: 44px; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 7px; background: transparent; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.menu-toggle span { width: 19px; height: 1.5px; background: var(--ink); transition: transform .2s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 82px 0 0; background: var(--paper); border-top: 1px solid var(--line); }
.mobile-menu nav { height: 100%; display: flex; flex-direction: column; align-items: stretch; padding-top: 30px; }
.mobile-menu nav > a:not(.button) { padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 27px; font-weight: 500; letter-spacing: -.03em; }
.mobile-menu .button { margin-top: 28px; }

.hero { min-height: 810px; padding-top: 180px; display: flex; align-items: center; background: radial-gradient(circle at 84% 20%, rgba(30,173,126,.1), transparent 30%), var(--paper); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(480px, .97fr); gap: clamp(50px, 7vw, 104px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; color: #53635d; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 5px rgba(30,173,126,.1); }
.hero h1 { max-width: 760px; margin-bottom: 30px; font-size: clamp(52px, 6.4vw, 90px); font-weight: 500; }
.hero h1 em, .page-hero h1 em { color: var(--emerald-dark); font-family: Georgia, serif; font-weight: 400; }
.hero-lede { max-width: 660px; margin-bottom: 38px; font-size: clamp(18px, 2vw, 21px); line-height: 1.6; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.hero-proof span { padding: 7px 10px; background: var(--white); border: 1px solid var(--line); border-radius: 4px; color: #55645e; font-size: 11px; font-weight: 600; }
.hero-system { min-width: 0; }
.system-stage { position: relative; aspect-ratio: 1 / .92; overflow: hidden; background: #eaf2ef; border: 1px solid #d7e4df; border-radius: var(--radius); }
.system-stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(72,99,89,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(72,99,89,.07) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle, black 20%, transparent 78%); }
.system-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(63,91,80,.18); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 52%; height: 52%; }
.orbit-two { width: 82%; height: 82%; border-style: dashed; }
.system-core { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; flex-direction: column; background: var(--dark); color: var(--white); border-radius: 50%; box-shadow: 0 20px 50px rgba(16,32,27,.22); }
.triangle-core { position: relative; width: 37px; height: 32px; margin-bottom: 10px; }
.triangle-core::before, .triangle-core::after, .triangle-core span { content: ""; position: absolute; width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 32px solid var(--emerald); }
.triangle-core::after { left: 8px; top: 9px; transform: scale(.55); border-bottom-color: var(--dark); }
.system-core strong { font-size: 14px; }
.system-core small { color: #91a99f; font-size: 10px; }
.system-node { position: absolute; width: 124px; padding: 13px 14px; background: rgba(255,255,255,.92); border: 1px solid #ceddd7; border-radius: 5px; box-shadow: 0 12px 30px rgba(40,72,60,.09); }
.system-node span { float: right; color: #9caea7; font-size: 9px; }
.system-node strong, .system-node small { display: block; }
.system-node strong { font-size: 12px; }
.system-node small { color: var(--muted); font-size: 10px; }
.node-a { left: 7%; top: 14%; }
.node-b { right: 6%; top: 20%; }
.node-c { right: 15%; bottom: 10%; }
.system-signal { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 8px rgba(30,173,126,.12); }
.signal-a { left: 27%; top: 42%; }
.signal-b { right: 26%; top: 45%; }
.signal-c { left: 35%; bottom: 20%; }
.system-caption { min-height: 52px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 0 16px; margin-top: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 5px; color: #5d6e67; font-size: 11px; }
.system-caption strong { color: var(--emerald-dark); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }

.industry-strip { background: var(--white); border-block: 1px solid var(--line); }
.strip-inner { min-height: 92px; display: flex; align-items: center; gap: 50px; }
.strip-inner > span { flex: 0 0 auto; color: #96a49f; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.strip-list { width: 100%; display: flex; justify-content: space-between; gap: 30px; color: #5d6a65; font-size: 13px; font-weight: 600; }

.services { background: var(--white); }
.service-list { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 64px minmax(250px, .9fr) minmax(280px, 1fr) 56px; align-items: start; gap: 42px; padding: 48px 0; border-bottom: 1px solid var(--line); }
.service-number { color: #9baba5; font-size: 11px; font-weight: 700; }
.service-copy h3 { margin-bottom: 16px; font-size: clamp(29px, 3vw, 42px); font-weight: 500; }
.service-copy p { max-width: 470px; margin-bottom: 0; }
.service-items { list-style: none; padding: 0; margin: 2px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 24px; }
.service-items li { position: relative; padding-left: 16px; color: #45544e; font-size: 13px; }
.service-items li::before { content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--emerald); }
.service-action { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--emerald-dark); font-size: 18px; transition: background .2s, color .2s; }
.service-action:hover { background: var(--emerald); color: var(--dark); }

.selected-work { background: var(--dark); color: var(--white); }
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.case-card { --case-accent: #1ead7e; padding: 22px; background: var(--dark-soft); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); transition: transform .25s, border-color .25s; }
.case-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.22); }
.case-card-top { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; color: #9db2aa; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.case-visual { height: 260px; display: grid; place-items: center; overflow: hidden; margin-bottom: 28px; background: color-mix(in srgb, var(--case-accent) 23%, #17382d); border-radius: 4px; }
.mock-window { width: 74%; height: 68%; overflow: hidden; background: #f8faf9; border-radius: 5px; box-shadow: 0 24px 50px rgba(0,0,0,.28); transform: rotate(-2deg); }
.mock-bar { height: 24px; display: flex; align-items: center; gap: 4px; padding: 0 9px; background: #e7eeeb; }
.mock-bar i { width: 5px; height: 5px; background: #a8b6b1; border-radius: 50%; }
.mock-layout { height: calc(100% - 24px); display: grid; grid-template-columns: 23% 1fr; }
.mock-sidebar { background: #243c34; }
.mock-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 18px; }
.mock-content i { height: 34px; background: color-mix(in srgb, var(--case-accent) 30%, #e9efed); border-radius: 2px; }
.mock-content b { grid-column: 1 / -1; display: block; height: 55px; background: #e9efed; border-radius: 2px; }
.case-card h3 { max-width: 520px; margin-bottom: 14px; font-size: clamp(26px, 3vw, 38px); font-weight: 500; }
.case-card p { min-height: 52px; color: #aabeb6; font-size: 14px; }
.case-card > a { display: inline-flex; gap: 14px; align-items: center; margin-top: 8px; color: #dce9e4; font-size: 12px; font-weight: 600; }
.case-card > a span { color: var(--case-accent); }
.accent-blue { --case-accent: #4f7ff1; }
.accent-violet { --case-accent: #8d69df; }
.accent-amber { --case-accent: #d59c37; }
.accent-cyan { --case-accent: #42b8c5; }
.accent-rose { --case-accent: #d76c8b; }
.accent-slate { --case-accent: #78909c; }
.accent-teal { --case-accent: #2aa596; }
.accent-indigo { --case-accent: #5d6cce; }
.accent-orange { --case-accent: #e18342; }
.accent-lime { --case-accent: #84b94c; }
.accent-green { --case-accent: #47a85d; }
.section-cta { display: flex; justify-content: center; margin-top: 46px; }

.web-catalog { background: var(--paper); }
.web-type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.web-type-card { overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.type-preview { height: 190px; display: grid; place-items: center; background: #e8f2ee; }
.preview-browser { width: 78%; height: 70%; overflow: hidden; background: var(--white); border-radius: 4px; box-shadow: 0 16px 38px rgba(29,70,55,.13); }
.preview-top { height: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; background: #f0f4f2; }
.preview-top span { width: 22px; height: 3px; background: #90a79e; }
.preview-top i { width: 5px; height: 5px; background: var(--emerald); border-radius: 50%; }
.preview-body { height: calc(100% - 20px); display: grid; grid-template-columns: 1.5fr 1fr; gap: 7px; align-content: center; padding: 14px; }
.preview-body b { display: block; height: 5px; background: #d8e3df; }
.preview-body b:nth-child(2) { width: 80%; }
.preview-body b:nth-child(3) { width: 55%; }
.preview-body em { grid-column: 2; grid-row: 1 / 4; background: var(--emerald); opacity: .28; border-radius: 2px; }
.type-preview-conversion { background: #e6edfb; }
.type-preview-commerce { background: #f4eadf; }
.type-preview-marketplace { background: #eee8f5; }
.type-preview-booking { background: #e2f1f1; }
.type-preview-portal { background: #e9ecf4; }
.type-preview-dashboard { background: #e7eeee; }
.type-preview-platform { background: #e8f1e8; }
.type-copy { padding: 24px 22px 26px; }
.type-copy > span { color: #9aa9a3; font-size: 10px; font-weight: 700; }
.type-copy h3 { margin: 12px 0 10px; font-size: 21px; font-weight: 600; }
.type-copy p { margin: 0; font-size: 13px; line-height: 1.6; }
.catalog-note { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-top: 38px; margin-top: 38px; border-top: 1px solid var(--line); }
.catalog-note p { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; }

.process { background: var(--white); }
.process-grid { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(480px, 1.2fr); gap: clamp(70px, 10vw, 150px); }
.process-intro { position: sticky; top: 120px; align-self: start; }
.process-intro h2 { margin: 20px 0 24px; font-size: clamp(44px, 5.6vw, 74px); font-weight: 500; }
.process-intro p { max-width: 450px; }
.process-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.process-list li { display: grid; grid-template-columns: 46px 1fr; gap: 26px; padding: 38px 0; border-bottom: 1px solid var(--line); }
.process-list li > span { color: var(--emerald-dark); font-size: 11px; font-weight: 700; }
.process-list h3 { margin-bottom: 10px; font-size: 31px; font-weight: 500; }
.process-list p { max-width: 520px; margin: 0; }

.principles { padding-top: 0; background: var(--white); }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.principle-grid article { min-height: 300px; padding: 34px; border-right: 1px solid var(--line); }
.principle-grid article:last-child { border-right: 0; }
.principle-grid article > span { color: var(--emerald-dark); font-size: 10px; font-weight: 700; }
.principle-grid h3 { margin: 80px 0 18px; font-size: 26px; font-weight: 500; }
.principle-grid p { margin: 0; font-size: 14px; }

.faq { background: var(--paper); border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(70px, 10vw, 150px); }
.faq-intro h2 { margin: 18px 0 0; font-size: clamp(42px, 5vw, 66px); font-weight: 500; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 30px; list-style: none; cursor: pointer; font-size: 17px; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.faq-list summary i::before, .faq-list summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; background: var(--emerald-dark); transform: translate(-50%, -50%); }
.faq-list summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s; }
.faq-list details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq-list details p { max-width: 650px; padding: 0 42px 25px 0; margin: 0; }

.final-cta { overflow: hidden; background: var(--emerald); color: #06271d; }
.final-cta-inner { position: relative; min-height: 650px; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; padding-block: 100px; }
.final-cta .section-kicker { color: #0b5c43; }
.final-cta h2 { margin: 22px 0 25px; font-size: clamp(58px, 8vw, 105px); font-weight: 500; }
.final-cta p { max-width: 650px; margin-bottom: 34px; color: #145a46; font-size: 18px; }
.cta-mark { position: absolute; inset: auto -5% -53% auto; width: 520px; height: 460px; opacity: .16; }
.cta-mark::before, .cta-mark::after, .cta-mark span { content: ""; position: absolute; border-left: 260px solid transparent; border-right: 260px solid transparent; border-bottom: 450px solid #06271d; }
.cta-mark::after { left: 54px; top: 64px; transform: scale(.7); border-bottom-color: var(--emerald); }

.site-footer { background: #0c1915; color: var(--white); }
.footer-main { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 78px 0 70px; }
.footer-brand img { width: 148px; filter: brightness(0) invert(1); opacity: .96; }
.footer-brand p { max-width: 390px; margin: 28px 0 0; color: #91a69e; }
.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; }
.footer-links > div { display: flex; flex-direction: column; gap: 10px; }
.footer-label { margin-bottom: 12px; color: #71887f; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.footer-links a, .footer-links span:not(.footer-label) { color: #becdc8; font-size: 13px; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid rgba(255,255,255,.09); color: #71877f; font-size: 10px; }
.whatsapp-float { position: fixed; z-index: 80; right: 22px; bottom: 22px; min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--dark); color: var(--white); border: 1px solid rgba(255,255,255,.12); border-radius: 28px; box-shadow: 0 12px 35px rgba(8,26,20,.22); font-size: 11px; font-weight: 600; }
.whatsapp-float > span:first-child { color: var(--emerald); }

/* Work catalog */
.page-hero { padding-top: 190px; padding-bottom: 90px; }
.page-hero-grid { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 100px; }
.page-hero h1 { margin: 20px 0 0; font-size: clamp(56px, 7vw, 96px); font-weight: 500; }
.page-hero-aside p { margin-bottom: 25px; font-size: 17px; }
.confidential-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px; background: var(--white); border: 1px solid var(--line); border-radius: 4px; color: #52615c; font-size: 10px; font-weight: 600; }
.confidential-badge span { color: var(--emerald); }
.work-catalog { padding-top: 30px; background: var(--white); }
.filter-bar { position: sticky; z-index: 20; top: 82px; display: flex; flex-wrap: wrap; gap: 6px; padding: 15px 0; margin-bottom: 28px; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.filter-bar button { min-height: 38px; padding: 7px 13px; background: transparent; border: 1px solid var(--line); border-radius: 4px; color: #60716a; font-size: 11px; font-weight: 600; cursor: pointer; }
.filter-bar button.active { background: var(--dark); border-color: var(--dark); color: var(--white); }
.work-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.work-index-card { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.work-index-card[hidden] { display: none; }
.work-index-meta { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 18px; color: #778880; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.work-index-visual { --case-accent: #1ead7e; position: relative; height: 300px; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--case-accent) 18%, #e8f1ed); }
.index-ui { width: 66%; height: 70%; overflow: hidden; background: var(--white); border-radius: 5px; box-shadow: 0 20px 55px rgba(20,52,40,.18); transform: rotate(1.5deg); }
.index-ui-head { height: 27px; display: flex; gap: 5px; align-items: center; padding: 0 10px; background: #edf2f0; }
.index-ui-head i { width: 6px; height: 6px; border-radius: 50%; background: #adbbb6; }
.index-ui-body { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 20px; }
.index-ui-body span { grid-column: 1 / -1; height: 5px; background: #dfe8e5; }
.index-ui-body span:nth-child(2) { width: 76%; }
.index-ui-body span:nth-child(3) { width: 48%; }
.index-ui-body b { height: 45px; background: color-mix(in srgb, var(--case-accent) 24%, #e6efec); }
.index-code { position: absolute; right: 17px; bottom: 12px; color: rgba(31,61,50,.25); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.work-index-copy { padding: 28px; }
.work-index-copy h2 { margin-bottom: 14px; font-size: 32px; font-weight: 500; }
.work-index-copy p { min-height: 52px; font-size: 14px; }
.work-index-copy a { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--emerald-dark); font-size: 12px; font-weight: 600; }
.filter-empty { padding: 80px 0; text-align: center; }
.compact-cta { padding: 70px 0; background: #e7f1ed; border-top: 1px solid var(--line); }
.compact-cta-inner { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 60px; }
.compact-cta h2 { margin: 14px 0 0; font-size: 44px; font-weight: 500; }
.compact-cta p { margin: 0; }

/* Case detail */
.case-hero { --case-accent: var(--emerald); padding-top: 155px; padding-bottom: 90px; background: color-mix(in srgb, var(--case-accent) 14%, #eef5f2); }
.back-link { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 54px; color: #53645d; font-size: 11px; font-weight: 600; }
.case-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); gap: 90px; align-items: center; }
.case-detail-meta { display: flex; gap: 12px; margin-bottom: 24px; }
.case-detail-meta span { padding: 6px 9px; background: rgba(255,255,255,.65); border: 1px solid rgba(53,83,72,.16); border-radius: 3px; color: #52645d; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.case-hero h1 { margin: 0; font-size: clamp(52px, 6.6vw, 88px); font-weight: 500; }
.case-hero-visual { min-width: 0; }
.detail-screen { overflow: hidden; height: 430px; background: var(--white); border-radius: 7px; box-shadow: var(--shadow); transform: perspective(1200px) rotateY(-4deg) rotateX(2deg); }
.detail-screen-head { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #eef3f1; }
.detail-screen-head i { width: 6px; height: 6px; border-radius: 50%; background: #a8b7b1; }
.detail-screen-head span { margin-left: auto; color: #87978f; font-size: 9px; }
.detail-screen-body { height: calc(100% - 40px); display: grid; grid-template-columns: 22% 1fr; }
.detail-screen-body aside { display: flex; flex-direction: column; gap: 12px; padding: 24px 18px; background: var(--dark); }
.detail-screen-body aside b { height: 6px; background: rgba(255,255,255,.18); border-radius: 2px; }
.detail-screen-body aside b:first-child { background: var(--case-accent); }
.detail-screen-body section { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; padding: 35px; }
.detail-screen-body section > span { height: 7px; background: #dce6e2; }
.detail-screen-body section > span:nth-child(2) { width: 60%; }
.detail-screen-body section > div { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.detail-screen-body section i { height: 80px; background: color-mix(in srgb, var(--case-accent) 22%, #e7efec); border-radius: 3px; }
.detail-screen-body section em { grid-column: 1 / -1; display: block; height: 120px; background: #ecf2f0; border-radius: 3px; }
.case-story { background: var(--white); }
.case-story-grid { display: grid; grid-template-columns: .38fr 1fr; column-gap: 80px; }
.story-label, .story-copy { padding: 55px 0; border-bottom: 1px solid var(--line); }
.story-label { display: flex; gap: 22px; align-items: flex-start; color: #5d6d67; font-size: 11px; }
.story-label span { color: var(--emerald-dark); font-weight: 700; }
.story-copy h2 { margin-bottom: 20px; font-size: 44px; font-weight: 500; }
.story-copy p { max-width: 820px; margin: 0; font-size: 20px; line-height: 1.65; }
.case-delivery { background: var(--paper); }
.delivery-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.delivery-grid article { min-height: 270px; padding: 28px; border-right: 1px solid var(--line); }
.delivery-grid article:last-child { border-right: 0; }
.delivery-grid article > span { color: var(--emerald-dark); font-size: 10px; font-weight: 700; }
.delivery-grid h3 { margin: 72px 0 15px; font-size: 25px; font-weight: 500; }
.delivery-grid p { margin: 0; font-size: 13px; }
.next-case { background: var(--dark); color: var(--white); }
.next-case-inner { padding-block: 65px; }
.next-case-inner > span { display: block; margin-bottom: 22px; color: #7f968d; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.next-case a { display: grid; grid-template-columns: .45fr 1fr auto; align-items: center; gap: 50px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.next-case strong { font-size: 16px; }
.next-case em { color: #a6bbb3; font-size: 20px; font-style: normal; }
.next-case i { color: var(--emerald); font-size: 32px; font-style: normal; }
.not-found { min-height: 70vh; padding-top: 190px; }
.not-found h1 { margin: 20px 0 35px; font-size: 72px; font-weight: 500; }
.legal-page { min-height: 80vh; padding-top: 170px; background: var(--white); }
.legal-layout { display: grid; grid-template-columns: .35fr 1fr; gap: 100px; }
.legal-layout aside p { margin-top: 16px; font-size: 11px; }
.legal-layout article { max-width: 800px; }
.legal-layout h1 { margin-bottom: 70px; font-size: clamp(52px, 6.6vw, 84px); font-weight: 500; }
.legal-layout section { padding: 32px 0; border-top: 1px solid var(--line); }
.legal-layout section h2 { font-size: 24px; font-weight: 500; }
.legal-layout section p { margin-bottom: 0; }
.legal-layout article > .button { margin-top: 35px; }

@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; }
  .hero-grid { grid-template-columns: 1fr 470px; gap: 45px; }
  .web-type-grid { grid-template-columns: repeat(2, 1fr); }
  .service-row { grid-template-columns: 45px 1fr 1fr 48px; gap: 26px; }
  .case-hero-grid { gap: 48px; }
  .compact-cta-inner { grid-template-columns: 1fr 1fr; }
  .compact-cta-inner .button { justify-self: start; }
}

@media (max-width: 900px) {
  .section-pad { padding: 88px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 28px; margin-bottom: 50px; }
  .section-heading > p { max-width: 620px; }
  .hero { padding-top: 140px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .hero-system { max-width: 640px; width: 100%; }
  .strip-inner { align-items: flex-start; flex-direction: column; gap: 18px; padding-block: 26px; }
  .strip-list { flex-wrap: wrap; justify-content: flex-start; }
  .service-row { grid-template-columns: 40px 1fr 48px; }
  .service-items { grid-column: 2; }
  .service-action { grid-column: 3; grid-row: 1; }
  .case-grid, .work-index { grid-template-columns: 1fr; }
  .case-visual { height: 310px; }
  .process-grid, .faq-grid { grid-template-columns: 1fr; gap: 60px; }
  .process-intro { position: static; }
  .principle-grid, .delivery-grid { grid-template-columns: 1fr; }
  .principle-grid article, .delivery-grid article { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .principle-grid article:last-child, .delivery-grid article:last-child { border-bottom: 0; }
  .principle-grid h3, .delivery-grid h3 { margin-top: 45px; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .page-hero-aside { max-width: 620px; }
  .case-hero-grid { grid-template-columns: 1fr; }
  .case-story-grid { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; gap: 35px; }
  .legal-layout h1 { margin-bottom: 45px; }
  .story-label { padding-bottom: 0; border: 0; }
  .story-copy { padding-top: 18px; }
  .footer-main { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
  .header-inner { min-height: 72px; }
  .site-header .brand { width: 126px; }
  .header-cta { display: none; }
  .header-actions { gap: 13px; }
  .mobile-menu { top: 72px; }
  .hero { min-height: auto; padding-top: 128px; padding-bottom: 80px; }
  .hero h1 { font-size: clamp(46px, 14vw, 68px); }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 20px; }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-link { justify-content: center; }
  .system-stage { min-height: 410px; aspect-ratio: auto; }
  .system-core { width: 125px; height: 125px; }
  .system-node { width: 105px; padding: 10px; }
  .node-a { left: 5%; top: 10%; }
  .node-b { right: 4%; top: 19%; }
  .node-c { right: 10%; bottom: 9%; }
  .service-row { grid-template-columns: 32px 1fr; gap: 20px; }
  .service-items { grid-column: 1 / -1; grid-template-columns: 1fr; padding-left: 52px; }
  .service-action { grid-column: 2; grid-row: 1; justify-self: end; }
  .case-grid { margin-inline: -2px; }
  .case-card { padding: 16px; }
  .case-visual { height: 210px; }
  .case-card-top { align-items: flex-start; flex-direction: column; gap: 6px; }
  .web-type-grid { grid-template-columns: 1fr; }
  .catalog-note { align-items: flex-start; flex-direction: column; }
  .principle-grid { border-inline: 0; }
  .faq-list summary { font-size: 15px; }
  .final-cta-inner { min-height: 580px; }
  .final-cta h2 { font-size: clamp(52px, 15vw, 78px); }
  .footer-links { grid-template-columns: 1fr; }
  .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 18px; }
  .whatsapp-float { right: 14px; bottom: 14px; width: 48px; height: 48px; justify-content: center; padding: 0; }
  .whatsapp-float span:last-child { display: none; }
  .page-hero { padding-top: 145px; }
  .page-hero h1 { font-size: clamp(50px, 14vw, 72px); }
  .work-index-visual { height: 230px; }
  .work-index-copy { padding: 22px; }
  .work-index-copy h2 { font-size: 28px; }
  .filter-bar { top: 72px; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; margin-inline: 0; padding-inline: 0; scrollbar-width: none; }
  .filter-bar button { flex: 0 0 auto; }
  .compact-cta-inner { grid-template-columns: 1fr; gap: 26px; }
  .case-hero { padding-top: 130px; }
  .back-link { margin-bottom: 38px; }
  .case-hero h1 { font-size: clamp(46px, 13vw, 66px); }
  .detail-screen { height: 300px; }
  .detail-screen-body section { padding: 20px; }
  .story-copy h2 { font-size: 34px; }
  .story-copy p { font-size: 17px; }
  .next-case a { grid-template-columns: 1fr auto; gap: 20px; }
  .next-case em { grid-column: 1 / -1; grid-row: 2; }
  .next-case i { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 420px) {
  .container { width: min(calc(100% - 24px), var(--container)); }
  .section-pad { padding: 72px 0; }
  .section-heading h2 { font-size: 39px; }
  .language-switch { gap: 3px; }
  .hero h1 { font-size: 44px; }
  .hero-lede { font-size: 17px; }
  .system-stage { min-height: 360px; }
  .system-caption { grid-template-columns: auto 1fr; }
  .system-caption strong { display: none; }
  .case-visual { height: 180px; }
  .type-preview { height: 165px; }
  .process-list li { grid-template-columns: 35px 1fr; gap: 16px; }
  .process-list h3 { font-size: 26px; }
  .page-hero h1 { font-size: 45px; }
  .detail-screen { height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* 2026 dark identity and contextual navigation */
.site-header { background: rgba(7,17,13,.9); border-color: rgba(255,255,255,.04); }
.site-header.scrolled { border-color: var(--line); box-shadow: 0 12px 38px rgba(0,0,0,.28); }
.brand { width: auto; display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.brand-symbol { position: relative; width: 25px; height: 23px; display: inline-block; background: var(--emerald); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.brand-symbol i { position: absolute; left: 6px; right: 6px; top: 7px; bottom: 4px; background: var(--paper); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.brand-word { font-size: 22px; font-weight: 700; letter-spacing: -.055em; }
.brand-footer { color: var(--ink); }
.site-footer .brand-symbol i { background: #050a07; }
.desktop-nav a { position: relative; color: #91a49b; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--ink); }
.desktop-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--emerald); }
.language-switch a.active { color: var(--ink); }
.button-dark { background: var(--ink); color: #07110d; }
.button-dark:hover { background: var(--emerald); }
.button-light { background: var(--ink); color: #07110d; }
.button-outline-light { border-color: #34493f; color: var(--ink); }
.button-outline-light:hover { border-color: var(--emerald); color: var(--ink); }
.skip-link { background: var(--ink); color: #07110d; }
.mobile-menu { background: #07110d; }
.mobile-menu nav > a.active { color: var(--emerald); }
.hero { background: radial-gradient(circle at 82% 18%, rgba(30,173,126,.16), transparent 32%), radial-gradient(circle at 12% 88%, rgba(35,86,215,.1), transparent 26%), var(--paper); }
.eyebrow { color: #91a39b; }
.hero h1 em, .page-hero h1 em { color: var(--emerald); }
.hero-proof span { background: #0b1712; color: #9fb1a9; }
.system-stage { background: #09150f; border-color: #1f342a; }
.system-stage::before { background-image: linear-gradient(rgba(100,230,184,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(100,230,184,.06) 1px, transparent 1px); }
.system-orbit { border-color: rgba(99,230,184,.18); }
.system-core { background: #0d1d16; color: var(--ink); }
.triangle-core::after { border-bottom-color: #0d1d16; }
.system-node { background: rgba(10,24,18,.94); border-color: #284238; box-shadow: 0 18px 36px rgba(0,0,0,.34); }
.system-node span, .system-node small { color: #789087; }
.system-caption { background: #0b1712; color: #8fa39a; }
.industry-strip, .services, .process, .principles, .work-catalog, .case-story, .legal-page { background: #09130f; }
.strip-list { color: #9aaca4; }
.technology-partners { background: #050a07; border-bottom: 1px solid var(--line); }
.technology-partners-inner { min-height: 240px; display: grid; grid-template-columns: 1.15fr .75fr auto; align-items: center; gap: 70px; }
.technology-partners h2 { max-width: 620px; margin: 18px 0 0; font-size: clamp(30px, 3.6vw, 48px); font-weight: 500; }
.technology-partners p { margin: 0; }
.technology-names { display: flex; align-items: center; gap: 14px; color: var(--ink); font-size: 18px; font-weight: 600; }
.technology-names span { padding: 13px 16px; border: 1px solid #2b4138; border-radius: 5px; background: #0b1712; }
.technology-names i { color: var(--emerald); font-style: normal; }
.service-number, .strip-inner > span { color: #667a71; }
.service-items li { color: #a5b6ae; }
.service-action { color: var(--emerald); }
.selected-work { background: #040806; color: var(--ink); }
.section-heading-light h2 { color: var(--ink); }
.case-card { background: #0a1510; }
.mock-window, .preview-browser, .index-ui, .detail-screen { background: #0c1813; }
.mock-bar, .preview-top, .index-ui-head, .detail-screen-head { background: #14231c; }
.mock-bar i, .index-ui-head i, .detail-screen-head i { background: #52665d; }
.mock-sidebar { background: #050a07; }
.mock-content i, .mock-content b, .preview-body b, .index-ui-body span, .detail-screen-body section > span, .detail-screen-body section em { background: #1a2a23; }
.case-card p { color: #9bada5; }
.real-project-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 13px; color: #8fa39a; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.real-project-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px rgba(30,173,126,.1); }
.case-card-actions, .work-card-actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; }
.case-card-actions a, .work-card-actions a { display: inline-flex; align-items: center; gap: 10px; color: #d3e1db; font-size: 11px; font-weight: 600; }
.case-card-actions a:last-child, .work-card-actions a:last-child { color: var(--emerald); }
.web-catalog, .faq, .case-delivery { background: #07110d; }
.web-type-card { background: #0b1712; }
.type-preview { position: relative; background: #0d2119; }
.type-preview-blue { background: #0d1830; }
.type-preview-emerald { background: #0d2119; }
.type-preview-amber { background: #251b0d; }
.type-preview-violet { background: #1c1427; }
.type-preview-cyan { background: #0c2023; }
.type-preview-rose { background: #25131a; }
.type-preview-teal { background: #0d2220; }
.preview-live { position: absolute; left: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; background: rgba(5,10,7,.84); border: 1px solid rgba(255,255,255,.1); border-radius: 3px; color: #bdcec6; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.preview-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--emerald); }
.type-copy > span { color: #687c73; }
.type-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 19px; color: var(--emerald); font-size: 11px; font-weight: 600; }
.catalog-note p { color: var(--ink); }
.principle-grid, .delivery-grid { border-color: var(--line); }
.final-cta { background: #0a1711; color: var(--ink); border-top: 1px solid var(--line); }
.final-cta .section-kicker { color: var(--emerald); }
.final-cta p { color: #99aca3; }
.cta-mark { opacity: .07; }
.cta-mark::before, .cta-mark::after, .cta-mark span { border-bottom-color: var(--emerald); }
.cta-mark::after { border-bottom-color: #0a1711; }
.site-footer { background: #050a07; color: var(--ink); }
.footer-brand img { display: none; }
.footer-brand p { color: #81958c; }
.whatsapp-float { background: var(--emerald); color: #04100b; border-color: transparent; }
.whatsapp-float > span:first-child { color: #04100b; }
.confidential-badge { background: #0b1712; color: #9cafA6; }
.filter-bar { background: rgba(9,19,15,.95); }
.filter-bar button { color: #93a69d; }
.filter-bar button.active { background: var(--emerald); border-color: var(--emerald); color: #03100a; }
.work-index-card { background: #0b1712; }
.work-index-visual { background: color-mix(in srgb, var(--case-accent) 15%, #07110d); }
.index-code { color: rgba(255,255,255,.17); }
.compact-cta { background: #0c1b15; }
.case-hero { background: color-mix(in srgb, var(--case-accent) 10%, #07110d); }
.case-detail-meta span { background: rgba(5,12,8,.58); border-color: rgba(255,255,255,.12); color: #a2b3ab; }
.case-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.detail-screen-body section i { background: color-mix(in srgb, var(--case-accent) 18%, #122119); }
.story-label { color: #8da097; }
.next-case { background: #040806; color: var(--ink); }
.legal-layout section { border-color: var(--line); }

.context-bar { position: sticky; z-index: 70; top: 82px; margin-top: 82px; background: rgba(5,10,7,.94); border-block: 1px solid var(--line); backdrop-filter: blur(16px); }
.context-bar-inner { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.breadcrumbs { min-width: 0; display: flex; align-items: center; gap: 10px; overflow: hidden; color: #6f8279; font-size: 10px; white-space: nowrap; }
.breadcrumbs a { transition: color .2s; }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs span { color: #384b42; }
.breadcrumbs strong { overflow: hidden; color: #c6d5ce; font-weight: 600; text-overflow: ellipsis; }
.context-back { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; color: var(--emerald); font-size: 10px; font-weight: 600; }
.context-bar + .page-hero { padding-top: 92px; }
.context-bar + main .page-hero { padding-top: 92px; }
.context-bar + main .case-hero { padding-top: 86px; }
.context-bar + .legal-page, .context-bar + main.legal-page { padding-top: 92px; }

/* Real catalog */
.catalog-products { padding-top: 34px; background: #09130f; }
.catalog-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.catalog-product-card { --tone: var(--emerald); overflow: hidden; background: #0b1712; border: 1px solid var(--line); border-radius: 8px; }
.catalog-product-card[hidden] { display: none; }
.catalog-product-card.tone-blue { --tone: #4f7ff1; }
.catalog-product-card.tone-emerald { --tone: #1ead7e; }
.catalog-product-card.tone-amber { --tone: #d59c37; }
.catalog-product-card.tone-violet { --tone: #8d69df; }
.catalog-product-card.tone-cyan { --tone: #42b8c5; }
.catalog-product-card.tone-rose { --tone: #d76c8b; }
.catalog-product-card.tone-teal { --tone: #2aa596; }
.catalog-product-preview { position: relative; height: 330px; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--tone) 15%, #07110d); }
.catalog-product-preview::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 30px 30px; }
.catalog-product-number { position: absolute; left: 18px; top: 16px; color: rgba(255,255,255,.32); font-size: 10px; font-weight: 700; }
.catalog-product-screen { position: relative; width: 70%; height: 65%; overflow: hidden; background: #0a1510; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; box-shadow: 0 26px 65px rgba(0,0,0,.38); transform: perspective(1000px) rotateX(2deg) rotateY(-3deg); }
.catalog-product-screen > div { height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #13221b; }
.catalog-product-screen > div i { width: 5px; height: 5px; border-radius: 50%; background: #52665d; }
.catalog-product-screen > section { height: calc(100% - 26px); display: grid; grid-template-columns: 22% 1fr; }
.catalog-product-screen aside { background: #050a07; }
.catalog-product-screen main { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; align-content: start; padding: 20px; }
.catalog-product-screen main b { height: 7px; background: #1f3029; }
.catalog-product-screen main span { height: 56px; background: color-mix(in srgb, var(--tone) 20%, #122119); }
.catalog-product-copy { padding: 28px; }
.catalog-product-meta { display: flex; justify-content: space-between; gap: 20px; color: #72867d; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.catalog-product-copy h2 { margin: 18px 0 13px; font-size: 34px; font-weight: 500; }
.catalog-product-copy p { min-height: 52px; }
.catalog-product-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* Working demos */
.demo-main { background: #07110d; }
.demo-intro { padding: 60px 0 42px; background: #09130f; border-bottom: 1px solid var(--line); }
.demo-intro-inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 50px; }
.demo-intro h1 { margin: 14px 0 10px; font-size: clamp(42px,5vw,66px); font-weight: 500; }
.demo-intro p { max-width: 700px; margin: 0; }
.demo-intro-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.demo-canvas { --demo-accent: var(--emerald); padding: 44px 0 100px; background: radial-gradient(circle at 85% 5%, color-mix(in srgb, var(--demo-accent) 12%, transparent), transparent 28%), #050a07; }
.demo-canvas.tone-blue { --demo-accent: #4f7ff1; }
.demo-canvas.tone-amber { --demo-accent: #d59c37; }
.demo-canvas.tone-violet { --demo-accent: #8d69df; }
.demo-canvas.tone-cyan { --demo-accent: #42b8c5; }
.demo-canvas.tone-rose { --demo-accent: #d76c8b; }
.demo-canvas.tone-teal { --demo-accent: #2aa596; }
.demo-frame { min-height: 720px; display: grid; grid-template-columns: 230px minmax(0,1fr); overflow: hidden; background: #0a1510; border: 1px solid #23372e; border-radius: 9px; box-shadow: 0 35px 90px rgba(0,0,0,.38); }
.demo-sidebar { display: flex; flex-direction: column; padding: 22px 14px; background: #07100c; border-right: 1px solid var(--line); }
.demo-app-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; border-bottom: 1px solid var(--line); }
.demo-app-brand > span { width: 32px; height: 32px; display: grid; place-items: center; background: var(--demo-accent); border-radius: 5px; color: #06100b; font-size: 12px; font-weight: 800; }
.demo-app-brand strong { min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.demo-sidebar nav { display: flex; flex-direction: column; gap: 4px; padding-top: 22px; }
.demo-sidebar nav button { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 11px; padding: 8px 10px; background: transparent; border: 0; border-radius: 4px; color: #7f9389; font-size: 11px; text-align: left; cursor: pointer; }
.demo-sidebar nav button i { width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.demo-sidebar nav button:hover, .demo-sidebar nav button.active { background: color-mix(in srgb, var(--demo-accent) 13%, transparent); color: #dce8e2; }
.demo-sidebar nav button.active i { background: var(--demo-accent); border-color: var(--demo-accent); }
.demo-user { display: flex; align-items: center; gap: 10px; padding: 16px 8px 2px; margin-top: auto; border-top: 1px solid var(--line); }
.demo-user > span { width: 30px; height: 30px; display: grid; place-items: center; background: #17271f; border-radius: 50%; color: var(--demo-accent); font-size: 10px; font-weight: 700; }
.demo-user strong, .demo-user small { display: block; }
.demo-user strong { font-size: 10px; }
.demo-user small { color: #64776e; font-size: 8px; }
.demo-workspace { min-width: 0; }
.demo-topbar { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 24px; background: #0d1914; border-bottom: 1px solid var(--line); }
.demo-topbar div:first-child span, .demo-topbar div:first-child strong { display: block; }
.demo-topbar div:first-child span { color: #60736a; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.demo-topbar div:first-child strong { font-size: 12px; }
.demo-topbar-status, .demo-secure { display: inline-flex; align-items: center; gap: 7px; color: #8fa299; font-size: 9px; font-weight: 600; }
.demo-topbar-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--demo-accent); }
.demo-content { padding: 28px; }
.demo-page-head { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 25px; }
.demo-page-head h2 { margin-bottom: 6px; font-size: 26px; font-weight: 500; }
.demo-page-head p { margin: 0; font-size: 11px; }
.demo-primary { min-height: 38px; padding: 8px 13px; background: var(--demo-accent); border: 0; border-radius: 4px; color: #05100b; font-size: 10px; font-weight: 700; cursor: pointer; }
.demo-primary:hover { filter: brightness(1.12); }
.demo-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 18px; }
.demo-kpis article { min-height: 112px; padding: 16px; background: #0d1a14; border: 1px solid var(--line); border-radius: 5px; }
.demo-kpis span, .demo-kpis small, .demo-kpis strong { display: block; }
.demo-kpis span { color: #7f9389; font-size: 9px; }
.demo-kpis strong { margin: 10px 0 5px; font-size: 26px; font-weight: 600; }
.demo-kpis small { color: #5f7369; font-size: 8px; }
.demo-panel { overflow: hidden; background: #0d1a14; border: 1px solid var(--line); border-radius: 5px; }
.demo-panel-head { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.demo-panel-head h3 { margin: 0; font-size: 12px; font-weight: 600; }
.demo-panel-head input { width: min(220px,45%); height: 32px; padding: 6px 10px; background: #09120e; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font-size: 9px; }
.demo-table { min-width: 620px; }
.demo-tr { min-height: 54px; display: grid; grid-template-columns: 1.1fr 1.2fr .8fr .7fr; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); color: #a8b8b0; font-size: 9px; }
.demo-tr:last-child { border-bottom: 0; }
.demo-th { min-height: 38px; background: #101f18; color: #5f7369; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.demo-tr button { min-height: 28px; padding: 4px 8px; background: transparent; border: 1px solid #30463c; border-radius: 3px; color: #c0d0c8; font-size: 8px; cursor: pointer; }
.status { display: inline-flex; padding: 4px 7px; border-radius: 3px; font-size: 8px; font-weight: 600; font-style: normal; }
.status.success { background: rgba(30,173,126,.14); color: #62deb4; }
.status.warning { background: rgba(213,156,55,.13); color: #e4b866; }
.status.neutral { background: rgba(255,255,255,.06); color: #91a39b; }
.demo-cart { display: inline-flex; align-items: center; gap: 9px; color: #a0b1a9; font-size: 10px; }
.demo-cart strong { width: 25px; height: 25px; display: grid; place-items: center; background: var(--demo-accent); border-radius: 50%; color: #07100c; }
.demo-products, .agent-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.demo-products article, .agent-grid article { padding: 16px; background: #0d1a14; border: 1px solid var(--line); border-radius: 5px; }
.product-art { height: 190px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 4px; color: rgba(255,255,255,.85); font-size: 34px; font-weight: 800; }
.art-blue { background: radial-gradient(circle at 30% 20%, #4777dd, #12203b); }
.art-red { background: radial-gradient(circle at 30% 20%, #d55c5c, #321112); }
.art-gold { background: radial-gradient(circle at 30% 20%, #d5a94c, #33260e); }
.demo-products article > span { color: #71867c; font-size: 8px; text-transform: uppercase; }
.demo-products h3 { min-height: 42px; margin: 8px 0; font-size: 14px; }
.demo-products article > strong { display: block; margin-bottom: 15px; font-size: 13px; }
.demo-products button, .agent-grid button { width: 100%; min-height: 34px; background: transparent; border: 1px solid #30463c; border-radius: 4px; color: #c8d7d0; font-size: 9px; cursor: pointer; }
.demo-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.demo-board > section { padding: 12px; background: #0a1510; border: 1px solid var(--line); border-radius: 5px; }
.demo-board section > header { display: flex; align-items: center; justify-content: space-between; padding: 3px 3px 12px; color: #879a91; font-size: 10px; }
.demo-board section > header b { width: 22px; height: 22px; display: grid; place-items: center; background: #17271f; border-radius: 50%; font-size: 8px; }
.demo-board article { padding: 14px; margin-bottom: 9px; background: #101f18; border: 1px solid #263a31; border-radius: 4px; }
.demo-board article:last-child { margin-bottom: 0; }
.demo-board small { color: var(--demo-accent); font-size: 8px; text-transform: uppercase; }
.demo-board h3 { margin: 9px 0 8px; font-size: 13px; }
.demo-board p { margin: 0; font-size: 9px; }
.agent-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 22px; background: color-mix(in srgb, var(--demo-accent) 18%, #0b1712); border: 1px solid color-mix(in srgb, var(--demo-accent) 45%, #22332c); border-radius: 8px; color: var(--demo-accent); font-size: 11px; font-weight: 700; }
.agent-grid article > span { display: inline-flex; align-items: center; gap: 6px; color: #83978d; font-size: 8px; }
.agent-grid article > span i { width: 5px; height: 5px; border-radius: 50%; background: var(--demo-accent); }
.agent-grid h3 { margin: 11px 0 8px; font-size: 16px; }
.agent-grid p { min-height: 58px; font-size: 10px; }
.portal-flow { min-height: 500px; display: grid; place-items: center; align-content: center; }
.portal-steps { width: min(580px,100%); display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 22px; }
.portal-steps span { position: relative; display: flex; align-items: center; gap: 8px; color: #5f746a; font-size: 9px; }
.portal-steps span::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.portal-steps span:last-child::after { display: none; }
.portal-steps b { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.portal-steps .active { color: var(--ink); }
.portal-steps .active b { background: var(--demo-accent); border-color: var(--demo-accent); color: #04100b; }
.portal-card { width: min(460px,100%); padding: 30px; background: #0d1a14; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 22px 50px rgba(0,0,0,.25); }
.portal-card h3 { margin: 8px 0 10px; font-size: 28px; font-weight: 500; }
.portal-card p { font-size: 11px; }
.portal-card label { display: block; margin: 22px 0 14px; color: #8fa299; font-size: 9px; font-weight: 600; }
.portal-card input { width: 100%; height: 42px; display: block; padding: 8px 11px; margin-top: 7px; background: #08110d; border: 1px solid #30463c; border-radius: 4px; color: var(--ink); }
.portal-card .demo-primary { width: 100%; }
.portal-card small { display: block; margin-top: 12px; color: #5c7066; font-size: 8px; text-align: center; }
.demo-toast { position: fixed; z-index: 150; right: 24px; bottom: 24px; max-width: min(360px,calc(100% - 32px)); padding: 12px 15px; background: var(--ink); border-radius: 5px; color: #06100b; box-shadow: 0 18px 45px rgba(0,0,0,.35); font-size: 11px; font-weight: 600; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; }
.demo-toast.show { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .technology-partners-inner { grid-template-columns: 1fr 1fr; padding-block: 48px; }
  .technology-names { grid-column: 1 / -1; }
  .demo-kpis { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  .context-bar { top: 72px; margin-top: 72px; }
  .technology-partners-inner { grid-template-columns: 1fr; gap: 28px; }
  .technology-names { grid-column: auto; }
  .catalog-product-grid { grid-template-columns: 1fr; }
  .demo-intro-inner { grid-template-columns: 1fr; align-items: start; }
  .demo-intro-actions { justify-content: flex-start; }
  .demo-frame { grid-template-columns: 74px minmax(0,1fr); }
  .demo-app-brand strong, .demo-sidebar nav button:not(.active), .demo-sidebar nav button.active { font-size: 0; }
  .demo-app-brand { justify-content: center; padding-inline: 0; }
  .demo-app-brand > span { flex: 0 0 auto; }
  .demo-sidebar nav button { justify-content: center; }
  .demo-sidebar nav button i { width: 9px; height: 9px; }
  .demo-user { justify-content: center; }
  .demo-user > div { display: none; }
  .demo-products, .agent-grid { grid-template-columns: 1fr 1fr; }
  .demo-board { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .site-header .brand { width: auto; }
  .brand-word { font-size: 20px; }
  .context-bar-inner { min-height: 46px; }
  .breadcrumbs { gap: 7px; }
  .breadcrumbs a:first-child, .breadcrumbs span:first-of-type { display: none; }
  .context-back { font-size: 0; }
  .context-back span { font-size: 16px; }
  .technology-names { flex-wrap: wrap; }
  .catalog-product-preview { height: 240px; }
  .catalog-product-copy { padding: 22px; }
  .demo-intro { padding-top: 42px; }
  .demo-intro-actions .button { width: 100%; }
  .demo-canvas { padding-top: 18px; }
  .demo-frame { width: 100%; min-height: 620px; grid-template-columns: 1fr; border-radius: 6px; }
  .demo-sidebar { display: none; }
  .demo-topbar { padding-inline: 16px; }
  .demo-content { padding: 18px 14px; }
  .demo-page-head { align-items: flex-start; flex-direction: column; }
  .demo-page-head .demo-primary { width: 100%; }
  .demo-kpis { grid-template-columns: 1fr 1fr; }
  .demo-panel { overflow-x: auto; }
  .demo-products, .agent-grid { grid-template-columns: 1fr; }
  .product-art { height: 150px; }
  .portal-steps { grid-template-columns: 1fr; gap: 8px; }
  .portal-steps span::after { display: none; }
  .portal-card { padding: 22px; }
  .case-hero-actions .button { width: 100%; }
}

@media (max-width: 420px) {
  .technology-names span { flex: 1; text-align: center; }
  .catalog-product-preview { height: 205px; }
  .demo-kpis { grid-template-columns: 1fr; }
  .demo-topbar-status { display: none; }
}

/* Legacy Triangle logo, intelligent system hero and technology ecosystem */
.legacy-logo { position: relative; display: block; aspect-ratio: 1018 / 255; flex: 0 0 auto; }
.legacy-logo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.legacy-logo-light { filter: brightness(0) invert(1); opacity: .96; }
.legacy-logo-accent { clip-path: inset(0 79.4% 0 0); }
.brand-logo { width: 142px; }
.brand-footer .brand-logo { width: 166px; }
.button > i, .text-link > i { flex: 0 0 auto; }
.button-trailing { margin-left: 2px; font-size: .8em; opacity: .72; }
.text-link i { color: var(--emerald); transition: transform .2s ease; }
.text-link:hover i { transform: translateY(4px); }
.header-cta .fa-whatsapp { color: #149f70; font-size: 16px; }

.system-stage { isolation: isolate; min-height: 500px; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 28px 80px rgba(0,0,0,.24); }
.system-stage::before { z-index: -4; background-size: 28px 28px; mask-image: radial-gradient(circle at 50% 50%, #000 12%, rgba(0,0,0,.86) 52%, transparent 87%); }
.system-stage::after { content: ""; position: absolute; z-index: -3; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 52%, transparent 12%, rgba(3,12,8,.18) 58%, rgba(3,10,7,.62) 100%); }
.system-ambient { position: absolute; z-index: -2; left: 50%; top: 51%; width: 68%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(30,173,126,.13), rgba(30,173,126,.025) 47%, transparent 70%); filter: blur(2px); animation: system-breathe 4.8s ease-in-out infinite; }
.system-scan { position: absolute; z-index: 1; inset: -45% 0 auto; height: 45%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(99,230,184,.055) 74%, rgba(99,230,184,.21) 100%); border-bottom: 1px solid rgba(99,230,184,.28); animation: system-scan 5.8s linear infinite; opacity: .7; }
.system-hud { position: absolute; z-index: 8; top: 18px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; color: #71877d; font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.system-hud span, .system-hud strong { display: inline-flex; align-items: center; gap: 8px; }
.system-hud strong { color: var(--emerald-dark); font-size: 8px; }
.system-hud strong i { width: 5px; height: 5px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 5px rgba(30,173,126,.1); animation: live-pulse 1.8s ease-out infinite; }
.system-orbit { z-index: 0; }
.orbit-one { width: 49%; height: 49%; border-color: rgba(99,230,184,.22); animation: orbit-clockwise 20s linear infinite; }
.orbit-two { width: 80%; height: 80%; border-color: rgba(99,230,184,.15); animation: orbit-counter 34s linear infinite; }
.orbit-three { width: 64%; height: 64%; border-style: dotted; border-color: rgba(99,230,184,.1); animation: orbit-clockwise 28s linear infinite; }
.system-orbit::before, .system-orbit::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 12px rgba(99,230,184,.8); }
.system-orbit::before { left: 12%; top: 12%; }
.system-orbit::after { right: 8%; bottom: 18%; width: 4px; height: 4px; opacity: .55; }
.system-link { position: absolute; z-index: 1; left: 50%; top: 50%; height: 1px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(99,230,184,.5), rgba(99,230,184,.05)); }
.system-link::after { content: ""; position: absolute; inset: -3px 0; background: linear-gradient(90deg, transparent, rgba(99,230,184,.12), transparent); filter: blur(3px); }
.system-link i { position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #8dffda; box-shadow: 0 0 12px rgba(99,230,184,.95); animation: packet-travel 2.8s ease-in-out infinite; }
.link-a { width: 38%; transform: rotate(-139deg); }
.link-b { width: 37%; transform: rotate(-32deg); }
.link-c { width: 34%; transform: rotate(46deg); }
.link-b i { animation-delay: -.9s; }
.link-c i { animation-delay: -1.7s; }
.system-core { z-index: 5; width: 172px; height: 172px; padding: 0 23px; overflow: visible; background: radial-gradient(circle at 45% 35%, #132b20, #0a1711 70%); border: 1px solid rgba(99,230,184,.2); box-shadow: 0 0 0 12px rgba(30,173,126,.025), 0 0 58px rgba(30,173,126,.12), 0 28px 60px rgba(0,0,0,.35); }
.system-core::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(99,230,184,.09); border-radius: inherit; }
.core-logo { width: 114px; margin-bottom: 12px; }
.system-core small { position: relative; color: #83a497; font-size: 9px; letter-spacing: .04em; }
.core-pulse { position: absolute; inset: -1px; border: 1px solid rgba(99,230,184,.24); border-radius: 50%; animation: core-pulse 3s ease-out infinite; }
.system-node { z-index: 6; width: 154px; min-height: 65px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; backdrop-filter: blur(14px); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.system-node:hover { border-color: rgba(99,230,184,.5); box-shadow: 0 18px 42px rgba(0,0,0,.42), 0 0 22px rgba(30,173,126,.07); transform: translateY(-3px); }
.system-node .node-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(99,230,184,.18); border-radius: 7px; background: rgba(30,173,126,.08); color: var(--emerald-dark); font-size: 13px; }
.system-node > div { min-width: 0; }
.system-node > span { align-self: start; float: none; color: #53685e; font-size: 8px; font-weight: 700; }
.system-node strong { color: var(--ink); font-size: 11px; letter-spacing: -.01em; }
.system-node small { margin-top: 2px; color: #789087; font-size: 9px; }
.node-a { left: 6%; top: 18%; }
.node-b { right: 6%; top: 22%; }
.node-c { right: 12%; bottom: 9%; }
.system-signal { z-index: 2; width: 6px; height: 6px; box-shadow: 0 0 0 7px rgba(30,173,126,.08); animation: live-pulse 2.2s ease-out infinite; }
.signal-b { animation-delay: -.7s; }
.signal-c { animation-delay: -1.4s; }
.system-caption { min-height: 54px; padding-inline: 18px; border-radius: 8px; }
.system-caption > i { color: var(--emerald); font-size: 12px; }
.system-caption strong { display: inline-flex; align-items: center; gap: 7px; }
.system-caption strong i { font-size: 9px; }

.technology-partners { position: relative; overflow: hidden; background: #050b08; border-block: 1px solid var(--line); }
.technology-partners::before { content: ""; position: absolute; width: 560px; height: 560px; right: -220px; top: -280px; border-radius: 50%; background: radial-gradient(circle, rgba(30,173,126,.09), transparent 68%); pointer-events: none; }
.partner-shell { position: relative; display: grid; grid-template-columns: minmax(0,.86fr) minmax(520px,1.14fr); gap: clamp(68px,8vw,116px); align-items: center; padding-block: 108px; }
.partner-intro h2 { max-width: 610px; margin: 21px 0 26px; font-size: clamp(42px,4.8vw,64px); font-weight: 500; }
.partner-intro > p { max-width: 570px; margin-bottom: 28px; font-size: 16px; line-height: 1.72; }
.partner-status { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #24392f; border-radius: 999px; color: #9db2a8; background: rgba(13,29,22,.72); font-size: 10px; font-weight: 600; }
.partner-status i { color: var(--emerald); }
.platform-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.platform-card { position: relative; min-height: 258px; padding: 25px; overflow: hidden; border: 1px solid #253a31; border-radius: 10px; background: linear-gradient(145deg, rgba(14,31,23,.92), rgba(7,17,13,.94)); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.platform-card::after { content: ""; position: absolute; width: 155px; height: 155px; right: -60px; bottom: -80px; border: 1px solid rgba(99,230,184,.1); border-radius: 50%; box-shadow: 0 0 0 24px rgba(99,230,184,.018), 0 0 0 50px rgba(99,230,184,.012); }
.platform-card:hover { transform: translateY(-4px); border-color: #3b5c4e; box-shadow: 0 24px 48px rgba(0,0,0,.25); }
.platform-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.platform-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #2c493d; border-radius: 8px; background: #10271d; color: var(--emerald-dark); font-size: 16px; }
.platform-status { display: inline-flex; align-items: center; gap: 7px; color: #6f887d; font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.platform-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px rgba(30,173,126,.08); }
.platform-label { color: #71867c; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.platform-card h3 { margin: 8px 0 14px; font-size: 34px; font-weight: 600; }
.platform-card p { position: relative; z-index: 1; max-width: 250px; margin: 0; color: #93a79d; font-size: 12px; line-height: 1.65; }
.partner-capabilities { grid-column: 1 / -1; min-height: 58px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; border: 1px solid #253a31; border-radius: 8px; background: rgba(10,23,17,.8); }
.partner-capabilities span { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 9px; border-right: 1px solid #253a31; color: #9db0a7; font-size: 10px; font-weight: 600; }
.partner-capabilities span:last-child { border-right: 0; }
.partner-capabilities i { color: var(--emerald); font-size: 11px; }

@keyframes system-breathe { 0%,100% { transform: translate(-50%,-50%) scale(.94); opacity: .65; } 50% { transform: translate(-50%,-50%) scale(1.08); opacity: 1; } }
@keyframes system-scan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .7; } 84% { opacity: .45; } 100% { transform: translateY(325%); opacity: 0; } }
@keyframes orbit-clockwise { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes orbit-counter { to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes packet-travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }
@keyframes core-pulse { 0% { transform: scale(.9); opacity: .55; } 75%,100% { transform: scale(1.25); opacity: 0; } }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(30,173,126,.35); } 100% { box-shadow: 0 0 0 10px rgba(30,173,126,0); } }

@media (max-width: 1100px) {
  .partner-shell { grid-template-columns: 1fr; gap: 52px; padding-block: 82px; }
  .partner-intro { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); column-gap: 56px; align-items: end; }
  .partner-intro .section-kicker, .partner-intro h2 { grid-column: 1; }
  .partner-intro > p { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .partner-status { grid-column: 2; justify-self: start; margin-top: 20px; }
}

@media (max-width: 900px) {
  .partner-intro { display: block; }
  .partner-intro > p { margin-bottom: 24px; }
  .system-stage { min-height: 520px; }
}

@media (max-width: 700px) {
  .brand-logo { width: 128px; }
  .brand-footer .brand-logo { width: 150px; }
  .system-stage { min-height: 430px; }
  .system-hud { left: 15px; right: 15px; }
  .system-hud > span { font-size: 0; }
  .system-hud > span i { font-size: 10px; }
  .system-core { width: 136px; height: 136px; padding-inline: 18px; }
  .core-logo { width: 93px; margin-bottom: 8px; }
  .system-core small { font-size: 8px; }
  .system-node { width: 126px; min-height: 54px; grid-template-columns: 27px 1fr; gap: 8px; padding: 9px; }
  .system-node .node-icon { width: 27px; height: 27px; font-size: 11px; }
  .system-node > span { display: none; }
  .system-node strong { font-size: 10px; }
  .system-node small { font-size: 8px; }
  .node-a { left: 3%; top: 17%; }
  .node-b { right: 3%; top: 22%; }
  .node-c { right: 8%; bottom: 8%; }
  .platform-grid { grid-template-columns: 1fr; }
  .platform-card { min-height: 230px; }
  .partner-capabilities { grid-template-columns: 1fr; padding: 8px 14px; }
  .partner-capabilities span { justify-content: flex-start; border-right: 0; border-bottom: 1px solid #253a31; }
  .partner-capabilities span:last-child { border-bottom: 0; }
  .partner-shell { padding-block: 72px; }
  .partner-intro h2 { font-size: clamp(38px,11vw,50px); }
}

@media (max-width: 420px) {
  .system-stage { min-height: 390px; }
  .system-core { width: 120px; height: 120px; }
  .core-logo { width: 82px; }
  .system-core small { max-width: 80px; text-align: center; line-height: 1.3; }
  .system-node { width: 112px; }
  .system-node .node-icon { display: none; }
  .system-node { grid-template-columns: 1fr; }
  .node-a { left: 3%; }
  .node-b { right: 3%; }
  .node-c { right: 6%; }
  .system-caption { grid-template-columns: auto 1fr; }
  .system-caption strong { display: none; }
}

/* Product screens: visual evidence without simulated demos */
.project-screen { --screen-accent: #1ead7e; position: relative; width: 90%; height: 84%; min-height: 210px; overflow: hidden; background: #07100c; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; box-shadow: 0 24px 55px rgba(0,0,0,.36); color: #eaf5f0; font-family: Inter, system-ui, sans-serif; text-align: left; }
.screen-accent-blue { --screen-accent: #4f8cff; }
.accent-emerald { --case-accent: #1ead7e; }
.screen-accent-emerald { --screen-accent: #28c991; }
.screen-accent-amber { --screen-accent: #f5a623; }
.screen-accent-violet { --screen-accent: #a879ff; }
.screen-accent-cyan { --screen-accent: #32c8db; }
.screen-accent-rose { --screen-accent: #f06c91; }
.screen-accent-teal { --screen-accent: #38c5b2; }
.project-screen-top { height: 30px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 11px; background: #0d1a14; border-bottom: 1px solid rgba(255,255,255,.07); }
.project-screen-top > strong { color: #9db1a8; font-size: 7px; font-weight: 600; letter-spacing: .03em; }
.screen-dots { display: flex; gap: 4px; }
.screen-dots i { width: 4px; height: 4px; border-radius: 50%; background: #40544b; }
.screen-live { justify-self: end; display: inline-flex; align-items: center; gap: 5px; color: #6d8278; font-size: 6px; font-weight: 700; letter-spacing: .08em; }
.screen-live i { width: 4px; height: 4px; border-radius: 50%; background: var(--screen-accent); box-shadow: 0 0 7px var(--screen-accent); }
.project-screen-app { height: calc(100% - 30px); display: grid; grid-template-columns: 38px 1fr; }
.project-screen-nav { display: flex; align-items: center; flex-direction: column; gap: 12px; padding: 10px 8px; background: #09150f; border-right: 1px solid rgba(255,255,255,.06); }
.project-screen-nav > i { width: 16px; height: 3px; border-radius: 5px; background: #27392f; }
.project-screen-nav > i.active { background: var(--screen-accent); }
.screen-app-icon { width: 23px; height: 23px; display: grid; place-items: center; margin-bottom: 2px; border-radius: 5px; background: color-mix(in srgb,var(--screen-accent) 17%,#0d1a14); color: var(--screen-accent); font-size: 8px; }
.screen-avatar { width: 18px; height: 18px; margin-top: auto; border: 2px solid #23382e; border-radius: 50%; background: #14261d; }
.project-screen-content { min-width: 0; overflow: hidden; padding: 13px 14px; background: radial-gradient(circle at 86% 0, color-mix(in srgb,var(--screen-accent) 9%,transparent), transparent 34%), #0a1510; }
.screen-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.screen-title div { display: flex; flex-direction: column; gap: 2px; }
.screen-title small, .screen-portal-card > small { color: var(--screen-accent); font-size: 5px; font-weight: 700; letter-spacing: .12em; }
.screen-title b { font-size: 12px; font-weight: 600; }
.screen-title > span, .screen-portal-card button { padding: 4px 7px; border: 0; border-radius: 3px; background: var(--screen-accent); color: #06100b; font-size: 6px; font-weight: 700; }
.screen-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.screen-kpis span { padding: 8px; background: #0e1d16; border: 1px solid rgba(255,255,255,.07); border-radius: 4px; }
.screen-kpis small, .screen-chart small { display: block; color: #71857b; font-size: 5px; }
.screen-kpis b { display: block; margin-top: 3px; font-size: 12px; }
.screen-table { display: grid; grid-template-columns: 1.15fr .7fr .85fr .45fr; gap: 6px; padding: 9px; margin-top: 7px; background: #0d1b15; border: 1px solid rgba(255,255,255,.06); }
.screen-table b, .screen-table span { height: 5px; border-radius: 4px; background: #23362d; }
.screen-table b { grid-column: 1 / -1; background: color-mix(in srgb,var(--screen-accent) 38%,#23362d); }
.screen-chart { min-height: 74px; display: grid; grid-template-columns: 1fr 72px; align-items: center; gap: 10px; padding: 9px; background: #0d1b15; border: 1px solid rgba(255,255,255,.06); border-radius: 4px; }
.screen-chart > div { height: 52px; display: flex; align-items: end; gap: 5px; padding-top: 8px; border-bottom: 1px solid #26382f; }
.screen-chart > div i { width: 12%; height: 48%; background: linear-gradient(var(--screen-accent),color-mix(in srgb,var(--screen-accent) 25%,transparent)); border-radius: 2px 2px 0 0; }
.screen-chart > div i:nth-child(2) { height: 72%; }
.screen-chart > div i:nth-child(3) { height: 56%; }
.screen-chart > div i:nth-child(4) { height: 88%; }
.screen-chart > div i:nth-child(5) { height: 68%; }
.screen-chart > strong { font-size: 16px; }
.screen-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.screen-list span { display: grid; grid-template-columns: 5px 1fr auto; gap: 5px; align-items: center; padding: 7px; background: #0e1c16; }
.screen-list span i { width: 5px; height: 5px; border-radius: 50%; background: var(--screen-accent); }
.screen-list span b { height: 4px; background: #2c4036; }
.screen-list span em { color: #70847a; font-size: 5px; font-style: normal; }
.screen-store-head { display: flex; align-items: center; gap: 12px; height: 25px; margin: -4px 0 10px; }
.screen-store-head strong { color: var(--screen-accent); font-size: 11px; }
.screen-store-head span { flex: 1; color: #788b82; font-size: 5px; }
.screen-store-head i { font-size: 8px; }
.screen-products { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.screen-products article { padding: 7px; background: #0e1c16; border: 1px solid rgba(255,255,255,.07); border-radius: 4px; }
.screen-products article > i { height: 49px; display: grid; place-items: center; margin-bottom: 6px; background: color-mix(in srgb,var(--screen-accent) 18%,#14231c); color: var(--screen-accent); font-size: 12px; font-style: normal; font-weight: 700; }
.screen-products small { display: block; color: #7b8f85; font-size: 5px; }
.screen-products b { font-size: 8px; }
.screen-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.screen-board section { padding: 7px; background: #0c1913; border: 1px solid rgba(255,255,255,.06); }
.screen-board small { color: #6f8279; font-size: 5px; }
.screen-board article { height: 28px; margin-top: 6px; background: #13251c; border-left: 2px solid var(--screen-accent); border-radius: 2px; }
.screen-agents { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.screen-agents article { min-width: 0; padding: 11px 8px 8px; background: #0e1c16; border: 1px solid rgba(255,255,255,.07); border-radius: 4px; }
.screen-agents article > i { color: var(--screen-accent); font-size: 12px; }
.screen-agents b, .screen-agents small { display: block; }
.screen-agents b { overflow: hidden; margin: 12px 0 7px; font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.screen-agents small { color: #71857b; font-size: 5px; }
.screen-agents em { width: 4px; height: 4px; display: inline-block; margin-right: 4px; border-radius: 50%; background: var(--screen-accent); }
.screen-attendees { background: #0c1913; border: 1px solid rgba(255,255,255,.06); }
.screen-attendees > div, .screen-attendees > span { display: grid; grid-template-columns: 28px 1fr .8fr .75fr; align-items: center; gap: 6px; padding: 5px 7px; border-bottom: 1px solid rgba(255,255,255,.05); }
.screen-attendees > div { grid-template-columns: 28px 1fr .8fr .75fr; padding-block: 6px; background: #101f18; }
.screen-attendees > div small:first-child { grid-column: 1 / 3; }
.screen-attendees small { color: #657a70; font-size: 4px; }
.screen-attendees > span i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb,var(--screen-accent) 18%,#14231c); color: var(--screen-accent); font-size: 5px; font-style: normal; }
.screen-attendees > span b, .screen-attendees > span em, .screen-attendees > span strong { overflow: hidden; font-size: 5px; font-style: normal; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.screen-attendees > span em { color: #74877e; }
.screen-attendees > span strong { color: var(--screen-accent); }
.project-screen-paraiso-portal .project-screen-content { display: grid; place-items: center; grid-template-columns: .65fr 1fr; gap: 10px; }
.screen-portal-brand { display: flex; align-items: center; flex-direction: column; gap: 6px; color: #7e9288; text-align: center; }
.screen-portal-brand i { color: var(--screen-accent); font-size: 20px; }
.screen-portal-brand strong { color: #dcebe4; font-size: 7px; }
.screen-portal-brand span { font-size: 5px; }
.screen-portal-card { padding: 12px; background: #0e1c16; border: 1px solid rgba(255,255,255,.08); border-radius: 5px; }
.screen-portal-card b, .screen-portal-card p, .screen-portal-card span { display: block; }
.screen-portal-card b { margin-top: 5px; font-size: 10px; }
.screen-portal-card p { margin: 5px 0; color: #72867c; font-size: 5px; line-height: 1.4; }
.screen-portal-card > span { padding: 5px; margin: 6px 0; background: #08110d; border: 1px solid #263a31; color: #8ea198; font-size: 6px; }
.screen-portal-card button { width: 100%; }
.case-visual .project-screen { width: 91%; height: 82%; }
.work-index-visual { padding: 23px; }
.work-index-visual .project-screen { width: 100%; height: 100%; }
.catalog-product-preview { padding: 26px; }
.catalog-product-preview .project-screen { width: 100%; height: 100%; }
.catalog-product-number { z-index: 3; }
.case-hero-visual .project-screen { width: 100%; height: 430px; transform: perspective(1200px) rotateY(-3deg) rotateX(1deg); }

/* Business technical brief */
.paper-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; }
.paper-hero-meta span { display: inline-flex; align-items: center; gap: 8px; color: #91a69c; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.paper-hero-meta i { color: var(--case-accent); }
.paper-summary { background: #09130f; border-bottom: 1px solid var(--line); }
.paper-document-head { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); }
.paper-document-head > div { min-height: 76px; display: flex; justify-content: center; flex-direction: column; gap: 4px; padding: 15px 20px; border-right: 1px solid var(--line); }
.paper-document-head > div:last-child { border-right: 0; }
.paper-document-head span { color: #61766c; font-size: 8px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.paper-document-head strong { color: #bdcec6; font-size: 11px; font-weight: 600; }
.paper-abstract-grid { display: grid; grid-template-columns: .34fr 1fr; gap: 80px; padding-top: 90px; }
.paper-abstract-grid > aside { display: flex; align-items: flex-start; gap: 18px; color: #6b8076; font-size: 10px; text-transform: uppercase; }
.paper-abstract-grid > aside span { color: var(--case-accent); }
.paper-abstract h2 { max-width: 960px; margin: 22px 0 28px; font-size: clamp(38px,5vw,66px); font-weight: 500; }
.paper-abstract > p { max-width: 880px; margin: 0; color: #a4b7ae; font-size: 18px; line-height: 1.8; }
.paper-analysis { background: #07110d; }
.paper-analysis-grid { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 90px; }
.paper-toc { position: sticky; top: 120px; height: fit-content; display: flex; flex-direction: column; padding: 20px 0; border-top: 1px solid var(--line); }
.paper-toc > span { margin-bottom: 18px; color: #587066; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.paper-toc a { padding: 9px 0; color: #879b91; font-size: 10px; border-bottom: 1px solid rgba(255,255,255,.04); }
.paper-toc a:hover { color: var(--case-accent); }
.paper-content { min-width: 0; }
.paper-section { position: relative; padding: 0 0 105px; margin-bottom: 105px; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.paper-section:last-child { margin-bottom: 0; }
.paper-section-number { position: absolute; right: 0; top: -5px; color: #263a31; font-size: 54px; font-weight: 600; letter-spacing: -.06em; }
.paper-section > h2 { max-width: 780px; margin: 20px 0 50px; font-size: clamp(36px,4vw,56px); font-weight: 500; }
.paper-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.paper-two-columns h3 { margin-bottom: 18px; color: var(--case-accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.paper-two-columns p { margin: 0; color: #a4b6ae; font-size: 16px; line-height: 1.8; }
.paper-method { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.paper-method li { min-height: 84px; display: grid; grid-template-columns: 55px 1fr; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.paper-method li > span { color: var(--case-accent); font-size: 9px; font-weight: 700; }
.paper-method p { margin: 0; color: #bdcec6; font-size: 15px; }
.paper-architecture { display: grid; grid-template-columns: repeat(2,1fr); border: 1px solid var(--line); }
.paper-architecture article { position: relative; min-height: 230px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.paper-architecture article:nth-child(2n) { border-right: 0; }
.paper-architecture article:nth-child(n+3) { border-bottom: 0; }
.paper-architecture article > i { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 46px; background: color-mix(in srgb,var(--case-accent) 13%,#0b1712); border: 1px solid color-mix(in srgb,var(--case-accent) 35%,#22332c); border-radius: 7px; color: var(--case-accent); }
.paper-architecture article > span { position: absolute; top: 30px; right: 28px; color: #50665c; font-size: 8px; }
.paper-architecture h3 { margin-bottom: 13px; font-size: 22px; font-weight: 500; }
.paper-architecture p { margin: 0; font-size: 12px; line-height: 1.65; }
.paper-findings { border-top: 1px solid var(--line); }
.paper-findings article { display: grid; grid-template-columns: 56px 1fr; gap: 25px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.paper-findings article span { color: var(--case-accent); font-size: 9px; font-weight: 700; }
.paper-findings article p { max-width: 760px; margin: 0; color: #bdcec6; font-size: 17px; line-height: 1.7; }
.paper-indicators { border: 1px solid var(--line); }
.paper-indicators > div { min-height: 72px; display: grid; grid-template-columns: .36fr 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.paper-indicators > div:last-child { border-bottom: 0; }
.paper-indicators strong, .paper-indicators span { padding: 16px 20px; }
.paper-indicators strong { color: var(--case-accent); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.paper-indicators span { color: #a4b6ae; border-left: 1px solid var(--line); font-size: 13px; }
.paper-evidence-note { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; color: #6f857a; font-size: 10px; }
.paper-evidence-note i { margin-top: 3px; color: var(--case-accent); }
.paper-conclusion { padding-bottom: 0; border-bottom: 0; }
.paper-risk-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.paper-risk-grid ul { padding: 0; margin: 28px 0 0; list-style: none; }
.paper-risk-grid li { position: relative; padding: 14px 0 14px 22px; border-bottom: 1px solid var(--line); color: #91a69c; font-size: 12px; }
.paper-risk-grid li::before { content: ""; position: absolute; left: 0; top: 22px; width: 6px; height: 6px; border: 1px solid var(--case-accent); border-radius: 50%; }
.paper-risk-grid h2 { margin: 20px 0 25px; font-size: clamp(36px,4vw,54px); font-weight: 500; }
.paper-risk-grid p { margin: 0; color: #bdcec6; font-size: 17px; line-height: 1.75; }

@media (max-width: 900px) {
  .case-hero-visual .project-screen { height: 390px; transform: none; }
  .paper-abstract-grid { grid-template-columns: 1fr; gap: 32px; }
  .paper-analysis-grid { grid-template-columns: 1fr; gap: 55px; }
  .paper-toc { position: static; display: grid; grid-template-columns: repeat(3,1fr); gap: 0 20px; }
  .paper-toc > span { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .case-visual .project-screen { width: 96%; }
  .work-index-visual, .catalog-product-preview { padding: 14px; }
  .paper-document-head { grid-template-columns: 1fr; }
  .paper-document-head > div { min-height: 64px; border-right: 0; border-bottom: 1px solid var(--line); }
  .paper-document-head > div:last-child { border-bottom: 0; }
  .paper-abstract-grid { padding-top: 65px; }
  .paper-abstract > p { font-size: 16px; }
  .paper-toc { grid-template-columns: 1fr 1fr; }
  .paper-section { padding-bottom: 72px; margin-bottom: 72px; }
  .paper-section-number { font-size: 40px; opacity: .7; }
  .paper-two-columns, .paper-risk-grid { grid-template-columns: 1fr; gap: 35px; }
  .paper-architecture { grid-template-columns: 1fr; }
  .paper-architecture article, .paper-architecture article:nth-child(2n), .paper-architecture article:nth-child(n+3) { min-height: 205px; border-right: 0; border-bottom: 1px solid var(--line); }
  .paper-architecture article:last-child { border-bottom: 0; }
  .paper-indicators > div { grid-template-columns: 1fr; }
  .paper-indicators span { border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 420px) {
  .project-screen { min-height: 185px; }
  .project-screen-app { grid-template-columns: 30px 1fr; }
  .project-screen-nav { padding-inline: 5px; }
  .project-screen-content { padding: 10px; }
  .screen-products article:nth-child(3), .screen-agents article:nth-child(3), .screen-board section:nth-child(3) { display: none; }
  .screen-products, .screen-agents, .screen-board { grid-template-columns: repeat(2,1fr); }
  .case-hero-visual .project-screen { height: 280px; }
  .paper-toc { grid-template-columns: 1fr; }
  .paper-section > h2 { padding-right: 28px; }
}

/* Stripe-inspired infrastructure language, reinterpreted for Triangle */
:root {
  --emerald: #35e0a1;
  --emerald-dark: #7af2c6;
  --emerald-soft: #12382f;
  --blue: #786cff;
  --violet: #a66cff;
  --cyan: #28c9f5;
  --slate: #b2bfd0;
  --ink: #f6f9fc;
  --muted: #93a4bb;
  --line: #203049;
  --paper: #07101f;
  --white: #0b1628;
  --dark: #040914;
  --dark-soft: #0b1425;
  --radius: 16px;
  --container: 1240px;
  --shadow: 0 30px 80px rgba(0,0,0,.42);
}

html { scroll-padding-top: 90px; }
body { background: var(--paper); color: var(--ink); }
body::before { content: ""; position: fixed; z-index: -20; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, transparent calc(25% - 1px), rgba(116,147,190,.055) 25%, transparent calc(25% + 1px), transparent calc(50% - 1px), rgba(116,147,190,.055) 50%, transparent calc(50% + 1px), transparent calc(75% - 1px), rgba(116,147,190,.055) 75%, transparent calc(75% + 1px)); }
.container { width: min(calc(100% - 64px), var(--container)); }
.section-pad { padding: 132px 0; }
h1, h2, h3 { letter-spacing: -.055em; }
p { color: var(--muted); }
.section-kicker { color: var(--emerald-dark); font-size: 11px; letter-spacing: .13em; }
.section-kicker::before { width: 16px; }
.section-heading { margin-bottom: 78px; }
.section-heading h2 { font-weight: 600; letter-spacing: -.06em; }

.button { min-height: 42px; gap: 9px; padding: 10px 17px; border-radius: 999px; font-size: 12px; font-weight: 650; box-shadow: none; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: linear-gradient(115deg,#55e6ae,#26c88c); color: #04130d; box-shadow: 0 9px 24px rgba(53,224,161,.18); }
.button-primary:hover { background: linear-gradient(115deg,#7af2c6,#35e0a1); }
.button-dark, .button-light { background: #f6f9fc; color: #07101f; }
.button-dark:hover, .button-light:hover { background: #dfe8f4; }
.button-outline-light { border-color: #30435f; background: rgba(11,22,40,.5); color: #f6f9fc; }
.button-outline-light:hover { border-color: #7184a1; background: rgba(24,40,64,.7); }
.button-large { min-height: 48px; padding-inline: 20px; }
.text-link { gap: 10px; color: #dce6f3; font-size: 12px; }

.site-header { background: rgba(7,16,31,.76); border-color: transparent; backdrop-filter: blur(22px) saturate(140%); }
.site-header.scrolled { background: rgba(7,16,31,.93); border-color: rgba(132,154,188,.16); box-shadow: 0 12px 40px rgba(2,6,14,.25); }
.header-inner { min-height: 76px; }
.desktop-nav a { color: #a9b7c9; font-size: 12px; }
.desktop-nav a.active::after { bottom: -8px; height: 1px; background: linear-gradient(90deg,var(--emerald),var(--cyan)); }
.header-cta { min-height: 36px; padding-inline: 15px; }
.header-cta .fa-whatsapp { color: #16a879; }
.language-switch { color: #687a93; }
.mobile-menu { inset: 76px 0 0; background: rgba(6,14,27,.98); }

.hero { position: relative; isolation: isolate; min-height: 900px; overflow: hidden; padding-top: 176px; background: #07101f; }
.hero::before { content: ""; position: absolute; z-index: -3; width: 1050px; height: 760px; right: -300px; top: -220px; background: conic-gradient(from 215deg at 48% 56%,rgba(53,224,161,.85),rgba(40,201,245,.72),rgba(120,108,255,.82),rgba(166,108,255,.68),rgba(53,224,161,.75)); filter: blur(65px); opacity: .43; transform: rotate(-10deg) skewY(-8deg); }
.hero::after { content: ""; position: absolute; z-index: -2; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(123,151,190,.07) 1px, transparent 1px),linear-gradient(90deg,rgba(123,151,190,.07) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg,transparent 1%,#000 38%,#000 100%); opacity: .6; transform: perspective(700px) rotateX(63deg) scale(1.6) translateY(22%); transform-origin: center bottom; }
.hero-grid { position: relative; z-index: 1; grid-template-columns: minmax(0,1.02fr) minmax(480px,.98fr); gap: clamp(60px,7vw,110px); }
.eyebrow { gap: 8px; padding: 7px 11px; margin-bottom: 27px; background: rgba(11,24,43,.7); border: 1px solid rgba(135,161,198,.18); border-radius: 999px; color: #b3c1d3; font-size: 9px; font-weight: 650; letter-spacing: .11em; }
.status-dot { width: 6px; height: 6px; background: var(--emerald); box-shadow: 0 0 0 5px rgba(53,224,161,.1),0 0 18px rgba(53,224,161,.65); }
.hero h1 { max-width: 720px; margin-bottom: 28px; font-size: clamp(58px,6.2vw,88px); font-weight: 650; line-height: .98; letter-spacing: -.072em; }
.hero h1 em, .page-hero h1 em { background: linear-gradient(100deg,#7af2c6 0%,#38d5db 42%,#8d78ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: Inter,system-ui,sans-serif; font-style: normal; font-weight: inherit; }
.hero-lede { max-width: 590px; margin-bottom: 32px; color: #acbbce; font-size: 18px; line-height: 1.65; }
.hero-actions { gap: 22px; }
.hero-proof { gap: 7px; margin-top: 36px; }
.hero-proof span { padding: 6px 10px; background: rgba(9,20,37,.56); border-color: rgba(137,161,195,.17); border-radius: 999px; color: #8fa2ba; font-size: 9px; letter-spacing: .04em; }
.hero-system { filter: drop-shadow(0 28px 70px rgba(3,7,18,.34)); }
.system-stage { background: linear-gradient(145deg,rgba(12,28,49,.92),rgba(5,14,27,.96)); border-color: rgba(139,166,205,.22); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04),0 38px 90px rgba(2,6,15,.38); }
.system-stage::before { background-image: linear-gradient(rgba(95,132,181,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(95,132,181,.08) 1px,transparent 1px); }
.system-core { background: radial-gradient(circle at 42% 32%,#163d38,#0a1b26 74%); border-color: rgba(109,244,198,.26); box-shadow: 0 0 0 12px rgba(53,224,161,.025),0 0 70px rgba(53,224,161,.16),0 30px 70px rgba(0,0,0,.4); }
.system-node { background: rgba(10,24,43,.86); border-color: rgba(127,156,197,.25); border-radius: 12px; }
.system-node .node-icon { border-color: rgba(102,224,190,.24); background: rgba(53,224,161,.09); }
.system-caption { background: rgba(9,21,38,.86); border-color: rgba(127,156,197,.2); border-radius: 12px; }

.industry-strip { background: #081425; border-color: #1b2b43; }
.strip-inner { min-height: 96px; }
.strip-inner > span { color: #5e718b; }
.strip-list { color: #9baec4; font-size: 12px; }

.technology-partners { background: linear-gradient(135deg,#071120 0%,#0d1630 52%,#101430 100%); border-color: #203049; }
.technology-partners::before { width: 760px; height: 760px; right: -260px; top: -420px; background: radial-gradient(circle,rgba(120,108,255,.2),rgba(40,201,245,.06) 45%,transparent 69%); }
.partner-shell { padding-block: 126px; }
.partner-intro h2 { font-weight: 650; letter-spacing: -.065em; }
.partner-status { background: rgba(13,26,49,.75); border-color: #293b58; color: #a6b5c8; }
.platform-card { min-height: 270px; background: linear-gradient(145deg,rgba(17,32,57,.96),rgba(8,19,36,.96)); border-color: rgba(119,146,183,.24); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.platform-card:first-child { background: linear-gradient(145deg,rgba(17,43,55,.96),rgba(8,22,38,.96)); }
.platform-card:last-of-type { background: linear-gradient(145deg,rgba(30,27,65,.96),rgba(11,18,39,.96)); }
.platform-card::after { border-color: rgba(120,108,255,.16); box-shadow: 0 0 0 24px rgba(120,108,255,.025),0 0 0 50px rgba(40,201,245,.015); }
.platform-icon { border-color: rgba(115,160,215,.3); background: rgba(40,201,245,.08); color: #77dbf4; }
.platform-card:last-of-type .platform-icon { background: rgba(141,120,255,.12); color: #b4a6ff; }
.partner-capabilities { background: rgba(8,19,36,.82); border-color: #293a56; border-radius: 12px; }
.partner-capabilities span { border-color: #293a56; }

.services { background: #081323; }
.service-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; border-top: 0; }
.service-row { position: relative; min-height: 450px; display: flex; align-items: stretch; flex-direction: column; gap: 0; padding: 31px; overflow: hidden; background: linear-gradient(155deg,#0e1c31,#091425 72%); border: 1px solid #20314b; border-radius: 18px; }
.service-row::before { content: ""; position: absolute; width: 210px; height: 210px; right: -100px; top: -100px; border-radius: 50%; background: radial-gradient(circle,rgba(53,224,161,.11),transparent 68%); }
.service-row:nth-child(2)::before { background: radial-gradient(circle,rgba(40,201,245,.13),transparent 68%); }
.service-row:nth-child(3)::before { background: radial-gradient(circle,rgba(141,120,255,.15),transparent 68%); }
.service-number { margin-bottom: 68px; color: #617590; }
.service-copy h3 { margin-bottom: 18px; font-size: 34px; font-weight: 600; }
.service-copy p { font-size: 13px; line-height: 1.65; }
.service-items { grid-template-columns: 1fr; gap: 10px; margin-top: auto; padding-top: 34px; }
.service-items li { color: #a6b6c9; font-size: 11px; }
.service-action { width: 40px; height: 40px; margin-top: 28px; border-color: #30425e; }
.service-action:hover { background: var(--emerald); color: #06120d; }

.selected-work { background: #040a15; }
.case-grid { gap: 22px; }
.case-card { padding: 18px; background: linear-gradient(155deg,#0c1728,#07111f); border-color: #1d2c43; border-radius: 18px; }
.case-card:hover { border-color: #415574; box-shadow: 0 28px 70px rgba(0,0,0,.28); }
.case-visual { border-radius: 12px; background: color-mix(in srgb,var(--case-accent) 14%,#0a1526); }
.case-card h3 { font-weight: 600; }
.real-project-label { color: #788da7; }

.web-catalog, .catalog-products { background: #091426; }
.web-type-card, .catalog-product-card { background: linear-gradient(150deg,#0e1b30,#091425); border-color: #20314b; border-radius: 16px; }
.type-preview, .catalog-product-preview { background: color-mix(in srgb,var(--tone,var(--emerald)) 12%,#081426); }
.catalog-product-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.catalog-product-copy h2 { font-weight: 600; }
.catalog-note { border-color: #253752; }

.process { background: #07111f; }
.process-list { border-color: #203049; }
.process-list li { border-color: #203049; }
.process-list li > span { color: #637692; }
.process-list h3 { font-weight: 600; }
.principles { background: #0a1526; }
.principle-grid { border-color: #263852; border-radius: 16px; overflow: hidden; }
.principle-grid article { background: linear-gradient(150deg,rgba(16,31,53,.8),rgba(8,20,36,.8)); border-color: #263852; }
.faq { background: #07101f; }
.faq-list details { border-color: #253751; }
.faq-list summary { color: #eaf1f8; }
.final-cta { position: relative; overflow: hidden; background: linear-gradient(130deg,#0a1d2a 0%,#0e1b3c 48%,#17123b 100%); border-color: #2b3a59; }
.final-cta::before { content: ""; position: absolute; width: 700px; height: 700px; right: -260px; bottom: -460px; border-radius: 50%; background: radial-gradient(circle,rgba(120,108,255,.33),rgba(40,201,245,.08) 45%,transparent 70%); }
.final-cta h2 { font-weight: 650; }
.site-footer { background: #030812; border-color: #192942; }

.page-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 83% 10%,rgba(120,108,255,.2),transparent 34%),radial-gradient(circle at 16% 86%,rgba(53,224,161,.09),transparent 28%),#07101f; }
.page-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(125,151,187,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(125,151,187,.045) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg,transparent,#000 60%,transparent); }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { font-weight: 650; letter-spacing: -.07em; }
.confidential-badge { border-radius: 999px; background: rgba(12,27,47,.75); border-color: #2b3e5a; }
.work-catalog { background: #081323; }
.filter-bar { gap: 7px; padding-bottom: 26px; }
.filter-bar button { border-radius: 999px; background: #0c1a2e; border-color: #263a57; color: #91a4ba; }
.filter-bar button.active { background: #f4f7fb; border-color: #f4f7fb; color: #07101f; }
.work-index-card { background: linear-gradient(150deg,#0d1a2e,#081322); border-color: #20324c; border-radius: 18px; }
.work-index-visual { background: color-mix(in srgb,var(--case-accent) 12%,#081426); }
.work-index-copy h2 { font-weight: 600; }
.compact-cta { background: linear-gradient(120deg,#0b1b2c,#111333); border-color: #263754; }

.case-hero { background: radial-gradient(circle at 78% 24%,color-mix(in srgb,var(--case-accent) 24%,transparent),transparent 36%),#07101f; }
.case-hero h1 { font-weight: 650; letter-spacing: -.07em; }
.paper-summary { background: #091426; }
.paper-document-head { border-color: #293a56; border-radius: 14px; overflow: hidden; background: rgba(12,26,46,.72); }
.paper-document-head > div { border-color: #293a56; }
.paper-analysis { background: #07101f; }
.paper-toc, .paper-section, .paper-method, .paper-method li, .paper-findings, .paper-findings article { border-color: #22334e; }
.paper-architecture, .paper-indicators { border-color: #293b58; border-radius: 14px; overflow: hidden; }
.paper-architecture article, .paper-indicators > div, .paper-indicators span { border-color: #293b58; }
.paper-architecture article { background: linear-gradient(150deg,rgba(14,30,51,.75),rgba(8,20,36,.7)); }
.paper-risk-grid li { border-color: #22334e; }
.next-case { background: #0a1527; border-color: #263850; }

.context-bar { background: rgba(8,18,33,.94); border-color: #21324b; backdrop-filter: blur(16px); }
.breadcrumbs a { color: #8699b1; }
.breadcrumbs strong { color: #dbe4ef; }

@media (max-width: 1000px) {
  .service-list { grid-template-columns: 1fr; }
  .service-row { min-height: auto; }
  .service-number { margin-bottom: 38px; }
  .service-items { margin-top: 25px; padding-top: 0; }
}

@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero::before { right: -520px; opacity: .34; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-system { max-width: 660px; }
}

@media (max-width: 700px) {
  .container { width: min(calc(100% - 32px),var(--container)); }
  .section-pad { padding: 92px 0; }
  .site-header .brand-logo { width: 122px; }
  .hero { padding-top: 132px; }
  .hero h1 { font-size: clamp(49px,14vw,68px); }
  .hero-lede { font-size: 16px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-link { justify-content: center; }
  .strip-inner { align-items: flex-start; flex-direction: column; gap: 17px; padding-block: 24px; }
  .strip-list { flex-wrap: wrap; justify-content: flex-start; gap: 13px 24px; }
  .partner-shell { padding-block: 92px; }
  .service-row { padding: 25px; border-radius: 14px; }
  .case-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 48px; }
  .eyebrow { font-size: 8px; }
  .button-large { min-height: 46px; }
}

/* Final monochrome direction: Triangle green + near-black */
:root {
  --emerald: #1ead7e;
  --emerald-dark: #53d7aa;
  --emerald-soft: #0d2a20;
  --blue: #1ead7e;
  --violet: #1ead7e;
  --cyan: #1ead7e;
  --ink: #f3f8f6;
  --muted: #9aa9a3;
  --line: #20342c;
  --paper: #050a07;
  --white: #09120e;
  --dark: #030604;
  --dark-soft: #08110d;
  --radius: 5px;
  --shadow: 0 20px 50px rgba(0,0,0,.38);
}

body { background: #050a07; }
body::before { background-image: linear-gradient(90deg,transparent calc(25% - 1px),rgba(30,173,126,.045) 25%,transparent calc(25% + 1px),transparent calc(50% - 1px),rgba(30,173,126,.045) 50%,transparent calc(50% + 1px),transparent calc(75% - 1px),rgba(30,173,126,.045) 75%,transparent calc(75% + 1px)); }
.container { width: min(calc(100% - 48px),1280px); }
.section-pad { padding: 82px 0; }
.section-heading { gap: 48px; margin-bottom: 42px; }
.section-heading h2 { font-size: clamp(40px,4.8vw,64px); }
.section-heading > p { font-size: 16px; }
.section-kicker { color: #53d7aa; }

.button { min-height: 46px; padding: 11px 20px; border-radius: 4px; font-size: 13px; font-weight: 700; letter-spacing: .005em; }
.button-large { min-height: 50px; padding-inline: 23px; font-size: 14px; }
.button-primary, .button-dark, .button-light { background: #1ead7e; border-color: #1ead7e; color: #03100b; box-shadow: none; }
.button-primary:hover, .button-dark:hover, .button-light:hover { background: #45c99d; border-color: #45c99d; }
.button-outline-light { background: transparent; border-color: #3c5a4d; color: #f3f8f6; }
.button-outline-light:hover { background: #0c1a14; border-color: #1ead7e; }
.text-link { min-height: 42px; color: #f3f8f6; font-size: 13px; font-weight: 700; }
.text-link i { color: #1ead7e; }

.site-header, .site-header.scrolled { background: rgba(5,10,7,.94); border-color: #172820; }
.desktop-nav a { color: #a0ada8; }
.desktop-nav a.active::after { background: #1ead7e; }
.header-cta .fa-whatsapp { color: #03100b; }
.mobile-menu { background: #050a07; }

.hero { min-height: 790px; padding-top: 145px; background: #050a07; }
.hero::before { width: 780px; height: 650px; right: -250px; top: -180px; background: radial-gradient(circle,rgba(30,173,126,.55),rgba(30,173,126,.12) 46%,transparent 70%); filter: blur(55px); opacity: .38; transform: none; }
.hero::after { background-image: linear-gradient(rgba(30,173,126,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(30,173,126,.055) 1px,transparent 1px); }
.hero h1 { font-size: clamp(55px,6vw,84px); }
.hero h1 em, .page-hero h1 em { background: none; -webkit-background-clip: initial; background-clip: initial; color: #1ead7e; }
.hero-lede { font-size: 19px; }
.eyebrow { background: #08130e; border-color: #29463a; border-radius: 4px; }
.hero-proof span { background: #08130e; border-color: #20372d; border-radius: 3px; color: #9fafaa; font-size: 10px; }
.system-stage { background: #07110d; border-color: #29463a; border-radius: 6px; }
.system-stage::before { background-image: linear-gradient(rgba(30,173,126,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(30,173,126,.06) 1px,transparent 1px); }
.system-core { background: #0a1a13; border-color: rgba(30,173,126,.35); }
.system-node { background: rgba(7,17,13,.96); border-color: #315143; border-radius: 4px; }
.system-caption { background: #07110d; border-color: #29463a; border-radius: 4px; }

.industry-strip, .services, .web-catalog, .catalog-products, .process, .principles, .faq, .work-catalog, .paper-summary, .paper-analysis { background: #050a07; border-color: #20342c; }
.strip-inner { min-height: 76px; }
.technology-partners { background: #07110d; border-color: #20342c; }
.technology-partners::before { width: 560px; height: 560px; right: -230px; top: -330px; background: radial-gradient(circle,rgba(30,173,126,.15),transparent 68%); }
.partner-shell { gap: 55px; padding-block: 76px; }
.partner-intro h2 { font-size: clamp(40px,4.4vw,58px); }
.partner-status { background: #09150f; border-color: #29463a; border-radius: 4px; }
.platform-grid { gap: 10px; }
.platform-card, .platform-card:first-child, .platform-card:last-of-type { min-height: 240px; padding: 24px; background: #09150f; border-color: #29463a; border-radius: 4px; }
.platform-card::after { border-color: rgba(30,173,126,.13); box-shadow: 0 0 0 24px rgba(30,173,126,.018),0 0 0 50px rgba(30,173,126,.01); }
.platform-icon, .platform-card:last-of-type .platform-icon { width: 46px; height: 46px; background: #0d241a; border-color: #315143; border-radius: 4px; color: #53d7aa; font-size: 18px; }
.platform-card h3 { font-size: 36px; }
.platform-card p { font-size: 13px; }
.partner-capabilities { min-height: 62px; background: #08130e; border-color: #29463a; border-radius: 4px; }
.partner-capabilities span { min-height: 44px; border-color: #29463a; font-size: 12px; }

.service-list { gap: 10px; }
.service-row { min-height: 355px; padding: 24px; background: #08130e; border-color: #263e34; border-radius: 4px; }
.service-row::before, .service-row:nth-child(2)::before, .service-row:nth-child(3)::before { width: 170px; height: 170px; background: radial-gradient(circle,rgba(30,173,126,.1),transparent 70%); }
.service-number { margin-bottom: 40px; color: #6f827a; font-size: 12px; }
.service-copy h3 { font-size: 36px; }
.service-copy p { font-size: 15px; }
.service-items { gap: 9px; padding-top: 22px; }
.service-items li { color: #a7b5af; font-size: 13px; }
.service-action { width: 46px; height: 46px; border-color: #3c5a4d; border-radius: 4px; }

.selected-work { background: #030604; }
.case-grid, .work-index, .catalog-product-grid { gap: 10px; }
.case-card, .work-index-card, .catalog-product-card, .web-type-card { background: #08110d; border-color: #263e34; border-radius: 4px; }
.case-card { padding: 12px; }
.case-card:hover, .work-index-card:hover, .catalog-product-card:hover { border-color: #1ead7e; box-shadow: none; }
.case-visual, .work-index-visual, .catalog-product-preview, .type-preview { background: #09150f; border-radius: 2px; }
.case-visual { height: 285px; margin-bottom: 22px; }
.case-card h3 { font-size: 30px; }
.case-card p { font-size: 15px; }
.case-card-actions a, .work-card-actions a, .type-link { font-size: 13px; }
.web-type-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.type-preview { height: 230px; }
.type-copy { padding: 22px; }
.type-copy h3 { font-size: 25px; }
.type-copy p { font-size: 14px; }
.catalog-product-preview { height: 340px; padding: 16px; }
.catalog-product-copy { padding: 24px; }
.catalog-product-copy h2 { font-size: 36px; }
.catalog-product-copy p { font-size: 15px; }
.catalog-product-actions .button { min-width: 132px; }

.screen-accent-blue, .screen-accent-emerald, .screen-accent-amber, .screen-accent-violet, .screen-accent-cyan, .screen-accent-rose, .screen-accent-teal { --screen-accent: #1ead7e; }
.accent-blue, .accent-emerald, .accent-amber, .accent-violet, .accent-cyan, .accent-rose, .accent-slate, .accent-teal, .accent-indigo, .accent-orange, .accent-lime, .accent-green { --case-accent: #1ead7e; }
.catalog-product-card.tone-blue, .catalog-product-card.tone-emerald, .catalog-product-card.tone-amber, .catalog-product-card.tone-violet, .catalog-product-card.tone-cyan, .catalog-product-card.tone-rose, .catalog-product-card.tone-teal { --tone: #1ead7e; }
.type-preview-blue, .type-preview-emerald, .type-preview-amber, .type-preview-violet, .type-preview-cyan, .type-preview-rose, .type-preview-teal { background: #09150f; }
.project-screen { width: 96%; height: 92%; background: #050a07; border-color: #315143; border-radius: 3px; }
.project-screen-top { height: 34px; background: #0a1711; border-color: #20372d; }
.project-screen-top > strong { font-size: 9px; }
.screen-live { font-size: 7px; }
.project-screen-app { height: calc(100% - 34px); grid-template-columns: 44px 1fr; }
.project-screen-nav { padding: 12px 9px; background: #07110d; }
.screen-app-icon { width: 28px; height: 28px; font-size: 10px; }
.project-screen-content { padding: 16px; background: #08130e; }
.screen-title small, .screen-portal-card > small { font-size: 7px; }
.screen-title b { font-size: 15px; }
.screen-title > span, .screen-portal-card button { padding: 6px 9px; font-size: 8px; }
.screen-kpis small, .screen-chart small { font-size: 7px; }
.screen-kpis b { font-size: 15px; }
.screen-chart > strong { font-size: 19px; }
.screen-list span em, .screen-store-head span, .screen-products small, .screen-board small, .screen-agents small, .screen-attendees small, .screen-attendees > span b, .screen-attendees > span em, .screen-attendees > span strong, .screen-portal-brand span, .screen-portal-card p { font-size: 7px; }
.screen-products b, .screen-agents b, .screen-portal-brand strong { font-size: 9px; }
.screen-portal-card b { font-size: 13px; }
.work-index-visual { height: 340px; padding: 14px; }
.work-index-copy { padding: 24px; }
.work-index-copy h2 { font-size: 38px; }
.work-index-copy p { font-size: 15px; }

.principle-grid { gap: 0; border-color: #263e34; border-radius: 4px; }
.principle-grid article { min-height: 245px; padding: 26px; background: #08130e; border-color: #263e34; }
.principle-grid h3 { margin-top: 50px; }
.process-list li { padding-block: 28px; }
.final-cta { background: #07110d; border-color: #29463a; }
.final-cta::before { width: 520px; height: 520px; right: -220px; bottom: -330px; background: radial-gradient(circle,rgba(30,173,126,.2),transparent 70%); }
.site-footer { background: #030604; border-color: #172820; }

.page-hero, .case-hero { background: radial-gradient(circle at 84% 14%,rgba(30,173,126,.15),transparent 32%),#050a07; }
.page-hero::after { background-image: linear-gradient(rgba(30,173,126,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(30,173,126,.035) 1px,transparent 1px); }
.context-bar { background: rgba(5,10,7,.96); border-color: #20342c; }
.confidential-badge, .filter-bar button { background: #08130e; border-color: #29463a; border-radius: 4px; }
.filter-bar { gap: 6px; padding-bottom: 20px; }
.filter-bar button { min-height: 42px; padding: 8px 14px; font-size: 12px; }
.filter-bar button.active { background: #1ead7e; border-color: #1ead7e; color: #03100b; }
.compact-cta, .next-case { background: #07110d; border-color: #29463a; }

.paper-document-head, .paper-architecture, .paper-indicators { background: #07110d; border-color: #29463a; border-radius: 4px; }
.paper-document-head > div, .paper-architecture article, .paper-indicators > div, .paper-indicators span { border-color: #29463a; }
.paper-architecture article { min-height: 210px; padding: 24px; background: #08130e; }
.paper-architecture article > i { margin-bottom: 34px; }
.paper-section { padding-bottom: 72px; margin-bottom: 72px; }
.paper-abstract-grid { padding-top: 62px; }

@media (max-width: 1000px) {
  .web-type-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-row { min-height: auto; }
}

@media (max-width: 700px) {
  .container { width: min(calc(100% - 28px),1280px); }
  .section-pad { padding: 64px 0; }
  .web-type-grid { grid-template-columns: 1fr; }
  .case-visual { height: 250px; }
  .type-preview { height: 250px; }
  .catalog-product-preview, .work-index-visual { height: 290px; }
  .service-row { padding: 22px; }
  .project-screen-app { grid-template-columns: 36px 1fr; }
  .project-screen-content { padding: 12px; }
}

/* Balanced monochrome: neutral surfaces, Triangle green as a precise accent */
:root {
  --ink: #f1f3f2;
  --muted: #9ba19e;
  --line: #2a2f2d;
  --paper: #080a09;
  --white: #101312;
  --dark: #050605;
  --dark-soft: #0d100f;
}

body { background: #080a09; }
body::before { background-image: linear-gradient(90deg,transparent calc(25% - 1px),rgba(255,255,255,.026) 25%,transparent calc(25% + 1px),transparent calc(50% - 1px),rgba(255,255,255,.026) 50%,transparent calc(50% + 1px),transparent calc(75% - 1px),rgba(255,255,255,.026) 75%,transparent calc(75% + 1px)); }

.services,
.web-catalog,
.catalog-products,
.work-catalog,
.selected-work { background: #080a09; border-color: #292e2c; }

/* Services: dark graphite cards with one restrained brand cue */
.service-row {
  background: #0e1110;
  border-color: #2c312f;
}
.service-row::before,
.service-row:nth-child(2)::before,
.service-row:nth-child(3)::before {
  width: 160px;
  height: 160px;
  background: radial-gradient(circle,rgba(255,255,255,.035),transparent 70%);
}
.service-number { color: #747b78; }
.service-copy p,
.service-items li { color: #a4aaa7; }
.service-items li::before { color: #747b78; }
.service-action {
  background: #151917;
  border-color: #3a403d;
  color: #dfe3e1;
}
.service-action:hover {
  background: #1ead7e;
  border-color: #1ead7e;
  color: #04100b;
}

/* Product and case cards: neutral frames; green appears only in active details */
.case-card,
.work-index-card,
.catalog-product-card,
.web-type-card {
  background: #0e1110;
  border-color: #2c312f;
}
.case-card:hover,
.work-index-card:hover,
.catalog-product-card:hover,
.web-type-card:hover { border-color: #4a514e; }
.case-visual,
.work-index-visual,
.catalog-product-preview,
.type-preview,
.type-preview-blue,
.type-preview-emerald,
.type-preview-amber,
.type-preview-violet,
.type-preview-cyan,
.type-preview-rose,
.type-preview-teal { background: #0a0d0c; }
.case-card-top,
.real-project-label { color: #7d8481; }
.case-card p,
.work-index-copy p,
.catalog-product-copy p,
.type-copy p { color: #a2a8a5; }

/* Product screens: grayscale UI with a single live/action color */
.screen-accent-blue,
.screen-accent-emerald,
.screen-accent-amber,
.screen-accent-violet,
.screen-accent-cyan,
.screen-accent-rose,
.screen-accent-teal { --screen-accent: #7d8782; }
.project-screen {
  background: #090b0a;
  border-color: #353b38;
  color: #eef1ef;
  box-shadow: 0 20px 45px rgba(0,0,0,.34);
}
.project-screen-top {
  background: #111513;
  border-color: #292e2c;
}
.project-screen-top > strong,
.screen-live { color: #939a97; }
.project-screen-nav {
  background: #0c0f0e;
  border-color: #292e2c;
}
.project-screen-nav > i { background: #343a37; }
.project-screen-nav > i.active { background: #1ead7e; }
.screen-app-icon {
  background: #1a1f1d;
  color: #b9c0bd;
}
.project-screen-content {
  background: #101412;
  background-image: none;
}
.screen-live i {
  background: #1ead7e;
  box-shadow: 0 0 7px rgba(30,173,126,.7);
}
.screen-title small,
.screen-portal-card > small,
.screen-store-head strong { color: #1ead7e; }
.screen-title > span,
.screen-portal-card button {
  background: #1ead7e;
  color: #04100b;
}
.screen-kpis article,
.screen-chart,
.screen-list,
.screen-products article,
.screen-board section,
.screen-agents article,
.screen-attendees,
.screen-portal-card {
  background: #151917;
  border-color: #2d3330;
}
.screen-table { border-color: #2d3330; }
.screen-table span { background: #343a37; }
.screen-table b { background: #707a75; }
.screen-chart > div { border-color: #343a37; }
.screen-chart > div i {
  background: linear-gradient(#737d78,#3b423f);
}
.screen-chart > div i:last-child { background: linear-gradient(#1ead7e,#176c51); }
.screen-list span { border-color: #2d3330; }
.screen-list span i { background: #737d78; }
.screen-list span:first-child i { background: #1ead7e; }
.screen-products article > i {
  background: #202522;
  color: #aeb5b1;
}
.screen-products article:first-child > i {
  background: #173027;
  color: #45c99d;
}
.screen-board article {
  background: #202522;
  border-left-color: #59615d;
}
.screen-board section:first-child article { border-left-color: #1ead7e; }
.screen-agents article > i { color: #aeb5b1; }
.screen-agents article:first-child > i { color: #1ead7e; }
.screen-agents em { background: #7d8782; }
.screen-agents article:first-child em { background: #1ead7e; }
.screen-attendees > span i {
  background: #202522;
  color: #aeb5b1;
}
.screen-attendees > span:first-child i {
  background: #173027;
  color: #45c99d;
}
.screen-attendees > span strong { color: #dce1de; }
.screen-portal-brand i { color: #1ead7e; }

.catalog-note,
.compact-cta { background: #0e1110; border-color: #2c312f; }

/* Floating contact follows the same button system */
.whatsapp-float {
  right: 20px;
  bottom: 20px;
  width: auto;
  height: auto;
  min-height: 46px;
  padding: 11px 18px;
  gap: 9px;
  background: #151917;
  border: 1px solid #3a403d;
  border-radius: 4px;
  color: #f1f3f2;
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
  font-size: 13px;
  font-weight: 700;
}
.whatsapp-float i { color: #1ead7e; font-size: 17px; }
.whatsapp-float:hover {
  background: #1ead7e;
  border-color: #1ead7e;
  color: #04100b;
  transform: translateY(-2px);
}
.whatsapp-float:hover i { color: inherit; }

@media (max-width: 700px) {
  .whatsapp-float {
    right: 14px;
    bottom: 14px;
    width: 48px;
    height: 48px;
    min-height: 48px;
    justify-content: center;
    padding: 0;
  }
  .whatsapp-float span { display: none; }
}