@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--deep-blue: #0a1d2b;--ocean-blue: #0d2b42;--teal: #26abd3;--bright-teal: #3cc3e6;--light-teal: #7ad4f0;--text-light: #e7f2f7;--text-dim: #b1c6d3;--glass-bg: rgba(13, 43, 66, .6);--glass-border: rgba(122, 212, 240, .2);--glow: 0 0 15px rgba(58, 195, 230, .5)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,sans-serif;background:linear-gradient(#0a1d2bd9,#0a1d2be6),url(/bg.png) center/cover fixed;color:var(--text-light);min-height:100vh;overflow-x:hidden;position:relative}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(58,195,230,.15) 0%,transparent 40%),radial-gradient(circle at 80% 70%,rgba(38,171,211,.1) 0%,transparent 40%);pointer-events:none;z-index:-1}.wrapper{display:flex;flex-direction:column;min-height:100vh}.header{position:fixed;top:0;left:0;right:0;height:70px;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--glass-bg);border-bottom:1px solid var(--glass-border);box-shadow:0 4px 20px #0003}.header-inner{width:100%;max-width:1200px;display:flex;justify-content:space-between;align-items:center;padding:0 24px}.brand{font-weight:700;color:var(--bright-teal);font-size:1.25rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;background:linear-gradient(90deg,var(--bright-teal),var(--light-teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.brand:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--bright-teal),var(--light-teal));transition:width .3s ease}.brand:hover:after{width:100%}.nav{display:flex;gap:24px}.nav a{color:var(--text-light);text-decoration:none;font-weight:500;font-size:.95rem;position:relative;padding:6px 0;transition:all .3s ease}.nav a:after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--bright-teal);transition:width .3s ease}.nav a:hover{color:var(--bright-teal)}.nav a:hover:after{width:100%}.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 20px 80px;position:relative;overflow:hidden}.title{font-size:3.5rem;font-weight:800;margin-bottom:20px;background:linear-gradient(135deg,var(--bright-teal) 0%,var(--light-teal) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:0;transform:translateY(20px);animation:fadeUpIn .8s forwards .3s;position:relative;z-index:2}.desc{font-size:1.2rem;max-width:600px;margin-bottom:40px;color:var(--text-dim);line-height:1.6;opacity:0;transform:translateY(20px);animation:fadeUpIn .8s forwards .5s;position:relative;z-index:2}.buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:30px;opacity:0;transform:translateY(20px);animation:fadeUpIn .8s forwards .7s;position:relative;z-index:2}.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border:none;border-radius:12px;background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-light);font-weight:600;cursor:pointer;text-decoration:none;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 15px #0000001a;border:1px solid var(--glass-border)}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(58,195,230,.2),transparent);transition:all .6s ease}.btn:hover{transform:translateY(-3px);box-shadow:var(--glow),0 6px 20px #0003;background:#26abd333}.btn:hover:before{left:100%}.btn-icon{width:20px;height:20px;transition:all .3s ease}.btn:hover .btn-icon{transform:scale(1.2)}.copybtn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border:none;border-radius:12px;background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-light);font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 15px #0000001a;border:1px solid var(--glass-border);opacity:0;transform:translateY(20px);animation:fadeUpIn .8s forwards .9s}.copybtn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(58,195,230,.2),transparent);transition:all .6s ease}.copybtn:hover{transform:translateY(-3px);box-shadow:var(--glow),0 6px 20px #0003;background:#26abd333}.copybtn:hover:before{left:100%}.copybtn.copied{background:#2ecc7133;box-shadow:0 0 15px #2ecc7180}.copy-icon{width:18px;height:18px;filter:brightness(0) invert(1);transition:all .3s ease}.copybtn:hover .copy-icon{transform:scale(1.2)}.footer{position:fixed;bottom:0;left:0;right:0;height:50px;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--glass-bg);font-size:.9rem;color:var(--text-dim);border-top:1px solid var(--glass-border);box-shadow:0 -4px 20px #0000001a;z-index:1000}@keyframes fadeUpIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{box-shadow:0 0 #3ac3e666}70%{box-shadow:0 0 0 10px #3ac3e600}to{box-shadow:0 0 #3ac3e600}}.floating{position:absolute;border-radius:50%;background:#3ac3e61a;animation:float 20s infinite linear;z-index:1}@keyframes float{0%{transform:translate(0) rotate(0)}25%{transform:translate(20px,40px) rotate(90deg)}50%{transform:translateY(80px) rotate(180deg)}75%{transform:translate(-20px,40px) rotate(270deg)}to{transform:translate(0) rotate(360deg)}}@media (max-width: 768px){.title{font-size:2.5rem}.desc{font-size:1rem;padding:0 15px}.buttons{flex-direction:column;width:100%;max-width:300px}.btn,.copybtn{width:100%}.header-inner{padding:0 16px}.nav{gap:16px}.brand{font-size:1.1rem}}@media (max-width: 480px){.title{font-size:2rem}.header-inner{flex-direction:column;justify-content:center;gap:8px;padding:8px 16px}.header{height:80px}.main{padding:100px 15px 80px}}.hero-container{position:relative;margin-top:40px;max-width:800px;width:100%;animation:fadeUpIn .8s forwards .8s;opacity:0;transform:translateY(20px);z-index:2}.hero-image{width:50%;height:auto;border-radius:16px;box-shadow:0 10px 30px #0000004d,var(--glow);border:1px solid var(--glass-border)}.hero-content-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 32px;border:none;border-radius:16px;background:linear-gradient(135deg,var(--teal) 0%,var(--bright-teal) 100%);color:#fff;font-weight:700;font-size:1.2rem;cursor:pointer;text-decoration:none;transition:all .3s ease;box-shadow:0 6px 20px #0000004d,0 0 25px #3ac3e699;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:3}.hero-btn-icon{font-size:24px;transition:all .3s ease}.hero-content-btn:hover .hero-btn-icon{transform:scale(1.2)}.hero-container:after{content:"";position:absolute;top:0;left:25%;width:50%;height:100%;background:#0a1d2b4d;border-radius:16px;z-index:1}@media (max-width: 900px){.hero-container{max-width:90%}.hero-content-btn{font-size:.85rem;padding:10px 14px;gap:6px}.hero-btn-icon{font-size:14px}}@media (max-width: 600px){.hero-content-btn{font-size:.7rem;padding:8px 12px;flex-direction:column;gap:4px;border-radius:8px}.hero-btn-icon{font-size:12px}}@media (max-width: 480px){.hero-content-btn{font-size:.65rem;padding:6px 10px;gap:3px}.hero-btn-icon{font-size:10px}}@media (max-width: 400px){.hero-content-btn{font-size:.6rem;padding:5px 8px;gap:2px}.hero-btn-icon{font-size:9px}}.header-right{display:flex;align-items:center;gap:20px}.header-copy-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border:none;border-radius:8px;background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-light);font-weight:500;font-size:.9rem;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 2px 10px #0000001a;border:1px solid var(--glass-border)}.header-copy-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(58,195,230,.2),transparent);transition:all .6s ease}.header-copy-btn:hover{background:#26abd333;box-shadow:var(--glow)}.header-copy-btn:hover:before{left:100%}.header-copy-btn.copied{background:#2ecc7133;box-shadow:0 0 10px #2ecc7180}.header-copy-icon{font-size:14px;transition:all .3s ease}.header-copy-btn:hover .header-copy-icon{transform:scale(1.2)}@media (max-width: 768px){.header-right{gap:12px}.header-copy-btn{padding:6px 12px;font-size:.8rem}.header-copy-icon{font-size:12px}}@media (max-width: 480px){.header-inner{flex-direction:column;gap:8px;padding:8px 16px}.header{height:auto;min-height:70px}.header-right{width:100%;justify-content:center}.header-copy-btn{padding:6px 10px}.header-copy-btn span{display:none}.header-copy-btn{padding:8px;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center}}.content-wrapper{background:linear-gradient(135deg,var(--deep-blue) 0%,var(--ocean-blue) 100%)}.content-main{flex:1;display:flex;align-items:center;justify-content:center;padding:100px 20px 80px;min-height:100vh}.content-container{display:flex;flex-direction:column;align-items:center;gap:30px;max-width:1200px;width:100%}.content-display{position:relative;width:100%;max-width:800px;border-radius:20px;overflow:hidden;box-shadow:0 20px 40px #0000004d,var(--glow);border:1px solid var(--glass-border);background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.content-media{width:100%;height:auto;max-height:70vh;object-fit:contain;display:block}.content-overlay{position:absolute;bottom:0;left:0;right:0;padding:30px;background:linear-gradient(transparent,#0a1d2bcc);color:#fff;display:flex;justify-content:space-between;align-items:flex-end}.content-info{flex:1}.content-title{font-size:1.5rem;font-weight:700;margin-bottom:8px;color:var(--bright-teal)}.content-description{font-size:1rem;color:var(--text-light);margin:0;line-height:1.4}.content-controls{display:flex;gap:15px;align-items:center}.control-btn{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-btn:hover{background:#3ac3e64d;transform:scale(1.1);box-shadow:var(--glow)}.content-navigation{display:flex;flex-direction:column;align-items:center;gap:20px}.nav-arrow{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.nav-arrow:hover{background:#3ac3e64d;transform:scale(1.1);box-shadow:var(--glow)}.content-counter{background:var(--glass-bg);padding:8px 16px;border-radius:20px;color:var(--text-light);font-weight:600;border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (max-width: 900px){.content-overlay{padding:20px;flex-direction:column;align-items:flex-start;gap:15px}.content-controls{align-self:flex-end}.content-title{font-size:1.3rem}}@media (max-width: 600px){.content-main{padding:80px 15px 60px}.content-display{border-radius:15px}.content-overlay{padding:15px}.content-title{font-size:1.1rem}.content-description{font-size:.9rem}.control-btn{width:40px;height:40px;font-size:1rem}.nav-arrow{width:50px;height:50px;font-size:1.2rem}}@media (max-width: 400px){.content-overlay{padding:10px}.content-title{font-size:1rem}.content-description{font-size:.8rem}}.content-wrapper:focus{outline:none}.nav-arrow:focus,.control-btn:focus{outline:2px solid var(--bright-teal);outline-offset:2px}.content-container{display:flex;align-items:center;gap:30px;max-width:1200px;width:100%;position:relative}.content-navigation-right{display:flex;flex-direction:column;align-items:center;gap:20px;position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:10}@media (max-width: 900px){.content-container{flex-direction:column}.content-navigation-right{position:static;transform:none;flex-direction:row;margin-top:20px}}.content-display{flex:1;max-width:800px;position:relative;width:100%;border-radius:20px;overflow:hidden;box-shadow:0 20px 40px #0000004d,var(--glow);border:1px solid var(--glass-border);background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (max-width: 480px){.header-copy-btn{width:100%;max-width:80px;padding:10px 14px;font-size:.85rem;border-radius:10px}.header-copy-btn span{display:inline}}
