:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: #020916; }
body { font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }
.stage { --mx:50%;--my:50%;--rx:0deg;--ry:0deg;--dx:0px;--dy:0px; position:fixed;inset:0;isolation:isolate;overflow:hidden;color:#f8e8bc;background:radial-gradient(circle at 50% 44%,rgba(20,65,111,.26),transparent 32%),linear-gradient(145deg,#020813 0%,#07182f 53%,#020713 100%); }
.stage::before { content:"";position:absolute;inset:0;z-index:-1;opacity:.28;pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 3px); }
.stage::after { content:"";position:absolute;inset:0;z-index:12;pointer-events:none;box-shadow:inset 0 0 180px 45px rgba(0,0,0,.78); }
.cursor-light { position:absolute;z-index:-1;left:var(--mx);top:var(--my);width:56vw;height:56vw;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(240,190,94,.14) 0%,rgba(24,84,141,.09) 28%,transparent 66%);transition:width .4s,height .4s; }
.aurora { position:absolute;z-index:-2;width:60vw;height:24vw;filter:blur(68px);opacity:.22;border-radius:50%;animation:drift 13s ease-in-out infinite alternate; }
.aurora-one { left:-18%;top:2%;background:#1260a6;transform:rotate(-14deg); }
.aurora-two { right:-20%;bottom:-4%;background:#b77a22;animation-delay:-6s; }
.print-grid { position:absolute;left:50%;bottom:-23vh;z-index:-1;width:130vw;height:68vh;transform:translateX(-50%) perspective(520px) rotateX(64deg) translate(var(--dx),calc(var(--dy) * .35));transform-origin:center top;opacity:.26;background-image:linear-gradient(rgba(236,199,115,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(236,199,115,.17) 1px,transparent 1px);background-size:64px 42px;mask-image:linear-gradient(to bottom,transparent,black 22%,transparent 82%);transition:transform .12s ease-out; }
.scanline { position:absolute;z-index:2;left:8%;right:8%;height:1px;top:0;opacity:.55;background:linear-gradient(90deg,transparent,#f4d68d,transparent);box-shadow:0 0 18px #e8b953;animation:scan 7s linear infinite; }
.hero { position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:36px 20px 70px;perspective:1000px; }
.brand-card { position:relative;display:flex;flex-direction:column;align-items:center;transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(calc(var(--dx) * .14),calc(var(--dy) * .14),0);transform-style:preserve-3d;transition:transform .12s ease-out; }
.brand-card::before { content:"";position:absolute;inset:24% -42% -16%;z-index:-1;border:1px solid rgba(238,201,119,.07);border-radius:50%;transform:rotateX(68deg) translateZ(-70px);box-shadow:0 0 100px rgba(36,110,177,.16),inset 0 0 50px rgba(228,183,83,.08); }
.mark-wrap { position:relative;width:clamp(170px,24vh,230px);aspect-ratio:338/322;margin-bottom:clamp(20px,3vh,32px);transform:translateZ(58px); }
.mark-aura { position:absolute;inset:-28%;border-radius:50%;background:radial-gradient(circle,rgba(250,217,139,.25),rgba(35,100,163,.10) 39%,transparent 70%);animation:breathe 4s ease-in-out infinite; }
.original-mark { position:absolute;inset:0;overflow:hidden;border:1px solid rgba(249,220,151,.55);border-radius:5%;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 28px 65px rgba(0,0,0,.48),0 0 52px rgba(219,165,63,.16); }
.original-mark-image { position:absolute;top:-4.44%;left:-36.1%;width:175.45%;height:auto;max-width:none;display:block; }
.brand-copy { text-align:center;transform:translateZ(34px); }
.eyebrow { display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 10px;color:rgba(247,223,164,.54);font:500 clamp(8px,1vw,10px)/1.2 Arial,sans-serif;letter-spacing:.38em; }
.eyebrow span { display:block;width:34px;height:1px;background:linear-gradient(90deg,transparent,rgba(247,223,164,.54)); }
.eyebrow span:last-child { transform:rotate(180deg); }
h1 { margin:0;color:#f9e9c0;font-size:clamp(48px,8.4vw,104px);font-weight:650;letter-spacing:-.075em;line-height:.95;text-shadow:0 0 32px rgba(238,196,101,.13),0 4px 18px rgba(0,0,0,.48); }
h1 span { margin-left:.07em;color:#d8a94b;font-size:.48em;font-weight:500;letter-spacing:-.035em;vertical-align:.52em; }
.cn-name { margin:clamp(10px,1.8vh,17px) 0 0;color:rgba(242,226,189,.76);font-size:clamp(18px,2.6vw,29px);font-weight:300;letter-spacing:.48em;text-indent:.48em; }
.coming-soon { display:flex;justify-content:center;gap:clamp(13px,2.6vw,28px);margin-top:clamp(27px,4.2vh,42px); }
.coming-soon span { display:grid;place-items:center;width:clamp(38px,5vw,52px);aspect-ratio:1;border:1px solid rgba(228,188,100,.3);color:#e8bd65;font:300 clamp(15px,1.8vw,20px)/1 serif;background:rgba(8,27,51,.36);box-shadow:inset 0 0 24px rgba(232,185,83,.04),0 0 18px rgba(0,0,0,.2);backdrop-filter:blur(5px);animation:tile 4s ease-in-out infinite; }
.coming-soon span:nth-child(2) { animation-delay:-.4s; }
.coming-soon span:nth-child(3) { animation-delay:-.8s; }
.coming-soon span:nth-child(4) { animation-delay:-1.2s; }
.sparks i { position:absolute;z-index:1;width:3px;height:3px;border-radius:50%;background:#f5d58b;box-shadow:0 0 12px 2px rgba(238,192,90,.6);animation:float 6s ease-in-out infinite; }
.footer-note { position:absolute;z-index:5;bottom:25px;left:50%;transform:translateX(-50%);width:100%;margin:0;text-align:center;color:rgba(223,201,154,.32);font-size:8px;letter-spacing:.42em; }
.corner { position:absolute;z-index:4;width:58px;height:58px;opacity:.28; }
.corner-tl { top:26px;left:30px;border-top:1px solid #e5bd65;border-left:1px solid #e5bd65; }
.corner-br { right:30px;bottom:26px;border-right:1px solid #e5bd65;border-bottom:1px solid #e5bd65; }
@keyframes drift { to { transform:translate(12vw,5vh) rotate(8deg) scale(1.1); } }
@keyframes scan { 0%{top:-5%;opacity:0}12%,80%{opacity:.5}100%{top:105%;opacity:0} }
@keyframes breathe { 50%{transform:scale(1.14);opacity:.65} }
@keyframes float { 50%{transform:translate(14px,-18px);opacity:.25} }
@keyframes tile { 50%{border-color:rgba(240,201,113,.58);color:#f7daa0;transform:translateY(-3px)} }
@media (max-height:680px) { .hero{padding-bottom:40px}.mark-wrap{width:140px;margin-bottom:15px}.coming-soon{margin-top:22px}.footer-note{bottom:15px} }
@media (max-width:600px) { .cursor-light{width:120vw;height:120vw}.corner{width:34px;height:34px}.corner-tl{top:18px;left:18px}.corner-br{right:18px;bottom:18px}.brand-card::before{inset-inline:-15%}.print-grid{width:190vw} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}.brand-card,.print-grid{transform:none} }