/* ===== Cinematic flythrough hero ===== */
.cine{height:460vh;position:relative;background:#0b101a;color:#fff}
.cine .stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#0b101a}
.cine .sky{position:absolute;inset:0;background:linear-gradient(180deg,#1b2a4d 0%,#3b5185 48%,#1a2238 100%);opacity:0}
.cine canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.cine .final-bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(30px) brightness(.55) saturate(1.15);opacity:0;pointer-events:none}
.cine .final{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
@media (min-aspect-ratio:6/5){
  .cine{--colL:clamp(16px,3vw,40px);--colW:min(38vw,580px);--gap:clamp(24px,2.6vw,44px)}
  .cine .copy{max-width:var(--colW);width:var(--colW)}
  .cine .final{top:var(--hdr,110px);left:calc(var(--colL) + var(--colW) + var(--gap));right:auto;bottom:auto;height:calc(100% - var(--hdr,110px));width:auto;max-width:calc(100vw - var(--colL) - var(--colW) - var(--gap));object-fit:contain;object-position:left center}
  .cine.copy-on .rail{opacity:0;pointer-events:none}
  /* header floats over the hero: no dark band cutting the scene */
  .cine .stage::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--hdr,110px) + 70px);background:linear-gradient(180deg,rgba(8,12,20,.62) 0%,rgba(8,12,20,.28) 55%,transparent 100%);z-index:4;pointer-events:none}
}
.cine .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,14,.35) 0%,transparent 30%,transparent 55%,rgba(5,8,14,.85) 100%);opacity:0}
.cine .grain{position:absolute;inset:0;pointer-events:none;background-image:url(grain.png);background-size:128px 128px;opacity:0;mix-blend-mode:overlay;z-index:2}
.cine .final{image-rendering:auto}
.cine .vig{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(5,8,14,.7) 100%)}
.cine .rail{position:absolute;left:clamp(16px,3vw,40px);top:clamp(118px,17vh,180px);z-index:5;display:flex;flex-direction:column;gap:13px;transition:opacity .5s}
.cine .rail .lab{display:flex;align-items:center;gap:11px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:2px;font-weight:600;color:#8592a8;transition:color .3s;text-transform:uppercase}
.cine .rail .lab .n{width:8px;height:8px;border-radius:50%;border:1.5px solid #3f4d63;transition:.3s}
.cine .rail .lab.on{color:#fff}.cine .rail .lab.on .n{background:#e0484d;border-color:#e0484d;box-shadow:0 0 0 5px rgba(224,72,77,.18)}
.cine .kick{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(40px,8vh,80px);z-index:5;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;font-weight:600;color:#c6d1e3;display:flex;gap:10px;align-items:center;transition:opacity .4s;text-transform:uppercase}
.cine .kick b{color:#e0484d}
.cine .copy{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(48px,9vh,96px);z-index:6;max-width:min(640px,calc(100vw - 32px));opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s;padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px);background:linear-gradient(135deg,rgba(9,13,22,.78),rgba(9,13,22,.58));-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.09);border-radius:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.cine .copy.show{opacity:1;transform:none}
.cine .cine-proj{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:3px;font-weight:600;color:#ffd9a3;margin-bottom:12px;text-transform:uppercase}
.cine h1.h{font-size:clamp(36px,min(6.4vw,8.4vh),80px);line-height:.98;font-weight:700;letter-spacing:-.02em;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.6);margin:0}
.cine h1.h .r{color:#e0484d}
.cine .sub{margin-top:14px;font-size:clamp(14px,min(1.5vw,2.05vh),17px);color:#e6ebf3;max-width:46ch;line-height:1.5;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.cine .cta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.cine .cta .btn{border-radius:10px}
.cine .cta .b1{background:#fff;color:#0b101a;border-color:#fff}
.cine .cta .b1:hover{background:#e0484d;border-color:#e0484d;color:#fff}
.cine .cta .b2{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.cine .cta .b2:hover{background:rgba(255,255,255,.2)}
.cine .prog{position:absolute;right:clamp(14px,3vw,34px);top:50%;transform:translateY(-50%);z-index:5;width:3px;height:140px;background:rgba(255,255,255,.14);border-radius:3px;overflow:hidden}
.cine .prog i{position:absolute;left:0;top:0;width:100%;background:#e0484d}
.cine .hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:5;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:2px;color:#9aa6ba;display:flex;flex-direction:column;align-items:center;gap:6px}
.cine .hint .a{width:1px;height:26px;background:linear-gradient(#9aa6ba,transparent);animation:cineFall 1.6s infinite}
@keyframes cineFall{0%{opacity:0;transform:translateY(-10px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
/* static fallback (no WebGL / reduced motion) */
.cine.static{height:100svh}
.cine.static .final,.cine.static .final-bg{opacity:1}.cine.static .scrim{opacity:1}
.cine.static .copy{opacity:1;transform:none}
.cine.static .rail,.cine.static .prog,.cine.static .hint,.cine.static .kick,.cine.static canvas{display:none}
/* header over the dark hero */
body.on-hero header,body.on-hero header.scrolled{background:rgba(11,16,26,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
body.on-hero .navlinks a:not(.btn){color:#c9d3df}
body.on-hero .navlinks a:not(.btn):hover,body.on-hero .navlinks a.active{color:#fff}
body.on-hero .langsw{border-color:rgba(255,255,255,.25)}
body.on-hero .langsw a{color:#aab4c2}
body.on-hero .langsw a.on{background:#fff;color:#0b101a}
body.on-hero .cta-head,body.on-hero a.cta-head{background:#fff !important;color:#0b101a !important;border-color:#fff !important}
body.on-hero .cta-head .ar{color:#0b101a !important}
body.on-hero .cta-head:hover{background:#e0484d !important;border-color:#e0484d !important;color:#fff !important}
body.on-hero .burger span{background:#fff}
@media(max-width:760px){
  .cine .rail{top:110px;left:12px;right:12px;flex-direction:row;justify-content:space-between;gap:4px;flex-wrap:nowrap;padding:9px 12px;background:rgba(9,13,22,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:999px}
  .cine .rail .lab{font-size:10px;letter-spacing:.9px;gap:6px;color:#9aa6ba;white-space:nowrap}
  .cine .rail .lab .n{width:7px;height:7px}
  .cine .rail .lab.on .n{box-shadow:0 0 0 3px rgba(224,72,77,.25)}
  .cine .copy{left:12px;right:12px;bottom:56px;max-width:none}
  .cine .prog{display:none}
  .cine h1.h{font-size:clamp(34px,10vw,52px)}
  .cine .sub{display:none}
  .cine .kick{bottom:30px}
  .cine .copy{bottom:64px}
}

/* contact phones list */
.ct-info .val .ph{display:flex;gap:10px;align-items:baseline;line-height:1.9}
.ct-info .val .ph b{font-family:'IBM Plex Mono';font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:13.5em}

/* desktop: header floats over the hero (must come after the base on-hero rules) */
@media (min-aspect-ratio:6/5){
  body.on-hero header,body.on-hero header.scrolled{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;box-shadow:none}
}