*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Noto Sans TC",system-ui,sans-serif;background:#090914;color:#f8f7ff;overflow-x:hidden}.bg-orb{position:fixed;border-radius:50%;filter:blur(90px);opacity:.22;pointer-events:none;z-index:-1}.orb-1{width:380px;height:380px;background:#7a5cff;top:-80px;left:-100px}.orb-2{width:420px;height:420px;background:#ff74c8;right:-160px;top:28%}.orb-3{width:340px;height:340px;background:#5b6cff;left:35%;bottom:-180px}.nav-wrap{position:sticky;top:0;z-index:50;background:rgba(9,9,20,.72);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}.nav{max-width:1180px;margin:auto;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#9278ff,#ff79ca);box-shadow:0 0 30px rgba(165,112,255,.35)}.brand strong{display:block;font-size:18px}.brand small{display:block;color:#9e9ab7;font-size:10px;letter-spacing:.14em;margin-top:2px}.nav-links{display:flex;align-items:center;gap:26px}.nav-links a{color:#c7c4da;text-decoration:none;font-size:14px}.nav-links a:hover{color:#fff}.nav-cta{padding:10px 16px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.05)}.menu-btn{display:none;background:none;border:0;color:#fff;font-size:26px}.section{max-width:1180px;margin:auto;padding:110px 24px}.hero{min-height:760px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:70px;padding-top:90px}.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:800;color:#bcacff;text-transform:uppercase}.hero h1{font-size:68px;line-height:1.08;margin:20px 0 22px;letter-spacing:-.04em}.hero h1 span{background:linear-gradient(90deg,#b49dff 0%,#ff9fd7 58%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-sub{font-size:18px;line-height:1.9;color:#b9b5cc;max-width:720px}.hero-actions,.final-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:14px;text-decoration:none;font-weight:800;border:1px solid transparent;cursor:pointer;font-family:inherit}.btn.primary{color:#0e0b1c;background:linear-gradient(135deg,#a98bff,#ff98d4);box-shadow:0 14px 40px rgba(168,121,255,.28)}.btn.ghost{color:#f8f7ff;border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.04)}.hero-tags{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-tags span{font-size:12px;color:#c4bfd6;padding:8px 12px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.03)}.hero-card{position:relative}.glass-card{border:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));backdrop-filter:blur(18px);border-radius:28px;padding:30px;box-shadow:0 28px 80px rgba(0,0,0,.38)}.featured{transform:rotate(1.5deg)}.card-badge{display:inline-block;padding:7px 10px;border-radius:999px;background:rgba(255,152,212,.12);color:#ffb5dd;font-size:10px;font-weight:900;letter-spacing:.14em}.tiny{margin:28px 0 5px;color:#9f9bb4;font-size:13px}.glass-card h2{font-size:34px;margin:0 0 22px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice-grid span{padding:15px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);font-size:14px;color:#ddd9e9}.mini-cta{display:inline-block;margin-top:24px;color:#fff;text-decoration:none;font-weight:800}.stats-strip{max-width:1080px;margin:0 auto;padding:26px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:rgba(255,255,255,.035)}.stats-strip div{padding:8px 22px;border-right:1px solid rgba(255,255,255,.07)}.stats-strip div:last-child{border-right:0}.stats-strip strong{display:block;font-size:22px}.stats-strip span{font-size:12px;color:#9893aa}.section-head{max-width:760px;margin-bottom:42px}.section-head h2{font-size:46px;line-height:1.15;margin:14px 0 14px}.section-head p{color:#a9a4bb;font-size:16px;line-height:1.8}.cards{display:grid}.services-grid{grid-template-columns:repeat(4,1fr);gap:16px}.service-card,.fun-card{padding:26px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);min-height:220px}.service-card.accent,.fun-card.special{background:linear-gradient(145deg,rgba(145,116,255,.12),rgba(255,120,202,.08));border-color:rgba(198,166,255,.2)}.icon{font-size:28px}.service-card h3,.fun-card h3{font-size:22px;margin:18px 0 10px}.service-card p,.fun-card p{color:#d2cee0;line-height:1.7}.service-card small{color:#8f8aa0;line-height:1.6}.companion-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.companion-card{min-height:320px;padding:34px;border-radius:28px;border:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;position:relative}.companion-card:before{content:"";position:absolute;inset:0;opacity:.8;z-index:-1}.companion-card.male:before{background:radial-gradient(circle at 20% 20%,rgba(110,74,255,.38),transparent 42%),linear-gradient(140deg,#111024,#0b0a16)}.companion-card.female:before{background:radial-gradient(circle at 75% 20%,rgba(255,113,198,.34),transparent 40%),linear-gradient(140deg,#1b0d1a,#0c0912)}.companion-label{font-size:12px;font-weight:900;color:#cfc8ff}.companion-card h3{font-size:30px;margin:10px 0}.companion-card p{color:#b9b3c6;max-width:480px}.companion-card a{color:#fff;text-decoration:none;font-weight:800;margin-top:12px}.fun-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.num{font-size:12px;font-weight:900;color:#bbaeff}.price-table-wrap{border:1px solid rgba(255,255,255,.09);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.025)}.price-row{display:grid;grid-template-columns:1.2fr .8fr 1.2fr;gap:18px;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.06);align-items:center}.price-row:last-child{border-bottom:0}.price-row.head{color:#8f8aa4;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.price-row strong{color:#ffc0e3}.price-row small{color:#9b96a8}.offer-banner{margin-top:22px;padding:28px 30px;border-radius:24px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(110deg,rgba(132,94,255,.13),rgba(255,102,195,.08));display:flex;justify-content:space-between;gap:24px;align-items:center}.offer-banner h3{font-size:26px;margin:8px 0}.offer-banner p{color:#aaa4b9;margin:0}.match-section{padding-bottom:70px}.match-box{padding:30px;border-radius:26px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035)}.match-options{display:flex;flex-wrap:wrap;gap:12px}.chip{font-family:inherit;padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#ddd8e8;cursor:pointer}.chip.active{background:linear-gradient(135deg,rgba(164,127,255,.26),rgba(255,127,204,.22));border-color:rgba(255,255,255,.24);color:#fff}.match-result{margin:24px 0;padding:24px;border-radius:18px;background:#0d0c19;border:1px solid rgba(255,255,255,.07)}.match-result span{display:block;font-size:12px;color:#928da1;margin-bottom:7px}.match-result strong{display:block;font-size:22px;margin-bottom:6px}.match-result p{margin:0;color:#8f899d}.full{width:100%}.final-cta{padding-top:60px}.final-card{border-radius:32px;padding:48px;background:linear-gradient(135deg,rgba(126,92,255,.18),rgba(255,102,197,.12));border:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:40px;align-items:center}.final-card h2{font-size:42px;margin:10px 0}.final-card p{color:#b8b2c3;max-width:620px;line-height:1.8}footer{padding:0 24px 50px}.footer-inner{max-width:1180px;margin:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:30px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;align-items:end}.footer-inner strong,.footer-inner span{display:block}.footer-inner span,.footer-inner p,.footer-inner small{color:#777286;font-size:12px}.footer-inner p{text-align:center}.footer-inner small{text-align:right}.reveal{opacity:0;transform:translateY(20px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}@media(max-width:900px){.menu-btn{display:block}.nav-links{display:none;position:absolute;top:78px;left:12px;right:12px;flex-direction:column;align-items:stretch;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#11101d}.nav-links.open{display:flex}.nav-links a{padding:10px}.hero{grid-template-columns:1fr;min-height:auto;gap:44px}.hero h1{font-size:52px}.services-grid,.fun-grid{grid-template-columns:1fr 1fr}.stats-strip{grid-template-columns:1fr 1fr}.stats-strip div:nth-child(2){border-right:0}.stats-strip div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.07)}.final-card{flex-direction:column;align-items:flex-start}.footer-inner{grid-template-columns:1fr;text-align:left}.footer-inner p,.footer-inner small{text-align:left}}@media(max-width:620px){.section{padding:80px 18px}.hero{padding-top:56px}.hero h1{font-size:40px}.hero-sub{font-size:16px}.section-head h2{font-size:34px}.services-grid,.fun-grid,.companion-grid{grid-template-columns:1fr}.choice-grid{grid-template-columns:1fr}.stats-strip{grid-template-columns:1fr}.stats-strip div{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.07)}.stats-strip div:last-child{border-bottom:0}.price-row{grid-template-columns:1fr;gap:4px}.price-row.head{display:none}.offer-banner{flex-direction:column;align-items:flex-start}.final-card{padding:30px}.final-card h2{font-size:34px}}
.profile-group{scroll-margin-top:100px;margin-top:28px;padding:26px;border:1px solid rgba(255,255,255,.09);border-radius:28px;background:linear-gradient(145deg,rgba(112,82,255,.08),rgba(255,255,255,.025))}.female-group{margin-top:34px;background:linear-gradient(145deg,rgba(255,120,198,.09),rgba(255,255,255,.025))}.profile-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}.profile-title span{font-size:10px;letter-spacing:.16em;color:#a99cff;font-weight:900}.female-group .profile-title span{color:#ff9fd7}.profile-title h3{font-size:30px;margin:0}.profile-title p{margin:0;color:#8f899d;font-size:13px}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.profile-card{padding:0;border:1px solid rgba(255,255,255,.09);border-radius:18px;overflow:hidden;background:#0d0c19;color:#fff;font-family:inherit;cursor:pointer;text-align:left;transition:.25s ease}.profile-card:hover{transform:translateY(-4px);border-color:rgba(193,168,255,.35);box-shadow:0 18px 40px rgba(0,0,0,.28)}.profile-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}.profile-card span{display:block;padding:12px 14px;font-weight:800}.price-tabs{display:flex;gap:10px;margin-bottom:20px}.price-tab{font-family:inherit;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#c9c4d7;padding:12px 18px;border-radius:999px;cursor:pointer;font-weight:800}.price-tab.active{color:#0e0b1c;background:linear-gradient(135deg,#a98bff,#ff98d4)}.price-image-wrap{border:1px solid rgba(255,255,255,.09);border-radius:24px;background:rgba(255,255,255,.025);padding:18px}.price-image{display:none;width:100%;padding:0;border:0;background:none;cursor:zoom-in}.price-image.active{display:block}.price-image img{display:block;width:min(100%,860px);height:auto;margin:auto;border-radius:14px}.lightbox{position:fixed;inset:0;z-index:100;background:rgba(3,3,10,.94);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:28px}.lightbox.open{display:flex}.lightbox img{max-width:min(94vw,1500px);max-height:90vh;object-fit:contain;border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,.5)}.lightbox-close{position:fixed;right:24px;top:18px;width:48px;height:48px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:32px;cursor:pointer}@media(max-width:900px){.profile-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.profile-group{padding:14px;border-radius:20px}.profile-grid{grid-template-columns:1fr}.profile-card img{aspect-ratio:auto}.price-tabs{flex-direction:column}.price-tab{border-radius:14px}.price-image-wrap{padding:8px}}
/* 2026 premium visual pass */
body{background:#05030f}.section{position:relative}.nav-wrap{backdrop-filter:blur(24px);background:rgba(5,3,18,.72)!important;border-bottom:1px solid rgba(154,104,255,.18)}
.splash{position:fixed;inset:0;z-index:9999;background:radial-gradient(circle at 50% 45%,#28105c 0,#09051d 42%,#020107 78%);display:grid;place-items:center;overflow:hidden;animation:splashAway .9s ease 2.65s forwards}.splash:before,.splash:after{content:"";position:absolute;width:75vmax;height:75vmax;border:1px solid rgba(186,143,255,.22);border-radius:50%;animation:orbit 9s linear infinite}.splash:after{width:48vmax;height:48vmax;animation-direction:reverse;animation-duration:6s}.splash-stars{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#b68cff 1px,transparent 1px);background-size:47px 47px,83px 83px;background-position:0 0,20px 18px;opacity:.55;animation:starDrift 6s linear infinite}.splash-core{text-align:center;position:relative;filter:drop-shadow(0 0 28px #7c3cff);animation:splashIn 1.1s cubic-bezier(.16,1,.3,1)}.splash-crown{font-size:38px;color:#e9ddff}.splash-title{font-size:clamp(70px,12vw,150px);font-weight:900;letter-spacing:.12em;margin-right:-.12em;background:linear-gradient(180deg,#fff,#d8c4ff 50%,#8d5cff);-webkit-background-clip:text;color:transparent}.splash-sub{letter-spacing:.55em;color:#d8c7ff;font-size:13px;margin-top:8px}.splash-line{width:0;height:2px;margin:25px auto;background:linear-gradient(90deg,transparent,#fff,#9c68ff,transparent);animation:lineGrow 1.4s .6s forwards}@keyframes splashIn{from{opacity:0;transform:scale(.72);filter:blur(16px)}to{opacity:1;transform:none}}@keyframes lineGrow{to{width:280px}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes starDrift{to{background-position:47px 47px,103px 101px}}@keyframes splashAway{to{opacity:0;visibility:hidden;transform:scale(1.08)}}
.hero{min-height:88vh;align-items:center}.hero:before{content:"";position:absolute;inset:5% -10% 0;background:radial-gradient(ellipse at 30% 40%,rgba(119,55,255,.22),transparent 45%),radial-gradient(ellipse at 80% 35%,rgba(227,90,255,.13),transparent 38%);pointer-events:none}.hero h1{font-size:clamp(48px,6vw,88px);line-height:1.05;text-shadow:0 0 45px rgba(141,89,255,.35)}.glass-card{box-shadow:0 25px 80px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08)!important;border:1px solid rgba(172,126,255,.3)!important}
.game-service{grid-column:span 2;background:linear-gradient(135deg,rgba(45,20,92,.75),rgba(13,10,35,.86))!important}.game-logo-cloud{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0}.game-logo-cloud b{height:90px;border:1px solid rgba(168,126,255,.22);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:30px;box-shadow:inset 0 0 25px rgba(122,70,255,.08);transition:.3s}.game-logo-cloud b:hover{transform:translateY(-6px);border-color:#a975ff;box-shadow:0 12px 30px rgba(106,55,255,.25)}.game-logo-cloud i{font-size:10px;font-style:normal;letter-spacing:.08em;margin-top:7px;color:#cbb8f7}
.fun-showcase{overflow:hidden}.fun-showcase:before{content:"";position:absolute;inset:10% -20%;background:radial-gradient(circle,rgba(98,43,200,.17),transparent 55%);pointer-events:none}.fun-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;perspective:1200px}.fun-poster{position:relative;padding:0;border:1px solid rgba(173,129,255,.22);background:#0b071a;border-radius:18px;overflow:hidden;aspect-ratio:16/10;cursor:pointer;box-shadow:0 14px 35px rgba(0,0,0,.35);transition:transform .35s ease,border-color .35s,box-shadow .35s}.fun-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease,filter .35s}.fun-poster span{position:absolute;left:12px;bottom:10px;padding:6px 10px;border-radius:10px;background:rgba(7,4,20,.72);backdrop-filter:blur(10px);color:white;font-weight:700;font-size:13px;border:1px solid rgba(255,255,255,.12)}.fun-poster:hover{transform:translateY(-8px) scale(1.025);border-color:#b789ff;box-shadow:0 22px 55px rgba(93,45,196,.38)}.fun-poster:hover img{transform:scale(1.06);filter:saturate(1.08) brightness(1.08)}
.profile-card,.price-image{box-shadow:0 16px 45px rgba(0,0,0,.32)}.profile-card:hover{box-shadow:0 22px 55px rgba(108,56,225,.28)!important}.final-card{background:radial-gradient(circle at 80% 20%,rgba(192,100,255,.2),transparent 35%),linear-gradient(135deg,rgba(39,17,82,.9),rgba(11,7,29,.92))!important}
@media(max-width:900px){.fun-gallery{grid-template-columns:repeat(2,1fr)}.game-service{grid-column:auto}.game-logo-cloud{grid-template-columns:repeat(3,1fr)}}@media(max-width:560px){.fun-gallery{grid-template-columns:1fr}.game-logo-cloud{grid-template-columns:repeat(2,1fr)}.splash-title{font-size:64px}}
/* ===== XINGLAN V4 visual refinement ===== */
body{
background:
radial-gradient(circle at 12% 12%, rgba(126,78,255,.16), transparent 26%),
radial-gradient(circle at 88% 32%, rgba(219,101,255,.09), transparent 24%),
radial-gradient(circle at 50% 74%, rgba(87,74,210,.08), transparent 34%),
#070611;
position:relative;
}
body::before{
content:"";
position:fixed;
inset:0;
z-index:-4;
pointer-events:none;
opacity:.72;
background-image:
radial-gradient(circle at 8% 16%, rgba(255,255,255,.95) 0 1px, transparent 1.6px),
radial-gradient(circle at 28% 7%, rgba(202,180,255,.8) 0 1px, transparent 1.5px),
radial-gradient(circle at 44% 28%, rgba(255,255,255,.65) 0 1px, transparent 1.7px),
radial-gradient(circle at 69% 12%, rgba(222,201,255,.75) 0 1px, transparent 1.5px),
radial-gradient(circle at 91% 20%, rgba(255,255,255,.8) 0 1px, transparent 1.7px);
background-size:220px 220px, 290px 290px, 340px 340px, 260px 260px, 390px 390px;
animation:xinglanStars 18s linear infinite;
}
body::after{
content:"";
position:fixed;
inset:0;
z-index:-3;
pointer-events:none;
opacity:.18;
background:
linear-gradient(115deg, transparent 0 46%, rgba(159,118,255,.25) 46.15% 46.25%, transparent 46.4% 100%),
linear-gradient(25deg, transparent 0 68%, rgba(230,181,255,.16) 68.1% 68.2%, transparent 68.35% 100%);
background-size:680px 680px, 860px 860px;
}
@keyframes xinglanStars{to{background-position:220px 90px, -145px 160px, 170px -130px, -130px 130px, 195px 80px}}
.section{
position:relative;
}
.section:not(.hero)::before{
content:"✦";
position:absolute;
top:54px;
left:50%;
transform:translateX(-50%);
color:rgba(190,160,255,.4);
text-shadow:0 0 18px rgba(156,108,255,.55);
font-size:15px;
}
.section:not(.hero)::after{
content:"";
position:absolute;
top:61px;
left:calc(50% - 90px);
width:180px;
height:1px;
background:linear-gradient(90deg,transparent,rgba(166,125,255,.35),transparent);
}
/* HERO */
.hero{
min-height:82vh;
gap:54px;
}
.hero-copy{max-width:760px}
.hero h1{
font-size:clamp(52px,5.4vw,78px)!important;
line-height:1.12!important;
letter-spacing:-.045em!important;
margin:20px 0 24px!important;
}
.hero-line{
display:block;
white-space:nowrap;
}
.hero-line-white{
color:#f7f4ff;
}
.hero-line-gradient{
margin-top:4px;
background:linear-gradient(90deg,#a88cff 0%,#c68cff 44%,#f0a3dc 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.hero-card .glass-card{
background:
radial-gradient(circle at 75% 15%,rgba(178,132,255,.16),transparent 32%),
linear-gradient(180deg,rgba(28,20,52,.82),rgba(15,11,29,.82));
}
/* SERVICES — 3 vertical rows */
.services-section{padding-top:96px}
.service-stack{
display:grid;
gap:14px;
}
.service-row{
display:grid;
grid-template-columns:230px 1fr;
align-items:center;
min-height:128px;
padding:22px 28px;
border-radius:24px;
border:1px solid rgba(178,143,255,.2);
background:
linear-gradient(100deg,rgba(77,45,145,.18),rgba(12,10,24,.82) 44%),
rgba(255,255,255,.025);
box-shadow:inset 0 1px rgba(255,255,255,.04),0 14px 35px rgba(0,0,0,.16);
overflow:hidden;
position:relative;
}
.service-row::after{
content:"";
position:absolute;
right:-80px;
width:250px;height:250px;
border-radius:50%;
background:radial-gradient(circle,rgba(134,87,255,.12),transparent 67%);
}
.service-row:nth-child(2){
background:linear-gradient(100deg,rgba(104,54,160,.15),rgba(12,10,24,.82) 44%);
}
.service-row:nth-child(3){
background:linear-gradient(100deg,rgba(181,73,157,.12),rgba(12,10,24,.82) 44%);
}
.service-row-title{
display:flex;
align-items:center;
gap:16px;
}
.service-row-title .icon{
display:grid;
place-items:center;
width:52px;height:52px;
border-radius:16px;
background:linear-gradient(145deg,rgba(161,120,255,.22),rgba(255,255,255,.035));
border:1px solid rgba(191,158,255,.2);
box-shadow:0 0 26px rgba(130,76,255,.12);
}
.service-row h3{
margin:0;
font-size:26px;
}
.service-row-copy{
color:#d9d5e5;
font-size:17px;
letter-spacing:.02em;
}
.service-row-copy i{
font-style:normal;
color:#8d74cf;
margin:0 10px;
}
.game-logo-strip{
display:grid;
grid-template-columns:repeat(6,minmax(76px,1fr));
gap:10px;
}
.game-logo-item{
min-width:0;
padding:10px 8px 8px;
text-align:center;
border-radius:16px;
border:1px solid rgba(172,133,255,.16);
background:rgba(255,255,255,.035);
transition:.25s ease;
}
.game-logo-item:hover{
transform:translateY(-3px);
border-color:rgba(211,186,255,.4);
background:rgba(121,79,210,.12);
box-shadow:0 10px 26px rgba(50,19,107,.28);
}
.game-logo-item img{
width:48px;height:40px;
object-fit:cover;
border-radius:8px;
display:block;
margin:0 auto 6px;
}
.game-logo-item span{
display:block;
font-size:11px;
color:#c9c4d7;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* COMPANIONS */
.companions-section .section-head{
margin-bottom:22px;
}
.profile-title{
display:block!important;
margin-bottom:18px!important;
}
.profile-title h3{
font-size:30px!important;
line-height:1.2;
}
/* FUN */
.fun-head{
max-width:none!important;
}
.fun-head h2{
white-space:nowrap;
font-size:clamp(32px,3.5vw,46px)!important;
letter-spacing:-.025em;
margin-bottom:0!important;
}
/* Extra XINGLAN accents */
.profile-group,
.price-image-wrap,
.final-card{
box-shadow:
inset 0 1px rgba(255,255,255,.05),
0 25px 70px rgba(0,0,0,.2),
0 0 0 1px rgba(111,70,197,.04);
}
.profile-group::before,
.price-image-wrap::before{
content:"";
position:absolute;
pointer-events:none;
width:120px;height:120px;
border-radius:50%;
filter:blur(45px);
background:rgba(134,82,255,.13);
}
.profile-group{position:relative;overflow:hidden}
.profile-group::before{right:-30px;top:-30px}
.price-image-wrap{position:relative;overflow:hidden}
.price-image-wrap::before{left:-30px;bottom:-30px}
@media(max-width:980px){
.hero-line{white-space:normal}
.service-row{grid-template-columns:1fr;gap:18px}
.game-logo-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
.hero h1{font-size:42px!important}
.service-row{padding:20px}
.game-logo-strip{grid-template-columns:repeat(2,1fr)}
.fun-head h2{white-space:normal}
}
/* ===== XINGLAN V5 polish ===== */
/* 讓客服幫你配一單：改成寬卡，不再瘦長 */
.hero-card{
display:flex;
justify-content:center;
align-items:center;
}
.match-pick-card{
width:min(100%, 560px)!important;
max-width:560px!important;
min-width:480px;
transform:none!important;
padding:34px 36px 30px!important;
border-radius:28px!important;
background:
radial-gradient(circle at 75% 15%,rgba(191,131,255,.18),transparent 32%),
linear-gradient(180deg,rgba(34,24,64,.94),rgba(14,11,28,.96))!important;
box-shadow:
0 28px 70px rgba(0,0,0,.34),
0 0 0 1px rgba(194,150,255,.14),
inset 0 1px rgba(255,255,255,.05);
}
.match-pick-card h2{
white-space:nowrap;
font-size:36px!important;
letter-spacing:-.03em;
}
.match-pick-card .choice-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:12px!important;
}
.match-pick-card .choice-grid span{
min-height:58px;
display:flex;
align-items:center;
font-size:15px!important;
padding:15px 16px!important;
}
.match-pick-card .mini-cta{
margin-top:26px!important;
font-size:15px;
}
/* 遊戲 Logo 改成乾淨圖示呈現，不要白色小框 */
.game-logo-item{
background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018))!important;
border-color:rgba(173,136,255,.18)!important;
padding:14px 10px 12px!important;
min-height:104px;
}
.game-logo-item img{
width:56px!important;
height:56px!important;
object-fit:contain!important;
border-radius:0!important;
background:transparent!important;
filter:drop-shadow(0 0 12px rgba(177,128,255,.16));
margin:0 auto 8px!important;
}
.game-logo-item span{
font-size:12px!important;
color:#d8d4e2!important;
font-weight:700;
}
/* 趣味單標題 */
.fun-head h2{
white-space:nowrap!important;
}
/* 進站主視覺：皇冠改成星星識別 */
.intro-star,
.intro-star-sigil{
color:#efe6ff;
text-shadow:
0 0 12px rgba(224,204,255,.95),
0 0 30px rgba(156,99,255,.72),
0 0 60px rgba(126,76,255,.5);
}
.intro-star-sigil{
position:absolute;
left:50%;
top:10%;
transform:translateX(-50%);
font-size:42px;
z-index:5;
animation:xinglanStarPulse 1.9s ease-in-out infinite;
}
.intro-star-sigil::before,
.intro-star-sigil::after{
content:"";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:140px;
height:1px;
background:linear-gradient(90deg,transparent,rgba(218,191,255,.8),transparent);
}
.intro-star-sigil::after{
transform:translate(-50%,-50%) rotate(90deg);
width:110px;
}
@keyframes xinglanStarPulse{
0%,100%{transform:translateX(-50%) scale(1);opacity:.86}
50%{transform:translateX(-50%) scale(1.14);opacity:1}
}
/* 更有星瀾感的首頁背景 */
.hero::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:-1;
background:
radial-gradient(circle at 20% 35%,rgba(123,73,255,.16),transparent 28%),
radial-gradient(circle at 72% 28%,rgba(205,126,255,.11),transparent 26%);
}
.hero::after{
content:"";
position:absolute;
left:8%;
right:8%;
top:18%;
height:58%;
pointer-events:none;
z-index:-1;
border-radius:50%;
border:1px solid rgba(177,134,255,.08);
box-shadow:
0 0 80px rgba(108,69,214,.12),
inset 0 0 70px rgba(124,78,210,.05);
transform:rotate(-7deg);
}
/* 卡片與區塊細節 */
.service-row,
.profile-group,
.fun-card,
.price-image-wrap,
.final-card{
position:relative;
}
.service-row::before,
.fun-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
border-radius:inherit;
background:
linear-gradient(115deg,rgba(255,255,255,.035),transparent 24%),
radial-gradient(circle at 80% 20%,rgba(168,112,255,.07),transparent 26%);
}
/* 手機 */
@media(max-width:980px){
.match-pick-card{
min-width:0;
width:100%!important;
}
.match-pick-card h2{
white-space:normal;
font-size:32px!important;
}
}
/* ===== XINGLAN V6 correct official-like game logo assets ===== */
.game-logo-item img{
width:64px!important;
height:64px!important;
object-fit:contain!important;
background:transparent!important;
border-radius:0!important;
filter:drop-shadow(0 0 10px rgba(155,112,255,.16));
}
.game-logo-item{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:118px;
}
.game-logo-item span{
margin-top:2px;
font-size:12px!important;
}
/* ===== XINGLAN V7 final brand & cinematic intro ===== */
.brand-photo{overflow:hidden;padding:0!important;background:#110b24!important;border:1px solid rgba(194,157,255,.26);box-shadow:0 0 24px rgba(132,78,255,.28)}
.brand-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Hero decorative characters */
.hero{position:relative;overflow:visible}
.hero-deco{position:absolute;z-index:0;pointer-events:none;filter:drop-shadow(0 0 28px rgba(142,89,255,.28));opacity:.17}
.hero-deco-left{left:-120px;bottom:18px;height:430px;transform:rotate(-3deg)}
.hero-deco-right{right:-118px;bottom:4px;height:450px;transform:rotate(3deg)}
.hero-copy,.hero-card{position:relative;z-index:2}
/* Splash overhaul */
.splash{position:fixed!important;inset:0!important;z-index:9999!important;display:grid!important;place-items:center!important;overflow:hidden!important;isolation:isolate;background:radial-gradient(circle at 50% 45%,rgba(71,31,137,.72) 0%,rgba(17,8,43,.94) 28%,#05020d 70%,#010105 100%)!important;animation:splashExit 1s cubic-bezier(.45,0,.2,1) 4.1s forwards!important}
.splash::before{content:"";position:absolute;inset:-16%;z-index:-5;background:conic-gradient(from 0deg at 50% 50%,transparent 0 18%,rgba(150,91,255,.08) 23%,transparent 28% 56%,rgba(235,150,255,.06) 62%,transparent 68% 100%);filter:blur(20px);animation:galaxyTurn 18s linear infinite}
.splash-stars{position:absolute!important;inset:-10%!important;z-index:-4!important;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.4px),radial-gradient(circle,#b795ff 0 1.2px,transparent 1.7px),radial-gradient(circle,#ffd4ff 0 .9px,transparent 1.5px)!important;background-size:56px 56px,101px 101px,163px 163px!important;background-position:0 0,20px 18px,70px 52px!important;opacity:.6!important;animation:starDriftV7 12s linear infinite!important}
.splash-nebula{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;opacity:.36;z-index:-3}
.nebula-a{width:44vw;height:44vw;left:-12vw;top:-13vw;background:radial-gradient(circle,rgba(122,73,255,.9),rgba(78,33,165,.15) 52%,transparent 72%);animation:nebulaPulse 5s ease-in-out infinite alternate}
.nebula-b{width:40vw;height:40vw;right:-10vw;bottom:-12vw;background:radial-gradient(circle,rgba(223,113,255,.72),rgba(102,42,164,.12) 54%,transparent 72%);animation:nebulaPulse 6.2s .4s ease-in-out infinite alternate-reverse}
.splash-orbit{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(208,178,255,.16);box-shadow:0 0 34px rgba(132,78,255,.08);z-index:-1}
.orbit-a{width:min(78vw,940px);height:min(78vw,940px);transform:translate(-50%,-50%) rotate(14deg);border-left-color:rgba(240,222,255,.48);animation:orbitA 14s linear infinite}
.orbit-b{width:min(56vw,680px);height:min(42vw,500px);transform:translate(-50%,-50%) rotate(-20deg);border-top-color:rgba(236,214,255,.44);animation:orbitB 9s linear infinite reverse}
.orbit-c{width:min(43vw,510px);height:min(43vw,510px);transform:translate(-50%,-50%);border-style:dashed;border-color:rgba(184,144,255,.17);animation:orbitA 20s linear infinite reverse}
.splash-core{text-align:center;position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;animation:coreArrive 1.1s cubic-bezier(.16,1,.3,1)}
.splash-star{font-size:52px;color:#f5edff;line-height:1;text-shadow:0 0 14px #fff,0 0 32px #a874ff,0 0 68px #7d42ff;animation:starPulse 1.8s ease-in-out infinite}
.splash-brand-shell{width:min(34vw,330px);aspect-ratio:1/1.14;margin-top:8px;border-radius:28px;overflow:hidden;border:1px solid rgba(221,197,255,.25);box-shadow:0 0 0 1px rgba(119,70,208,.25),0 0 40px rgba(129,74,255,.28),0 30px 90px rgba(0,0,0,.45);position:relative}
.splash-brand-shell::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);transform:translateX(-70%) rotate(7deg);animation:sheenPass 2.7s .7s ease-in-out forwards}
.splash-brand-shell img{width:100%;height:100%;object-fit:cover;display:block}
.splash-wordmark{margin-top:18px;letter-spacing:.5em;margin-right:-.5em;color:#d9c8ff;font-size:12px;font-weight:700;text-shadow:0 0 16px rgba(174,130,255,.45)}
.splash-line{height:1px;width:0;margin-top:18px;background:linear-gradient(90deg,transparent,#d7c5ff,#fff,#b46dff,transparent);animation:lineGrowV7 1.3s .7s ease forwards}
.splash-girl{position:absolute;bottom:-40px;z-index:1;pointer-events:none;filter:drop-shadow(0 0 28px rgba(141,87,255,.28));opacity:0;animation:girlReveal 1.3s 1.2s ease forwards}
.splash-girl-left{left:2.5vw;height:min(62vh,620px);transform:translateX(-40px)}
.splash-girl-right{right:2.5vw;height:min(62vh,620px);transform:translateX(40px)}
.splash-skip{position:absolute;right:24px;bottom:22px;z-index:8;border:1px solid rgba(211,183,255,.22);background:rgba(20,11,38,.5);color:#cfc3dc;border-radius:999px;padding:9px 14px;font-family:inherit;font-size:12px;cursor:pointer;backdrop-filter:blur(10px)}
.splash-skip:hover{color:#fff;border-color:rgba(229,210,255,.45)}
.splash.skip-now{animation:splashExit .55s ease forwards!important}
@keyframes coreArrive{from{opacity:0;transform:scale(.78);filter:blur(14px)}to{opacity:1;transform:none;filter:none}}
@keyframes starPulse{0%,100%{transform:scale(.92);opacity:.78}50%{transform:scale(1.14);opacity:1}}
@keyframes sheenPass{to{transform:translateX(70%) rotate(7deg)}}
@keyframes lineGrowV7{to{width:250px}}
@keyframes girlReveal{to{opacity:.88;transform:translateX(0)}}
@keyframes galaxyTurn{to{transform:rotate(360deg)}}
@keyframes starDriftV7{to{background-position:56px 56px,121px 119px,233px 215px}}
@keyframes nebulaPulse{to{transform:scale(1.12);opacity:.5}}
@keyframes orbitA{to{transform:translate(-50%,-50%) rotate(374deg)}}
@keyframes orbitB{to{transform:translate(-50%,-50%) rotate(340deg)}}
@keyframes splashExit{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden;transform:scale(1.045)}}
@media(max-width:980px){.hero-deco{display:none}.splash-girl{opacity:.38}.splash-girl-left{left:-90px}.splash-girl-right{right:-90px}.splash-brand-shell{width:min(50vw,320px)}}
@media(max-width:620px){.splash-girl{display:none}.splash-brand-shell{width:min(72vw,300px)}.splash-wordmark{font-size:10px;letter-spacing:.35em;margin-right:-.35em}.splash-star{font-size:40px}}
/* ==========================================================
XINGLAN V8 — TEXT-ONLY CINEMATIC INTRO
Inspired by the user's preferred horizontal brand-banner mood.
No intro image, no side characters.
========================================================== */
.xinglan-intro{
position:fixed!important;
inset:0!important;
z-index:9999!important;
display:grid!important;
place-items:center!important;
overflow:hidden!important;
background:
radial-gradient(circle at 50% 44%,rgba(93,46,181,.40),transparent 24%),
radial-gradient(circle at 18% 20%,rgba(117,67,224,.18),transparent 28%),
radial-gradient(circle at 82% 72%,rgba(192,82,230,.14),transparent 30%),
linear-gradient(180deg,#05030c 0%,#090518 50%,#030107 100%)!important;
isolation:isolate;
animation:introV8Exit .9s cubic-bezier(.4,0,.2,1) 4.15s forwards!important;
}
.xinglan-intro.skip-now{
animation:introV8Exit .5s ease forwards!important;
}
.intro-space{
position:absolute;
inset:-10%;
z-index:-6;
background:
conic-gradient(from 210deg at 50% 50%,transparent 0 18%,rgba(145,87,255,.05) 26%,transparent 35% 63%,rgba(224,128,255,.045) 72%,transparent 81% 100%);
filter:blur(30px);
animation:introGalaxyTurn 22s linear infinite;
}
.intro-nebula{
position:absolute;
border-radius:50%;
filter:blur(85px);
mix-blend-mode:screen;
opacity:.34;
z-index:-5;
}
.intro-nebula-a{
width:46vw;height:46vw;
left:-14vw;top:-14vw;
background:radial-gradient(circle,rgba(111,61,232,.85),rgba(69,29,151,.12) 53%,transparent 72%);
animation:introNebulaBreath 5.6s ease-in-out infinite alternate;
}
.intro-nebula-b{
width:42vw;height:42vw;
right:-11vw;bottom:-15vw;
background:radial-gradient(circle,rgba(205,94,234,.65),rgba(81,33,151,.10) 55%,transparent 74%);
animation:introNebulaBreath 6.3s .5s ease-in-out infinite alternate-reverse;
}
.intro-starfield{
position:absolute;
inset:-12%;
z-index:-4;
pointer-events:none;
}
.intro-starfield-a{
opacity:.72;
background-image:
radial-gradient(circle,#fff 0 1px,transparent 1.5px),
radial-gradient(circle,#cbb8ff 0 1.1px,transparent 1.7px),
radial-gradient(circle,#e7b8ff 0 .8px,transparent 1.4px);
background-size:72px 72px,127px 127px,191px 191px;
background-position:9px 15px,34px 21px,72px 48px;
animation:introStarsDrift 18s linear infinite;
}
.intro-starfield-b{
opacity:.42;
background:
radial-gradient(circle at 12% 20%,rgba(255,255,255,.9) 0 1px,transparent 2px),
radial-gradient(circle at 72% 16%,rgba(206,178,255,.9) 0 1.5px,transparent 2.5px),
radial-gradient(circle at 84% 65%,rgba(255,208,254,.85) 0 1px,transparent 2px),
radial-gradient(circle at 30% 78%,rgba(196,169,255,.8) 0 1px,transparent 2px);
filter:drop-shadow(0 0 8px rgba(185,139,255,.7));
animation:introTwinkle 3.8s ease-in-out infinite;
}
.intro-orbit{
position:absolute;
left:50%;top:50%;
border-radius:50%;
pointer-events:none;
z-index:-2;
border:1px solid rgba(190,150,255,.12);
box-shadow:0 0 60px rgba(110,60,220,.08);
}
.intro-orbit-a{
width:min(78vw,980px);
height:min(42vw,520px);
transform:translate(-50%,-50%) rotate(-7deg);
border-top-color:rgba(234,210,255,.34);
border-left-color:rgba(156,104,255,.22);
animation:introOrbitA 11s linear infinite;
}
.intro-orbit-b{
width:min(62vw,760px);
height:min(62vw,760px);
transform:translate(-50%,-50%);
border-style:dashed;
border-color:rgba(157,110,255,.11);
animation:introOrbitB 20s linear infinite reverse;
}
.intro-comet{
position:absolute;
width:130px;
height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.95));
filter:drop-shadow(0 0 7px rgba(190,150,255,.9));
opacity:0;
transform:rotate(-24deg);
}
.intro-comet::after{
content:"";
position:absolute;
right:-2px;top:-2px;
width:5px;height:5px;border-radius:50%;
background:#fff;
box-shadow:0 0 12px #d8c2ff,0 0 24px #8c59ff;
}
.intro-comet-a{
left:12%;top:25%;
animation:introComet 3.4s .5s ease-in-out infinite;
}
.intro-comet-b{
right:11%;bottom:22%;
transform:rotate(157deg);
animation:introComet 4.2s 1.8s ease-in-out infinite;
}
.intro-content{
position:relative;
width:min(92vw,1120px);
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:54px 32px 44px;
}
.intro-content::before{
content:"";
position:absolute;
inset:13% 8%;
z-index:-1;
border-radius:50%;
background:radial-gradient(ellipse,rgba(92,49,180,.16),transparent 68%);
filter:blur(8px);
}
.intro-emblem{
display:flex;
align-items:center;
gap:14px;
opacity:0;
transform:translateY(-18px);
animation:introReveal .65s .25s ease forwards;
}
.intro-emblem-line{
width:86px;height:1px;
background:linear-gradient(90deg,transparent,rgba(215,188,255,.6));
}
.intro-emblem-line:last-child{
transform:scaleX(-1);
}
.intro-emblem-star{
position:relative;
display:grid;
place-items:center;
width:50px;height:50px;
color:#f3ebff;
font-size:34px;
text-shadow:0 0 12px rgba(240,222,255,.95),0 0 30px rgba(154,91,255,.86),0 0 55px rgba(114,64,235,.62);
animation:introStarPulse 2s ease-in-out infinite;
}
.intro-emblem-star::before,
.intro-emblem-star::after{
content:"";
position:absolute;
left:50%;top:50%;
width:94px;height:1px;
transform:translate(-50%,-50%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
}
.intro-emblem-star::after{
width:72px;
transform:translate(-50%,-50%) rotate(90deg);
}
.intro-brand-lockup{
position:relative;
margin-top:10px;
}
.intro-mini{
font-size:12px;
font-weight:800;
letter-spacing:.42em;
color:#ba9fff;
opacity:0;
transform:translateY(12px);
animation:introReveal .7s .55s ease forwards;
}
.intro-title{
position:relative;
z-index:2;
display:flex;
justify-content:center;
gap:.07em;
margin:8px 0 4px;
font-size:clamp(68px,10vw,150px);
line-height:.98;
letter-spacing:.04em;
font-weight:900;
color:#f8f4ff;
text-shadow:
0 2px 0 rgba(255,255,255,.28),
0 0 20px rgba(219,196,255,.32),
0 0 50px rgba(128,72,238,.28);
}
.intro-title span{
display:inline-block;
opacity:0;
transform:translateY(36px) scale(.92);
filter:blur(9px);
background:linear-gradient(180deg,#ffffff 0%,#ede4ff 42%,#b990ff 82%,#9165de 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-stroke:1px rgba(255,255,255,.18);
}
.intro-title span:nth-child(1){animation:introLetter .72s .72s cubic-bezier(.2,.75,.2,1) forwards}
.intro-title span:nth-child(2){animation:introLetter .72s .82s cubic-bezier(.2,.75,.2,1) forwards}
.intro-title span:nth-child(3){animation:introLetter .72s .92s cubic-bezier(.2,.75,.2,1) forwards}
.intro-title span:nth-child(4){animation:introLetter .72s 1.02s cubic-bezier(.2,.75,.2,1) forwards}
.intro-title-glow{
position:absolute;
left:50%;top:30px;
transform:translateX(-50%) scale(1.06);
z-index:0;
white-space:nowrap;
font-size:clamp(68px,10vw,150px);
font-weight:900;
letter-spacing:.04em;
color:rgba(145,82,255,.14);
filter:blur(23px);
opacity:0;
animation:introGlowIn 1.2s 1.05s ease forwards;
}
.intro-tagline{
margin-top:16px;
padding:11px 24px 12px;
border:1px solid rgba(187,145,255,.18);
border-radius:999px;
background:linear-gradient(90deg,rgba(88,48,165,.08),rgba(166,97,222,.09),rgba(88,48,165,.08));
color:#e7dcf7;
font-size:clamp(13px,1.4vw,17px);
letter-spacing:.12em;
opacity:0;
transform:translateY(15px);
animation:introReveal .7s 1.35s ease forwards;
box-shadow:inset 0 1px rgba(255,255,255,.04),0 0 30px rgba(100,55,190,.10);
}
.intro-trust{
margin-top:18px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:14px 24px;
color:#bcaed0;
font-size:12px;
letter-spacing:.08em;
opacity:0;
transform:translateY(12px);
animation:introReveal .7s 1.62s ease forwards;
}
.intro-trust span{
white-space:nowrap;
}
.intro-enter{
margin-top:28px;
display:flex;
align-items:center;
gap:13px;
color:#836ab1;
font-size:9px;
font-weight:900;
letter-spacing:.36em;
opacity:0;
animation:introReveal .65s 1.92s ease forwards;
}
.intro-enter span{
width:72px;height:1px;
background:linear-gradient(90deg,transparent,rgba(150,113,213,.45));
}
.intro-enter span:last-child{
transform:scaleX(-1);
}
.xinglan-intro .splash-skip{
position:absolute!important;
right:20px!important;
bottom:20px!important;
z-index:20!important;
border:1px solid rgba(255,255,255,.12)!important;
background:rgba(20,14,36,.6)!important;
color:#a99bbd!important;
padding:8px 14px!important;
border-radius:999px!important;
backdrop-filter:blur(12px)!important;
cursor:pointer;
transition:.2s ease;
}
.xinglan-intro .splash-skip:hover{
color:#fff!important;
border-color:rgba(188,151,255,.35)!important;
background:rgba(80,47,136,.35)!important;
}
/* Homepage hero gets a subtle banner-like brand treatment after intro */
.hero{
overflow:hidden;
}
.hero::before{
background:
radial-gradient(circle at 78% 22%,rgba(149,91,255,.17),transparent 25%),
radial-gradient(circle at 18% 42%,rgba(98,59,201,.14),transparent 31%),
linear-gradient(110deg,transparent 0 56%,rgba(164,105,255,.035) 56.2% 56.4%,transparent 56.6% 100%)!important;
}
.hero-copy::before{
content:"";
position:absolute;
left:-34px;top:-16px;
width:110px;height:110px;
border-left:1px solid rgba(177,136,255,.14);
border-top:1px solid rgba(177,136,255,.14);
border-radius:26px 0 0 0;
pointer-events:none;
}
.hero-copy{
position:relative;
}
.hero-tags span{
backdrop-filter:blur(8px);
border-color:rgba(173,132,255,.15)!important;
background:linear-gradient(180deg,rgba(87,54,144,.10),rgba(255,255,255,.02))!important;
}
.match-pick-card{
position:relative;
}
.match-pick-card::after{
content:"✦";
position:absolute;
right:24px;top:22px;
color:#d7beff;
font-size:18px;
text-shadow:0 0 12px rgba(163,102,255,.85);
}
@keyframes introGalaxyTurn{to{transform:rotate(360deg)}}
@keyframes introNebulaBreath{from{transform:scale(.92);opacity:.22}to{transform:scale(1.08);opacity:.42}}
@keyframes introStarsDrift{to{background-position:180px 100px,-115px 180px,96px -110px}}
@keyframes introTwinkle{0%,100%{opacity:.25}50%{opacity:.62}}
@keyframes introOrbitA{to{transform:translate(-50%,-50%) rotate(353deg)}}
@keyframes introOrbitB{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes introComet{0%,55%{opacity:0;transform:translate(-50px,50px) rotate(-24deg)}65%{opacity:1}86%{opacity:0;transform:translate(190px,-70px) rotate(-24deg)}100%{opacity:0}}
@keyframes introReveal{to{opacity:1;transform:none}}
@keyframes introLetter{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes introGlowIn{to{opacity:1}}
@keyframes introStarPulse{0%,100%{transform:scale(.9);opacity:.82}50%{transform:scale(1.13);opacity:1}}
@keyframes introV8Exit{
0%{opacity:1;visibility:visible}
70%{opacity:0}
100%{opacity:0;visibility:hidden;pointer-events:none}
}
@media(max-width:700px){
.intro-content{padding:34px 18px}
.intro-title{font-size:clamp(58px,18vw,90px);gap:.02em}
.intro-title-glow{font-size:clamp(58px,18vw,90px)}
.intro-tagline{letter-spacing:.04em;padding:10px 16px}
.intro-trust{gap:9px 14px;font-size:10px}
.intro-orbit-a{width:110vw;height:70vw}
.intro-orbit-b{width:92vw;height:92vw}
}
/* ===== XINGLAN V9 — HERO LAYOUT HOTFIX ===== */
.hero{
width:100%;
max-width:1240px!important;
min-height:720px!important;
grid-template-columns:minmax(0,3fr) minmax(420px,2fr)!important;
gap:52px!important;
padding-left:32px!important;
padding-right:32px!important;
overflow:hidden!important;
}
.hero-deco{display:none!important}
.hero-copy{max-width:100%!important;min-width:0!important}
.hero h1{font-size:clamp(50px,5.2vw,74px)!important;line-height:1.08!important;letter-spacing:-.045em!important;margin-top:18px!important}
.hero-line{display:block!important;white-space:nowrap!important}
.hero-sub{max-width:700px!important;font-size:17px!important}
.hero-card{width:100%!important;min-width:0!important;justify-content:flex-end!important}
.match-pick-card{
width:100%!important;
max-width:500px!important;
min-width:0!important;
padding:32px!important;
overflow:hidden!important;
}
.match-pick-card h2{font-size:32px!important;white-space:nowrap!important}
.match-pick-card .choice-grid{width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
.match-pick-card .choice-grid span{min-width:0!important;white-space:nowrap!important}
.hero::after{
content:""!important;position:absolute!important;inset:20px 18px!important;pointer-events:none!important;
border:1px solid rgba(173,132,255,.07)!important;border-radius:42px!important;
background:linear-gradient(120deg,rgba(160,100,255,.025),transparent 35%,transparent 65%,rgba(235,130,255,.018))!important;
mask:linear-gradient(#000,transparent 72%);
}
@media(max-width:1050px){
.hero{grid-template-columns:1fr!important;gap:38px!important;min-height:auto!important;padding-top:80px!important;padding-bottom:80px!important}
.hero-line{white-space:normal!important}
.hero-card{justify-content:flex-start!important}
.match-pick-card{max-width:680px!important}
}
@media(max-width:620px){
.hero{padding-left:18px!important;padding-right:18px!important}
.hero h1{font-size:40px!important}
.match-pick-card{padding:24px!important}
.match-pick-card h2{font-size:27px!important;white-space:normal!important}
.match-pick-card .choice-grid{grid-template-columns:1fr!important}
}
/* ==========================================================
XINGLAN V10 — BRAND HERO + COMPACT PRICE PRESENTATION
========================================================== */
.hero-v10{
display:block!important;
min-height:auto!important;
padding-top:68px!important;
padding-bottom:82px!important;
position:relative;
}
.hero-v10::before{
content:"";
position:absolute;
inset:18px -70px 0;
pointer-events:none;
z-index:-2;
background:
radial-gradient(circle at 72% 34%,rgba(150,89,255,.19),transparent 25%),
radial-gradient(circle at 17% 45%,rgba(92,54,195,.14),transparent 31%),
linear-gradient(118deg,transparent 0 60%,rgba(166,107,255,.05) 60.1% 60.3%,transparent 60.45% 100%);
}
.hero-v10::after{
content:"";
position:absolute;
inset:34px 0 auto;
height:1px;
background:linear-gradient(90deg,transparent,rgba(187,149,255,.22),transparent);
pointer-events:none;
}
.hero-banner{
min-height:530px;
border:1px solid rgba(181,139,255,.20);
border-radius:34px;
position:relative;
overflow:hidden;
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(350px,.92fr);
align-items:center;
gap:28px;
padding:54px 54px 44px;
background:
radial-gradient(circle at 82% 28%,rgba(150,85,255,.20),transparent 25%),
radial-gradient(circle at 64% 78%,rgba(212,106,255,.10),transparent 27%),
linear-gradient(115deg,rgba(17,10,37,.97),rgba(25,12,52,.91) 57%,rgba(11,8,28,.96));
box-shadow:
0 35px 100px rgba(0,0,0,.34),
inset 0 1px rgba(255,255,255,.05),
0 0 0 1px rgba(110,68,199,.04);
}
.hero-banner::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.7;
background-image:
radial-gradient(circle at 9% 18%,rgba(255,255,255,.9) 0 1px,transparent 1.5px),
radial-gradient(circle at 31% 11%,rgba(210,186,255,.85) 0 1px,transparent 1.5px),
radial-gradient(circle at 48% 30%,rgba(255,255,255,.72) 0 1px,transparent 1.5px),
radial-gradient(circle at 70% 14%,rgba(230,199,255,.82) 0 1px,transparent 1.6px),
radial-gradient(circle at 89% 22%,rgba(255,255,255,.78) 0 1px,transparent 1.6px);
background-size:150px 150px,215px 215px,270px 270px,190px 190px,305px 305px;
}
.hero-banner::after{
content:"";
position:absolute;
left:-8%;
bottom:-42%;
width:75%;
height:70%;
border-radius:50%;
border:1px solid rgba(177,139,255,.10);
transform:rotate(-8deg);
box-shadow:0 0 60px rgba(108,60,213,.06);
pointer-events:none;
}
.hero-brand-copy{
position:relative;
z-index:4;
max-width:690px;
}
.hero-kicker{
display:flex;
align-items:center;
gap:10px;
color:#bca5ef;
font-size:11px;
font-weight:900;
letter-spacing:.28em;
}
.hero-kicker span{
color:#e8d9ff;
text-shadow:0 0 12px rgba(179,117,255,.8);
}
.hero-brand-copy h1{
margin:15px 0 0!important;
line-height:1!important;
}
.hero-brand-name{
display:block;
white-space:nowrap;
font-size:clamp(58px,6.1vw,88px);
letter-spacing:.06em;
font-weight:900;
color:transparent!important;
background:linear-gradient(180deg,#fff 0%,#f3ecff 34%,#cdb3ff 72%,#aa7fea 100%)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
text-shadow:none!important;
filter:drop-shadow(0 0 22px rgba(136,77,231,.18));
}
.hero-brand-slogan{
display:block;
margin-top:22px;
max-width:660px;
font-size:clamp(26px,3vw,42px);
line-height:1.2;
letter-spacing:-.025em;
font-weight:900;
color:transparent!important;
background:linear-gradient(90deg,#ffffff,#c9adff 44%,#f4a3d9 100%)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
}
.hero-trustline{
display:flex;
flex-wrap:wrap;
gap:10px 18px;
margin-top:24px;
padding:12px 16px;
width:max-content;
max-width:100%;
border:1px solid rgba(181,139,255,.15);
border-radius:999px;
background:rgba(255,255,255,.025);
backdrop-filter:blur(10px);
color:#c8bdd8;
font-size:11px;
letter-spacing:.04em;
}
.hero-trustline span{
white-space:nowrap;
}
.hero-v10 .hero-sub{
max-width:650px;
margin-top:22px;
font-size:15px!important;
line-height:1.9!important;
color:#aaa5b9!important;
}
.hero-v10 .hero-actions{
margin-top:26px!important;
}
.hero-order-btn{
min-width:126px;
box-shadow:0 13px 36px rgba(179,105,239,.30)!important;
}
.hero-v10 .hero-tags{
margin-top:21px!important;
}
.hero-visual{
position:relative;
align-self:stretch;
min-height:440px;
display:flex;
align-items:flex-end;
justify-content:center;
z-index:3;
}
.hero-visual-glow{
position:absolute;
width:330px;
height:330px;
left:50%;
top:48%;
transform:translate(-50%,-50%);
border-radius:50%;
background:
radial-gradient(circle,rgba(175,110,255,.26) 0%,rgba(114,59,217,.12) 38%,transparent 69%);
filter:blur(4px);
}
.hero-visual-orbit{
position:absolute;
left:50%;
top:52%;
border-radius:50%;
border:1px solid rgba(204,169,255,.19);
pointer-events:none;
}
.orbit-a{
width:410px;
height:285px;
transform:translate(-50%,-50%) rotate(-16deg);
border-top-color:rgba(236,215,255,.45);
border-right-color:rgba(154,102,255,.12);
}
.orbit-b{
width:305px;
height:305px;
transform:translate(-50%,-50%) rotate(18deg);
border-style:dashed;
border-color:rgba(173,127,255,.17);
}
.hero-girl{
position:relative;
z-index:4;
width:auto;
height:min(410px,92%);
max-width:100%;
object-fit:contain;
filter:
drop-shadow(0 20px 38px rgba(0,0,0,.35))
drop-shadow(0 0 18px rgba(157,97,255,.15));
}
.hero-visual-floor{
position:absolute;
z-index:1;
left:14%;
right:14%;
bottom:20px;
height:74px;
border-radius:50%;
background:radial-gradient(ellipse,rgba(152,91,255,.20),transparent 68%);
filter:blur(9px);
}
.hero-star,.hero-heart{
position:absolute;
z-index:5;
color:#efe6ff;
text-shadow:0 0 14px rgba(189,139,255,.95),0 0 28px rgba(129,76,228,.6);
}
.hero-star-a{
left:12%;
top:23%;
font-size:28px;
}
.hero-star-b{
right:7%;
top:15%;
font-size:17px;
}
.hero-heart{
right:9%;
top:31%;
width:48px;
height:48px;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid rgba(218,183,255,.25);
background:rgba(70,36,127,.28);
backdrop-filter:blur(9px);
font-size:25px;
}
/* Wider XINGLAN PICK panel under brand hero */
.hero-pick-wide{
position:relative;
z-index:7;
margin:18px auto 0;
width:min(100%,1010px);
padding:23px 26px 25px;
border:1px solid rgba(179,139,255,.19);
border-radius:24px;
background:
linear-gradient(110deg,rgba(42,24,78,.90),rgba(15,11,29,.94)),
rgba(255,255,255,.02);
box-shadow:0 22px 60px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.04);
backdrop-filter:blur(14px);
}
.pick-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:22px;
margin-bottom:17px;
}
.hero-pick-wide .tiny{
margin:10px 0 3px!important;
}
.hero-pick-wide h2{
margin:0!important;
font-size:27px!important;
line-height:1.15;
}
.hero-pick-wide .mini-cta{
margin:0!important;
white-space:nowrap;
color:#e7ddf4!important;
}
.choice-grid-wide{
grid-template-columns:repeat(3,1fr)!important;
gap:10px!important;
}
.choice-grid-wide span{
display:flex;
align-items:center;
justify-content:flex-start;
min-height:52px;
padding:13px 15px!important;
border-radius:14px!important;
background:rgba(255,255,255,.035)!important;
border:1px solid rgba(183,147,255,.12)!important;
}
.choice-grid-wide span:hover{
background:rgba(118,76,193,.11)!important;
border-color:rgba(198,164,255,.25)!important;
}
/* Price section: reduce poster dominance and give it breathing room */
.price-section-v10 .price-tabs{
width:min(100%,760px);
margin:0 auto 18px!important;
}
.price-section-v10 .price-image-wrap{
width:min(100%,760px)!important;
margin:0 auto!important;
padding:14px!important;
border-radius:26px!important;
background:
radial-gradient(circle at 50% 8%,rgba(122,77,217,.09),transparent 35%),
rgba(255,255,255,.018)!important;
}
.price-section-v10 .price-image img{
width:min(100%,660px)!important;
max-height:none!important;
object-fit:contain!important;
margin:0 auto!important;
border-radius:16px!important;
box-shadow:0 18px 55px rgba(0,0,0,.32);
}
.price-section-v10 .offer-banner{
width:min(100%,900px);
margin:22px auto 0!important;
}
.price-section-v10 .section-head{
margin-left:auto;
margin-right:auto;
text-align:center;
}
.price-section-v10 .section-head p{
margin-left:auto;
margin-right:auto;
}
@media(max-width:980px){
.hero-banner{
grid-template-columns:1fr!important;
min-height:auto;
padding:42px 36px 24px;
}
.hero-visual{
min-height:330px;
}
.hero-girl{
height:320px;
}
.hero-brand-name{
font-size:clamp(52px,10vw,76px);
}
.hero-brand-slogan{
font-size:clamp(28px,5vw,38px);
}
.choice-grid-wide{
grid-template-columns:repeat(2,1fr)!important;
}
}
@media(max-width:620px){
.hero-v10{
padding-top:42px!important;
}
.hero-banner{
padding:31px 20px 18px;
border-radius:25px;
}
.hero-brand-name{
font-size:48px;
letter-spacing:.03em;
}
.hero-brand-slogan{
margin-top:16px;
font-size:29px;
}
.hero-trustline{
border-radius:18px;
gap:8px 14px;
}
.hero-visual{
min-height:285px;
}
.hero-girl{
height:275px;
}
.hero-visual-orbit.orbit-a{
width:330px;height:220px;
}
.hero-visual-orbit.orbit-b{
width:245px;height:245px;
}
.hero-pick-wide{
padding:20px 16px;
border-radius:20px;
}
.pick-heading{
align-items:flex-start;
flex-direction:column;
gap:12px;
}
.choice-grid-wide{
grid-template-columns:1fr 1fr!important;
}
.price-section-v10 .price-image-wrap{
width:100%!important;
padding:7px!important;
}
.price-section-v10 .price-image img{
width:100%!important;
}
}
/* ==========================================================
XINGLAN V11 — 橫幅式星瀾主視覺
重點：人物不再是矩形照片卡，而是融入星空背景。
========================================================== */
.hero-v11{
display:block!important;
min-height:auto!important;
padding-top:56px!important;
padding-bottom:80px!important;
}
.xinglan-hero{
position:relative;
width:100%;
aspect-ratio:2.58 / 1;
min-height:420px;
max-height:515px;
overflow:hidden;
border-radius:30px;
border:1px solid rgba(185,147,255,.23);
background:
radial-gradient(circle at 78% 26%,rgba(132,77,236,.26),transparent 27%),
radial-gradient(circle at 19% 42%,rgba(95,55,194,.22),transparent 30%),
linear-gradient(108deg,#080416 0%,#100727 46%,#130832 70%,#080416 100%);
box-shadow:
0 35px 100px rgba(0,0,0,.38),
inset 0 1px rgba(255,255,255,.055),
0 0 55px rgba(107,64,205,.08);
isolation:isolate;
}
.xinglan-hero::before{
content:"";
position:absolute;
inset:0;
z-index:-3;
opacity:.85;
background-image:
radial-gradient(circle at 8% 19%,rgba(255,255,255,.95) 0 1px,transparent 1.7px),
radial-gradient(circle at 23% 11%,rgba(206,184,255,.88) 0 1px,transparent 1.6px),
radial-gradient(circle at 43% 26%,rgba(255,255,255,.74) 0 1px,transparent 1.6px),
radial-gradient(circle at 66% 12%,rgba(225,199,255,.88) 0 1px,transparent 1.8px),
radial-gradient(circle at 91% 23%,rgba(255,255,255,.82) 0 1px,transparent 1.8px);
background-size:142px 142px,218px 218px,286px 286px,192px 192px,318px 318px;
}
.xinglan-hero::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:32%;
z-index:8;
pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(5,3,14,.24) 55%,rgba(5,3,14,.68));
}
.xinglan-hero-nebula{
position:absolute;
border-radius:50%;
filter:blur(58px);
pointer-events:none;
z-index:-2;
}
.nebula-left{
width:370px;height:370px;
left:-120px;top:-90px;
background:radial-gradient(circle,rgba(105,61,220,.34),rgba(74,32,164,.08) 56%,transparent 72%);
}
.nebula-right{
width:440px;height:440px;
right:-105px;bottom:-195px;
background:radial-gradient(circle,rgba(207,100,234,.25),rgba(91,40,179,.06) 58%,transparent 73%);
}
.xinglan-hero-grid{
position:absolute;
inset:0;
opacity:.10;
z-index:-1;
background:
linear-gradient(90deg,transparent 0 49.92%,rgba(191,151,255,.26) 50%,transparent 50.08%),
linear-gradient(0deg,transparent 0 49.92%,rgba(191,151,255,.20) 50%,transparent 50.08%);
background-size:115px 115px;
mask-image:linear-gradient(90deg,rgba(0,0,0,.75),transparent 64%);
}
.xinglan-hero-orbit{
position:absolute;
border-radius:50%;
border:1px solid rgba(193,157,255,.13);
pointer-events:none;
z-index:1;
}
.orbit-main{
width:560px;height:290px;
right:-54px;top:45%;
transform:translateY(-50%) rotate(-12deg);
border-top-color:rgba(228,207,255,.34);
box-shadow:0 0 50px rgba(126,78,232,.07);
}
.orbit-small{
width:320px;height:320px;
right:85px;top:48%;
transform:translateY(-50%);
border-style:dashed;
border-color:rgba(183,142,255,.13);
}
.xinglan-hero-copy{
position:absolute;
z-index:10;
left:5.8%;
top:50%;
width:55%;
max-width:680px;
transform:translateY(-52%);
}
.hero-v11-topline{
color:#d0b8ff;
font-size:11px;
font-weight:800;
letter-spacing:.18em;
text-shadow:0 0 14px rgba(132,79,225,.35);
}
.hero-v11-brand{
display:flex;
align-items:center;
gap:13px;
margin-top:9px;
}
.hero-v11-star{
color:#eee5ff;
font-size:28px;
text-shadow:
0 0 10px rgba(242,224,255,.9),
0 0 24px rgba(151,89,255,.75);
}
.hero-v11-brand h1{
margin:0!important;
white-space:nowrap;
font-size:clamp(58px,6.5vw,96px)!important;
line-height:1!important;
letter-spacing:.055em!important;
font-weight:900!important;
color:transparent!important;
background:linear-gradient(180deg,#fff 0%,#f6efff 34%,#d0b7ff 69%,#aa7ceb 100%)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
filter:drop-shadow(0 7px 20px rgba(112,65,215,.22));
}
.hero-v11-slogan{
margin:17px 0 0;
width:max-content;
max-width:100%;
padding:10px 17px 11px;
border:1px solid rgba(191,153,255,.19);
border-radius:999px;
background:
linear-gradient(90deg,rgba(82,46,157,.13),rgba(169,92,218,.10),rgba(82,46,157,.13));
backdrop-filter:blur(10px);
color:#f2eafe;
font-size:clamp(15px,1.65vw,21px);
line-height:1.25;
letter-spacing:.045em;
box-shadow:
inset 0 1px rgba(255,255,255,.045),
0 0 28px rgba(108,59,204,.08);
}
.hero-v11-features{
display:flex;
flex-wrap:wrap;
gap:10px 18px;
margin-top:16px;
color:#bdb2c9;
font-size:11px;
letter-spacing:.035em;
}
.hero-v11-features span{
white-space:nowrap;
}
.hero-v11-actions{
display:flex;
align-items:center;
gap:22px;
margin-top:21px;
}
.hero-v11-order{
min-width:132px;
box-shadow:
0 13px 36px rgba(183,105,239,.31),
0 0 22px rgba(142,80,229,.10)!important;
}
.hero-v11-textlink{
color:#dfd5ec;
font-weight:800;
font-size:13px;
text-decoration:none;
}
.hero-v11-textlink:hover{
color:#fff;
}
/* 右側角色：重點是不顯示矩形圖片邊界 */
.xinglan-hero-art{
position:absolute;
z-index:5;
right:0;
top:0;
width:44%;
height:100%;
overflow:visible;
pointer-events:none;
}
.art-halo{
position:absolute;
left:50%;
top:48%;
width:390px;
height:390px;
transform:translate(-50%,-50%);
border-radius:50%;
background:
radial-gradient(circle,rgba(183,116,255,.24),rgba(105,56,207,.09) 45%,transparent 69%);
filter:blur(5px);
}
.hero-character{
position:absolute;
right:-1.5%;
bottom:-4%;
z-index:5;
width:auto;
height:111%;
max-width:none;
object-fit:contain;
object-position:center bottom;
/* 將原本直式圖片的邊界羽化掉，人物自然融入星空 */
-webkit-mask-image:
linear-gradient(to right,transparent 0%,rgba(0,0,0,.46) 9%,#000 22%,#000 84%,rgba(0,0,0,.62) 94%,transparent 100%),
linear-gradient(to bottom,transparent 0%,#000 8%,#000 89%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(to right,transparent 0%,rgba(0,0,0,.46) 9%,#000 22%,#000 84%,rgba(0,0,0,.62) 94%,transparent 100%);
filter:
saturate(.94)
contrast(1.03)
drop-shadow(-18px 19px 30px rgba(0,0,0,.30))
drop-shadow(0 0 20px rgba(139,79,235,.15));
opacity:.98;
}
/* 額外柔光遮住原圖左側邊緣，使其更像 banner 內建插畫 */
.xinglan-hero-art::before{
content:"";
position:absolute;
left:-10%;
top:0;
bottom:0;
width:48%;
z-index:7;
background:linear-gradient(90deg,#100727 0%,rgba(16,7,39,.78) 31%,rgba(16,7,39,.22) 70%,transparent);
}
.xinglan-hero-art::after{
content:"";
position:absolute;
inset:auto 0 0;
height:19%;
z-index:8;
background:linear-gradient(180deg,transparent,rgba(9,4,22,.74));
}
.art-ring{
position:absolute;
z-index:3;
right:3%;
bottom:-48px;
width:440px;
height:130px;
border:2px solid rgba(161,105,255,.24);
border-radius:50%;
transform:rotate(-10deg);
box-shadow:
0 0 17px rgba(158,93,255,.25),
inset 0 0 18px rgba(177,118,255,.12);
}
.art-heart{
position:absolute;
z-index:10;
right:7%;
top:18%;
display:grid;
place-items:center;
width:50px;height:50px;
border-radius:50%;
border:1px solid rgba(220,188,255,.28);
background:rgba(81,42,142,.27);
backdrop-filter:blur(8px);
color:#f6ecff;
font-size:27px;
text-shadow:0 0 12px rgba(187,124,255,.80);
}
.art-star{
position:absolute;
z-index:10;
color:#f4ecff;
text-shadow:0 0 13px rgba(209,177,255,.95),0 0 28px rgba(142,79,238,.65);
}
.star-one{
left:5%;
top:20%;
font-size:25px;
}
.star-two{
right:24%;
top:9%;
font-size:16px;
}
.hero-v11-bottomline{
position:absolute;
z-index:11;
left:6%;
bottom:24px;
display:flex;
align-items:center;
gap:12px;
color:#786a91;
font-size:8px;
font-weight:900;
letter-spacing:.38em;
}
.hero-v11-bottomline span{
display:block;
width:60px;height:1px;
background:linear-gradient(90deg,rgba(125,92,182,.7),transparent);
}
.hero-v11-bottomline span:last-child{
transform:scaleX(-1);
}
/* 配單卡跟橫幅銜接更緊，形成完整首頁主視覺 */
.hero-v11 .hero-pick-wide{
margin-top:16px;
width:min(100%,1000px);
}
/* 防止舊 v10 Hero 元素影響新版 */
.hero-v11 .hero-banner,
.hero-v11 .hero-brand-copy,
.hero-v11 .hero-visual{
display:none!important;
}
@media(max-width:980px){
.xinglan-hero{
aspect-ratio:auto;
min-height:640px;
}
.xinglan-hero-copy{
left:7%;
top:10%;
width:86%;
max-width:720px;
transform:none;
}
.hero-v11-brand h1{
font-size:70px!important;
}
.xinglan-hero-art{
width:70%;
height:62%;
top:auto;
bottom:0;
right:-7%;
}
.hero-character{
height:107%;
right:0;
}
.xinglan-hero-art::before{
left:-8%;
width:42%;
}
.orbit-main{
right:-170px;
top:68%;
}
.orbit-small{
right:-40px;
top:68%;
}
.hero-v11-bottomline{
display:none;
}
}
@media(max-width:620px){
.xinglan-hero{
min-height:610px;
border-radius:25px;
}
.xinglan-hero-copy{
left:20px;
right:20px;
top:34px;
width:auto;
}
.hero-v11-topline{
font-size:9px;
}
.hero-v11-brand{
gap:8px;
}
.hero-v11-star{
font-size:20px;
}
.hero-v11-brand h1{
font-size:48px!important;
}
.hero-v11-slogan{
width:auto;
font-size:14px;
line-height:1.45;
border-radius:18px;
}
.hero-v11-features{
gap:7px 12px;
font-size:10px;
}
.hero-v11-actions{
margin-top:16px;
}
.xinglan-hero-art{
width:92%;
height:56%;
right:-20%;
}
.hero-character{
height:105%;
}
.art-heart{
right:17%;
top:18%;
}
.hero-v11 .choice-grid-wide{
grid-template-columns:1fr 1fr!important;
}
}
/* ==========================================================
XINGLAN V13 — compact banner hero based on user's reference
========================================================== */
.hero-v13{
display:block!important;
min-height:auto!important;
padding-top:42px!important;
padding-bottom:76px!important;
}
.hero-ref-banner{
position:relative;
width:100%;
min-height:395px;
overflow:hidden;
border-radius:28px;
border:1px solid rgba(187,147,255,.19);
background:
radial-gradient(circle at 75% 26%, rgba(136,79,242,.24), transparent 25%),
radial-gradient(circle at 18% 50%, rgba(90,50,191,.22), transparent 33%),
linear-gradient(108deg, #080416 0%, #100625 52%, #12072d 73%, #070311 100%);
box-shadow:
0 30px 90px rgba(0,0,0,.36),
inset 0 1px rgba(255,255,255,.05);
isolation:isolate;
}
.hero-ref-banner::before{
content:"";
position:absolute;
inset:0;
z-index:-4;
opacity:.78;
background-image:
radial-gradient(circle at 8% 18%,rgba(255,255,255,.96) 0 1px,transparent 1.7px),
radial-gradient(circle at 23% 11%,rgba(214,190,255,.90) 0 1px,transparent 1.6px),
radial-gradient(circle at 44% 28%,rgba(255,255,255,.72) 0 1px,transparent 1.6px),
radial-gradient(circle at 69% 13%,rgba(229,203,255,.88) 0 1px,transparent 1.8px),
radial-gradient(circle at 92% 23%,rgba(255,255,255,.84) 0 1px,transparent 1.8px);
background-size:138px 138px,205px 205px,270px 270px,188px 188px,306px 306px;
}
.hero-ref-stars{
position:absolute;
inset:0;
z-index:-3;
background:
radial-gradient(circle at 15% 72%,rgba(189,132,255,.08),transparent 22%),
radial-gradient(circle at 84% 72%,rgba(232,112,230,.08),transparent 24%);
}
.hero-ref-nebula{
position:absolute;
left:-10%;
top:-28%;
width:58%;
height:150%;
z-index:-2;
border-radius:50%;
background:
radial-gradient(circle at 45% 45%, rgba(131,74,243,.28), rgba(78,34,164,.08) 46%, transparent 70%);
filter:blur(24px);
transform:rotate(-12deg);
}
.hero-ref-orbit{
position:absolute;
left:4%;
top:18%;
width:55%;
height:72%;
z-index:-1;
border:1px solid rgba(202,170,255,.13);
border-radius:50%;
transform:rotate(-11deg);
box-shadow:0 0 50px rgba(122,67,229,.06);
}
.hero-ref-copy{
position:absolute;
left:6%;
top:50%;
transform:translateY(-52%);
z-index:6;
width:53%;
max-width:650px;
}
.hero-ref-topline{
margin-bottom:11px;
color:#cbb6f2;
font-size:11px;
font-weight:800;
letter-spacing:.14em;
}
.hero-ref-copy h1{
margin:0!important;
white-space:nowrap;
font-size:clamp(58px,6.3vw,92px)!important;
line-height:1!important;
letter-spacing:.055em!important;
font-weight:900!important;
color:transparent!important;
background:linear-gradient(180deg,#fff 0%,#f6efff 35%,#d2b9ff 70%,#aa7bea 100%)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
filter:drop-shadow(0 7px 20px rgba(113,63,215,.19));
}
.hero-ref-slogan{
margin:14px 0 0;
width:max-content;
max-width:100%;
padding:8px 14px 9px;
border:1px solid rgba(194,156,255,.18);
border-radius:999px;
background:linear-gradient(90deg,rgba(82,44,158,.14),rgba(173,93,221,.08),rgba(82,44,158,.14));
color:#f1e9fb;
font-size:clamp(14px,1.55vw,19px);
line-height:1.2;
letter-spacing:.035em;
backdrop-filter:blur(9px);
}
.hero-ref-points{
display:flex;
flex-wrap:wrap;
gap:9px 16px;
margin-top:14px;
color:#bdb2c8;
font-size:10.5px;
letter-spacing:.02em;
}
.hero-ref-points span{white-space:nowrap}
.hero-ref-actions{
display:flex;
gap:12px;
margin-top:18px;
}
.hero-ref-actions .btn{
min-width:126px;
padding-top:12px!important;
padding-bottom:12px!important;
}
.hero-ref-actions .primary{
box-shadow:0 12px 34px rgba(181,104,239,.28)!important;
}
.hero-ref-art{
position:absolute;
right:0;
top:0;
width:45%;
height:100%;
z-index:4;
overflow:hidden;
pointer-events:none;
}
.hero-ref-glow{
position:absolute;
left:50%;
top:50%;
width:380px;height:380px;
transform:translate(-50%,-50%);
border-radius:50%;
background:radial-gradient(circle,rgba(180,112,255,.25),rgba(108,58,213,.08) 46%,transparent 70%);
}
.hero-ref-character{
position:absolute;
right:1.5%;
bottom:-7%;
z-index:5;
height:114%;
width:auto;
max-width:none;
object-fit:contain;
object-position:center bottom;
/* softer edge transition than before, to avoid the "cut rectangle" look */
-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.72) 11%,#000 23%,#000 100%);
mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.72) 11%,#000 23%,#000 100%);
filter:
drop-shadow(-16px 18px 28px rgba(0,0,0,.30))
drop-shadow(0 0 18px rgba(139,79,236,.14));
}
.hero-ref-art::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:28%;
z-index:7;
background:linear-gradient(90deg,#100625 0%,rgba(16,6,37,.72) 40%,transparent);
}
.hero-ref-ring{
position:absolute;
z-index:3;
right:1%;
bottom:-42px;
width:430px;
height:118px;
border:2px solid rgba(166,109,255,.22);
border-radius:50%;
transform:rotate(-9deg);
box-shadow:0 0 17px rgba(155,91,255,.23), inset 0 0 15px rgba(177,118,255,.10);
}
.hero-ref-heart{
position:absolute;
right:6%;
top:17%;
z-index:10;
display:grid;
place-items:center;
width:46px;height:46px;
border-radius:50%;
border:1px solid rgba(220,188,255,.26);
background:rgba(79,42,137,.25);
color:#f4eaff;
font-size:25px;
text-shadow:0 0 12px rgba(187,124,255,.8);
}
.hero-ref-star{
position:absolute;
z-index:10;
color:#f4ecff;
text-shadow:0 0 13px rgba(209,177,255,.95),0 0 28px rgba(142,79,238,.65);
}
.hero-ref-star.s1{left:6%;top:21%;font-size:23px}
.hero-ref-star.s2{right:22%;top:9%;font-size:15px}
.hero-v13 .hero-pick-wide{
width:min(100%,1000px);
margin-top:16px;
}
@media(max-width:980px){
.hero-ref-banner{
min-height:575px;
}
.hero-ref-copy{
left:7%;
top:10%;
transform:none;
width:86%;
}
.hero-ref-art{
width:72%;
height:58%;
top:auto;
bottom:0;
right:-9%;
}
.hero-ref-character{
height:108%;
right:0;
}
}
@media(max-width:620px){
.hero-ref-banner{
min-height:560px;
border-radius:24px;
}
.hero-ref-copy{
left:20px;
right:20px;
top:32px;
width:auto;
}
.hero-ref-copy h1{
font-size:48px!important;
}
.hero-ref-slogan{
width:auto;
border-radius:18px;
font-size:14px;
}
.hero-ref-points{
gap:7px 11px;
font-size:10px;
}
.hero-ref-art{
width:92%;
height:52%;
right:-23%;
}
.hero-ref-character{
height:104%;
}
}
/* ==========================================================
XINGLAN V14 — unified navigation + cinematic hero
Latest reference: wide, shallow, one continuous composition.
========================================================== */
.hero-v14{
width:min(1460px,calc(100% - 30px));
margin:18px auto 0;
padding:0 0 78px!important;
display:block!important;
min-height:auto!important;
}
.hero-v14-shell{
position:relative;
min-height:590px;
overflow:hidden;
border:1px solid rgba(167,118,255,.22);
border-radius:26px;
background:#070312;
box-shadow:0 34px 110px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.05);
isolation:isolate;
}
.hero-v14-space{
position:absolute;inset:0;z-index:-6;
background:
radial-gradient(circle at 12% 36%,rgba(106,49,220,.26),transparent 28%),
radial-gradient(circle at 77% 24%,rgba(156,75,240,.20),transparent 24%),
linear-gradient(105deg,#07020f 0%,#100426 48%,#10052a 72%,#05020d 100%);
}
.hero-v14-space::before{
content:"";position:absolute;inset:0;opacity:.82;
background-image:
radial-gradient(circle,#fff 0 1px,transparent 1.55px),
radial-gradient(circle,#d7bfff 0 1px,transparent 1.55px),
radial-gradient(circle,#fff 0 .8px,transparent 1.35px);
background-size:121px 121px,189px 189px,257px 257px;
background-position:12px 23px,71px 44px,31px 91px;
}
.hero-v14-nebula{position:absolute;z-index:-5;border-radius:50%;filter:blur(24px);pointer-events:none}
.hero-v14 .n1{left:-12%;top:4%;width:63%;height:74%;background:radial-gradient(ellipse,rgba(122,61,235,.30),rgba(86,34,174,.10) 45%,transparent 72%);transform:rotate(-16deg)}
.hero-v14 .n2{right:-7%;top:4%;width:49%;height:86%;background:radial-gradient(ellipse,rgba(162,79,237,.20),rgba(84,37,168,.08) 48%,transparent 72%)}
.hero-v14-orbit{position:absolute;z-index:-3;border:1px solid rgba(209,180,255,.13);border-radius:50%;pointer-events:none}
.hero-v14 .o1{left:-6%;top:10%;width:62%;height:72%;transform:rotate(-9deg)}
.hero-v14 .o2{right:-8%;top:9%;width:45%;height:73%;transform:rotate(13deg)}
.hero-v14-nav{
position:relative;z-index:30;height:78px;padding:0 30px;
display:flex;align-items:center;gap:28px;
border-bottom:1px solid rgba(190,151,255,.18);
background:linear-gradient(180deg,rgba(5,2,13,.82),rgba(8,3,20,.42));
backdrop-filter:blur(13px);
}
.hero-v14-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;flex:0 0 auto}
.brand-orb{
position:relative;width:66px;height:66px;border-radius:50%;
display:grid;place-items:center;text-align:center;
border:1px solid rgba(207,178,255,.48);
background:
radial-gradient(circle at 50% 38%,rgba(123,70,224,.30),transparent 42%),
linear-gradient(145deg,rgba(38,16,77,.94),rgba(10,5,27,.96));
box-shadow:0 0 0 4px rgba(143,89,235,.06),0 0 24px rgba(145,88,239,.23),inset 0 0 22px rgba(161,106,244,.10);
}
.brand-orb::before,.brand-orb::after{
content:"";position:absolute;border-radius:50%;inset:6px;border:1px solid rgba(202,174,255,.16)
}
.brand-orb::after{inset:11px;border-style:dashed}
.brand-orb strong{font-size:17px;line-height:1.08;letter-spacing:.08em;text-shadow:0 0 10px rgba(203,170,255,.48)}
.brand-star{position:absolute;top:3px;font-size:10px;color:#e8d8ff}
.brand-en{font-size:10px;line-height:1.35;letter-spacing:.15em;color:#c7b9d8;font-weight:800}
.hero-v14-links{margin-left:auto;display:flex;align-items:center;gap:28px;height:100%}
.hero-v14-links a{
position:relative;color:#ddd2e9;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap;
transition:.2s ease;
}
.hero-v14-links a:hover,.hero-v14-links a.active{color:#fff}
.hero-v14-links a.active::after{
content:"";position:absolute;left:0;right:0;bottom:-28px;height:2px;
background:linear-gradient(90deg,transparent,#c78aff,transparent);
box-shadow:0 0 12px #9e5bea;
}
.hero-v14-order{
flex:0 0 auto;text-decoration:none;color:#fff;font-size:12px;font-weight:800;
padding:11px 18px;border-radius:999px;border:1px solid rgba(211,172,255,.35);
background:linear-gradient(100deg,#6f35ca,#9c43df);
box-shadow:0 0 20px rgba(151,72,225,.32);
}
.hero-v14-order span{padding-left:5px}
.hero-v14-main{position:relative;min-height:510px}
.hero-v14-copy{
position:absolute;z-index:12;left:8.2%;top:47%;transform:translateY(-50%);
width:51%;max-width:660px;text-align:center;
}
.hero-v14-kicker{
display:inline-block;color:#d7c9e5;font-size:16px;font-weight:700;letter-spacing:.055em;
margin-bottom:10px;
}
.hero-v14-copy h1{
margin:0!important;font-size:clamp(72px,7vw,112px)!important;line-height:.98!important;
letter-spacing:.075em!important;font-weight:900!important;color:transparent!important;
background:linear-gradient(180deg,#fff 0%,#fff7ff 26%,#e8d5ff 58%,#ba8cec 100%)!important;
-webkit-background-clip:text!important;background-clip:text!important;
filter:drop-shadow(0 0 9px rgba(225,196,255,.42)) drop-shadow(0 9px 20px rgba(101,47,190,.28));
}
.hero-v14-tagline{
margin:13px auto 0;color:#d8c8e2;font-size:17px;letter-spacing:.045em;
}
.hero-v14-traits{
width:max-content;max-width:100%;margin:18px auto 0;padding:8px 17px;
display:flex;justify-content:center;gap:22px;border-radius:999px;
border:1px solid rgba(195,157,255,.20);
background:rgba(16,6,38,.48);backdrop-filter:blur(10px);
color:#cfc1dc;font-size:11px;
}
.hero-v14-traits span{white-space:nowrap}
.hero-v14-mainbtn{
margin:20px auto 0;width:154px;height:45px;display:flex;align-items:center;justify-content:center;gap:12px;
border-radius:11px;text-decoration:none;color:#fff;font-weight:800;font-size:15px;letter-spacing:.08em;
border:1px solid rgba(222,190,255,.60);
background:linear-gradient(180deg,rgba(91,42,168,.68),rgba(45,18,94,.75));
box-shadow:0 0 10px rgba(181,119,255,.48),0 0 30px rgba(117,57,216,.26),inset 0 0 14px rgba(221,188,255,.08);
transition:.25s ease;
}
.hero-v14-mainbtn:hover{transform:translateY(-2px);box-shadow:0 0 14px rgba(202,151,255,.62),0 0 42px rgba(124,61,222,.35)}
.hero-v14-mainbtn b{font-size:11px;color:#f1dcff}
.hero-v14-character-wrap{
position:absolute;right:0;top:0;bottom:0;width:48%;overflow:hidden;z-index:7;pointer-events:none;
}
.hero-v14-character-wrap::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:27%;z-index:9;
background:linear-gradient(90deg,#100426 0%,rgba(16,4,38,.72) 35%,transparent 100%);
}
.hero-v14-char-glow{
position:absolute;right:8%;top:6%;width:75%;height:88%;border-radius:50%;z-index:1;
background:radial-gradient(circle,rgba(170,100,255,.28),rgba(107,55,211,.10) 46%,transparent 72%);
filter:blur(10px);
}
.hero-v14-character{
position:absolute;z-index:5;right:-1%;bottom:-12%;height:119%;width:auto;max-width:none;
object-fit:contain;object-position:center bottom;
-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.52) 8%,#000 20%,#000 100%);
mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.52) 8%,#000 20%,#000 100%);
filter:drop-shadow(-18px 15px 28px rgba(0,0,0,.28)) drop-shadow(0 0 15px rgba(150,88,241,.18));
}
.hero-v14-heart{
position:absolute;z-index:12;left:20%;top:16%;width:50px;height:50px;border-radius:50%;
display:grid;place-items:center;border:1px solid rgba(221,190,255,.36);
background:rgba(75,36,132,.34);color:#fff;font-size:28px;
box-shadow:0 0 22px rgba(173,103,245,.25);
}
.hero-v14-spark{position:absolute;z-index:12;color:#fff;text-shadow:0 0 10px #d6adff,0 0 24px #9856e5}
.hero-v14 .sp1{right:7%;top:18%;font-size:24px}.hero-v14 .sp2{left:14%;top:9%;font-size:15px}.hero-v14 .sp3{right:18%;bottom:20%;font-size:13px}
.hero-v14-planet{
position:absolute;z-index:3;right:-25px;bottom:12px;width:128px;height:128px;border-radius:50%;
background:radial-gradient(circle at 35% 30%,#c992ff 0%,#7440c9 30%,#32136c 68%,#130627 100%);
box-shadow:0 0 28px rgba(142,77,231,.38);
}
.hero-v14-bottom-orbit{
position:absolute;z-index:4;right:-75px;bottom:20px;width:285px;height:75px;border:2px solid rgba(197,151,255,.44);
border-radius:50%;transform:rotate(-13deg);box-shadow:0 0 12px rgba(156,91,238,.35);
}
.hero-v14 .hero-pick-wide{width:min(100%,1000px);margin-top:18px}
@media(max-width:1150px){
.hero-v14-links{gap:16px}.hero-v14-links a{font-size:11px}
.hero-v14-copy{left:5%;width:54%}
}
@media(max-width:900px){
.hero-v14-nav{padding:0 16px}.hero-v14-links{display:none}
.hero-v14-shell{min-height:720px}
.hero-v14-main{min-height:642px}
.hero-v14-copy{left:5%;right:5%;top:10%;transform:none;width:90%}
.hero-v14-character-wrap{width:75%;height:52%;top:auto;bottom:0;right:-10%}
.hero-v14-character{height:112%}
}
@media(max-width:600px){
.hero-v14{width:calc(100% - 16px);margin-top:8px}
.hero-v14-shell{border-radius:20px;min-height:690px}
.hero-v14-nav{height:66px}
.brand-orb{width:52px;height:52px}.brand-orb strong{font-size:14px}.brand-en{display:none}
.hero-v14-order{padding:9px 13px}
.hero-v14-main{min-height:624px}
.hero-v14-copy{top:8%}
.hero-v14-kicker{font-size:12px}
.hero-v14-copy h1{font-size:56px!important}
.hero-v14-tagline{font-size:14px}
.hero-v14-traits{gap:10px;padding:7px 10px;font-size:9px}
.hero-v14-character-wrap{width:100%;right:-24%;height:48%}
}
/* ==========================================================
XINGLAN V15 — 依使用者最後參考圖重做
同一人物、同一構圖方向，不再換角色、不再亂改版面
========================================================== */
body > .nav-wrap{display:none!important;}
.hero-v15{
width:min(1460px,calc(100% - 28px));
margin:18px auto 0;
padding:0 0 76px!important;
display:block!important;
min-height:auto!important;
}
.hero-v15-shell{
position:relative;
min-height:610px;
overflow:hidden;
border:1px solid rgba(181,137,255,.26);
border-radius:27px;
background:#070211;
box-shadow:0 35px 110px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.05);
isolation:isolate;
}
.hero-v15-bg{
position:absolute;inset:0;z-index:-7;
background:
radial-gradient(circle at 18% 42%,rgba(105,43,221,.26),transparent 28%),
radial-gradient(circle at 78% 30%,rgba(147,67,237,.19),transparent 24%),
linear-gradient(106deg,#07020f 0%,#100426 49%,#10042a 74%,#05020c 100%);
}
.hero-v15-stars{
position:absolute;inset:0;z-index:-6;opacity:.84;
background-image:
radial-gradient(circle,#fff 0 1px,transparent 1.55px),
radial-gradient(circle,#d5bcff 0 1px,transparent 1.6px),
radial-gradient(circle,#fff 0 .8px,transparent 1.35px);
background-size:118px 118px,187px 187px,259px 259px;
background-position:15px 22px,61px 46px,37px 89px;
}
.hero-v15-nebula{
position:absolute;left:-10%;top:-20%;width:63%;height:125%;z-index:-5;
border-radius:50%;
background:radial-gradient(ellipse,rgba(128,58,238,.30),rgba(77,30,162,.09) 46%,transparent 72%);
filter:blur(26px);transform:rotate(-14deg);
}
.hero-v15-orbit{
position:absolute;z-index:-3;border:1px solid rgba(204,171,255,.15);border-radius:50%;
}
.hero-v15 .orbit-left{left:-7%;top:11%;width:62%;height:72%;transform:rotate(-8deg)}
.hero-v15 .orbit-right{right:-8%;top:8%;width:44%;height:75%;transform:rotate(13deg)}
.hero-v15-nav{
position:relative;z-index:30;height:78px;padding:0 29px;
display:flex;align-items:center;gap:28px;
border-bottom:1px solid rgba(193,153,255,.18);
background:linear-gradient(180deg,rgba(6,2,15,.89),rgba(8,3,20,.47));
backdrop-filter:blur(14px);
}
.hero-v15-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;flex:0 0 auto}
.hero-v15-logo{
position:relative;width:66px;height:66px;border-radius:50%;
display:grid;place-items:center;text-align:center;
border:1px solid rgba(210,182,255,.50);
background:radial-gradient(circle at 50% 38%,rgba(120,66,225,.30),transparent 43%),linear-gradient(145deg,rgba(38,16,77,.94),rgba(10,5,27,.96));
box-shadow:0 0 0 4px rgba(142,88,235,.06),0 0 24px rgba(145,88,239,.23),inset 0 0 22px rgba(161,106,244,.10);
}
.hero-v15-logo::before,.hero-v15-logo::after{content:"";position:absolute;border-radius:50%;inset:6px;border:1px solid rgba(205,175,255,.17)}
.hero-v15-logo::after{inset:11px;border-style:dashed}
.hero-v15-logo strong{font-size:17px;line-height:1.08;letter-spacing:.08em;text-shadow:0 0 10px rgba(205,170,255,.50)}
.logo-star{position:absolute;top:3px;font-size:10px;color:#eadcff}
.hero-v15-brand-en{font-size:10px;line-height:1.35;letter-spacing:.15em;color:#c8bad9;font-weight:800}
.hero-v15-links{margin-left:auto;display:flex;align-items:center;gap:28px;height:100%}
.hero-v15-links a{position:relative;color:#ddd2e9;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap;transition:.2s}
.hero-v15-links a:hover,.hero-v15-links a.active{color:#fff}
.hero-v15-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-28px;height:2px;background:linear-gradient(90deg,transparent,#c98cff,transparent);box-shadow:0 0 12px #9e5bea}
.hero-v15-order{flex:0 0 auto;text-decoration:none;color:#fff;font-size:12px;font-weight:800;padding:11px 18px;border-radius:999px;border:1px solid rgba(211,172,255,.35);background:linear-gradient(100deg,#6f35ca,#9c43df);box-shadow:0 0 20px rgba(151,72,225,.32)}
.hero-v15-main{position:relative;min-height:532px}
.hero-v15-copy{
position:absolute;z-index:12;left:8%;top:48%;transform:translateY(-50%);
width:52%;max-width:690px;text-align:center;
}
.hero-v15-kicker{display:inline-block;color:#d6c8e4;font-size:16px;font-weight:700;letter-spacing:.055em;margin-bottom:10px}
.hero-v15-copy h1{
margin:0!important;
font-size:clamp(72px,7vw,112px)!important;
line-height:.98!important;
letter-spacing:.075em!important;
font-weight:900!important;
color:transparent!important;
background:linear-gradient(180deg,#fff 0%,#fff8ff 26%,#e9d6ff 58%,#b98aeb 100%)!important;
-webkit-background-clip:text!important;background-clip:text!important;
filter:drop-shadow(0 0 9px rgba(226,196,255,.43)) drop-shadow(0 9px 20px rgba(101,47,190,.27));
}
.hero-v15-tagline{margin:13px auto 0;color:#d8c8e2;font-size:17px;letter-spacing:.045em}
.hero-v15-traits{
width:max-content;max-width:100%;
margin:18px auto 0;padding:8px 17px;
display:flex;justify-content:center;gap:22px;
border-radius:999px;border:1px solid rgba(195,157,255,.20);
background:rgba(16,6,38,.49);backdrop-filter:blur(10px);
color:#cfc1dc;font-size:11px;
}
.hero-v15-traits span{white-space:nowrap}
.hero-v15-mainbtn{
margin:20px auto 0;width:154px;height:45px;
display:flex;align-items:center;justify-content:center;gap:12px;
border-radius:11px;text-decoration:none;color:#fff;font-weight:800;font-size:15px;letter-spacing:.08em;
border:1px solid rgba(222,190,255,.60);
background:linear-gradient(180deg,rgba(91,42,168,.68),rgba(45,18,94,.75));
box-shadow:0 0 10px rgba(181,119,255,.48),0 0 30px rgba(117,57,216,.26),inset 0 0 14px rgba(221,188,255,.08);
}
.hero-v15-art{
position:absolute;right:0;top:0;bottom:0;width:48%;z-index:7;overflow:hidden;pointer-events:none;
}
/* 直接使用使用者指定那張圖中的同一人物 */
.hero-v15-character{
position:absolute;right:-1.5%;bottom:-3%;z-index:5;
height:110%;width:auto;max-width:none;object-fit:contain;object-position:right bottom;
filter:drop-shadow(-18px 16px 28px rgba(0,0,0,.25)) drop-shadow(0 0 18px rgba(150,88,241,.16));
}
.hero-v15-glow{
position:absolute;right:5%;top:4%;width:78%;height:88%;z-index:1;border-radius:50%;
background:radial-gradient(circle,rgba(174,101,255,.26),rgba(108,55,211,.09) 46%,transparent 72%);
filter:blur(10px);
}
.hero-v15-heart{
position:absolute;z-index:12;left:19%;top:16%;width:50px;height:50px;border-radius:50%;
display:grid;place-items:center;border:1px solid rgba(221,190,255,.36);
background:rgba(75,36,132,.34);color:#fff;font-size:28px;box-shadow:0 0 22px rgba(173,103,245,.25);
}
.hero-v15-spark{position:absolute;z-index:12;color:#fff;text-shadow:0 0 10px #d6adff,0 0 24px #9856e5}
.hero-v15-spark.a{right:8%;top:18%;font-size:24px}.hero-v15-spark.b{left:13%;top:9%;font-size:15px}
.hero-v15-planet{
position:absolute;z-index:3;right:-24px;bottom:10px;width:126px;height:126px;border-radius:50%;
background:radial-gradient(circle at 35% 30%,#ca94ff 0%,#7540ca 30%,#32136c 68%,#130627 100%);
box-shadow:0 0 28px rgba(142,77,231,.38);
}
.hero-v15-ring{
position:absolute;z-index:4;right:-74px;bottom:19px;width:285px;height:75px;border:2px solid rgba(197,151,255,.44);
border-radius:50%;transform:rotate(-13deg);box-shadow:0 0 12px rgba(156,91,238,.35);
}
.hero-v15 .hero-pick-wide{width:min(100%,1000px);margin-top:18px}
@media(max-width:1120px){
.hero-v15-links{gap:16px}.hero-v15-links a{font-size:11px}
.hero-v15-copy{left:5%;width:55%}
}
@media(max-width:900px){
.hero-v15-links{display:none}
.hero-v15-shell{min-height:730px}
.hero-v15-main{min-height:652px}
.hero-v15-copy{left:5%;right:5%;top:9%;transform:none;width:90%}
.hero-v15-art{width:75%;height:52%;top:auto;bottom:0;right:-9%}
.hero-v15-character{height:106%}
}
@media(max-width:600px){
.hero-v15{width:calc(100% - 16px);margin-top:8px}
.hero-v15-shell{border-radius:20px;min-height:700px}
.hero-v15-nav{height:66px;padding:0 14px}
.hero-v15-logo{width:52px;height:52px}.hero-v15-logo strong{font-size:14px}.hero-v15-brand-en{display:none}
.hero-v15-order{padding:9px 13px}
.hero-v15-main{min-height:634px}
.hero-v15-copy{top:7%}
.hero-v15-kicker{font-size:12px}
.hero-v15-copy h1{font-size:56px!important}
.hero-v15-tagline{font-size:14px}
.hero-v15-traits{gap:10px;padding:7px 10px;font-size:9px}
.hero-v15-art{width:100%;right:-23%;height:48%}
}
/* ==========================================================
XINGLAN V17 — REAL WEB HERO / EXACT USER CHARACTER
The reference banner is NOT pasted as an image.
Background = CSS. Text/buttons = HTML. Character = extracted exact pixels.
========================================================== */
.hero-v15{display:none!important}
body > .nav-wrap{display:none!important}
.hero-v17{
width:min(1460px,calc(100% - 26px));
margin:16px auto 0;
padding:0 0 76px!important;
display:block!important;
min-height:auto!important;
}
.hero-v17-shell{
position:relative;
min-height:594px;
overflow:hidden;
border-radius:26px;
border:1px solid rgba(180,137,255,.27);
background:#07020f;
box-shadow:0 34px 108px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.055);
isolation:isolate;
}
.hero-v17-space{
position:absolute;inset:0;z-index:-8;
background:
radial-gradient(circle at 78% 33%,rgba(153,76,242,.22),transparent 27%),
radial-gradient(circle at 18% 44%,rgba(104,49,217,.24),transparent 32%),
linear-gradient(104deg,#06020d 0%,#0d0320 48%,#100529 74%,#05010c 100%);
}
.hero-v17-stars{
position:absolute;inset:0;z-index:-7;opacity:.88;
background-image:
radial-gradient(circle,#fff 0 1px,transparent 1.55px),
radial-gradient(circle,#d7c1ff 0 1px,transparent 1.6px),
radial-gradient(circle,#f6ddff 0 .8px,transparent 1.4px);
background-size:120px 120px,188px 188px,267px 267px;
background-position:12px 23px,66px 42px,33px 91px;
}
.hero-v17-galaxy{
position:absolute;left:-13%;top:-31%;width:65%;height:155%;z-index:-6;
border-radius:50%;
transform:rotate(-14deg);
background:
radial-gradient(ellipse at 47% 50%,rgba(132,61,242,.30),rgba(83,34,174,.10) 45%,transparent 70%);
filter:blur(21px);
}
.hero-v17-galaxy::after{
content:"";position:absolute;inset:15% 8% 17% 13%;border-radius:50%;
border:1px solid rgba(209,178,255,.15);transform:rotate(-5deg);
box-shadow:0 0 45px rgba(117,61,222,.08);
}
.hero-v17-arc{
position:absolute;z-index:-3;border-radius:50%;pointer-events:none;
}
.hero-v17 .arc-a{
left:2.5%;top:17%;width:51%;height:61%;
border:1px solid rgba(202,169,255,.16);
border-top-color:rgba(231,211,255,.33);
transform:rotate(-8deg);
}
.hero-v17 .arc-b{
right:-8%;top:5%;width:43%;height:78%;
border:1px dashed rgba(190,147,255,.12);
transform:rotate(13deg);
}
/* Unified nav over the same visual field */
.hero-v17-nav{
position:relative;z-index:30;height:77px;padding:0 29px;
display:flex;align-items:center;gap:27px;
border-bottom:1px solid rgba(193,153,255,.18);
background:linear-gradient(180deg,rgba(6,2,15,.91),rgba(8,3,20,.48));
backdrop-filter:blur(14px);
}
.hero-v17-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;flex:0 0 auto}
.hero-v17-logo{
position:relative;width:65px;height:65px;border-radius:50%;
display:grid;place-items:center;text-align:center;
border:1px solid rgba(211,181,255,.50);
background:radial-gradient(circle at 50% 38%,rgba(122,67,226,.31),transparent 43%),linear-gradient(145deg,rgba(38,16,77,.96),rgba(10,5,27,.98));
box-shadow:0 0 0 4px rgba(142,88,235,.06),0 0 24px rgba(145,88,239,.23),inset 0 0 22px rgba(161,106,244,.10);
}
.hero-v17-logo::before,.hero-v17-logo::after{content:"";position:absolute;border-radius:50%;inset:6px;border:1px solid rgba(205,175,255,.17)}
.hero-v17-logo::after{inset:11px;border-style:dashed}
.hero-v17-logo strong{font-size:17px;line-height:1.08;letter-spacing:.08em;text-shadow:0 0 10px rgba(205,170,255,.50)}
.v17-logo-star{position:absolute;top:3px;font-size:10px;color:#eadcff}
.hero-v17-brand-en{font-size:10px;line-height:1.35;letter-spacing:.15em;color:#c8bad9;font-weight:800}
.hero-v17-links{margin-left:auto;display:flex;align-items:center;gap:27px;height:100%}
.hero-v17-links a{position:relative;color:#ddd2e9;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap;transition:.2s}
.hero-v17-links a:hover,.hero-v17-links a.active{color:#fff}
.hero-v17-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-28px;height:2px;background:linear-gradient(90deg,transparent,#c88aff,transparent);box-shadow:0 0 12px #9e5bea}
.hero-v17-order{flex:0 0 auto;text-decoration:none;color:#fff;font-size:12px;font-weight:800;padding:11px 18px;border-radius:999px;border:1px solid rgba(211,172,255,.36);background:linear-gradient(100deg,#6f35ca,#9c43df);box-shadow:0 0 20px rgba(151,72,225,.32)}
.hero-v17-main{position:relative;min-height:517px}
.hero-v17-copy{
position:absolute;z-index:12;left:6.8%;top:48%;
width:54%;max-width:700px;transform:translateY(-50%);text-align:center;
}
.hero-v17-top-symbol{
margin:0 auto -7px;color:#e6d2ff;font-size:25px;
text-shadow:0 0 10px rgba(235,214,255,.85),0 0 24px rgba(152,89,245,.68);
}
.hero-v17-kicker{display:inline-block;color:#d7c8e5;font-size:16px;font-weight:700;letter-spacing:.055em;margin-bottom:10px}
.hero-v17-copy h1{
margin:0!important;
font-size:clamp(72px,7vw,111px)!important;
line-height:.98!important;letter-spacing:.075em!important;font-weight:900!important;
color:transparent!important;
background:linear-gradient(180deg,#fff 0%,#fff9ff 25%,#ead8ff 58%,#bb8ceb 100%)!important;
-webkit-background-clip:text!important;background-clip:text!important;
filter:drop-shadow(0 0 9px rgba(226,196,255,.43)) drop-shadow(0 9px 20px rgba(101,47,190,.27));
}
.hero-v17-tagline{margin:13px auto 0;color:#d9c9e3;font-size:17px;letter-spacing:.045em}
.hero-v17-traits{
width:max-content;max-width:100%;margin:18px auto 0;padding:8px 17px;
display:flex;justify-content:center;gap:22px;
border-radius:999px;border:1px solid rgba(195,157,255,.20);
background:rgba(15,6,37,.50);backdrop-filter:blur(10px);
color:#cfc1dc;font-size:11px;
}
.hero-v17-traits span{white-space:nowrap}
.hero-v17-mainbtn{
margin:20px auto 0;width:154px;height:45px;
display:flex;align-items:center;justify-content:center;gap:12px;
border-radius:11px;text-decoration:none;color:#fff;font-weight:800;font-size:15px;letter-spacing:.08em;
border:1px solid rgba(222,190,255,.60);
background:linear-gradient(180deg,rgba(91,42,168,.68),rgba(45,18,94,.75));
box-shadow:0 0 10px rgba(181,119,255,.48),0 0 30px rgba(117,57,216,.26),inset 0 0 14px rgba(221,188,255,.08);
}
/* Exact extracted character. There is no rectangle behind it. */
.hero-v17-art{
position:absolute;right:0;top:0;bottom:0;width:48%;z-index:7;overflow:visible;pointer-events:none;
}
.hero-v17-aura{
position:absolute;right:3%;top:5%;width:82%;height:88%;z-index:1;border-radius:50%;
background:radial-gradient(circle,rgba(179,105,255,.27),rgba(108,55,211,.09) 47%,transparent 72%);
filter:blur(9px);
}
.hero-v17-character{
position:absolute;z-index:7;right:-2.8%;bottom:-1.5%;
height:101%;width:auto;max-width:none;
object-fit:contain;object-position:right bottom;
filter:drop-shadow(-15px 16px 27px rgba(0,0,0,.27)) drop-shadow(0 0 15px rgba(157,91,244,.15));
}
.hero-v17-heart{
position:absolute;z-index:12;left:15%;top:15%;width:50px;height:50px;border-radius:50%;
display:grid;place-items:center;border:1px solid rgba(221,190,255,.36);
background:rgba(75,36,132,.33);color:#fff;font-size:28px;
box-shadow:0 0 22px rgba(173,103,245,.25);
}
.hero-v17-spark{position:absolute;z-index:13;color:#fff;text-shadow:0 0 10px #d6adff,0 0 24px #9856e5}
.hero-v17 .spark-a{right:7%;top:17%;font-size:23px}
.hero-v17 .spark-b{left:9%;top:8%;font-size:15px}
.hero-v17 .spark-c{right:17%;bottom:18%;font-size:13px}
.hero-v17-planet{
position:absolute;z-index:3;right:-27px;bottom:12px;width:125px;height:125px;border-radius:50%;
background:
radial-gradient(circle at 35% 30%,#d09aff 0%,#7d45d0 28%,#3b177a 66%,#15072c 100%);
box-shadow:0 0 28px rgba(142,77,231,.38);
}
.hero-v17-planet-ring{
position:absolute;z-index:4;right:-76px;bottom:21px;width:286px;height:75px;
border:2px solid rgba(204,158,255,.44);border-radius:50%;
transform:rotate(-13deg);box-shadow:0 0 12px rgba(156,91,238,.35);
}
.hero-v17 .hero-pick-wide{width:min(100%,1000px);margin-top:18px}
@media(max-width:1120px){
.hero-v17-links{gap:16px}.hero-v17-links a{font-size:11px}
.hero-v17-copy{left:5%;width:55%}
}
@media(max-width:900px){
.hero-v17-links{display:none}
.hero-v17-shell{min-height:730px}
.hero-v17-main{min-height:653px}
.hero-v17-copy{left:5%;right:5%;top:8%;transform:none;width:90%}
.hero-v17-art{width:76%;height:52%;top:auto;bottom:0;right:-9%}
.hero-v17-character{height:100%}
}
@media(max-width:600px){
.hero-v17{width:calc(100% - 14px);margin-top:7px}
.hero-v17-shell{border-radius:20px;min-height:700px}
.hero-v17-nav{height:66px;padding:0 14px}
.hero-v17-logo{width:52px;height:52px}.hero-v17-logo strong{font-size:14px}
.hero-v17-brand-en{display:none}
.hero-v17-order{margin-left:auto;padding:9px 13px}
.hero-v17-main{min-height:634px}
.hero-v17-copy{top:6.5%}
.hero-v17-kicker{font-size:12px}
.hero-v17-copy h1{font-size:56px!important}
.hero-v17-tagline{font-size:14px}
.hero-v17-traits{gap:10px;padding:7px 10px;font-size:9px}
.hero-v17-art{width:102%;right:-25%;height:48%}
}
/* =========================================================
XINGLAN V18
目標：像參考圖一樣「整個 Hero 是一個完整設計」
- 不貼完整 Banner
- 不用直角人物卡
- 右側人物用同一張參考圖中的角色，長距離羽化融入背景
- 左側文字 / 按鈕 / 導覽全部是真網頁元素
========================================================= */
.hero-v17{display:none!important}
body > .nav-wrap{display:none!important}
.hero-v18{
width:min(1480px,calc(100% - 22px));
margin:12px auto 0;
padding:0 0 74px!important;
display:block!important;
min-height:auto!important;
}
.hero-v18-shell{
position:relative;
overflow:hidden;
min-height:610px;
border-radius:26px;
border:1px solid rgba(183,136,255,.25);
background:#06010d;
box-shadow:
0 34px 105px rgba(0,0,0,.47),
inset 0 1px rgba(255,255,255,.05),
0 0 50px rgba(112,54,201,.08);
isolation:isolate;
}
.hero-v18-space{
position:absolute; inset:0; z-index:-9;
background:
radial-gradient(circle at 79% 28%,rgba(151,78,241,.24),transparent 25%),
radial-gradient(circle at 20% 39%,rgba(106,48,219,.27),transparent 31%),
radial-gradient(circle at 50% 68%,rgba(87,39,180,.12),transparent 29%),
linear-gradient(105deg,#05010b 0%,#0d031e 47%,#100426 74%,#05010b 100%);
}
.hero-v18-stars{
position:absolute; inset:0; z-index:-8; opacity:.9;
background-image:
radial-gradient(circle,#fff 0 1px,transparent 1.5px),
radial-gradient(circle,#d9c2ff 0 1px,transparent 1.55px),
radial-gradient(circle,#f2dfff 0 .8px,transparent 1.35px);
background-size:118px 118px,189px 189px,263px 263px;
background-position:7px 18px,61px 44px,39px 87px;
}
.hero-v18-nebula{
position:absolute; z-index:-7; border-radius:50%; pointer-events:none;
filter:blur(30px);
}
.hero-v18 .nebula-left{
left:-15%; top:-31%; width:68%; height:150%;
background:radial-gradient(ellipse,rgba(126,57,238,.32),rgba(76,28,164,.10) 46%,transparent 72%);
transform:rotate(-14deg);
}
.hero-v18 .nebula-center{
left:28%; top:18%; width:44%; height:70%;
background:radial-gradient(ellipse,rgba(103,48,200,.16),transparent 68%);
}
.hero-v18-orbit{
position:absolute; z-index:-4; border-radius:50%; pointer-events:none;
}
.hero-v18 .orbit-a{
left:3%; top:17%; width:52%; height:61%;
border:1px solid rgba(209,178,255,.18);
border-top-color:rgba(237,220,255,.35);
transform:rotate(-7deg);
}
.hero-v18 .orbit-b{
left:6%; top:21%; width:47%; height:55%;
border:1px solid rgba(178,126,255,.08);
transform:rotate(8deg);
}
.hero-v18 .orbit-c{
right:-8%; top:7%; width:45%; height:78%;
border:1px dashed rgba(190,148,255,.10);
transform:rotate(12deg);
}
/* navigation */
.hero-v18-nav{
position:relative; z-index:40;
height:76px; padding:0 28px;
display:flex; align-items:center; gap:27px;
border-bottom:1px solid rgba(195,153,255,.18);
background:linear-gradient(180deg,rgba(5,1,13,.91),rgba(7,2,18,.46));
backdrop-filter:blur(14px);
}
.hero-v18-brand{
display:flex; align-items:center; gap:12px;
color:#fff; text-decoration:none; flex:0 0 auto;
}
.hero-v18-logo{
position:relative; width:64px; height:64px; border-radius:50%;
display:grid; place-items:center; text-align:center;
border:1px solid rgba(217,186,255,.52);
background:
radial-gradient(circle at 50% 38%,rgba(127,70,229,.31),transparent 44%),
linear-gradient(145deg,rgba(37,14,76,.96),rgba(8,4,24,.98));
box-shadow:
0 0 0 4px rgba(145,90,235,.05),
0 0 24px rgba(147,90,240,.23),
inset 0 0 22px rgba(168,110,245,.10);
}
.hero-v18-logo::before,
.hero-v18-logo::after{
content:""; position:absolute; border-radius:50%;
inset:6px; border:1px solid rgba(210,178,255,.17);
}
.hero-v18-logo::after{inset:11px;border-style:dashed}
.hero-v18-logo strong{
font-size:17px; line-height:1.07; letter-spacing:.08em;
text-shadow:0 0 10px rgba(205,170,255,.50);
}
.hero-v18-logo-star{
position:absolute; top:3px; color:#eadcff; font-size:10px;
}
.hero-v18-brand-en{
font-size:10px; line-height:1.35; letter-spacing:.15em;
color:#c9bbda; font-weight:800;
}
.hero-v18-links{
margin-left:auto; display:flex; align-items:center;
gap:27px; height:100%;
}
.hero-v18-links a{
position:relative; color:#ddd2e8; text-decoration:none;
font-size:13px; font-weight:700; white-space:nowrap;
}
.hero-v18-links a:hover,
.hero-v18-links a.active{color:#fff}
.hero-v18-links a.active::after{
content:""; position:absolute; left:0; right:0; bottom:-28px;
height:2px;
background:linear-gradient(90deg,transparent,#c98bff,transparent);
box-shadow:0 0 12px #9f5bea;
}
.hero-v18-order{
color:#fff; text-decoration:none; font-size:12px; font-weight:800;
padding:11px 18px; border-radius:999px;
border:1px solid rgba(214,176,255,.36);
background:linear-gradient(100deg,#6f36c8,#9e46df);
box-shadow:0 0 20px rgba(152,72,224,.31);
}
/* main composition */
.hero-v18-main{
position:relative;
min-height:534px;
}
.hero-v18-left{
position:absolute; z-index:15;
left:5.9%; top:47%;
width:55%; max-width:720px;
transform:translateY(-50%);
text-align:center;
}
.hero-v18-emblem{
width:58px; height:32px;
margin:0 auto 3px;
display:grid; place-items:center;
color:#f0e1ff; font-size:26px;
text-shadow:
0 0 10px rgba(236,216,255,.9),
0 0 26px rgba(153,88,242,.72);
}
.hero-v18-kicker{
display:inline-block;
margin-bottom:10px;
color:#d7c8e4;
font-size:16px;
font-weight:700;
letter-spacing:.055em;
}
.hero-v18-left h1{
margin:0!important;
font-size:clamp(72px,7vw,112px)!important;
line-height:.98!important;
letter-spacing:.074em!important;
font-weight:900!important;
color:transparent!important;
background:linear-gradient(180deg,#fff 0%,#fff8ff 25%,#ead7ff 58%,#bc8ceb 100%)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
filter:
drop-shadow(0 0 9px rgba(227,198,255,.44))
drop-shadow(0 9px 20px rgba(101,47,190,.27));
}
.hero-v18-tagline{
margin:13px auto 0;
color:#dac9e5;
font-size:17px;
letter-spacing:.045em;
}
.hero-v18-traits{
width:max-content; max-width:100%;
margin:18px auto 0;
padding:8px 17px;
display:flex; justify-content:center; gap:22px;
border:1px solid rgba(197,159,255,.20);
border-radius:999px;
background:rgba(15,5,36,.53);
backdrop-filter:blur(10px);
color:#d0c1dc;
font-size:11px;
}
.hero-v18-traits span{white-space:nowrap}
.hero-v18-cta{
margin:20px auto 0;
width:155px; height:46px;
display:flex; align-items:center; justify-content:center; gap:12px;
color:#fff; text-decoration:none;
font-size:15px; font-weight:800; letter-spacing:.08em;
border:1px solid rgba(225,192,255,.61);
border-radius:11px;
background:linear-gradient(180deg,rgba(96,45,174,.70),rgba(43,17,91,.78));
box-shadow:
0 0 10px rgba(184,121,255,.50),
0 0 30px rgba(119,58,217,.28),
inset 0 0 14px rgba(221,188,255,.08);
}
.hero-v18-cta b{font-size:11px;color:#f0dcff}
/* RIGHT ART: long feather blend, no seam */
.hero-v18-art{
position:absolute;
right:-0.2%; top:0; bottom:0;
width:56%;
z-index:8;
overflow:hidden;
pointer-events:none;
}
.hero-v18-aura{
position:absolute;
right:2%; top:4%;
width:84%; height:90%;
border-radius:50%;
background:radial-gradient(circle,rgba(182,108,255,.25),rgba(107,54,211,.08) 48%,transparent 72%);
filter:blur(10px);
z-index:1;
}
.hero-v18-character{
position:absolute;
z-index:8;
right:-1.2%;
bottom:-1.5%;
width:auto;
height:103%;
max-width:none;
object-fit:contain;
object-position:right bottom;
filter:
drop-shadow(-13px 16px 26px rgba(0,0,0,.22))
drop-shadow(0 0 16px rgba(157,91,244,.14));
}
.hero-v18-heart{
position:absolute; z-index:15;
left:25%; top:15%;
width:48px; height:48px;
border-radius:50%;
display:grid; place-items:center;
color:#fff; font-size:27px;
border:1px solid rgba(221,190,255,.34);
background:rgba(75,36,132,.31);
box-shadow:0 0 22px rgba(173,103,245,.23);
}
.hero-v18-spark{
position:absolute; z-index:16;
color:#fff;
text-shadow:0 0 10px #d7adff,0 0 24px #9957e5;
}
.hero-v18 .s1{right:6%;top:17%;font-size:23px}
.hero-v18 .s2{left:19%;top:7%;font-size:15px}
.hero-v18 .s3{right:19%;bottom:18%;font-size:13px}
.hero-v18-planet{
position:absolute; z-index:6;
right:-25px; bottom:11px;
width:132px; height:132px;
border-radius:50%;
background:
radial-gradient(circle at 35% 30%,#cf97ff 0%,#7943cd 29%,#361570 67%,#14062b 100%);
box-shadow:0 0 30px rgba(143,77,232,.40);
}
.hero-v18-planet span{
position:absolute;
left:-50px; top:39px;
width:235px; height:55px;
border:2px solid rgba(205,158,255,.45);
border-radius:50%;
transform:rotate(-13deg);
box-shadow:0 0 12px rgba(157,91,238,.35);
}
.hero-v18 .hero-pick-wide{
width:min(100%,1000px);
margin-top:18px;
}
@media(max-width:1120px){
.hero-v18-links{gap:16px}
.hero-v18-links a{font-size:11px}
.hero-v18-left{left:4%;width:56%}
}
@media(max-width:900px){
.hero-v18-links{display:none}
.hero-v18-shell{min-height:730px}
.hero-v18-main{min-height:654px}
.hero-v18-left{
left:5%; right:5%; top:8%;
width:90%; transform:none;
}
.hero-v18-art{
width:82%; height:53%;
top:auto; bottom:0; right:-10%;
}
.hero-v18-character{height:100%}
}
@media(max-width:600px){
.hero-v18{width:calc(100% - 12px);margin-top:6px}
.hero-v18-shell{border-radius:19px;min-height:700px}
.hero-v18-nav{height:66px;padding:0 14px}
.hero-v18-logo{width:52px;height:52px}
.hero-v18-logo strong{font-size:14px}
.hero-v18-brand-en{display:none}
.hero-v18-order{margin-left:auto;padding:9px 13px}
.hero-v18-main{min-height:634px}
.hero-v18-left{top:6.5%}
.hero-v18-kicker{font-size:12px}
.hero-v18-left h1{font-size:56px!important}
.hero-v18-tagline{font-size:14px}
.hero-v18-traits{gap:10px;padding:7px 10px;font-size:9px}
.hero-v18-art{width:108%;right:-28%;height:49%}
}
/* ==========================================================
XINGLAN V19
參考最新指定圖：整體融合，不貼整張 Banner。
左側 = HTML/CSS，右側 = 指定同一人物＋其周圍星空局部素材。
Hero 高度接近來源原始高度，避免人物被過度放大造成模糊。
========================================================== */
.hero-v18{display:none!important}
body > .nav-wrap{display:none!important}
.hero-v19{
width:min(1480px,calc(100% - 22px));
margin:12px auto 0;
padding:0 0 74px!important;
display:block!important;
min-height:auto!important;
}
.hero-v19-shell{
position:relative;
min-height:548px;
overflow:hidden;
border-radius:25px;
border:1px solid rgba(185,141,255,.25);
background:#06010d;
box-shadow:0 32px 100px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.05);
isolation:isolate;
}
.hero-v19-bg{
position:absolute;inset:0;z-index:-10;
background:
radial-gradient(circle at 18% 46%,rgba(112,51,226,.27),transparent 29%),
radial-gradient(circle at 72% 28%,rgba(149,71,239,.20),transparent 27%),
linear-gradient(104deg,#05010b 0%,#0c031d 48%,#100426 74%,#05010b 100%);
}
.hero-v19-stars{
position:absolute;inset:0;z-index:-9;opacity:.88;
background-image:
radial-gradient(circle,#fff 0 1px,transparent 1.5px),
radial-gradient(circle,#d9c2ff 0 1px,transparent 1.55px),
radial-gradient(circle,#f3dfff 0 .8px,transparent 1.35px);
background-size:116px 116px,187px 187px,259px 259px;
background-position:8px 17px,58px 42px,36px 89px;
}
.hero-v19-nebula{
position:absolute;left:-14%;top:-31%;width:67%;height:150%;z-index:-8;
border-radius:50%;
background:radial-gradient(ellipse,rgba(126,58,239,.33),rgba(77,29,165,.10) 47%,transparent 72%);
filter:blur(29px);transform:rotate(-13deg);
}
.hero-v19-ellipse{
position:absolute;z-index:-4;border-radius:50%;pointer-events:none;
}
.hero-v19 .e1{
left:3.5%;top:19%;width:50%;height:60%;
border:1px solid rgba(211,180,255,.18);
border-top-color:rgba(239,221,255,.35);
transform:rotate(-8deg);
}
.hero-v19 .e2{
left:7%;top:23%;width:44%;height:52%;
border:1px solid rgba(171,122,255,.09);
transform:rotate(8deg);
}
/* nav */
.hero-v19-nav{
position:relative;z-index:40;
height:72px;padding:0 28px;
display:flex;align-items:center;gap:27px;
border-bottom:1px solid rgba(195,153,255,.18);
background:linear-gradient(180deg,rgba(5,1,13,.91),rgba(7,2,18,.44));
backdrop-filter:blur(14px);
}
.hero-v19-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;flex:0 0 auto}
.hero-v19-logo{
position:relative;width:59px;height:59px;border-radius:50%;
display:grid;place-items:center;text-align:center;
border:1px solid rgba(217,186,255,.50);
background:radial-gradient(circle at 50% 38%,rgba(127,70,229,.31),transparent 44%),linear-gradient(145deg,rgba(37,14,76,.96),rgba(8,4,24,.98));
box-shadow:0 0 22px rgba(147,90,240,.21),inset 0 0 20px rgba(168,110,245,.10);
}
.hero-v19-logo strong{font-size:16px;line-height:1.05;letter-spacing:.07em}
.logo-spark{position:absolute;top:2px;font-size:9px;color:#eadcff}
.hero-v19-brand-en{font-size:10px;line-height:1.35;letter-spacing:.15em;color:#c9bbda;font-weight:800}
.hero-v19-links{margin-left:auto;display:flex;align-items:center;gap:26px;height:100%}
.hero-v19-links a{position:relative;color:#ddd2e8;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}
.hero-v19-links a:hover,.hero-v19-links a.active{color:#fff}
.hero-v19-links a.active::after{
content:"";position:absolute;left:0;right:0;bottom:-26px;height:2px;
background:linear-gradient(90deg,transparent,#c98bff,transparent);
box-shadow:0 0 12px #9f5bea;
}
.hero-v19-order{
color:#fff;text-decoration:none;font-size:12px;font-weight:800;
padding:10px 18px;border-radius:999px;
border:1px solid rgba(214,176,255,.36);
background:linear-gradient(100deg,#7036ca,#9e46df);
box-shadow:0 0 19px rgba(152,72,224,.30);
}
/* Hero content — height intentionally ~source image height */
.hero-v19-main{
position:relative;
min-height:476px;
}
.hero-v19-copy{
position:absolute;z-index:15;
left:5.4%;top:48%;
width:54%;max-width:710px;
transform:translateY(-50%);
text-align:center;
}
.hero-v19-star-mark{
margin:0 auto -6px;
color:#f1e4ff;font-size:25px;
text-shadow:0 0 10px rgba(236,216,255,.9),0 0 25px rgba(153,88,242,.72);
}
.hero-v19-kicker{
color:#d8c9e5;font-size:16px;font-weight:700;letter-spacing:.055em;
margin-bottom:9px;
}
.hero-v19-copy h1{
margin:0!important;
font-size:clamp(70px,6.8vw,108px)!important;
line-height:.98!important;
letter-spacing:.073em!important;
font-weight:900!important;
color:transparent!important;
background:linear-gradient(180deg,#fff 0%,#fff8ff 25%,#ead7ff 58%,#bc8ceb 100%)!important;
-webkit-background-clip:text!important;background-clip:text!important;
filter:drop-shadow(0 0 9px rgba(227,198,255,.44)) drop-shadow(0 9px 20px rgba(101,47,190,.27));
}
.hero-v19-tagline{margin:13px auto 0;color:#dac9e5;font-size:17px;letter-spacing:.045em}
.hero-v19-traits{
width:max-content;max-width:100%;
margin:17px auto 0;padding:8px 17px;
display:flex;justify-content:center;gap:22px;
border:1px solid rgba(197,159,255,.20);
border-radius:999px;
background:rgba(15,5,36,.52);
backdrop-filter:blur(10px);
color:#d0c1dc;font-size:11px;
}
.hero-v19-traits span{white-space:nowrap}
.hero-v19-cta{
margin:19px auto 0;width:155px;height:45px;
display:flex;align-items:center;justify-content:center;gap:12px;
color:#fff;text-decoration:none;
font-size:15px;font-weight:800;letter-spacing:.08em;
border:1px solid rgba(225,192,255,.61);
border-radius:11px;
background:linear-gradient(180deg,rgba(96,45,174,.70),rgba(43,17,91,.78));
box-shadow:0 0 10px rgba(184,121,255,.50),0 0 30px rgba(119,58,217,.28),inset 0 0 14px rgba(221,188,255,.08);
}
/* RIGHT SIDE — no box, no seam, no vertical crop */
.hero-v19-art{
position:absolute;
right:0;top:0;bottom:0;
width:59%;
z-index:8;
overflow:hidden;
pointer-events:none;
}
.hero-v19-glow{
position:absolute;right:0;top:0;width:88%;height:100%;
background:radial-gradient(ellipse at 61% 46%,rgba(165,91,248,.18),rgba(90,42,181,.04) 50%,transparent 72%);
filter:blur(7px);z-index:1;
}
.hero-v19-character{
position:absolute;
z-index:8;
right:0;
bottom:0;
width:auto;
height:100%;
max-width:none;
object-fit:contain;
object-position:right bottom;
image-rendering:auto;
filter:drop-shadow(-10px 10px 22px rgba(0,0,0,.18));
}
.hero-v19-heart{
position:absolute;z-index:15;left:31%;top:13%;
width:46px;height:46px;border-radius:50%;
display:grid;place-items:center;
color:#fff;font-size:26px;
border:1px solid rgba(221,190,255,.33);
background:rgba(75,36,132,.27);
box-shadow:0 0 20px rgba(173,103,245,.21);
}
.hero-v19-twinkle{
position:absolute;z-index:16;color:#fff;
text-shadow:0 0 10px #d7adff,0 0 24px #9957e5;
}
.hero-v19 .t1{right:6%;top:16%;font-size:22px}
.hero-v19 .t2{left:25%;top:7%;font-size:14px}
.hero-v19 .hero-pick-wide{width:min(100%,1000px);margin-top:18px}
@media(max-width:1120px){
.hero-v19-links{gap:15px}
.hero-v19-links a{font-size:11px}
.hero-v19-copy{left:4%;width:55%}
}
@media(max-width:900px){
.hero-v19-links{display:none}
.hero-v19-shell{min-height:720px}
.hero-v19-main{min-height:648px}
.hero-v19-copy{left:5%;right:5%;top:7%;width:90%;transform:none}
.hero-v19-art{width:82%;height:51%;top:auto;bottom:0;right:-10%}
.hero-v19-character{height:100%}
}
@media(max-width:600px){
.hero-v19{width:calc(100% - 12px);margin-top:6px}
.hero-v19-shell{border-radius:19px;min-height:690px}
.hero-v19-nav{height:64px;padding:0 13px}
.hero-v19-logo{width:49px;height:49px}
.hero-v19-logo strong{font-size:13px}
.hero-v19-brand-en{display:none}
.hero-v19-order{margin-left:auto;padding:9px 13px}
.hero-v19-main{min-height:626px}
.hero-v19-copy{top:5.5%}
.hero-v19-kicker{font-size:12px}
.hero-v19-copy h1{font-size:54px!important}
.hero-v19-tagline{font-size:14px}
.hero-v19-traits{gap:9px;padding:7px 9px;font-size:9px}
.hero-v19-art{width:108%;right:-27%;height:48%}
}
/* v20 HERO FIX — preserve the existing site, repair only the hero artwork composition */
.hero-v19-copy{left:4.6%;width:50%;max-width:650px;}
.hero-v19-art{
right:0;top:0;bottom:0;width:55%;overflow:visible;
-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 5%,#000 20%,#000 100%);
mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 5%,#000 20%,#000 100%);
}
.hero-v19-character{
right:0;bottom:0;height:100%;width:auto;max-width:none;
object-fit:contain;object-position:right bottom;
filter:drop-shadow(-18px 8px 30px rgba(72,28,140,.24));
}
.hero-v19-glow{
right:0;width:100%;height:100%;
background:radial-gradient(ellipse at 68% 46%,rgba(154,78,244,.22),rgba(89,38,177,.08) 48%,transparent 76%);
}
/* Source artwork already contains its own heart/stars; don't duplicate them. */
.hero-v19-heart,.hero-v19-twinkle{display:none!important;}
/* Soften the transition under the character without introducing a rectangular seam. */
.hero-v19-main::after{
content:"";position:absolute;z-index:9;pointer-events:none;
left:43%;top:0;bottom:0;width:18%;
background:linear-gradient(90deg,rgba(10,3,28,0),rgba(21,6,48,.10),rgba(21,6,48,0));
filter:blur(18px);
}
/* ==========================================================
V21 — clean continuous hero, no visible right-side rectangle
========================================================== */
.hero-v20,.hero-v19,.hero-v18,.hero-v17,.hero-v16,.hero-v15{display:none!important}
body > .nav-wrap{display:none!important}
.hero-v21{
width:min(1480px,calc(100% - 22px));
margin:12px auto 0;
padding:0 0 74px!important;
display:block!important;
min-height:auto!important;
}
.hero-v21-shell{
position:relative;
overflow:hidden;
min-height:600px;
border-radius:26px;
border:1px solid rgba(187,143,255,.26);
background:#06010e;
box-shadow:0 34px 108px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.05);
isolation:isolate;
}
.hero-v21-bg{
position:absolute;inset:0;z-index:-10;
background:
radial-gradient(circle at 77% 32%,rgba(151,73,242,.27),transparent 28%),
radial-gradient(circle at 18% 46%,rgba(105,46,220,.29),transparent 31%),
radial-gradient(circle at 48% 66%,rgba(89,38,182,.12),transparent 32%),
linear-gradient(104deg,#05010b 0%,#0b031b 48%,#100426 74%,#05010b 100%);
}
.hero-v21-stars{
position:absolute;inset:0;z-index:-9;opacity:.9;
background-image:
radial-gradient(circle,#fff 0 1px,transparent 1.5px),
radial-gradient(circle,#dcc6ff 0 1px,transparent 1.55px),
radial-gradient(circle,#f4e0ff 0 .8px,transparent 1.35px);
background-size:118px 118px,191px 191px,271px 271px;
background-position:8px 17px,57px 43px,35px 91px;
}
.hero-v21-galaxy{
position:absolute;left:-13%;top:-31%;width:69%;height:151%;z-index:-8;
border-radius:50%;
background:radial-gradient(ellipse,rgba(128,58,240,.34),rgba(78,30,166,.10) 46%,transparent 72%);
filter:blur(30px);transform:rotate(-13deg);
}
.hero-v21-arc{position:absolute;z-index:-4;border-radius:50%;pointer-events:none}
.hero-v21 .arc1{
left:3%;top:17%;width:53%;height:62%;
border:1px solid rgba(211,180,255,.18);
border-top-color:rgba(239,222,255,.35);
transform:rotate(-7deg);
}
.hero-v21 .arc2{
left:7%;top:22%;width:47%;height:54%;
border:1px solid rgba(171,122,255,.09);
transform:rotate(8deg);
}
.hero-v21-nav{
position:relative;z-index:40;
height:76px;padding:0 28px;
display:flex;align-items:center;gap:27px;
border-bottom:1px solid rgba(195,153,255,.18);
background:linear-gradient(180deg,rgba(5,1,13,.91),rgba(7,2,18,.44));
backdrop-filter:blur(14px);
}
.hero-v21-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;flex:0 0 auto}
.hero-v21-logo{
position:relative;width:63px;height:63px;border-radius:50%;
display:grid;place-items:center;text-align:center;
border:1px solid rgba(217,186,255,.50);
background:radial-gradient(circle at 50% 38%,rgba(127,70,229,.31),transparent 44%),linear-gradient(145deg,rgba(37,14,76,.96),rgba(8,4,24,.98));
box-shadow:0 0 22px rgba(147,90,240,.21),inset 0 0 20px rgba(168,110,245,.10);
}
.hero-v21-logo strong{font-size:16px;line-height:1.05;letter-spacing:.07em}
.hero-v21-logo>span{position:absolute;top:3px;font-size:9px;color:#eadcff}
.hero-v21-en{font-size:10px;line-height:1.35;letter-spacing:.15em;color:#c9bbda;font-weight:800}
.hero-v21-links{margin-left:auto;display:flex;align-items:center;gap:26px;height:100%}
.hero-v21-links a{position:relative;color:#ddd2e8;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}
.hero-v21-links a:hover,.hero-v21-links a.active{color:#fff}
.hero-v21-links a.active::after{
content:"";position:absolute;left:0;right:0;bottom:-28px;height:2px;
background:linear-gradient(90deg,transparent,#c98bff,transparent);
box-shadow:0 0 12px #9f5bea;
}
.hero-v21-order{
color:#fff;text-decoration:none;font-size:12px;font-weight:800;
padding:10px 18px;border-radius:999px;
border:1px solid rgba(214,176,255,.36);
background:linear-gradient(100deg,#7036ca,#9e46df);
box-shadow:0 0 19px rgba(152,72,224,.30);
}
.hero-v21-main{position:relative;min-height:524px}
.hero-v21-copy{
position:absolute;z-index:15;
left:5.4%;top:47.5%;width:54%;max-width:710px;
transform:translateY(-50%);text-align:center;
}
.hero-v21-mark{
margin:0 auto -6px;color:#f1e4ff;font-size:24px;
text-shadow:0 0 10px rgba(236,216,255,.9),0 0 25px rgba(153,88,242,.72);
}
.hero-v21-kicker{color:#d8c9e5;font-size:16px;font-weight:700;letter-spacing:.055em;margin-bottom:9px}
.hero-v21-copy h1{
margin:0!important;
font-size:clamp(72px,6.8vw,110px)!important;
line-height:.98!important;
letter-spacing:.073em!important;
font-weight:900!important;
color:transparent!important;
background:linear-gradient(180deg,#fff 0%,#fff8ff 25%,#ead7ff 58%,#bc8ceb 100%)!important;
-webkit-background-clip:text!important;background-clip:text!important;
filter:drop-shadow(0 0 9px rgba(227,198,255,.44)) drop-shadow(0 9px 20px rgba(101,47,190,.27));
}
.hero-v21-copy p{margin:13px auto 0;color:#dac9e5;font-size:17px;letter-spacing:.045em}
.hero-v21-traits{
width:max-content;max-width:100%;
margin:17px auto 0;padding:8px 17px;
display:flex;justify-content:center;gap:22px;
border:1px solid rgba(197,159,255,.20);
border-radius:999px;background:rgba(15,5,36,.52);
backdrop-filter:blur(10px);color:#d0c1dc;font-size:11px;
}
.hero-v21-traits span{white-space:nowrap}
.hero-v21-cta{
margin:19px auto 0;width:155px;height:45px;
display:flex;align-items:center;justify-content:center;gap:12px;
color:#fff;text-decoration:none;font-size:15px;font-weight:800;letter-spacing:.08em;
border:1px solid rgba(225,192,255,.61);border-radius:11px;
background:linear-gradient(180deg,rgba(96,45,174,.70),rgba(43,17,91,.78));
box-shadow:0 0 10px rgba(184,121,255,.50),0 0 30px rgba(119,58,217,.28),inset 0 0 14px rgba(221,188,255,.08);
}
.hero-v21-art{
position:absolute;right:0;top:0;bottom:0;width:62%;
z-index:8;overflow:hidden;pointer-events:none;
}
.hero-v21-aura{
position:absolute;right:0;top:0;width:93%;height:100%;z-index:1;
background:radial-gradient(ellipse at 62% 48%,rgba(170,95,252,.16),rgba(91,42,183,.04) 52%,transparent 74%);
filter:blur(8px);
}
.hero-v21-character{
position:absolute;z-index:8;
right:0;bottom:0;
height:100%;width:auto;max-width:none;
object-fit:contain;object-position:right bottom;
image-rendering:auto;
filter:drop-shadow(-10px 12px 24px rgba(0,0,0,.16));
}
.hero-v21 .hero-pick-wide{width:min(100%,1000px);margin-top:18px}
@media(max-width:1120px){
.hero-v21-links{gap:15px}.hero-v21-links a{font-size:11px}
.hero-v21-copy{left:4%;width:55%}
}
@media(max-width:900px){
.hero-v21-links{display:none}
.hero-v21-shell{min-height:730px}
.hero-v21-main{min-height:654px}
.hero-v21-copy{left:5%;right:5%;top:7%;width:90%;transform:none}
.hero-v21-art{width:87%;height:52%;top:auto;bottom:0;right:-10%}
.hero-v21-character{height:100%}
}
@media(max-width:600px){
.hero-v21{width:calc(100% - 12px);margin-top:6px}
.hero-v21-shell{border-radius:19px;min-height:700px}
.hero-v21-nav{height:64px;padding:0 13px}
.hero-v21-logo{width:49px;height:49px}
.hero-v21-logo strong{font-size:13px}
.hero-v21-en{display:none}
.hero-v21-order{margin-left:auto;padding:9px 13px}
.hero-v21-main{min-height:636px}
.hero-v21-copy{top:5.5%}
.hero-v21-kicker{font-size:12px}
.hero-v21-copy h1{font-size:54px!important}
.hero-v21-copy p{font-size:14px}
.hero-v21-traits{gap:9px;padding:7px 9px;font-size:9px}
.hero-v21-art{width:112%;right:-30%;height:49%}
}