:root{--c:#00d4ff;--p:#7b2fff;--a:#ff2d6b;--bg:#000810;--cb:rgba(255,255,255,.04);--cb2:rgba(0,212,255,.15);--nav:80px;}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:#fff;font-family:'Segoe UI',system-ui,sans-serif;cursor:none;}

/* ── LOADER ── */
#loader{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;transition:opacity .6s,visibility .6s;}
#loader.gone{opacity:0;visibility:hidden;pointer-events:none;}
.ld-logo{font-size:2rem;font-weight:900;letter-spacing:.5em;color:var(--c);text-shadow:0 0 40px var(--c);}
.ld-bar{width:280px;height:2px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;}
.ld-fill{height:100%;background:linear-gradient(90deg,var(--p),var(--c));width:0;transition:width .12s;}
.ld-msg{font-size:.65rem;letter-spacing:.22em;color:rgba(255,255,255,.35);}

/* ── PORTAL OVERLAY ── */
#portal{display:none;}

/* ── CURSOR ── */
#cur{position:fixed;width:8px;height:8px;background:var(--c);border-radius:50%;pointer-events:none;z-index:9999;box-shadow:0 0 12px var(--c),0 0 4px #fff;}
#cur-ring{position:fixed;width:28px;height:28px;border:1px solid rgba(0,212,255,.7);border-radius:50%;pointer-events:none;z-index:9998;opacity:.7;transition:width .2s,height .2s,border-color .2s;}
#cur-ring.big{width:46px;height:46px;border-color:var(--p);opacity:1;}
#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* ── NAV SIDEBAR ── */
#nav{position:fixed;left:0;top:0;width:var(--nav);height:100%;z-index:100;display:flex;flex-direction:column;align-items:center;padding:2rem 0;gap:0;border-right:1px solid rgba(0,212,255,.1);background:rgba(0,8,16,.75);backdrop-filter:blur(24px);}
.nav-logo{font-size:.68rem;font-weight:900;letter-spacing:.15em;color:var(--c);margin-bottom:2.5rem;writing-mode:vertical-rl;transform:rotate(180deg);}
#nav ul{list-style:none;display:flex;flex-direction:column;gap:2rem;flex:1;}
#nav ul li a{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-decoration:none;color:rgba(255,255,255,.28);transition:color .3s;}
#nav ul li a:hover,#nav ul li a.active{color:var(--c);}
.nk{font-size:.54rem;letter-spacing:.12em;}
.nl{font-size:.46rem;letter-spacing:.14em;writing-mode:vertical-rl;transform:rotate(180deg);}
.nav-ind{width:2px;height:22px;background:var(--c);box-shadow:0 0 10px var(--c);margin-top:auto;border-radius:2px;}

/* ── MAIN & SECTIONS ── */
#main{position:fixed;left:var(--nav);top:0;width:calc(100% - var(--nav));height:100%;overflow:hidden;}
.section{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;}
.section.active{opacity:1;pointer-events:all;}
.section.warp-exit,.section.warp-enter{transition:none;}

/* ── HERO ── */
.hero-rings{position:absolute;left:65%;top:50%;transform:translate(-50%,-50%);pointer-events:none;}
.ring{position:absolute;border-radius:50%;border:1px solid;animation:spin linear infinite;transform:translate(-50%,-50%);}
.r1{width:280px;height:280px;border-color:rgba(0,212,255,.25);animation-duration:18s;}
.r2{width:460px;height:460px;border-color:rgba(123,47,255,.18);animation-duration:32s;animation-direction:reverse;}
.r3{width:620px;height:620px;border-color:rgba(0,212,255,.08);animation-duration:50s;}
.orb{position:absolute;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.25),transparent 70%);transform:translate(-50%,-50%);box-shadow:0 0 80px rgba(0,212,255,.18);animation:pulse 3s ease-in-out infinite;}
.hero-content{position:relative;z-index:2;max-width:620px;padding-left:4rem;}
.tag{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--c);margin-bottom:.9rem;opacity:.85;}
.glitch{font-size:clamp(4rem,10vw,8rem);font-weight:900;line-height:1;letter-spacing:-.02em;position:relative;text-shadow:0 0 50px rgba(0,212,255,.25);}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;}
.glitch::before{color:var(--p);clip-path:polygon(0 30%,100% 30%,100% 55%,0 55%);animation:gb 4s infinite step-start;}
.glitch::after{color:var(--c);clip-path:polygon(0 60%,100% 60%,100% 80%,0 80%);animation:ga 3s 1.5s infinite step-start;}
.hero-sub{font-size:.93rem;color:rgba(255,255,255,.5);line-height:1.85;margin:1.5rem 0 1.2rem;}
.hero-sub strong{color:rgba(255,255,255,.85);font-weight:600;}
.hero-features{display:flex;gap:1rem;flex-wrap:wrap;margin:1.2rem 0 1.8rem;}
.hf-item{display:flex;align-items:center;gap:.6rem;background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.18);border-radius:4px;padding:.55rem .9rem;}
.hf-icon{font-size:1.1rem;line-height:1;flex-shrink:0;}
.hf-item div{display:flex;flex-direction:column;gap:.1rem;}
.hf-item strong{font-size:.76rem;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:.04em;white-space:nowrap;}
.hf-item small{font-size:.64rem;color:rgba(255,255,255,.38);letter-spacing:.03em;}
.btns{display:flex;gap:1rem;flex-wrap:wrap;}
.scroll-hint{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.58rem;letter-spacing:.22em;color:rgba(255,255,255,.25);}
.scroll-hint span{width:1px;height:36px;background:linear-gradient(to bottom,transparent,var(--c));animation:sh .9s ease-in-out infinite alternate;}

/* ── PROGRAM CARDS ── */
.sec-head{position:absolute;top:3rem;left:3rem;}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;margin-top:.4rem;}
/* Perspective unifiée sur le conteneur pour un espace 3D cohérent */
.pgrid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;
  width:100%;max-width:860px;padding:0 3rem;margin-top:3rem;
  perspective:1100px;perspective-origin:50% 50%;
}

/* ── PCARD — base ── */
.pcard{
  position:relative; display:block; text-decoration:none; color:inherit; cursor:pointer;
  padding:2rem; background:var(--cb); border:1px solid var(--cb2);
  border-radius:6px; overflow:hidden; z-index:1;
  /* Pas de perspective() ici — héritée du parent .pgrid */
  transform: rotateY(calc(var(--ty,0) * 1deg))
             rotateX(calc(var(--tx,0) * 1deg))
             scale(1) translateZ(0);
  transition: transform .55s cubic-bezier(.23,1,.32,1),
              opacity    .55s ease,
              filter     .55s ease,
              border-color .35s,
              box-shadow   .45s;
}

/* Radial shine (holographic) */
.pcard::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,212,255,.13),transparent 58%);
  opacity:0;transition:opacity .35s;z-index:0;
}
.pcard:hover::before{opacity:1;}

/* Scan line sweep (futuristic reveal on focused card) */
.pcard::after{
  content:'';position:absolute;left:-8%;width:116%;top:-3px;
  height:2px;pointer-events:none;z-index:20;
  background:linear-gradient(90deg,transparent 0%,rgba(0,212,255,.95) 35%,#fff 50%,rgba(123,47,255,.9) 65%,transparent 100%);
  box-shadow:0 0 14px rgba(0,212,255,.9),0 0 35px rgba(0,212,255,.5),0 0 70px rgba(123,47,255,.3);
  opacity:0;
}
/* Scan triggered only on the focused card */
.pgrid.has-hover .pcard:hover::after{animation:cardScan 2.2s linear infinite;}

@keyframes cardScan{
  0%  {top:-3px;opacity:0;}
  6%  {opacity:1;}
  94% {opacity:1;}
  100%{top:calc(100% + 3px);opacity:0;}
}

.pc-num{font-size:3.8rem;font-weight:900;position:absolute;top:.4rem;right:.9rem;color:rgba(0,212,255,.06);line-height:1;transition:color .4s,text-shadow .4s;}
.pcard h3{font-size:.94rem;font-weight:700;margin-bottom:.6rem;color:#fff;}
.pcard p{font-size:.8rem;color:rgba(255,255,255,.48);line-height:1.75;}
.pc-price{margin-top:1rem;padding-top:.75rem;border-top:1px solid rgba(0,212,255,.12);font-size:.85rem;font-weight:700;color:var(--c);letter-spacing:.06em;text-transform:uppercase;}
.pc-price span{display:block;font-size:.72rem;color:rgba(255,255,255,.32);font-weight:400;letter-spacing:.04em;text-transform:none;margin-top:.2rem;}

/* ──────────────────────────────────────────────
   PCARD — ZOOM SYSTEM
   3 autres : repoussés loin en arrière-plan
   Carte survolée : avant-plan surdimensionné
────────────────────────────────────────────── */

/* Les 3 cartes non survolées : plongent dans le fond */
.pgrid.has-hover .pcard{
  transform: scale(.65) translateZ(-100px);
  opacity:.14;
  filter:blur(5px) saturate(.15) brightness(.4) grayscale(.5);
  border-color:rgba(255,255,255,.03);
  box-shadow:none;
}

/* La carte survolée : jaillit vers l'avant */
.pgrid.has-hover .pcard:hover{
  transform:
    rotateY(calc(var(--ty,0) * 1deg))
    rotateX(calc(var(--tx,0) * 1deg))
    scale(1.26) translateZ(80px);
  opacity:1;filter:none;z-index:10;
  border-color:rgba(0,212,255,1);
  box-shadow:
    /* contour lumineux */
    0 0 0 1px rgba(0,212,255,.7),
    /* halo proche cyan */
    0 0 30px rgba(0,212,255,.7),
    /* halo moyen */
    0 0 75px rgba(0,212,255,.4),
    /* halo large violet */
    0 0 160px rgba(123,47,255,.25),
    /* ombre de profondeur */
    0 55px 110px rgba(0,0,0,.95);
}

/* Numéro plus visible sur la carte focalisée */
.pgrid.has-hover .pcard:hover .pc-num{
  color:rgba(0,212,255,.22);
  text-shadow:0 0 40px rgba(0,212,255,.7);
}

/* Shine interne plus intense sur la carte focalisée */
.pgrid.has-hover .pcard:hover::before{
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,212,255,.22) 0%,rgba(123,47,255,.09) 45%,transparent 70%);
}

/* ── STATS ── */
#stats{flex-direction:column;gap:0;}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;padding:0 4rem;margin-top:3rem;}
.scard{text-align:center;padding:2.5rem 1.5rem;background:var(--cb);border:1px solid var(--cb2);border-radius:6px;position:relative;overflow:hidden;}
.sc-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:130px;height:130px;border-radius:50%;border:1px solid rgba(0,212,255,.1);animation:spin 10s linear infinite;}
.sc-n{font-size:3rem;font-weight:900;color:var(--c);text-shadow:0 0 25px var(--c);position:relative;line-height:1;}
.sc-l{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-top:.6rem;position:relative;}

/* ── CONTACT ── */
#contact{position:relative;}
.cportal{position:absolute;right:8%;top:50%;transform:translateY(-50%);pointer-events:none;}
.cp-ring{position:absolute;border-radius:50%;border:1px solid;animation:spin linear infinite;transform:translate(-50%,-50%);}
.cr1{width:180px;height:180px;border-color:rgba(0,212,255,.2);animation-duration:10s;}
.cr2{width:340px;height:340px;border-color:rgba(123,47,255,.15);animation-duration:20s;animation-direction:reverse;}
.cr3{width:520px;height:520px;border-color:rgba(0,212,255,.06);animation-duration:38s;}
.contact-content{position:relative;z-index:2;max-width:560px;padding-left:4rem;}
.contact-content h2{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:900;line-height:1.15;margin:1rem 0 1.5rem;}
.contact-content h2 span{color:var(--c);text-shadow:0 0 40px rgba(0,212,255,.3);}
.contact-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 1.8rem;}
.ctag{font-size:.72rem;padding:.38rem .8rem;background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.2);border-radius:3px;color:rgba(255,255,255,.65);letter-spacing:.05em;white-space:nowrap;}
.contact-info{margin-top:1.8rem;font-size:.76rem;color:rgba(255,255,255,.28);letter-spacing:.1em;}

/* ── BUTTONS ── */
.btn-p,.btn-o{display:inline-block;padding:.72rem 2rem;border-radius:3px;font-size:.82rem;font-weight:600;text-decoration:none;letter-spacing:.08em;transition:all .3s;}
.btn-p{background:linear-gradient(135deg,var(--p),var(--c));color:#fff;box-shadow:0 0 22px rgba(0,212,255,.22);}
.btn-p:hover{box-shadow:0 0 40px rgba(0,212,255,.5),0 0 80px rgba(0,212,255,.15);transform:translateY(-2px);}
.btn-p.large{font-size:.95rem;padding:1rem 3rem;}
.btn-o{border:1px solid rgba(0,212,255,.4);color:var(--c);}
.btn-o:hover{background:rgba(0,212,255,.07);border-color:var(--c);transform:translateY(-2px);}

/* ── KEYFRAMES ── */
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes pulse{0%,100%{box-shadow:0 0 60px rgba(0,212,255,.18);}50%{box-shadow:0 0 100px rgba(0,212,255,.4);}}
@keyframes sh{to{transform:scaleY(1.6);opacity:.4;}}
@keyframes gb{0%,95%{opacity:0;}96%{opacity:.8;transform:translateX(-3px);}98%{transform:translateX(3px);}100%{opacity:0;}}
@keyframes ga{0%,92%{opacity:0;}93%{opacity:.7;transform:translateX(3px);}97%{transform:translateX(-2px);}100%{opacity:0;}}

/* ══════════════════════════════════════════════════════
   MOBILE NAV — bottom bar (visible only on mobile)
══════════════════════════════════════════════════════ */
#mob-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  height:56px;z-index:200;
  background:rgba(0,6,14,.94);backdrop-filter:blur(22px);
  border-top:1px solid rgba(0,212,255,.14);
  flex-direction:row;align-items:stretch;
}
.mn-link{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.18rem;text-decoration:none;
  color:rgba(255,255,255,.28);transition:color .25s,background .25s;
  position:relative;
}
.mn-link::after{
  content:'';position:absolute;top:0;left:20%;right:20%;
  height:1px;background:var(--c);
  transform:scaleX(0);transition:transform .3s;box-shadow:0 0 8px var(--c);
}
.mn-link.active::after,.mn-link:hover::after{transform:scaleX(1);}
.mn-link:hover,.mn-link.active{color:var(--c);}
.mn-k{font-size:.42rem;letter-spacing:.14em;opacity:.55;}
.mn-l{font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 1024px)
══════════════════════════════════════════════════════ */
@media(max-width:1024px){
  :root{--nav:64px;}
  .glitch{font-size:clamp(3rem,8vw,6rem);}
  .hero-content{max-width:520px;padding-left:3rem;}
  .r1{width:220px;height:220px;}
  .r2{width:360px;height:360px;}
  .r3{width:500px;height:500px;}
  .sgrid{gap:1.2rem;padding:0 2.5rem;}
  .pgrid{padding:0 2rem;gap:1.1rem;}
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 768px)
══════════════════════════════════════════════════════ */
@media(max-width:768px){
  :root{--nav:0px;}

  /* Cursor off */
  #cur,#cur-ring{display:none;}
  html,body{cursor:auto;}

  /* Layout */
  #nav{display:none;}
  #mob-nav{display:flex;}
  #main{left:0;width:100%;height:calc(100% - 56px);}

  /* Hero */
  .hero-rings{left:50%;top:32%;opacity:.14;}
  .r1{width:160px;height:160px;}
  .r2{width:280px;height:280px;}
  .r3{width:390px;height:390px;}
  .hero-content{padding:1.8rem;max-width:100%;}
  .glitch{font-size:clamp(2.8rem,12vw,4.2rem);}
  .hero-sub{font-size:.84rem;line-height:1.75;margin:1rem 0 .9rem;}
  .hero-features{flex-direction:column;gap:.45rem;}
  .hf-item{width:100%;}
  .btns{flex-direction:column;gap:.65rem;}
  .btn-p,.btn-o{text-align:center;width:100%;}
  .scroll-hint{display:none;}

  /* Programs: vertically scrollable column */
  #programs{
    flex-direction:column;align-items:flex-start;
    justify-content:flex-start;overflow-y:auto;
    -webkit-overflow-scrolling:touch;padding-top:0;
  }
  .sec-head{
    position:relative;top:auto;left:auto;
    padding:1.6rem 1.4rem .6rem;width:100%;
  }
  .pgrid{
    grid-template-columns:1fr;padding:0 1.4rem 1.4rem;
    margin-top:.3rem;max-width:100%;width:100%;gap:1rem;
  }
  /* Disable zoom on touch */
  .pgrid.has-hover .pcard,
  .pgrid.has-hover .pcard:hover{
    transform:scale(1) translateZ(0)!important;
    opacity:1!important;filter:none!important;
  }
  .pgrid.has-hover .pcard:hover::after{ animation:none!important; }

  /* Stats */
  #stats{
    flex-direction:column;align-items:flex-start;
    justify-content:flex-start;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .sgrid{
    grid-template-columns:repeat(2,1fr);
    padding:0 1.4rem 1.4rem;gap:.9rem;
    margin-top:0;max-width:100%;width:100%;
  }
  .sc-n{font-size:2.4rem;}

  /* Contact */
  .cportal{display:none;}
  .contact-content{padding:1.8rem;max-width:100%;}
  .contact-tags{gap:.35rem;}
  .btn-p.large{width:100%;text-align:center;}

  /* Warp canvas: disable on mobile */
  #wc,#scan,#warp-label{display:none;}
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
══════════════════════════════════════════════════════ */
@media(max-width:480px){
  .glitch{font-size:clamp(2.4rem,14vw,3.6rem);}
  .hero-sub{font-size:.8rem;}
  .sgrid{grid-template-columns:1fr 1fr;gap:.7rem;}
  .scard{padding:1.6rem .9rem;}
  .sc-n{font-size:2rem;}
  .pgrid{padding:0 1rem 1rem;}
  .pcard{padding:1.4rem;}
  .pcard h3{font-size:.88rem;}
  .contact-content h2{font-size:clamp(1.8rem,8vw,2.6rem);}
}

/* ══════════════════════════════════════════════════════
   TOUCH DEVICES — disable custom cursor + card zoom
══════════════════════════════════════════════════════ */
@media(hover:none){
  #cur,#cur-ring{display:none;}
  html,body{cursor:auto;}
  .pcard{transform:scale(1) translateZ(0);}
  .pgrid.has-hover .pcard,
  .pgrid.has-hover .pcard:hover{
    transform:scale(1) translateZ(0)!important;
    opacity:1!important;filter:none!important;box-shadow:none;
  }
  .pgrid.has-hover .pcard:hover::after{ animation:none!important; }
}

/* ===================================== */
/*        AI GRID — DYNAMIC CORE         */
/* ===================================== */

/* ===================================== */
/*        AI GRID — STABLE VERSION       */
/* ===================================== */

.grid-3d {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(circle at center, #060812 0%, #000 70%);
  perspective: 1400px;
}

/* === MAIN GRID === */
.grid-3d::before {
  content: "";
  position: absolute;
  width: 300%;
  height: 300%;
  left: -100%;
  bottom: -160%;

  background-image:
    linear-gradient(rgba(0,255,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,255,0.14) 1px, transparent 1px);

  background-size: 80px 80px;

  transform: rotateX(78deg) translateZ(0);
  transform-origin: center bottom;

  animation: gridFlow var(--flow-spd, 12s) linear infinite;

  filter: drop-shadow(0 0 8px rgba(0,255,255,0.4));
  will-change: transform;
}

/* === AI CORE PULSE === */
.grid-3d::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at center,
      rgba(0,255,255,0.35) 0%,
      rgba(0,255,255,0.15) 15%,
      rgba(0,255,255,0.05) 30%,
      transparent 60%
    );

  animation: corePulse 4s ease-in-out infinite;
  will-change: transform, opacity;
}

/* ===================================== */
/*               ANIMATIONS              */
/* ===================================== */

@keyframes gridFlow {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 0 80px, 80px 0;
  }
}

@keyframes corePulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
}


/* pcard base merged above */

 #whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform .2s;
  }
  #whatsapp-btn:hover { transform: scale(1.1); }
  #whatsapp-btn img { width: 32px; height: 32px; }

/* ═══════════════════════════════════════════════
   PARALLAX ENGINE — CANVAS + LAYER HINTS
═══════════════════════════════════════════════ */

/* Warp-streaks overlay canvas */
#wc {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  /* sits above grid (z:0) but below sections (z:auto / higher) */
}

/* GPU-hint for all parallax layers */
[data-px] {
  will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════
   WARP PARALLAX — SCAN LINE
═══════════════════════════════════════════════ */
#scan {
  position: fixed;
  left: 0; right: 0;
  top: 0;
  height: 2px;
  z-index: 950;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(123,47,255,.7) 8%,
    var(--c) 35%,
    #fff 50%,
    var(--c) 65%,
    rgba(123,47,255,.7) 92%,
    transparent 100%);
  box-shadow:
    0 0 18px var(--c),
    0 0 50px rgba(0,212,255,.5),
    0 0 2px #fff;
}
/* chromatic aberration RGB flanks */
#scan::before {
  content:'';position:absolute;left:0;right:0;
  height:2px;top:-5px;
  background:linear-gradient(90deg,transparent,rgba(255,45,107,.55),transparent);
  box-shadow:0 0 10px rgba(255,45,107,.5);
}
#scan::after {
  content:'';position:absolute;left:0;right:0;
  height:2px;top:5px;
  background:linear-gradient(90deg,transparent,rgba(123,47,255,.55),transparent);
  box-shadow:0 0 10px rgba(123,47,255,.5);
}
#scan.scan-down { animation: scanD .46s cubic-bezier(.4,0,.6,1) forwards; }
#scan.scan-up   { animation: scanU .46s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes scanD {
  0%   { top:-3px; opacity:0; }
  4%   { opacity:1; }
  88%  { opacity:.95; }
  100% { top:100vh; opacity:0; }
}
@keyframes scanU {
  0%   { top:100vh; opacity:0; }
  4%   { opacity:1; }
  88%  { opacity:.95; }
  100% { top:-3px; opacity:0; }
}

/* ═══════════════════════════════════════════════
   WARP PARALLAX — SECTION LABEL
═══════════════════════════════════════════════ */
#warp-label {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: .52rem;
  letter-spacing: .55em;
  color: var(--c);
  text-shadow: 0 0 24px var(--c), 0 0 60px rgba(0,212,255,.4);
  z-index: 960;
  opacity: 0;
  pointer-events: none;
  font-weight: 900;
}
#warp-label.wlash { animation: wlash .65s ease forwards; }
@keyframes wlash {
  0%   { opacity:0; letter-spacing:.9em; filter:blur(6px); }
  18%  { opacity:.9; letter-spacing:.55em; filter:blur(0); }
  72%  { opacity:.6; letter-spacing:.55em; }
  100% { opacity:0; letter-spacing:.25em; filter:blur(3px); }
}

/* ═══════════════════════════════════════════════
   WARP PARALLAX — EXIT ANIMATIONS (depth push)
═══════════════════════════════════════════════ */
.section.warp-exit.wd { animation: wExitD .34s cubic-bezier(.77,0,.18,1) forwards; }
.section.warp-exit.wu { animation: wExitU .34s cubic-bezier(.77,0,.18,1) forwards; }

@keyframes wExitD {
  0%   { opacity:1; transform:perspective(1400px) scale(1) translateY(0)    rotateX(0deg);  filter:blur(0)   brightness(1); }
  35%  {            transform:perspective(1400px) scale(.96) translateY(-1%) rotateX(2deg);  filter:blur(1px) brightness(1.5); }
  100% { opacity:0; transform:perspective(1400px) scale(.84) translateY(-3%) rotateX(7deg);  filter:blur(9px) brightness(2.8); }
}
@keyframes wExitU {
  0%   { opacity:1; transform:perspective(1400px) scale(1) translateY(0)    rotateX(0deg);   filter:blur(0)   brightness(1); }
  35%  {            transform:perspective(1400px) scale(.96) translateY(1%)  rotateX(-2deg);  filter:blur(1px) brightness(1.5); }
  100% { opacity:0; transform:perspective(1400px) scale(.84) translateY(3%)  rotateX(-7deg);  filter:blur(9px) brightness(2.8); }
}

/* ═══════════════════════════════════════════════
   WARP PARALLAX — ENTER ANIMATIONS (depth pull)
═══════════════════════════════════════════════ */
.section.warp-enter.wd { animation: wEnterD .72s cubic-bezier(.23,1,.32,1) forwards; }
.section.warp-enter.wu { animation: wEnterU .72s cubic-bezier(.23,1,.32,1) forwards; }

@keyframes wEnterD {
  0%   { opacity:0; transform:perspective(1400px) scale(1.16) translateY(3%)  rotateX(-7deg);  filter:blur(10px) brightness(2.5); }
  30%  { opacity:1; transform:perspective(1400px) scale(1.04) translateY(1%)  rotateX(-2deg);  filter:blur(2px)  brightness(1.3); }
  100% { opacity:1; transform:perspective(1400px) scale(1)    translateY(0)   rotateX(0deg);   filter:blur(0)    brightness(1); }
}
@keyframes wEnterU {
  0%   { opacity:0; transform:perspective(1400px) scale(1.16) translateY(-3%) rotateX(7deg);   filter:blur(10px) brightness(2.5); }
  30%  { opacity:1; transform:perspective(1400px) scale(1.04) translateY(-1%) rotateX(2deg);   filter:blur(2px)  brightness(1.3); }
  100% { opacity:1; transform:perspective(1400px) scale(1)    translateY(0)   rotateX(0deg);   filter:blur(0)    brightness(1); }
}

/* ═══════════════════════════════════════════════
   WARP PARALLAX — GRID FLASH
═══════════════════════════════════════════════ */
.grid-3d.warp-glitch {
  animation: gridFlash .46s steps(4) forwards;
}
@keyframes gridFlash {
  0%   { filter:none; }
  25%  { filter:brightness(2.2) hue-rotate(28deg) saturate(3) blur(1px); }
  50%  { filter:brightness(1.5) hue-rotate(-15deg) saturate(2); }
  75%  { filter:brightness(1.8) hue-rotate(12deg) saturate(2.5) blur(.5px); }
  100% { filter:none; }
}

/* ===== TOOLTIP TECH ===== */

.tt {
  position: relative;
  color: #00eaff;
  border-bottom: 1px dotted rgba(0,255,255,.6);
  cursor: help;
  transition: .2s;
}

.tt:hover {
  color: #fff;
}

.tt::after {
  content: attr(data-tt);
  position: absolute;
  left: 50%;
  bottom: 140%;
  transform: translateX(-50%);
  width: 240px;
  background: linear-gradient(145deg,#0c1020,#070a14);
  border: 1px solid rgba(0,255,255,.25);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #cfefff;
  opacity: 0;
  pointer-events: none;
  transition: .25s;
  box-shadow: 0 10px 30px rgba(0,255,255,.15);
  z-index: 20;
}

.tt:hover::after {
  opacity: 1;
  bottom: 160%;
}

/* mobile */
@media (max-width:768px){
  .tt::after{
    width:180px;
    font-size:12px;
  }
}