.tech-story{overflow:visible}.tech-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;align-items:start}.layer-choices{padding-block:10px 70px}.layer-choice{font:inherit;width:100%;border:0;border-top:1px solid #cfc6b5;display:grid;grid-template-columns:37px 1fr 20px;gap:17px;padding:32px 12px 34px;background:transparent;text-align:start;cursor:pointer;min-height:205px;color:#262c23;transition:background .35s,opacity .35s}.layer-number{font:24px Georgia,serif;color:#a98a50;line-height:1.5}.layer-copy{display:flex;flex-direction:column}.layer-copy strong{font-size:26px;line-height:1.3;font-weight:400;letter-spacing:-.7px;margin-bottom:14px}.layer-copy>span{font-size:13px;line-height:1.8;color:#7c776b;max-width:340px}.layer-copy small{font-size:10px;letter-spacing:.5px;color:#a48650;margin-top:18px}.layer-arrow{color:#a18450;padding-top:7px;font-size:18px;transition:transform .35s}.layer-choice:hover,.layer-choice.active{background:#e8e1d360}.layer-choice.active .layer-arrow{transform:rotate(45deg)}.layer-choice.active{border-top-color:#a7864b}.tech-figure{position:sticky;top:30px;border:1px solid #cec4ad;border-radius:12px;background:radial-gradient(ellipse at 50% 45%,#f8f4e9,#eae4d7);overflow:hidden;box-shadow:0 25px 50px #4b3e2510}.tech-topline{display:flex;justify-content:space-between;align-items:center;padding:24px 25px;font-size:8px;letter-spacing:1.2px;color:#786649;gap:15px}.tech-topline>span{display:flex;align-items:center;gap:8px}.tech-topline i{width:5px;height:5px;background:#9d895c;border-radius:50%}.tech-topline small{font-size:6px;letter-spacing:.5px;color:#958771}.tech-art{position:relative;min-height:440px;direction:ltr}.stack-svg{display:block;width:100%;height:auto;overflow:visible}.chip-layer{transform:translateY(var(--rest));transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .8s;filter:drop-shadow(0 9px 6px #0e201824)}.chip-led{animation:chip-led 3s ease-in-out infinite}.tech-label{position:absolute;display:flex;flex-direction:column;gap:4px;padding:14px 17px;background:#faf8f0ee;border:1px solid #d3c5aa;border-inline-start:2px solid #b1945d;border-radius:4px;box-shadow:0 12px 20px #32291212;transition:transform .7s,opacity .7s;max-width:180px}.tech-label span{font-family:Georgia,serif;font-size:22px;color:#ab8e56;line-height:1}.tech-label b{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:#435044;font-weight:500}.label-0{left:4%;bottom:10%}.label-1{right:3%;top:43%}.label-2{left:5%;top:4%}.tech-bottom{display:flex;align-items:center;gap:16px;border-top:1px solid #d8cfbe;margin:0 25px;padding:20px 0;font-size:9px;color:#807354}.layer-meter{display:flex;gap:4px}.layer-meter i{width:16px;height:4px;background:#cfc6b3;transition:background .6s}.layer-meter i.assembled{background:#a78c57}.tech-summary{border-top:1px solid #d0c6b3;display:flex;align-items:center;gap:20px;padding-top:28px}.tech-summary>span{font-size:27px;color:#a88c55}.tech-summary p{font-size:14px;color:#645f52;margin:0}.tech-summary a{margin-inline-start:auto;color:#8e7140;font-size:11px;flex-shrink:0}.tech-story .story-heading h2{font-size:clamp(50px,5vw,76px)}html[dir=rtl] .layer-choice{text-align:right}html[dir=rtl] .tech-label{direction:rtl}html[dir=rtl] .tech-label b{letter-spacing:0;font-size:12px}html[dir=rtl] .layer-copy strong{letter-spacing:0;font-size:25px}html[dir=rtl] .tech-topline{letter-spacing:0}html[dir=rtl] .tech-topline small{font-size:8px}@keyframes chip-led{50%{opacity:.35}}@media(max-width:1100px){.tech-layout{gap:30px}.layer-copy strong{font-size:23px}.tech-label{padding:12px;max-width:145px}.tech-label b{font-size:8px}.tech-art{min-height:360px}.tech-topline{padding:19px;font-size:7px}}@media(max-width:720px){.tech-layout{display:flex;flex-direction:column-reverse;gap:20px}.tech-figure{position:relative;top:auto;width:100%}.tech-art{min-height:0}.tech-story .story-heading h2{font-size:48px}.layer-choices{padding:0 0 25px}.layer-choice{min-height:0;padding:23px 8px;grid-template-columns:30px 1fr 18px;gap:12px}.layer-copy strong{font-size:23px;margin-bottom:10px}.layer-copy>span{font-size:13px;max-width:none}.layer-copy small{margin-top:12px}.tech-label{padding:9px 11px;max-width:130px}.tech-label span{font-size:19px}.tech-label b{font-size:7px}.tech-bottom{font-size:8px;margin-inline:18px}.tech-summary{flex-wrap:wrap;gap:12px}.tech-summary p{font-size:13px;flex:1}.tech-summary a{margin-inline-start:38px}.tech-topline small{font-size:5px}.tech-topline{font-size:6px;padding:20px 16px}.label-1{right:2%}.label-0{left:2%}.label-2{left:3%;top:0}html[dir=rtl] .tech-label b{font-size:10px}html[dir=rtl] .tech-story .story-heading h2{font-size:40px}}@media(prefers-reduced-motion:reduce){.chip-layer,.tech-label,.layer-choice,.layer-arrow{transition:none}}
.stack-mode{display:flex;width:fit-content;margin:0 auto 10px;padding:4px;background:#dcd4c4;border:1px solid #ccbea4;border-radius:5px;gap:4px}.stack-mode button{background:transparent;border:0;padding:11px 20px;border-radius:3px;font-size:11px;color:#756951;cursor:pointer}.stack-mode button.active{background:#23372a;color:#f0dfbb;box-shadow:0 3px 8px #0002}.stack-before .chip-0{transform:translate(-65px,190px) rotate(-7deg);transform-origin:280px 180px}.stack-before .chip-1{transform:translate(65px,75px) rotate(7deg);transform-origin:280px 180px}.stack-before .chip-2{transform:translate(-35px,-45px) rotate(-6deg);transform-origin:280px 180px}.stack-before .chip-led{opacity:.2;animation-play-state:paused}.stack-before .layer-meter i{background:#c7bdac}.stack-after .chip-0{transform:translateY(150px)}.stack-after .chip-1{transform:translateY(90px)}.stack-after .chip-2{transform:translateY(30px)}.stack-after .chip-layer.focused{filter:drop-shadow(0 0 7px #ad8f4e80)}.chip-layer{transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .6s,filter .5s}.stack-before .label-0{transform:translateY(8px)}.stack-before .label-2{transform:translateY(-5px)}.tech-art{overflow:hidden}@media(max-width:720px){.stack-mode button{font-size:10px;padding:10px 14px}}@media(prefers-reduced-motion:reduce){.chip-layer,.tech-label{transition:none!important}}
/* Distinct, coordinated colours identify each layer. */
.layer-choices{display:flex;flex-direction:column;gap:16px}.layer-choice{--accent:#63ddc0;background:linear-gradient(120deg,#153f37,#102a26);border:1px solid #327463;border-radius:10px;padding:28px 24px;color:#f5fff9;min-height:190px;box-shadow:0 10px 22px #173f3010}.layer-choice:nth-child(2){--accent:#8bbfff;background:linear-gradient(120deg,#233d60,#14263f);border-color:#46658b}.layer-choice:nth-child(3){--accent:#edc47c;background:linear-gradient(120deg,#584326,#30291c);border-color:#967845}.layer-choice.active,.layer-choice:hover{background:linear-gradient(110deg,#205345,#142e27);border-color:var(--accent);box-shadow:0 12px 25px #173f3020}.layer-choice:nth-child(2).active,.layer-choice:nth-child(2):hover{background:linear-gradient(110deg,#2e507d,#192e4b)}.layer-choice:nth-child(3).active,.layer-choice:nth-child(3):hover{background:linear-gradient(110deg,#725633,#3d301e)}.layer-choice .layer-number,.layer-choice .layer-arrow,.layer-choice .layer-copy small{color:var(--accent)}.layer-choice .layer-copy>span{color:#dae4df}.layer-copy strong{font-size:25px}.tech-figure{background:radial-gradient(ellipse at 50% 50%,#263b33,#111d19 75%);border-color:#3e5147;box-shadow:0 22px 50px #18251c25}.tech-topline{color:#ddc89c}.tech-topline small{color:#a6b6ab}.tech-bottom{color:#c2cbbd;border-color:#435347}.stack-mode{background:#253b30;border-color:#576752}.stack-mode button{color:#c0cabb}.stack-mode button.active{background:#d5b77d;color:#17251d}.tech-label{background:#1b453b;border-color:#469b82;box-shadow:0 12px 25px #0003}.tech-label span{color:#7fe4ca}.tech-label b{color:#e2f9ef}.label-1{background:#223f60;border-color:#5e85b6}.label-1 span{color:#a3ceff}.label-2{background:#534125;border-color:#b08d50}.label-2 span{color:#f4d08e}.chip-0{filter:drop-shadow(0 0 7px #64b79a30)}.chip-1>polygon:first-child{fill:#294b69}.chip-2>polygon:first-child{fill:#705631}.stack-after .chip-layer.focused{filter:drop-shadow(0 0 9px #ddbd7d70)}@media(max-width:720px){.layer-choice{min-height:0;padding:22px 17px}.layer-copy strong{font-size:22px}}
/* Match both column heights and align their lower edges. */
.tech-layout{align-items:stretch}.layer-choices{padding:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:16px}.layer-choice{height:100%;min-height:0}.tech-figure{position:relative;top:auto;height:100%;display:flex;flex-direction:column}.tech-art{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.stack-svg{width:100%;height:100%;max-height:480px;min-height:330px;object-fit:contain}.tech-bottom{margin-top:auto}.tech-topline{flex-shrink:0}.stack-mode{flex-shrink:0}.tech-summary{margin-top:35px}@media(max-width:720px){.tech-layout{display:flex;gap:24px}.layer-choices{display:flex;gap:16px;padding:0}.layer-choice{height:auto}.tech-figure{height:auto}.stack-svg{min-height:0;max-height:none;height:auto}.tech-art{display:block}.tech-summary{margin-top:25px}}
.tech-summary{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;margin-top:55px;padding:45px 7% 20px;border-top:1px solid #cfc2a8}.tech-summary>span{font-family:Georgia,serif;font-size:100px;color:#b39458;line-height:.8;height:60px}.tech-summary blockquote{font-family:Georgia,serif;font-size:clamp(28px,3vw,45px);font-weight:400;line-height:1.4;letter-spacing:-.7px;max-width:1000px;margin:10px 0 25px;color:#384134}.tech-summary a{margin:0;font-size:12px;border-bottom:1px solid #b99b63;padding-bottom:5px}html[dir=rtl] .tech-summary blockquote{font-family:Tahoma,Arial,sans-serif;letter-spacing:0;font-size:34px;line-height:1.7}@media(max-width:720px){.tech-summary{padding:35px 0 10px;margin-top:35px}.tech-summary blockquote{font-size:28px;line-height:1.45}.tech-summary a{margin:0}.tech-summary>span{font-size:80px;height:45px}html[dir=rtl] .tech-summary blockquote{font-size:26px}}
/* Ordered top-to-bottom: data, automation, intelligence engine. */
.stack-after .chip-0{transform:translateY(30px)}.stack-after .chip-1{transform:translateY(90px)}.stack-after .chip-2{transform:translateY(150px)}.stack-before .chip-0{transform:translate(-35px,-45px) rotate(-6deg)}.stack-before .chip-1{transform:translate(65px,75px) rotate(7deg)}.stack-before .chip-2{transform:translate(-65px,190px) rotate(-7deg)}.label-0{top:4%;bottom:auto;left:5%}.label-1{top:43%;bottom:auto;right:3%}.label-2{top:auto;bottom:10%;left:4%}.stack-before .label-0{transform:translateY(-5px)}.stack-before .label-2{transform:translateY(8px)}@media(max-width:720px){.label-0{top:0;left:3%}.label-2{bottom:10%;left:2%}}
@media(prefers-reduced-motion:no-preference){.chip-layer,.tech-label{transition-duration:.8s!important;transition-timing-function:cubic-bezier(.22,1,.36,1)!important}.layer-choice{transition-duration:.3s!important}}

/* The arrow rotates on the active card: keep its box glyph-sized, or the stretched cell swings wider than a phone screen. */
.layer-arrow{align-self:start;line-height:1}
/* AI booster overlay (technology-stack.js): only after connection */
.ai-boost{transition:opacity .7s ease}
.stack-before .ai-boost{opacity:0!important}
.stack-before .ai-boost *{animation-play-state:paused}
/* Phones: the three layer cards sit in one row that swipes sideways instead of stacking. */
@media(max-width:720px){.layer-choices{display:flex;flex-direction:row;grid-template-rows:none;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:-6.2vw;padding:0 6.2vw 4px;scroll-padding-inline:6.2vw}.layer-choices::-webkit-scrollbar{display:none}.layer-choice{flex:0 0 84%;width:auto;scroll-snap-align:start}}
/* "Every layer": the secured layer around the stack, styled like the hero's ring. After connection it is gold with a light
   moving along it; before connection it turns red and dashed, with open locks and an "Unsecured" label. */
.ss-glow{stroke:#d8ba79;stroke-opacity:.13;transition:stroke .5s}
.ss-line{stroke:#e2c88c;transition:stroke .5s}
.ss-scan{stroke:#fff0c8;stroke-dasharray:70 930;animation:ss-scan 6s linear infinite}
@keyframes ss-scan{to{stroke-dashoffset:-1000}}
.ss-badge{fill:#2a2414;stroke:#d8ba79;stroke-width:1;transition:fill .5s,stroke .5s}
.ss-icon{fill:none;stroke:#e8cf95}
.ss-on{fill:#fff3d6}.ss-label .ss-badge{filter:drop-shadow(0 3px 8px #0009)}.ss-off,.ss-open{display:none}
.stack-before .ss-glow{stroke:#d9534f}
.stack-before .ss-line{stroke:#e0645c;stroke-dasharray:8 8}
.stack-before .ss-scan{display:none}
.stack-before .ss-badge{fill:#2a1414;stroke:#e0645c}
.stack-before .ss-icon{stroke:#f19a93}
.stack-before .ss-off{display:inline;fill:#f19a93}
.stack-before .ss-on,.stack-before .ss-shut{display:none}
.stack-before .ss-open{display:inline}
@media(prefers-reduced-motion:reduce){.ss-scan{animation:none;display:none}}
/* Each layer box is secured too: a dashed gold outline and a lock badge on its corner. */
.tech-label{outline:1px dashed #d8ba79aa;outline-offset:4px;transition:transform .7s,opacity .7s,outline-color .5s}
.stack-before .tech-label{outline-color:#e0645caa}
.stack-before .tech-label::after{border-color:#e0645c;background:#2a1414 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f19a93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='11' x='4' y='11' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.6-1.8'/%3E%3C/svg%3E") center/11px no-repeat}
.tech-label::after{content:'';position:absolute;top:-13px;inset-inline-end:-13px;width:22px;height:22px;border-radius:50%;border:1px solid #d8ba79;background:#10231d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8cf95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='11' x='4' y='11' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/11px no-repeat}
/* Phones: room for the layer boxes' outline and lock badge, so no box is cut at the top or the side. */
@media(max-width:720px){.tech-art{padding-top:16px}.tech-label.label-0{top:16px}.tech-label.label-1{right:16px}}
/* Arabic: the diagram is drawn left-to-right, so keep each box's lock on its right corner (on the left it was cut off on phones). */
html[dir=rtl] .tech-label::after{inset-inline-end:auto;right:-13px}