/* ==================================================================
   0. RESET
   ================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%;background:#020204}
body{min-height:100%;overflow-x:hidden;background:#020204}     /* the page scrolls down to the reel */
body{font-family:Poppins,Inter,system-ui,sans-serif;color:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}                          /* button labels never underline */

/* ==================================================================
   1. FIXED 1172 x 657 DESIGN CANVAS, SCALED BY ONE TRANSFORM
   ------------------------------------------------------------------
   Every element is absolutely positioned in raw design pixels. There is
   no flow layout on desktop; the whole canvas is scaled by --k. The
   optical centre of every centred element is x = 586.
   ================================================================== */
.stage{position:relative;height:100vh;min-height:420px;overflow:hidden;background:#020204}
.canvas{position:absolute;left:50%;top:0;width:1172px;height:657px;
  transform:translateX(-50%) scale(var(--k,1));transform-origin:50% 0}
.canvas>*{position:absolute}
.stack{position:absolute;inset:0;z-index:300}      /* layout shell, no box of its own */
.stack>*{position:absolute}
.stack{pointer-events:none}                        /* the shell must never eat a card hover */
.stack .nav,.stack .cta2{pointer-events:auto}
.navmenu{display:contents}                          /* shell, invisible on desktop */
.burger{display:none}                               /* desktop */

/* BACKGROUND FILM — the film sits under .bg, which is now a scrim: the sky is
   bright, so the veil is what keeps white type readable over it. */
.bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease;pointer-events:none;
  /* the film is lit up on its own, so "brighter" does not have to mean "more
     opaque" — the sky gains without the darks washing out */
  filter:brightness(1.32) saturate(1.08)}
.bgvid.on{opacity:.45}

/* background — never animates, it is the stage */
.bg{position:absolute;inset:0;
  background:
   /* the copy block gets its own shadow so the film can stay open at the edges */
   radial-gradient(80% 48% at 50% 37%, rgba(2,2,4,.55), rgba(2,2,4,0) 72%),
   linear-gradient(180deg, rgba(2,2,4,.80) 0%, rgba(2,2,4,.52) 16%,
     rgba(2,2,4,.46) 30%, rgba(2,2,4,.44) 46%, rgba(2,2,4,.50) 62%,
     rgba(2,2,4,.66) 82%, rgba(2,2,4,.86) 100%),
   linear-gradient(180deg, rgba(25,127,255,0) 38%, rgba(25,127,255,.042) 54%,
     rgba(25,127,255,.052) 68%, rgba(25,127,255,.030) 100%)}

/* STARFIELD — two 1x1px divs whose whole field is one giant box-shadow list */
.stars{position:absolute;left:0;top:0;width:1px;height:1px;border-radius:50%;background:#fff}

/* ==================================================================
   2. PIXEL CONTRACT A — THE BADGE
   Fixed-size box, icon tile pinned to the left edge, left-aligned label.
   NOT a centred pill. NOT a flex row.
   ================================================================== */
.badge{left:462px;top:95px;width:250px;height:39px;border-radius:12px;z-index:300;
  border:1px solid rgba(255,255,255,.115);
  background:linear-gradient(to top,
    rgba(190,225,255,.175) 0px, rgba(190,225,255,.128) 2px, rgba(190,225,255,.075) 4px,
    rgba(190,225,255,.026) 6px, rgba(255,255,255,.012) 9px, rgba(255,255,255,.012) 100%);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.badge i{position:absolute;left:4px;top:4px;width:29px;height:29px;border-radius:8px;
  display:grid;place-items:center;
  background:linear-gradient(to top,
    #46afc8 0px, #35abc7 2px, #0b859d 4px, #026c84 6px, #004e66 8px,
    #053f58 10px, #012c3d 12px, #031a2a 14px, #061125 16px, #090f25 19px,
    #090c1c 23px, #060d16 29px);
  box-shadow:inset 1px 0 0 rgba(150,220,250,.40),
    inset -1px 0 0 rgba(150,220,250,.52),
    0 0 6px rgba(60,190,230,.20), 0 3px 8px -5px rgba(90,220,255,.6)}
.badge i svg{width:14px;height:16px;position:relative;top:-1px;left:0px}
.badge b{position:absolute;left:45px;transform-origin:0 50%;top:0;height:39px;
  display:flex;align-items:center;
  font-size:13px;font-weight:400;color:rgba(255,255,255,.94);white-space:nowrap;
  padding-top:1.5px}

/* ==================================================================
   3. PIXEL CONTRACT B — THE GLOW BUTTON (.btn), USED TWICE
   The cyan bank is a BACKGROUND GRADIENT clipped by the button's own
   rounded rect. overflow:hidden is what does the clipping.
   ================================================================== */
.btn{display:grid;place-items:center;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(to top,
    #9ad9ec 1px, #89dff0 2px, #79e0f1 3px, #61daef 4px, #3ec8e4 5px,
    #14a8c6 6px, #0596b3 7px, #038aa8 8px, #047796 9px, #006180 10px,
    #025066 12px, #0a4f5e 13px, #04465a 14px, #073746 16px,
    #0a2a37 18px, #0d212e 20px, #0f1824 24px, #0a121e 30px,
    #0a111d 34px, #0a111d 100%);
  box-shadow:
    inset 0 3px 3px -2px rgba(180,228,255,.10),
    inset 1px 0 0 rgba(255,255,255,.09),
    inset -1px 0 0 rgba(255,255,255,.09),
    var(--hair,0 1px 0 rgba(152,218,234,.38)),
    1px 0 0 rgba(152,218,234,.17), -1px 0 0 rgba(152,218,234,.17),
    0 0 8px rgba(60,190,235,.10),
    0 2px 5px -3px rgba(90,220,255,.45);
  transition:transform .25s,box-shadow .25s,filter .25s}
/* thin bright streak across the TOP edge only (nav instance) */
.btn::before{content:"";position:absolute;left:22%;right:38%;top:0.8px;height:1.9px;z-index:1;
  filter:blur(.55px);
  background:linear-gradient(90deg,rgba(120,225,255,0) 0%,rgba(120,225,255,.58) 34%,
    rgba(160,240,255,.74) 50%,rgba(120,225,255,.58) 66%,rgba(120,225,255,0) 100%)}
/* side edge-light, 13px inward falloff, MASKED so it attenuates up the button */
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(200,245,255,.70),rgba(200,245,255,0) 13px),
             linear-gradient(270deg,rgba(200,245,255,.70),rgba(200,245,255,0) 13px);
  -webkit-mask:linear-gradient(to top,#000 0,#000 6px,rgba(0,0,0,.40) 12px,
    rgba(0,0,0,.15) 18px,rgba(0,0,0,.09) 24px,rgba(0,0,0,.02) 30px,rgba(0,0,0,.02) 100%);
          mask:linear-gradient(to top,#000 0,#000 6px,rgba(0,0,0,.40) 12px,
    rgba(0,0,0,.15) 18px,rgba(0,0,0,.09) 24px,rgba(0,0,0,.02) 30px,rgba(0,0,0,.02) 100%)}
.btn span{position:relative;z-index:2;display:block;line-height:1;
  text-shadow:0 1px 2px rgba(0,20,30,.5)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.12);
  box-shadow:inset 0 1px 0 rgba(200,245,255,.6),inset 1px 0 0 rgba(170,225,255,.35),
             inset -1px 0 0 rgba(170,225,255,.35),0 6px 22px rgba(20,180,225,.55)}

/* Instance A — nav CTA */
.nav .btn{position:absolute;left:530.7px;top:10.5px;width:125.5px;height:39.5px;
  border-radius:14px;font-size:14px;font-weight:500;letter-spacing:-.005em}
.nav .btn span{margin-top:0}
/* Instance B — hero CTA (no top streak) */
.cta2{position:absolute;left:526px;top:349px;width:121px;height:54.5px;
  --hair:0 0 0 transparent;border-radius:13px;font-size:17px;font-weight:500;
  letter-spacing:-.01em;z-index:300}
.cta2::before{display:none}
.cta2 span{margin-top:0}

/* ==================================================================
   4. NAV PILL
   ================================================================== */
.nav{left:247px;top:3px;width:678px;height:64px;border-radius:32px;z-index:400;
  background:rgba(255,255,255,.008);
  border:1px solid rgba(255,255,255,.105);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.mark{left:21px;top:19px;width:24px;height:24px;
  filter:drop-shadow(0 0 6px rgba(60,224,255,.75))}
.wm{position:absolute;left:50px;top:0;white-space:nowrap}
.wm .kick{position:absolute;left:3px;top:20px;font-size:4.4px;font-weight:600;
  letter-spacing:.10em;color:#fff;opacity:.92;line-height:1}
.wm .name{position:absolute;left:0;top:26px;transform-origin:0 50%;
  font-family:Poppins;font-weight:900;font-size:22px;line-height:1;
  letter-spacing:-.01em;color:#fff}
.links{position:absolute;left:156px;top:0;height:62px;transform-origin:0 50%;
  display:flex;align-items:center;gap:24px}
.links a{font-size:12.5px;font-weight:400;color:rgba(255,255,255,.92);
  white-space:nowrap;transition:opacity .25s}
.links a:hover{opacity:.65}

/* ==================================================================
   5. HERO TYPE
   ================================================================== */
.h1{left:586px;transform:translateX(-50%);white-space:nowrap;line-height:1;
  font-family:Poppins;font-weight:900;font-size:54px;letter-spacing:-.004em;
  word-spacing:.175em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 34px rgba(130,180,255,.22);z-index:300}
.sub{left:586px;transform:translateX(-50%);white-space:nowrap;line-height:1;
  font-size:13.2px;color:#a9aeb5;z-index:300}
.sub b{font-weight:600;color:#fff}
.nb{white-space:nowrap}

/* ==================================================================
   6. THE CAROUSEL — TRUE 3D PERSPECTIVE RING
   R = 891, perspective = 891, n = 37, step = 360/37 = 9.7297deg,
   cull 42deg, speed 1.9 deg/s, card 130x300 on the y=616 plane,
   camera/horizon at y = 918.
   ================================================================== */
.showcase{position:absolute;left:0;top:0;width:1172px;height:0}
.ring{position:absolute;left:0;top:0;width:1172px;height:657px;z-index:5;
  perspective:891px;perspective-origin:586px 918px;transform-style:preserve-3d;
  pointer-events:none}
/* The cards carry VIDEO, and the films are 1920x1080, so a 16:9 card shows the
   whole frame with no cropping at all — a tall 130x300 window kept barely a
   quarter of every shot. 224 x 126 at a 15deg step (2*PI*R/24 = 233px of arc)
   leaves an 8.6px gap between neighbours at the front of the ring. */
.card{position:absolute;left:586px;top:520px;width:224px;height:126px;
  margin:-63px 0 0 -112px;border-radius:12px;overflow:hidden;background:#0d1117;
  box-shadow:0 24px 46px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.5);
  backface-visibility:hidden;will-change:transform;
  pointer-events:auto;                       /* .ring itself is pointer-events:none */
  transition:scale .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s}
.card video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.card .edge{position:absolute;inset:0;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),
             inset 0 16px 30px rgba(255,255,255,.05)}
.card.broken video{display:none}
/* Hover: the card lifts toward the viewer. Uses the individual `scale` property
   so it composes with the transform the ring loop rewrites every frame —
   animating `transform` here would fight the carousel. */
.card:hover{scale:1.22;
  box-shadow:0 30px 64px rgba(0,0,0,.72),0 6px 14px rgba(0,0,0,.6)}

/* ==================================================================
   9. THE REEL — below the fold. One film per block, each captioned with
   the file's own name, top-left, OUTSIDE the frame. (The browser mock
   that used to sit here is gone; the page scrolls instead.)
   ================================================================== */
.reel{position:relative;background:#020204;padding:13vh 24px 16vh}
.reel-inner{width:100%;max-width:1040px;margin:0 auto}
.reel-item{margin-bottom:11vh}
.reel-item:last-child{margin-bottom:0}
.reel-cap{margin-bottom:15px}
.reel-name{display:inline-block;font-size:14px;font-weight:500;letter-spacing:.03em;
  color:rgba(255,255,255,.86)}
.reel-video{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;
  background:#0b0e13;object-fit:cover;cursor:pointer;
  box-shadow:0 30px 70px rgba(0,0,0,.62),0 4px 14px rgba(0,0,0,.5)}

/* FLOATING WHATSAPP BUTTON — fixed, so it rides along while the page scrolls */
.wa{position:fixed;right:16px;bottom:24px;width:56px;height:56px;border-radius:50%;
  background:#25d366;display:grid;place-items:center;z-index:300;
  box-shadow:0 8px 20px rgba(0,0,0,.5)}
.wa svg{width:31px;height:31px}
.wa::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.5);animation:pulse 2.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.4);opacity:0}
  100%{opacity:0}}

/* ==================================================================
   10a. SHARED NARROW-VIEWPORT NAV  (<= 1080px)
   Same DOM nodes as desktop, re-laid-out inside a panel.
   ================================================================== */
@media (max-width:1080px){
  .burger{display:grid;place-content:center;gap:4px;position:absolute;right:12px;top:11px;
    width:42px;height:42px;padding:0;border:0;border-radius:14px;background:transparent;
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  .burger span{display:block;width:19px;height:1.6px;border-radius:2px;
    background:rgba(255,255,255,.92);
    transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s}
  .burger:focus-visible{outline:2px solid rgba(120,225,255,.7);outline-offset:2px}
  .nav.open .burger span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
  .nav.open .burger span:nth-child(2){opacity:0}
  .nav.open .burger span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
  .navmenu{display:block;position:absolute;left:0;right:0;top:74px;padding:12px;
    border-radius:22px;border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg,rgba(11,15,22,.985),rgba(7,10,16,.99));
    -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 26px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .24s ease,transform .28s cubic-bezier(.4,0,.2,1),visibility .28s}
  .nav.open .navmenu{opacity:1;visibility:visible;transform:none}
  .links{position:static;display:flex;flex-direction:column;align-items:stretch;
    height:auto;gap:2px;transform:none!important}
  .links a{font-size:15px;padding:11px 14px;border-radius:12px;color:rgba(255,255,255,.9);
    transition:background .2s,color .2s}
  .nav .btn{position:static;width:100%;height:46px;margin-top:10px;font-size:15px}
  .nav .btn span{margin-top:3px}
}
@media (hover:hover) and (max-width:1080px){
  .burger:hover span{background:#fff}
  .links a:hover{background:rgba(255,255,255,.055);color:#fff;opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .navmenu,.burger span{transition:none}
}

/* ==================================================================
   10b. TABLET 701-1080px — the design window narrows so type stops
   shrinking with the viewport; k stays continuous at 1080.
   ================================================================== */
@media (min-width:701px) and (max-width:1080px){
  .nav{left:286px;width:620px}                 /* narrows to logo + burger */
  .badge{left:448px;width:277px}               /* width grows; .badge b stays left:45px */
  .ring{transform:scale(var(--rs,1));transform-origin:586px 595px}
  .wa{width:58px;height:58px;right:22px;bottom:26px}
  .wa svg{width:32px;height:32px}
}

/* ==================================================================
   10c. PHONE <= 700px — a genuine flow column that owns the viewport
   ================================================================== */
@media (max-width:700px){
  .canvas{position:relative;left:auto;top:auto;width:100%;height:100%;transform:none;
    display:flex;flex-direction:column;align-items:center;padding:0 20px}
  .canvas>*{position:static}
  .stack{display:contents}
  .nav{position:relative;left:auto;top:auto;width:100%;max-width:500px;height:58px;
    margin-top:clamp(10px,1.5vh,15px);flex:0 0 auto}
  /* logo lockup: mark centre and wordmark cap centre pinned to the pill's mid */
  .mark{left:16px;top:calc(50% - 13px);width:26px;height:26px}
  .wm{left:49px;top:0;height:100%}
  .wm .kick{top:calc(50% - 15px);font-size:5px;letter-spacing:.2em}
  .wm .name{top:calc(50% - 9px);font-size:18px;transform:scaleX(.88);
    transform-origin:left center}
  .burger{right:8px;top:7px;width:44px;height:44px}
  .navmenu{top:68px;padding:12px}
  .links a{font-size:16px;padding:12px 15px;border-radius:12px}
  .nav .btn{height:48px;margin-top:10px;font-size:16px}
  /* badge becomes auto-width; the tile stays pinned left, label stays to its RIGHT */
  .badge{position:relative;left:auto;top:auto;margin-top:clamp(16px,2.6vh,26px);
    width:auto;max-width:100%;height:36px;flex:0 0 auto;border-radius:18px}
  .badge b{position:relative;left:auto;top:auto;height:36px;padding:0 15px 0 42px;
    font-size:12.5px}
  .badge i{top:4px;left:4px;width:28px;height:28px}
  .badge i svg{width:13px;height:19px}
  /* 7.4em sits between STREAMLINE (6.36em) and STREAMLINE THE (8.45em) */
  .h1{position:relative;left:auto;top:auto;transform:none;white-space:normal;
    text-align:center;font-size:clamp(29px,8.4vw,36px);line-height:1.06;
    letter-spacing:-.01em;max-width:7.4em}
  .h1.l1{margin-top:clamp(12px,2.2vh,20px)}
  .sub{position:relative;left:auto;top:auto;transform:none;white-space:normal;
    text-align:center;font-size:clamp(14px,3.9vw,15.5px);line-height:1.5;max-width:340px}
  .sub.s1{margin-top:clamp(10px,1.8vh,16px)}
  .cta2{position:relative;left:auto;top:auto;margin-top:clamp(16px,2.6vh,26px);
    flex:0 0 auto;width:auto;min-width:158px;height:52px;padding:0 26px;font-size:16px}
  .showcase{position:relative;left:auto;top:auto;flex:1 1 auto;width:100%;height:auto;
    min-height:224px}
  /* the ring keeps its full 1172x657 3D geometry, just repositioned and clipped.
     1.25x makes the 16:9 cards legible on a phone; -395px parks the front card
     just under the hero CTA now that the browser mock is gone. */
  .ring{position:absolute;left:50%;margin-left:-586px;top:-395px;bottom:auto;
    width:1172px;height:657px;transform-origin:586px 466px;transform:scale(1.25)}
  .reel{padding:9vh 20px 13vh}
  .reel-item{margin-bottom:8vh}
  .reel-name{font-size:13px}
  .reel-video{border-radius:12px}
  .wa{width:54px;height:54px;right:14px;bottom:16px}
  .wa svg{width:29px;height:29px}
}

/* ==================================================================
   12. MASTER ENTRANCE — resting states.
   Uses the INDIVIDUAL translate/scale/clip-path properties, NOT
   `transform`: transform is already owned by the pixel fitter and the
   ring loop, so these compose instead of colliding.
   ================================================================== */
html.intro .nav{opacity:0;translate:0 -9px}
html.intro .mark,html.intro .wm,html.intro .links a,html.intro .nav .btn,
html.intro .burger{opacity:0;translate:0 6px}
html.intro .badge{opacity:0;translate:0 11px;scale:.985}
html.intro .h1{opacity:0;translate:0 15px;clip-path:inset(100% 0 -30% 0)}
html.intro .sub{opacity:0;translate:0 10px}
html.intro .cta2{opacity:0;translate:0 13px;scale:.985}
html.intro .ring{opacity:0;translate:0 18px;scale:.99}
html.intro .wa{opacity:0;scale:.88}

@media (prefers-reduced-motion:reduce){
  html.intro .nav,html.intro .mark,html.intro .wm,html.intro .links a,
  html.intro .nav .btn,html.intro .burger,html.intro .badge,html.intro .h1,
  html.intro .sub,html.intro .cta2,html.intro .ring,
  html.intro .wa{opacity:1;translate:none;scale:none;clip-path:none}
  .wa::after{animation:none}
}