/* ====================================================
   i.LAB MEDIA — TECH
   Tone: Black base · Purple + Mint (main site 계승) + Neon glow
   ==================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter','Noto Sans KR',sans-serif;background:#05050a;color:#fff;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}

:root{
  --bg:#05050a;--bg2:#0a0a12;--bg3:#10101a;
  --line:rgba(255,255,255,.08);--w60:rgba(255,255,255,.62);--w40:rgba(255,255,255,.4);--w10:rgba(255,255,255,.06);
  --p:#8b5cf6;--p2:#a78bfa;--m:#2dd4bf;--m2:#5eead4;--pink:#f472b6;--amber:#fbbf24;
  --grad:linear-gradient(110deg,#a78bfa 0%,#2dd4bf 33%,#f472b6 66%,#a78bfa 100%);
  --en:'Inter',sans-serif;--ko:'Noto Sans KR',sans-serif;
  --easeOut:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,80px);--max:1320px;
}

/* ── UTIL ── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.label{font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--m)}
.label::before{content:'';display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px}
.grad{background:var(--grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradMove 6s linear infinite}
@keyframes gradMove{to{background-position:200% center}}
.reveal{opacity:0;transform:translateY(48px);transition:opacity 1s var(--easeOut),transform 1s var(--easeOut)}
.reveal.vis{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}
section{position:relative}

/* ── CURSOR GLOW ── */
.cursor-glow{position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(139,92,246,.16),rgba(45,212,191,.06) 40%,transparent 70%);transform:translate(-50%,-50%);transition:opacity .4s;mix-blend-mode:screen}
@media (hover:none){.cursor-glow{display:none}}

/* ── PROGRESS ── */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--grad);z-index:200;box-shadow:0 0 12px var(--m)}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(5,5,10,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:18px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--en);font-weight:700;letter-spacing:.04em;font-size:17px}
.logo-mark{width:30px;height:30px;border-radius:8px;background:conic-gradient(from 210deg,var(--p),var(--m),var(--pink),var(--p));position:relative;box-shadow:0 0 20px rgba(139,92,246,.5)}
.logo-mark::after{content:'';position:absolute;inset:7px;border-radius:3px;background:var(--bg)}
.logo small{font-size:10px;font-weight:600;letter-spacing:.3em;color:var(--m);border:1px solid rgba(45,212,191,.4);padding:3px 7px;border-radius:20px}
.menu{display:flex;gap:30px;font-size:14px;font-weight:500}
.menu a{color:var(--w60);transition:color .3s;position:relative;padding:4px 0}
.menu a::after{content:'';position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--grad);transition:width .4s var(--easeOut)}
.menu a:hover,.menu a.on{color:#fff}
.menu a:hover::after,.menu a.on::after{width:100%}
.nav-cta{font-size:13px;font-weight:600;padding:10px 20px;border-radius:40px;background:linear-gradient(110deg,var(--p),#6d28d9);box-shadow:0 0 24px rgba(139,92,246,.45);transition:transform .3s,box-shadow .3s;white-space:nowrap}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 0 36px rgba(139,92,246,.7)}
.burger{display:none;width:34px;height:34px;position:relative}
.burger span{position:absolute;left:6px;right:6px;height:2px;background:#fff;transition:.3s}
.burger span:nth-child(1){top:11px}.burger span:nth-child(2){top:21px}
.nav.open .burger span:nth-child(1){top:16px;transform:rotate(45deg)}
.nav.open .burger span:nth-child(2){top:16px;transform:rotate(-45deg)}
@media(max-width:960px){
  .menu{position:fixed;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:28px;font-size:22px;background:rgba(5,5,10,.96);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:opacity .4s}
  .nav.open .menu{opacity:1;pointer-events:auto}
  .burger{display:block;z-index:2}.nav-cta{display:none}
}

/* ── HERO ── */
.hero{min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:140px 0 100px}
.hero canvas#fx{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(5,5,10,0) 30%,var(--bg) 85%),linear-gradient(to bottom,transparent 70%,var(--bg));z-index:0;pointer-events:none}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--en);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--m2);padding:8px 16px;border:1px solid rgba(45,212,191,.3);border-radius:40px;background:rgba(45,212,191,.06);backdrop-filter:blur(6px)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--m);box-shadow:0 0 10px var(--m);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3;transform:scale(.7)}}
.hero h1{font-family:var(--en);font-weight:800;font-size:clamp(46px,9.2vw,148px);line-height:.95;letter-spacing:-.04em;margin:28px 0 30px}
.hero h1 .ko{display:block;font-family:var(--ko);font-weight:700;font-size:clamp(24px,3.4vw,50px);letter-spacing:-.02em;margin-top:22px;line-height:1.3}
.hero p.lead{max-width:640px;font-size:clamp(15px,1.3vw,18px);color:var(--w60)}
.hero-btns{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:50px;font-weight:600;font-size:14px;transition:transform .3s,box-shadow .3s,background .3s}
.btn-p{background:var(--grad);background-size:200% auto;color:#05050a;box-shadow:0 10px 40px rgba(139,92,246,.35);animation:gradMove 5s linear infinite}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 14px 50px rgba(45,212,191,.45)}
.btn-o{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.03);backdrop-filter:blur(8px)}
.btn-o:hover{border-color:var(--m);background:rgba(45,212,191,.08)}
.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--en);font-size:10px;letter-spacing:.3em;color:var(--w40);display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint i{width:1px;height:46px;background:linear-gradient(var(--m),transparent);animation:drop 2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* sub hero */
.hero.sub{min-height:78vh}
.hero.sub h1{font-size:clamp(42px,7.6vw,118px)}
.crumb{font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--w40);text-transform:uppercase;margin-bottom:22px}
.crumb a:hover{color:var(--m)}

/* ── MARQUEE ── */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:26px 0;background:linear-gradient(90deg,rgba(139,92,246,.06),rgba(45,212,191,.06))}
.marquee-track{display:flex;gap:56px;width:max-content;animation:mq 38s linear infinite;font-family:var(--en);font-weight:700;font-size:clamp(22px,3vw,40px);letter-spacing:-.01em;white-space:nowrap}
.marquee-track span{display:flex;align-items:center;gap:56px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35)}
.marquee-track span:nth-child(3n+1){color:#fff;-webkit-text-stroke:0}
.marquee-track span::after{content:'✦';color:var(--m);-webkit-text-stroke:0;font-size:.6em}
.marquee.rev .marquee-track{animation-direction:reverse}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── SECTION HEAD ── */
.sec{padding:clamp(90px,12vw,170px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(44px,6vw,80px);flex-wrap:wrap}
.sec-head h2{font-size:clamp(32px,4.6vw,66px);font-weight:700;line-height:1.12;letter-spacing:-.03em;margin-top:18px}
.sec-head p{max-width:440px;color:var(--w60);font-size:15px}

/* ── STATS ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.015)}
.stat{padding:44px 32px;border-right:1px solid var(--line);position:relative}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--en);font-size:clamp(40px,5vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1}
.stat b em{font-style:normal;font-size:.5em;color:var(--m);margin-left:4px}
.stat>span{display:block;margin-top:14px;color:var(--w60);font-size:14px}
@media(max-width:860px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ── PILLARS (메인 4대 역량 카드) ── */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pillar{position:relative;border-radius:28px;overflow:hidden;min-height:480px;display:flex;flex-direction:column;justify-content:flex-end;padding:40px;border:1px solid var(--line);isolation:isolate;transform-style:preserve-3d;transition:transform .2s ease-out,border-color .4s}
.pillar .bgimg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transform:scale(1.08);transition:transform 1.2s var(--easeOut),filter .6s;filter:saturate(.9) brightness(.55)}
.pillar::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(5,5,10,.96) 15%,rgba(5,5,10,.3) 60%,rgba(5,5,10,.1))}
.pillar::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s}
.pillar:hover::after{opacity:1}
.pillar:hover .bgimg{transform:scale(1);filter:saturate(1.15) brightness(.7)}
.pillar .num{position:absolute;top:34px;left:40px;font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--m2)}
.pillar .arrow{position:absolute;top:28px;right:30px;width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;font-size:20px;transition:.4s var(--easeOut);backdrop-filter:blur(8px)}
.pillar:hover .arrow{background:var(--m);color:#05050a;border-color:var(--m);transform:rotate(-45deg)}
.pillar h3{font-family:var(--en);font-size:clamp(28px,3.2vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.pillar h3 small{display:block;font-family:var(--ko);font-size:17px;font-weight:500;color:var(--w60);letter-spacing:0;margin-top:10px}
.pillar p{margin-top:16px;color:rgba(255,255,255,.75);font-size:15px;max-width:480px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags span{font-size:12px;padding:6px 12px;border-radius:30px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:rgba(255,255,255,.82);backdrop-filter:blur(6px)}
@media(max-width:860px){.pillars{grid-template-columns:1fr}.pillar{min-height:400px;padding:30px}}

/* ── FEATURE GRID (하위 페이지 기술 카드) ── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:960px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid3,.grid2{grid-template-columns:1fr}}
.card{position:relative;padding:36px 32px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01));border:1px solid var(--line);overflow:hidden;transition:transform .5s var(--easeOut),border-color .4s,background .4s}
.card::before{content:'';position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--glow,rgba(139,92,246,.35)),transparent 70%);top:var(--my,-130px);left:var(--mx,-130px);transform:translate(-50%,-50%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover{transform:translateY(-8px);border-color:rgba(167,139,250,.4)}
.card:hover::before{opacity:1}
.card .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(45,212,191,.18));border:1px solid rgba(255,255,255,.1);margin-bottom:26px;position:relative}
.card h4{font-size:20px;font-weight:700;letter-spacing:-.02em;position:relative}
.card h4 small{display:block;font-family:var(--en);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--m);margin-bottom:8px}
.card p{margin-top:12px;color:var(--w60);font-size:14.5px;position:relative}
.card ul{list-style:none;margin-top:18px;position:relative}
.card li{font-size:13.5px;color:rgba(255,255,255,.72);padding:7px 0 7px 20px;border-top:1px dashed rgba(255,255,255,.08);position:relative}
.card li::before{content:'';position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:2px;background:var(--m);box-shadow:0 0 8px var(--m)}

/* ── PROCESS (가로 타임라인) ── */
.process{display:grid;grid-template-columns:repeat(var(--n,6),1fr);gap:0;position:relative;counter-reset:st}
.process::before{content:'';position:absolute;top:31px;left:4%;right:4%;height:1px;background:linear-gradient(90deg,var(--p),var(--m),var(--pink))}
.step{position:relative;padding:0 14px;text-align:center}
.step .c{width:62px;height:62px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid rgba(167,139,250,.5);font-family:var(--en);font-weight:700;font-size:15px;position:relative;box-shadow:0 0 0 6px var(--bg),0 0 30px rgba(139,92,246,.35)}
.step h5{font-size:16px;font-weight:700}
.step p{font-size:13px;color:var(--w60);margin-top:8px}
@media(max-width:860px){.process{grid-template-columns:1fr 1fr;row-gap:40px}.process::before{display:none}}

/* ── SPLIT (이미지 + 텍스트) ── */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.split.rev .media{order:2}
.media{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/11;border:1px solid var(--line)}
.media img,.media .bgimg{width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;transition:transform 1.4s var(--easeOut)}
.media:hover img,.media:hover .bgimg{transform:scale(1.06)}
.media::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(139,92,246,.25),transparent 50%,rgba(45,212,191,.2));mix-blend-mode:overlay;pointer-events:none}
.media .badge{position:absolute;left:20px;bottom:20px;z-index:2;font-family:var(--en);font-size:11px;letter-spacing:.2em;padding:8px 14px;border-radius:30px;background:rgba(5,5,10,.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15)}
.split h3{font-size:clamp(28px,3.4vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.15;margin:18px 0 22px}
.split p{color:var(--w60);font-size:15.5px}
.checks{list-style:none;margin-top:26px;display:grid;gap:12px}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:15px}
.checks li::before{content:'✓';flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#05050a;background:var(--m);box-shadow:0 0 14px rgba(45,212,191,.6);margin-top:1px}
@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev .media{order:0}}

/* ── WORKS (영상 썸네일 + 모달) ── */
.works{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.works .w{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/10;cursor:pointer;border:1px solid var(--line);background:#111}
.works .w.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.works .w img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--easeOut),filter .5s;filter:brightness(.72)}
.works .w:hover img{transform:scale(1.08);filter:brightness(.95)}
.works .w .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px;background:linear-gradient(transparent,rgba(5,5,10,.92));font-size:14px;font-weight:600}
.works .w .cap small{display:block;font-family:var(--en);font-size:10px;letter-spacing:.2em;color:var(--m);text-transform:uppercase;font-weight:600;margin-bottom:4px}
.works .w .play{position:absolute;top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transform:scale(.7);opacity:0;transition:.4s var(--easeOut)}
.works .w .play::after{content:'';border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.works .w:hover .play{opacity:1;transform:scale(1)}
@media(max-width:960px){.works{grid-template-columns:1fr 1fr}}
.modal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.95);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .35s;padding:20px}
.modal.on{opacity:1;pointer-events:auto}
.modal .frame{width:min(1200px,100%);aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:0 30px 120px rgba(139,92,246,.4);transform:scale(.94);transition:transform .45s var(--easeOut)}
.modal.on .frame{transform:none}
.modal iframe{width:100%;height:100%;border:0}
.modal .x{position:absolute;top:22px;right:26px;font-size:30px;color:#fff;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}

/* ── SOFTWARE (제품 카드) ── */
.product{display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center;padding:38px 36px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(120deg,rgba(255,255,255,.04),rgba(255,255,255,.005));margin-bottom:18px;position:relative;overflow:hidden;transition:border-color .4s,transform .5s var(--easeOut)}
.product:hover{border-color:rgba(45,212,191,.45);transform:translateX(8px)}
.product::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);opacity:0;transition:opacity .4s}
.product:hover::before{opacity:1}
.product .logo-b{width:96px;height:96px;border-radius:24px;display:grid;place-items:center;font-family:var(--en);font-weight:800;font-size:22px;letter-spacing:-.02em;background:linear-gradient(140deg,var(--c1,#8b5cf6),var(--c2,#2dd4bf));box-shadow:0 14px 40px -10px var(--c1,#8b5cf6);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.product h4{font-family:var(--en);font-size:28px;font-weight:800;letter-spacing:-.02em}
.product h4 span{font-family:var(--ko);font-size:15px;font-weight:500;color:var(--w60);margin-left:12px;letter-spacing:0}
.product p{color:var(--w60);font-size:14.5px;margin-top:8px;max-width:720px}
.product .tags{margin-top:16px}
.product .kind{font-family:var(--en);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--m);border:1px solid rgba(45,212,191,.35);padding:8px 14px;border-radius:30px;white-space:nowrap}
@media(max-width:860px){.product{grid-template-columns:1fr;gap:20px}.product .kind{justify-self:start}}

/* ── STACK (기술 스택 칩 월) ── */
.stack{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.stack span{padding:12px 22px;border-radius:40px;border:1px solid var(--line);background:rgba(255,255,255,.025);font-family:var(--en);font-size:14px;font-weight:500;transition:.35s var(--easeOut)}
.stack span:hover{border-color:var(--m);color:var(--m2);box-shadow:0 0 24px rgba(45,212,191,.25);transform:translateY(-3px)}

/* ── BIG QUOTE ── */
.quote{text-align:center;padding:clamp(100px,14vw,200px) 0;overflow:hidden}
.quote h2{font-size:clamp(30px,5vw,76px);font-weight:700;letter-spacing:-.035em;line-height:1.18}
.quote .orb{position:absolute;width:60vw;height:60vw;max-width:800px;max-height:800px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.22),rgba(45,212,191,.08) 45%,transparent 70%);filter:blur(30px);z-index:-1;animation:orb 10s ease-in-out infinite}
@keyframes orb{50%{transform:translate(-50%,-50%) scale(1.15)}}

/* ── CTA ── */
.cta{margin:0 var(--pad) clamp(70px,9vw,120px);border-radius:36px;padding:clamp(60px,8vw,110px) clamp(28px,6vw,90px);position:relative;overflow:hidden;text-align:center;border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(ellipse at 20% 0%,rgba(139,92,246,.45),transparent 55%),radial-gradient(ellipse at 90% 100%,rgba(45,212,191,.35),transparent 55%),#0a0a14}
.cta h2{font-size:clamp(30px,4.6vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1.15}
.cta p{color:rgba(255,255,255,.72);margin:20px auto 36px;max-width:560px}
.cta .btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ── NEXT PAGE NAV ── */
.next-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.next-nav a{padding:26px 24px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.02);transition:.4s var(--easeOut)}
.next-nav a:hover{border-color:var(--p2);background:rgba(139,92,246,.08);transform:translateY(-4px)}
.next-nav a.on{border-color:rgba(45,212,191,.5);background:rgba(45,212,191,.06)}
.next-nav small{font-family:var(--en);font-size:11px;letter-spacing:.2em;color:var(--m)}
.next-nav b{display:block;margin-top:8px;font-size:17px}
@media(max-width:860px){.next-nav{grid-template-columns:1fr 1fr}}

/* ── FOOTER ── */
footer{border-top:1px solid var(--line);padding:50px 0 40px;color:var(--w40);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
footer .links{display:flex;gap:22px;flex-wrap:wrap}
footer a:hover{color:var(--m)}

/* ── 3D ORBIT (메인 소개용 회전 링) ── */
.orbit-wrap{position:relative;aspect-ratio:1;max-width:520px;margin:0 auto;perspective:1000px}
.orbit{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(167,139,250,.3);transform-style:preserve-3d;animation:spin 18s linear infinite}
.orbit.o2{inset:12%;border-color:rgba(45,212,191,.35);animation-duration:12s;animation-direction:reverse}
.orbit.o3{inset:26%;border-color:rgba(244,114,182,.35);animation-duration:9s}
.orbit i{position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--m);box-shadow:0 0 18px var(--m)}
.orbit.o2 i{background:var(--p2);box-shadow:0 0 18px var(--p)}
.orbit.o3 i{background:var(--pink);box-shadow:0 0 18px var(--pink)}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit-core{position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c4b5fd,#7c3aed 45%,#0f766e);box-shadow:0 0 80px rgba(139,92,246,.7),inset -10px -14px 40px rgba(0,0,0,.5);display:grid;place-items:center;font-family:var(--en);font-weight:800;font-size:clamp(18px,2.4vw,28px);letter-spacing:-.02em}
.orbit-label{position:absolute;font-family:var(--en);font-size:12px;font-weight:600;letter-spacing:.14em;padding:8px 14px;border-radius:30px;background:rgba(10,10,18,.8);border:1px solid var(--line);backdrop-filter:blur(8px);white-space:nowrap}

/* reduce motion */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* 모바일 가로 넘침 방지 */
html,body{overflow-x:clip}
@media(max-width:640px){.orbit-wrap{max-width:300px}.orbit-label{font-size:10px;padding:6px 10px}.orbit-label[style*="right:-4%"]{right:0!important}.orbit-label[style*="left:-4%"]{left:0!important}.works .w.big{aspect-ratio:16/10}}

/* 영상 재생 중 배경 애니메이션 정지(재생 끊김 방지, 2026-11-10) */
body.vid-on *{animation-play-state:paused!important}
body.vid-on .modal *{animation-play-state:running!important}