:root{--heading-color:#fff;--text-color:rgba(255,255,255,0.7);--border-color:rgba(255,255,255,0.1);--hover-color:rgba(230,244,255,0.14);--accent-color:#128bfd;--bg-dark:#1a1a1a}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background-color:#111;color:var(--text-color);line-height:1.5;min-height:100vh;padding-top:60px;background-image:radial-gradient(circle at 0% 0%,rgba(29,78,216,0.25) 0%,transparent 50%),radial-gradient(circle at 100% 0%,rgba(6,182,212,0.25) 0%,transparent 50%);background-attachment:fixed}
.nav {position: fixed; top: 0; left: 0; right: 0; backdrop-filter: blur(5px); border-bottom: 1px solid var(--border-color); padding: .5rem; z-index: 1000; background: rgba(255, 255, 255, 0.16); text-shadow: 2px 2px 2px #000;}
.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 1rem}
.nav-logo{height:40px;width:auto;margin-right:2rem}
.nav-links a {color: var(--text-color);text-decoration: none;text-transform: uppercase;font-size: 0.875rem;letter-spacing: 0.05em;transition: all 0.3s ease;padding: 0.5rem 1rem;position: relative;}
.nav-links a::before,.nav-links a::after{content:'';position:absolute;top:0;height:100%;width:1px;background-color:#00b8ff;transition:all 0.3s ease;transform:scaleY(0);box-shadow: 0 0 8px #00b8ff}
.nav-links a::before{left:0;transform-origin:top}
.nav-links a::after{right:0;transform-origin:bottom}
.nav-links a:hover {color: #00b8ff;background: linear-gradient(90deg, transparent, rgba(0,184,255,0.1), transparent);background-position: 0 0;box-shadow: 0 0 15px rgba(0,184,255,0.1);background-size: 300% 100%;background-position: 100% 0;}
.nav-links a:hover::before,.nav-links a:hover::after{transform:scaleY(1)}
.login-link {color: #fff;text-decoration: none;font-weight: 500;padding: 0.5rem 1rem;border-radius: 4px;border: 1px solid rgba(255, 255, 255, 0.1);transition: all 0.3s ease;position: relative;overflow: hidden;min-width: 90px;text-align: center;display: inline-block;}
.login-link::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,184,255,0.2),transparent);transition:left 0.3s ease}
.login-link:hover{border-color:#00b8ff;color:#00b8ff}
.login-link:hover::before{left:100%}
.logo-container{text-align:center;padding:2rem 0}
.logo{max-width:440px;width:90%;height:auto}
@media (max-width: 768px) {.logo-container {padding: 1rem 0;}.logo {max-width: 280px;width: 85%;}}
.section-header{text-align:center;margin:2rem auto 4rem;max-width:900px;padding:0 1rem}
.section-header h1{font-family:'Manrope',sans-serif;font-size:3rem;font-weight:500;color:var(--heading-color);margin-bottom:1.5rem;line-height:1.2}
.section-header p{font-size:1.1rem;line-height:1.6;color:var(--text-color);opacity:0.8;text-align:justify;font-weight: 300;}
@media (max-width:768px){.section-header h1{font-size:2.25rem}.section-header p br{display:none}.faq-section .faq-answer p,.feature-description,.info-content p,.plan-description,.section-header p{text-align:left!important}.section-header{padding:0 1.5rem}.section-header p{font-size:1rem;line-height:1.6}}

.pricing-container{max-width:1200px;width:100%;margin:0 auto;padding:2rem;}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2rem 0}
.pricing-card{background:linear-gradient(to bottom,rgba(255,255,255,0.05),rgba(255,255,255,0.02));border-radius:8px;border:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden;position:relative}

.pricing-card{transition:all 0.3s ease;position:relative;z-index:1;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}
.pricing-card:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgba(0,0,0,0.2)}
.pricing-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at center,rgba(18,139,253,0.15),transparent);opacity:0;transition:opacity 0.3s ease;z-index:-1;border-radius:8px}
.pricing-card:hover::before{opacity:1}
.pricing-card.featured .cta-button{background:linear-gradient(90deg,#32A64F 0%,#00668E 70%,#32A64F 100%);background-size:200% auto;transition:background-position 0.3s ease;color:var(--heading-color);position:relative;overflow:hidden;animation:gradientFlow 2s linear infinite;text-shadow:1px 1px 1px #000}
.pricing-card.featured{background: linear-gradient(195deg, #1a3a5f 0%, #0d1b2a 100%);box-shadow:0 0 20px rgba(18,139,253,0.15)}
.card-header{padding:1.2rem;border-bottom:1px solid var(--border-color)}
.plan-name{font-family:'Manrope',sans-serif;color:var(--heading-color);font-size:1.25rem;font-weight:700;margin-bottom:0.75rem}
.plan-description{font-size:0.875rem;opacity:0.8}
.price-container{padding:1.4rem;border-bottom:1px solid var(--border-color);height:131px}
.price{font-family:'Manrope',sans-serif;font-size:2.75rem;color:var(--heading-color);font-weight:500;display:flex;align-items:flex-start;line-height:1}
.price-currency{font-size:1.375rem;margin-right:0.25rem;margin-top:0.375rem}
.price-period{font-size:0.875rem;margin-left:0.5rem;margin-top:0.5rem;opacity:0.7}
.billing-info{font-size:0.75rem;margin-top:0.5rem;opacity:0.6}
.features-list{padding:1.5rem;flex-grow:1;display:flex;flex-direction:column}
.features-title{text-transform:uppercase;font-size:0.625rem;letter-spacing:0.1em;margin-bottom:1rem;color:var(--heading-color);font-weight:600}
.feature-item{display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem;font-size:0.75rem}
.feature-item svg{width:16px;height:16px;color:var(--accent-color);flex-shrink:0}
.cta-button{margin:1rem 1.5rem 1.5rem;padding:0.875rem;border-radius:6px;background: linear-gradient(90deg, #2D3391 0%, #00818E 50%, #2D913D 100%);background-size: 200% auto;color:var(--heading-color);font-weight:500;text-align:center;text-decoration:none;transition:all 0.3s ease;cursor:pointer;text-shadow: 1px 1px 1px #000;}
.cta-button:hover{background-position: right center;}}
@media (max-width:1200px){.pricing-grid{grid-template-columns:repeat(2,1fr);max-width:800px}} @media (max-width:768px){.pricing-grid{grid-template-columns:1fr;max-width:400px;margin:2rem auto}.nav-links{display:none}.nav-container{justify-content:flex-end}}
@media (max-width:768px){.login-link{font-size:0.875rem}}

.features-section{max-width:1200px;margin:4rem auto;padding:0 2rem}
.features-grid{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:50px 0;gap:30px}
.feature-box{-ms-flex-preferred-size:calc(33.33333% - 20px);flex-basis:calc(33.33333% - 20px);margin:0;overflow:hidden;border-radius:28px;position:relative}
.feature-box:hover .feature-box-link .feature-bg{-webkit-transform:scale(10);-ms-transform:scale(10);transform:scale(10)}
.feature-box:hover .feature-title,.feature-box:hover .feature-description{color:#000}
.feature-box:hover .feature-icon{transform:scale(2);top:50%;right:15%;opacity:0.3}
.feature-box:hover .feature-icon i{color:rgba(0,0,0,0.7)}
.feature-box-link{display:block;padding:30px 20px;background-color:rgba(255,255,255,0.02);overflow:hidden;position:relative;min-height:200px;cursor:default}
.feature-box-link:hover,.feature-box-link:hover .feature-description{text-decoration:none;color:#FFF}
.feature-box-link:hover .feature-bg{-webkit-transform:scale(10);-ms-transform:scale(10);transform:scale(10)}
.feature-box-link:hover .feature-icon{transform:scale(7);top:50%;right:15%;opacity:0.3}
.feature-box-link:hover .feature-icon i{color:rgba(0,0,0,0.7)}
.feature-box-link:hover .feature-title,.feature-box-link:hover .feature-description{color:#000}
.feature-bg{height:128px;width:128px;z-index:1;position:absolute;top:-75px;right:-75px;border-radius:16%;-webkit-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}
.feature-icon{position:absolute;top:4px;right:4px;width:45px;height:45px;display:flex;align-items:center;justify-content:center;z-index:2}
.feature-icon i{font-size:1.5rem;color:white;transition:all 0.5s ease}
.feature-title{min-height:40px;margin:0 0 15px;font-family:'Manrope',sans-serif;font-weight:600;font-size:1.125rem;color:#FFF;z-index:2;position:relative;font-weight: 300;}
.feature-description{color:var(--text-color);font-size:0.875rem;line-height:1.6;z-index:2;position:relative;transition:color .5s ease}
.feature-box:nth-child(6n+1) .feature-bg{background-color:#00a1b9}
.feature-box:nth-child(6n+2) .feature-bg{background-color:#00b99f}
.feature-box:nth-child(6n+3) .feature-bg{background-color:#9e5fd9}
.feature-box:nth-child(6n+4) .feature-bg{background-color:#c68080}
.feature-box:nth-child(6n+5) .feature-bg{background-color:#8fc680}
.feature-box:nth-child(6n+6) .feature-bg{background-color:#007cb9}
.feature-href{color:#5698d2;text-decoration:none}
.tooltiplink{position:relative;display:inline-block}
.tooltiplink:hover::after{content:attr(data-title);background-color:#2f5b82;text-shadow:1px 1px 2px #000;color:#fff;padding:5px;border-radius:4px;font-size:11px;line-height:14px;position:absolute;bottom:-25px;left:0;right:0;width:max-content;margin-left:-35px;margin-right:auto;white-space:nowrap;z-index:1000;pointer-events:none}
@media only screen and (max-width:979px){.feature-box{-ms-flex-preferred-size:calc(50% - 15px);flex-basis:calc(50% - 15px)}}
@media only screen and (max-width:639px){.feature-box{-ms-flex-preferred-size:100%;flex-basis:100%}.feature-box-link{padding:22px 40px}}

.slider-container{max-width:800px;margin:3rem auto;position:relative;padding:0 1rem;margin-bottom: 0}
.feature-slider{background: linear-gradient(195deg, #1a3a5f 0%, #0d1b2a 100%);border-radius:16px;padding:2.5rem;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(99,102,241,0.2),0 0 1px rgba(255,255,255,0.1);height:80px;display:flex;align-items:center;justify-content:center}
.feature-slider:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(255,255,255,0.1),rgba(255,255,255,0));border-radius:16px}
.feature-slide{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.8s ease, visibility 0.8s}
.feature-slide.active{opacity:1;visibility:visible}
.feature-text{font-family:'Poiret One',cursive;color:white;font-size:2.12rem;text-align:center;padding:0 1rem;position:relative;text-shadow:0 2px 4px rgba(0,0,0,0.2)}
.slider-dots{display:flex;justify-content:center;gap:0.5rem;margin-top:1rem}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:all 0.3s ease}
.dot.active{background:white;transform:scale(1.2)}
@media (max-width:768px){.feature-text{font-size:1.7rem} .feature-icon{font-size:100px}}

.info-section{max-width:1170px;margin:4rem auto;padding:0 1rem}
.info-content{background:rgba(255,255,255,0.02);backdrop-filter:blur(10px);border-radius:16px;padding:2rem;box-shadow:0 4px 24px rgba(0,0,0,0.1)}
.info-content p{font-family:'Inter',sans-serif;color:var(--text-color);font-size:1.0rem;line-height:1.8;margin:0;text-align:justify;font-weight: 300}
.info-content p span{font-size:1.6rem;color:#71d7ff}
.faq-section{max-width:900px;width:100%;margin:4rem auto;padding:0 1rem}
.faq-section .section-header{text-align:center;margin-bottom:3rem}
.faq-section .section-header h2{font-family:'Manrope',sans-serif;font-size:2.5rem;color:var(--heading-color);margin:0 0 1rem}
.faq-section .section-header p{font-family:'Inter',sans-serif;color:var(--text-color);font-size:1.125rem;line-height:1.6;margin:0}
.faq-section .faq-card{margin:2rem 0;border-radius:16px;backdrop-filter:blur(10px);box-shadow:0 4px 24px rgba(0,0,0,0.1)}
.faq-section .faq-item{position:relative;font-family:'Inter',sans-serif;transition:all 0.3s;border-radius:12px;overflow:hidden;background:transparent;border-bottom:1px solid #333}
.faq-section .faq-item.selected{transform:scale(1.02);box-shadow:0 8px 30px rgba(99,102,241,0.2)}
.faq-section .faq-question{position:relative;background:rgba(99,102,241,0.1);padding:1.2rem 4rem 1.2rem 2rem;margin:0;font-size:1.125rem;line-height:1.5;color:var(--heading-color);overflow:hidden;transition:all 0.3s;font-family:'Manrope',sans-serif;font-weight:100;text-shadow: 2px 2px 2px #000;letter-spacing: 0.5px}
.faq-section .faq-item.selected .faq-question{background:linear-gradient(90deg,#2D3391 0%,#00818E 50%,#2D913D 100%);background-size:200% auto;transition:all 0.3s ease} 
.faq-section .faq-item.selected .faq-question:hover{background-position:right center}
.faq-section .faq-question:before,.faq-section .faq-question:after{content:"";position:absolute;right:1.5rem;top:50%;width:16px;height:2px;background:var(--heading-color);transition:transform 0.3s}
.faq-section .faq-question:hover{cursor:pointer;background:rgba(99,102,241,0.15)}
.faq-section .faq-question:after{transform:rotate(90deg)}
.faq-section .faq-item.selected .faq-question:before{transform:rotate(45deg)}  
.faq-section .faq-item.selected .faq-question:after{transform:rotate(-45deg)}
.faq-section .faq-answer{opacity:0;transform:translateY(-10px);transition:all 0.3s;padding:0 2rem;background:rgba(255,255,255,0.02)}
.faq-section .faq-item.selected .faq-answer{opacity:1;transform:translateY(0)}
.faq-section .faq-answer p{padding:1.5rem 0;margin:0;font-size:1rem;line-height:1.7;color:var(--text-color);text-align: justify;font-weight: 300;}
.faq-section [data-accordion-element-content]{height:0;overflow:hidden;transition:height 0.5s}
.faq-section .faq-item.selected [data-accordion-element-content]{height:auto}
@media (max-width:768px){.faq-section .section-header h2{font-size:2rem}.faq-section .faq-card{margin:1rem 0}.faq-section .faq-question{padding:1.25rem 3.5rem 1.25rem 1.5rem;font-size:1rem}}

.copyright,.footer-links a{font-size:.875rem;font-weight:300;color:var(--text-color)}
.footer{margin-top:4.1rem;padding:2rem 1rem;}
.footer-content{max-width:1200px;margin:0 auto}
.footer-info{display:flex;flex-direction:column;align-items:center;gap:1rem;padding-bottom:0.49rem;}
.footer-links{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:1rem}
.divider-line{width:100%;height:1px;background:rgba(255,255,255,.1);margin:.5rem 0}
.copyright{font-family:Inter,sans-serif;margin:0;text-align:center}
.footer-links a{text-decoration:none;transition:color .2s}
.footer-links a:hover{color:#00b8ff}
.footer-links .divider{color:var(--text-color);opacity:.5}
@media (max-width:768px){.footer-links{gap:.75rem;padding:0 1rem}.copyright,.footer-links a{font-size:.8125rem}}

.ctcontainer{display:grid;place-items:center;align-items:center;margin:1.7rem 0rem 3.9rem 0rem}
.wrapper{height:60px;display:flex;text-align:center;align-items:center;justify-content:center;position:relative;margin:0px 10px 0px 10px;max-width:100%}
.animated-border-box,.animated-border-box-glow{height:100%;width:100%;position:absolute;overflow:hidden;z-index:0;border-radius:15px}
.animated-border-box-glow{filter:blur(20px)}
.animated-border-box:before,.animated-border-box-glow:before{content:'';z-index:-2;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(0deg);width:99999px;height:99999px;background-repeat:no-repeat;background-position:0 0;background-image:conic-gradient(rgba(0,0,0,0),#ffffff,rgba(0,0,0,0) 25%);animation:rotate 4s linear infinite}
.field .animated-border-box:before,.field .animated-border-box-glow:before{background-image:conic-gradient(rgba(0,0,0,0),#1976ed,rgba(0,0,0,0) 25%)}
.animated-border-box:after{content:'';position:absolute;z-index:-1;left:3px;top:3px;width:calc(100% - 6px);height:calc(100% - 6px);background:linear-gradient(90deg,#2D3391 0%,#00818E 50%,#2D3391 100%);border-radius:15px}
.field .animated-border-box:after{background:white}
@keyframes rotate{100%{transform:translate(-50%,-50%) rotate(1turn)}}
.wrapper .btn-1{position:absolute;height:85%;min-width:98%;color:#FFF;line-height:50px;font-size:clamp(16px,4vw,23px);border-radius:15px;user-select:none;cursor:pointer;z-index:1;opacity:1;background:linear-gradient(90deg,#2D3391 0%,#00818E 50%,#2D3391 100%);background-size:200% auto;transition:background-position 0.3s ease;font-family:system-ui,-apple-system,sans-serif}
.wrapper .btn-1:hover{animation:gradientFlow 1s linear infinite}
@keyframes gradientFlow{0%{background-position:0% center}100%{background-position:200% center}}
#click:checked~.btn-1,#click:checked~.animated-border-box,#click:checked~.animated-border-box-glow{height:40px;width:100px;opacity:0;pointer-events:none;transition:transform 0.4s cubic-bezier(0.68,-0.55,0.265,1.55),width 0.4s cubic-bezier(0.68,-0.55,0.265,1.55),height 0.4s cubic-bezier(0.68,-0.55,0.265,1.55),opacity 0s}
.wrapper .field{height:100%;width:0%;opacity:0;pointer-events:none;position:relative;transition:width 0.4s cubic-bezier(0.68,-0.55,0.265,1.55),opacity 0s;display:flex;align-items:center}
#click:checked~.field{width:100%;opacity:1;pointer-events:auto;transition:width 0.4s cubic-bezier(0.68,-0.55,0.265,1.55),opacity 0.4s cubic-bezier(0.68,-0.55,0.265,1.55)}
.wrapper .field input{height:100%;width:100%;color:#000;border:none;border-radius:5px;padding:0 95px 0 15px;font-size:clamp(14px,3vw,20px);outline:none;background:transparent;z-index:1;position:relative;min-width:0}
.wrapper .field input::placeholder{color:#666;font-size:clamp(12px,2.5vw,18px)}
.wrapper .field .btn-2{position:absolute;top:50%;right:11px;transform:translateY(-50%);font-size:clamp(14px,3vw,16px);color:#fff;line-height:35px;background:linear-gradient(90deg,#2D3391 0%,#00818E 50%,#2D3391 100%);background-size:200% auto;height:38px;width:90px;min-width:80px;user-select:none;border-radius:5px;cursor:pointer;transition:all 0.3s ease;z-index:2;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.wrapper .field .btn-2:hover{background-position:right center;box-shadow:0 4px 8px rgba(0,0,0,0.3)}
.wrapper .field .btn-2:active{transform:translateY(-50%) scale(0.95);box-shadow:0 1px 2px rgba(0,0,0,0.2)}
.wrapper .field .btn-2:active{transform:translateY(-50%) scale(0.9)}
.wrapper #click{display:none}
@media screen and (max-width:480px){.wrapper{height:50px;margin:0 5px}.wrapper .field input{padding:0 85px 0 10px;font-size:14px}.wrapper .field .btn-2{height:35px;line-height:35px;width:80px;min-width:70px;font-size:14px}.wrapper .field input::placeholder{font-size:10px}.wrapper .btn-1{line-height:40px}}
@media screen and (max-width:360px){.wrapper .field input{padding:0 80px 0 8px;font-size:13px}.wrapper .field .btn-2{width:75px;min-width:65px}}

/* --- APP Settings Below --- */
.app-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:25px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.15);max-width:80%;text-align:center;z-index:1001;font-family:system-ui,-apple-system,sans-serif}
.app-container.info{width:600px;}
.app-container.renew{width:450px;}
.app-button{transition:transform 0.15s ease}
.app-button:active{transform:scale(0.93)}
.app-button.code-help{background:linear-gradient(90deg,#2D3391 0%,#00818E 50%,#2D913D 100%);background-size:200% auto;color:white;border:none;padding:12px 25px;border-radius:6px;cursor:pointer;font-size:16px;flex:1;margin-right:7px;box-shadow:0 2px 4px rgba(0,0,0,0.2);transition:all 0.3s ease}
.app-button.code-help:hover{background-position:right center;box-shadow:0 4px 8px rgba(0,0,0,0.3)}
.app-button.code-help:active{transform:scale(0.95);box-shadow:0 1px 2px rgba(0,0,0,0.2)}
.app-button.close{background:#00656f;color:white;border:none;padding:12px 25px;border-radius:6px;cursor:pointer;font-size:16px;flex:1}
.app-button.renew{background:linear-gradient(90deg,#2D3391 0%,#00818E 50%,#2D913D 100%);background-size:200% auto;color:white;border:none;padding:12px 25px;border-radius:6px;cursor:pointer;font-size:16px;flex:1;margin-right:7px;box-shadow:0 2px 4px rgba(0,0,0,0.2);transition:all 0.3s ease}
.app-button.renew:hover{background-position:right center;box-shadow:0 4px 8px rgba(0,0,0,0.3)}
.app-button.renew:active{transform:scale(0.95);box-shadow:0 1px 2px rgba(0,0,0,0.2)}
.app-notification{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:15px 20px;border-radius:8px;z-index:1000;max-width:80%;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.app-notification.success{background-color:#e8f5e9;color:#4CAF50;border:1px solid #4CAF50}
.app-notification.error{background-color:#ffebee;color:#f44336;border:1px solid #f44336}
.nowarrow{position:absolute;left:75%;bottom:-45px;transform:translateX(-50%);z-index:2;pointer-events:none;display:flex;justify-content:center}
.now{width:53px;height:53px;transform:rotate(53deg);filter:drop-shadow(0 2px 4px #000000b3)}

.hamburger-menu{display:none;flex-direction:column;justify-content:space-around;width:30px;height:25px;background:0 0;border:none;cursor:pointer;padding:0;z-index:1001}
.hamburger-menu span{width:30px;height:2px;background:var(--text-color);border-radius:10px;transition:.3s linear;position:relative;transform-origin:1px}
.nav-links.mobile{display:none;position:fixed;top:60px;left:0;right:0;background:rgba(26,26,26,.98);padding:20px 0;flex-direction:column;align-items:center;gap:0;backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);box-shadow:0 4px 30px rgba(0,0,0,.3)}
.nav-links.mobile.active{display:flex}
.nav-links.mobile a{width:100%;padding:15px 0;text-align:center;font-size:1rem;letter-spacing:1px;border-bottom:1px solid rgba(255,255,255,.1);transition:.3s}
.nav-links.mobile a:last-child{border-bottom:none}
.nav-links.mobile a:hover{background:rgba(255,255,255,.1);color:#00b8ff}
@media (max-width:768px){.hamburger-menu{display:flex}
.login-link,.nav-links{display:none}
.nav-container{justify-content:space-between;align-items:center;padding:0 1rem}
.nav-logo{margin-right:0;height:35px}}
.hamburger-menu.active span:first-child{transform:rotate(45deg) translate(0,-1px)}
.hamburger-menu.active span:nth-child(2){opacity:0;transform:translateX(-20px)}
.hamburger-menu.active span:nth-child(3){transform:rotate(-45deg) translate(0,1px)}