/* ================================================================
   PROTO HERO — full-viewport video hero.
   Everything is scoped to .ph and prefixed ph- so it neither leaks
   into the site nor picks up the site's global h1/footer/.arrow rules.
   Layout uses logical properties, so the one composition serves
   Arabic (RTL, mirrored) and English (LTR, the original geometry).
   Sizes are driven by the small viewport height (svh) rather than
   dvh: this hero now sits on a scrolling page, where dvh would resize
   it every time the mobile URL bar shows or hides.
   ================================================================ */

/* ---------- tokens + scale ---------- */
.ph{
  --ink:#ffffff;  --sub:#a2a9b8;  --nav:#fbfdff;  --foot:#f4f8fd;
  --hair:rgba(196,214,232,.72);   --chev:rgba(214,232,250,.90);
  --navdim:#e8ecf0;               --feat:#e2ebf5;
  --veil:6,10,18;                 --ph-cyan:#22D3EE;

  --cover:max(calc(100vw / 1536), calc(100vh / 1024));
  --fit:calc(100vh / 910);
  --u:min(var(--cover), var(--fit));
  --blur:calc(var(--u)*26);
  --glow:calc(var(--u)*34);
  --hairline:max(1px, calc(var(--u)*1.6));
  --nudge:1;                      /* +1 RTL, -1 LTR: CTA label offset away from the arrow */

  position:relative;height:100vh;overflow:hidden;isolation:isolate;
  background:#02060f;color:var(--ink);text-align:start;line-height:normal;
  font-family:'Sora','Alexandria',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}
section.ph{padding:0}
html[dir="ltr"] .ph{--nudge:-1}
@supports (height:100svh){
  .ph{--cover:max(calc(100vw / 1536), calc(100svh / 1024));
      --fit:calc(100svh / 910);height:100svh}
}
.ph a{color:inherit;text-decoration:none}
.ph li{list-style:none}
.ph a:focus-visible,.ph button:focus-visible{outline:2px solid #9fe0ff;outline-offset:3px;border-radius:4px}
.ph .ph-foot{border-top:0;padding:0;font-size:inherit}

/* ---------- background ---------- */
.ph-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
        object-position:50% 50%;z-index:0;user-select:none;
        -webkit-user-drag:none;pointer-events:none;background:#03060c}
.ph-veil{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(140% 60% at 50% 40%,
        rgba(var(--veil),.16) 0%, rgba(var(--veil),.057) 50%,
        rgba(var(--veil),0) 100%),
    linear-gradient(180deg, rgba(var(--veil),0) 45%,
        rgba(var(--veil),.10) 100%);}
.ph-main,.ph-foot{position:absolute;z-index:1}
/* RTL: directional glyphs point the reading way */
html[dir="rtl"] .ph-cta .ph-arrow{transform:scaleX(-1)}
#ph-foot1{font-variation-settings:'wght' 460;color:rgba(226,232,244,.62)}

/* ---------- entrance: one timeline, starts when the preloader lifts ---------- */
@media (prefers-reduced-motion:no-preference){
  .ph{
    --ent-line:cubic-bezier(.16,1,.3,1);
    --ent-soft:cubic-bezier(.25,.8,.35,1);
    --rise:9px;
  }
  @keyframes ph-wipe{
    from{clip-path:inset(-.78em 0 calc(100% + .78em) 0);translate:0 var(--rise)}
    to  {clip-path:inset(-.78em 0 -.78em 0);translate:0 0}}
  @keyframes ph-lift{from{opacity:0;translate:0 var(--rise)}}
  @keyframes ph-settle{from{opacity:0;translate:0 calc(var(--rise)*.7);scale:.99}}
  html.pll-done:not(.ph-entered) .ph-kicker{animation:ph-settle .70s var(--ent-soft) .24s backwards}
  html.pll-done:not(.ph-entered) #ph-h1a{animation:ph-wipe .95s var(--ent-line) .34s backwards}
  html.pll-done:not(.ph-entered) #ph-h1b{animation:ph-wipe .95s var(--ent-line) .46s backwards}
  html.pll-done:not(.ph-entered) .ph-sub{animation:ph-lift .70s var(--ent-soft) .70s backwards}
  html.pll-done:not(.ph-entered) .ph-services{animation:ph-lift .70s var(--ent-soft) 1.10s backwards}
  html.pll-done:not(.ph-entered) .ph-cta{animation:ph-lift .80s var(--ent-line) .86s backwards}
  html.pll-done:not(.ph-entered) .ph-ghost{animation:ph-lift .80s var(--ent-line) .96s backwards}
  html.pll-done:not(.ph-entered) #ph-foot1{animation:ph-lift .70s var(--ent-soft) 1.30s backwards}
}

/* ---------- A. LOCKED COMPOSITION (desktop) ----------
   The 1536x1024 artboard. Logical insets: in Arabic the brand anchors on the
   right and every box is mirrored (x' = 1536 - x - w); in English the original
   coordinates apply unchanged. */
@media (min-width:1200px) and (min-height:560px) and (min-aspect-ratio:100/95){
    .ph-main,.ph-foot{left:50%;width:calc(var(--u)*1536);transform:translateX(-50%)}
  .ph-foot{bottom:0;height:calc(var(--u)*140)}
  .ph-main{top:50%;height:calc(var(--u)*1024);transform:translate(-50%,-50%)}
    .ph-foot > *{position:absolute}
    .ph-foot span{
    position:absolute;line-height:0;white-space:nowrap}

  #ph-foot1{left:0;right:0;bottom:calc(var(--u)*70);font-size:calc(var(--u)*12.5);
    display:flex;justify-content:center;align-items:center;gap:calc(var(--u)*14)}
}

/* ---------- B. FLOW (tablet to phone) ---------- */
@media (max-width:1199px),(max-height:559px),(max-aspect-ratio:100/95){
  .ph{--c:min(calc(100vw / 430), calc(100vh / 860));display:flex;flex-direction:column}
  section.ph{padding:calc(env(safe-area-inset-top) + 64px + calc(var(--c)*24)) calc(var(--c)*22)
                     calc(env(safe-area-inset-bottom) + calc(var(--c)*22))}
    .ph-main,.ph-foot{position:static;width:100%}

  .ph-main{order:2;flex:1;display:flex;flex-direction:column;align-items:center;
           justify-content:center;text-align:center;gap:calc(var(--c)*20)}
  .ph .ph-foot{order:3;text-align:center;color:var(--foot);
               font-size:calc(var(--c)*13);line-height:1.7}
  .ph-foot span{display:block}

  /* --- B1. phone canvas --- */
  @media (max-width:599px),(max-height:429px){
    .ph{--c:min(calc(100vw / 360), calc(100vh / 770), 1px);--rise:6px}
    section.ph{padding:calc(env(safe-area-inset-top) + 64px + calc(var(--c)*28)) calc(var(--c)*26)
                       calc(env(safe-area-inset-bottom) + calc(var(--c)*26))}

    .ph-veil{background:
      radial-gradient(130% 44% at 50% 45%,
          rgba(var(--veil),.50) 0%, rgba(var(--veil),.26) 55%,
          rgba(var(--veil),0) 100%),
      linear-gradient(180deg,
          rgba(var(--veil),.34) 0%, rgba(var(--veil),0) 20%,
          rgba(var(--veil),0) 60%, rgba(var(--veil),.36) 100%)}

    .ph-main{gap:calc(var(--c)*22)}
    .ph .ph-foot{font-size:calc(var(--c)*13.5);line-height:1.75;text-wrap:balance}
  }

  /* --- landscape phones --- */
  @media (max-height:429px) and (min-aspect-ratio:1/1){
    .ph{--c:min(calc(100vw / 760), calc(100vh / 430))}
    .ph-main{gap:calc(var(--c)*12)}
    .ph .ph-foot{font-size:calc(var(--c)*13)}
    /* the narrow V of strands crosses the support copy here */
    .ph-veil{background:
      radial-gradient(72% 56% at 50% 42%,
          rgba(var(--veil),.74) 0%, rgba(var(--veil),.44) 55%,
          rgba(var(--veil),0) 100%),
      linear-gradient(180deg,
          rgba(var(--veil),.30) 0%, rgba(var(--veil),0) 22%,
          rgba(var(--veil),0) 70%, rgba(var(--veil),.32) 100%)}
  }

  /* --- B2. tablet canvas --- */
  @media (min-width:600px) and (min-height:430px){
    .ph{--c:min(calc(100vw / 860), calc(100vh / 1120))}
    section.ph{padding:calc(env(safe-area-inset-top) + 64px + calc(var(--c)*40)) calc(var(--c)*44)
                       calc(env(safe-area-inset-bottom) + calc(var(--c)*36))}
    .ph-main{gap:calc(var(--c)*26)}
    .ph .ph-foot{font-size:calc(var(--c)*16)}

    /* portrait tablets: the strands cross the support copy and feature row */
    @media (max-aspect-ratio:1/1){
      .ph-veil{background:
        radial-gradient(120% 34% at 50% 47%,
            rgba(var(--veil),.55) 0%, rgba(var(--veil),.30) 55%,
            rgba(var(--veil),0) 100%),
        linear-gradient(180deg,
            rgba(var(--veil),.30) 0%, rgba(var(--veil),0) 18%,
            rgba(var(--veil),0) 70%, rgba(var(--veil),.32) 100%)}
    }
    @media (min-aspect-ratio:1/1){
      .ph{--c:min(calc(100vw / 1040), calc(100vh / 780))}
      .ph-veil{background:
        radial-gradient(62% 46% at 50% 46%,
            rgba(var(--veil),.58) 0%, rgba(var(--veil),.32) 55%,
            rgba(var(--veil),0) 100%),
        linear-gradient(180deg, rgba(var(--veil),0) 45%,
            rgba(var(--veil),.10) 100%)}
    }
  }
}

/* ---------- small-viewport override (mobile browser chrome) ---------- */
@supports (height:100svh){
  @media (max-width:1199px),(max-height:559px),(max-aspect-ratio:100/95){
    .ph{--c:min(calc(100vw / 430), calc(100svh / 860))}
    @media (max-width:599px),(max-height:429px){
      .ph{--c:min(calc(100vw / 360), calc(100svh / 770), 1px)}}
    @media (max-height:429px) and (min-aspect-ratio:1/1){
      .ph{--c:min(calc(100vw / 760), calc(100svh / 430))}}
    @media (min-width:600px) and (min-height:430px){
      .ph{--c:min(calc(100vw / 860), calc(100svh / 1120))}
      @media (min-aspect-ratio:1/1){
        .ph{--c:min(calc(100vw / 1040), calc(100svh / 780))}}}
  }
}

/* ================================================================
   HERO COPY BLOCK — kicker, headline, service chips, support line,
   primary + secondary actions. One centred column in every layout;
   every size is a multiple of --k (the desktop artboard unit --u, or
   the flow canvas unit --c), so the block scales without reflowing.
   ================================================================ */
@property --ph-a{syntax:'<angle>';inherits:false;initial-value:0deg}

.ph-main{--k:calc(var(--u)*.84);--h1:calc(var(--u)*32);--sub:calc(var(--u)*15.5)}
html[lang="en"] .ph-main{--h1:calc(var(--u)*30)}

/* kicker: a lit glass tag above the headline */
.ph-kicker{display:inline-flex;align-items:center;gap:calc(var(--k)*10);
  padding:calc(var(--k)*7) calc(var(--k)*16) calc(var(--k)*7) calc(var(--k)*12);
  border-radius:999px;font-size:calc(var(--k)*13);line-height:1.2;color:#dfe7f4;
  font-variation-settings:'wght' 520;
  background:linear-gradient(90deg,rgba(99,102,241,.24),rgba(59,130,246,.10) 70%,rgba(59,130,246,.04));
  border:1px solid rgba(165,180,252,.30);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);backdrop-filter:blur(var(--blur)) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 calc(var(--k)*10) calc(var(--k)*30) calc(var(--k)*-14) rgba(99,102,241,.8)}
html[dir="rtl"] .ph-kicker{padding:calc(var(--k)*7) calc(var(--k)*12) calc(var(--k)*7) calc(var(--k)*16)}
html[lang="en"] .ph-kicker{letter-spacing:.06em;text-transform:uppercase;font-size:calc(var(--k)*11.5)}
.ph-kicker-dot{position:relative;flex:none;width:calc(var(--k)*7);height:calc(var(--k)*7);border-radius:50%;
  background:#8b9cff;box-shadow:0 0 calc(var(--k)*10) #818cf8}
.ph-kicker-dot::after{content:'';position:absolute;inset:calc(var(--k)*-4);border-radius:50%;
  border:1px solid rgba(129,140,248,.6);animation:ph-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes ph-ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}

/* headline: two set lines; the second carries a slow light sweep */
.ph .ph-title{font-size:var(--h1);line-height:1.22;letter-spacing:0;font-weight:inherit;margin:0;max-width:none}
html[lang="en"] .ph .ph-title{line-height:1.1;letter-spacing:-.022em}
.ph-title > span{display:block}
#ph-h1a,#ph-h1b{font-variation-settings:'wght' 600;color:#fff}

/* service chips: what we build, each with its own accent */
.ph-services{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--k)*10);margin:0;padding:0}
.ph-services li{display:inline-flex;align-items:center;gap:calc(var(--k)*9);
  padding:calc(var(--k)*9) calc(var(--k)*15);border-radius:calc(var(--k)*14);
  font-size:calc(var(--k)*14.5);line-height:1.2;color:#e9eef7;font-variation-settings:'wght' 500;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);backdrop-filter:blur(var(--blur)) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 calc(var(--k)*14) calc(var(--k)*30) calc(var(--k)*-16) rgba(0,0,0,.75);
  transition:border-color .3s ease,background .3s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.ph-services li:hover{border-color:rgba(255,255,255,.26);transform:translateY(-2px)}
.ph-services .ph-ico{flex:none;display:grid;place-items:center;
  width:calc(var(--k)*26);height:calc(var(--k)*26);border-radius:calc(var(--k)*8);
  background:var(--ico-bg);box-shadow:inset 0 0 0 1px var(--ico-line)}
.ph-services svg{width:calc(var(--k)*15);height:calc(var(--k)*15);fill:none;stroke:var(--ico);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ph-services li:nth-child(1){--ico:#b4bdff;--ico-bg:rgba(99,102,241,.20);--ico-line:rgba(129,140,248,.35)}
.ph-services li:nth-child(2){--ico:#a9c8ff;--ico-bg:rgba(59,130,246,.20);--ico-line:rgba(96,165,250,.36)}
.ph-services li:nth-child(3){--ico:#d4c4ff;--ico-bg:rgba(139,92,246,.20);--ico-line:rgba(167,139,250,.35)}

.ph-sub{margin:0;font-size:var(--sub);line-height:1.6;color:#b9c2d0;font-variation-settings:'wght' 420;text-wrap:balance;
  text-shadow:0 1px calc(var(--k)*14) rgba(2,6,15,.85)}

/* actions */
.ph-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:calc(var(--k)*14)}

/* primary: indigo core, a travelling light around the rim, white arrow disc */
.ph-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;
  gap:calc(var(--k)*16);height:calc(var(--k)*56);
  padding-inline:calc(var(--k)*28) calc(var(--k)*8);border-radius:999px;
  color:#fff;font-size:calc(var(--k)*17);line-height:1;white-space:nowrap;
  background:
    radial-gradient(120% 140% at 20% 0%,rgba(255,255,255,.22),transparent 55%),
    linear-gradient(135deg,#7477F8 0%,#5B5EEE 42%,#4646D9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(10,12,40,.35),
             0 calc(var(--k)*20) calc(var(--k)*44) calc(var(--k)*-16) rgba(99,102,241,.95),
             0 0 calc(var(--k)*70) rgba(129,140,248,.18);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease}
.ph-cta::before{content:'';position:absolute;inset:calc(var(--k)*-2);border-radius:inherit;z-index:-1;
  padding:calc(var(--k)*2);
  background:conic-gradient(from var(--ph-a),rgba(255,255,255,0) 0deg,rgba(103,232,249,.0) 40deg,
    #93c5fd 80deg,#ffffff 100deg,#a78bfa 125deg,rgba(167,139,250,0) 170deg,rgba(255,255,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:ph-orbit 4.5s linear infinite}
.ph-cta::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.30) 50%,transparent 65%);
  background-size:260% 100%;background-position:130% 0;transition:background-position .9s cubic-bezier(.16,1,.3,1)}
@keyframes ph-orbit{to{--ph-a:360deg}}
.ph-cta:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(10,12,40,.35),
             0 calc(var(--k)*26) calc(var(--k)*52) calc(var(--k)*-16) rgba(99,102,241,1),
             0 0 calc(var(--k)*90) rgba(129,140,248,.26)}

.ph-cta:active{transform:translateY(0) scale(.985)}
#ph-cta{font-variation-settings:'wght' 620;color:#fff}
.ph-cta-icon{flex:none;display:grid;place-items:center;
  width:calc(var(--k)*40);height:calc(var(--k)*40);border-radius:50%;
  background:linear-gradient(180deg,#ffffff,#e9edff);
  box-shadow:0 calc(var(--k)*4) calc(var(--k)*14) rgba(20,22,70,.45),inset 0 -1px 0 rgba(70,70,217,.18);
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.ph-cta .ph-arrow{width:calc(var(--k)*16);height:calc(var(--k)*11);fill:none;stroke:#4F46E5;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ph-cta:hover .ph-cta-icon{transform:translateX(calc(var(--k)*-4*var(--nudge)))}

/* secondary: quiet glass with an underline that draws in */
.ph-ghost{position:relative;display:inline-flex;align-items:center;gap:calc(var(--k)*9);
  height:calc(var(--k)*56);padding-inline:calc(var(--k)*24);border-radius:999px;
  color:#e8eef8;font-size:calc(var(--k)*16);line-height:1;white-space:nowrap;font-variation-settings:'wght' 520;
  background:rgba(8,12,26,.38);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);backdrop-filter:blur(var(--blur)) saturate(1.3);
  transition:background .3s ease,border-color .3s ease}
.ph-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.30)}
.ph-ghost svg{width:calc(var(--k)*14);height:calc(var(--k)*14);fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.16,1,.3,1)}
html[dir="rtl"] .ph-ghost svg{transform:scaleX(-1)}
.ph-ghost:hover svg{transform:translate(calc(var(--k)*2),calc(var(--k)*-2))}
html[dir="rtl"] .ph-ghost:hover svg{transform:scaleX(-1) translate(calc(var(--k)*2),calc(var(--k)*-2))}

/* ---------- desktop: the column sits in the footage's dark arch ---------- */
@media (min-width:1200px) and (min-height:560px) and (min-aspect-ratio:100/95){
  .ph-main{display:flex;flex-direction:column;align-items:center;text-align:center;
           padding-top:calc(var(--u)*176)}
  .ph-kicker{margin-bottom:calc(var(--u)*24)}
  .ph-sub{margin-top:calc(var(--u)*20);max-width:calc(var(--u)*540)}
  .ph-actions{margin-top:calc(var(--u)*32)}
  .ph-services{margin-top:calc(var(--u)*30)}
}

/* ---------- flow layouts ---------- */
@media (max-width:1199px),(max-height:559px),(max-aspect-ratio:100/95){
  .ph-main{--k:calc(var(--c)*.9);--h1:calc(var(--c)*27);--sub:calc(var(--c)*15);gap:0}
  html[lang="en"] .ph-main{--h1:calc(var(--c)*24)}
  .ph-kicker{margin-bottom:calc(var(--c)*20)}
  .ph-sub{margin-top:calc(var(--c)*16);max-width:34ch}
  .ph-actions{margin-top:calc(var(--c)*28)}
  .ph-services{margin-top:calc(var(--c)*26);max-width:none}

  @media (max-width:599px),(max-height:429px){
    .ph-main{--h1:calc(var(--c)*26)}
    html[lang="en"] .ph-main{--h1:calc(var(--c)*23)}
    .ph-services{gap:calc(var(--c)*8)}
    .ph-services li{padding:calc(var(--c)*6) calc(var(--c)*10);font-size:calc(var(--c)*12.5);gap:calc(var(--c)*6)}
    .ph-services .ph-ico{width:calc(var(--c)*20);height:calc(var(--c)*20)}
    .ph-services svg{width:calc(var(--c)*12);height:calc(var(--c)*12)}
    /* stacked, full-width actions are easier to hit with a thumb */
    .ph-actions{flex-direction:column;align-items:stretch;width:min(100%,calc(var(--c)*300));gap:calc(var(--c)*10)}
    .ph-cta{justify-content:space-between;height:calc(var(--c)*50)}
    .ph-ghost{justify-content:center;height:calc(var(--c)*46)}
  }
  @media (max-height:429px) and (min-aspect-ratio:1/1){
    .ph-main{--h1:calc(var(--c)*23)}
    .ph-kicker{display:none}
    .ph-services{margin-top:calc(var(--c)*14);max-width:none}
    .ph-sub{margin-top:calc(var(--c)*10);max-width:none}
    .ph-actions{margin-top:calc(var(--c)*16);flex-direction:row;width:auto}
    .ph-cta,.ph-ghost{height:calc(var(--c)*46)}
  }
  @media (min-width:600px) and (min-height:430px){
    /* tablets: the whole column one step larger than the phone canvas */
    .ph-main{--k:calc(var(--c)*1.12);--h1:calc(var(--c)*40);--sub:calc(var(--c)*19)}
    html[lang="en"] .ph-main{--h1:calc(var(--c)*35)}
    .ph-services{max-width:none}
  }
}

/* ================================================================
   HERO MOTION — rotating service word, logo shine, cursor depth,
   floating chips, self-running button sheen. All of it is switched
   off for visitors who ask for reduced motion (see the end of file).
   ================================================================ */

/* headline accent: the second line carries a slow indigo-to-blue light */
#ph-h1b.ph-accent{color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(100deg,#e0e7ff 0%,#a5b4fc 30%,#93c5fd 55%,#c4b5fd 78%,#e0e7ff 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 calc(var(--k)*6) calc(var(--k)*22) rgba(99,102,241,.45));
  animation:ph-sheen 7s ease-in-out infinite}
@keyframes ph-sheen{0%,100%{background-position:100% 0}50%{background-position:0% 0}}
/* brand label: PROTO, tracked wide */
.ph-kicker--brand{letter-spacing:.34em;font-size:calc(var(--k)*12);font-family:'Sora',sans-serif;font-variation-settings:'wght' 600;
  padding-inline-end:calc(var(--k)*12)}
html[lang="en"] .ph-kicker--brand{letter-spacing:.34em;font-size:calc(var(--k)*12)}
.ph-shine{mix-blend-mode:screen;pointer-events:none}

/* cursor spotlight + depth (desktop pointers only; enabled by hero.js) */
.ph-spot{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s ease;
  background:radial-gradient(calc(var(--u)*520) circle at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%),
    rgba(129,140,248,.16),rgba(99,102,241,.06) 40%,transparent 70%);mix-blend-mode:screen}
.ph.is-pointer .ph-spot{opacity:1}
.ph.is-pointer .ph-art{scale:1.05;
  translate:calc((var(--mx,.5) - .5) * 18px) calc((var(--my,.5) - .5) * 12px);
  transition:translate 1.2s cubic-bezier(.16,1,.3,1),scale 1.2s cubic-bezier(.16,1,.3,1)}
.ph.is-pointer .ph-main > *{
  translate:calc((var(--mx,.5) - .5) * -10px) calc((var(--my,.5) - .5) * -7px);
  transition:translate 1s cubic-bezier(.16,1,.3,1)}

/* chips drift gently, out of step with each other */
@keyframes ph-bob{0%,100%{translate:0 0}50%{translate:0 calc(var(--k)*-4)}}

/* the main button's sheen passes on its own every few seconds */
.ph-cta::after{animation:ph-glint 5.5s cubic-bezier(.4,0,.2,1) 3s infinite}
@keyframes ph-glint{0%{background-position:130% 0}22%,100%{background-position:-30% 0}}

/* ---------- site header over the hero ----------
   Transparent with light ink while the page sits at the top of the hero; the
   normal glass bar returns as soon as the page scrolls (hero.js toggles
   html.nav-clear). The light ink is the dark theme's own tokens, so the bar
   reads on the footage in either site theme. */
.nav{transition:background .4s ease,border-color .4s ease,-webkit-backdrop-filter .4s ease,backdrop-filter .4s ease}
html.nav-clear .nav{background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;color-scheme:dark;
  --text:#fff;--muted:rgba(255,255,255,.80);--faint:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.14);--line-strong:rgba(255,255,255,.26);--line-hover:rgba(255,255,255,.42);
  --fill-3:rgba(255,255,255,.06);--fill-4:rgba(255,255,255,.08);--fill-5:rgba(255,255,255,.14);
  --grad-brand:linear-gradient(120deg,#a5b4fc,#60A5FA);--cyan-ink:#9fe0ff}
html.nav-clear .nav .logo{color:#fff}
/* logo: a light band sweeps the mark every few seconds; glows on hover */
.nav .logo .mark{overflow:visible;transition:filter .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.nav .logo:hover .mark{filter:drop-shadow(0 0 10px rgba(129,140,248,.75));transform:scale(1.06)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ph *,.ph *::before,.ph *::after,.nav{animation:none!important;transition:none!important}
  .ph-shine,.ph-spot{display:none}}

/* ================================================================
   HERO — communication pass
   Headline → statement → actions → capabilities → signature, with small
   product fragments floating in the periphery ("we actually build").
   ================================================================ */

/* statement under the headline: secondary, never competing with it */
.ph-sub{color:#c3cbd8;font-variation-settings:'wght' 400;line-height:1.75}

/* secondary action: clearly quieter than the primary */
.ph-ghost{height:calc(var(--k)*50);padding-inline:calc(var(--k)*18);background:transparent;
  border-color:rgba(255,255,255,.12);color:rgba(232,238,248,.84);font-variation-settings:'wght' 460;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.ph-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.26);color:#fff}

/* capabilities: one compact indicator strip, not three buttons */
.ph-services{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:0;
  padding:calc(var(--k)*4);border-radius:999px;
  background:rgba(8,12,26,.30);border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(calc(var(--blur)*.6)) saturate(1.2);backdrop-filter:blur(calc(var(--blur)*.6)) saturate(1.2)}
.ph-services li{background:none;border:0;box-shadow:none;border-radius:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding:calc(var(--k)*5) calc(var(--k)*14);gap:calc(var(--k)*8);
  font-size:calc(var(--k)*13);color:#cfd7e4;font-variation-settings:'wght' 460;transition:none}
.ph-services li:hover{transform:none;border-color:transparent}
.ph-services li + li{border-inline-start:1px solid rgba(255,255,255,.10)}
.ph-services .ph-ico{width:calc(var(--k)*22);height:calc(var(--k)*22);border-radius:calc(var(--k)*7)}
.ph-services svg{width:calc(var(--k)*13);height:calc(var(--k)*13)}

/* signature at the foot of the hero */
#ph-foot1::before,#ph-foot1::after{content:"";width:calc(var(--k,1px)*28);height:1px;
  background:linear-gradient(90deg,transparent,rgba(165,180,252,.55))}
#ph-foot1::after{background:linear-gradient(90deg,rgba(165,180,252,.55),transparent)}

/* ---------- floating product fragments ----------
   Dark glass, hairline borders, low opacity. Each sits in an empty corner of
   the composition, outside the copy column. The wrapper carries the cursor
   parallax (translate), the card carries the slow drift (its own translate),
   the entrance uses transform, so none of them fight. */
.ph-float{position:absolute;z-index:1;pointer-events:none;--pk:var(--u)}
.pf-wrap{position:absolute;transition:translate 1.4s cubic-bezier(.16,1,.3,1)}
.pf-card{position:relative;overflow:hidden;color:#dbe3f1;text-align:start;
  border-radius:calc(var(--pk)*14);padding:calc(var(--pk)*12) calc(var(--pk)*13);
  background:linear-gradient(180deg,rgba(18,22,44,.62),rgba(8,11,26,.52));
  border:1px solid rgba(165,180,252,.16);
  -webkit-backdrop-filter:blur(calc(var(--pk)*10)) saturate(1.3);backdrop-filter:blur(calc(var(--pk)*10)) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 calc(var(--pk)*24) calc(var(--pk)*48) calc(var(--pk)*-22) rgba(0,0,0,.85),
             0 0 calc(var(--pk)*40) calc(var(--pk)*-12) rgba(99,102,241,.35);
  opacity:.72}
.pf-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 0% 0%,rgba(129,140,248,.16),transparent 60%);opacity:.6}
.pf-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--pk)*8);
  font-size:calc(var(--pk)*10);color:rgba(219,227,241,.75);line-height:1.2}
.pf-brand{display:inline-flex;align-items:center;gap:calc(var(--pk)*6);font-family:'Sora',sans-serif;
  font-size:calc(var(--pk)*10.5);font-variation-settings:'wght' 600;color:#e6ebf7}
.pf-brand i{width:calc(var(--pk)*7);height:calc(var(--pk)*7);border-radius:calc(var(--pk)*2.5);
  background:#8b5cf6;box-shadow:0 0 calc(var(--pk)*8) rgba(139,92,246,.7)}
.pf-live{font-size:calc(var(--pk)*8.5);padding:calc(var(--pk)*2) calc(var(--pk)*7);border-radius:999px;
  color:#bfdbfe;background:rgba(59,130,246,.16);border:1px solid rgba(96,165,250,.3)}
/* Proto Flow fragment */
.pf-a{width:calc(var(--pk)*232)}
.pf-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--pk)*6);margin-top:calc(var(--pk)*10)}
.pf-kpis div{display:flex;flex-direction:column;gap:calc(var(--pk)*3);padding:calc(var(--pk)*7) calc(var(--pk)*8);
  border-radius:calc(var(--pk)*8);background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.pf-kpis span{font-size:calc(var(--pk)*8.5);color:rgba(219,227,241,.6);line-height:1.2}
.pf-kpis b{font-family:'Sora',sans-serif;font-size:calc(var(--pk)*14);font-variation-settings:'wght' 600;color:#f1f4fb;
  letter-spacing:-.02em;line-height:1.1}
.pf-spark{display:block;width:100%;height:calc(var(--pk)*26);margin-top:calc(var(--pk)*10)}
.pf-spark-a{fill:rgba(99,102,241,.18)}
.pf-spark-l{fill:none;stroke:#818cf8;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round}
/* store fragment: a real storefront, not an abstract layout */
.pf-b{width:calc(var(--pk)*262)}
.pf-web{padding:0}
.pf-bar{display:flex;align-items:center;gap:calc(var(--pk)*4);padding:calc(var(--pk)*7) calc(var(--pk)*9);
  border-bottom:1px solid rgba(255,255,255,.07);direction:ltr}
.pf-bar i{width:calc(var(--pk)*5);height:calc(var(--pk)*5);border-radius:50%;background:rgba(255,255,255,.18)}
.pf-url{margin-inline:auto;font-family:'Sora',sans-serif;font-size:calc(var(--pk)*8);color:rgba(219,227,241,.6);
  padding:calc(var(--pk)*2) calc(var(--pk)*12);border-radius:999px;background:rgba(255,255,255,.05)}
.pf-page{padding:calc(var(--pk)*9) calc(var(--pk)*11) calc(var(--pk)*11)}
.pf-nav{display:flex;align-items:center;gap:calc(var(--pk)*6)}
.pf-logo{font-family:'Sora',sans-serif;font-size:calc(var(--pk)*10);font-variation-settings:'wght' 700;
  background:linear-gradient(90deg,#c7d2fe,#93c5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-nav span{width:calc(var(--pk)*14);height:calc(var(--pk)*3);border-radius:2px;background:rgba(255,255,255,.16)}
.pf-nav span:first-of-type{margin-inline-start:auto}
.pf-cart{position:relative;display:grid;place-items:center;width:calc(var(--pk)*16);height:calc(var(--pk)*16);margin-inline-start:calc(var(--pk)*2)}
.pf-cart svg{width:100%;height:100%;fill:none;stroke:#dbe3f1;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pf-cart i{position:absolute;top:calc(var(--pk)*-4);inset-inline-end:calc(var(--pk)*-5);min-width:calc(var(--pk)*10);height:calc(var(--pk)*10);
  border-radius:999px;background:#6366f1;color:#fff;font-style:normal;font-family:'Sora',sans-serif;font-size:calc(var(--pk)*6.5);
  display:grid;place-items:center;line-height:1}
.pf-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:calc(var(--pk)*11)}
.pf-row b{font-size:calc(var(--pk)*9.5);font-variation-settings:'wght' 600;color:#eef2fb}
.pf-row span{font-size:calc(var(--pk)*7.5);color:#a5b4fc}
.pf-products{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--pk)*7);margin-top:calc(var(--pk)*7)}
.pf-prod{display:flex;flex-direction:column;gap:calc(var(--pk)*3)}
.pf-thumb{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border-radius:calc(var(--pk)*8);
  border:1px solid rgba(255,255,255,.08)}
.pf-thumb svg{width:46%;height:46%;fill:none;stroke:rgba(241,244,251,.9);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 calc(var(--pk)*3) calc(var(--pk)*6) rgba(0,0,0,.45))}
.pf-thumb.t1{background:radial-gradient(80% 80% at 30% 20%,rgba(165,180,252,.45),transparent 60%),linear-gradient(160deg,#312e81,#111536)}
.pf-thumb.t2{background:radial-gradient(80% 80% at 30% 20%,rgba(147,197,253,.45),transparent 60%),linear-gradient(160deg,#1e3a8a,#0d1630)}
.pf-thumb.t3{background:radial-gradient(80% 80% at 30% 20%,rgba(196,181,253,.42),transparent 60%),linear-gradient(160deg,#4c1d95,#160f34)}
.pf-off{position:absolute;top:calc(var(--pk)*4);inset-inline-start:calc(var(--pk)*4);padding:calc(var(--pk)*1) calc(var(--pk)*4);
  border-radius:999px;font-style:normal;font-family:'Sora',sans-serif;font-size:calc(var(--pk)*6);color:#fff;background:rgba(99,102,241,.85)}
.pf-prod .n{font-size:calc(var(--pk)*7.5);color:rgba(219,227,241,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.pf-prod .pr{font-size:calc(var(--pk)*8.5);font-variation-settings:'wght' 650;color:#f1f4fb;line-height:1.1}
.pf-addcart{margin-top:calc(var(--pk)*10);height:calc(var(--pk)*20);border-radius:999px;display:grid;place-items:center;
  font-size:calc(var(--pk)*8.5);font-variation-settings:'wght' 600;color:#fff;
  background:linear-gradient(135deg,#7477f8,#4646d9);box-shadow:0 calc(var(--pk)*4) calc(var(--pk)*12) rgba(99,102,241,.45)}
/* landing-page fragment */
.pf-d{width:calc(var(--pk)*216)}
.pf-chip{font-size:calc(var(--pk)*8.5);padding:calc(var(--pk)*2) calc(var(--pk)*8);border-radius:999px;
  color:#ddd6fe;background:rgba(139,92,246,.18);border:1px solid rgba(167,139,250,.32)}
.pf-offer{display:block;margin-top:calc(var(--pk)*10);font-size:calc(var(--pk)*12.5);line-height:1.35;
  font-variation-settings:'wght' 650;color:#f1f4fb;text-align:start}
.pf-count{display:flex;gap:calc(var(--pk)*5);margin-top:calc(var(--pk)*9)}
.pf-count span{flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(var(--pk)*1);padding:calc(var(--pk)*5) 0;
  border-radius:calc(var(--pk)*7);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.pf-count b{font-family:'Sora',sans-serif;font-size:calc(var(--pk)*12);font-variation-settings:'wght' 600;color:#e0e7ff;line-height:1.1}
.pf-count i{font-style:normal;font-size:calc(var(--pk)*6.5);color:rgba(219,227,241,.55)}
.pf-form{display:flex;gap:calc(var(--pk)*5);margin-top:calc(var(--pk)*9)}
.pf-input{flex:1;display:flex;align-items:center;height:calc(var(--pk)*20);padding-inline:calc(var(--pk)*8);border-radius:calc(var(--pk)*7);
  font-size:calc(var(--pk)*7.5);color:rgba(219,227,241,.45);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.pf-btn{display:grid;place-items:center;height:calc(var(--pk)*20);padding-inline:calc(var(--pk)*10);border-radius:calc(var(--pk)*7);
  font-size:calc(var(--pk)*8);font-variation-settings:'wght' 600;color:#fff;background:linear-gradient(135deg,#8b5cf6,#6366f1)}
.pf-signups{display:flex;align-items:center;gap:calc(var(--pk)*6);margin-top:calc(var(--pk)*9);font-size:calc(var(--pk)*7.5);color:rgba(219,227,241,.6)}
.pf-av{display:flex}
.pf-av i{width:calc(var(--pk)*11);height:calc(var(--pk)*11);border-radius:50%;border:1px solid rgba(8,11,26,.9);margin-inline-start:calc(var(--pk)*-4)}
.pf-av i:first-child{margin-inline-start:0;background:linear-gradient(135deg,#818cf8,#4f46e5)}
.pf-av i:nth-child(2){background:linear-gradient(135deg,#93c5fd,#2563eb)}
.pf-av i:nth-child(3){background:linear-gradient(135deg,#c4b5fd,#7c3aed)}
/* analytics fragment */
.pf-c{width:calc(var(--pk)*168)}
.pf-stat .pf-head em{font-style:normal;font-family:'Sora',sans-serif;font-size:calc(var(--pk)*8.5);color:#93c5fd}
.pf-big{display:block;margin-top:calc(var(--pk)*6);font-family:'Sora',sans-serif;font-size:calc(var(--pk)*22);
  font-variation-settings:'wght' 600;color:#f1f4fb;letter-spacing:-.03em;line-height:1;text-align:start}
.pf-bars{display:flex;align-items:flex-end;gap:calc(var(--pk)*4);height:calc(var(--pk)*30);margin-top:calc(var(--pk)*10)}
.pf-bars i{flex:1;border-radius:calc(var(--pk)*2) calc(var(--pk)*2) 1px 1px;background:rgba(129,140,248,.32)}
.pf-bars i.on{background:linear-gradient(180deg,#93c5fd,#6366f1);box-shadow:0 0 calc(var(--pk)*10) rgba(99,102,241,.55)}

/* desktop: the artboard's empty corners, outside the copy column (x 480–1056) */
@media (min-width:1200px) and (min-height:560px) and (min-aspect-ratio:100/95){
  .ph-float{left:50%;top:50%;width:calc(var(--u)*1536);height:calc(var(--u)*1024);transform:translate(-50%,-50%)}
  .pf-b{inset-inline-start:calc(var(--u)*140);top:calc(var(--u)*280)}
  .pf-a{inset-inline-end:calc(var(--u)*160);top:calc(var(--u)*580)}
  .pf-c{inset-inline-start:calc(var(--u)*236);top:calc(var(--u)*660)}
  .pf-d{inset-inline-end:calc(var(--u)*150);top:calc(var(--u)*262)}
}

/* flow layouts */
@media (max-width:1199px),(max-height:559px),(max-aspect-ratio:100/95){
  .ph-float{inset:0}
  .ph .ph-foot{font-size:calc(var(--c)*12);line-height:1.6}
  #ph-foot1{display:inline-flex;align-items:center;gap:calc(var(--c)*12)}
  .ph-foot span{display:inline-flex}
  /* phones: the copy owns the screen; no product fragments */
  @media (max-width:599px),(max-height:429px){
    .ph-float{display:none}
    .ph-services{display:flex;flex-wrap:wrap;justify-content:center;background:none;border:0;padding:0;
      -webkit-backdrop-filter:none;backdrop-filter:none;row-gap:calc(var(--c)*6)}
    .ph-services li{padding:calc(var(--c)*3) calc(var(--c)*10);font-size:calc(var(--c)*12.5)}
    .ph-services li + li{border-inline-start:0}
  }
  @media (max-height:429px) and (min-aspect-ratio:1/1){
    .ph-sub{max-width:62ch}
  }
  /* tablets: two smaller fragments in the empty bands above and below the copy */
  @media (min-width:600px) and (min-height:430px){
    .ph-float{--pk:calc(var(--c)*.92)}
    .pf-c,.pf-d{display:none}
    .pf-b{inset-inline-start:5%;top:calc(64px + 4%)}
    .pf-a{inset-inline-end:5%;bottom:9%}
    @media (min-aspect-ratio:1/1){
      .ph-float{--pk:calc(var(--c)*.8)}
      .pf-b{inset-inline-start:3%;top:calc(64px + 6%)}
      .pf-a{inset-inline-end:3%;top:auto;bottom:12%}
    }
  }
}

/* motion: slow drift, cursor depth, a breathing glow; entrance after the copy */
@media (prefers-reduced-motion:no-preference){
  .pf-card{animation:pf-drift 12s ease-in-out infinite}
  .pf-b .pf-card{animation-duration:14s;animation-delay:-5s}
  .pf-c .pf-card{animation-duration:11s;animation-delay:-8s}
  .pf-d .pf-card{animation-duration:13s;animation-delay:-3s}
  .pf-card::after{animation:pf-glow 9s ease-in-out infinite}
  html.pll-done .pf-wrap{animation:pf-in 1.6s cubic-bezier(.16,1,.3,1) both}
  html.pll-done .pf-b{animation-delay:1.25s}
  html.pll-done .pf-a{animation-delay:1.45s}
  html.pll-done .pf-c{animation-delay:1.65s}
  html.pll-done .pf-d{animation-delay:1.35s}
  .ph.is-pointer .pf-a{translate:calc((var(--mx,.5) - .5) * 26px) calc((var(--my,.5) - .5) * 16px)}
  .ph.is-pointer .pf-b{translate:calc((var(--mx,.5) - .5) * 18px) calc((var(--my,.5) - .5) * 12px)}
  .ph.is-pointer .pf-d{translate:calc((var(--mx,.5) - .5) * 22px) calc((var(--my,.5) - .5) * 14px)}
  .ph.is-pointer .pf-c{translate:calc((var(--mx,.5) - .5) * 32px) calc((var(--my,.5) - .5) * 20px)}
}
@keyframes pf-drift{0%,100%{translate:0 0}50%{translate:0 calc(var(--pk)*-7)}}
@keyframes pf-glow{0%,100%{opacity:.45}50%{opacity:.8}}
@keyframes pf-in{from{opacity:0;transform:translateY(calc(var(--pk)*16)) scale(.97);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}