@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--color-primary: #FF3B5C;--color-accent: #FF5DAA;--color-success: #10B981;--color-warning: #F59E0B;--color-danger: #EF4444;--color-bg: #0F1115;--color-surface: #171A21;--color-surface-hover: #222630;--color-border: rgba(255, 255, 255, .08);--color-border-focus: rgba(255, 59, 92, .4);--color-text-primary: #FFFFFF;--color-text-secondary: #9CA3AF;--color-text-muted: #6B7280;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--radius-lg: 16px;--radius-md: 12px;--radius-sm: 8px;--shadow-premium: 0 8px 32px 0 rgba(0, 0, 0, .5);--shadow-glow: 0 0 20px rgba(255, 59, 92, .25);--shadow-glow-success: 0 0 20px rgba(16, 185, 129, .25);--shadow-glow-pink: 0 0 20px rgba(255, 93, 170, .3);--ease-f1: cubic-bezier(.16, 1, .3, 1);--transition-fast: .15s var(--ease-f1);--transition-normal: .3s var(--ease-f1)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-family);background-color:var(--color-bg);color:var(--color-text-primary);min-height:100vh;overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-surface);border-radius:var(--radius-sm);border:2px solid var(--color-bg)}::-webkit-scrollbar-thumb:hover{background:var(--color-surface-hover)}#app{min-height:100vh;display:flex;flex-direction:column}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}.navbar{height:80px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;background:#0f1115d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:100}.logo{font-weight:800;font-size:24px;color:var(--color-text-primary);text-decoration:none;display:flex;align-items:center;gap:6px;white-space:nowrap}.logo span{color:var(--color-primary)}.nav-links{display:flex;align-items:center;gap:24px}.nav-link{color:var(--color-text-secondary);text-decoration:none;font-weight:600;font-size:15px;transition:var(--transition-fast);white-space:nowrap}.nav-link:hover{color:var(--color-text-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;font-size:15px;font-weight:700;border-radius:var(--radius-lg);border:none;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;gap:8px;white-space:nowrap}.btn-primary{background-color:var(--color-primary);color:var(--color-text-primary);box-shadow:0 4px 12px #ff3b5c33}.btn-primary:hover{background-color:#ff5270;box-shadow:var(--shadow-glow)}.btn-primary:active{transform:scale(.97)}.btn-secondary{background-color:var(--color-surface);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:var(--color-surface-hover);border-color:#fff3}.btn-secondary:active{transform:scale(.97)}.btn-accent{background-color:var(--color-accent);color:var(--color-text-primary);box-shadow:0 4px 12px #ff5daa33}.btn-accent:hover{background-color:#ff75ba;box-shadow:var(--shadow-glow-pink)}.btn-accent:active{transform:scale(.97)}.card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-premium);transition:var(--transition-normal)}.card:hover{border-color:#ffffff26}.form-group{margin-bottom:20px}.form-label{display:block;font-size:14px;font-weight:500;color:var(--color-text-secondary);margin-bottom:8px}.input-field{width:100%;padding:14px 16px;background-color:#0f111599;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-family);font-size:15px;outline:none;transition:var(--transition-fast)}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.badge{display:inline-flex;align-items:center;padding:4px 10px;font-size:12px;font-weight:600;border-radius:var(--radius-sm);text-transform:uppercase}.badge-red{background-color:#ff3b5c26;color:var(--color-primary)}.badge-green{background-color:#10b98126;color:var(--color-success)}@keyframes heartbeat{0%{transform:scale(1)}14%{transform:scale(1.08)}28%{transform:scale(1)}42%{transform:scale(1.08)}70%{transform:scale(1)}}.pulse-heart{animation:heartbeat 1.4s infinite ease-in-out}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}.shake-animation{animation:shake .5s ease-in-out}.lang-selector{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-primary);padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;font-weight:600;outline:none;transition:var(--transition-fast)}.lang-selector:hover{border-color:#fff3}.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:flex-start}.editor-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.lobby-flex{display:flex;align-items:center;justify-content:center;gap:60px;flex-wrap:wrap}.report-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:flex-start}.hero-section{padding:80px 0;position:relative;overflow:hidden}.hero-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;background:radial-gradient(circle,#ff3b5c14,#0f111500 70%);z-index:-1;pointer-events:none}.hero-container{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}.hero-content{text-align:left}.hero-title{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.1;margin-bottom:24px;letter-spacing:-1px;background:linear-gradient(135deg,var(--color-text-primary) 30%,rgba(255,255,255,.6));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-subtitle{font-size:clamp(.95rem,2.5vw,1.15rem);color:var(--color-text-secondary);margin-bottom:40px;line-height:1.6}.hero-ctas{display:flex;gap:16px;justify-content:flex-start}.hero-visual{display:flex;justify-content:center;align-items:center;position:relative}.hero-image-wrapper{position:relative;border-radius:var(--radius-lg);padding:6px;background:linear-gradient(135deg,#ff3b5c40,#ff5daa1a 40%,#ffffff0d);box-shadow:0 20px 40px #00000080,0 0 30px #ff3b5c1f;border:1px solid rgba(255,255,255,.08);transition:transform .3s ease,box-shadow .3s ease;width:100%}.hero-image-wrapper:hover{transform:translateY(-4px) scale(1.005);box-shadow:0 25px 50px #0009,0 0 40px #ff3b5c33}.hero-image{display:block;width:100%;height:auto;border-radius:calc(var(--radius-lg) - 4px);object-fit:cover}.hero-pulse-indicator{position:absolute;bottom:20px;right:20px;background:#0f1115e6;border:1px solid var(--color-primary);color:var(--color-primary);padding:6px 12px;border-radius:var(--radius-sm);font-weight:800;font-size:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:.5px;box-shadow:0 0 15px #ff3b5c4d;animation:heart-pulse-badge 1s infinite alternate}.demo-section{position:relative;overflow:hidden}.demo-mockup-container{position:relative;max-width:900px;margin:0 auto;padding:10px;border-radius:var(--radius-lg);background:#ffffff05;border:1px solid rgba(255,255,255,.06);box-shadow:0 30px 60px #0009;transition:border-color .3s ease}.demo-mockup-container:hover{border-color:#ff5daa40}.mockup-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;height:80%;background:radial-gradient(circle,#ff5daa1a,#0f111500 80%);z-index:-1;pointer-events:none}.demo-mockup-image{display:block;width:100%;height:auto;border-radius:calc(var(--radius-lg) - 4px);transition:transform .5s ease}.demo-mockup-container:hover .demo-mockup-image{transform:scale(1.002)}@keyframes heart-pulse-badge{0%{transform:scale(1);box-shadow:0 0 8px #ff3b5c33}to{transform:scale(1.04);box-shadow:0 0 18px #ff3b5c80}}.section-title{font-size:28px;font-weight:800;text-align:center;margin-bottom:48px}.problem-grid,.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-bottom:60px}.problem-card{border-left:4px solid var(--color-danger)}.transform-visual{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:40px;margin-bottom:80px;overflow-x:auto}.transform-step{flex:1;min-width:150px;text-align:center;padding:20px;background:#0f111566;border-radius:var(--radius-md);border:1px solid var(--color-border);transition:all var(--transition-normal)}.transform-step:hover{transform:translateY(-5px);border-color:var(--color-primary);box-shadow:var(--shadow-glow)}.transform-arrow{font-size:24px;color:var(--color-text-muted);-webkit-user-select:none;user-select:none}.step-heartrate{font-size:28px;font-weight:800;color:var(--color-primary);margin-bottom:8px}.step-label{font-size:14px;color:var(--color-text-secondary)}.leaderboard-list{display:flex;flex-direction:column;gap:12px;margin-top:24px}.leaderboard-row{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:transform .6s cubic-bezier(.34,1.56,.64,1);will-change:transform}.row-left{display:flex;align-items:center;gap:16px}.row-rank{font-weight:800;font-size:18px;color:var(--color-text-secondary);width:24px}.row-rank-1{color:gold}.row-rank-2{color:silver}.row-rank-3{color:#cd7f32}.row-nickname{font-weight:600;font-size:16px}.row-right{display:flex;align-items:center;gap:20px}.row-score{font-weight:800;color:var(--color-text-primary)}.row-change{font-weight:600;font-size:14px;width:45px;text-align:right}.change-up{color:var(--color-success)}.change-down{color:var(--color-danger)}.change-none{color:var(--color-text-muted)}.play-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;flex:1;padding:16px;min-height:350px}.play-btn{border:none;border-radius:var(--radius-lg);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#fff;transition:transform .1s var(--ease-f1);position:relative;overflow:hidden}.play-btn:active{transform:scale(.95)}.btn-opt-A{background-color:#ff3b5c}.btn-opt-B{background-color:#0070f3}.btn-opt-C{background-color:#f5a623}.btn-opt-D{background-color:#00df89}.play-btn-text{font-size:14px;margin-top:8px;font-weight:600;opacity:.8}.podium-container{display:flex;justify-content:center;align-items:flex-end;gap:24px;height:300px;margin:60px 0}.podium-column{width:120px;background:var(--color-surface);border:1px solid var(--color-border);border-bottom:none;border-radius:var(--radius-md) var(--radius-md) 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:20px;position:relative;transition:height 1s var(--ease-f1)}.podium-1st{height:220px;border-color:gold;box-shadow:0 0 30px #ffd70026}.podium-2nd{height:170px;border-color:silver}.podium-3rd{height:130px;border-color:#cd7f32}.podium-name{position:absolute;top:-40px;font-weight:700;font-size:16px;text-align:center;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.podium-score{font-size:12px;color:var(--color-text-secondary);font-weight:600;margin-top:4px}.podium-medal{font-size:32px;font-weight:800;margin-bottom:12px}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999;overflow:hidden}.confetti-piece{position:absolute;width:10px;height:10px;background-color:var(--color-primary);opacity:.8;animation:fall 3s infinite linear}@keyframes fall{0%{transform:translateY(-10px) rotate(0)}to{transform:translateY(105vh) rotate(360deg)}}.toast{position:fixed;bottom:24px;right:24px;background:var(--color-surface);border-left:4px solid var(--color-primary);border-radius:var(--radius-sm);padding:16px 24px;box-shadow:var(--shadow-premium);display:flex;align-items:center;gap:12px;z-index:1000;transform:translateY(100px);opacity:0;transition:all .3s var(--ease-f1)}.toast.show{transform:translateY(0);opacity:1}@media (max-width: 768px){.navbar{height:70px;padding:0 16px}.navbar .container{padding:0}.logo{font-size:20px}.nav-links{gap:10px}.nav-links .nav-link{display:none}.btn{padding:8px 16px;font-size:13px}.hero-section{padding:40px 0}.hero-container{grid-template-columns:1fr!important;gap:32px;text-align:center}.hero-content{text-align:center}.hero-ctas{flex-direction:column;gap:12px;align-items:center;justify-content:center}.hero-ctas .btn{width:100%;max-width:280px}.hero-visual{margin-top:16px;order:2}.dashboard-grid,.editor-meta-grid,.report-grid{grid-template-columns:1fr!important;gap:20px}.lobby-flex{flex-direction:column;gap:32px}.transform-visual{flex-direction:column;gap:20px}.transform-arrow{transform:rotate(90deg);margin:5px 0}.play-grid{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr)}}@media (max-width: 480px){.navbar{height:64px}.logo{font-size:18px}.btn{padding:8px 12px;font-size:12px}.container{padding:0 16px}.card{padding:16px}}.footer{background-color:#0c0e12;border-top:1px solid var(--color-border);padding:60px 0 0;margin-top:auto;z-index:10}.footer-container{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px}.footer-links{display:flex;flex-direction:column;gap:10px;min-width:120px}.footer-link{color:var(--color-text-secondary);text-decoration:none;font-size:13px;transition:var(--transition-fast);font-weight:500}.footer-link:hover{color:var(--color-text-primary)}.footer-bottom{border-top:1px solid var(--color-border);padding:24px 0;background-color:#090a0d}@media (max-width: 768px){.footer-container{flex-direction:column;gap:32px}}