:root {
  --jis-blue: #24b8ff;
  --jis-violet: #7c4dff;
  --jis-cyan: #61f4ff;
  --jis-ink: #050814;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.jis-progress {
  position: fixed; inset: 0 auto auto 0; z-index: 99999; width: 100%; height: 3px;
  transform: scaleX(0); transform-origin: left; pointer-events: none;
  background: linear-gradient(90deg, var(--jis-blue), var(--jis-violet), #ff315f);
  box-shadow: 0 0 18px rgba(36,184,255,.7);
}
.jis-cursor, .jis-cursor-ring { position: fixed; z-index: 99998; pointer-events: none; border-radius: 50%; opacity: 0; }
.jis-cursor { width: 7px; height: 7px; background: #fff; mix-blend-mode: difference; }
.jis-cursor-ring { width: 36px; height: 36px; border: 1px solid rgba(70,205,255,.72); transition: width .2s, height .2s, border-color .2s; }
.jis-cursor-ring.is-active { width: 54px; height: 54px; border-color: rgba(156,93,255,.9); }

.jis-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55; }
body > *:not(.jis-particles):not(.jis-progress):not(.jis-cursor):not(.jis-cursor-ring) { position: relative; z-index: 1; }

.jis-reveal { opacity: 0; transform: translate3d(0,42px,0) scale(.985); transition: opacity .85s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.jis-reveal.is-visible { opacity: 1; transform: translate3d(0,0,0) scale(1); }

.jis-premium-section {
  position: relative; isolation: isolate; width: min(1180px, calc(100% - 32px)); margin: 68px auto;
  padding: clamp(34px, 6vw, 76px); overflow: hidden; border: 1px solid rgba(125,151,255,.2);
  border-radius: 34px; color: #eef4ff;
  background: radial-gradient(circle at 15% 0%, rgba(36,184,255,.2), transparent 35%),
              radial-gradient(circle at 90% 100%, rgba(124,77,255,.24), transparent 42%),
              linear-gradient(145deg, #050814 0%, #0b1224 58%, #080a15 100%);
  box-shadow: 0 35px 90px rgba(2,7,20,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.jis-premium-section::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.22; background-image: linear-gradient(rgba(110,180,255,.18) 1px,transparent 1px), linear-gradient(90deg,rgba(110,180,255,.18) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent); }
.jis-kicker { margin: 0 0 12px; color: #6de9ff; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.jis-title { max-width: 820px; margin: 0; font-size: clamp(34px,5vw,68px); line-height: .98; letter-spacing: -.045em; font-weight: 800; }
.jis-subtitle { max-width: 700px; margin: 20px 0 38px; color: #aebbd1; font-size: clamp(15px,2vw,19px); line-height: 1.65; }

.jis-analytics { display:grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: stretch; }
.jis-orbit { min-height: 360px; position:relative; display:grid; place-items:center; perspective:1000px; }
.jis-orbit-core { width: 174px; aspect-ratio:1; display:grid; place-items:center; border-radius:38px; transform:rotateX(8deg) rotateY(-12deg); background:linear-gradient(145deg,rgba(34,193,255,.3),rgba(88,60,255,.16)); border:1px solid rgba(120,225,255,.38); box-shadow:0 25px 70px rgba(34,143,255,.35),inset 0 0 35px rgba(72,203,255,.12); animation:jisFloat 5s ease-in-out infinite; }
.jis-orbit-core strong { font-size:58px; letter-spacing:-.08em; }
.jis-orbit-core small { display:block; margin-top:8px; color:#88eaff; text-align:center; letter-spacing:.17em; }
.jis-ring { position:absolute; width:290px; aspect-ratio:1; border:1px solid rgba(99,205,255,.25); border-radius:50%; animation:jisSpin 15s linear infinite; }
.jis-ring:nth-child(2) { width:350px; animation-direction:reverse; animation-duration:21s; border-color:rgba(155,102,255,.22); }
.jis-ring::after { content:""; position:absolute; top:48%; left:-5px; width:10px; height:10px; border-radius:50%; background:#6eeaff; box-shadow:0 0 20px #6eeaff; }
.jis-dashboard { display:grid; gap:14px; padding:24px; border-radius:25px; background:rgba(7,13,27,.74); border:1px solid rgba(127,162,255,.2); backdrop-filter:blur(16px); transform-style:preserve-3d; transition:transform .25s ease; }
.jis-metric { display:flex; align-items:end; justify-content:space-between; padding:16px 18px; border-radius:17px; background:linear-gradient(120deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.08); }
.jis-metric span { color:#9eabc2; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.jis-metric strong { font-size:27px; }
.jis-chart { height:122px; display:flex; align-items:end; gap:9px; padding:14px 16px 0; border-radius:18px; background:rgba(2,7,17,.65); }
.jis-chart i { flex:1; min-width:5px; border-radius:8px 8px 0 0; background:linear-gradient(#5ce7ff,#7656ff); transform-origin:bottom; animation:jisBar 2.8s ease-in-out infinite alternate; animation-delay:calc(var(--i) * -180ms); }

.jis-portfolio-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.jis-project { grid-column:span 4; position:relative; min-height:280px; overflow:hidden; border-radius:23px; border:1px solid rgba(255,255,255,.1); background:#0d1526; transform-style:preserve-3d; transition:transform .25s ease, box-shadow .35s ease; }
.jis-project:nth-child(1), .jis-project:nth-child(5) { grid-column:span 8; }
.jis-project img { width:100%; height:100%; object-fit:cover; filter:saturate(.9) brightness(.76); transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s; }
.jis-project::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 35%,rgba(2,6,15,.92)); }
.jis-project-info { position:absolute; inset:auto 22px 20px; z-index:2; }
.jis-project-info b { display:block; font-size:19px; }
.jis-project-info span { color:#90dfff; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.jis-project:hover { box-shadow:0 24px 55px rgba(25,139,255,.28); }
.jis-project:hover img { transform:scale(1.07); filter:saturate(1.08) brightness(.9); }
.jis-showcase-link { display:inline-flex; margin-top:28px; padding:13px 22px; border-radius:999px; color:#06101b; font-weight:800; background:linear-gradient(90deg,#74efff,#9d8aff); transition:transform .25s,box-shadow .25s; }
.jis-showcase-link:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(60,199,255,.3); }

.jis-logo-shell { overflow:visible; margin-top:34px; padding:0; mask-image:none; }
.jis-logo-track { display:grid; width:100%; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; animation:none; }
.jis-logo-track .jis-logo-card:nth-child(n+20) { display:none; }
.jis-logo-card { width:100%; height:124px; display:grid; place-items:center; padding:20px; border-radius:18px; background:rgba(255,255,255,.96); border:1px solid rgba(93,196,255,.24); box-shadow:0 14px 34px rgba(0,0,0,.2); transition:transform .3s,box-shadow .3s; }
.jis-logo-card:hover { transform:translateY(-8px) rotateX(5deg); box-shadow:0 24px 48px rgba(37,164,255,.24); }
.jis-logo-card img { display:block!important; width:100%!important; height:78px!important; max-width:100%!important; max-height:78px!important; object-fit:contain!important; object-position:center!important; }

.jis-motion-card { transform-style:preserve-3d; transition:transform .25s ease, box-shadow .35s ease!important; will-change:transform; }
.jis-motion-card:hover { box-shadow:0 25px 55px rgba(42,132,255,.2)!important; }

.jis-hero-visual { isolation:isolate; overflow:hidden!important; background:radial-gradient(circle at 50% 45%,#132d4d 0%,#07121f 48%,#02050b 100%)!important; box-shadow:0 0 0 1px rgba(79,213,255,.24),0 0 70px rgba(33,131,255,.28),0 0 110px rgba(190,22,67,.16); }
.jis-hero-visual > img { position:relative; z-index:3; width:100%!important; height:100%!important; object-fit:cover!important; transform:scale(1.02); }
.jis-process-compact { min-height:0!important; height:auto!important; margin-top:18px!important; margin-bottom:18px!important; padding-top:0!important; padding-bottom:0!important; }
.jis-process-compact > * { margin-top:0!important; margin-bottom:0!important; }
@media (min-width:761px) {
  .jis-process-compact > :first-child { height:340px!important; max-height:340px!important; overflow:hidden!important; }
}
.jis-hero-orbit { position:absolute; inset:11%; z-index:2; border:1px solid rgba(87,223,255,.28); border-radius:50%; animation:jisSpin 16s linear infinite; }
.jis-hero-orbit:nth-of-type(2) { inset:23%; animation-duration:11s; animation-direction:reverse; border-color:rgba(172,103,255,.3); }
.jis-hero-orbit::after { content:""; position:absolute; left:7%; top:13%; width:9px; height:9px; border-radius:50%; background:#70eaff; box-shadow:0 0 20px #70eaff; }
.jis-float-chip { position:absolute; z-index:4; padding:9px 13px; border:1px solid rgba(139,224,255,.24); border-radius:12px; color:#dff8ff; font-size:10px; font-weight:800; letter-spacing:.08em; background:rgba(7,18,35,.76); backdrop-filter:blur(12px); box-shadow:0 12px 30px rgba(0,0,0,.25); animation:jisFloat 4s ease-in-out infinite; }
.jis-float-chip:nth-of-type(1) { top:18%; right:8%; }
.jis-float-chip:nth-of-type(2) { left:7%; bottom:20%; animation-delay:-1.6s; }

@keyframes jisFloat { 50% { transform:translateY(-13px) rotateX(3deg) rotateY(10deg); } }
@keyframes jisSpin { to { transform:rotate(360deg); } }
@keyframes jisBar { from { transform:scaleY(.55); } to { transform:scaleY(1); } }
@keyframes jisMarquee { to { transform:translateX(-50%); } }

@media (max-width: 760px) {
  .jis-cursor,.jis-cursor-ring { display:none; }
  .jis-premium-section { width:calc(100% - 20px); margin:38px auto; padding:32px 18px; border-radius:26px; }
  .jis-analytics { grid-template-columns:1fr; }
  .jis-orbit { min-height:300px; transform:scale(.84); margin:-22px 0; }
  .jis-portfolio-grid { grid-template-columns:1fr; }
  .jis-project,.jis-project:nth-child(1),.jis-project:nth-child(5) { grid-column:auto; min-height:230px; }
  .jis-logo-track { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .jis-logo-card { height:96px; padding:14px; }
  .jis-logo-card img { height:66px!important; max-height:66px!important; }
  .jis-float-chip { font-size:8px; padding:7px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .jis-logo-track,.jis-ring,.jis-orbit-core,.jis-chart i { animation:none!important; }
  .jis-reveal { opacity:1; transform:none; transition:none; }
  .jis-cursor,.jis-cursor-ring,.jis-particles { display:none; }
}