/* ============ CENTURY VICTORY — EN site (dark, cinematic) ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#0a0a10;color:#f2f0ea;font-family:"Helvetica Neue",Arial,"PingFang SC",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.kicker{font-size:12px;letter-spacing:.35em;color:#c9a24d;font-weight:700}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;min-height:680px;background:radial-gradient(120% 90% at 50% 110%,#241a4d 0%,#120e2a 45%,#07070d 100%);overflow:hidden}
.hero-nav{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:26px 44px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.22em;font-size:15px;color:#f4d78a}
.logo-mark{height:32px;width:auto;filter:drop-shadow(0 0 10px rgba(244,215,138,.28))}
.nav-links{display:flex;gap:34px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase}
.nav-links a{opacity:.75;transition:opacity .25s}
.nav-links a:hover{opacity:1;color:#f4d78a}
.lang-link{border:1px solid rgba(244,215,138,.45);border-radius:999px;padding:5px 14px;color:#f4d78a}

.stage{position:absolute;inset:0}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.7;animation:twinkle 3s infinite ease-in-out}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.85}}
.moon{position:absolute;top:9%;right:11%;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fdf6dd,#d9c88f 70%);box-shadow:0 0 60px 18px rgba(244,215,138,.22)}
.ground{position:absolute;left:0;right:0;bottom:0;height:16vh;background:linear-gradient(#1c1735,#0d0a1c);border-top:2px solid rgba(244,215,138,.25)}

/* --- walker (3D render) --- */
.walker{position:absolute;bottom:11.5vh;left:82%;width:clamp(170px,18vw,270px);z-index:6;transition:none}
.walker-img{width:100%;display:block;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))}
.walker.walking .walker-img{animation:walkBob .62s infinite ease-in-out}
@keyframes walkBob{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-9px) rotate(-1.4deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-7px) rotate(1.2deg)}}

/* thought bubble */
.thought{position:absolute;bottom:102%;left:38%;transform:translateX(-50%) scale(0);min-width:230px;max-width:320px;background:#fff;color:#23273f;padding:14px 19px;border-radius:22px;font-size:clamp(13.5px,1.2vw,16.5px);font-weight:600;line-height:1.45;transition:transform .45s cubic-bezier(.34,1.56,.64,1);z-index:8;text-align:center}
.thought::after{content:"";position:absolute;top:100%;left:50%;margin-left:-7px;border:8px solid transparent;border-top:12px solid #fff}
.thought.show{transform:translateX(-50%) scale(1)}

/* speech bubbles */
.bubble.say{position:absolute;bottom:102%;left:38%;transform:translateX(-50%) scale(0);min-width:250px;max-width:340px;padding:15px 20px;border-radius:20px;font-size:clamp(13.5px,1.15vw,16px);font-weight:600;line-height:1.5;transition:transform .45s cubic-bezier(.34,1.56,.64,1);z-index:9;text-align:center}
.bubble.say::after{content:"";position:absolute;top:100%;left:50%;margin-left:-7px;border:8px solid transparent}
.bubble.say.show{transform:translateX(-50%) scale(1)}
#walkerSay{background:#fff;color:#23273f}
#walkerSay::after{border-top:12px solid #fff}
.bubble.say.genie-say{background:linear-gradient(135deg,#ffd98a,#e3b95c);color:#3a2a08;bottom:auto;top:13%;left:33%}
.bubble.say.genie-say::after{top:100%;bottom:auto;left:26%;border-top:12px solid #e3b95c;border-bottom:none}

/* --- lamp & genie (3D renders) --- */
.lamp{position:absolute;bottom:11vh;left:30%;width:clamp(120px,11vw,175px);z-index:5;opacity:.5;transform:scale(.85);transition:opacity .6s,transform .6s}
.lamp img{width:100%;display:block}
.lamp.awake{opacity:1;transform:scale(1)}
.lamp.awake .lamp-glow{opacity:1}
.lamp-glow{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(244,215,138,.5),transparent 70%);opacity:0;transition:opacity .8s;animation:pulse 1.6s infinite;pointer-events:none}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

.genie{position:absolute;bottom:10.2vh;left:13.4%;width:clamp(320px,31vw,500px);z-index:7;transform:translateY(90px) scale(0);transform-origin:50% 82%;transition:transform 1s cubic-bezier(.34,1.3,.5,1),opacity .7s}
.genie img{width:100%;display:block;filter:drop-shadow(0 0 34px rgba(155,140,255,.45))}
.genie.rise{transform:translateY(0) scale(1)}
.genie.rise img{animation:genieFloat 3.4s infinite ease-in-out}
@keyframes genieFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* when the genie is out, its painted lamp replaces the standalone one */
.lamp.replaced{opacity:0;transform:scale(.6);transition:opacity .5s,transform .5s}

/* characters vanish when the wish is granted */
.stage.revealed .walker,.stage.revealed .genie{opacity:0;pointer-events:none;transition:opacity .7s,transform .7s}
.stage.revealed .walker{transform:translateY(50px) scale(.6)}
.stage.revealed .genie{transform:translateY(70px) scale(.5)}

/* --- orb --- */
.orb{position:absolute;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#ffd98a 45%,#ff8f5f);box-shadow:0 0 26px 8px rgba(255,217,138,.75);z-index:10;opacity:0;pointer-events:none}

/* --- flash --- */
.flash{position:absolute;inset:0;background:radial-gradient(circle at 36% 62%,#fff7e0,rgba(255,217,138,.7) 35%,transparent 70%);opacity:0;z-index:11;pointer-events:none;transition:opacity .3s}
.flash.on{opacity:1}

/* --- burst behind the fan --- */
.burst{position:absolute;left:50%;bottom:14vh;width:0;height:0;z-index:4;opacity:0;transition:opacity .6s;pointer-events:none}
.burst.on{opacity:1}
.burst .rays{position:absolute;left:50%;top:50%;width:min(110vh,1000px);height:min(110vh,1000px);transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(255,217,138,.3) 0deg 6deg,transparent 6deg 22deg);border-radius:50%;-webkit-mask:radial-gradient(circle,#000 0%,transparent 60%);mask:radial-gradient(circle,#000 0%,transparent 60%);animation:raysSpin 30s linear infinite}
@keyframes raysSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.burst .core{position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff8e6 0%,#ffd98a 34%,rgba(255,180,90,.5) 58%,transparent 72%);animation:corePulse 2.2s infinite ease-in-out}
@keyframes corePulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.16)}}
.sparks i{position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:#ffe9b0;box-shadow:0 0 12px 3px rgba(255,217,138,.9)}

/* --- the fan of five cards --- */
.fan{position:absolute;left:50%;bottom:0;width:0;height:0;z-index:12;pointer-events:none}
.fan-card{position:absolute;bottom:6.5vh;left:0;width:clamp(220px,23vw,340px);aspect-ratio:9/16;border:none;border-radius:20px;overflow:hidden;background:#000;cursor:pointer;pointer-events:auto;will-change:transform;backface-visibility:hidden;
  transform-origin:50% 155%;
  transform:translateX(-50%) rotate(0deg) translateY(120px) scale(.35);
  opacity:0;
  box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 0 1.5px rgba(244,215,138,.35);
  transition:transform .8s cubic-bezier(.22,1.3,.36,1),opacity .5s,box-shadow .3s}
.fan-card img,.fan-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fan-card video{opacity:0;transition:opacity .25s}
.fan-card:hover video{opacity:1}
.fan-card .fc-tag{position:absolute;top:12px;left:12px;font-size:10px;letter-spacing:.26em;font-weight:800;color:#f4d78a;background:rgba(8,8,14,.6);backdrop-filter:blur(6px);padding:5px 10px;border-radius:999px}
.fan-card .fc-title{position:absolute;left:14px;right:14px;bottom:14px;font-size:clamp(11px,1vw,14px);font-weight:800;letter-spacing:.1em;text-align:left;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.fan.open .fan-card{transform:translateX(-50%) rotate(var(--r)) translateY(0) scale(1);opacity:1}
.fan-card:nth-child(1){--r:-36deg}
.fan-card:nth-child(2){--r:-18deg}
.fan-card:nth-child(3){--r:0deg}
.fan-card:nth-child(4){--r:18deg}
.fan-card:nth-child(5){--r:36deg}
.fan.open .fan-card:nth-child(1){transition-delay:.05s;z-index:6}
.fan.open .fan-card:nth-child(2){transition-delay:.14s;z-index:7}
.fan.open .fan-card:nth-child(3){transition-delay:.23s;z-index:8}
.fan.open .fan-card:nth-child(4){transition-delay:.32s;z-index:7}
.fan.open .fan-card:nth-child(5){transition-delay:.41s;z-index:6}
.fan.open .fan-card:hover{transform:translateX(-50%) rotate(var(--r)) translateY(-40px) scale(1.05);z-index:20;box-shadow:0 34px 80px rgba(0,0,0,.75),0 0 0 2px rgba(244,215,138,.8)}

/* --- hero copy / buttons --- */
.hero-copy{position:absolute;left:50%;top:7vh;transform:translateX(-50%);text-align:center;z-index:13;opacity:0;pointer-events:none;transition:opacity 1s .2s;width:min(92vw,900px)}
.hero-copy.show{opacity:1;pointer-events:auto}
.hero-copy h1{font-size:clamp(26px,3.8vw,52px);letter-spacing:.06em;font-weight:800;line-height:1.12;text-shadow:0 4px 30px rgba(0,0,0,.85)}
.hero-copy p{margin:13px 0 18px;font-size:clamp(13px,1.15vw,15px);opacity:.88;line-height:1.6;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 30px;border-radius:999px;font-size:13px;letter-spacing:.22em;font-weight:800;transition:all .3s}
.btn-gold{background:linear-gradient(135deg,#f4d78a,#c9a24d);color:#241a08}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(201,162,77,.45)}
.btn-ghost{border:1.5px solid rgba(244,215,138,.6);color:#f4d78a}
.btn-ghost:hover{background:rgba(244,215,138,.12)}
.hero-skip,.hero-replay{position:absolute;bottom:26px;right:34px;z-index:40;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;padding:9px 18px;border-radius:999px;font-size:11.5px;letter-spacing:.2em;cursor:pointer;transition:background .25s}
.hero-skip:hover,.hero-replay:hover{background:rgba(255,255,255,.2)}
.hero-replay{left:34px;right:auto;display:none}
.hero-replay.show{display:block}
.sound-fab{position:absolute;bottom:76px;right:34px;z-index:40;display:none;background:linear-gradient(135deg,#f4d78a,#c9a24d);border:none;color:#241a08;padding:11px 20px;border-radius:999px;font-size:12px;letter-spacing:.14em;font-weight:800;cursor:pointer;animation:pulse 1.8s infinite;box-shadow:0 8px 26px rgba(201,162,77,.45)}
.sound-fab.show{display:block}
.sound-fab.off{background:linear-gradient(135deg,#3a3a46,#22222a);color:#cfd2dc;box-shadow:none;animation:none}

/* --- centered sound prompt (shown while autoplay is blocked) --- */
.sound-prompt{position:absolute;left:50%;bottom:22%;transform:translate(-50%,20px);z-index:45;display:none;align-items:center;gap:14px;background:rgba(8,10,20,.72);border:1px solid rgba(244,215,138,.55);border-radius:999px;padding:14px 26px;backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 24px rgba(244,215,138,.18);opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
.sound-prompt.show{display:flex;opacity:1;transform:translate(-50%,0);animation:spFloat 2.4s ease-in-out infinite}
.sound-prompt .sp-icon{font-size:24px;line-height:1}
.sound-prompt .sp-text{font-size:13px;font-weight:800;letter-spacing:.16em;color:#f4d78a;line-height:1.45}
@keyframes spFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-8px)}}
@media (max-width:640px){.sound-prompt{bottom:26%;padding:12px 20px}.sound-prompt .sp-text{font-size:11px;letter-spacing:.12em}}

/* ---------- PRICING & BRIEF ---------- */
.pricing{padding:120px 8vw;background:linear-gradient(180deg,#0a0a10 0%,#12101d 50%,#0a0a10 100%);border-top:1px solid rgba(244,215,138,.14)}
.pricing-lead{max-width:760px;margin:22px auto 0;font-size:clamp(15px,1.4vw,18px);line-height:1.7;color:#b9bcc8;text-align:center}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1180px;margin:0 auto}
.price-card{background:#12101d;border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:36px 30px;display:flex;flex-direction:column;transition:transform .35s,border-color .35s}
.price-card:hover{transform:translateY(-6px);border-color:rgba(244,215,138,.4)}
.price-card.featured{border-color:rgba(244,215,138,.55);background:linear-gradient(180deg,#17141f,#12101d);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.pc-label{display:block;font-size:10.5px;letter-spacing:.3em;color:#c9a24d;font-weight:800;margin-bottom:18px}
.price-card h3{font-size:clamp(18px,1.6vw,22px);font-weight:700;margin:0 0 12px}
.price-card>p{font-size:14px;line-height:1.65;color:#a9adba;margin:0 0 22px}
.pc-value{font-size:clamp(30px,3.2vw,42px);font-weight:800;background:linear-gradient(135deg,#f4d78a,#c9a24d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1}
.pc-unit{font-size:14px;font-weight:600;letter-spacing:.04em}
.pc-note{display:block;font-size:12px;color:#7f8494;margin:10px 0 22px;line-height:1.5}
.price-card ul{list-style:none;margin:0 0 26px;padding:0;flex:1}
.price-card li{font-size:13px;line-height:1.6;color:#c6cad6;padding:7px 0 7px 20px;position:relative}
.price-card li:before{content:"▸";position:absolute;left:0;color:#c9a24d;font-size:11px}
.price-card .btn{text-align:center;margin-top:auto}

/* estimator */
.estimator{max-width:1180px;margin:34px auto 0;padding:34px 36px;border:1px solid rgba(244,215,138,.3);border-radius:20px;background:rgba(18,16,29,.62);backdrop-filter:blur(10px)}
.est-head{font-size:12px;font-weight:800;letter-spacing:.28em;color:#f4d78a;margin-bottom:26px}
.est-head span{display:block;font-size:11px;font-weight:500;letter-spacing:.06em;color:#7f8494;margin-top:7px;text-transform:none}
.est-fields{display:grid;grid-template-columns:1fr 1fr auto;gap:22px;align-items:end}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font-size:11px;font-weight:700;letter-spacing:.18em;color:#9aa0ae;text-transform:uppercase}
.field input,.field select,.field textarea{background:#0c0b14;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:13px 15px;color:#eef0f6;font-size:14px;font-family:inherit;transition:border-color .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(244,215,138,.6)}
.field textarea{resize:vertical;min-height:76px}
.est-cap{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;color:#9aa0ae;text-transform:uppercase;margin-bottom:9px}
.estimate-output{font-size:clamp(26px,3vw,38px);font-weight:800;color:#f4d78a;line-height:1.1;white-space:nowrap}
.est-note{font-size:12px;line-height:1.6;color:#7f8494;margin:24px 0 0}

/* brief generator */
.brief-wrap{max-width:1180px;margin:34px auto 0;padding:34px 36px;border:1px solid rgba(244,215,138,.3);border-radius:20px;background:rgba(18,16,29,.62);backdrop-filter:blur(10px)}
.bf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.bf-grid .field.wide{grid-column:1/-1}
.bf-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.bf-actions .btn:disabled{opacity:.4;pointer-events:none}
.brief-result{display:none;margin-top:26px;padding:22px 24px;background:#0c0b14;border:1px solid rgba(244,215,138,.35);border-radius:14px;font-size:13.5px;line-height:1.75;color:#d6d9e2;white-space:pre-wrap;word-break:break-word;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
.brief-result.show{display:block}

@media (max-width:960px){
  .price-grid{grid-template-columns:1fr;max-width:560px}
  .est-fields{grid-template-columns:1fr}
  .bf-grid{grid-template-columns:1fr}
  .estimator,.brief-wrap{padding:28px 22px}
}

/* --- lightbox --- */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center}.lightbox.open{display:flex}
.lb-backdrop{position:absolute;inset:0;background:rgba(4,4,10,.9);backdrop-filter:blur(10px)}
.lb-box{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:92vw}
.lb-box video{height:min(78vh,860px);aspect-ratio:9/16;border-radius:16px;background:#000;object-fit:contain;box-shadow:0 0 0 1.5px rgba(244,215,138,.5),0 30px 90px rgba(0,0,0,.8)}
.lb-info{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.lb-tag{font-size:11px;letter-spacing:.3em;color:#c9a24d;font-weight:800}
.lb-info b{font-size:15px}
.lb-more{font-size:11.5px;letter-spacing:.2em;color:#f4d78a;border-bottom:1px solid rgba(244,215,138,.5);padding-bottom:2px}
.lb-close{position:absolute;top:-46px;right:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:14px}
.lb-close:hover{background:rgba(255,255,255,.25)}

/* ---------- STATEMENT ---------- */
.statement{padding:130px 8vw;max-width:1100px;margin:0 auto}
.statement h2{font-size:clamp(26px,3.6vw,48px);font-weight:700;line-height:1.28;margin:26px 0}
.statement-sub{font-size:clamp(18px,2vw,26px);color:#c9a24d;font-weight:700;font-style:italic}

/* ---------- GLOBAL B2B ---------- */
.global{padding:120px 8vw;background:linear-gradient(180deg,#0a0a10 0%,#12101d 50%,#0a0a10 100%);border-top:1px solid rgba(244,215,138,.14)}
.global .kicker,.global h2,.global-intro{max-width:960px;margin-left:auto;margin-right:auto}
.global h2{font-size:clamp(26px,3.8vw,48px);font-weight:700;line-height:1.25;margin-top:24px}
.global-intro{font-size:16.5px;line-height:1.85;opacity:.82;margin-top:20px}
.global-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1180px;margin:54px auto 0}
.market{position:relative;padding:30px 24px 28px;background:rgba(18,16,29,.76);border:1px solid rgba(255,255,255,.09);border-radius:18px;overflow:hidden;transition:transform .35s,border-color .35s}
.market::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#f4d78a,transparent)}
.market:hover{transform:translateY(-5px);border-color:rgba(244,215,138,.45)}
.market-region{display:block;font-size:11px;letter-spacing:.28em;color:#c9a24d;font-weight:800;margin-bottom:18px}
.market b{display:block;font-size:17px;line-height:1.35;margin-bottom:10px}
.market p{font-size:13.5px;line-height:1.65;opacity:.72}
.model-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1180px;margin:36px auto 0;padding-top:34px;border-top:1px solid rgba(255,255,255,.1)}
.model-strip div{text-align:center}
.model-strip b{display:block;font-size:clamp(20px,2.3vw,30px);font-weight:800;color:#f4d78a}
.model-strip span{display:block;margin-top:7px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.68}

/* ---------- WORK CARDS ---------- */
.work{padding:40px 6vw 110px}
.section-head{max-width:900px;margin:0 auto 60px}
.section-head h2{font-size:clamp(24px,3vw,40px);font-weight:700;margin-top:22px;line-height:1.3}
.card{display:block;max-width:1100px;margin:0 auto 70px;transition:transform .4s}
.card:hover{transform:translateY(-4px)}
.card-media{position:relative;aspect-ratio:16/8;border-radius:22px;overflow:hidden;background:#14121f;border:1px solid rgba(255,255,255,.08)}
.card-media video{width:100%;height:100%;object-fit:cover;opacity:.92;transition:opacity .4s}
.card:hover .card-media video{opacity:1}
.card-play{position:absolute;right:22px;bottom:20px;background:rgba(10,10,16,.72);backdrop-filter:blur(8px);padding:10px 20px;border-radius:999px;font-size:11.5px;letter-spacing:.2em;font-weight:800;color:#f4d78a;opacity:0;transform:translateY(8px);transition:all .35s}
.card:hover .card-play{opacity:1;transform:translateY(0)}
.card-info{display:flex;align-items:baseline;gap:20px;padding:20px 6px 0;flex-wrap:wrap}
.card-tag{font-size:11px;letter-spacing:.3em;color:#c9a24d;font-weight:800}
.card-info h3{font-size:clamp(20px,2.4vw,32px);font-weight:700}
.section-sub{margin-top:18px;font-size:15.5px;line-height:1.75;opacity:.72}
/* ---------- SHOWCASE: clean matrix cards (image + label + title + desc) ---------- */
.matrix-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:1180px;margin:0 auto}
.mx-card{background:transparent;border:none;padding:0;cursor:pointer;text-align:left;display:block}
.mx-media{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#05050a;border:1px solid rgba(255,255,255,.08);transition:border-color .3s,box-shadow .3s}
.mx-card:hover .mx-media{border-color:rgba(244,215,138,.45);box-shadow:0 22px 60px rgba(0,0,0,.45)}
.mx-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mx-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);width:52px;height:52px;border-radius:999px;background:rgba(8,8,14,.65);backdrop-filter:blur(8px);border:1px solid rgba(244,215,138,.45);color:#f4d78a;display:flex;align-items:center;justify-content:center;font-size:17px;padding-left:3px;opacity:0;transition:all .3s}
.mx-card:hover .mx-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.mx-body{padding:22px 4px 0}
.mx-kicker{display:block;font-size:10.5px;letter-spacing:.26em;font-weight:800;color:#c9a24d;margin-bottom:10px}
.mx-body h3{font-size:clamp(20px,1.7vw,25px);font-weight:700;line-height:1.25;margin-bottom:10px}
.mx-body p{font-size:14px;line-height:1.75;opacity:.68;max-width:46ch}
.mx-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mx-pills span{font-size:10.5px;letter-spacing:.08em;font-weight:600;color:#d8d3c4;padding:6px 13px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.03)}
.mx-link{display:inline-block;margin-top:20px;font-size:11px;letter-spacing:.22em;font-weight:800;color:#f4d78a;text-decoration:none;transition:opacity .25s}
.mx-link:hover{opacity:.75}

/* ---------- BRAND ---------- */
.brand{background:linear-gradient(160deg,#17122e,#0a0a10);padding:120px 8vw;border-top:1px solid rgba(244,215,138,.14);border-bottom:1px solid rgba(244,215,138,.14)}
.brand-inner{max-width:900px;margin:0 auto}
.brand h2{font-size:clamp(26px,3.6vw,46px);font-weight:700;margin:24px 0;line-height:1.25}
.brand-text{font-size:17px;line-height:1.8;opacity:.85;margin-bottom:34px}
.brand-list{list-style:none;margin-bottom:44px}
.brand-list li{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:15.5px;opacity:.92}
.brand-list b{color:#f4d78a}

/* ---------- SERVICES ---------- */
.services{padding:120px 8vw}
.services-title{font-size:clamp(24px,3vw,40px);font-weight:700;margin-top:22px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1180px;margin:44px auto 0}
.service{background:#12101d;border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:36px 30px;transition:transform .35s,border-color .35s}
.service:hover{transform:translateY(-6px);border-color:rgba(244,215,138,.5)}
.s-num{font-size:13px;letter-spacing:.3em;color:#c9a24d;font-weight:800}
.service h3{font-size:22px;margin:18px 0 14px}
.service p{font-size:14.5px;line-height:1.75;opacity:.8;margin-bottom:22px}
.s-price{font-size:12.5px;letter-spacing:.06em;color:#f4d78a;font-weight:700;line-height:1.6}
.services-note{max-width:760px;margin:56px auto 0;text-align:center;font-size:15px;line-height:1.9;color:#f4d78a;opacity:.85;font-style:italic}

/* ---------- PROCESS ---------- */
.process{padding:0 8vw 120px}
.process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1180px;margin:40px auto 0}
.step{border-top:2px solid #c9a24d;padding-top:22px}
.step span{font-size:30px;font-weight:800;color:#c9a24d}
.step b{display:block;font-size:17px;margin:10px 0 8px;letter-spacing:.06em}
.step p{font-size:13.5px;opacity:.72;line-height:1.6}

/* ---------- STUDIO / SHENZHEN ---------- */
.studio{position:relative;padding:150px 8vw;overflow:hidden}
.studio-bg{position:absolute;inset:0;background:url("assets/shenzhen-night.jpg") center 30%/cover no-repeat;opacity:.5}
.studio::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0a0a10 0%,rgba(10,10,16,.35) 30%,rgba(10,10,16,.55) 70%,#0a0a10 100%)}
.studio-inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
.studio h2{font-size:clamp(30px,4.4vw,58px);font-weight:800;margin:24px 0;line-height:1.14;text-shadow:0 4px 30px rgba(0,0,0,.9)}
.studio-text{font-size:16.5px;line-height:1.85;opacity:.92;max-width:640px;text-shadow:0 2px 16px rgba(0,0,0,.9)}
.studio-stats{display:flex;gap:44px;flex-wrap:wrap;margin-top:52px}
.stat b{display:block;font-size:clamp(30px,3.4vw,46px);font-weight:800;color:#f4d78a;text-shadow:0 2px 18px rgba(0,0,0,.9)}
.stat span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:.8}

/* ---------- CONTACT ---------- */
.contact{padding:150px 8vw;text-align:center;background:radial-gradient(80% 100% at 50% 120%,#241a4d,#0a0a10 70%)}
.contact h2{font-size:clamp(44px,8vw,110px);font-weight:800;letter-spacing:.02em;line-height:1.02;background:linear-gradient(135deg,#fdf3d7,#c9a24d);-webkit-background-clip:text;background-clip:text;color:transparent}
.mail{display:inline-block;margin:44px 0 26px;font-size:clamp(19px,2.6vw,30px);font-weight:700;color:#f4d78a;border-bottom:2px solid rgba(244,215,138,.4);padding-bottom:6px;transition:border-color .3s}
.mail:hover{border-color:#f4d78a}
.legal-box{width:min(92vw,760px);margin:38px auto 0;padding:28px 30px;border:1px solid rgba(244,215,138,.35);border-radius:18px;background:rgba(18,16,29,.62);backdrop-filter:blur(10px)}
.legal-kicker{display:block;font-size:10.5px;letter-spacing:.3em;color:#c9a24d;font-weight:800;margin-bottom:20px}
.legal-row{padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}
.legal-row b{display:block;font-size:clamp(15px,1.8vw,20px);color:#fdf3d7;line-height:1.4}
.legal-row span{display:block;margin-top:6px;font-size:12.5px;letter-spacing:.08em;color:#f4d78a;text-transform:uppercase}
.contact-sub{font-size:15px;line-height:1.9;opacity:.75}
.contact-office{display:inline-block;margin-top:8px;font-size:12.5px;letter-spacing:.04em;opacity:.78}
.contact-lines{margin:46px auto 0;display:flex;flex-direction:column;gap:16px}
.cl-line{margin:0;font-style:italic;font-size:clamp(15px,1.8vw,20px);color:#f5f2e9;letter-spacing:.03em}
.cl-label{font-weight:800;margin-right:10px;color:#f5f2e9}
.cl-line a{color:#f4d78a;font-weight:800;text-decoration:none;border-bottom:2px solid rgba(244,215,138,.45);padding-bottom:2px;transition:border-color .3s}
.cl-line a:hover{border-color:#f4d78a}
.cl-note{font-weight:700;color:#f5f2e9}

/* ---------- FOOTER ---------- */
.footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:30px 44px;font-size:11.5px;letter-spacing:.18em;opacity:.5;border-top:1px solid rgba(255,255,255,.08)}

/* ---------- MOBILE ---------- */
@media(max-width:860px){
  .hero-nav{padding:20px 22px}
  .nav-links{display:none}
  .moon{width:52px;height:52px;top:3.5%;right:6%;box-shadow:0 0 40px 12px rgba(244,215,138,.18)}
  .walker{width:clamp(120px,32vw,160px);left:74%}
  .genie{width:clamp(230px,60vw,300px);left:2%}
  .lamp{left:27%;width:clamp(90px,24vw,120px);bottom:10.5vh}
  .burst{left:50%;bottom:16vh}
  .thought{min-width:170px;font-size:12.5px;left:30%}
  .bubble.say{min-width:180px;font-size:13px;left:30%}
  .bubble.say.genie-say{left:28%;top:10%}
  .fan-card{width:clamp(115px,34vw,160px);border-radius:14px;bottom:11vh;transform-origin:50% 190%}
  .fan.open .fan-card:nth-child(1){--r:-20deg}
  .fan.open .fan-card:nth-child(2){--r:-10deg}
  .fan.open .fan-card:nth-child(4){--r:10deg}
  .fan.open .fan-card:nth-child(5){--r:20deg}
  .hero-copy{top:5.5vh}
  .hero-copy h1{font-size:24px}
  .hero-copy p{font-size:12px}
  .btn{padding:12px 22px;font-size:11.5px}
  .sound-fab{top:auto;bottom:70px;right:22px}
  .service-grid{grid-template-columns:1fr}
  .global{padding:90px 7vw}
  .global-grid{grid-template-columns:1fr;margin-top:40px}
  .model-strip{grid-template-columns:1fr 1fr;gap:26px 14px;margin-top:30px}
  .process-row{grid-template-columns:1fr 1fr}
  .logo{font-size:12.5px;letter-spacing:.16em;gap:8px}
  .logo-mark{height:26px;width:auto}
  .card-media{aspect-ratio:16/10}
  .matrix-grid{grid-template-columns:1fr;gap:30px}
  .statement{padding:90px 7vw}
  .studio{padding:110px 7vw}
  .studio-stats{gap:28px}
  .footer{justify-content:center;text-align:center}
}