:root { --ink:#020617; --panel:rgba(15,23,42,.74); --line:rgba(148,163,184,.16); --muted:#93a3b8; --sky:#55c7ff; --white:#f7fbff; }
* { box-sizing:border-box; }
html { font-size:130%; scroll-behavior:smooth; }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--white); background:linear-gradient(rgba(2,9,18,.74),rgba(2,8,16,.86)),url("background.png") center/cover fixed; font-family:Manrope,Arial,sans-serif; }
.aurora { position:fixed; z-index:-1; width:42rem; height:42rem; border-radius:50%; filter:blur(110px); opacity:.14; pointer-events:none; }
.aurora-left { top:28%; left:-27rem; background:#327be8; }.aurora-right { top:-25rem; right:-15rem; background:#70d6ff; }
.topbar, .portal, footer { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.topbar { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { display:none; }.top-banner { display:block; width:100.6px; height:43px; overflow:hidden; border:1px solid rgba(188,207,184,.28); border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,.28); }.top-banner img { display:block; width:100%; height:100%; object-fit:cover; }.hero-wordmark { margin:0; color:var(--white); font:800 2.13rem/1 Manrope,Arial,sans-serif; letter-spacing:-.08em; text-align:center; text-shadow:0 8px 28px rgba(0,0,0,.32); }.hero-wordmark span { margin-left:3px; vertical-align:top; color:var(--sky); font-size:.45em; }
.topbar-actions { display:flex; align-items:center; gap:10px; }.topbar button { display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(132,167,205,.16); color:#e8f4ff; background:rgba(37,61,93,.72); font:700 .8rem/1 Manrope,Arial,sans-serif; cursor:pointer; transition:.25s; }.topbar button:hover { border-color:#00b8ff; color:#fff; background:rgba(34,75,116,.94); }.topbar svg { width:18px; height:18px; fill:none; stroke:#00b8ff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.9; }.language { gap:7px; min-height:43px; padding:0 17px; border-radius:999px; }.share-link { width:43px; height:43px; border-radius:50%; padding:0; }.share-link svg { width:20px; height:20px; }
.portal { padding:33px 0 80px; }.intro { max-width:920px; margin:0 auto 32px; }.banner { display:block; width:84%; margin-inline:auto; aspect-ratio:2.34; object-fit:cover; border:1px solid rgba(188,207,184,.28); border-radius:20px; box-shadow:0 26px 70px rgba(0,0,0,.45); }.image-slots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:620px; gap:16px; margin:0 auto 58px; }.image-card { min-width:0; }.image-slot { display:grid; aspect-ratio:1; place-items:center; overflow:hidden; border:1px dashed rgba(202,220,195,.48); border-radius:18px; color:rgba(228,239,224,.72); background:rgba(15,33,27,.38); box-shadow:inset 0 0 0 1px rgba(255,255,255,.025); }.image-slot img { display:block; width:100%; height:100%; object-fit:cover; }.image-slot span { font:500 .67rem/1 "DM Mono",monospace; letter-spacing:.14em; }.image-caption { margin:10px 0 0; color:#f1f7f2; font:600 .72rem/1.35 Manrope,Arial,sans-serif; letter-spacing:-.02em; text-align:center; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.contact-grid { --contact-row:calc((min(1120px,calc(100vw - 48px)) - 42px)/4); display:grid; grid-auto-rows:var(--contact-row); grid-template-columns:repeat(4,1fr); gap:14px; }.contact-card { position:relative; min-height:0; padding:24px; overflow:hidden; border:1px solid var(--line); border-radius:18px; color:var(--white); text-decoration:none; background:linear-gradient(145deg,rgba(30,41,59,.72),rgba(8,15,28,.76)); transition:transform .28s ease,border-color .28s ease,background .28s ease; }.contact-card:hover { z-index:1; border-color:rgba(105,213,255,.6); background:linear-gradient(145deg,rgba(38,64,91,.83),rgba(8,20,34,.9)); transform:translateY(-5px); }.card-index { color:#718198; font:400 .64rem "DM Mono",monospace; }.card-icon { position:absolute; top:20px; right:21px; color:#a8e4ff; font-size:1.2rem; }.contact-card h2 { margin:57px 0 7px; font-size:1.03rem; letter-spacing:-.04em; }.contact-card p { margin:0; overflow:hidden; color:#b6c4d7; font:400 .72rem/1.5 "DM Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }.feature-card,.contact-card:nth-child(2) { grid-column:span 2; }.feature-card { background:radial-gradient(circle at 95% 0%,rgba(72,176,235,.23),transparent 45%),linear-gradient(145deg,rgba(25,56,83,.88),rgba(8,15,28,.82)); }.feature-card:after { content:""; position:absolute; right:-15px; bottom:-80px; width:200px; height:200px; border:1px solid rgba(152,224,255,.25); border-radius:50%; }.whatsapp { background:linear-gradient(145deg,rgba(13,64,61,.48),rgba(8,18,27,.82)); }
.rednote .card-icon,.wechat .card-icon,.instagram .card-icon,.whatsapp .card-icon { width:24px; height:24px; font-size:0; background:center/contain no-repeat; }
.rednote .card-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%23ff2442'/%3E%3Cpath d='M6 8.2h12v7.6H6z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8.4 10.7h7.2M8.4 13.3h4.7' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wechat .card-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 10.4c0-3.1-3.1-5.6-6.9-5.6s-6.9 2.5-6.9 5.6 3.1 5.6 6.9 5.6c.6 0 1.2-.1 1.8-.2l3.2 2 .1-3.2c1.1-1 1.8-2.5 1.8-4.2Z' fill='%2307c160'/%3E%3Ccircle cx='10.2' cy='10.2' r='1' fill='white'/%3E%3Ccircle cx='14.9' cy='10.2' r='1' fill='white'/%3E%3Cpath d='M8.7 17.4c0 1.2 1.4 2.2 3.1 2.2.4 0 .8 0 1.1-.1l1.8 1.1.1-1.8c.5-.4.8-.9.8-1.4' fill='%2387dd9e'/%3E%3C/svg%3E"); }
.instagram .card-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='2' y1='22' x2='22' y2='2' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23feda75'/%3E%3Cstop offset='.45' stop-color='%23d62976'/%3E%3Cstop offset='1' stop-color='%234f5bd5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='24' height='24' rx='6' fill='url(%23g)'/%3E%3Crect x='6.4' y='6.4' width='11.2' height='11.2' rx='3.4' fill='none' stroke='white' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='12' r='2.7' fill='none' stroke='white' stroke-width='1.7'/%3E%3Ccircle cx='15.6' cy='8.5' r='1' fill='white'/%3E%3C/svg%3E"); }
.whatsapp .card-icon { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2325d366'/%3E%3Cpath d='M7.4 18.2 8.2 15a6.2 6.2 0 1 1 2.7 2.7l-3.5.5Z' fill='none' stroke='white' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M10 9.1c.2-.5.5-.5.8-.5.2 0 .4 0 .5.4l.6 1.4c.1.3.1.5-.1.7l-.4.5c.4.8 1 1.4 1.8 1.8l.5-.4c.2-.2.4-.2.7-.1l1.4.6c.3.1.4.3.4.5 0 .3 0 .6-.5.8-.5.2-1.2.4-2.1 0-1-.4-2.4-1.7-3.1-2.9-.7-1.2-1-2.3-.6-3.4Z' fill='white'/%3E%3C/svg%3E"); }
.social-logo-card { border-color:transparent; background:transparent; box-shadow:none; }
.social-logo-card > :not(.social-logo) { display:none; }
.social-logo { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 7px 10px rgba(0,0,0,.3)); transition:transform .28s ease; }
.social-logo-card:hover { border-color:transparent; background:transparent; transform:translateY(-4px); }
.social-logo-card:hover .social-logo { transform:scale(1.05); }
.feature-card .contact-logo,.contact-phone-card .contact-logo { position:absolute; z-index:0; top:10%; right:4%; display:block; width:auto; height:80%; object-fit:contain; filter:drop-shadow(0 7px 10px rgba(0,0,0,.28)); transition:transform .28s ease; }
.feature-card h2,.feature-card p,.contact-phone-card h2,.contact-phone-card p { position:relative; z-index:1; width:54%; }
.feature-card p { overflow:visible; line-height:1.2; text-overflow:clip; white-space:normal; }
.feature-card .card-icon,.contact-phone-card .card-icon { display:none; }
.feature-card:hover .contact-logo,.contact-phone-card:hover .contact-logo { transform:scale(1.05); }
 .feature-card .card-index,.contact-phone-card .card-index { display:none; }
.contact-grid .feature-card h2,.contact-grid .contact-phone-card h2 { position:absolute; z-index:1; top:19%; left:0; width:58%; margin:0; text-align:center; }
.contact-grid .feature-card p,.contact-grid .contact-phone-card p { position:absolute; z-index:1; bottom:17%; left:0; width:58%; margin:0; overflow:visible; text-align:center; text-overflow:clip; white-space:nowrap; }
@media (max-width:700px) { .contact-grid .feature-card h2,.contact-grid .contact-phone-card h2 { font-size:.72rem; }.contact-grid .feature-card p { font-size:.27rem; letter-spacing:-.09em; }.contact-grid .contact-phone-card p { font-size:.38rem; letter-spacing:-.07em; } }
.contact-grid .feature-card p { bottom:8%; font-size:0; line-height:1; }
.contact-grid .feature-card p::before { content:"xiaoxiao.business\A@\Agmail.com"; color:#b6c4d7; font:400 .38rem/1 "DM Mono",monospace; letter-spacing:-.05em; white-space:pre; }
.modal-layer { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; background:rgba(1,10,16,.72); backdrop-filter:blur(10px); transition:opacity .2s ease,visibility .2s ease; }
.modal-layer.is-open { opacity:1; visibility:visible; }
.modal-card { position:relative; width:min(100%,360px); border:1px solid rgba(163,213,255,.38); border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.48); background:#f9faf8; }
.qr-modal { padding:12px; }.qr-modal img { display:block; width:100%; border-radius:14px; }
.modal-close { position:absolute; z-index:1; top:8px; right:8px; display:grid; width:32px; height:32px; place-items:center; border:0; border-radius:50%; color:#fff; background:rgba(9,25,39,.78); font:400 1.4rem/1 Arial,sans-serif; cursor:pointer; }
.contact-modal { padding:38px 20px 20px; text-align:center; }.contact-modal p { margin:0 0 16px; color:#15263a; font:800 .92rem Manrope,Arial,sans-serif; }.contact-modal a { display:block; margin-top:10px; padding:13px 16px; border-radius:12px; color:#fff; background:linear-gradient(135deg,#1666bc,#25aed7); font:700 .78rem Manrope,Arial,sans-serif; text-decoration:none; }
footer { display:flex; align-items:center; justify-content:space-between; padding:25px 0 34px; border-top:1px solid var(--line); color:#738399; font:400 .68rem "DM Mono",monospace; }.status { display:flex; align-items:center; gap:8px; }.status i { display:block; width:6px; height:6px; border-radius:50%; background:#70e6ba; box-shadow:0 0 12px #70e6ba; }
.toast { position:fixed; bottom:25px; left:50%; padding:10px 16px; border:1px solid rgba(119,216,255,.4); border-radius:99px; opacity:0; color:white; background:#10243a; font:.72rem "DM Mono",monospace; transform:translate(-50%,20px); transition:.25s; pointer-events:none; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:700px) { body { background-attachment:scroll; } .topbar,.portal,footer { width:min(100% - 32px,1120px); }.topbar { height:76px; }.portal { padding:20px 0 52px; }.intro { margin-bottom:22px; }.banner { width:84%; border-radius:14px; }.image-slots { gap:10px; margin-bottom:34px; }.image-slot { border-radius:13px; }.image-caption { margin-top:7px; font-size:.6rem; line-height:1.3; } .contact-grid { --contact-row:calc((100vw - 53px)/4); grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }.contact-card,.feature-card,.contact-card:nth-child(2) { min-width:0; min-height:0; padding:10px 8px; }.feature-card,.contact-card:nth-child(2) { grid-column:span 2; }.contact-card h2 { margin:25px 0 4px; font-size:.76rem; }.contact-card p { font-size:.52rem; letter-spacing:-.06em; }.card-index { font-size:.52rem; }.card-icon { top:10px; right:9px; font-size:.86rem; } footer { gap:12px; flex-direction:column; align-items:flex-start; } }