/* A self-contained, fixed-size stage. Only transforms/opacity move during playback. */
.why-us-section {
  --why-blue: #54c4ff;
  --why-panel-width: min(880px, 78vw);
  --why-panel-height: 540px;
  position: relative;
  isolation: isolate;
  min-height: 850px;
  padding: 34px 0 22px;
  overflow: hidden;
  color: #fff;
  background: #020a18;
  scroll-margin-top: 80px;
}
.why-us-background { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.why-us-hero-background { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 42%; opacity: .72; filter: saturate(.98) contrast(1.06); transform: scale(1.04); }
.why-us-background::before { content: ''; position: absolute; z-index: 1; inset: 0; background: radial-gradient(ellipse at 50% 43%, #071e3c12 0%, #020b19a8 62%, #010611e8 100%); }
.why-us-background::after { content: ''; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, #010713cc 0%, #03152dba 24%, #03152d78 50%, #03152dba 76%, #010713cc 100%), linear-gradient(0deg, #010813d4 0%, #01081322 35%, #01081377 100%); }
.why-us-floor { position: absolute; bottom: -190px; left: 10%; width: 80%; height: 410px; border: 1px solid #43b1ff30; border-radius: 50%; background: radial-gradient(ellipse, #249aff14, transparent 65%); box-shadow: 0 -1px 22px #51bfff1a; transform: perspective(800px) rotateX(67deg); }
.why-us-topline { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 20px; width: min(1240px, calc(100% - 64px)); margin: auto; font-size: 11px; color: #88a9c6; }
.why-us-topline > span:first-child { font-size: 10px; letter-spacing: .17em; }
.why-us-topline i { padding: 0 12px; color: #47baff; font-style: normal; }
.why-us-stage { position: relative; width: min(1240px, 100%); height: max(790px, calc(96svh - 80px)); margin: 0 auto; perspective: 1400px; }
.why-us-depth { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--why-tilt-x, 0deg)) rotateY(var(--why-tilt-y, 0deg)); }
.main-glass-panel { position: absolute; z-index: 3; top: 50%; left: 50%; width: var(--why-panel-width); height: var(--why-panel-height); transform: translate(-50%, -50%); transform-style: preserve-3d; }
.glass-surface, .glass-shard { position: absolute; inset: 0; border: 1px solid #6acfffaa; border-radius: 30px; background: linear-gradient(125deg, #bddfff1c 0%, #427aaa13 23%, #031831c7 56%, #2b84c925 100%); }
.glass-surface { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 1px #d5eeff77, inset 0 -1px 1px #9cddff55, 0 0 5px #35a7ff55, 0 28px 70px #00091b70, 0 0 50px #278fff15; }
.glass-surface::after, .glass-shard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(118deg, transparent 8%, #cceeff0d 9%, transparent 11%, transparent 62%, #cceeff06 63%, transparent 64%); pointer-events: none; }
.glass-content { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 42px 48px 78px; text-align: center; }
.why-us-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: #9bc8e7; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.why-us-eyebrow::before, .why-us-eyebrow::after { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, #55caff); }
.why-us-eyebrow::after { background: linear-gradient(90deg, #55caff, transparent); }
.glass-content h2, .glass-content .why-us-shard-title { display: block; margin: 18px 0 15px; color: #fff; font-size: clamp(84px, 10vw, 154px); font-weight: 900; line-height: 1.22; letter-spacing: -.045em; word-spacing: .12em; text-shadow: 0 7px 26px #00082066, 0 0 34px #168ddc22; }
.glass-content h2 span, .why-us-shard-title span { color: #36bdff; text-shadow: 0 0 28px #19aaff33; }
.glass-content p { max-width: 590px; margin: 0; color: #e0effa; font-size: clamp(14px, 1.5vw, 20px); font-weight: 500; line-height: 2.05; text-shadow: 0 2px 15px #000820; }
.why-us-indicators { display: flex; gap: 9px; margin-top: 34px; direction: ltr; }
.why-us-indicators i { width: 18px; height: 4px; border-radius: 10px; background: #294c75; }
.why-us-indicators i:first-child { width: 30px; background: #37bdff; box-shadow: 0 0 12px #36c3ff77; }
.why-us-open { position: absolute; z-index: 5; inset: 0; width: 100%; border: 0; border-radius: 30px; padding: 0; cursor: pointer; color: #c4e6fb; background: transparent; }
.why-us-open > span { position: absolute; bottom: 28px; left: 0; right: 0; font-size: 12px; }
.why-us-open b { margin-right: 7px; color: #65caff; font-size: 17px; }
.why-us-open:focus-visible, .why-us-reset:focus-visible { outline: 3px solid #adE9ff; outline-offset: 7px; }
.why-us-ghosts { position: absolute; inset: 0; pointer-events: none; }
.why-us-ghosts > span { position: absolute; top: 24%; left: 8%; display: grid; place-items: center; width: 150px; height: 140px; border: 1px solid #80cfff66; border-radius: 18px; background: #2d79bb0a; opacity: .17; transform: perspective(700px) rotateY(24deg) rotateZ(-5deg); }
.why-us-ghosts > span:nth-child(2) { left: auto; right: 8%; transform: perspective(700px) rotateY(-24deg) rotateZ(5deg); }
.why-us-ghosts > span:nth-child(3) { top: auto; bottom: 23%; transform: perspective(700px) rotateY(24deg) rotateZ(4deg); }
.why-us-ghosts > span:nth-child(4) { top: auto; bottom: 23%; left: auto; right: 8%; transform: perspective(700px) rotateY(-24deg) rotateZ(-4deg); }
.why-us-ghosts svg { width: 52px; height: 52px; fill: none; stroke: #7eceff; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.glass-shards { position: absolute; inset: 0; z-index: 2; pointer-events: none; transform-style: preserve-3d; }
.glass-shard { opacity: 0; backface-visibility: hidden; transform-origin: 50% 50%; /* No blur per shard: avoids 16 GPU filter layers on mobile. */ }
.glass-shard > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #94dcff; stroke-width: .7px; }
.glass-cracks { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: hidden; border-radius: 30px; pointer-events: none; }
.glass-cracks path { fill: none; stroke: #9cddffbb; stroke-width: .22; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.break-flash { position: absolute; z-index: 4; top: 47%; left: 51%; width: 180px; height: 180px; margin: -90px 0 0 -90px; background: radial-gradient(circle, #b3ecffbb, #56c6ff33 25%, transparent 70%); opacity: 0; pointer-events: none; }
.reasons-container { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 330px)); grid-auto-rows: 350px; align-content: center; justify-content: center; gap: 30px 45px; padding: 38px 32px; direction: ltr; }
.reason-card { --why-angle: -4deg; position: relative; min-width: 0; height: 350px; overflow: hidden; border: 1px solid #45b5ff8c; border-radius: 20px; background: #04142ab8; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 16px 40px #00071388, inset 0 1px #b7e6ff44, 0 0 16px #218eff20; direction: rtl; text-align: center; transform: rotate(var(--why-angle)); }
.reason-2, .reason-3 { --why-angle: 3deg; }
.reason-4 { --why-angle: -3deg; }
body.amin-site .reason-image { position: absolute; inset: 0 0 auto; width: 100%; height: 60%; max-width: none; object-fit: cover; }
.reason-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, #030d1d55 45%, #030d1d 60%, #030d1d 100%); pointer-events: none; }
.reason-number { position: absolute; z-index: 2; top: 16px; left: 18px; color: #d2e6ff; font-size: 22px; font-weight: 400; text-shadow: 0 2px 10px #001329; }
.reason-copy { position: absolute; z-index: 2; right: 18px; left: 18px; top: 46%; }
.reason-icon { display: grid; place-items: center; width: 55px; height: 55px; margin: 0 auto 10px; border: 1px solid #43bcff; border-radius: 50%; background: #062342ed; color: #c5efff; box-shadow: inset 0 0 16px #24aaff18, 0 0 12px #149fff22; }
.reason-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reason-copy h3 { margin: 0 0 9px; color: #fff; font-size: 25px; font-weight: 800; line-height: 1.55; letter-spacing: -.035em; text-shadow: 0 3px 16px #000a; }
.reason-copy p { max-width: 286px; margin: 0 auto; color: #d5e6f3; font-size: 14px; font-weight: 500; line-height: 1.95; text-shadow: 0 2px 12px #000b; }
.why-us-reset { position: absolute; z-index: 6; top: 2px; left: 50%; transform: translateX(-50%); min-height: 36px; border: 1px solid #75c4ff44; border-radius: 30px; padding: 3px 18px; color: #b5d7f0; background: #031329dd; font-size: 12px; cursor: pointer; }
.why-us-reset[hidden] { display: none; }
.why-us-reset span { margin-right: 8px; font-size: 18px; }
.why-us-mobile-hint { display: none; }
.why-us-section.is-ready .reason-card { opacity: 0; }
.why-us-section.is-ready .reasons-container { visibility: hidden; pointer-events: none; }
.why-us-section.is-broken .reasons-container, .why-us-section.is-animating .reasons-container { visibility: visible; }
.why-us-section.is-broken .reasons-container { pointer-events: auto; }
.why-us-section.is-broken .main-glass-panel { pointer-events: none; }
.why-us-section.is-broken .why-us-open { visibility: hidden; }
.why-us-section.is-animating .glass-shard, .why-us-section.is-animating .reason-card { will-change: transform, opacity; }
/* Meaningful, readable fallback if JS is unavailable. */
.why-us-section:not(.is-ready) .why-us-stage { height: auto; }
.why-us-section:not(.is-ready) .why-us-depth { position: relative; }
.why-us-section:not(.is-ready) .main-glass-panel { position: relative; top: auto; left: auto; transform: none; width: min(760px, 90%); height: 370px; margin: 30px auto; }
.why-us-section:not(.is-ready) .reasons-container { position: relative; }
.why-us-section:not(.is-ready) .why-us-open { display: none; }
@media (max-width: 1000px) {
  .why-us-section { --why-panel-width: min(820px, 86vw); --why-panel-height: 510px; }
  .why-us-ghosts > span { left: 1%; }
  .why-us-ghosts > span:nth-child(2), .why-us-ghosts > span:nth-child(4) { right: 1%; }
  .reasons-container { gap: 22px; grid-template-columns: repeat(2, minmax(0, 310px)); }
  .reason-card { --why-angle: 0deg; }
}
@media (max-width: 600px) {
  .why-us-section { --why-panel-width: calc(100vw - 32px); --why-panel-height: 430px; min-height: 700px; padding: 24px 0; }
  .why-us-topline { width: calc(100% - 40px); }
  .why-us-topline > span:last-child { display: none; }
  .why-us-stage { height: max(640px, calc(90svh - 60px)); }
  .why-us-depth { transform: none; }
  .glass-content { padding: 28px 20px 70px; }
  .glass-content h2, .glass-content .why-us-shard-title { font-size: clamp(68px, 20vw, 108px); word-spacing: .04em; }
  .glass-content p { max-width: 290px; font-size: 14px; }
  .why-us-eyebrow { font-size: 10px; }
  .why-us-ghosts > span { width: 75px; height: 100px; top: 14%; }
  .why-us-ghosts > span:nth-child(n+3) { bottom: 14%; }
  .why-us-ghosts svg { width: 32px; }
  .why-us-section .reasons-container { inset: 52px 16px 36px; grid-template-columns: minmax(0, 350px); grid-auto-rows: 340px; gap: 18px; align-content: start; padding: 12px 8px 20px; overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #3278a9 #06152b; }
  .reason-card { height: 340px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .reason-copy h3 { font-size: 23px; }
  .why-us-reset { top: 4px; }
  .why-us-section.is-broken .why-us-mobile-hint { display: block; position: absolute; right: 0; left: 0; bottom: 6px; text-align: center; color: #8caec8; font-size: 11px; }
  .why-us-section:not(.is-ready) .reasons-container { inset: auto; overflow: visible; }
  .why-us-hero-background { object-position: 58% 42%; opacity: .42; }
}
@media (prefers-reduced-motion: reduce) {
  .why-us-depth { transform: none; }
  .glass-shards, .glass-cracks, .break-flash { display: none; }
  .reason-card { --why-angle: 0deg; }
}