:root{--primary:#3b5bdb;--accent:#ffae05;--accent-light:#fff3cd;--text:#2d3436;--text-light:#636e72;--bg:#fafafa;--card-bg:#ffffff;--border:#e8ecf1;--shadow-sm:0 1px 3px rgba(0,0,0,0.04);--shadow-md:0 4px 16px rgba(0,0,0,0.06);--shadow-lg:0 8px 32px rgba(0,0,0,0.08);--radius-sm:8px;--radius:16px;--transition:0.25s cubic-bezier(0.4,0,0.2,1)}
*,::before,::after{box-sizing:border-box}
html{min-height:100%;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-touch-callout:none;touch-action:manipulation;background:var(--bg)}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Ubuntu,sans-serif;color:var(--text);font-size:1em;font-weight:400;line-height:1.6;margin:0;padding:0;-webkit-tap-highlight-color:transparent;background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{left:-100%}100%{left:200%}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-6px) rotate(1deg)}66%{transform:translateY(-3px) rotate(-1deg)}}
.fade-in-up{animation:fadeInUp 0.6s ease-out both}
.delay-1{animation-delay:0.1s}.delay-2{animation-delay:0.2s}.delay-3{animation-delay:0.3s}.delay-4{animation-delay:0.4s}
.bg-pattern{position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(170deg,#fef9f3 0%,#fdf4e8 30%,#fef9f3 60%,#fdf6ed 100%)}
.bg-pattern::before{content:'';position:absolute;inset:0;opacity:0.08;background-image:repeating-linear-gradient(30deg,transparent,transparent 30px,#e8c9a0 30px,#e8c9a0 31px),repeating-linear-gradient(-30deg,transparent,transparent 30px,#e8c9a0 30px,#e8c9a0 31px)}
.bg-ornament{position:fixed;pointer-events:none;z-index:0}
.bg-ornament.ornament-1{top:-40px;right:-30px;width:200px;height:200px;opacity:0.06;animation:float 20s ease-in-out infinite}
.bg-ornament.ornament-2{bottom:-30px;left:-30px;width:160px;height:160px;opacity:0.06;animation:float 18s ease-in-out infinite reverse}
.main{display:flex;flex-direction:column;flex-grow:1;min-height:100vh;position:relative;z-index:1}
.page{flex-grow:1;display:flex;flex-direction:column;position:relative}
.page-content{flex-grow:1;display:flex;flex-direction:column;position:relative}
.page-container{width:100%;max-width:640px;padding:0 20px;margin:0 auto}
@media(min-width:768px){.page-container{max-width:680px}}
.section{padding:28px 0}.section+.section{padding-top:0}
.block-item{margin-bottom:16px}.block-item:last-child{margin-bottom:0}
.avatar-card{text-align:center;padding:12px 0 8px}
.avatar-wrapper{display:inline-block;position:relative}
.profile-avatar{width:130px;height:130px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:var(--shadow-md);transition:var(--transition)}
.profile-avatar:hover{transform:scale(1.03);box-shadow:var(--shadow-lg)}
.avatar-badge{position:absolute;bottom:6px;right:6px;width:32px;height:32px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid #fff;font-size:14px;color:#fff;box-shadow:var(--shadow-sm)}
.heading-text{font-weight:800;text-transform:uppercase;font-size:26px;line-height:1.3;letter-spacing:-0.3px;color:#2d3436;text-align:center;margin:0}
.heading-text .highlight{color:var(--accent);position:relative;display:inline-block}
.heading-text .highlight::after{content:'';position:absolute;bottom:2px;left:0;right:0;height:8px;background:var(--accent-light);border-radius:4px;z-index:-1;opacity:0.6}
.tag-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.tag{display:inline-flex;align-items:center;gap:5px;padding:7px 16px;background:#fff;border:1px solid var(--border);border-radius:20px;font-size:13px;font-weight:500;color:var(--text);transition:var(--transition);box-shadow:var(--shadow-sm)}
.tag:hover{border-color:var(--primary);color:var(--primary);background:#f8f9ff;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.divider{display:flex;align-items:center;gap:14px;margin:8px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.divider-icon{width:36px;height:36px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:var(--shadow-sm);color:var(--accent);flex-shrink:0}
.info-card{background:var(--card-bg);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);border:1px solid var(--border);text-align:center;transition:var(--transition)}
.info-card:hover{box-shadow:var(--shadow-md);border-color:#dde}
.info-card p{color:var(--text-light);font-size:14px;line-height:1.7;margin:0}
.features-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.feature-item{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--card-bg);border-radius:var(--radius-sm);border:1px solid var(--border);transition:var(--transition);box-shadow:var(--shadow-sm)}
.feature-item:hover{border-color:var(--primary);background:#fafbff;transform:translateX(3px);box-shadow:var(--shadow-md)}
.feature-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.feature-icon.orange{background:#fff3e0}.feature-icon.blue{background:#e8ecff}.feature-icon.green{background:#e6f9e8}.feature-icon.purple{background:#f3e8ff}
.feature-text{font-size:15px;font-weight:500;color:var(--text)}
.detail-card{background:var(--card-bg);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.detail-card p{color:#4a5568;font-size:14px;line-height:1.8;margin:0 0 12px}
.detail-card p:last-child{margin-bottom:0}
.cta-wrapper{margin-top:8px}
.cta-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:64px;padding:16px 24px;background:linear-gradient(135deg,#3b5bdb 0%,#5b7bf5 100%);color:#fff;border:none;border-radius:var(--radius);font-size:17px;font-weight:700;cursor:pointer;text-decoration:none;position:relative;overflow:hidden;transition:var(--transition);box-shadow:0 4px 20px rgba(59,91,219,0.25)}
.cta-button:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(59,91,219,0.35)}
.cta-button:active{transform:translateY(0);box-shadow:0 2px 10px rgba(59,91,219,0.2)}
.cta-button::after{content:'';position:absolute;top:0;left:-100%;width:60px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);transform:skewX(-20deg);animation:shimmer 3s infinite}
.cta-icon{width:44px;height:44px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px}
.cta-text{text-align:left;flex:1}
.cta-title{font-size:17px;font-weight:700;line-height:1.2}
.cta-subtitle{font-size:13px;opacity:0.85;margin-top:3px;font-weight:400}
.cta-arrow{font-size:22px;opacity:0.7;flex-shrink:0;transition:var(--transition)}
.cta-button:hover .cta-arrow{transform:translateX(4px);opacity:1}
.image-block{text-align:center}
.image-card{display:inline-block;width:80px;height:80px;border-radius:var(--radius);background-size:cover;background-position:center;box-shadow:var(--shadow-md);border:3px solid #fff}
.footer{text-align:center;padding:32px 20px;opacity:0.6;font-size:13px;color:var(--text-light);transition:var(--transition)}
.footer:hover{opacity:0.9}
.footer a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--text);transition:var(--transition)}
.footer a:hover{color:var(--primary)}
.footer svg{fill:currentColor;opacity:0.7}
.stats-footer{text-align:center;padding:0 20px 16px;font-size:12px;color:var(--text-light);opacity:0.5}
@media(max-width:480px){html{font-size:14px}.page-container{padding:0 16px}.section{padding:20px 0}.heading-text{font-size:22px}.profile-avatar{width:100px;height:100px}.tag{font-size:12px;padding:5px 12px}.cta-button{min-height:56px;padding:12px 18px}.cta-title{font-size:15px}.cta-icon{width:36px;height:36px;font-size:16px}.feature-item{padding:10px 14px}.feature-icon{width:36px;height:36px;font-size:16px}.feature-text{font-size:14px}}