:root{
    --void:#05070d;
    --void-2:#0b0f18;
    --panel:#10141f;
    --panel-2:#161c2b;
    --line: rgba(199,206,219,0.12);
    --cyan:#4ce0d2;
    --violet:#7b61ff;
    --flare:#ff6b4a;
    --mist:#c7cedb;
    --mist-dim: rgba(199,206,219,0.55);
    --white:#f5f7fb;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--void);
    color:var(--white);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--cyan);color:#05070d;}

  h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em;}
  .mono{font-family:'JetBrains Mono',monospace;}

  a{color:inherit;text-decoration:none;}

  .bg-canvas{position:fixed;inset:0;z-index:0;opacity:0.55;pointer-events:none;}

  /* ---------- Layout helpers ---------- */
  .wrap{max-width:1240px;margin:0 auto;padding:0 32px;position:relative;z-index:2;}
  section{position:relative;z-index:2;}

  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--cyan);
    padding:6px 14px;border:1px solid rgba(76,224,210,0.35);border-radius:999px;
    background:rgba(76,224,210,0.06);
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:blink 2s infinite;}
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:0.25;}}

  /* ---------- Nav ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    backdrop-filter: blur(14px);
    background:rgba(5,7,13,0.55);
    border-bottom:1px solid var(--line);
  }
  nav{
    max-width:1240px;margin:0 auto;padding:18px 32px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:20px;}
  .logo-mark{width:30px;height:30px;position:relative;flex-shrink:0;}
  .logo-mark img{width:100%;height:100%;object-fit:contain;display:block;}
  .logo-word{height:16px;width:auto;display:block;}
  .nav-links{display:flex;gap:34px;font-size:14px;color:var(--mist);}
  .nav-links a{position:relative;padding:4px 0;transition:color .25s;}
  .nav-links a:hover{color:var(--white);}
  .nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--cyan);transition:width .25s;}
  .nav-links a:hover::after{width:100%;}
  .nav-links a.active{color:var(--white);}
  .nav-links a.active::after{width:100%;}
  .nav-cta{
    font-family:'JetBrains Mono';font-size:12px;letter-spacing:0.06em;
    padding:10px 20px;border-radius:8px;
    background:linear-gradient(135deg,var(--cyan),var(--violet));
    color:#05070d;font-weight:500;
    box-shadow:0 0 24px rgba(76,224,210,0.25);
    transition:transform .25s, box-shadow .25s;
  }
  .nav-cta:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(123,97,255,0.4);}
  .burger{display:none;}

  /* ---------- Hero (scroll-scrub video) ---------- */
  .video-hero{
    position:relative;
    height:1150vh; /* scroll runway that drives the video's playhead */
  }
  .video-hero-sticky{
    position:sticky;top:0;height:100vh;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:#05070d;
  }
  .video-hero-canvas{
    position:absolute;inset:0;width:100%;height:100%;display:block;
    background:#0b0f18;
  }
  .video-hero-scrim{
    position:absolute;inset:0;z-index:1;
    background:
      linear-gradient(180deg, rgba(5,7,13,0.75) 0%, rgba(5,7,13,0.35) 38%, rgba(5,7,13,0.15) 60%, rgba(5,7,13,0.55) 100%);
  }
  /* Small bottom-edge fade only — a soft blue vignette that grows a little
     near the end of the scroll, just enough to blend the frame's bottom edge.
     It never covers the whole screen; the actual transition is handled by
     the reveal panel that physically slides up over the video (see below). */
  .video-hero-eat{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    height:10%;
    background:linear-gradient(180deg,
      transparent 0%,
      rgba(30,74,140,0.28) 55%,
      rgba(10,30,58,0.55) 100%);
    pointer-events:none;
    will-change:height;
    transition:height .1s linear;
  }

  /* ---------- Reveal panel ----------
     This wraps everything after the hero. A negative top margin pulls it up
     so it starts entering the viewport *before* the sticky hero releases —
     it physically rises and covers the video from the bottom, like a curtain
     being pulled up, instead of the video darkening in place. */
  .reveal-panel{
    position:relative;z-index:20;
    background:var(--void);
    margin-top:-42vh;
    border-radius:36px 36px 0 0;
    box-shadow:0 -50px 90px rgba(0,0,0,0.5);
  }
  @media(max-width:820px){
    .reveal-panel{margin-top:-18vh;border-radius:24px 24px 0 0;}
  }

  /* ---------- Cursor ink cloud ----------
     Canvas-based particle system living inside .reveal-panel (z-index:0,
     below the section content which sits at z-index:2), so it glows through
     empty background space but disappears behind opaque cards, the marquee
     strip, etc. Only turns on once the cursor is below the marquee belt. */
  .cursor-cloud{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    width:100vw;height:100vh;
    opacity:0;transition:opacity .8s ease;
  }
  .cursor-cloud.active{opacity:1;}
  @media(max-width:820px){ .cursor-cloud{display:none;} }
  .hero-caption{
    position:absolute;z-index:2;
    font-family:'JetBrains Mono',monospace;
    font-size:15px;letter-spacing:0.04em;
    color:var(--mist);
    opacity:0;
    max-width:360px;
    line-height:1.5;
    transition:opacity .5s ease, transform .5s ease;
    pointer-events:none;
    padding:18px 22px;
    border-radius:14px;
    background:rgba(5,7,13,0.45);
    border:1px solid rgba(199,206,219,0.14);
    backdrop-filter:blur(8px);
  }
  .hero-caption .cap-tag{
    display:inline-flex;align-items:center;gap:9px;
    color:var(--cyan);text-transform:uppercase;font-size:12.5px;letter-spacing:0.12em;
    margin-bottom:10px;
  }
  .hero-caption .cap-tag::before{content:'';width:16px;height:1.5px;background:var(--cyan);}
  .hero-caption b{
    display:block;color:var(--white);font-family:'Space Grotesk',sans-serif;
    font-size:27px;font-weight:600;letter-spacing:-0.01em;line-height:1.28;
  }
  .cap-1{top:8%;left:6%;transform:translateY(18px);max-width:300px;}
  .cap-1.show{opacity:1;transform:translateY(0);}
  .cap-2{top:50%;right:7%;text-align:right;transform:translateY(18px) translateY(-50%);}
  .cap-2 .cap-tag::before{order:2;}
  .cap-2 .cap-tag{flex-direction:row-reverse;}
  .cap-2.show{opacity:1;transform:translateY(-50%);}
  .cap-3{bottom:16%;left:8%;transform:translateY(18px);}
  .cap-3.show{opacity:1;transform:translateY(0);}
  .cap-4{top:8%;right:6%;text-align:right;transform:translateY(18px);max-width:300px;}
  .cap-4 .cap-tag::before{order:2;}
  .cap-4 .cap-tag{flex-direction:row-reverse;}
  .cap-4.show{opacity:1;transform:translateY(0);}
  @media(max-width:820px){
    .hero-caption{
      max-width:150px;padding:9px 12px;border-radius:10px;
      font-size:11px;
    }
    .hero-caption .cap-tag{font-size:8.5px;gap:6px;margin-bottom:5px;}
    .hero-caption .cap-tag::before{width:10px;}
    .hero-caption b{font-size:15px;line-height:1.22;}
    .cap-1{top:14%;left:4%;max-width:140px;}
    .cap-4{top:14%;right:4%;max-width:140px;}
    .cap-2{top:44%;right:4%;}
    .cap-3{bottom:20%;left:4%;}
  }

  .hero-final{
    position:absolute;z-index:3;left:50%;top:50%;
    transform:translate(-50%,-50%) translateY(24px) scale(0.9);
    opacity:0;
    text-align:center;max-width:920px;width:88%;
    transition:opacity .8s ease, transform .8s ease;
    pointer-events:none;
  }
  .hero-final.show{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1);}
  .hero-final span{
    display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;
    font-size:clamp(34px,6.4vw,78px);line-height:1.08;letter-spacing:-0.01em;
    color:var(--white);
  }
  .hero-final .grad{
    background:linear-gradient(100deg,var(--cyan),var(--violet) 70%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .video-hero-overlay{
    position:relative;z-index:2;width:100%;
    transition:opacity .25s linear, transform .25s linear;
  }
  .video-hero-overlay .eyebrow{margin-bottom:26px;}
  .video-hero-overlay h1{
    font-size:clamp(36px,5.2vw,66px);line-height:1.04;font-weight:700;margin-bottom:22px;
    max-width:820px;
  }
  .video-hero-overlay h1 .grad{
    background:linear-gradient(100deg,var(--cyan),var(--violet) 70%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .video-hero-overlay h1 .grad-metal{
    position:relative;
    background:
      radial-gradient(280px 240px at 2% 15%, rgba(110,190,230,0.95) 0%, rgba(110,190,230,0.4) 45%, transparent 70%),
      radial-gradient(300px 260px at 99% 90%, rgba(245,150,70,0.95) 0%, rgba(245,150,70,0.4) 45%, transparent 70%),
      linear-gradient(100deg,
        #5f90ac 0%, #bcdcea 10%, #7aa8c2 20%, #eef6fa 28%,
        #9fb0ba 38%, #dde3e6 48%, #cfa683 58%,
        #eecfa8 68%, #c98f5c 78%, #f0dbb8 88%, #d9974f 100%);
    background-size:100% 100%, 100% 100%, 180% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,0.25)) drop-shadow(0 3px 6px rgba(0,0,0,0.45));
  }
  .video-hero-overlay p{font-size:17px;color:var(--mist);max-width:520px;line-height:1.65;margin-bottom:34px;}
  .hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
  .btn-primary{
    padding:15px 28px;border-radius:10px;font-weight:600;font-size:15px;
    background:var(--white);color:#05070d;
    transition:transform .25s,box-shadow .25s;
    display:inline-flex;align-items:center;gap:10px;
  }
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(245,247,251,0.15);}
  .btn-ghost{
    padding:15px 22px;border-radius:10px;font-size:15px;color:var(--mist);
    border:1px solid rgba(199,206,219,0.3);transition:all .25s;
    display:inline-flex;align-items:center;gap:8px;
    backdrop-filter:blur(6px);
  }
  .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);}

  .hero-stats{display:flex;gap:36px;margin-top:48px;flex-wrap:wrap;}
  .stat b{font-family:'Space Grotesk';font-size:26px;display:block;}
  .stat span{font-size:12px;color:var(--mist-dim);font-family:'JetBrains Mono';text-transform:uppercase;letter-spacing:0.06em;}

  .scroll-cue{
    position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:6px;
    font-family:'JetBrains Mono';font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--mist-dim);transition:opacity .3s;
  }
  .scroll-cue svg{animation:cueBounce 1.8s ease-in-out infinite;}
  @keyframes cueBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

  /* ---------- Marquee ----------
     JS clones the track enough times to always overflow the viewport by 2x+,
     so the belt never runs out of content no matter the screen width. */
  .marquee-wrap{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:22px 0;overflow:hidden;background:var(--void-2);
    position:relative;
  }
  .marquee-track{display:flex;width:max-content;will-change:transform;position:relative;z-index:2;}
  .marquee-set{display:flex;gap:60px;white-space:nowrap;padding-right:60px;}
  .marquee span{
    font-family:'Space Grotesk';font-size:15px;color:var(--mist-dim);
    display:flex;align-items:center;gap:10px;
  }
  .marquee span::before{content:'◆';color:var(--cyan);font-size:8px;}

  /* ---------- Section heading ---------- */
  .sec-head{max-width:640px;margin-bottom:56px;}
  .sec-head .eyebrow{margin-bottom:18px;}
  .sec-head h2{font-size:clamp(28px,3.4vw,42px);font-weight:600;margin-bottom:16px;line-height:1.15;}
  .sec-head p{color:var(--mist);font-size:16px;line-height:1.6;}

  section.pad{padding:120px 0;}

  /* ---------- Industries ---------- */
  .industry-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  }
  .industry-card{
    background:var(--void-2);padding:36px 30px;position:relative;overflow:hidden;
    transition:background .35s;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;
    cursor:default;
  }
  .industry-card::before{
    content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;
    background:radial-gradient(circle at 30% 20%, rgba(76,224,210,0.14), transparent 60%);
  }
  .industry-card:hover::before{opacity:1;}
  .industry-card:hover{background:var(--panel-2);}
  .industry-icon{width:38px;height:38px;margin-bottom:70px;color:var(--cyan);transition:transform .4s;}
  .industry-card:hover .industry-icon{transform:translateY(-6px) scale(1.05);}
  .industry-card h3{font-size:19px;font-weight:600;margin-bottom:8px;}
  .industry-card p{font-size:13.5px;color:var(--mist-dim);line-height:1.55;}
  .industry-tag{
    position:absolute;top:24px;right:24px;font-family:'JetBrains Mono';font-size:10px;
    color:var(--mist-dim);letter-spacing:0.08em;
  }

  /* ---------- Process ---------- */
  .process-list{border-top:1px solid var(--line);}
  .process-item{
    display:grid;grid-template-columns:70px 1fr 1.3fr;gap:30px;
    padding:34px 0;border-bottom:1px solid var(--line);align-items:start;
  }
  .process-num{font-family:'JetBrains Mono';color:var(--cyan);font-size:15px;padding-top:4px;}
  .process-item h3{font-size:20px;font-weight:600;margin-bottom:6px;}
  .process-item p{color:var(--mist);font-size:14.5px;line-height:1.6;max-width:520px;}

  /* ---------- Partners ---------- */
  .partners-row{
    display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:18px;overflow:hidden;
  }
  .partner-card{grid-column:span 2;}
  .partner-card:nth-child(4), .partner-card:nth-child(5){grid-column:span 3;}
  .partner-card{
    background:var(--void-2);padding:52px 30px;
    display:flex;align-items:center;justify-content:center;
    min-height:180px;
    transition:background .3s;
    perspective:600px;
  }
  .partner-card:hover{background:var(--panel-2);}
  .partner-card img{
    max-width:100%;max-height:64px;width:auto;height:auto;
    object-fit:contain;
    opacity:0.85;
    transition:transform .25s ease-out, opacity .3s ease;
    will-change:transform;
  }
  .partner-card:hover img{
    opacity:1;
  }

  /* ---------- CTA ---------- */
  .cta-band{
    border:1px solid var(--line);border-radius:24px;padding:70px 60px;
    background:radial-gradient(900px 300px at 20% 0%, rgba(123,97,255,0.14), transparent 60%),
      radial-gradient(900px 300px at 90% 100%, rgba(76,224,210,0.12), transparent 60%),
      var(--panel);
    display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;
  }
  .cta-band h2{font-size:clamp(24px,3vw,34px);font-weight:600;max-width:480px;line-height:1.2;}
  .cta-band p{color:var(--mist);margin-top:12px;max-width:440px;font-size:15px;}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:70px 0 34px;}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:60px;}
  .foot-brand .logo{margin-bottom:16px;}
  .foot-brand p{color:var(--mist-dim);font-size:14px;max-width:280px;line-height:1.6;}
  .foot-col h4{font-family:'JetBrains Mono';font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--mist-dim);margin-bottom:18px;}
  .foot-col a,.foot-col p{display:block;font-size:14px;color:var(--mist);margin-bottom:10px;transition:color .2s;}
  .foot-col a:hover{color:var(--cyan);}
  .foot-bottom{
    border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;
    font-size:12.5px;color:var(--mist-dim);flex-wrap:wrap;gap:10px;font-family:'JetBrains Mono';
  }

  /* ---------- Reveal on scroll ---------- */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}

  /* ---------- Responsive ---------- */
  @media(max-width:980px){
    .video-hero{height:800vh;}
    .nav-links{display:none;}
    .industry-grid{grid-template-columns:1fr;}
    .industry-card{justify-content:center;min-height:200px;}
    .industry-icon{margin-bottom:22px;}
    .partners-row{grid-template-columns:1fr;}
    .process-item{grid-template-columns:50px 1fr;}
    .process-item > p{grid-column:1/-1;padding-left:16px;margin-top:4px;}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .cta-band{flex-direction:column;align-items:flex-start;}
  }
  @media(max-width:560px){
    .foot-grid{grid-template-columns:1fr;}
    .hero-stats{flex-wrap:wrap;gap:24px;}
    .video-hero{height:620vh;}
    .scroll-cue{display:none;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
  }

/* ---------- Internal page hero (subpages without the scroll video) ---------- */
.page-hero{
  padding:168px 0 80px;
  position:relative;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(123,97,255,0.10), transparent 60%),
    radial-gradient(900px 420px at 90% 20%, rgba(76,224,210,0.08), transparent 60%);
}
.page-hero .eyebrow{margin-bottom:22px;}
.page-hero h1{font-size:clamp(32px,4.6vw,54px);line-height:1.08;font-weight:700;margin-bottom:18px;max-width:760px;}
.page-hero p{color:var(--mist);font-size:16.5px;line-height:1.65;max-width:600px;}
.page-hero .grad{
  background:linear-gradient(100deg,var(--cyan),var(--violet) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.breadcrumb{
  display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono';font-size:12px;
  color:var(--mist-dim);letter-spacing:0.04em;margin-bottom:24px;
}
.breadcrumb a:hover{color:var(--cyan);}
.breadcrumb .sep{opacity:0.5;}

/* ---------- Placeholder box (for media not yet supplied) ---------- */
.media-placeholder{
  border:1px dashed rgba(199,206,219,0.3);border-radius:16px;
  background:var(--void-2);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  color:var(--mist-dim);text-align:center;padding:40px 24px;min-height:260px;
}
.media-placeholder .ph-icon{width:34px;height:34px;color:var(--cyan);opacity:0.7;}
.media-placeholder b{font-family:'JetBrains Mono';font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--mist);}
.media-placeholder span{font-size:13px;max-width:320px;line-height:1.5;}

/* ---------- FAQ accordion ---------- */
.faq-list{border-top:1px solid var(--line);max-width:800px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--white);
  font-family:'Space Grotesk';font-size:17px;font-weight:600;cursor:pointer;
  padding:26px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.faq-q:hover{color:var(--cyan);}
.faq-q .faq-icon{flex-shrink:0;width:20px;height:20px;color:var(--mist-dim);transition:transform .3s;}
.faq-item.open .faq-q .faq-icon{transform:rotate(45deg);color:var(--cyan);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{color:var(--mist);font-size:15px;line-height:1.7;padding-bottom:26px;max-width:680px;}

/* ---------- Video grid ---------- */
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.video-card{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--void-2);
  transition:border-color .3s;
}
.video-card:hover{border-color:rgba(76,224,210,0.4);}
.video-card .media-placeholder{border:none;border-radius:0;min-height:220px;background:var(--panel);}
.video-card-body{padding:24px 26px 28px;}
.video-card-body h3{font-size:18px;font-weight:600;margin-bottom:10px;}
.video-card-body p{color:var(--mist);font-size:14px;line-height:1.6;}

/* ---------- Case studies grid ---------- */
.case-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;}
.case-card{grid-column:span 2;}
.case-card:nth-child(4), .case-card:nth-child(5){grid-column:span 3;}
.case-card{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--void-2);
  transition:border-color .3s, transform .3s;display:block;
}
.case-card:hover{border-color:rgba(76,224,210,0.4);transform:translateY(-4px);}
.case-card .media-placeholder{border:none;border-radius:0;min-height:170px;background:var(--panel);}
.case-card-body{padding:22px 24px 26px;}
.case-card-body .case-tag{font-family:'JetBrains Mono';font-size:11px;color:var(--cyan);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:10px;display:block;}
.case-card-body h3{font-size:18px;font-weight:600;margin-bottom:8px;}
.case-card-body p{color:var(--mist);font-size:13.5px;line-height:1.55;}

/* ---------- Project detail page ---------- */
.project-body{max-width:760px;}
.project-body p{color:var(--mist);font-size:16px;line-height:1.75;margin-bottom:22px;}
.project-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px;}
.project-gallery .media-placeholder{min-height:220px;}
.project-gallery .span-2{grid-column:1/-1;}
.project-meta{
  display:flex;flex-direction:column;gap:22px;padding:28px;border:1px solid var(--line);
  border-radius:16px;background:var(--void-2);height:fit-content;
}
.project-meta .meta-row b{display:block;font-family:'JetBrains Mono';font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--mist-dim);margin-bottom:6px;}
.project-meta .meta-row span{font-size:15px;font-weight:600;}
.project-grid{display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:start;}

/* ---------- Contact form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.contact-form{display:flex;flex-direction:column;gap:18px;}
.form-row{display:flex;flex-direction:column;gap:8px;}
.form-row label{font-family:'JetBrains Mono';font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--mist-dim);}
.form-row input, .form-row textarea{
  background:var(--void-2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;color:var(--white);font-family:'Inter';font-size:15px;
  transition:border-color .25s;
}
.form-row input:focus, .form-row textarea:focus{outline:none;border-color:var(--cyan);}
.form-row textarea{resize:vertical;min-height:130px;}
.form-submit{
  padding:15px 28px;border-radius:10px;font-weight:600;font-size:15px;
  background:var(--white);color:#05070d;border:none;cursor:pointer;
  transition:transform .25s,box-shadow .25s;display:inline-flex;align-items:center;gap:10px;
  width:fit-content;font-family:'Inter';
}
.form-submit:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(245,247,251,0.15);}
.form-note{color:var(--mist-dim);font-size:13px;margin-top:4px;}
.contact-info-card{
  border:1px solid var(--line);border-radius:16px;padding:32px;background:var(--void-2);
  display:flex;flex-direction:column;gap:24px;
}
.contact-info-row b{display:block;font-family:'JetBrains Mono';font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--mist-dim);margin-bottom:6px;}
.contact-info-row span, .contact-info-row a{font-size:16px;font-weight:600;display:block;}
.contact-info-row a:hover{color:var(--cyan);}
.form-success{
  display:none;padding:16px 18px;border-radius:10px;background:rgba(76,224,210,0.1);
  border:1px solid rgba(76,224,210,0.35);color:var(--cyan);font-size:14px;
}
.form-success.show{display:block;}

/* ---------- Legal / prose pages ---------- */
.legal-content{max-width:760px;}
.legal-content h2{font-size:22px;font-weight:600;margin:36px 0 14px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{color:var(--mist);font-size:15.5px;line-height:1.75;margin-bottom:16px;}
.legal-content ul{color:var(--mist);font-size:15.5px;line-height:1.75;margin:0 0 16px 20px;}
.legal-updated{font-family:'JetBrains Mono';font-size:12px;color:var(--mist-dim);margin-bottom:40px;display:block;}

/* ---------- About page ---------- */
.about-block{max-width:820px;margin-bottom:64px;}
.about-block p{color:var(--mist);font-size:16px;line-height:1.75;margin-bottom:18px;}
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:64px;}
.mission-card{border:1px solid var(--line);border-radius:16px;padding:34px;background:var(--void-2);}
.mission-card h3{font-size:19px;font-weight:600;margin-bottom:14px;color:var(--cyan);}
.mission-card p{color:var(--mist);font-size:15px;line-height:1.7;}
.why-list{list-style:none;display:flex;flex-direction:column;gap:16px;max-width:640px;}
.why-list li{display:flex;gap:14px;color:var(--mist);font-size:15.5px;line-height:1.6;align-items:flex-start;}
.why-list li svg{flex-shrink:0;width:20px;height:20px;color:var(--cyan);margin-top:2px;}

@media(max-width:980px){
  .video-grid{grid-template-columns:1fr;}
  .case-grid{grid-template-columns:1fr;}
  .project-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .mission-grid{grid-template-columns:1fr;}
  .project-gallery{grid-template-columns:1fr;}
}

/* =========================================================================
   V8 — MATERIAL & MOTION UPGRADE
   Signature idea: the brand's own subject is optical — a VR lens. Every new
   effect here is a variation on "light hitting glass": a cursor-tracked lens
   sheen on cards, a liquid-glass nav capsule, a lens-flare button sweep, and
   a soft filmic grain across the whole page. Purely additive: nothing above
   this line is modified, so existing behaviour is untouched.
   ========================================================================= */

/* ---------- Filmic grain (whole viewport, ultra subtle) ---------- */
.grain-overlay{
  position:fixed;inset:-120px;z-index:300;pointer-events:none;
  opacity:0.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
}
@media(max-width:820px){ .grain-overlay{opacity:0.035;} }

/* ---------- Scroll progress (thin lens-flare gradient line) ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:250;
  background:linear-gradient(90deg,var(--cyan),var(--violet) 60%,var(--flare));
  box-shadow:0 0 14px rgba(76,224,210,0.5);
  pointer-events:none;user-select:none;
}

/* ---------- Header: liquid-glass state on scroll ---------- */
header{transition:background .4s ease, box-shadow .4s ease, border-color .4s ease;}
header::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.32) 45%,rgba(76,224,210,0.4) 60%,transparent);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
header.is-scrolled{
  background:rgba(8,11,19,0.74);
  box-shadow:0 14px 40px rgba(0,0,0,0.38);
  border-bottom-color:rgba(199,206,219,0.16);
}
header.is-scrolled::before{opacity:1;}
header.is-scrolled nav{padding-top:14px;padding-bottom:14px;}
nav{transition:padding .4s ease;}

/* ---------- Cursor-reactive lens sheen on cards ----------
   JS (common.js) sets --mx/--my per card on mousemove; pure CSS otherwise,
   so cards with no JS (or touch devices) just never show the sheen. */
.industry-card,.case-card,.video-card,.partner-card,.mission-card,.contact-info-card,.other-case-card{
  position:relative;isolation:isolate;overflow:hidden;
}
.industry-card::after,.case-card::after,.video-card::after,.partner-card::after,
.mission-card::after,.contact-info-card::after,.other-case-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:0;transition:opacity .4s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    rgba(76,224,210,0.16), rgba(123,97,255,0.07) 45%, transparent 70%);
}
.industry-card:hover::after,.case-card:hover::after,.video-card:hover::after,
.partner-card:hover::after,.mission-card:hover::after,.contact-info-card:hover::after,
.other-case-card:hover::after{
  opacity:1;
}

/* ---------- Industry icon: soft glow ring on hover ---------- */
.industry-card:hover .industry-icon{filter:drop-shadow(0 0 14px rgba(76,224,210,0.55));}

/* ---------- Buttons: lens-flare sweep + magnetic pull ----------
   Magnetic translate is applied inline by JS; the sweep is pure CSS. */
.btn-primary,.nav-cta,.form-submit{position:relative;overflow:hidden;will-change:transform;}
.btn-primary::after,.nav-cta::after,.form-submit::after{
  content:'';position:absolute;top:0;left:-60%;width:36%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,0.55),transparent);
  transform:skewX(-18deg);transition:left .65s ease;pointer-events:none;
}
.btn-primary:hover::after,.nav-cta:hover::after,.form-submit:hover::after{left:130%;}

/* ---------- Kinetic word reveal (section headlines) ----------
   JS wraps plain-text h2 into per-word spans; falls back to the existing
   whole-block .reveal fade if JS/markup makes wrapping unsafe. */
.kinetic-word{
  display:inline-block;opacity:0;transform:translateY(0.5em);filter:blur(6px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  transition-delay:calc(var(--i,0) * 45ms);
}
.reveal.in .kinetic-word{opacity:1;transform:translateY(0);filter:blur(0);}

/* ---------- Ambient aurora drift (very slow, very quiet) ---------- */
@keyframes auroraDrift{
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(3%,-4%) scale(1.06);}
  100%{transform:translate(0,0) scale(1);}
}
.sec-head{position:relative;}
.sec-head::before{
  content:'';position:absolute;top:-70px;left:-120px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(123,97,255,0.10),transparent 65%);
  animation:auroraDrift 22s ease-in-out infinite;pointer-events:none;
}
.cta-band::before{
  content:'';position:absolute;inset:-40% -10%;
  background:radial-gradient(340px 220px at 15% 20%,rgba(76,224,210,0.14),transparent 70%);
  animation:auroraDrift 26s ease-in-out infinite;pointer-events:none;
}
.cta-band{overflow:hidden;}
.cta-band > *{position:relative;}

/* ---------- Hero captions: liquid-glass top edge ---------- */
.hero-caption{overflow:hidden;}
.hero-caption::before{
  content:'';position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);
}

@media (prefers-reduced-motion: reduce){
  .grain-overlay,.sec-head::before,.cta-band::before{animation:none;}
}

/* ---------- V8.1 — smooth transform transitions for the new 3D tilt ----------
   Some cards already had a transition covering other properties (border,
   background); these re-declarations add "transform" into that same list so
   nothing that was already animating loses its transition. */
.industry-card{transition:background .35s, transform .3s cubic-bezier(.2,.7,.2,1);}
.video-card{transition:border-color .3s, transform .3s cubic-bezier(.2,.7,.2,1);}
.mission-card{transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.other-case-card{transition:background .3s, transform .3s cubic-bezier(.2,.7,.2,1);}

/* =========================================================================
   V9 — Content fixes: real logos replacing placeholders/unstyled initials
   ========================================================================= */

/* ---------- Case card logo tile (casos-de-exito.html grid) ---------- */
.case-logo-tile{
  background:
    radial-gradient(420px 200px at 20% 0%, rgba(123,97,255,0.10), transparent 60%),
    radial-gradient(420px 200px at 90% 100%, rgba(76,224,210,0.08), transparent 60%),
    var(--panel);
  min-height:170px;
  display:flex;align-items:center;justify-content:center;
  padding:40px 30px;
}
.case-logo-tile img{
  max-width:76%;max-height:56px;object-fit:contain;
  opacity:0.88;filter:grayscale(0.1);
  transition:opacity .3s ease, transform .3s ease;
}
.case-card:hover .case-logo-tile img{opacity:1;transform:scale(1.05);}

/* ---------- "Otros casos de éxito" tiles (project detail pages) ----------
   Replaces the old unstyled .partner-mark text-initial boxes with the same
   brand logos used everywhere else, so the identity stays consistent site-wide. */
.other-case-card{
  background:var(--void-2);
  padding:34px 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:180px;text-align:center;
  transition:background .3s;
}
.other-case-card:hover{background:var(--panel-2);}
.other-case-card img{
  max-height:38px;max-width:80%;object-fit:contain;
  opacity:0.85;transition:opacity .3s ease, transform .3s ease;
}
.other-case-card:hover img{opacity:1;transform:scale(1.05);}
.other-case-card b{font-size:15px;font-weight:600;color:var(--white);}
.other-case-card span{font-size:12px;color:var(--mist-dim);font-family:'JetBrains Mono';letter-spacing:0.02em;}
.other-case-arrow{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(199,206,219,0.3);color:var(--mist);
  font-size:16px;transition:border-color .3s, color .3s, transform .3s;
}
.other-case-all:hover .other-case-arrow{border-color:var(--cyan);color:var(--cyan);transform:translateX(3px);}

/* =========================================================================
   V9 — Video interaction: colorful hover glow + click-to-expand lightbox
   ========================================================================= */

/* ---------- Colorful hover glow (replaces the plain cyan border) ----------
   box-shadow always escapes overflow:hidden, so this still works even though
   the card itself clips its own content to the rounded corners. */
.video-card{transition:border-color .35s ease, box-shadow .4s ease, transform .3s cubic-bezier(.2,.7,.2,1);}
.video-card:hover{
  border-color:rgba(76,224,210,0.5);
  box-shadow:
    0 0 0 1px rgba(76,224,210,0.3),
    -14px 14px 36px -12px rgba(76,224,210,0.4),
    14px -8px 32px -12px rgba(123,97,255,0.4),
    0 18px 44px -14px rgba(255,107,74,0.28);
}
.media-placeholder.project-gallery-hero{transition:border-color .35s ease, box-shadow .4s ease;}
.project-gallery-hero:hover{
  box-shadow:
    0 0 0 1px rgba(76,224,210,0.3),
    -14px 14px 36px -12px rgba(76,224,210,0.35),
    14px -8px 32px -12px rgba(123,97,255,0.35),
    0 18px 44px -14px rgba(255,107,74,0.24);
}

/* ---------- Any tile wired to a real clip via data-video-src ---------- */
[data-video-src]{cursor:pointer;position:relative;}
[data-video-src] .video-play-badge{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
[data-video-src] .video-play-badge svg{
  width:56px;height:56px;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.5));
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
[data-video-src]:hover .video-play-badge svg{transform:scale(1.12);}

/* ---------- Lightbox ---------- */
.video-lightbox-backdrop{
  position:fixed;inset:0;z-index:1000;
  background:rgba(5,7,13,0.88);
  backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
  padding:56px 40px;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.video-lightbox-backdrop.open{opacity:1;pointer-events:auto;}
.video-lightbox{
  position:relative;width:min(860px, 100%);
  aspect-ratio:16/9;
  border-radius:20px;overflow:hidden;
  background:#000;
  box-shadow:
    0 50px 130px rgba(0,0,0,0.65),
    0 0 0 1px rgba(199,206,219,0.14),
    0 0 80px -10px rgba(76,224,210,0.25);
  transform:scale(0.94);transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.video-lightbox-backdrop.open .video-lightbox{transform:scale(1);}
.video-lightbox video{width:100%;height:100%;object-fit:contain;background:#000;display:block;}
.video-lightbox-close{
  position:absolute;top:-48px;right:0;z-index:2;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid rgba(199,206,219,0.22);
  color:var(--white);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;line-height:1;
  transition:background .2s, transform .2s, border-color .2s;
}
.video-lightbox-close:hover{background:rgba(76,224,210,0.16);border-color:var(--cyan);transform:scale(1.08);}
@media(max-width:820px){
  .video-lightbox-backdrop{padding:20px;}
  .video-lightbox-close{top:-40px;right:0;}
}

/* =========================================================================
   V12 — Real 3D hero objects, pure CSS (cube3d.js). Spread across the full
   hero width rather than clustered in one corner; far and near layers are
   softly blurred, mid is sharp — a simple but convincing depth of field.
   ========================================================================= */
.hero3d{
  position:absolute;top:0;left:0;right:0;bottom:0;
  pointer-events:none;z-index:0;
  perspective:900px;
}

.hero3d-reveal{
  position:absolute;top:460px;left:0;right:0;height:280px;
  pointer-events:none;
  opacity:0;transform:translateY(30px);
  transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.hero3d-reveal.in{opacity:1;transform:translateY(0);}
.hero3d-reveal-alt{ top:10px; height:220px; }

.cube-layer{ position:absolute; transform-style:preserve-3d; }
.cube-far{ filter:blur(3px); opacity:0.5; }
.cube-mid{ filter:blur(0); opacity:1; }
.cube-mid::after{
  content:'';position:absolute;inset:-30%;z-index:-1;
  background:radial-gradient(circle, rgba(76,224,210,0.14), transparent 70%);
  filter:blur(20px);
}
.cube-near{ filter:blur(1.5px); opacity:0.88; }

.cube3d{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
}
.cube3d .face{
  position:absolute;top:0;left:0;
  border:1px solid rgba(76,224,210,0.45);
  background:linear-gradient(135deg, rgba(76,224,210,0.32), rgba(123,97,255,0.22));
  box-shadow:inset 0 0 24px rgba(76,224,210,0.10);
}
.cube3d.hue-violet .face{
  border-color:rgba(123,97,255,0.5);
  background:linear-gradient(135deg, rgba(123,97,255,0.32), rgba(76,224,210,0.2));
  box-shadow:inset 0 0 24px rgba(123,97,255,0.12);
}
.cube-mid .cube3d .face{
  box-shadow:inset 0 0 30px rgba(76,224,210,0.16), 0 0 26px rgba(76,224,210,0.18);
}
.cube-mid .cube3d.hue-violet .face{
  box-shadow:inset 0 0 30px rgba(123,97,255,0.18), 0 0 26px rgba(123,97,255,0.2);
}
/* Wireframe variant: hollow, edges only — reads as a glass cage rather
   than a solid block, a deliberately different material from the rest. */
.cube3d.style-wire .face{
  background:transparent;
  border:1.5px solid rgba(76,224,210,0.65);
  box-shadow:none;
}
.cube3d.style-wire.hue-violet .face{
  border-color:rgba(123,97,255,0.7);
}

/* =========================================================================
   V11 — Real embedded video tiles (project pages + videos grid): hover
   auto-plays a small muted preview in place, click expands to the lightbox.
   Same colorful glow language as before, tuned to read more clearly as
   "the edge itself lights up" per feedback, plus a much more pronounced
   3D tilt toward the cursor (JS-driven, see common.js).
   ========================================================================= */
.video-tile{
  position:relative;overflow:hidden;border-radius:16px;
  border:1px solid var(--line);background:var(--void-2);
  min-height:340px;cursor:pointer;isolation:isolate;
  transition:border-color .3s ease, box-shadow .4s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.video-tile video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:var(--void-2);
}
.video-tile-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:2;
}
.video-tile-play svg{
  width:30px;height:30px;color:#05070d;
}
.video-tile-play .play-circle{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
  opacity:0.92;transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.video-tile:hover .video-tile-play .play-circle{opacity:0;transform:scale(0.7);}
.video-tile::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    rgba(76,224,210,0.16), rgba(123,97,255,0.07) 45%, transparent 70%);
}
.video-tile:hover::after{opacity:1;}
.video-tile:hover, .video-card:hover{
  border-color:rgba(76,224,210,0.65);
  box-shadow:
    0 0 0 2px rgba(76,224,210,0.4),
    -16px 16px 40px -12px rgba(76,224,210,0.45),
    16px -10px 36px -12px rgba(123,97,255,0.45),
    0 20px 48px -14px rgba(255,107,74,0.32);
}

/* ---------- Video-card preview video element (videos.html grid) ---------- */
.video-card{cursor:pointer;}
.video-card .media-placeholder{position:relative;overflow:hidden;}
.video-card .media-placeholder video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.video-card .media-placeholder > .ph-icon,
.video-card .media-placeholder > b,
.video-card .media-placeholder > span{ position:relative; z-index:1; }
.video-card .video-tile-play{ z-index:2; }

/* =========================================================================
   V14 — Real gallery photos (frame grabs from client videos), replacing
   the "Aquí iría foto" placeholders on project detail pages.
   ========================================================================= */
.gallery-photo{
  position:relative;overflow:hidden;border-radius:14px;
  border:1px solid var(--line);min-height:220px;
  isolation:isolate;
}
.gallery-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.gallery-photo:hover img{transform:scale(1.06);}
.gallery-photo::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg, rgba(5,7,13,0.75) 0%, rgba(5,7,13,0.1) 40%, transparent 65%);
}
.gallery-photo span{
  position:absolute;left:16px;right:16px;bottom:14px;z-index:2;
  font-family:'JetBrains Mono';font-size:12px;color:var(--mist);
  letter-spacing:0.02em;
}
.gallery-photo.span-2{grid-column:1/-1;min-height:240px;}

/* =========================================================================
   V14 — Logo showcase (contacto.html): replaces the map placeholder since
   there's no physical location yet. The wordmark tilts toward the cursor
   in 3D, same tactile language as the video tiles elsewhere on the site.
   ========================================================================= */
.logo-showcase{
  min-height:200px;border-radius:16px;border:1px solid var(--line);
  background:
    radial-gradient(420px 200px at 20% 0%, rgba(123,97,255,0.10), transparent 60%),
    radial-gradient(420px 200px at 90% 100%, rgba(76,224,210,0.08), transparent 60%),
    var(--void-2);
  display:flex;align-items:center;justify-content:center;
  padding:50px 30px;position:relative;overflow:hidden;isolation:isolate;
  transition:border-color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.logo-showcase::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    rgba(76,224,210,0.18), rgba(123,97,255,0.08) 45%, transparent 70%);
}
.logo-showcase:hover::after{opacity:1;}
.logo-showcase:hover{border-color:rgba(76,224,210,0.35);}
.logo-showcase-img{
  width:68%;max-width:320px;display:block;
  filter:drop-shadow(0 18px 40px rgba(76,224,210,0.18));
}

/* =========================================================================
   V15 — Mobile dropdown menu: appears whenever the horizontal nav-links
   are hidden (phones, and tablets in portrait), positioned next to
   Contáctanos since that button stays visible at every width.
   ========================================================================= */
.nav-burger{
  display:none;
  width:34px;height:34px;flex-shrink:0;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;margin-left:12px;padding:0;
}
.nav-burger span{width:22px;height:2px;background:var(--white);transition:transform .3s ease, opacity .3s ease;border-radius:1px;}
.nav-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.active span:nth-child(2){opacity:0;}
.nav-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-mobile-panel{
  position:absolute;top:100%;left:0;right:0;z-index:99;
  background:rgba(8,11,19,0.97);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;padding:6px 32px 20px;
  opacity:0;transform:translateY(-8px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.nav-mobile-panel.open{opacity:1;transform:translateY(0);pointer-events:auto;}
.nav-mobile-panel a{
  padding:15px 0;color:var(--mist);font-size:16px;
  border-bottom:1px solid var(--line);
}
.nav-mobile-panel a:last-child{border-bottom:none;}
.nav-mobile-panel a.active{color:var(--white);font-weight:600;}

@media(max-width:980px){
  .nav-burger{display:flex;}
}

/* =========================================================================
   V16 — Intro splash: a frosted-glass overlay with the Arssio mark, shown
   once per browsing session on first entry to the site. Sequence: hold →
   the logo fades out → the glass blur fades out → gone, revealing the page.
   ========================================================================= */
.intro-splash{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,7,13,0.55);
  backdrop-filter:blur(30px) saturate(120%);
  -webkit-backdrop-filter:blur(30px) saturate(120%);
  transition:opacity 0.9s ease;
}
.intro-splash-logo-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.intro-splash-logo-wrap::before{
  content:'';position:absolute;inset:-15%;z-index:0;
  background:radial-gradient(circle, rgba(76,224,210,0.10), transparent 70%);
  filter:blur(30px);
  transition:opacity 0.6s ease;
}
.intro-splash-logo{
  position:relative;z-index:1;
  width:min(190px, 34vw);height:auto;display:block;
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.intro-splash.logo-out .intro-splash-logo{opacity:0;transform:scale(0.92);}
.intro-splash.logo-out .intro-splash-logo-wrap::before{opacity:0;}
.intro-splash.blur-out{opacity:0;pointer-events:none;}

/* =========================================================================
   V17 — "Otros casos de éxito" on project pages: a responsive auto-fit grid
   (not the fixed partners-row used on the homepage), since the item count
   here will keep growing as more case studies are added. It naturally
   shows more columns on wide screens and fewer on narrow ones — no
   hardcoded breakpoints or item-count assumptions to maintain.
   ========================================================================= */
.other-cases-row{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;
}

/* =========================================================================
   V19 — Mobile "centered card" glow: touch devices have no cursor, so
   :hover never fires. This mirrors every hover-glow rule above with a
   .mock-hover class instead, toggled by JS (common.js) based on which
   card is centered in the viewport while scrolling — same illuminated
   look, just triggered by scroll position instead of the mouse.
   ========================================================================= */
.industry-card.mock-hover::before{opacity:1;}
.industry-card.mock-hover{background:var(--panel-2);}
.industry-card.mock-hover .industry-icon{transform:translateY(-6px) scale(1.05);filter:drop-shadow(0 0 14px rgba(76,224,210,0.55));}
.partner-card.mock-hover{background:var(--panel-2);}
.partner-card.mock-hover img{opacity:1;}
.video-card.mock-hover{border-color:rgba(76,224,210,0.4);}
.case-card.mock-hover{border-color:rgba(76,224,210,0.4);transform:translateY(-4px);}
.industry-card.mock-hover::after,.case-card.mock-hover::after,.video-card.mock-hover::after,
.partner-card.mock-hover::after,.mission-card.mock-hover::after,.contact-info-card.mock-hover::after,
.other-case-card.mock-hover::after,.video-tile.mock-hover::after,.logo-showcase.mock-hover::after{
  opacity:1;
}
.case-card.mock-hover .case-logo-tile img{opacity:1;transform:scale(1.05);}
.other-case-card.mock-hover{background:var(--panel-2);}
.other-case-card.mock-hover img{opacity:1;transform:scale(1.05);}
.other-case-all.mock-hover .other-case-arrow{border-color:var(--cyan);color:var(--cyan);transform:translateX(3px);}
.video-card.mock-hover,.video-tile.mock-hover{
  border-color:rgba(76,224,210,0.65);
  box-shadow:
    0 0 0 2px rgba(76,224,210,0.4),
    -16px 16px 40px -12px rgba(76,224,210,0.45),
    16px -10px 36px -12px rgba(123,97,255,0.45),
    0 20px 48px -14px rgba(255,107,74,0.32);
}
.logo-showcase.mock-hover{border-color:rgba(76,224,210,0.35);}