/* MOBILE CINEMA V7 — correction pass from real iPhone visual verification */
@media (max-width:600px){
  /* Keep the cinematic stage physically inside the phone viewport. */
  .hero3d{width:100%!important;max-width:100%!important;height:430px!important;margin:0!important;overflow:hidden!important;position:relative!important;display:block!important;contain:layout paint!important}
  .hero3d:before{left:50%!important;top:50%!important;width:130%!important;height:100%!important;transform:translate(-50%,-50%)!important}
  .hero3d:after{left:50%!important;right:auto!important;width:125%!important;height:42%!important;bottom:2%!important;transform:translateX(-50%) rotateX(70deg) translateZ(-60px)!important}
  .hero3d .orb{position:absolute!important;left:50%!important;top:50%!important;margin:0!important;transform-origin:center center!important}
  .hero3d .o1{width:112%!important;height:48%!important;transform:translate(-50%,-50%) rotateX(69deg) rotateZ(-10deg) translateZ(20px)!important}
  .hero3d .o2{width:86%!important;height:40%!important;transform:translate(-50%,-50%) rotateX(66deg) rotateZ(46deg) translateZ(38px)!important}
  .hero3d .o3{width:122%!important;height:57%!important;transform:translate(-50%,-50%) rotateX(64deg) rotateZ(-28deg) translateZ(2px)!important}
  .hero3d .core{position:absolute!important;left:50%!important;top:50%!important;width:176px!important;height:176px!important;margin:0!important;transform:translate(-50%,-50%) translateZ(18px)!important}
  .hero3d .core .pk{font-size:58px!important}
  .hero3d .corelabel{position:absolute!important;left:50%!important;top:50%!important;margin:0!important;transform:translate(-50%,100px) translateZ(60px)!important;white-space:nowrap!important}
  .hero3d .energy-ring{left:50%!important;top:50%!important}
  /* Stable constellation: no node can drift over the headline. */
  .hero3d .node{position:absolute!important;width:108px!important;min-width:108px!important;max-width:108px!important;padding:9px 8px!important}
  .hero3d .n1{top:3%!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translateX(-50%) translateZ(44px)!important}
  .hero3d .n2{top:31%!important;left:1%!important;right:auto!important;bottom:auto!important;transform:translateZ(26px)!important}
  .hero3d .n3{top:31%!important;right:1%!important;left:auto!important;bottom:auto!important;transform:translateZ(34px)!important}
  .hero3d .n4{bottom:3%!important;left:3%!important;right:auto!important;top:auto!important;transform:translateZ(20px)!important}
  .hero3d .n5{bottom:3%!important;right:3%!important;left:auto!important;top:auto!important;transform:translateZ(30px)!important}

  /* Put the hero copy below the visual stage with a clean breathing gap. */
  .cin-hero{display:grid!important;grid-template-columns:1fr!important;gap:0!important;padding-top:8px!important}
  .cin-hero>div:first-child{position:relative!important;z-index:10!important;margin-top:6px!important}
  .cin-h1{font-size:clamp(38px,10.7vw,48px)!important;line-height:.99!important;margin-top:14px!important}
  .cin-lead{font-size:14px!important}

  /* Ecosystem: four compact nodes around a centered core; never stretch vertically. */
  .eco .map{width:100%!important;height:330px!important;min-height:330px!important;position:relative!important;overflow:hidden!important}
  .eco .mapnode{position:absolute!important;width:112px!important;min-width:112px!important;max-width:112px!important;height:auto!important;min-height:0!important;padding:10px 7px!important;transform:translateZ(24px)!important;box-sizing:border-box!important}
  .eco .mr{left:2%!important;right:auto!important;top:12%!important;bottom:auto!important}
  .eco .me{right:2%!important;left:auto!important;top:12%!important;bottom:auto!important}
  .eco .mp{left:2%!important;right:auto!important;bottom:7%!important;top:auto!important}
  .eco .ma{right:2%!important;left:auto!important;bottom:7%!important;top:auto!important}
  .eco .mapcore{left:50%!important;top:50%!important;width:96px!important;height:96px!important;margin:0!important;transform:translate(-50%,-50%) translateZ(40px)!important}
  .eco .line{width:42%!important}
  .eco .grid3d{inset:-8%!important}
}
@media (prefers-reduced-motion:reduce){
  .hero3d .orb,.hero3d .core,.hero3d .energy-ring{animation:none!important}
}

/* MOBILE REFERENCE REBUILD — V8 visual correction */
@media (max-width:600px){
  .cin{background:
    radial-gradient(circle at 50% 23%,rgba(0,180,255,.13),transparent 25%),
    radial-gradient(circle at 10% 55%,rgba(78,65,255,.12),transparent 32%),
    #020611!important}
  .cin-nav{height:78px!important;padding:0 18px!important;border-bottom:1px solid rgba(90,150,255,.16);background:rgba(1,5,15,.84);backdrop-filter:blur(18px)}
  .cin-brand{font-size:22px!important;line-height:1.05!important;letter-spacing:-.04em}
  .cin-sub{font-size:9px!important;margin-top:4px!important;letter-spacing:.01em}
  .cin-nav:after{content:'☰';font-size:23px;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(8,20,42,.75);border:1px solid rgba(100,180,255,.18);color:#eaf7ff}
  .cin-links{display:none!important}
  .cin-main{padding:0 12px!important}
  .cin-hero{padding:0!important;display:flex!important;flex-direction:column!important;gap:0!important}
  .hero3d{order:0!important;height:535px!important;margin:0 -12px!important;width:calc(100% + 24px)!important;border-radius:0 0 28px 28px!important;background:
    radial-gradient(circle at 50% 48%,rgba(0,210,255,.17),transparent 29%),
    radial-gradient(circle at 50% 70%,rgba(76,84,255,.15),transparent 45%),
    linear-gradient(180deg,#020817 0%,#031027 52%,#061436 100%)!important;
    perspective:900px!important;transform-style:preserve-3d!important}
  .hero3d:before{content:''!important;left:50%!important;top:54%!important;width:145%!important;height:78%!important;opacity:.8!important;background-image:linear-gradient(rgba(73,157,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(73,157,255,.11) 1px,transparent 1px)!important;background-size:28px 28px!important;transform:translate(-50%,-50%) perspective(520px) rotateX(62deg)!important;mask-image:linear-gradient(to bottom,transparent,black 20%,black 78%,transparent)!important}
  .hero3d:after{content:''!important;left:50%!important;right:auto!important;bottom:0!important;width:150%!important;height:48%!important;opacity:1!important;background:radial-gradient(ellipse at 50% 70%,rgba(0,219,255,.19),transparent 38%),radial-gradient(ellipse at 30% 55%,rgba(112,73,255,.13),transparent 32%)!important;transform:translateX(-50%) rotateX(70deg)!important}

  /* Three orbit planes remain visible while their glow/comets visibly move. */
  .hero3d .orb{left:50%!important;top:47%!important;border-width:1px!important;animation-timing-function:linear!important;animation-iteration-count:infinite!important;box-shadow:0 0 20px rgba(49,179,255,.2),0 0 70px rgba(50,100,255,.08)!important}
  .hero3d .o1{width:355px!important;height:184px!important;transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-8deg)!important;animation:pkMobileOrbit1 12s linear infinite!important}
  .hero3d .o2{width:292px!important;height:146px!important;transform:translate(-50%,-50%) rotateX(66deg) rotateZ(54deg)!important;border-color:rgba(189,111,255,.55)!important;animation:pkMobileOrbit2 17s linear infinite!important}
  .hero3d .o3{width:420px!important;height:210px!important;transform:translate(-50%,-50%) rotateX(64deg) rotateZ(-34deg)!important;border-color:rgba(54,224,255,.4)!important;animation:pkMobileOrbit3 23s linear infinite!important}

  /* Reference-style luminous PK core. */
  .hero3d .core{left:50%!important;top:47%!important;width:158px!important;height:158px!important;border-radius:50%!important;background:
    radial-gradient(circle at 36% 26%,#c8ffff 0 2%,#21dfff 7%,#086fce 23%,#092b63 48%,#010817 74%)!important;
    border:1px solid rgba(130,239,255,.96)!important;
    box-shadow:0 0 20px rgba(0,224,255,.85),0 0 58px rgba(0,155,255,.55),0 0 120px rgba(80,84,255,.26),inset 0 0 42px rgba(76,230,255,.32)!important;
    animation:pkMobileCore 4.6s ease-in-out infinite!important;transform:translate(-50%,-50%) translateZ(55px)!important}
  .hero3d .core:before{width:116%!important;height:116%!important;border:1px solid rgba(73,225,255,.52)!important;box-shadow:0 0 30px rgba(0,210,255,.42),inset 0 0 24px rgba(0,210,255,.22)!important;animation:pkMobileShell 4s ease-in-out infinite!important}
  .hero3d .core:after{width:82%!important;height:82%!important;border:1px solid rgba(185,231,255,.2)!important;box-shadow:0 0 25px rgba(0,220,255,.35),inset 0 0 25px rgba(0,210,255,.16)!important}
  .hero3d .core .pk{font-size:54px!important;font-weight:950!important;letter-spacing:-.09em!important;color:#fff!important;background:none!important;-webkit-text-fill-color:#fff!important;text-shadow:0 0 18px #fff,0 0 38px rgba(80,220,255,.95)!important;animation:pkMobilePk 3.8s ease-in-out infinite!important}
  .hero3d .core-grid{position:absolute!important;inset:10%!important;border-radius:50%!important;background:repeating-radial-gradient(circle,transparent 0 13px,rgba(104,220,255,.12) 14px 15px)!important;opacity:.65!important;animation:pkGridSpin 14s linear infinite!important}
  .hero3d .core-glint{position:absolute!important;width:45px!important;height:45px!important;border-radius:50%!important;left:16%!important;top:10%!important;background:radial-gradient(circle,#fff 0 6%,rgba(180,250,255,.9) 18%,transparent 70%)!important;filter:blur(.2px)!important;animation:pkGlint 4s ease-in-out infinite!important}
  .hero3d .energy-ring{position:absolute!important;left:50%!important;top:50%!important;width:118%!important;height:118%!important;border-radius:50%!important;border:1px solid rgba(93,230,255,.42)!important;transform:translate(-50%,-50%) rotateX(70deg)!important;animation:pkEnergyRing 6s linear infinite!important;pointer-events:none!important}
  .hero3d .energy-ring:nth-of-type(2){width:132%!important;height:132%!important;animation-duration:9s!important;animation-direction:reverse!important;border-color:rgba(126,103,255,.32)!important}
  .hero3d .energy-ring:nth-of-type(3){width:148%!important;height:148%!important;animation-duration:13s!important;border-color:rgba(64,210,255,.24)!important}
  .hero3d .corelabel{left:50%!important;top:47%!important;transform:translate(-50%,108px)!important;font-size:10px!important;letter-spacing:.22em!important;color:#f5fbff!important;text-shadow:0 0 12px rgba(115,230,255,.55)!important}
  .hero3d .corelabel small{font-size:8px!important;letter-spacing:.2em!important;color:#93a9cb!important;margin-top:6px!important}

  /* Circular holographic nodes, matching the supplied mobile composition. */
  .hero3d .node{width:112px!important;min-width:112px!important;max-width:112px!important;height:112px!important;padding:11px 7px!important;border-radius:50%!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;background:radial-gradient(circle at 35% 25%,rgba(55,125,190,.28),rgba(4,13,30,.93) 62%,rgba(1,6,17,.98))!important;border:1px solid rgba(105,212,255,.58)!important;box-shadow:0 0 18px rgba(0,210,255,.18),0 14px 36px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.28)!important;backdrop-filter:blur(12px)!important;transform-style:preserve-3d!important;animation:pkNodeFloat 5s ease-in-out infinite!important;overflow:hidden!important}
  .hero3d .node:before{content:'✦'!important;display:grid!important;place-items:center!important;width:25px!important;height:25px!important;margin:0 0 6px!important;border-radius:50%!important;background:rgba(8,38,77,.82)!important;color:#8feeff!important;font-size:14px!important;box-shadow:0 0 14px rgba(61,222,255,.5),inset 0 0 8px rgba(255,255,255,.1)!important}
  .hero3d .n2:before{content:'◈'!important}.hero3d .n3:before{content:'↗'!important}.hero3d .n4:before{content:'✧'!important}.hero3d .n5:before{content:'▱'!important}
  .hero3d .node b{font-size:9px!important;letter-spacing:.12em!important;color:#f0fbff!important;text-shadow:0 0 10px rgba(90,220,255,.28)!important}
  .hero3d .node small{font-size:6.5px!important;line-height:1.25!important;margin-top:4px!important;color:#b0c1d7!important}
  .hero3d .n1{top:4%!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translateX(-50%) translateZ(72px)!important;animation-delay:-1.2s!important;border-color:rgba(92,193,255,.72)!important}
  .hero3d .n2{top:34%!important;left:4%!important;right:auto!important;bottom:auto!important;transform:translateZ(42px)!important;animation-delay:-3.4s!important}
  .hero3d .n3{top:34%!important;right:4%!important;left:auto!important;bottom:auto!important;transform:translateZ(55px)!important;animation-delay:-2.2s!important;border-color:rgba(196,137,255,.58)!important;box-shadow:0 0 20px rgba(150,87,255,.22),0 14px 36px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.25)!important}
  .hero3d .n4{bottom:5%!important;left:8%!important;right:auto!important;top:auto!important;transform:translateZ(38px)!important;animation-delay:-4.1s!important;border-color:rgba(183,236,126,.55)!important}
  .hero3d .n5{bottom:5%!important;right:8%!important;left:auto!important;top:auto!important;transform:translateZ(48px)!important;animation-delay:-2.9s!important;border-color:rgba(173,126,255,.62)!important}

  /* Moving light/comet traces over otherwise stable orbit geometry. */
  .hero3d .orb:before{content:''!important;position:absolute!important;width:18px!important;height:18px!important;border-radius:50%!important;left:50%!important;top:-9px!important;background:radial-gradient(circle,#fff 0 8%,#8deaff 18%,rgba(64,210,255,.5) 38%,transparent 72%)!important;filter:blur(.2px)!important;box-shadow:0 0 22px rgba(85,225,255,.95)!important;transform-origin:0 calc(50% + 9px)!important}
  .hero3d .o2:before{background:radial-gradient(circle,#fff 0 8%,#e1b8ff 18%,rgba(160,90,255,.5) 40%,transparent 72%)!important;box-shadow:0 0 22px rgba(185,110,255,.95)!important}
  .hero3d .o3:before{background:radial-gradient(circle,#fff 0 8%,#9dffff 18%,rgba(42,224,255,.5) 40%,transparent 72%)!important}

  /* Place the text after the 3D stage, exactly like the reference. */
  .cin-hero>div:first-child{order:1!important;margin:0!important;padding:26px 8px 8px!important;text-align:center!important}
  .cin-hero .ey{font-size:10px!important;letter-spacing:.2em!important;margin-bottom:15px!important}
  .cin-h1{font-size:clamp(36px,10.5vw,46px)!important;line-height:1.01!important;letter-spacing:-.045em!important;margin:0 auto 18px!important;max-width:380px!important}
  .cin-lead{font-size:14px!important;line-height:1.55!important;max-width:340px!important;margin:0 auto!important;color:#c2ccdc!important}
  .actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:22px auto 0!important;max-width:340px!important}
  .actions .btn{width:100%!important;padding:13px 16px!important;font-size:12px!important}
  .stats{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;margin:26px auto 0!important;max-width:360px!important}
  .stat{padding:16px 8px!important;border:1px solid rgba(92,145,235,.24)!important;border-radius:14px!important;background:linear-gradient(160deg,rgba(10,28,58,.72),rgba(2,9,22,.9))!important;box-shadow:inset 0 1px rgba(255,255,255,.05),0 12px 26px rgba(0,0,0,.2)!important}
  .stat b{font-size:22px!important;text-shadow:0 0 14px rgba(80,220,255,.42)!important}
  .stat span{font-size:8px!important;color:#9caec8!important}

  /* Ecosystem and cards inherit the same luminous system language. */
  .section{margin:14px 0!important;border-radius:20px!important;padding:22px 16px!important;background:linear-gradient(180deg,rgba(5,15,32,.94),rgba(2,7,17,.98))!important;box-shadow:inset 0 1px rgba(255,255,255,.045),0 22px 55px rgba(0,0,0,.24)!important}
  .eco .map{height:340px!important;min-height:340px!important;margin-top:16px!important;background:radial-gradient(circle at 50% 50%,rgba(0,214,255,.08),transparent 30%)!important;border-radius:18px!important}
  .eco .grid3d{background-size:30px 30px!important;opacity:.75!important}
  .eco .mapcore{width:104px!important;height:104px!important;border-radius:50%!important;background:radial-gradient(circle at 35% 25%,#1ca7d7,#061a36 48%,#020713 78%)!important;box-shadow:0 0 36px rgba(0,221,255,.4),inset 0 0 28px rgba(0,220,255,.2)!important;animation:pkMapCore 4s ease-in-out infinite!important}
  .eco .mapnode{width:106px!important;min-width:106px!important;max-width:106px!important;border-radius:52px!important;background:linear-gradient(145deg,rgba(9,28,56,.9),rgba(2,9,22,.96))!important;box-shadow:0 0 18px rgba(0,170,255,.12),0 15px 30px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.08)!important}
  .cards{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .card{min-height:170px!important;padding:15px!important;border-radius:15px!important;background:linear-gradient(160deg,rgba(10,28,58,.82),rgba(3,10,24,.96))!important;box-shadow:inset 0 1px rgba(255,255,255,.06),0 14px 28px rgba(0,0,0,.22)!important}
  .card:nth-child(5){grid-column:1/-1}
}

@keyframes pkMobileOrbit1{0%{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-8deg) rotate(0deg)}100%{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-8deg) rotate(360deg)}}
@keyframes pkMobileOrbit2{0%{transform:translate(-50%,-50%) rotateX(66deg) rotateZ(54deg) rotate(360deg)}100%{transform:translate(-50%,-50%) rotateX(66deg) rotateZ(54deg) rotate(0deg)}}
@keyframes pkMobileOrbit3{0%{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(-34deg) rotate(0deg)}100%{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(-34deg) rotate(360deg)}}
@keyframes pkMobileCore{0%,100%{filter:brightness(1);transform:translate(-50%,-50%) translateZ(55px) scale(1)}50%{filter:brightness(1.18);transform:translate(-50%,-50%) translateZ(65px) scale(1.035)}}
@keyframes pkMobileShell{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.06);opacity:1}}
@keyframes pkMobilePk{0%,100%{opacity:.9;text-shadow:0 0 18px #fff,0 0 32px rgba(80,220,255,.72)}50%{opacity:1;text-shadow:0 0 22px #fff,0 0 46px rgba(80,220,255,1)}}
@keyframes pkGridSpin{to{transform:rotate(360deg)}}
@keyframes pkGlint{0%,100%{opacity:.35;transform:translate(0,0) scale(.75)}50%{opacity:1;transform:translate(16px,12px) scale(1.25)}}
@keyframes pkEnergyRing{to{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(360deg)}}
@keyframes pkNodeFloat{0%,100%{margin-top:0;filter:brightness(.98)}50%{margin-top:-7px;filter:brightness(1.12)}}
@keyframes pkMapCore{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.045);filter:brightness(1.14)}}

@media (prefers-reduced-motion:reduce){
  .hero3d .orb,.hero3d .core,.hero3d .core:before,.hero3d .core .pk,.hero3d .core-grid,.hero3d .core-glint,.hero3d .energy-ring,.hero3d .node,.eco .mapcore{animation:none!important}
}