/* SICXS / Technology that connects — interactive product theatre
   All visuals are first-party CSS/SVG demonstrations; the PRAGMA example uses
   a grounded public project image. No iframes, autoplay video or tracker. */
.site.track>#technology.tech-experience-screen{
  display:flex;align-items:center;justify-content:center;
  height:100svh;height:100dvh;min-height:100svh;min-height:100dvh;
  padding:clamp(20px,3.3svh,38px) clamp(18px,3vw,42px);
  background:transparent!important;border:0!important;box-shadow:none!important;
}
#technology.tech-experience-screen:before,#technology.tech-experience-screen:after{
  display:none!important;content:none!important;
}
#technology .tech-showcase{
  width:min(1270px,100%);margin:auto;color:#edf9ff;
  --tech-cyan:#93ddee;--tech-dim:rgba(226,245,250,.57);
  font-family:inherit;
}
#technology .tech-eyebrow{font-size:10px;letter-spacing:.20em;color:rgba(162,218,235,.59);font-weight:600;text-transform:uppercase}
#technology .tech-intro{display:flex;justify-content:space-between;align-items:end;gap:25px;margin:0 0 clamp(17px,2.6svh,30px)}
#technology .tech-headline{font-size:clamp(33px,4.5vw,62px);line-height:1.025;letter-spacing:-.047em;font-weight:540;margin:10px 0 8px}
#technology .tech-lead{color:var(--tech-dim);font-size:clamp(13px,1.09vw,16px);line-height:1.46;max-width:730px;margin:0}
#technology .tech-count{white-space:nowrap;font-size:11px;letter-spacing:.15em;color:rgba(172,227,240,.52);padding-bottom:7px;font-variant-numeric:tabular-nums}
#technology .tech-layout{
  display:grid;grid-template-columns:clamp(205px,20vw,270px) minmax(0,1fr);
  gap:clamp(12px,1.4vw,22px);align-items:stretch;
}
#technology .tech-menu{display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:8px}
#technology .tech-option{
  appearance:none;display:flex;gap:12px;align-items:center;text-align:left;
  width:100%;min-width:0;margin:0;padding:10px 13px;
  border:1px solid rgba(151,216,233,.11);background:rgba(9,25,34,.42);
  border-radius:13px;cursor:pointer;color:#d7e8ef;
  font:inherit;transition:border-color .3s,background .3s,transform .3s;
}
#technology .tech-option:hover{border-color:rgba(151,216,233,.30);background:rgba(16,43,56,.65)}
#technology .tech-option.is-selected{border-color:rgba(145,221,238,.54);background:linear-gradient(105deg,rgba(27,75,92,.52),rgba(9,26,34,.56));box-shadow:inset 3px 0 0 rgba(142,224,244,.74)}
#technology .tech-option:focus-visible,#technology .tech-control:focus-visible,#technology .tech-visit:focus-visible{outline:2px solid #a9eaff;outline-offset:3px}
#technology .tech-option-num{font-size:10px;letter-spacing:.09em;color:#84b5c2;flex:0 0 20px}
#technology .tech-option-label{font-size:clamp(12px,1.04vw,15px);font-weight:520;line-height:1.22;color:#e7f8fe}
#technology .tech-option-detail{font-size:10px;color:rgba(202,235,244,.51);line-height:1.2;margin-top:3px;display:block}
#technology .tech-stage-shell{
  display:flex;flex-direction:column;min-width:0;
  height:clamp(350px,55.5svh,560px);
  border:1px solid rgba(138,217,235,.19);border-radius:21px;overflow:hidden;
  background:linear-gradient(130deg,#051520 0%,#081e2a 47%,#03101a 100%);
  box-shadow:0 22px 70px rgba(0,0,0,.20),inset 0 1px 0 rgba(200,243,252,.04);
  isolation:isolate;position:relative;
}
#technology .tech-stage-shell:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 52% 68% at 54% 48%,rgba(33,109,136,.19),transparent 77%);
}
#technology .tech-stage-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 17px;min-height:46px;border-bottom:1px solid rgba(163,220,233,.13);
  position:relative;z-index:2;background:rgba(3,12,18,.43)
}
#technology .tech-stage-meta{display:flex;gap:9px;align-items:center;min-width:0;font-size:9px;letter-spacing:.15em;color:rgba(200,237,245,.69);font-weight:620}
#technology .tech-indicator{width:6px;height:6px;background:#8bdbda;border-radius:50%;box-shadow:0 0 13px #7bd2e5;flex-shrink:0}
#technology .tech-device-choices{display:flex;gap:5px;flex-shrink:0}
#technology .tech-control{
  font:inherit;font-size:10px;line-height:1.2;padding:6px 10px;border-radius:9px;
  border:1px solid rgba(180,235,246,.16);background:transparent;color:rgba(219,245,251,.67);
  cursor:pointer;white-space:nowrap;transition:background .2s,color .2s;
}
#technology .tech-control[aria-pressed=true],#technology .tech-control:hover{
  color:#effcff;background:rgba(102,191,213,.22);border-color:rgba(137,226,244,.43)
}
#technology .tech-stage{
  flex:1;min-height:0;position:relative;overflow:hidden;
  display:grid;place-items:center;
}
#technology .tech-stage:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(45,121,145,.035),transparent 37%,rgba(2,10,18,.19));z-index:3}
#technology .tech-scene{
  position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(8px) scale(.992);
  transition:opacity .45s ease,transform .62s cubic-bezier(.18,.8,.2,1),visibility .45s;
}
#technology .tech-scene.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
#technology .tech-scene>div{max-width:100%}
#technology .tech-stage-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid rgba(163,220,233,.12);padding:10px 16px;min-height:45px;
  color:rgba(221,249,255,.66);position:relative;z-index:2;
  background:rgba(3,12,18,.39)
}
#technology .tech-stage-bottom-left{display:flex;align-items:center;min-width:0;gap:9px}
#technology .tech-stage-name{font-weight:560;color:#edfaff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#technology .tech-demo-tag{border:1px solid rgba(155,220,239,.20);padding:3px 6px;border-radius:6px;font-size:8px;text-transform:uppercase;letter-spacing:.10em;color:rgba(183,232,241,.55)}
#technology .tech-stage-bottom-right{display:flex;align-items:center;gap:8px}
#technology .tech-visit{
  display:inline-flex;align-items:center;text-decoration:none;color:#aae6f4;
  font-size:10px;font-weight:550;letter-spacing:.02em;white-space:nowrap;gap:6px;
}
#technology .tech-visit:hover{text-decoration:underline}
#technology .tech-progress-track{height:2px;background:rgba(151,211,227,.08);position:relative;z-index:4}
#technology .tech-progress-bar{height:100%;background:linear-gradient(90deg,#5b9cae,#a6effc);width:0;transition:none}
#technology .tech-disclaimer{margin:9px 2px 0;font-size:10px;color:rgba(212,239,245,.43);letter-spacing:.015em}
#technology .tech-stage .tech-screen-window{
  width:min(89%,730px);height:84%;max-height:100%;position:relative;overflow:hidden;
  border:1px solid rgba(211,237,247,.21);border-radius:13px;
  box-shadow:0 16px 48px rgba(0,0,0,.36);
  background:#071b27;display:flex;flex-direction:column;transition:width .55s,height .55s,border-radius .55s;
}
#technology .tech-window-top{
  height:26px;flex:0 0 26px;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;background:rgba(2,10,18,.88);border-bottom:1px solid rgba(211,237,247,.10)
}
#technology .tech-window-dots{display:flex;gap:4px}
#technology .tech-window-dots i{width:5px;height:5px;border-radius:50%;background:rgba(189,230,242,.30)}
#technology .tech-window-url{font-size:9px;color:rgba(197,236,247,.50);letter-spacing:.015em}
#technology .tech-window-lock{font-size:8px;color:#91cfdb}
#technology .tech-window-body{position:relative;flex:1;overflow:hidden;min-height:0}
#technology .tech-stage-shell[data-device="phone"] .tech-screen-window{
  width:clamp(150px,32%,235px);height:96%;border-radius:24px;border-width:3px;
}
#technology .tech-stage-shell[data-device="phone"] .tech-window-top{
  height:24px;flex-basis:24px;padding:0 10px}
#technology .tech-stage-shell[data-device="phone"] .tech-window-url{font-size:7px}

/* Site PRAGMA — actual public project image and typographic treatment. */
#technology .tech-pragma-body{height:100%;display:grid;grid-template-columns:1.04fr 1fr;background:#090e19}
#technology .tech-pragma-copy{padding:clamp(16px,2.5vw,38px);display:flex;flex-direction:column;justify-content:space-between;min-width:0}
#technology .tech-pragma-brand{font-size:clamp(15px,2.0vw,25px);letter-spacing:.21em;font-weight:740;color:#eff5ff}
#technology .tech-pragma-overline{font-size:9px;letter-spacing:.14em;color:#b8c3d4}
#technology .tech-pragma-title{font-size:clamp(18px,3vw,39px);letter-spacing:-.06em;line-height:1.07;font-weight:570;color:#f2f7ff}
#technology .tech-pragma-title em{font-style:normal;color:#b1c7d6}
#technology .tech-pragma-chips{display:flex;flex-wrap:wrap;gap:6px}
#technology .tech-pragma-chips span{border:1px solid rgba(184,207,231,.27);font-size:9px;padding:5px 7px;border-radius:6px;color:#c8dae7}
#technology .tech-pragma-image{position:relative;overflow:hidden;background:#1b2e3a}
#technology .tech-pragma-image img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:saturate(.83) brightness(.77);animation:tech-photo-drift 12s ease-in-out infinite alternate}
#technology .tech-pragma-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,16,26,.15),transparent 70%)}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-body{grid-template-columns:1fr;grid-template-rows:1.2fr 1fr}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-copy{padding:13px 14px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-title{font-size:20px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-brand{font-size:13px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-chips span{font-size:7px;padding:3px 5px}

/* Incorporation platform — conceptual system showcase, not a live client data feed. */
#technology .tech-cycle-body{height:100%;padding:clamp(12px,2.2vw,27px);display:flex;flex-direction:column;gap:12px;background:radial-gradient(circle at 82% 23%,#16455a,#091723 62%)}
#technology .tech-cycle-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#d0f3f7;font-size:11px;letter-spacing:.1em}
#technology .tech-cycle-bar strong{font-size:clamp(14px,2vw,24px);letter-spacing:-.04em}
#technology .tech-cycle-bar span{font-size:9px;background:#0e4150;padding:6px 9px;border-radius:22px}
#technology .tech-cycle-main{display:grid;grid-template-columns:.85fr 1.15fr;gap:12px;flex:1;min-height:0}
#technology .tech-cycle-copy{display:flex;flex-direction:column;justify-content:center;gap:12px}
#technology .tech-cycle-copy h3{margin:0;font-size:clamp(17px,2.6vw,33px);line-height:1.06;letter-spacing:-.05em}
#technology .tech-cycle-copy small{color:#9fbece;line-height:1.3}
#technology .tech-cycle-flow{display:flex;gap:5px;flex-wrap:wrap}
#technology .tech-cycle-flow i{font-style:normal;font-size:9px;color:#bce5ed;border:1px solid rgba(168,230,241,.22);border-radius:6px;padding:5px 7px}
#technology .tech-cycle-building{position:relative;overflow:hidden;border-radius:9px;border:1px solid rgba(153,218,235,.16);background:linear-gradient(155deg,#183c4b,#0a1d29);display:grid;place-items:center}
#technology .tech-cycle-building svg{width:77%;height:95%;opacity:.86;filter:drop-shadow(0 8px 11px rgba(0,0,0,.2));transform:rotate(-3deg);animation:tech-building-breathe 8s ease-in-out infinite alternate}
#technology .tech-cycle-building .tech-hotspot{position:absolute;right:12%;top:25%;border-radius:100%;width:12px;height:12px;border:2px solid #a8edfa;background:#0c5068;box-shadow:0 0 0 7px rgba(117,224,245,.11);animation:tech-dot 3s ease-out infinite}
#technology .tech-stage-shell[data-device="phone"] .tech-cycle-body{padding:13px;gap:9px}
#technology .tech-stage-shell[data-device="phone"] .tech-cycle-main{grid-template-columns:1fr;grid-template-rows:.6fr 1fr;gap:8px}
#technology .tech-stage-shell[data-device="phone"] .tech-cycle-copy{gap:4px}
#technology .tech-stage-shell[data-device="phone"] .tech-cycle-copy h3{font-size:18px}
#technology .tech-stage-shell[data-device="phone"] .tech-cycle-copy small{display:none}
#technology .tech-stage-shell[data-device="phone"] .tech-cycle-flow i{font-size:7px;padding:3px 4px}

/* APIs — animated event endpoints and typed response. */
#technology .tech-api-body{height:100%;padding:clamp(14px,2.5vw,31px);display:flex;flex-direction:column;gap:15px;background:radial-gradient(circle at 73% 50%,#123348,#081b29 65%)}
#technology .tech-api-title{display:flex;align-items:center;gap:7px;font-size:11px;color:#a5dbec;letter-spacing:.09em}
#technology .tech-api-status{margin-left:auto;background:rgba(72,204,162,.13);color:#85ecc4;border-radius:8px;padding:5px 8px;font-size:9px}
#technology .tech-api-network{flex:1;display:flex;justify-content:space-evenly;align-items:center;gap:13px;min-height:0}
#technology .tech-api-node{padding:17px 12px;border:1px solid rgba(153,224,239,.29);border-radius:11px;background:#0a2736;text-align:center;color:#cfeff4;font-size:11px;white-space:nowrap;box-shadow:0 0 19px rgba(73,183,204,.06);animation:tech-node-pop 4s ease-in-out infinite}
#technology .tech-api-node:nth-child(3){animation-delay:.5s}
#technology .tech-api-node:nth-child(5){animation-delay:1s}
#technology .tech-api-node b{display:block;font-size:18px;margin-bottom:6px}
#technology .tech-api-wire{height:1px;max-width:80px;flex:1;position:relative;background:linear-gradient(90deg,transparent,#477e92,transparent)}
#technology .tech-api-wire:after{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:100%;background:#9debf7;box-shadow:0 0 9px #6accdc;animation:tech-wire-travel 2.6s ease-in-out infinite}
#technology .tech-api-wire:nth-child(4):after{animation-delay:1.3s}
#technology .tech-code{margin:0;border:1px solid rgba(135,206,229,.18);border-radius:9px;background:#04101a;padding:11px 13px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#b2e2f0;display:flex;justify-content:space-between;gap:9px;font-size:11px}
#technology .tech-code b{color:#94e6be}
#technology .tech-stage-shell[data-device="phone"] .tech-api-body{padding:11px;gap:8px}
#technology .tech-stage-shell[data-device="phone"] .tech-api-network{gap:3px;flex-direction:column}
#technology .tech-stage-shell[data-device="phone"] .tech-api-node{font-size:9px;padding:6px 13px;width:90%}
#technology .tech-stage-shell[data-device="phone"] .tech-api-node b{display:inline;font-size:10px;margin:0 6px 0 0}
#technology .tech-stage-shell[data-device="phone"] .tech-api-wire{height:17px;max-width:1px;background:#487c91;min-height:11px}
#technology .tech-stage-shell[data-device="phone"] .tech-api-wire:after{top:0;left:-3px;animation:tech-wire-down 2.6s ease-in-out infinite}
#technology .tech-stage-shell[data-device="phone"] .tech-code{font-size:8px;display:block;line-height:1.4;padding:7px}

/* Integration showcase — familiar phone conversation with synthetic data. */
#technology .tech-integration{height:95%;width:95%;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.5vw,34px)}
#technology .tech-chat-phone{height:100%;max-height:335px;aspect-ratio: .55;border:4px solid rgba(169,214,228,.36);border-radius:27px;background:#061c21;box-shadow:0 20px 45px rgba(0,0,0,.44);overflow:hidden;display:flex;flex-direction:column;flex:0 0 auto}
#technology .tech-chat-header{height:34px;flex:0 0 34px;background:#123c38;border-bottom:1px solid rgba(168,218,206,.15);display:flex;align-items:center;gap:7px;padding:0 9px}
#technology .tech-chat-avatar{width:20px;height:20px;border-radius:50%;background:#1c5d54;display:grid;place-items:center;font-size:10px;color:#d7ffe9}
#technology .tech-chat-header b{font-size:10px;line-height:1.1}
#technology .tech-chat-header small{font-size:7px;color:#84bfae}
#technology .tech-chat-body{background:repeating-linear-gradient(45deg,rgba(153,191,183,.022) 0 1px,transparent 1px 19px),#081d20;flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:10px 7px;overflow:hidden}
#technology .tech-bubble{padding:7px 8px;border-radius:10px;max-width:94%;line-height:1.35;font-size:10px;color:#e6f8f5;opacity:0;transform:translateY(13px) scale(.96)}
#technology .tech-bubble.client{background:#1b3031;align-self:flex-start;border-bottom-left-radius:2px}
#technology .tech-bubble.bot{background:#205346;align-self:flex-end;border-bottom-right-radius:2px}
#technology .tech-bubble.doc{background:#205346;border:1px solid rgba(141,235,202,.20)}
#technology .tech-bubble strong{font-size:9px;display:block;margin-bottom:3px;color:#b5f9d9}
#technology .tech-bubble small{font-size:8px;color:rgba(226,253,248,.65)}
#technology .tech-scene.is-active .tech-bubble:nth-child(1){animation:tech-bubble-enter .5s .25s ease forwards}
#technology .tech-scene.is-active .tech-bubble:nth-child(2){animation:tech-bubble-enter .5s 1.35s ease forwards}
#technology .tech-scene.is-active .tech-bubble:nth-child(3){animation:tech-bubble-enter .5s 2.55s ease forwards}
#technology .tech-scene.is-active .tech-bubble:nth-child(4){animation:tech-bubble-enter .5s 3.85s ease forwards}
#technology .tech-chat-bottom{height:21px;background:#12312f;flex:0 0 21px;display:grid;place-items:center;font-size:8px;color:#b5ddcf}
#technology .tech-integration-pipeline{display:flex;flex-direction:column;align-items:flex-start;gap:15px;max-width:215px}
#technology .tech-integration-pipeline strong{font-size:clamp(13px,1.8vw,22px);line-height:1.1;letter-spacing:-.035em;font-weight:530}
#technology .tech-integration-pipeline>span{font-size:10px;color:#aed8df}
#technology .tech-integration-pipeline .tech-pipe-step{display:flex;align-items:center;gap:8px;font-size:11px;color:#c4ebef}
#technology .tech-pipe-led{width:8px;height:8px;border-radius:50%;background:#69d1bd;box-shadow:0 0 9px #6acabd;animation:tech-node-pop 2s ease-in-out infinite}
#technology .tech-integration-pipeline .tech-pipe-step:nth-child(4) .tech-pipe-led{animation-delay:.35s}
#technology .tech-integration-pipeline .tech-pipe-step:nth-child(5) .tech-pipe-led{animation-delay:.7s}
#technology .tech-stage-shell[data-device="phone"] .tech-integration-pipeline{display:none}
#technology .tech-stage-shell[data-device="phone"] .tech-chat-phone{max-height:100%;height:94%;border-width:3px}

/* Real-estate experiences */
#technology .tech-realty{width:min(90%,690px);height:86%;display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:stretch}
#technology .tech-realty-display{position:relative;overflow:hidden;border-radius:13px;background:radial-gradient(circle at 49% 19%,#25576c,#0d2738 58%,#092030 100%);border:1px solid rgba(174,235,246,.15)}
#technology .tech-realty-building{position:absolute;left:18%;bottom:15%;width:63%;height:68%;transform:skewY(-5deg);display:flex;align-items:stretch;justify-content:space-evenly;padding:5%;background:linear-gradient(100deg,rgba(188,222,234,.67),rgba(76,145,171,.45));box-shadow:18px 13px 0 rgba(14,52,68,.95),0 0 36px rgba(85,189,212,.1);animation:tech-building-breathe 6s ease-in-out infinite alternate}
#technology .tech-realty-building span{background:repeating-linear-gradient(180deg,rgba(20,49,64,.9) 0 10%,rgba(137,194,214,.57) 11% 14%,rgba(16,56,71,.9) 15% 24%);flex:1;margin:0 3px}
#technology .tech-realty-marker{position:absolute;top:27%;right:10%;background:rgba(3,24,37,.77);border:1px solid rgba(136,227,245,.57);padding:7px 9px;border-radius:9px;font-size:9px;box-shadow:0 0 20px rgba(90,202,224,.1);animation:tech-marker-float 3s ease-in-out infinite alternate}
#technology .tech-realty-side{display:flex;flex-direction:column;justify-content:center;gap:15px}
#technology .tech-realty-side>span{font-size:10px;color:#86cae0;letter-spacing:.13em}
#technology .tech-realty-side h3{font-size:clamp(20px,2.8vw,35px);margin:0;letter-spacing:-.05em;line-height:1.08}
#technology .tech-realty-cards{display:flex;flex-wrap:wrap;gap:6px}
#technology .tech-realty-cards i{font-style:normal;border:1px solid rgba(138,211,231,.25);border-radius:8px;padding:8px 9px;font-size:10px;color:#d6f1f8}
#technology .tech-stage-shell[data-device="phone"] .tech-realty{width:94%;height:92%;grid-template-columns:1fr;grid-template-rows:1.25fr .7fr;gap:7px}
#technology .tech-stage-shell[data-device="phone"] .tech-realty-side{gap:4px}
#technology .tech-stage-shell[data-device="phone"] .tech-realty-side h3{font-size:18px}
#technology .tech-stage-shell[data-device="phone"] .tech-realty-cards i{font-size:7px;padding:4px}
#technology .tech-stage-shell[data-device="phone"] .tech-realty-marker{font-size:7px;top:14%}

/* AI operations control room */
#technology .tech-agent{width:min(90%,680px);height:83%;display:grid;grid-template-columns:1fr .85fr;gap:12px}
#technology .tech-agent-panel{display:flex;flex-direction:column;border:1px solid rgba(165,235,246,.21);border-radius:12px;background:rgba(4,22,30,.88);padding:18px;gap:15px;overflow:hidden}
#technology .tech-agent-panel h3{font-size:clamp(18px,2vw,26px);letter-spacing:-.04em;margin:0}
#technology .tech-agent-panel>small{font-size:10px;color:#95c4d2}
#technology .tech-agent-tasks{display:flex;flex-direction:column;gap:11px;flex:1;justify-content:center}
#technology .tech-agent-task{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(144,203,220,.13);padding-bottom:9px;font-size:11px;color:#d8f7fa;opacity:.35;animation:tech-agent-process 6s ease-in-out infinite}
#technology .tech-agent-task:nth-child(2){animation-delay:1.1s}
#technology .tech-agent-task:nth-child(3){animation-delay:2.2s}
#technology .tech-agent-task:nth-child(4){animation-delay:3.3s}
#technology .tech-agent-task b{font-size:9px;color:#91e9c0}
#technology .tech-agent-chart{display:flex;align-items:end;gap:8px;justify-content:center;min-height:80px;flex:1}
#technology .tech-agent-chart i{width:18px;height:var(--bar);border-radius:5px 5px 0 0;background:linear-gradient(0deg,#307e97,#a3e9f4);animation:tech-bars 5s ease-in-out infinite alternate;animation-delay:var(--delay)}
#technology .tech-agent-foot{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#a9e4ec}
#technology .tech-stage-shell[data-device="phone"] .tech-agent{width:96%;height:92%;grid-template-columns:1fr;grid-template-rows:1.3fr .65fr;gap:6px}
#technology .tech-stage-shell[data-device="phone"] .tech-agent-panel{padding:10px;gap:6px}
#technology .tech-stage-shell[data-device="phone"] .tech-agent-panel h3{font-size:15px}
#technology .tech-stage-shell[data-device="phone"] .tech-agent-panel>small{font-size:8px}
#technology .tech-stage-shell[data-device="phone"] .tech-agent-task{font-size:9px;padding-bottom:3px}
#technology .tech-stage-shell[data-device="phone"] .tech-agent-tasks{gap:3px}
#technology .tech-stage-shell[data-device="phone"] .tech-agent-chart{min-height:40px}
#technology .tech-stage-shell[data-device="phone"] .tech-agent-chart i{width:12px}

@keyframes tech-bubble-enter{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}
@keyframes tech-photo-drift{from{transform:scale(1);object-position:50% 55%}to{transform:scale(1.07);object-position:56% 50%}}
@keyframes tech-building-breathe{from{transform:translateY(6px) rotate(-3deg)}to{transform:translateY(-6px) rotate(0)}}
@keyframes tech-node-pop{0%,100%{opacity:.59;box-shadow:0 0 0 rgba(117,224,245,0)}50%{opacity:1;box-shadow:0 0 21px rgba(117,224,245,.25)}}
@keyframes tech-dot{0%{box-shadow:0 0 0 0 rgba(117,224,245,.24)}100%{box-shadow:0 0 0 14px rgba(117,224,245,0)}}
@keyframes tech-wire-travel{from{left:0}to{left:100%}}
@keyframes tech-wire-down{from{top:0}to{top:100%}}
@keyframes tech-marker-float{from{transform:translateY(0)}to{transform:translateY(-8px)}}
@keyframes tech-agent-process{0%,17%{opacity:.33}22%,70%{opacity:1}85%,100%{opacity:.38}}
@keyframes tech-bars{0%{transform:scaleY(.80);filter:brightness(.9)}100%{transform:scaleY(1.1);filter:brightness(1.2)}}
#technology .tech-showcase.is-paused .tech-scene *{animation-play-state:paused!important}
#technology .tech-showcase:not(.is-inview) .tech-scene *{animation-play-state:paused!important}
@media(max-width:900px){
  #technology .tech-layout{grid-template-columns:190px minmax(0,1fr);gap:10px}
  #technology .tech-option{padding:9px 10px;gap:7px}
}
@media(max-width:720px){
  .site.track>#technology.tech-experience-screen{padding:clamp(15px,3svh,31px) 15px}
  #technology .tech-intro{margin-bottom:clamp(10px,2svh,19px);gap:8px}
  #technology .tech-headline{font-size:clamp(29px,7.8vw,40px);margin:6px 0 6px}
  #technology .tech-lead{font-size:clamp(11.5px,2.85vw,13px);line-height:1.36}
  #technology .tech-count{font-size:9px;letter-spacing:.03em;padding-bottom:2px}
  #technology .tech-layout{display:flex;flex-direction:column;gap:clamp(9px,1.5svh,14px)}
  #technology .tech-stage-shell{order:0;height:clamp(280px,48svh,410px);border-radius:17px}
  #technology .tech-menu{order:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}
  #technology .tech-option{padding:7px 8px;gap:5px;border-radius:9px;min-height:42px}
  #technology .tech-option-num{font-size:9px;flex:0 0 15px}
  #technology .tech-option-label{font-size:clamp(10px,2.7vw,12px);line-height:1.07}
  #technology .tech-option-detail{font-size:8px;margin-top:3px}
  #technology .tech-stage-top{min-height:39px;padding:7px 11px}
  #technology .tech-stage-bottom{min-height:39px;padding:7px 11px}
  #technology .tech-control{padding:5px 8px;font-size:9px}
  #technology .tech-stage-meta{font-size:8px;letter-spacing:.09em}
  #technology .tech-disclaimer{font-size:9px;margin-top:8px}
  #technology .tech-visit{font-size:9px}
  #technology .tech-chat-phone{max-height:295px}
  #technology .tech-integration-pipeline{gap:8px}
}
@media(max-width:400px){
  #technology .tech-headline{font-size:29px}
  #technology .tech-stage-shell{height:clamp(255px,47svh,360px)}
  #technology .tech-demo-tag{display:none}
  #technology .tech-option{padding:7px 6px}
  #technology .tech-option-label{font-size:10px}
  #technology .tech-option-detail{display:none}
  #technology .tech-count{display:none}
}
@media(max-height:700px){
  .site.track>#technology.tech-experience-screen{padding-top:12px;padding-bottom:12px}
  #technology .tech-intro{margin-bottom:9px}
  #technology .tech-headline{font-size:clamp(25px,4vw,42px)}
  #technology .tech-lead{font-size:12px}
  #technology .tech-stage-shell{height:clamp(240px,49svh,380px)}
  #technology .tech-disclaimer{margin-top:5px;font-size:9px}
  #technology .tech-option{min-height:37px}
  #technology .tech-menu{gap:5px}
  #technology .tech-stage-top,#technology .tech-stage-bottom{min-height:35px}
}
@media(prefers-reduced-motion:reduce){
  #technology *,#technology *:before,#technology *:after{
    animation:none!important;transition:none!important
  }
  #technology .tech-scene.is-active .tech-bubble{opacity:1;transform:none}
  #technology .tech-scene:not(.is-active){opacity:0;visibility:hidden}
}


/* ===============================================================
   V2 / CINEMATIC FULL-VIEW PRODUCT THEATRE
   The menu moves BELOW the demonstration so the stage has the
   entire content width. The browser fills the available height;
   the phone retains physical portrait proportions, aligned right.
   =============================================================== */
.site.track>#technology.tech-experience-screen{
  padding:clamp(10px,1.5svh,22px) clamp(12px,2.1vw,34px);
  align-items:stretch;
}
#technology .tech-showcase{
  width:min(1800px,100%);
  height:100%;
  min-height:0;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:clamp(7px,1.2svh,13px);
}
#technology .tech-intro{
  flex:0 0 auto;
  min-height:0;
  margin:0;
  align-items:center;
  gap:18px;
}
#technology .tech-headline{
  font-size:clamp(31px,3.65vw,56px);
  letter-spacing:-.048em;
  line-height:1;
  margin:6px 0 7px;
}
#technology .tech-lead{
  max-width:980px;
  line-height:1.36;
  font-size:clamp(12px,.97vw,15px);
}
#technology .tech-layout{
  flex:1 1 auto;
  height:auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:clamp(8px,1.3svh,13px);
}
#technology .tech-stage-shell{
  order:0;
  flex:1 1 auto;
  width:100%;
  min-height:0;
  height:auto;
  max-height:none;
  border-radius:clamp(14px,1.45vw,23px);
  border-color:rgba(148,220,239,.22);
  box-shadow:0 23px 62px rgba(0,0,0,.26),inset 0 0 0 1px rgba(234,250,255,.035);
}
#technology .tech-stage-top{
  flex:0 0 auto;
  min-height:clamp(37px,4.6svh,49px);
  padding:8px clamp(12px,1.3vw,22px);
}
#technology .tech-stage-bottom{
  flex:0 0 auto;
  min-height:clamp(39px,4.4svh,47px);
  padding:7px clamp(11px,1.3vw,20px);
}
#technology .tech-stage{flex:1 1 auto;min-height:0}
#technology .tech-menu{
  order:1;
  flex:0 0 auto;
  min-height:clamp(53px,6.7svh,72px);
  height:auto;
  max-height:none;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);
  gap:clamp(5px,.7vw,10px);
}
#technology .tech-option{
  min-width:0;
  align-self:stretch;
  padding:clamp(8px,1svh,12px) clamp(8px,.85vw,14px);
  gap:clamp(5px,.7vw,12px);
  border-radius:11px;
  background:rgba(5,22,32,.56);
  transition:border-color .26s,background .26s;
}
#technology .tech-option-num{flex:0 0 17px;font-size:9px}
#technology .tech-option-label{font-size:clamp(10px,.89vw,14px)}
#technology .tech-option-detail{font-size:clamp(8px,.67vw,10px);line-height:1.15;margin-top:3px}
#technology .tech-disclaimer{
  flex:0 0 auto;
  margin:0 2px;
  font-size:clamp(9px,.74vw,10.5px);
  line-height:1.3;
}
#technology .tech-scene{inset:0}
#technology .tech-stage .tech-screen-window{
  width:calc(100% - clamp(18px,3vw,50px));
  height:calc(100% - clamp(16px,2.4svh,32px));
  max-height:none;
  border-radius:clamp(11px,1vw,18px);
  border-color:rgba(211,237,247,.32);
  background:#071a24;
  box-shadow:0 17px 60px rgba(0,0,0,.38);
}
#technology .tech-window-top{min-height:27px;height:27px;flex-basis:27px}
#technology .tech-pragma-body{display:block;position:relative;overflow:hidden;height:100%;background:#0a1523}
#technology .tech-pragma-scrollpage{
  display:flex;
  flex-direction:column;
  min-height:100%;
  height:166%;
  transform:translate3d(0,0,0);
  will-change:transform;
}
#technology .tech-scene.is-active .tech-pragma-scrollpage{
  animation:tech-real-site-pass 12.7s ease-in-out infinite;
}
#technology .tech-pragma-navbar{
  flex:0 0 43px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(8,15,24,.96);border-bottom:1px solid rgba(210,239,251,.14);
  padding:0 clamp(12px,2vw,26px);gap:14px;
}
#technology .tech-pragma-navbar .tech-pragma-brand{font-size:clamp(13px,1.35vw,21px);letter-spacing:.19em}
#technology .tech-pragma-navlinks{display:flex;gap:clamp(10px,1.8vw,27px);color:#d8e8f0;font-size:clamp(8px,.76vw,12px);white-space:nowrap}
#technology .tech-pragma-hero{
  flex:0 0 51%;
  position:relative;
  display:grid;grid-template-columns:43% 57%;
  overflow:hidden;background:#0e1927;
}
#technology .tech-pragma-hero-copy{
  position:relative;z-index:1;padding:clamp(16px,3vw,57px) clamp(14px,3vw,50px);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:clamp(10px,1.3svh,21px);
}
#technology .tech-pragma-hero-copy small{
  font-size:clamp(8px,.75vw,11px);letter-spacing:.19em;color:#aacbdd
}
#technology .tech-pragma-hero-copy h3{
  color:#ecf6ff;margin:0;max-width:500px;
  font-size:clamp(24px,3.15vw,55px);line-height:1.035;letter-spacing:-.055em;
}
#technology .tech-pragma-hero-copy p{color:#a8c6d7;margin:0;font-size:clamp(10px,1vw,15px);line-height:1.43;max-width:380px}
#technology .tech-pragma-hero-art{position:relative;overflow:hidden;background:linear-gradient(137deg,#163548,#0b1d29)}
#technology .tech-pragma-hero-art img{
  display:block;width:100%;height:100%;object-fit:cover;
  object-position:center;filter:saturate(.79) contrast(1.05) brightness(.89);
  animation:tech-real-camera 10s ease-in-out infinite alternate;
}
#technology .tech-pragma-hero-art:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,25,39,.24),transparent 48%);
}
#technology .tech-pragma-services{
  flex:0 0 28%;
  padding:clamp(13px,2vw,27px);
  display:flex;flex-direction:column;gap:clamp(8px,1.5svh,16px);
  background:#eef4f7;color:#132c3b;
}
#technology .tech-pragma-services>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}
#technology .tech-pragma-services h3{margin:0;font-size:clamp(15px,2vw,29px);line-height:1.1;letter-spacing:-.04em}
#technology .tech-pragma-services small{font-size:clamp(7px,.8vw,12px);text-transform:uppercase;letter-spacing:.12em;color:#537387}
#technology .tech-pragma-service-row{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1vw,15px)}
#technology .tech-pragma-service{
  background:#e1ebf0;padding:clamp(9px,1.2vw,19px);
  border-radius:8px;display:flex;flex-direction:column;gap:9px;
  justify-content:space-between;
}
#technology .tech-pragma-service b{font-size:clamp(11px,1vw,16px);font-weight:650}
#technology .tech-pragma-service span{font-size:clamp(9px,.8vw,13px);color:#587788}
#technology .tech-pragma-portfolio{
  flex:1;min-height:0;
  padding:clamp(14px,2.3vw,32px);background:#0c1c29;
  display:grid;grid-template-columns:1.25fr .75fr;gap:18px;
}
#technology .tech-pragma-portfolio h3{
  color:#edfaff;font-size:clamp(19px,2.4vw,36px);
  margin:9px 0;line-height:1.08;letter-spacing:-.04em;
}
#technology .tech-pragma-portfolio p{font-size:clamp(9px,.83vw,13px);color:#afcdd8;line-height:1.4;max-width:380px}
#technology .tech-pragma-portfolio figure{
  margin:0;min-width:0;border-radius:9px;overflow:hidden;position:relative;
}
#technology .tech-pragma-portfolio figure img{width:100%;height:100%;object-fit:cover;filter:contrast(1.06) saturate(.83)}
#technology .tech-pragma-portfolio strong{color:#9cdae9;font-size:clamp(9px,1vw,14px);letter-spacing:.16em}
@keyframes tech-real-site-pass{
  0%,23%{transform:translateY(0)}
  43%,57%{transform:translateY(-18%)}
  76%,89%{transform:translateY(-39.7%)}
  100%{transform:translateY(0)}
}
@keyframes tech-real-camera{
  0%{transform:scale(1);object-position:48% 50%}
  100%{transform:scale(1.11);object-position:54% 48%}
}

/* Product platform is not a miniature; fill screen like an actual dashboard. */
#technology .tech-cycle-body{padding:clamp(18px,2.7vw,38px)}
#technology .tech-cycle-main{gap:clamp(16px,2vw,34px)}
#technology .tech-cycle-bar strong{font-size:clamp(19px,2.2vw,31px)}
#technology .tech-cycle-copy h3{font-size:clamp(23px,3vw,42px)}
#technology .tech-cycle-flow i{font-size:clamp(10px,.85vw,13px);padding:7px 10px}
#technology .tech-api-body{padding:clamp(18px,3vw,42px)}
#technology .tech-api-node{padding:clamp(20px,3vw,44px) clamp(18px,2.2vw,36px);font-size:clamp(12px,1.14vw,18px)}
#technology .tech-api-node b{font-size:clamp(22px,2.3vw,35px)}
#technology .tech-code{padding:clamp(14px,1.5vw,24px);font-size:clamp(10px,1.05vw,16px)}
#technology .tech-realty{width:min(95%,1080px);height:92%}
#technology .tech-agent{width:min(94%,1140px);height:92%}
#technology .tech-agent-panel{padding:clamp(16px,2.2vw,34px)}
#technology .tech-agent-panel h3{font-size:clamp(22px,2.5vw,37px)}
#technology .tech-agent-task{font-size:clamp(11px,1vw,16px)}

/* Phone mode: REAL proportional handset sits on the RIGHT of the stage.
   The left column is editorial description, not an additional mini-device. */
#technology .tech-stage-shell[data-device="phone"] .tech-scene:not([data-tech-scene="3"]) .tech-screen-window{
  justify-self:end;
  margin:0 clamp(18px,5.5%,90px) 0 auto;
  width:auto;
  height:min(95%,860px);
  max-width:min(46%,380px);
  aspect-ratio: .471;
  border:4px solid rgba(188,227,241,.49);
  border-radius:clamp(26px,2.7vw,42px);
  box-shadow:0 24px 60px rgba(0,0,0,.46);
}
#technology .tech-stage-shell[data-device="phone"] .tech-window-top{
  height:26px;flex-basis:26px;padding:0 13px
}
#technology .tech-spotlight{
  position:absolute;
  left:clamp(25px,5%,100px);
  width:clamp(160px,42%,530px);
  top:50%;transform:translateY(-50%);z-index:4;
  display:none;pointer-events:none;
}
#technology .tech-spotlight .tech-spotlight-kicker{
  color:#7ecde4;font-size:clamp(9px,.85vw,12px);
  font-weight:650;letter-spacing:.21em;
}
#technology .tech-spotlight h3{
  font-size:clamp(23px,3.3vw,54px);
  letter-spacing:-.06em;line-height:1.03;
  margin:clamp(11px,1.8svh,23px) 0 12px;font-weight:550
}
#technology .tech-spotlight p{
  font-size:clamp(12px,1.18vw,17px);
  line-height:1.53;color:rgba(224,245,250,.70);
  max-width:425px;margin:0
}
#technology .tech-spotlight .tech-spotlight-line{
  display:block;height:1px;width:clamp(46px,7vw,98px);
  margin-top:clamp(19px,3svh,34px);
  background:#8addec;box-shadow:0 0 10px rgba(142,224,244,.33);
}
#technology .tech-stage-shell[data-device="phone"]:not([data-active-slide="3"]) .tech-spotlight{display:block}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-navbar{flex-basis:24px;padding:0 9px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-navbar .tech-pragma-brand{font-size:11px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-navlinks{font-size:6px;gap:4px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-hero{grid-template-columns:1fr;grid-template-rows:.7fr 1fr}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-hero-copy{padding:10px 12px;gap:4px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-hero-copy h3{font-size:clamp(14px,1.4vw,23px)}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-hero-copy small{font-size:7px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-hero-copy p{display:none}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-services{padding:10px;gap:8px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-services h3{font-size:14px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-services small{font-size:7px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-service-row{grid-template-columns:1fr;gap:4px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-service{padding:5px;gap:3px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-service b{font-size:9px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-service span{display:none}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-portfolio{grid-template-columns:1fr;gap:5px;padding:10px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-portfolio h3{font-size:17px}
#technology .tech-stage-shell[data-device="phone"] .tech-pragma-portfolio figure{display:none}
#technology .tech-stage-shell[data-device="phone"] .tech-cycle-body{padding:11px}
#technology .tech-stage-shell[data-device="phone"] .tech-cycle-main{gap:7px}
#technology .tech-stage-shell[data-device="phone"] .tech-api-node{padding:7px}
#technology .tech-stage-shell[data-device="phone"] .tech-agent-panel{padding:10px}

/* Arquiteto.me / VIRGÍNIA — full-size orange smartphone on the RIGHT.
   A representational sequence with explicit approval gates. No real sends. */
#technology .tech-integration{
  width:min(96%,1100px);height:96%;
  display:flex;flex-direction:row-reverse;align-items:center;
  justify-content:space-evenly;
  gap:clamp(18px,3vw,62px);
}
#technology .tech-chat-phone{
  height:100%;max-height:none;
  width:auto;max-width:45%;
  aspect-ratio:.475;
  flex:0 0 auto;
  position:relative;
  border:clamp(5px,.7vw,9px) solid #f0783b;
  border-radius:clamp(27px,3vw,52px);
  background:#050e14;
  box-shadow:inset 0 0 0 2px rgba(255,219,168,.35),
             0 22px 60px rgba(0,0,0,.48),
             0 0 28px rgba(208,96,35,.12);
  overflow:hidden;
}
#technology .tech-chat-phone:before{
  content:"";position:absolute;z-index:10;pointer-events:none;
  width:32%;height:clamp(12px,2.5svh,23px);
  top:2px;left:34%;border-radius:0 0 14px 14px;
  background:#04070a;
}
#technology .tech-chat-header{
  flex:0 0 clamp(40px,5svh,57px);
  height:clamp(40px,5svh,57px);
  padding:clamp(8px,1.1vw,14px);
  gap:clamp(7px,1vw,13px);
  padding-top:clamp(13px,2svh,20px);
  background:linear-gradient(95deg,#124b44,#083b36);
}
#technology .tech-chat-avatar{
  width:clamp(24px,2.5vw,35px);height:clamp(24px,2.5vw,35px);
  font-size:clamp(11px,1.25vw,17px);
  font-weight:650;
}
#technology .tech-chat-header b{
  font-size:clamp(10px,1.04vw,14px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
#technology .tech-chat-header small{font-size:clamp(7px,.65vw,10px)}
#technology .tech-chat-body{
  justify-content:flex-start;
  gap:clamp(7px,1svh,12px);
  padding:clamp(12px,1.5vw,19px) clamp(8px,.95vw,14px);
  overflow-y:auto;scrollbar-width:none;
  overscroll-behavior:contain;
}
#technology .tech-chat-body::-webkit-scrollbar{display:none}
#technology .tech-bubble{
  flex-shrink:0;
  max-width:95%;
  padding:clamp(7px,.78vw,11px) clamp(8px,.9vw,13px);
  font-size:clamp(10px,.85vw,13px);
  line-height:1.38;
  overflow-wrap:break-word;hyphens:none;
}
#technology .tech-bubble small{font-size:clamp(8px,.7vw,10px)}
#technology .tech-bubble strong{font-size:clamp(9px,.78vw,12px)}
#technology .tech-bubble[data-msg-index]{opacity:0;transform:translateY(12px)}
#technology .tech-bubble[data-msg-index].is-shown{
  opacity:1;transform:none;transition:opacity .48s ease,transform .5s ease;
}
#technology .tech-chat-bottom{
  flex:0 0 clamp(26px,3svh,37px);
  height:clamp(26px,3svh,37px);
  padding:0 8px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:clamp(7px,.64vw,10px);
}
#technology .tech-phone-input{
  height:18px;flex:1;display:flex;align-items:center;
  border:1px solid rgba(175,239,219,.15);
  background:rgba(255,255,255,.06);border-radius:16px;
  padding:0 9px;margin-right:6px;text-align:left;
  color:#b4d7c9;
}
#technology .tech-send-icon{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#438e76;color:#e5fff1}
#technology .tech-integration-pipeline{
  flex:1;max-width:min(49%,540px);gap:clamp(9px,2svh,24px);
}
#technology .tech-integration-pipeline strong{
  font-size:clamp(26px,3.3vw,55px);
  line-height:1.02;letter-spacing:-.065em;
}
#technology .tech-integration-pipeline>span{
  font-size:clamp(11px,1vw,15px);
  line-height:1.44;max-width:380px;color:#aeced7;
}
#technology .tech-integration-pipeline .tech-pipe-step{
  gap:12px;font-size:clamp(11px,1.1vw,16px);line-height:1.23;
  padding:clamp(8px,1.1svh,15px) 0;
  border-bottom:1px solid rgba(169,225,239,.13);
}
#technology .tech-pipe-step[data-active="true"]{color:#e8fdff;font-weight:650}
#technology .tech-pipe-led{flex:0 0 8px}
#technology .tech-pipe-step[data-active="true"] .tech-pipe-led{background:#b7f6ec;box-shadow:0 0 16px #72d8d6}
#technology .tech-virginia-note{
  color:rgba(174,223,238,.48);font-size:clamp(9px,.8vw,12px);
  line-height:1.4;
}
#technology .tech-stage-shell[data-device="phone"] .tech-integration-pipeline{display:flex}
#technology .tech-stage-shell[data-device="phone"] .tech-chat-phone{
  height:98%;max-height:100%;
  width:auto;max-width:50%;
  aspect-ratio:.475;border-width:5px;
}
#technology .tech-stage-shell[data-device="phone"] .tech-integration{
  width:min(97%,1000px);height:97%;
  flex-direction:row-reverse;gap:clamp(9px,1.4vw,25px)
}
#technology .tech-stage-shell[data-device="phone"] .tech-integration-pipeline{
  flex:1;max-width:46%;min-width:0;gap:clamp(8px,1.3svh,17px)
}
#technology .tech-stage-shell[data-device="phone"] .tech-integration-pipeline strong{
  font-size:clamp(20px,2.8vw,42px)
}
#technology .tech-stage-shell[data-device="phone"] .tech-chat-header b{font-size:clamp(8px,1vw,12px)}
#technology .tech-stage-shell[data-device="phone"] .tech-chat-header small{font-size:7px}
#technology .tech-stage-shell[data-device="phone"] .tech-bubble{font-size:clamp(8px,.75vw,12px)}
#technology .tech-stage-shell[data-device="phone"] .tech-integration-pipeline .tech-pipe-step{font-size:clamp(9px,.9vw,12px)}

/* Tablets: avoid a permanent sidebar, give every product a full-screen. */
@media(max-width:1100px){
  #technology .tech-spotlight h3{font-size:clamp(19px,3vw,39px)}
  #technology .tech-spotlight p{font-size:clamp(11px,1.15vw,14px)}
  #technology .tech-option-detail{display:none}
  #technology .tech-option{justify-content:center;min-height:46px}
  #technology .tech-option-num{flex:0 0 auto}
  #technology .tech-option-label{font-size:clamp(10px,1.13vw,13px)}
}

/* Phones: real portrait ratio, phone to RIGHT within the available canvas.
   Navigation wraps to two rows; stage retains ALL remaining height. */
@media(max-width:720px){
  .site.track>#technology.tech-experience-screen{
    padding:clamp(9px,1.2svh,15px) clamp(9px,2.3vw,16px);
  }
  #technology .tech-showcase{
    height:100%;gap:clamp(5px,.8svh,9px);
  }
  #technology .tech-intro{margin:0;gap:8px;align-items:center}
  #technology .tech-eyebrow{font-size:8px;letter-spacing:.13em}
  #technology .tech-headline{font-size:clamp(25px,6.65vw,36px);margin:5px 0 5px}
  #technology .tech-lead{font-size:clamp(10px,2.65vw,12px);line-height:1.28;max-width:100%}
  #technology .tech-layout{gap:clamp(5px,.8svh,9px)}
  #technology .tech-menu{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    min-height:clamp(68px,9.7svh,94px);height:clamp(68px,9.7svh,94px);
    gap:5px;flex-shrink:0;
  }
  #technology .tech-option{padding:5px 6px;gap:5px;border-radius:9px;min-height:0}
  #technology .tech-option-num{font-size:8px}
  #technology .tech-option-label{font-size:clamp(9px,2.35vw,11px);line-height:1.08}
  #technology .tech-stage-shell{
    height:auto;min-height:0;max-height:none;flex:1 1 auto;order:0;border-radius:15px;
  }
  #technology .tech-stage-top{min-height:34px;padding:5px 9px}
  #technology .tech-stage-bottom{min-height:35px;padding:6px 9px}
  #technology .tech-stage-meta{font-size:7px;letter-spacing:.025em}
  #technology .tech-control{font-size:9px;padding:5px 7px;border-radius:7px}
  #technology .tech-disclaimer{margin:0;font-size:8px;line-height:1.16}
  #technology .tech-stage .tech-screen-window{
    height:calc(100% - 12px);width:calc(100% - 12px);border-radius:10px;
  }
  #technology .tech-stage-shell[data-device="phone"] .tech-scene:not([data-tech-scene="3"]) .tech-screen-window{
    height:96%;max-width:54%;margin-right:3.5%;
    border-width:3px;border-radius:23px;
  }
  #technology .tech-spotlight{left:4%;width:37%;max-width:none}
  #technology .tech-spotlight h3{font-size:clamp(17px,4vw,26px);margin:8px 0 7px}
  #technology .tech-spotlight p{font-size:clamp(9px,2.25vw,12px);line-height:1.32}
  #technology .tech-spotlight .tech-spotlight-kicker{font-size:8px}
  #technology .tech-spotlight .tech-spotlight-line{margin-top:12px}
  #technology .tech-stage-shell[data-device="phone"] .tech-pragma-hero-copy h3{font-size:14px}
  #technology .tech-stage-shell[data-device="phone"] .tech-pragma-navlinks{display:none}
  #technology .tech-integration{width:98%;height:98%;gap:8px}
  #technology .tech-chat-phone{height:98%;width:auto;max-width:54%;border-width:4px;border-radius:26px}
  #technology .tech-integration-pipeline{max-width:43%;gap:7px}
  #technology .tech-integration-pipeline strong{font-size:clamp(18px,4.7vw,28px)}
  #technology .tech-integration-pipeline>span{font-size:clamp(9px,2.25vw,12px)}
  #technology .tech-integration-pipeline .tech-pipe-step{font-size:clamp(9px,2.35vw,12px);padding:6px 0;gap:7px}
  #technology .tech-virginia-note{font-size:8px}
  #technology .tech-stage-shell[data-device="phone"] .tech-chat-phone{max-width:55%;height:98%;border-width:4px}
  #technology .tech-stage-shell[data-device="phone"] .tech-integration-pipeline{max-width:42%;gap:6px}
  #technology .tech-stage-shell[data-device="phone"] .tech-integration-pipeline strong{font-size:clamp(18px,4.3vw,27px)}
  #technology .tech-stage-shell[data-device="phone"] .tech-integration-pipeline .tech-pipe-step{font-size:clamp(9px,2vw,12px)}
  #technology .tech-chat-header{padding:12px 7px 4px;gap:6px;flex-basis:39px;height:39px}
  #technology .tech-chat-header small{display:none}
  #technology .tech-chat-avatar{height:20px;width:20px;font-size:10px}
  #technology .tech-chat-body{padding:8px 6px;gap:7px}
  #technology .tech-bubble{padding:6px 7px;font-size:clamp(8px,2vw,10px);line-height:1.32}
  #technology .tech-bubble strong{font-size:clamp(8px,1.9vw,10px)}
  #technology .tech-chat-bottom{height:26px;flex-basis:26px;font-size:7px}
  #technology .tech-phone-input{font-size:7px}
  #technology .tech-pragma-navbar{height:25px}
  #technology .tech-pragma-services h3{font-size:13px}
  #technology .tech-api-network{gap:5px}
  #technology .tech-api-node{padding:12px 8px}
}
@media(max-width:390px){
  #technology .tech-option-label{font-size:9px}
  #technology .tech-stage-shell[data-device="phone"] .tech-scene:not([data-tech-scene="3"]) .tech-screen-window{max-width:55%}
  #technology .tech-spotlight p{font-size:9px}
}
@media(max-height:680px) and (min-width:721px){
  #technology .tech-headline{font-size:clamp(28px,3.1vw,43px)}
  #technology .tech-lead{font-size:12px}
  #technology .tech-stage-top{min-height:32px}
  #technology .tech-stage-bottom{min-height:34px}
  #technology .tech-menu{min-height:48px}
  #technology .tech-option{padding:6px 8px}
}
@media(max-height:680px) and (max-width:720px){
  #technology .tech-headline{font-size:clamp(23px,6.1vw,29px)}
  #technology .tech-lead{font-size:10px;line-height:1.22}
  #technology .tech-menu{min-height:63px;height:63px}
  #technology .tech-option{padding:3px 6px}
  #technology .tech-stage-top{min-height:31px}
  #technology .tech-stage-bottom{min-height:32px}
}
@media(prefers-reduced-motion:reduce){
  #technology .tech-scene.is-active .tech-pragma-scrollpage{animation:none!important;transform:none}
  #technology .tech-pragma-hero-art img{animation:none!important}
  #technology .tech-bubble[data-msg-index]{opacity:1!important;transform:none!important}
}

/* Controlled Virgínia conversation timeline overrides old demo keyframes. */
#technology .tech-scene .tech-bubble[data-msg-index]{
  animation:none!important;
}
#technology .tech-bubble[data-msg-index]:not(.is-shown){
  opacity:0!important;
  transform:translateY(12px) scale(.985)!important;
}
#technology .tech-bubble[data-msg-index].is-shown{
  opacity:1!important;
  transform:none!important;
}
#technology .tech-chat-body{
  touch-action:pan-y;
  scrollbar-width:none;
}


/* Compact phone widths: derive the device WIDTH from its chosen HEIGHT.
   Never set both height and max-width independently, which squeezes a
   tall iPhone into an unnaturally narrow frame on Safari/iOS. */
@media(max-width:720px){
  #technology .tech-chat-phone,
  #technology .tech-stage-shell[data-device="phone"] .tech-chat-phone{
    height:min(97%,calc(115vw - 28px));
    width:auto;
    max-width:none;
    max-height:97%;
    aspect-ratio:.475;
    flex:0 0 auto;
    align-self:center;
  }
  #technology .tech-stage-shell[data-device="phone"] .tech-scene:not([data-tech-scene="3"]) .tech-screen-window{
    height:min(96%,calc(112vw - 26px));
    width:auto!important;
    max-width:none;
    max-height:96%;
    aspect-ratio:.471;
    justify-self:end;
    margin-right:3.5%;
  }
}