/* =====================================================================
   v7 — new menu buttons + "Our story" and "Rate your experience" screens
   ===================================================================== */

/* ---------- MENU BUTTONS: two minimal arch tiles ---------- */
.orbs.tiles { gap: calc(var(--u)*5); margin-top: calc(var(--u)*10); align-items: stretch; }
.orb-btn.tile { width: calc(var(--u)*36); gap: 0; padding: 0; perspective: none; }
.tl-face {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  width: 100%; height: calc(var(--u)*54); padding: calc(var(--u)*10) calc(var(--u)*3) calc(var(--u)*5);
  border-radius: calc(var(--u)*18) calc(var(--u)*18) calc(var(--u)*5) calc(var(--u)*5);   /* arch window */
  background: linear-gradient(180deg, rgba(120,200,255,.10), rgba(8,40,96,.28));
  box-shadow: inset 0 0 0 1px rgba(190,230,255,.28), 0 calc(var(--u)*2) calc(var(--u)*6) rgba(0,10,40,.35);
  transition: background .3s, box-shadow .3s;
}
/* one slow light travelling around the outline */
.tl-face::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 0 78%, rgba(150,225,255,.0) 80%, rgba(170,235,255,.9) 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: orbit 9s linear infinite; }
.tile:nth-child(2) .tl-face::before { animation-delay: -4.5s; }
.tl-ico { width: calc(var(--u)*13); height: calc(var(--u)*13); margin-bottom: calc(var(--u)*5); overflow: visible; }
.tl-ico .ln { fill: none; stroke: #e8f6ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tl-ico .dim { stroke: rgba(200,232,255,.5); }
.tl-ico .acc { stroke: #5fd3f5; }
.orb-btn.tile b { margin: 0; font-size: calc(var(--u)*5.6); font-weight: 700; letter-spacing: 0; text-shadow: none; color: #fff; }
.orb-btn.tile small { margin-top: calc(var(--u)*1.6); font-size: calc(var(--u)*2.8); color: rgba(205,230,250,.72); opacity: 1; }
.tl-go { margin-top: auto; display: grid; place-items: center; width: calc(var(--u)*8.5); height: calc(var(--u)*8.5); border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(190,230,255,.38); color: #fff; transition: background .3s, box-shadow .3s; }
.tl-go svg { width: 46%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile:active .tl-face { transform: scale(.97); }
.tile:active .tl-go, .tile:hover .tl-go { background: #0eb2e2; box-shadow: none; }
.tile:hover .tl-face { background: linear-gradient(180deg, rgba(120,200,255,.16), rgba(8,40,96,.34)); }
body.light .tl-face { background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34)); box-shadow: inset 0 0 0 1px rgba(18,93,170,.18), 0 calc(var(--u)*2) calc(var(--u)*6) rgba(18,60,120,.14); }
body.light .tl-face::before { background: conic-gradient(from var(--a, 0deg), transparent 0 78%, rgba(14,140,210,0) 80%, rgba(14,140,210,.8) 88%, transparent 96%); }
body.light .tl-ico .ln { stroke: #0b2a55; } body.light .tl-ico .dim { stroke: rgba(11,42,85,.4); } body.light .tl-ico .acc { stroke: #0e9fd0; }
body.light .orb-btn.tile b { color: #0b2a55; text-shadow: none; }
body.light .orb-btn.tile small { color: #3a5f86; text-shadow: none; }
body.light .tl-go { box-shadow: inset 0 0 0 1px rgba(18,93,170,.3); color: #125daa; }
body.light .tile:active .tl-go, body.light .tile:hover .tl-go { background: #125daa; color: #fff; }
@media (prefers-reduced-motion: reduce) { .tl-face::before { animation: none; } }

#menu.away { opacity: 0; pointer-events: none; transition: opacity .35s; }
#menu { transition: opacity .5s; }

/* ---------- shared screen furniture ---------- */
.scr { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; display: flex; flex-direction: column; align-items: center; color: var(--ink); }
.scr.active { opacity: 1; visibility: visible; transition: opacity .6s ease .15s, visibility 0s; }
.scr::before {                           /* scrim so the text always reads over the clouds */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(3,14,38,.62) 0, rgba(3,14,38,.34) 30%, rgba(3,14,38,.12) 55%, rgba(3,14,38,.4) 100%);
}
body.light .scr { color: #0b2a55; }
body.light .scr::before { background: linear-gradient(180deg, rgba(255,255,255,.55) 0, rgba(255,255,255,.28) 32%, rgba(255,255,255,.08) 60%, rgba(255,255,255,.3) 100%); }

.scr-top { width: calc(var(--u)*92); display: flex; align-items: center; justify-content: space-between; margin-top: 3.4vh; }
.scr-logo { width: calc(var(--u)*17); filter: drop-shadow(0 0 calc(var(--u)*1) rgba(120,230,255,.6)); }
.chip-btn {
  display: inline-flex; align-items: center; gap: calc(var(--u)*1.5); font-family: inherit; cursor: pointer;
  font-size: calc(var(--u)*3); color: inherit; padding: calc(var(--u)*2) calc(var(--u)*4.4) calc(var(--u)*2) calc(var(--u)*3.4);
  border-radius: 99px; border: 1px solid rgba(255,255,255,.28); background: rgba(3,20,45,.38); box-shadow: 0 0 14px rgba(14,178,226,.25);
  transition: transform .2s;
}
.chip-btn:active { transform: scale(.94); }
.chip-btn svg { width: calc(var(--u)*3.6); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.light .chip-btn { border-color: rgba(11,42,85,.22); background: rgba(255,255,255,.6); box-shadow: 0 4px 18px rgba(11,42,85,.12); }

.scr-head { margin-top: calc(var(--u)*5); text-align: center; display: flex; flex-direction: column; gap: calc(var(--u)*1.2); }
.scr-head h2 { font-size: calc(var(--u)*9); font-weight: 800; text-shadow: 0 0 4px rgba(200,245,255,.5), 0 0 26px rgba(14,178,226,.65), 0 4px 30px rgba(0,0,0,.35); }
.scr-head small { font-size: calc(var(--u)*3.4); color: var(--teal); text-shadow: 0 0 10px rgba(69,190,209,.8); }
body.light .scr-head h2 { text-shadow: 0 0 18px rgba(255,255,255,.95), 0 2px 10px rgba(255,255,255,.7); }
body.light .scr-head small { color: #1572b8; text-shadow: 0 0 12px rgba(255,255,255,.9); }

.sbtn, .nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u)*2); cursor: pointer; font-family: inherit;
  font-size: calc(var(--u)*4); font-weight: 700; color: #fff; border: 0; border-radius: 99px;
  padding: calc(var(--u)*3) calc(var(--u)*8) calc(var(--u)*3) calc(var(--u)*6.4);
  background: linear-gradient(135deg, #1fc3ee, #125daa);
  box-shadow: inset 0 0 0 1.5px rgba(190,245,255,.55), 0 0 calc(var(--u)*5) rgba(14,178,226,.6), 0 calc(var(--u)*2) calc(var(--u)*5) rgba(2,20,60,.4);
  transition: filter .2s, transform .2s;
}
.sbtn svg, .nav-btn svg { width: calc(var(--u)*4.6); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sbtn:active, .nav-btn:active { transform: scale(.95); filter: brightness(1.15); }
.sbtn.ghost, .nav-btn.ghost { background: rgba(3,20,45,.4); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
body.light .sbtn.ghost, body.light .nav-btn.ghost { background: rgba(255,255,255,.65); color: #0b2a55; box-shadow: inset 0 0 0 1.5px rgba(11,42,85,.25), 0 4px 16px rgba(11,42,85,.12); }
.link-btn { font-family: inherit; font-size: calc(var(--u)*3.2); color: inherit; opacity: .8; background: none; border: 0; text-decoration: underline; text-underline-offset: calc(var(--u)*1); cursor: pointer; padding: calc(var(--u)*2); }

/* ---------- OUR STORY ---------- */
.rail { width: calc(var(--u)*84); margin-top: calc(var(--u)*5); display: flex; align-items: center; justify-content: space-between; position: relative; }
.rail::before { content: ""; position: absolute; right: 0; left: 0; top: 50%; height: 2px; transform: translateY(-50%); background: rgba(255,255,255,.22); border-radius: 2px; }
.rail .fill { position: absolute; right: 0; top: 50%; height: 2px; transform: translateY(-50%); width: 0; border-radius: 2px; background: linear-gradient(270deg, #45bed1, #0eb2e2); box-shadow: 0 0 10px #0eb2e2; transition: width .7s cubic-bezier(.3,.8,.2,1); }
.rail .node {
  position: relative; width: calc(var(--u)*4.4); height: calc(var(--u)*4.4); border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: rgba(10,40,80,.75); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); transition: transform .5s cubic-bezier(.3,1.5,.4,1), background .4s, box-shadow .4s;
}
.rail .node::after { content: ""; position: absolute; inset: -60%; }       /* bigger touch target */
.rail .node.done { background: #0eb2e2; box-shadow: inset 0 0 0 2px #bdf4ff, 0 0 12px rgba(14,178,226,.9); }
.rail .node.on { transform: scale(1.55); background: #fff; box-shadow: 0 0 0 3px rgba(14,178,226,.9), 0 0 22px #0eb2e2, 0 0 46px rgba(14,178,226,.7); }
body.light .rail::before { background: rgba(11,42,85,.2); }
body.light .rail .node { background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 2px rgba(11,42,85,.3); }
body.light .rail .node.done { background: #0eb2e2; box-shadow: inset 0 0 0 2px #fff, 0 0 10px rgba(14,178,226,.7); }
body.light .rail .node.on { background: #125daa; box-shadow: 0 0 0 3px #fff, 0 0 20px rgba(14,178,226,.8); }

.stage { position: relative; width: calc(var(--u)*92); flex: 1; margin-top: calc(var(--u)*3); touch-action: pan-y; }
.chap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.hero { position: relative; width: calc(var(--u)*26); height: calc(var(--u)*26); flex: none; margin: calc(var(--u)*1.2) 0 calc(var(--u)*2.6); }
.hero-orb {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 0 0 1.5px rgba(170,240,255,.55), 0 0 calc(var(--u)*7) rgba(14,178,226,.7), 0 0 calc(var(--u)*18) rgba(14,178,226,.3),
    inset calc(var(--u)*-3) calc(var(--u)*-4) calc(var(--u)*8) rgba(0,8,40,.6), inset calc(var(--u)*1.5) calc(var(--u)*2) calc(var(--u)*5) rgba(255,255,255,.3);
  animation: bob 6s ease-in-out infinite;
}
.hero-orb::after { content: ""; position: absolute; left: 18%; top: 12%; width: 38%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0)); transform: rotate(-25deg); }
.hero[data-hue="0"] .hero-orb { background: radial-gradient(circle at 34% 28%, #c9f6ff 0, #2fc6ef 16%, #0e8fd0 38%, #125daa 64%, #06204a 100%); }
.hero[data-hue="1"] .hero-orb { background: radial-gradient(circle at 34% 28%, #d5fbff 0, #6fd9e6 16%, #2ab3c8 38%, #157ea0 64%, #062a45 100%); }
.hero[data-hue="2"] .hero-orb { background: radial-gradient(circle at 34% 28%, #d8f3ff 0, #5cc0f2 16%, #1a86d6 38%, #1553a8 64%, #071c48 100%); }
.hero-orb svg { position: relative; z-index: 1; width: 56%; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(0 0 12px rgba(120,230,255,.8)); overflow: visible; }
.hero .orbit { inset: -17%; }
.hero .spark { position: absolute; width: calc(var(--u)*1.1); height: calc(var(--u)*1.1); border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff, 0 0 18px #0eb2e2; opacity: 0; animation: float-spark 5s ease-in-out infinite; }
.hero .spark:nth-of-type(1) { left: -6%; top: 30%; } .hero .spark:nth-of-type(2) { right: -4%; top: 62%; animation-delay: -1.7s; } .hero .spark:nth-of-type(3) { left: 24%; bottom: -8%; animation-delay: -3.2s; }
@keyframes float-spark { 0%,100% { opacity: 0; transform: translateY(8px) scale(.5); } 50% { opacity: 1; transform: translateY(-14px) scale(1); } }

/* animated pieces inside the chapter icons */
.hero-orb svg .led { fill: #fff; stroke: none; animation: blink 2.2s ease-in-out infinite; }
.hero-orb svg .led.l2 { animation-delay: -.7s; } .hero-orb svg .led.l3 { animation-delay: -1.4s; }
.hero-orb svg .spin { transform-origin: 32px 32px; animation: spin 9s linear infinite; }
.hero-orb svg .mer { transform-origin: 32px 32px; animation: mer 4.5s ease-in-out infinite alternate; }
.hero-orb svg .pop { transform-box: fill-box; transform-origin: center; animation: pop 3.2s ease-in-out infinite; }
.hero-orb svg .pop.p2 { animation-delay: -.8s; } .hero-orb svg .pop.p3 { animation-delay: -1.6s; } .hero-orb svg .pop.p4 { animation-delay: -2.4s; }
.hero-orb svg .draw { stroke-dasharray: 60; animation: draw 3.4s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes mer { from { transform: scaleX(1); } to { transform: scaleX(.15); } }
@keyframes pop { 0%,100% { transform: scale(1); } 50% { transform: scale(.78); } }
@keyframes draw { 0% { stroke-dashoffset: 60; } 45%,80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -60; } }

/* intro hero: the logo assembling itself */
.hero.logo { width: calc(var(--u)*56); height: calc(var(--u)*35); margin-top: calc(var(--u)*4); }
.hero.logo .glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(14,178,226,.5), rgba(18,93,170,.22) 45%, transparent 75%); animation: halo 5s ease-in-out infinite; }
.hero.logo img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: mk-in 1.4s cubic-bezier(.2,.9,.2,1) forwards, mk-float 6s ease-in-out 1.6s infinite; filter: drop-shadow(0 0 calc(var(--u)*2) rgba(14,178,226,.55)); }
.hero.logo img:nth-of-type(1) { --fx: calc(var(--u)*-8); animation-delay: .1s, 1.6s; }
.hero.logo img:nth-of-type(2) { --fx: 0px; animation-delay: .35s, 2.1s; }
.hero.logo img:nth-of-type(3) { --fx: calc(var(--u)*8); animation-delay: .6s, 2.6s; }
@keyframes mk-in { from { opacity: 0; transform: translate(var(--fx), calc(var(--u)*14)) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes mk-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u)*-1.6)); } }

.chap-no { font-size: calc(var(--u)*2.8); letter-spacing: .12em; color: var(--teal); font-weight: 500; direction: ltr; }
.chap h3 { font-size: calc(var(--u)*7); font-weight: 800; margin-top: calc(var(--u)*1); text-align: center; text-shadow: 0 0 4px rgba(210,248,255,.5), 0 0 22px rgba(14,178,226,.7); }
.chap > p { font-size: calc(var(--u)*3.3); line-height: 1.6; text-align: center; width: 90%; margin-top: calc(var(--u)*1.2); color: #d6efff; }
.chap .hint { margin-top: calc(var(--u)*5); font-size: calc(var(--u)*3); opacity: .8; display: inline-flex; gap: calc(var(--u)*1.6); align-items: center; }
body.light .chap-no { color: #1572b8; }
body.light .chap h3 { text-shadow: 0 0 18px rgba(255,255,255,.95), 0 0 4px rgba(255,255,255,.9); }
body.light .chap > p { color: #17406e; text-shadow: 0 0 12px rgba(255,255,255,.9); }

.svc { list-style: none; width: 100%; margin-top: calc(var(--u)*3.2); display: flex; flex-direction: column; gap: calc(var(--u)*1.5); }
.svc li {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u)*3); overflow: hidden;
  padding: calc(var(--u)*2) calc(var(--u)*4); border-radius: calc(var(--u)*3.4);
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 calc(var(--u)*3) rgba(14,178,226,.16), 0 calc(var(--u)*1.6) calc(var(--u)*4) rgba(2,10,30,.3); -webkit-
}
.svc li::before { content: ""; position: absolute; right: 0; top: 18%; bottom: 18%; width: calc(var(--u)*.8); border-radius: 4px; background: linear-gradient(180deg, #45bed1, #0eb2e2); box-shadow: 0 0 10px #0eb2e2; }
.svc .nm { font-size: calc(var(--u)*3.5); font-weight: 500; padding-right: calc(var(--u)*1.4); }
.svc .tg { direction: ltr; flex: none; font-size: calc(var(--u)*2.6); font-weight: 700; letter-spacing: .04em; padding: calc(var(--u)*.9) calc(var(--u)*2.4); border-radius: 99px; color: #e9fcff; background: rgba(14,178,226,.28); box-shadow: inset 0 0 0 1px rgba(120,235,255,.55); }
body.light .svc li { background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.55)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 6px 20px rgba(11,42,85,.12); }
body.light .svc .tg { color: #0b4a86; background: rgba(14,178,226,.16); box-shadow: inset 0 0 0 1px rgba(18,93,170,.3); }

.outro-cta { margin-top: calc(var(--u)*7); }
.scr-foot { width: calc(var(--u)*92); display: flex; justify-content: space-between; align-items: center; margin: calc(var(--u)*2) 0 5vh; min-height: calc(var(--u)*13); }
.nav-btn[hidden] { visibility: hidden; display: inline-flex; }

/* ---------- RATE YOUR EXPERIENCE ---------- */
.steps { position: relative; width: calc(var(--u)*92); flex: 1; margin-top: calc(var(--u)*3); }
.step { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; opacity: 0; visibility: hidden; }
.step.on { opacity: 1; visibility: visible; }
.step h3 { font-size: calc(var(--u)*6.6); font-weight: 800; text-align: center; margin-top: calc(var(--u)*7); line-height: 1.45; text-shadow: 0 0 4px rgba(210,248,255,.5), 0 0 22px rgba(14,178,226,.7); }
.step-hint { font-size: calc(var(--u)*3.4); margin-top: calc(var(--u)*1.6); color: #d6efff; text-align: center; }
body.light .step h3 { text-shadow: 0 0 18px rgba(255,255,255,.95), 0 0 4px rgba(255,255,255,.9); }
body.light .step-hint { color: #17406e; text-shadow: 0 0 12px rgba(255,255,255,.9); }

.stars { display: flex; gap: calc(var(--u)*1.6); margin-top: calc(var(--u)*11); direction: rtl; }
.star-btn { position: relative; width: calc(var(--u)*16.4); height: calc(var(--u)*16.4); border: 0; background: none; cursor: pointer; padding: 0; transition: transform .25s cubic-bezier(.3,1.6,.4,1); }
.star-btn svg { width: 100%; height: 100%; overflow: visible; }
.star-btn .sh { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.6); stroke-width: 1; stroke-linejoin: round; transition: fill .3s, stroke .3s, filter .3s; }
.star-btn.on .sh { fill: url(#gStarBig); stroke: #fff; filter: drop-shadow(0 0 calc(var(--u)*1.4) rgba(255,214,90,.95)) drop-shadow(0 0 calc(var(--u)*3.6) rgba(255,200,60,.55)); }
.star-btn:active { transform: scale(.88); }
.star-btn.pop { animation: starpop .55s cubic-bezier(.3,1.6,.4,1); }
@keyframes starpop { 0% { transform: scale(.7) rotate(-14deg); } 100% { transform: scale(1) rotate(0); } }
body.light .star-btn .sh { fill: rgba(255,255,255,.55); stroke: rgba(11,42,85,.4); }
body.light .star-btn.on .sh { fill: url(#gStarBig); stroke: #fff; filter: drop-shadow(0 0 calc(var(--u)*1.2) rgba(255,170,30,.8)); }
.burst { position: fixed; width: calc(var(--u)*1.3); height: calc(var(--u)*1.3); margin: calc(var(--u)*-.65) 0 0 calc(var(--u)*-.65); border-radius: 50%; pointer-events: none; z-index: 25; background: #fff3b0; box-shadow: 0 0 10px #ffd86b, 0 0 22px #ffb62e; }
.rate-word { height: calc(var(--u)*10); margin-top: calc(var(--u)*7); font-size: calc(var(--u)*7.4); font-weight: 800; color: #ffe27a; text-shadow: 0 0 calc(var(--u)*3) rgba(255,190,50,.7), 0 0 calc(var(--u)*8) rgba(255,190,50,.35); text-align: center; }
body.light .rate-word { color: #c77d00; text-shadow: 0 0 14px rgba(255,255,255,.95); }
#rateContinue { margin-top: calc(var(--u)*7); opacity: 0; pointer-events: none; transition: opacity .4s, filter .2s, scale .2s; }
#rateContinue.show { opacity: 1; pointer-events: auto; }

.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u)*2.6) calc(var(--u)*2.4); margin-top: calc(var(--u)*8); width: 100%; }
.tag {
  font-family: inherit; font-size: calc(var(--u)*3.8); font-weight: 500; color: inherit; cursor: pointer; border: 0;
  padding: calc(var(--u)*3) calc(var(--u)*5.4); border-radius: 99px; position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.08)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); -webkit- transition: scale .2s, background .3s, box-shadow .3s, color .3s;
}
.tag:active { scale: .94; }
.tag.on { color: #fff; background: linear-gradient(135deg, #1fc3ee, #125daa); box-shadow: inset 0 0 0 1.5px rgba(200,248,255,.8), 0 0 calc(var(--u)*4) rgba(14,178,226,.7); }
.tag.on::before { content: "✓"; margin-left: calc(var(--u)*1.6); font-weight: 800; }
body.light .tag { background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1.5px rgba(11,42,85,.18), 0 4px 14px rgba(11,42,85,.1); }
body.light .tag.on { color: #fff; background: linear-gradient(135deg, #1fc3ee, #125daa); box-shadow: inset 0 0 0 1.5px #fff, 0 0 18px rgba(14,178,226,.6); }
.step-actions { margin-top: calc(var(--u)*9); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u)*2); }

.thanks-art { position: relative; width: calc(var(--u)*40); height: calc(var(--u)*40); margin-top: calc(var(--u)*6); }
.thanks-art svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.thanks-art .tr { stroke: #7fe9ff; stroke-width: 3; stroke-dasharray: 290; stroke-dashoffset: 290; filter: drop-shadow(0 0 8px #0eb2e2) drop-shadow(0 0 20px #0eb2e2); }
.thanks-art .tc { stroke: #fff; stroke-width: 6; stroke-dasharray: 80; stroke-dashoffset: 80; filter: drop-shadow(0 0 8px #fff); }
.thanks-art::before { content: ""; position: absolute; inset: -25%; border-radius: 50%; background: radial-gradient(closest-side, rgba(14,178,226,.5), rgba(14,178,226,0) 70%); animation: halo 4s ease-in-out infinite; }
.step[data-step="3"].on .tr { animation: dash .9s ease-out .1s forwards; }
.step[data-step="3"].on .tc { animation: dash .6s ease-out .8s forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }
body.light .thanks-art .tc { stroke: #125daa; filter: drop-shadow(0 0 6px #fff); }
.thanks-stars { display: flex; gap: calc(var(--u)*1.4); margin-top: calc(var(--u)*5); direction: rtl; }
.thanks-stars svg { width: calc(var(--u)*6.4); height: calc(var(--u)*6.4); }
.thanks-stars .sh { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.5); stroke-width: 1; stroke-linejoin: round; }
.thanks-stars .on .sh { fill: url(#gStarBig); stroke: #fff; filter: drop-shadow(0 0 6px rgba(255,214,90,.9)); }
#thanksBack { margin-top: calc(var(--u)*8); }
.countdown { width: calc(var(--u)*30); height: 3px; border-radius: 3px; margin-top: calc(var(--u)*4.4); background: rgba(255,255,255,.2); overflow: hidden; }
.countdown i { display: block; height: 100%; width: 100%; background: linear-gradient(270deg, #45bed1, #0eb2e2); box-shadow: 0 0 8px #0eb2e2; transform-origin: right; }
body.light .countdown { background: rgba(11,42,85,.15); }
.steps-dots { display: flex; gap: calc(var(--u)*2); margin: calc(var(--u)*2) 0 5.4vh; }
.steps-dots i { width: calc(var(--u)*2.2); height: calc(var(--u)*2.2); border-radius: 50%; background: rgba(255,255,255,.3); transition: all .4s; }
.steps-dots i.on { width: calc(var(--u)*7); border-radius: 99px; background: #0eb2e2; box-shadow: 0 0 12px #0eb2e2; }
body.light .steps-dots i { background: rgba(11,42,85,.22); }
body.light .steps-dots i.on { background: #125daa; box-shadow: 0 0 10px rgba(14,178,226,.8); }
body.light .thanks-stars .sh { fill: rgba(255,255,255,.6); stroke: rgba(11,42,85,.35); }
body.light .thanks-stars .on .sh { fill: url(#gStarBig); stroke: #fff; }
@media (prefers-reduced-motion: reduce) { .hero-orb, .hero-orb svg *, .hero .spark, .halo { animation: none !important; } }

/* ---------- light mode for weaker machines (switched on automatically by the quality governor) ---------- */
body.lowfx * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lowfx #fx { mix-blend-mode: normal; opacity: .8; }
body.lowfx .halo, body.lowfx .orb::before { display: none; }
body.lowfx .ring, body.lowfx .gyro .r3 { animation-duration: 12s; }
body.lowfx .art *, body.lowfx .spark { animation-play-state: paused; }

/* =====================================================================
   OUR STORY v2 — cinematic slides
   ===================================================================== */
#story .scr-head { margin-top: calc(var(--u)*2.6); }
#story .scr-head h2 { font-size: calc(var(--u)*6.6); }
#story .scr-head small { font-size: calc(var(--u)*3); }
#story .rail { margin-top: calc(var(--u)*3.6); }
.chap { justify-content: center; }
.kick { display: inline-flex; align-items: center; gap: calc(var(--u)*2.4); font-size: calc(var(--u)*3); font-weight: 500; letter-spacing: .06em; color: var(--teal); text-shadow: 0 0 10px rgba(69,190,209,.8); }
.kick i { width: calc(var(--u)*7); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #45bed1); }
.kick i:last-child { transform: scaleX(-1); }
.chap .hl { font-size: calc(var(--u)*8.6); font-weight: 800; line-height: 1.32; margin-top: calc(var(--u)*2.2); text-align: center; width: 96%;
  text-shadow: 0 0 4px rgba(210,248,255,.45), 0 0 24px rgba(14,178,226,.65), 0 4px 30px rgba(0,0,0,.35); }
.chap .hl .w { display: inline-block; }
.chap > p.body { font-size: calc(var(--u)*3.6); line-height: 1.85; width: 90%; margin-top: calc(var(--u)*3); color: #dcf1ff; text-align: center; text-shadow: 0 1px 12px rgba(2,10,30,.5); }
.chap > p.body.sm { font-size: calc(var(--u)*3.4); margin-top: calc(var(--u)*1.6); }
.badge { margin-top: calc(var(--u)*3.4); font-size: calc(var(--u)*3); font-weight: 500; padding: calc(var(--u)*1.6) calc(var(--u)*4.4); border-radius: 99px; color: #eaffff;
  background: rgba(14,178,226,.28); box-shadow: inset 0 0 0 1.5px rgba(120,235,255,.6), 0 0 calc(var(--u)*3) rgba(14,178,226,.45); }

.vis { position: relative; flex: none; margin-bottom: calc(var(--u)*3); }
/* prologue: a network that loses its outer links while the core keeps shining */
.vis.sig { width: calc(var(--u)*46); height: calc(var(--u)*46); }
.sig svg { width: 100%; height: 100%; overflow: visible; }
.sig .sp { stroke: rgba(150,240,255,.7); stroke-width: .7; animation: cut 4.4s ease-in-out infinite; }
.sig .sn { fill: #8ff0ff; animation: cut 4.4s ease-in-out infinite; }
.sig .pr { fill: none; stroke: #7fe9ff; stroke-width: .7; transform-box: fill-box; transform-origin: center; animation: sigp 3.2s ease-out infinite; }
.sig .pr.p2 { animation-delay: -1.6s; }
.sig .core { animation: corepulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sig .core circle { stroke: #fff; stroke-width: 1.2; }
@keyframes cut { 0%,18% { opacity: 1; } 30%,62% { opacity: .08; } 78%,100% { opacity: 1; } }
@keyframes sigp { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.3); opacity: 0; } }
@keyframes corepulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
/* logo assembling (idea + epilogue) */
.vis.logo { width: calc(var(--u)*52); height: calc(var(--u)*32.700); margin-top: calc(var(--u)*1); }
.vis.logo .glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(14,178,226,.5), rgba(18,93,170,.22) 45%, transparent 75%); animation: halo 5s ease-in-out infinite; }
.vis.logo img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: mk-in 1.4s cubic-bezier(.2,.9,.2,1) forwards, mk-float 6s ease-in-out 1.6s infinite; }
.vis.logo img:nth-of-type(1) { --fx: calc(var(--u)*-8); animation-delay: .1s, 1.6s; }
.vis.logo img:nth-of-type(2) { --fx: 0px; animation-delay: .35s, 2.1s; }
.vis.logo img:nth-of-type(3) { --fx: calc(var(--u)*8); animation-delay: .6s, 2.6s; }
/* Yemen map */
.vis.map { width: calc(var(--u)*92); height: calc(var(--u)*53); }
.map svg { width: 100%; height: 100%; overflow: visible; }
.map .gl { fill: none; stroke: rgba(14,178,226,.35); stroke-width: 2.4; stroke-linejoin: round; }
.map .fl { fill: rgba(14,178,226,.14); stroke: none; }
.map .gv { fill: none; stroke: rgba(130,235,255,.4); stroke-width: .22; }
.map .ol { fill: none; stroke: #c6f8ff; stroke-width: .5; stroke-linejoin: round; }
.map .arc { fill: none; stroke: rgba(170,246,255,.8); stroke-width: .3; stroke-dasharray: 1.2 2.4; animation: arcflow 2.4s linear infinite; }
.map .cty { fill: #fff; transform-box: fill-box; transform-origin: center; animation: twinkle2 3s ease-in-out infinite; }
.map .sr { fill: none; stroke: #8ff0ff; stroke-width: .5; transform-box: fill-box; transform-origin: center; animation: ringexp 3.2s ease-out infinite; }
.map .sr.r2 { animation-delay: -1.6s; }
.map .sc { fill: #fff; }
@keyframes arcflow { to { stroke-dashoffset: -7.200; } }
@keyframes twinkle2 { 0%,100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.5); } }
@keyframes ringexp { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(9); opacity: 0; } }

/* glass cards */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*3); width: 100%; margin-top: calc(var(--u)*4); }
.gcard { position: relative; border-radius: calc(var(--u)*4); padding: calc(var(--u)*3.4);
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), 0 calc(var(--u)*1.6) calc(var(--u)*4) rgba(2,10,30,.3); }
.gcard b { display: block; font-weight: 800; }
.gcard p { line-height: 1.6; color: #d6efff; }
.ico { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ic { width: calc(var(--u)*10); height: calc(var(--u)*10); flex: none; }
.ico .led { fill: #fff; stroke: none; animation: blink 2.2s ease-in-out infinite; } .ico .led.l2 { animation-delay: -.7s; } .ico .led.l3 { animation-delay: -1.4s; }
.ico .spin { transform-origin: 32px 32px; animation: spin 9s linear infinite; }
.ico .mer { transform-origin: 32px 32px; animation: mer 4.5s ease-in-out infinite alternate; }
.ico .needle { transform-origin: 32px 32px; animation: needle 6s ease-in-out infinite; }
.ico .pop { transform-box: fill-box; transform-origin: center; animation: pop 3.2s ease-in-out infinite; } .ico .pop.p2 { animation-delay: -.8s; } .ico .pop.p3 { animation-delay: -1.6s; } .ico .pop.p4 { animation-delay: -2.4s; }
.ico .draw { stroke-dasharray: 60; animation: draw 3.4s ease-in-out infinite; }
@keyframes needle { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(25deg); } }
.pil, .val { display: flex; flex-direction: column; gap: calc(var(--u)*1.2); min-height: calc(var(--u)*27); }
.pil b, .val b { font-size: calc(var(--u)*5.2); margin-top: calc(var(--u)*.6); }
.pil p, .val p { font-size: calc(var(--u)*2.8); }
.pil .no { position: absolute; left: calc(var(--u)*3.4); top: calc(var(--u)*2.6); font-size: calc(var(--u)*3); font-weight: 700; letter-spacing: .08em; color: var(--teal); direction: ltr; }
.pil::before { content: ""; position: absolute; right: 0; top: 16%; bottom: 16%; width: calc(var(--u)*.8); border-radius: 4px; background: linear-gradient(180deg, #45bed1, #0eb2e2); box-shadow: 0 0 10px #0eb2e2; }

/* numbers */
.ringstat { position: relative; width: calc(var(--u)*34); height: calc(var(--u)*34); margin-top: calc(var(--u)*4); }
.ringstat svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ringstat .rb { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 5; }
.ringstat .rf { fill: none; stroke: #0eb2e2; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 4px #0eb2e2); }
.rv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u)*.6); }
.rv b { font-size: calc(var(--u)*8.6); font-weight: 800; direction: ltr; text-shadow: 0 0 20px rgba(14,178,226,.8); }
.rv small { font-size: calc(var(--u)*3); color: #d6efff; }
.nums { margin-top: calc(var(--u)*3.4); }
.num { text-align: center; padding: calc(var(--u)*2.6) calc(var(--u)*2); }
.num b { font-size: calc(var(--u)*8); direction: ltr; text-shadow: 0 0 18px rgba(14,178,226,.7); }
.num small { font-size: calc(var(--u)*3); color: #d6efff; }

/* services */
.stack { display: flex; flex-direction: column; gap: calc(var(--u)*2); width: 100%; margin-top: calc(var(--u)*3.6); }
.grp { display: flex; align-items: center; gap: calc(var(--u)*3.4); padding: calc(var(--u)*2.2) calc(var(--u)*3.4); }
.grp b { font-size: calc(var(--u)*4); }
.tags2 { display: flex; flex-wrap: wrap; gap: calc(var(--u)*1.2); margin-top: calc(var(--u)*1.2); direction: rtl; }
.tags2 span { direction: ltr; font-size: calc(var(--u)*2.4); font-weight: 700; padding: calc(var(--u)*.5) calc(var(--u)*1.8); border-radius: 99px; color: #e9fcff; background: rgba(14,178,226,.28); box-shadow: inset 0 0 0 1px rgba(120,235,255,.5); }
.val .ic { width: calc(var(--u)*9); height: calc(var(--u)*9); }

/* ---- light theme ---- */
body.light .kick { color: #1572b8; text-shadow: 0 0 12px rgba(255,255,255,.9); }
body.light .chap .hl { text-shadow: 0 0 18px rgba(255,255,255,.95), 0 0 4px rgba(255,255,255,.9); }
body.light .chap > p.body { color: #17406e; text-shadow: 0 0 14px rgba(255,255,255,.95); }
body.light .badge { color: #0b4a86; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1.5px rgba(18,93,170,.35); }
body.light .gcard { background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.6)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 6px 20px rgba(11,42,85,.13); }
body.light .gcard p, body.light .rv small, body.light .num small { color: #24507e; }
body.light .ico { stroke: #0b4a86; } body.light .ico .led { fill: #0b4a86; }
body.light .pil .no { color: #1572b8; }
body.light .tags2 span { color: #0b4a86; background: rgba(14,178,226,.16); box-shadow: inset 0 0 0 1px rgba(18,93,170,.3); }
body.light .ringstat .rb { stroke: rgba(11,42,85,.14); } body.light .ringstat .rf { stroke: #125daa; filter: none; }
body.light .rv b, body.light .num b { text-shadow: 0 0 16px rgba(255,255,255,.95); }
body.light .sig .sp { stroke: rgba(18,93,170,.6); } body.light .sig .sn { fill: #125daa; } body.light .sig .pr { stroke: #125daa; }
body.light .map .gl { stroke: rgba(18,93,170,.3); } body.light .map .fl { fill: rgba(14,178,226,.2); } body.light .map .gv { stroke: rgba(18,93,170,.4); }
body.light .map .ol { stroke: #0b4a86; } body.light .map .arc { stroke: rgba(18,93,170,.8); } body.light .map .cty, body.light .map .sc { fill: #125daa; } body.light .map .sr { stroke: #125daa; }
@media (prefers-reduced-motion: reduce) { .sig *, .map *, .ico *, .vis.logo img { animation: none !important; } .vis.logo img { opacity: 1; } }
body.lowfx .map .arc { animation-play-state: paused; }

/* dense slides: a little smaller headline so everything breathes */
.k-pillars .hl, .k-services .hl, .k-values .hl, .k-numbers .hl { font-size: calc(var(--u)*7); line-height: 1.3; margin-top: calc(var(--u)*1.6); }
.k-services .stack { gap: calc(var(--u)*1.6); margin-top: calc(var(--u)*3); }
.k-services .grp { padding: calc(var(--u)*1.8) calc(var(--u)*3.4); }
.k-pillars .grid2, .k-values .grid2 { margin-top: calc(var(--u)*3.2); }