/*
Theme Name: Tinka Smart Connection
Theme URI: https://tinkasmartretail.com
Author: Tinka Smart Connection
Description: Tema corporativo de una página para presentar AMA, ZONAS y la propuesta de valor de Tinka.
Version: 1.3.0
Text Domain: tinka-smart-connection
*/

:root {
  --navy: #08162d;
  --navy-soft: #102442;
  --ink: #111a2a;
  --blue: #2864f0;
  --cyan: #58c8f4;
  --coral: #ff625e;
  --cream: #f4f1eb;
  --paper: #fbfaf7;
  --line: #d8dce3;
  --muted: #687286;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Manrope", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
svg { width: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
p, h1, h2, h3 { margin-top: 0; }

.navShell { position: fixed; z-index: 50; top: 18px; left: 50%; width: min(1180px, calc(100% - 40px)); height: 66px; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; padding: 0 13px 0 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; color: white; background: rgba(9,24,47,.78); box-shadow: 0 14px 45px rgba(0,0,0,.18); backdrop-filter: blur(20px); }
.brand { display: inline-flex; align-items: center; }
.officialLogo { display: block; width: 148px; height: auto; }
.compactLogo { width: 102px; }
.navShell nav { display: flex; align-items: center; gap: 30px; font-size: 12px; font-weight: 700; }
.navShell nav>a:not(.navCta) { color: #c0cada; transition: color .2s; }
.navShell nav>a:not(.navCta):hover { color: white; }
.navCta { display: inline-flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 17px; border-radius: 10px; color: var(--navy); background: white; }
.menuButton { display: none; }

.hero { position: relative; min-height: 930px; display: grid; grid-template-columns: minmax(0,.9fr) minmax(540px,1.1fr); align-items: center; gap: 4vw; padding: 145px max(5vw,45px) 112px; color: white; background: var(--navy); overflow: hidden; }
.heroNoise { position: absolute; inset: 0; opacity: .17; background-image: radial-gradient(rgba(255,255,255,.35) .6px, transparent .7px); background-size: 8px 8px; mask-image: linear-gradient(to right, black, transparent 74%); pointer-events: none; }
.hero:before { content: ""; position: absolute; width: 650px; height: 650px; right: -120px; top: 60px; border-radius: 50%; background: radial-gradient(circle, rgba(40,100,240,.28), rgba(40,100,240,.04) 52%, transparent 72%); }
.hero:after { content: ""; position: absolute; width: 380px; height: 380px; left: 36%; bottom: -230px; border-radius: 50%; background: radial-gradient(circle, rgba(255,98,94,.22), transparent 70%); }
.heroCopy, .heroVisual, .signalStage, .heroFooter { position: relative; z-index: 2; }
.overline { display: flex; align-items: center; gap: 11px; margin-bottom: 23px; color: #8fcbff; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.overline span { width: 24px; height: 1px; background: currentColor; }
.overline.dark { color: var(--blue); }
.hero h1 { max-width: 760px; margin-bottom: 27px; font-size: clamp(50px, 5.5vw, 82px); line-height: .99; letter-spacing: -.064em; font-weight: 620; }
.hero h1 em { color: #89d5f8; font-style: normal; }
.heroLead { max-width: 630px; color: #aebad0; font-size: 18px; line-height: 1.75; }
.heroActions { display: flex; align-items: center; gap: 27px; margin-top: 36px; }
.primaryButton { display: inline-flex; align-items: center; gap: 14px; min-height: 53px; padding: 0 21px; border-radius: 11px; color: white; background: var(--blue); box-shadow: 0 15px 35px rgba(40,100,240,.28); font-size: 13px; font-weight: 800; transition: transform .2s, background .2s; }
.primaryButton:hover { transform: translateY(-2px); background: #3974ff; }
.quietLink { display: inline-flex; align-items: center; gap: 9px; color: #d4dbe7; font-size: 12px; font-weight: 700; }
.quietLink svg { color: var(--cyan); }

.heroVisual { min-height: 680px; border: 1px solid rgba(255,255,255,.18); border-radius: 30px; background: #0b1d35; box-shadow: inset 0 1px rgba(255,255,255,.12), 0 35px 90px rgba(0,0,0,.3); overflow: hidden; }
.heroVisual>img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 43%; }
.heroVisualShade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,13,28,.2) 10%, transparent 42%, rgba(4,13,28,.82) 100%); }
.heroVisualTop { position: absolute; top: 23px; left: 24px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.15); border-radius: 30px; color: #d5e2f3; background: rgba(6,20,40,.66); backdrop-filter: blur(12px); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.heroCapability { position: absolute; bottom: 105px; width: 210px; min-height: 66px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.17); border-radius: 14px; background: rgba(7,22,45,.78); box-shadow: 0 16px 38px rgba(0,0,0,.22); backdrop-filter: blur(14px); }
.heroCapabilityAma { left: 24px; }
.heroCapabilityZonas { right: 24px; }
.heroCapability>span { flex: 0 0 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--blue); }
.heroCapabilityZonas>span { background: var(--coral); }
.heroCapability small, .heroCapability strong { display: block; }
.heroCapability small { margin-bottom: 3px; color: #8fa3bf; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.heroCapability strong { font-size: 10px; line-height: 1.25; }
.heroVisualResult { position: absolute; left: 24px; right: 24px; bottom: 23px; min-height: 63px; display: grid; grid-template-columns: 1fr auto 28px; align-items: center; gap: 14px; padding: 0 17px; border: 1px solid rgba(130,189,255,.27); border-radius: 14px; background: rgba(13,40,76,.9); backdrop-filter: blur(14px); }
.heroVisualResult small { color: #8ea1bd; font-size: 8px; text-transform: uppercase; letter-spacing: .11em; }
.heroVisualResult strong { font-size: 11px; }
.heroVisualResult svg { color: var(--cyan); }

.signalStage { min-height: 600px; border: 1px solid rgba(255,255,255,.13); border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 35px 90px rgba(0,0,0,.22); overflow: hidden; }
.stageGrid { position: absolute; inset: 0; background-image: linear-gradient(rgba(112,155,221,.095) 1px, transparent 1px), linear-gradient(90deg, rgba(112,155,221,.095) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(circle at 50% 52%, black, transparent 76%); }
.stageLabel { position: absolute; top: 24px; left: 27px; display: flex; align-items: center; gap: 8px; color: #93a3bd; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.liveDot { width: 8px; height: 8px; border-radius: 50%; background: #62d8a1; box-shadow: 0 0 0 5px rgba(98,216,161,.1); }
.signalCore { position: absolute; z-index: 4; left: 50%; top: 49%; width: 154px; height: 94px; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; padding: 15px 17px; border: 1px solid rgba(130,182,255,.36); border-radius: 22px; background: white; box-shadow: 0 0 0 15px rgba(40,100,240,.08), 0 0 80px rgba(40,100,240,.36); }
.signalCore .compactLogo { width: 120px; }
.orbit { position: absolute; z-index: 3; width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: rgba(18,42,76,.88); box-shadow: 0 25px 55px rgba(0,0,0,.28); }
.orbitAma { left: 9%; top: 20%; transform: rotate(-3deg); }
.orbitZonas { right: 8%; bottom: 17%; transform: rotate(3deg); }
.orbitIcon { width: 39px; height: 39px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 11px; color: white; background: var(--blue); }
.orbitZonas .orbitIcon { background: var(--coral); }
.orbit strong { font-size: 13px; letter-spacing: .12em; }
.orbit small { margin-top: 3px; color: #94a5bf; font-size: 9px; }
.signalLine { position: absolute; z-index: 1; width: 190px; height: 115px; border: 1px dashed rgba(104,176,255,.55); border-bottom: 0; border-right: 0; border-radius: 40px 0 0; }
.lineOne { left: 23%; top: 31%; transform: rotate(15deg); }
.lineTwo { right: 20%; bottom: 29%; transform: rotate(195deg); }
.eventCard { position: absolute; z-index: 5; width: 205px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; color: white; background: rgba(11,28,54,.92); box-shadow: 0 17px 45px rgba(0,0,0,.25); }
.eventCard small { display: block; margin-bottom: 6px; color: #8193af; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.eventCard strong { font-size: 11px; line-height: 1.45; }
.eventQuestion { left: 4%; bottom: 19%; }
.eventInsight { right: 4%; top: 20%; }
.stageResult { position: absolute; z-index: 6; left: 50%; bottom: 26px; width: calc(100% - 52px); min-height: 70px; transform: translateX(-50%); display: grid; grid-template-columns: 1fr auto 35px; align-items: center; gap: 14px; padding: 0 18px; border: 1px solid rgba(132,191,255,.22); border-radius: 15px; background: rgba(16,42,79,.91); }
.stageResult span { color: #8497b4; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.stageResult strong { font-size: 12px; }
.stageResult svg { color: var(--cyan); }
.heroFooter { position: absolute; left: max(5vw,45px); right: max(5vw,45px); bottom: 28px; display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.heroFooter span { color: #74859e; font-size: 9px; letter-spacing: .17em; }
.heroFooter p { margin: 0; color: #8292aa; font-size: 10px; }

.section { position: relative; padding: 122px max(5.5vw,50px); }
.sectionNumber { position: absolute; top: 46px; right: max(5.5vw,50px); color: #9ba2ad; font-size: 10px; letter-spacing: .14em; }
.problem { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3vw 8vw; background: var(--cream); }
.problemHeading { grid-column: 1/3; }
.section h2 { margin-bottom: 0; font-size: clamp(43px,5vw,72px); line-height: 1.03; letter-spacing: -.055em; font-weight: 620; }
.section h2 em { color: var(--blue); font-style: normal; }
.problemBody { grid-column: 1/3; display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; margin-top: 45px; padding-top: 42px; border-top: 1px solid #cfd1d3; }
.problemBody p { color: var(--muted); line-height: 1.75; }
.problemBody .largeCopy { color: var(--ink); font-size: 24px; line-height: 1.45; letter-spacing: -.02em; }
.painRail { grid-column: 1/3; display: grid; grid-template-columns: repeat(3,1fr); margin-top: 45px; border: 1px solid #cfd3d9; background: var(--paper); }
.painRail article { min-height: 255px; padding: 28px; }
.painRail article+article { border-left: 1px solid #cfd3d9; }
.painRail span { display: block; color: var(--coral); font-size: clamp(48px,4.2vw,68px); line-height: .9; font-weight: 700; letter-spacing: -.06em; }
.painRail strong { display: block; max-width: 280px; margin-top: 46px; font-size: 19px; line-height: 1.3; }
.painRail p { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.solutions { background: var(--paper); }
.solutionsHeader { display: grid; grid-template-columns: 1.15fr .85fr; gap: 9vw; align-items: end; }
.solutionsHeader>p { margin: 0 0 5px; color: var(--muted); line-height: 1.8; }
.solutionSwitcher { display: flex; justify-content: flex-end; gap: 8px; margin: 65px 0 16px; }
.solutionSwitcher button { min-width: 150px; height: 51px; display: flex; align-items: center; gap: 15px; padding: 0 20px; border: 1px solid var(--line); border-radius: 11px; color: #7a8392; background: transparent; font-weight: 800; cursor: pointer; transition: .2s; }
.solutionSwitcher button span { font-size: 9px; font-weight: 600; }
.solutionSwitcher button.active { color: white; border-color: var(--navy); background: var(--navy); }
.solutionPanel { display: grid; grid-template-columns: .88fr 1.12fr; min-height: 650px; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; }
.solutionNarrative { align-self: center; padding: 60px clamp(34px,5vw,75px); }
.solutionTag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 30px; color: var(--blue); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.solutionTag svg { font-size: 18px; }
.zonas .solutionTag { color: var(--coral); }
.solutionNarrative h3 { max-width: 540px; margin-bottom: 20px; font-size: clamp(32px,3vw,45px); line-height: 1.08; letter-spacing: -.045em; }
.solutionNarrative>p { color: var(--muted); line-height: 1.8; }
.solutionNarrative ul { list-style: none; margin: 30px 0 0; padding: 0; }
.solutionNarrative li { position: relative; padding: 13px 0 13px 25px; border-top: 1px solid #e1e4e8; font-size: 13px; }
.solutionNarrative li:before { content: ""; position: absolute; left: 2px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.zonas .solutionNarrative li:before { background: var(--coral); }
.solutionVisual { min-height: 650px; display: grid; place-items: center; padding: 45px; background: #e8eef8; overflow: hidden; }
.ama .solutionVisual { background: radial-gradient(circle at 78% 18%, rgba(40,100,240,.28), transparent 32%), #0d1e38; }
.zonas .solutionVisual { background: #10223d; }
.amaGallery { position: relative; width: min(620px,100%); height: 560px; }
.amaPhoto { position: absolute; margin: 0; border: 1px solid rgba(255,255,255,.2); background: #0a172a; box-shadow: 0 30px 70px rgba(0,0,0,.34); overflow: hidden; }
.amaPhoto img { width: 100%; height: 100%; display: block; object-fit: cover; }
.amaPhotoMain { inset: 0 auto 0 0; width: 72%; border-radius: 24px; transform: rotate(-1.5deg); }
.amaPhotoMain img { object-position: 50% 42%; }
.amaPhotoDetail { right: 0; bottom: 28px; z-index: 3; width: 43%; height: 63%; border: 7px solid #122744; border-radius: 21px; transform: rotate(2deg); }
.amaPhotoDetail img { object-position: 50% 44%; }
.amaPhoto figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.17); border-radius: 12px; color: white; background: rgba(7,21,42,.82); backdrop-filter: blur(13px); }
.amaPhoto figcaption small, .amaPhoto figcaption strong { display: block; }
.amaPhoto figcaption small { color: #93a8c5; font-size: 8px; text-transform: uppercase; letter-spacing: .09em; }
.amaPhoto figcaption strong { margin-top: 3px; font-size: 10px; line-height: 1.3; }
.amaPhotoDetail figcaption { display: block; left: 10px; right: 10px; bottom: 10px; padding: 10px; }
.zonesPhoto { position: relative; width: 100%; aspect-ratio: 16/10; margin: 0; border: 1px solid #385372; border-radius: 22px; box-shadow: 0 35px 90px rgba(0,0,0,.4); overflow: hidden; }
.zonesPhoto>img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.zonesPhotoShade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(5,17,34,.88) 100%); }
.zonesPhoto figcaption { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; align-items: end; justify-content: space-between; gap: 25px; color: white; }
.zonesPhoto figcaption>div { display: flex; align-items: center; gap: 8px; }
.zonesPhoto figcaption small { color: #b4c8df; font-size: 8px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.zonesPhoto figcaption strong { max-width: 280px; font-size: 12px; line-height: 1.4; text-align: right; }
.amaDevice { width: min(390px,100%); padding: 18px; border: 7px solid #17243b; border-radius: 30px; background: white; box-shadow: 0 35px 80px rgba(27,53,93,.28); transform: rotate(1.5deg); }
.deviceTop { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 3px 15px; border-bottom: 1px solid #e4e9f0; }
.miniBrand { display: flex; align-items: center; gap: 9px; color: var(--navy); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.miniBrand .compactLogo { width: 72px; }
.online { color: #2ca977; font-size: 9px; }
.online:before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #2ca977; }
.conversationHead { padding: 28px 9px 17px; }
.conversationHead small { display: block; color: #8090a7; font-size: 10px; }
.conversationHead strong { display: block; margin-top: 5px; font-size: 17px; }
.userBubble { width: 78%; margin: 7px 0 15px auto; padding: 12px 14px; border-radius: 14px 4px 14px 14px; color: #4d5e76; background: #eef2f7; font-size: 11px; }
.amaAnswer { display: flex; gap: 11px; padding: 15px; border-radius: 4px 15px 15px; color: white; background: var(--blue); }
.spark { flex: 0 0 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: var(--blue); background: white; }
.amaAnswer small, .amaAnswer strong { display: block; }
.amaAnswer small { color: #cbdcff; font-size: 9px; }
.amaAnswer strong { margin-top: 3px; font-size: 12px; }
.amaAnswer p { margin: 6px 0 0; color: #dce7ff; font-size: 10px; line-height: 1.45; }
.quickOptions { display: flex; gap: 7px; margin-top: 12px; padding-left: 38px; }
.quickOptions span { padding: 8px 10px; border: 1px solid #d7e2f2; border-radius: 20px; color: #496382; font-size: 9px; }
.interactionMetric { margin-top: 22px; padding: 13px 14px; border: 1px solid #dfe5ee; border-radius: 12px; background: #fafbfc; }
.interactionMetric span, .interactionMetric strong { display: block; }
.interactionMetric span { color: #8b97a8; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.interactionMetric strong { margin-top: 5px; font-size: 10px; }
.zonesBoard { width: min(570px,100%); padding: 21px; border: 1px solid #36506f; border-radius: 19px; background: #172d4b; box-shadow: 0 35px 90px rgba(0,0,0,.35); transform: rotate(-1deg); }
.boardTop { display: flex; align-items: center; justify-content: space-between; color: white; }
.boardTop small, .boardTop strong { display: block; }
.boardTop small { margin-bottom: 4px; color: #6f8db1; font-size: 8px; letter-spacing: .12em; }
.boardTop strong { font-size: 12px; }
.boardTop>span { color: #9fb3cc; font-size: 9px; }
.boardTop>span i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #5bd49b; }
.floorMap { position: relative; height: 345px; margin-top: 18px; border: 1px solid #324d6e; border-radius: 13px; background: #102440; overflow: hidden; }
.floorMap:before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(113,146,186,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(113,146,186,.07) 1px, transparent 1px); background-size: 28px 28px; }
.shelf { position: absolute; z-index: 2; border: 1px solid #4a6687; border-radius: 4px; background: #25405f; }
.s1 { left: 9%; top: 13%; width: 15%; height: 38%; }.s2 { left: 34%; top: 13%; width: 14%; height: 25%; }.s3 { left: 58%; top: 13%; width: 29%; height: 13%; }.s4 { right: 12%; bottom: 16%; width: 16%; height: 35%; }.s5 { left: 30%; bottom: 15%; width: 23%; height: 12%; }
.path { position: absolute; z-index: 4; left: 13%; bottom: 12%; width: 68%; height: 63%; border: 2px dashed #63c5f1; border-left: 0; border-bottom: 0; border-radius: 0 70px 0 0; transform: rotate(-5deg); }
.path i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #76d5fa; box-shadow: 0 0 0 4px rgba(118,213,250,.1); }
.path i:nth-child(1){left:0;bottom:0}.path i:nth-child(2){left:25%;bottom:14%}.path i:nth-child(3){left:50%;top:52%}.path i:nth-child(4){right:25%;top:20%}.path i:nth-child(5){right:0;top:0}
.heat { position: absolute; z-index: 3; border-radius: 50%; filter: blur(1px); }
.heatOne { width: 125px; height: 125px; right: 7%; top: 3%; background: radial-gradient(circle, rgba(255,76,74,.9), rgba(255,177,58,.54) 32%, rgba(255,177,58,.08) 66%, transparent 69%); }
.heatTwo { width: 90px; height: 90px; left: 17%; bottom: 2%; background: radial-gradient(circle, rgba(255,123,70,.72), rgba(255,177,58,.25) 38%, transparent 70%); }
.entrance, .checkout { position: absolute; z-index: 5; color: #7995b7; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.entrance { left: 6%; bottom: 4%; }.checkout { right: 6%; bottom: 4%; }
.zoneInsight { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 17px; color: white; }
.zoneInsight small, .zoneInsight strong { display: block; }.zoneInsight small { margin-bottom: 4px; color: #6f8db1; font-size: 8px; letter-spacing: .1em; }.zoneInsight strong { font-size: 11px; }.zoneInsight>span { display: flex; align-items: center; gap: 7px; color: #82d7f9; font-size: 9px; }
.connectionStatement { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 29px 20px; color: #687286; font-size: 12px; }
.connectionStatement i, .connectionStatement b { color: #a5adb9; font-style: normal; }.connectionStatement strong { color: var(--blue); }

.about { display: grid; grid-template-columns: .86fr 1.14fr; gap: 8vw; color: white; background: var(--navy); }
.about .sectionNumber { color: #61728d; }
.aboutStory h2 { max-width: 660px; margin-bottom: 33px; font-size: clamp(42px,4.8vw,68px); }
.aboutStory>p:not(.overline) { max-width: 650px; color: #aab6ca; line-height: 1.8; }
.aboutStory>p:last-child { color: white; font-weight: 700; }
.proofBlock { align-self: end; }
.proofLabel { padding-bottom: 15px; border-bottom: 1px solid #32435e; color: #7486a1; font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.proofGrid { display: grid; grid-template-columns: repeat(3,1fr); }
.proofGrid article { min-height: 215px; padding: 26px 19px 22px; border-bottom: 1px solid #32435e; }
.proofGrid article+article { border-left: 1px solid #32435e; }
.proofGrid strong, .proofGrid span, .proofGrid small { display: block; }
.proofGrid strong { min-height: 94px; color: #83d6f9; font-size: clamp(25px,2.8vw,42px); line-height: 1.1; letter-spacing: -.04em; }
.proofGrid span { font-size: 11px; font-weight: 700; }.proofGrid small { margin-top: 7px; color: #7688a3; font-size: 9px; line-height: 1.45; }
.proofNote { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 20px; color: #7587a3; font-size: 9px; }
.proofNote strong { color: #d9e0eb; }.proofNote i { width: 3px; height: 3px; border-radius: 50%; background: #556a89; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; background: var(--cream); }
.contactIntro h2 { max-width: 630px; margin-bottom: 27px; }
.contactIntro>p:not(.overline) { max-width: 570px; color: var(--muted); line-height: 1.8; }
.contactIntro>a { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; padding-bottom: 4px; color: var(--blue); border-bottom: 1px solid #aebfe7; font-size: 13px; font-weight: 800; }
form { align-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 37px; border: 1px solid #cfd4dc; border-radius: 19px; background: var(--paper); box-shadow: 0 20px 60px rgba(31,43,61,.06); }
form label { display: flex; flex-direction: column; gap: 10px; color: #6f7989; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
form label.full { grid-column: 1/3; }
input, textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #bdc4ce; border-radius: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; text-transform: none; letter-spacing: 0; }
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus { border-color: var(--blue); }
.submitButton { grid-column: 1/3; min-height: 51px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 10px; color: white; background: var(--navy); font-size: 12px; font-weight: 800; cursor: pointer; }
form>small { grid-column: 1/3; color: #8a919b; text-align: center; font-size: 8px; }

footer { min-height: 122px; display: flex; align-items: center; gap: 30px; padding: 0 max(5.5vw,50px); color: white; background: #050f20; }
.footerBrand .officialLogo { width: 138px; }
footer p { margin: 0; color: #74849b; font-size: 10px; }
footer>span { margin-left: auto; color: #627289; font-size: 9px; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; padding-top: 150px; }
  .heroCopy { max-width: 850px; }
  .heroVisual { width: min(720px,100%); min-height: 780px; margin: 20px auto 40px; }
  .signalStage { width: min(720px,100%); margin: 20px auto 40px; }
  .problem, .solutionsHeader, .about, .contact { grid-template-columns: 1fr; }
  .problemHeading, .problemBody, .painRail { grid-column: auto; }
  .problemBody { grid-template-columns: 1fr 1fr; }
  .solutionPanel { grid-template-columns: 1fr; }
  .solutionVisual { min-height: 590px; }
  .about { gap: 70px; }
  .proofBlock { width: 100%; }
}

@media (max-width: 720px) {
  .navShell { top: 10px; width: calc(100% - 20px); height: 58px; padding: 0 13px 0 15px; }
  .menuButton { z-index: 3; display: grid; gap: 5px; width: 37px; height: 37px; place-content: center; border: 0; border-radius: 9px; background: rgba(255,255,255,.09); }
  .menuButton span { width: 17px; height: 1px; background: white; }
  .navShell nav { position: absolute; top: 66px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(8,22,45,.98); box-shadow: 0 25px 50px rgba(0,0,0,.25); }
  .navShell nav.open { display: flex; }
  .navShell nav>a:not(.navCta) { padding: 14px 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .navCta { justify-content: center; margin-top: 8px; }
  .hero { min-height: 0; padding: 124px 21px 95px; }
  .hero h1 { font-size: 48px; }
  .heroLead { font-size: 16px; }
  .heroActions { align-items: flex-start; flex-direction: column; }
  .heroVisual { min-height: 600px; margin-top: 35px; border-radius: 22px; }
  .heroVisualTop { top: 14px; left: 14px; }
  .heroCapability { bottom: 84px; width: calc(50% - 19px); min-height: 58px; padding: 9px 10px; gap: 8px; }
  .heroCapabilityAma { left: 12px; }
  .heroCapabilityZonas { right: 12px; }
  .heroCapability>span { flex-basis: 31px; height: 31px; }
  .heroCapability strong { font-size: 9px; }
  .heroVisualResult { left: 12px; right: 12px; bottom: 12px; min-height: 59px; grid-template-columns: 1fr auto 24px; padding: 0 13px; }
  .heroVisualResult small { display: none; }
  .signalStage { min-height: 520px; margin-top: 35px; border-radius: 22px; }
  .signalCore { width: 124px; height: 78px; padding: 12px; border-radius: 18px; }
  .signalCore .compactLogo { width: 100px; }
  .orbit { width: 94px; height: 104px; }
  .orbitAma { left: 5%; top: 18%; }.orbitZonas { right: 5%; bottom: 20%; }
  .eventCard { width: 160px; padding: 12px; }.eventQuestion { left: 3%; bottom: 24%; }.eventInsight { right: 3%; top: 24%; }
  .stageResult { width: calc(100% - 24px); bottom: 12px; grid-template-columns: 1fr auto; }.stageResult span { display: none; }
  .heroFooter { left: 21px; right: 21px; bottom: 22px; }.heroFooter p { display: none; }
  .section { padding: 92px 21px; }
  .sectionNumber { top: 28px; right: 21px; }
  .section h2 { font-size: 43px; }
  .problemBody { grid-template-columns: 1fr; gap: 12px; }
  .problemBody .largeCopy { font-size: 21px; }
  .painRail { grid-template-columns: 1fr; }
  .painRail article { min-height: 220px; }
  .painRail article+article { border-left: 0; border-top: 1px solid #cfd3d9; }
  .painRail strong { margin-top: 50px; }
  .solutionsHeader { gap: 28px; }
  .solutionSwitcher { justify-content: stretch; margin-top: 48px; }
  .solutionSwitcher button { flex: 1; min-width: 0; }
  .solutionPanel { min-height: 0; border-radius: 19px; }
  .solutionNarrative { padding: 46px 25px; }
  .solutionNarrative h3 { font-size: 35px; }
  .solutionVisual { min-height: 500px; padding: 25px 16px; }
  .amaGallery { height: 570px; }
  .amaPhotoMain { width: 78%; }
  .amaPhotoDetail { width: 48%; height: 57%; bottom: 24px; }
  .zonesPhoto { border-radius: 17px; }
  .zonesPhoto figcaption { left: 14px; right: 14px; bottom: 13px; }
  .zonesPhoto figcaption>div { display: none; }
  .zonesPhoto figcaption strong { max-width: none; font-size: 10px; text-align: left; }
  .amaDevice { width: 330px; }
  .zonesBoard { padding: 15px; }
  .floorMap { height: 300px; }
  .connectionStatement { flex-wrap: wrap; gap: 10px 15px; }
  .about { gap: 55px; }
  .aboutStory h2 { font-size: 43px; }
  .proofGrid { grid-template-columns: 1fr; }
  .proofGrid article { min-height: 150px; }
  .proofGrid article+article { border-left: 0; }
  .proofGrid strong { min-height: 65px; }
  .contact { gap: 50px; }
  form { grid-template-columns: 1fr; padding: 28px 22px; }
  form label.full, .submitButton, form>small { grid-column: auto; }
  footer { min-height: 145px; flex-wrap: wrap; padding: 28px 21px; }
  footer p { display: none; }
  footer>span { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .liveDot { animation: pulse 2.2s infinite; }
  .signalCore { animation: breathe 4s ease-in-out infinite; }
  .eventQuestion { animation: float 5s ease-in-out infinite; }
  .eventInsight { animation: float 5s ease-in-out 1.2s infinite; }
}
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(98,216,161,0); } }
@keyframes breathe { 50% { box-shadow: 0 0 0 22px rgba(40,100,240,.03), 0 0 100px rgba(40,100,240,.45); } }
@keyframes float { 50% { transform: translateY(-7px); } }

.admin-bar .navShell { top: 50px; }
@media (max-width: 782px) { .admin-bar .navShell { top: 56px; } }