*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI','PingFang SC',Roboto,'Helvetica Neue',sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 20% 50%,#fef0f0 0%,#f5e0e0 100%);padding:24px;position:relative;overflow-x:hidden}
.bg-orb{position:fixed;border-radius:50%;filter:blur(120px);opacity:0.30;pointer-events:none;z-index:0;animation:orbFloat 18s ease-in-out infinite alternate}
.bg-orb--1{width:600px;height:600px;background:radial-gradient(circle,#f28b82,#c74646);top:-200px;right:-100px;animation-delay:0s}
.bg-orb--2{width:500px;height:500px;background:radial-gradient(circle,#e57373,#c74646);bottom:-150px;left:-100px;animation-delay:-6s}
.bg-orb--3{width:300px;height:300px;background:radial-gradient(circle,#ffab91,#c74646);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-12s;opacity:0.15}
@keyframes orbFloat{0%{transform:translate(0,0) scale(1)}
    33%{transform:translate(40px,-30px) scale(1.1)}
    66%{transform:translate(-20px,40px) scale(0.9)}
    100%{transform:translate(30px,20px) scale(1.05)}
}
.container{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:15%;flex-wrap:wrap;max-width:1200px;width:100%;padding:40px 20px;padding-bottom:5%}
.phone-wrapper{flex:0 0 auto;perspective:1200px}
.phone{position:relative;width:330px;height:600px;background:rgba(255,255,255,0.70);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border-radius:48px;padding:16px;box-shadow:0 30px 80px rgba(199,70,70,0.20),0 10px 30px rgba(0,0,0,0.06),inset 0 0 0 1px rgba(255,255,255,0.70),inset 0 -2px 4px rgba(0,0,0,0.04);transition:transform 0.6s cubic-bezier(0.23,1,0.32,1);animation:phoneFloat 5s ease-in-out infinite}
.phone::before{content:'';position:absolute;inset:0;border-radius:48px;padding:2px;background:linear-gradient(135deg,rgba(255,255,255,0.80),rgba(255,255,255,0.10));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:120px;height:28px;background:rgba(0,0,0,0.06);border-radius:0 0 20px 20px;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;gap:8px;z-index:5}
.phone-notch .camera{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#c74646,#8b2c2c);box-shadow:inset 0 1px 2px rgba(255,255,255,0.3),0 0 8px rgba(199,70,70,0.3)}
.phone-notch .speaker{width:40px;height:4px;border-radius:4px;background:rgba(0,0,0,0.10)}
.phone-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:linear-gradient(145deg,#fef6f6,#fceeee);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:20px}
.phone-screen::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(199,70,70,0.08),transparent 70%);pointer-events:none}
.logo-container{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px}
.logo{width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg,#c74646,#e53935,#ff8a65);background-size:300% 300%;animation:gradientMove 6s ease-in-out infinite;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 48px rgba(199,70,70,0.35),0 0 0 1px rgba(255,255,255,0.6),inset 0 -4px 12px rgba(0,0,0,0.08);transition:transform 0.4s ease;animation:logoPulse 3s ease-in-out infinite,gradientMove 6s ease-in-out infinite}
.logo:hover{transform:scale(1.04) rotate(-2deg)}
.logo-icon{font-size:52px;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,0.15);letter-spacing:2px;font-weight:300;line-height:1;user-select:none}
@keyframes gradientMove{0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}@keyframes logoPulse{0%,100%{box-shadow:0 16px 48px rgba(199,70,70,0.35),0 0 0 1px rgba(255,255,255,0.6)}
     50%{box-shadow:0 20px 60px rgba(199,70,70,0.55),0 0 0 2px rgba(255,255,255,0.8),0 0 80px rgba(199,70,70,0.20)}
 }
.slogan{position:relative;z-index:2;text-align:center}
.slogan h1{font-size:28px;font-weight:700;letter-spacing:2px;color:#C74646;animation:gradientMove 5s ease-in-out infinite;line-height:1.2}
.slogan p{font-size:14px;color:rgba(45,52,54,0.55);letter-spacing:6px;margin-top:10px;font-weight:300;text-transform:uppercase}
.slogan .tagline{display:inline-block;margin-top:5px;padding:8px 18px;border-radius:20px;background:rgba(199,70,70,0.10);border:1px solid rgba(199,70,70,0.20);font-size:12px;color:#c74646;letter-spacing:2px;font-weight:500;backdrop-filter:blur(4px)}
.phone-home{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:100px;height:4px;border-radius:4px;background:rgba(0,0,0,0.08);z-index:5;backdrop-filter:blur(4px)}
.phone-home::after{content:'';position:absolute;inset:0;border-radius:4px;background:rgba(0,0,0,0.04);animation:homePulse 2.5s ease-in-out infinite}
@keyframes homePulse{0%,100%{opacity:1}
    50%{opacity:0.4}
}@keyframes phoneFloat{0%,100%{transform:translateY(0px) rotateX(2deg) rotateY(-2deg)}
     50%{transform:translateY(-16px) rotateX(0deg) rotateY(2deg)}
 }.qr-wrapper{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:28px}
.qr-card{position:relative;background:rgba(255,255,255,1);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border-radius:32px;padding:32px;box-shadow:0 30px 80px rgba(199,70,70,0.15),0 8px 28px rgba(0,0,0,0.04),inset 0 0 0 1px rgba(255,255,255,0.60);transition:transform 0.4s ease,box-shadow 0.4s ease;animation:cardFloat 6s ease-in-out infinite}
.qr-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 40px 100px rgba(199,70,70,0.25),0 8px 28px rgba(0,0,0,0.06)}
@keyframes cardFloat{0%,100%{transform:translateY(0px)}
    50%{transform:translateY(-10px)}
}.qr-container{position:relative;width:200px;height:200px;border-radius:16px;overflow:hidden;background:#ffffff;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.04)}
.qr-img{width:100%;height:100%;object-fit:cover;display:block}
.scan-line{position:absolute;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,rgba(199,70,70,0.7),rgba(255,138,101,0.7),transparent);filter:blur(1px);box-shadow:0 0 20px rgba(199,70,70,0.3);animation:scanMove 2.8s ease-in-out infinite;pointer-events:none;z-index:10}
@keyframes scanMove{0%{top:4%;opacity:0}
    10%{opacity:1}
    90%{opacity:1}
    100%{top:92%;opacity:0}
}
.i-logo img{display: block;width: 75%;margin: 0 auto;}
.qr-corner{position:absolute;width:20px;height:20px;border:3px solid rgba(199,70,70,0.30);pointer-events:none;z-index:5}
.qr-corner--tl{top:6px;left:6px;border-right:none;border-bottom:none;border-radius:4px 0 0 0}
.qr-corner--tr{top:6px;right:6px;border-left:none;border-bottom:none;border-radius:0 4px 0 0}
.qr-corner--bl{bottom:6px;left:6px;border-right:none;border-top:none;border-radius:0 0 0 4px}
.qr-corner--br{bottom:6px;right:6px;border-left:none;border-top:none;border-radius:0 0 4px 0}
.qr-text{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.qr-text .main{font-size:18px;font-weight:600;color:#2d3436;letter-spacing:2px}
.qr-text .main span{background:linear-gradient(135deg,#c74646,#e53935);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.qr-text .sub{font-size:13px;color:rgba(45,52,54,0.9);letter-spacing:4px;font-weight:300}
.qr-arrow{display:inline-block;animation:arrowBounce 1.8s ease-in-out infinite;font-size:20px;color:#c74646;margin-left:4px}
@keyframes arrowBounce{0%,100%{transform:translateX(0)}
    50%{transform:translateX(6px)}
}
.footer{position:fixed;bottom:0;left:0;right:0;text-align:center;padding:20px 24px 24px;background:rgba(255,255,255,0.4);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border-top:1px solid rgba(255,255,255,0.40);z-index:20}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:rgba(45,52,54,0.8);letter-spacing:0.5px}
.footer-inner .sep{color:rgba(45,52,54,0.5);font-weight:100}
.footer-inner a{color:rgba(45,52,54,0.8);text-decoration:none;transition:color 0.3s ease;border-bottom:1px dotted transparent}
.footer-inner a:hover{color:#c74646;text-decoration: underline;}
@media (max-width:860px){
    .container{gap:50px;padding:20px 16px}
    .phone{width:260px;height:520px;border-radius:40px}
    .phone-screen{border-radius:28px}
    .phone-notch{width:100px;height:24px;top:10px}
    .logo{width:90px;height:90px}
    .logo-icon{font-size:42px}
    .slogan h1{font-size:24px}
    .slogan p{font-size:12px;letter-spacing:4px}
    .qr-card{padding:24px}
    .qr-container{width:170px;height:170px}
}
@media (max-width:640px){
    .container{flex-direction:column;gap:40px;padding-top:20px;padding-bottom:100px}
    .phone{width:220px;height:440px;border-radius:34px;padding:12px}
    .phone-screen{border-radius:24px;padding:14px}
    .phone-notch{width:80px;height:20px;top:8px}
    .phone-notch .camera{width:6px;height:6px}
    .phone-notch .speaker{width:30px;height:3px}
    .logo{width:74px;height:74px}
    .logo-icon{font-size:34px}
    .slogan h1{font-size:20px}
    .slogan p{font-size:10px;letter-spacing:3px}
    .slogan .tagline{font-size:10px;padding:3px 14px}
    .phone-home{width:70px;height:3px;bottom:12px}
    .qr-card{padding:20px;border-radius:24px}
    .qr-container{width:150px;height:150px}
    .qr-text .main{font-size:15px}
    .qr-text .sub{font-size:11px}
    .footer{padding:14px 16px 18px}
    .footer-inner{font-size:10px;gap:10px}
    .footer-inner .sep{display:none}
}
@media (max-width:380px){
    .phone{width:190px;height:380px;border-radius:28px;padding:10px}
    .phone-screen{border-radius:20px;padding:10px}
    .phone-notch{width:64px;height:16px;top:6px}
    .logo{width:60px;height:60px}
    .logo-icon{font-size:28px}
    .slogan h1{font-size:17px}
    .qr-container{width:130px;height:130px}
    .qr-card{padding:16px}
}