:root{--primary-color:#165DFF;--secondary-color:#FF7D00;--dark-color:#15254a;--neutral-50:#F8F9FA;--neutral-100:#F3F4F6;--neutral-200:#E5E7EB;--neutral-300:#D1D5DB;--neutral-400:#9CA3AF;--neutral-500:#6B7280;--neutral-600:#4B5563;--neutral-700:#374151;--neutral-800:#1F2937;--neutral-900:#111827;--white-color:#FFF;--red-500:#EF4444;--red-600:#DC2626;--green-500:#22C55E;--green-600:#16A34A;--font-family-inter:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--shadow-subtle:0 4px 6px -1px #0000000d 0 2px 4px -1px #00000008;--shadow-subtle-lg:0 10px 14px -7px #00000005 0 4px 6px -2px #00000005;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a 0 2px 4px -1px #0000000f;--shadow-lg:0 2px 15px -10px #0000000f 0 2px 6px -3px #0000000d;--border-radius-lg:.5rem;--border-radius-md:.375rem;--border-radius-xl:1.5rem;--transition-custom:all .2s ease-in-out}*,::before,::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-family-inter);background-color:var(--neutral-50);color:var(--neutral-700);min-height:100vh;display:flex;flex-direction:column;line-height:1.6}button,select{font-family:var(--font-family-inter);cursor:pointer}.container{width:100%;max-width:1152px;margin:0 auto;padding:0 1rem}@media (min-width: 1280px){.container{max-width:1280px}}a{color:inherit;text-decoration:none}.hidden{display:none!important}.flex{display:flex}.grid{display:grid;gap:1rem}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.flex-column{display:grid;gap:1rem;flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.inset-0{inset:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.cursor-pointer{cursor:pointer}.transition-custom{transition:var(--transition-custom)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.animate-spin{animation:1s linear 0s infinite normal none running spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#header{background-color:var(--white-color);width:100%}#header .container{padding:1rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}#header .logo a{line-height:1;display:flex;align-items:center}#header svg{width:1.8rem;height:1.8rem;float:left;fill:var(--primary-color);margin-right:.75rem}#header .logo-title{font-size:1.25rem;font-weight:700;color:var(--neutral-800)}#header .subtitle{white-space:nowrap;font-size:.75rem;color:var(--neutral-500);display:none}#header nav{display:none;align-items:center;gap:1.5rem}#header nav a{color:var(--neutral-600);font-weight:500;transition:var(--transition-custom)}#header nav a:hover{color:var(--primary-color)}#header .nav-button{background-color:#165dff;color:var(--white-color);padding:.5rem 1.25rem;border-radius:var(--border-radius-lg);font-weight:500;transition:var(--transition-custom);box-shadow:var(--shadow-sm)}#header .nav-button:hover{background-color:#165dffe6;box-shadow:var(--shadow-md);color:var(--white-color)}#menu-toggle{display:block;color:var(--neutral-700);font-size:1.25rem;background:none;border:none;cursor:pointer}#mobile-menu{background-color:var(--white-color);border-top:1px solid var(--neutral-200);position:absolute;width:100%;left:0;box-shadow:var(--shadow-md)}#mobile-menu .container{padding:.75rem 1rem;display:flex;flex-direction:column;gap:.25rem}#mobile-menu a{color:var(--neutral-600);padding:.5rem;transition:var(--transition-custom);display:block;border-radius:var(--border-radius-md)}#mobile-menu a:hover{color:var(--primary-color);background-color:var(--neutral-100)}#mobile-menu .nav-button{margin-top:.5rem;text-align:center}@media (min-width: 640px){#header .subtitle{display:block}#header .logo a{display:block}#header .logo svg{margin-top:.1rem}}@media (min-width: 768px){#header nav{display:flex}#menu-toggle{display:none}#mobile-menu{display:none!important}#header .logo-title{font-size:1.3rem}}.hero-section{padding:4rem 0 0}.hero-section .container{max-width:896px;text-align:center}.hero-section h1{font-size:clamp(2.25rem,5vw,3rem);font-weight:700;line-height:1.2;margin-bottom:1.5rem}.hero-section p{font-size:clamp(1rem,2vw,1.15rem);max-width:672px;margin:0 auto 2.5rem}.hero-section .cta-button{display:inline-block;background-color:var(--secondary-color);color:var(--white-color);font-weight:500;padding:.75rem 2rem;border-radius:var(--border-radius-lg);font-size:1.125rem;box-shadow:var(--shadow-md);transition:var(--transition-custom);transform:translateY(0px)}.hero-section .cta-button:hover{background-color:#ff7d00e6;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.hero-section .cta-button i{margin-left:.5rem}section{padding:4rem 0}section[id]{scroll-margin-top:80px}section.bg-white{background-color:var(--white-color)}.section-title{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;text-align:center;color:var(--neutral-800);margin-bottom:1rem}.section-subtitle{text-align:center;color:var(--neutral-600);max-width:672px;margin:0 auto 3rem;font-size:1rem}#generator .generator-grid{background-color:var(--white-color);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1fr;gap:2.5rem;padding:1.5rem}#generator .controls-column{display:flex;flex-direction:column;gap:1.5rem}#generator .preview-column{display:flex;flex-direction:column;position:sticky;top:1rem;align-self:start;padding-top:.5rem}.control-label{display:block;color:var(--neutral-700);font-weight:500;margin-bottom:.5rem;font-size:.875rem}.required-mark{color:var(--red-500);margin-left:.25rem}.generate-button-container{display:flex;justify-content:center}#generate-qr-btn{background-color:var(--primary-color);color:var(--white-color);border:none;padding:.75rem 3rem;width:100%;border-radius:var(--border-radius-lg);font-weight:600;font-size:1rem;transition:var(--transition-custom);box-shadow:var(--shadow-md);display:flex;align-items:center;gap:.5rem;justify-content:center}#generate-qr-btn:hover{background-color:#165dffe6;box-shadow:var(--shadow-lg);transform:translateY(-2px)}#generate-qr-btn:disabled{background-color:var(--neutral-400);cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}.tabs-container{display:flex;border-bottom:1px solid var(--neutral-200);margin:1rem 0}.tab-btn{padding:.75rem 1rem;cursor:pointer;background:none;border-top:none;border-right:none;border-left:none;border-image:initial;border-bottom:3px solid transparent;font-size:.875rem;font-weight:700;color:var(--neutral-500);transition:var(--transition-custom);margin-bottom:-1px}.tab-btn:hover{color:var(--neutral-700)}.tab-btn.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.tab-content{display:flex;flex-direction:column;gap:1.5rem}.qr-type-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;padding:.5rem 0 0}.qr-type-btn{padding:.5rem .75rem;border-radius:var(--border-radius-lg);transition:var(--transition-custom);font-size:.875rem;font-weight:500;border:1px solid var(--neutral-200);cursor:pointer;background-color:var(--neutral-100);color:var(--neutral-700);text-align:center}.qr-type-btn:hover{background-color:var(--neutral-200);border-color:var(--neutral-300)}.qr-type-btn.active{background-color:var(--primary-color);color:var(--white-color);box-shadow:var(--shadow-sm);border-color:transparent}@media (min-width: 640px){.qr-type-buttons{grid-template-columns:repeat(3,1fr)}.tab-btn{font-size:1rem;padding:.75rem 1.25rem}}@media (min-width: 768px){#generator .generator-grid{padding:2rem 2.5rem 2.5rem}.qr-type-buttons{grid-template-columns:repeat(4,1fr)}.qr-type-btn.col-span-fix{grid-column:span 1 / span 1}}@media (min-width: 1024px){#generator .generator-grid{grid-template-columns:repeat(2,1fr)}}.form-input-custom,.form-textarea-custom,.form-select-custom{width:100%;padding:1rem 1.25rem;border:1px solid var(--neutral-300);border-radius:var(--border-radius-lg);transition:var(--transition-custom);background-color:var(--white-color);box-shadow:var(--shadow-sm);font-size:1rem;font-family:var(--font-family-inter)}.form-input-custom:focus,.form-textarea-custom:focus,.form-select-custom:focus{outline:none;border-color:var(--primary-color);box-shadow:#165dff80 0 0 0 2px}.form-input-custom.invalid,.form-textarea-custom.invalid{border-color:var(--red-500);box-shadow:#ef444480 0 0 0 2px}.form-textarea-custom{resize:vertical}.form-select-custom{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}.input-hint{font-size:.75rem;color:var(--neutral-500);margin-top:.25rem}.slider-track{width:100%;height:.5rem;background-color:var(--neutral-200);border-radius:9999px;appearance:none;cursor:pointer}.slider-track::-webkit-slider-thumb{appearance:none;width:1rem;height:1rem;background-color:var(--primary-color);border-radius:50%;cursor:pointer;box-shadow:#0003 0 1px 3px}.slider-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--neutral-500);margin-top:.2rem}.color-input-container{display:flex}.color-input-container input[type="color"]{width:2.5rem;height:2.5rem;border:1px solid var(--neutral-300);border-radius:var(--border-radius-md) 0 0 var(--border-radius-md);cursor:pointer;padding:0;appearance:none}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border:none;border-radius:.375rem 0 0 .375rem}.color-input-container input[type="text"]{flex:1;width:100%;padding:.5rem .75rem;border:1px solid var(--neutral-300);border-left:none;border-radius:0 var(--border-radius-md) var(--border-radius-md) 0;font-size:.875rem;transition:var(--transition-custom)}.color-input-container input[type="text"]:focus{outline:none;border-color:var(--primary-color);z-index:1;box-shadow:#165dff80 0 0 0 1px}.color-input-container input[type="text"].border-red-500{border-color:var(--red-500);box-shadow:#ef444480 0 0 0 1px}.color-label{display:block;font-size:.75rem;color:var(--neutral-600);margin-bottom:.25rem}.color-section-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width: 768px){.color-section-grid{grid-template-columns:repeat(2,1fr)}}.radio-group label,.checkbox-group label{display:inline-flex;align-items:center;cursor:pointer}.radio-group input[type="radio"],.checkbox-group input[type="checkbox"]{width:1.25rem;height:1.25rem;color:var(--primary-color);border-color:var(--neutral-300);transition:var(--transition-custom)}.radio-group input[type="radio"]{border-radius:50%}.checkbox-group input[type="checkbox"]{border-radius:var(--border-radius-md)}.radio-group input[type="radio"]:focus,.checkbox-group input[type="checkbox"]:focus{box-shadow:#165dff80 0 0 0 2px;outline:none}.radio-group span,.checkbox-group span{margin-left:.5rem;color:var(--neutral-700)}#logo-options{display:flex;flex-direction:column;gap:1rem}#logo-options .logo-hint{font-size:.75rem;color:var(--neutral-600);margin-bottom:.5rem}#preset-logos{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}.logo-option{width:44px;height:44px;padding:4px;display:flex;align-items:center;justify-content:center;border:2px solid transparent;background-color:var(--white-color);border-radius:var(--border-radius-lg);cursor:pointer;transition:var(--transition-custom);box-shadow:var(--shadow-sm)}.logo-option img,.logo-option svg{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--border-radius-md)}.logo-option i{font-size:1.5rem;color:var(--neutral-400)}.logo-option[data-logo="upload"] i{color:var(--neutral-600)}.logo-option:hover{border-color:var(--neutral-300);transform:translateY(-2px);box-shadow:var(--shadow-md)}.logo-option.selected{border-color:var(--primary-color);transform:scale(1.05);box-shadow:var(--shadow-md)}#qr-preview-container-wrapper{background:linear-gradient(to bottom right,var(--neutral-50),var(--neutral-100));border-radius:var(--border-radius-lg);border:1px solid var(--neutral-200);padding:1.5rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;width:100%;height:auto;aspect-ratio:1 / 1;margin-left:auto;margin-right:auto;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}#qr-preview-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#ffffff80;backdrop-filter:blur(2px);z-index:20}#qr-preview-spinner i{font-size:2.5rem;color:var(--primary-color)}.bg-grid-pattern{background-image:url(/assets/sprite.svg#gridPattern)}#qr-preview-container-wrapper .grid-overlay{position:absolute;inset:0;opacity:.05}#qr-preview-container{position:relative;z-index:10;max-width:100%}#qr-preview-placeholder{text-align:center;padding:1rem}#qr-preview-placeholder i{font-size:3.75rem;color:var(--neutral-300);margin-bottom:1rem}#qr-preview-placeholder p{color:var(--neutral-500)}#qr-preview-container canvas,#qr-preview-container svg{display:block;margin:auto;max-width:100%;max-height:100%}#download-options{margin-top:.5rem}#download-options h3{font-weight:500;color:var(--neutral-700);margin-bottom:.75rem}#download-options .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}#download-options button{background-color:var(--white-color);border:1px solid var(--neutral-300);color:var(--neutral-700);font-weight:500;padding:.625rem 1rem;border-radius:var(--border-radius-lg);transition:var(--transition-custom);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);cursor:pointer;font-size:.875rem}#download-options button:hover{border-color:var(--primary-color);color:var(--primary-color);box-shadow:var(--shadow-md)}#download-options button i{margin-right:.5rem}#download-options .hint{font-size:.75rem;color:var(--neutral-500);font-style:italic;margin-top:.5rem}.qr-size-section{margin-top:0;padding-top:0;border-top:none}.history-container{margin-top:1.5rem}.history-box{background-color:var(--neutral-100);padding:1rem;border-radius:var(--border-radius-lg);border:1px solid var(--neutral-200);box-shadow:var(--shadow-sm)}.history-box h3{font-weight:500;color:var(--neutral-700);margin-bottom:.75rem;display:flex;align-items:center}#clear-history{margin-left:auto;font-size:.75rem;color:var(--neutral-500);transition:var(--transition-custom);display:flex;align-items:center;gap:.25rem;background:none;border:none;cursor:pointer}#clear-history:hover{color:var(--red-600)}#qr-history{max-height:9rem;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding-right:.5rem}.history-item{background-color:var(--white-color);padding:.625rem;border-radius:var(--border-radius-md);border:1px solid var(--neutral-200);transition:var(--transition-custom);cursor:pointer;display:flex;justify-content:space-between;align-items:center}.history-item:hover{border-color:var(--primary-color);background-color:#165dff0d}.history-item-content{flex:1 1 0;overflow:hidden;margin-right:.5rem}.history-item-type{font-size:.75rem;color:var(--neutral-500);margin-bottom:2px}.history-item-data{color:var(--neutral-800);font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-item:hover .history-item-data{color:var(--primary-color)}.history-item-actions{display:flex;align-items:center;gap:.375rem;flex-shrink:0}.history-copy{padding:.25rem;color:var(--neutral-400);transition:var(--transition-custom);background:none;border:none;cursor:pointer;opacity:0}.history-item:hover .history-copy{opacity:1}.history-copy:hover{color:var(--green-600)}.history-copy .fa-check{color:var(--green-600)}.history-item-actions .fa-qrcode{color:var(--primary-color);opacity:.8;font-size:1rem}#qr-history .empty-history{color:var(--neutral-500);text-align:center;font-style:italic;padding:.5rem 0}#qr-history::-webkit-scrollbar{width:6px}#qr-history::-webkit-scrollbar-track{background:var(--neutral-100);border-radius:3px}#qr-history::-webkit-scrollbar-thumb{background:var(--neutral-300);border-radius:3px}#qr-history::-webkit-scrollbar-thumb:hover{background:var(--neutral-400)}#features .grid{display:grid;grid-template-columns:1fr;gap:2rem;max-width:1024px;margin:0 auto}.feature-card{background-color:var(--neutral-50);padding:1.5rem;border-radius:var(--border-radius-xl);border:1px solid var(--neutral-200);transition:var(--transition-custom)}.feature-card:hover{box-shadow:var(--shadow-subtle)}.feature-icon-wrapper{width:3rem;height:3rem;background-color:#165dff1a;border-radius:var(--border-radius-lg);display:flex;align-items:center;justify-content:center;color:var(--primary-color);font-size:1.5rem;margin-bottom:1.25rem}.feature-card h3{font-size:1.125rem;font-weight:600;color:var(--neutral-800);margin-bottom:.75rem}.feature-card p{color:var(--neutral-600);font-size:.875rem;line-height:1.6}@media (min-width: 768px){#features .grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){#features .grid{grid-template-columns:repeat(3,1fr)}}#how-it-works .grid{display:grid;grid-template-columns:1fr;gap:2rem;max-width:896px;margin:0 auto}#how-it-works .step{text-align:center;position:relative;z-index:10}.step-number{width:4rem;height:4rem;background-color:var(--primary-color);color:var(--white-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin:0 auto 1.5rem;box-shadow:var(--shadow-md)}.step h3{font-size:1.125rem;font-weight:600;color:var(--neutral-800);margin-bottom:.75rem}.step p{color:var(--neutral-600);font-size:.875rem}@media (min-width: 768px){#how-it-works .grid{grid-template-columns:repeat(3,1fr);gap:3rem;position:relative}#how-it-works .grid > .step:nth-child(1)::after,#how-it-works .grid > .step:nth-child(2)::after{content:"";display:block;position:absolute;top:2rem;height:2px;border-top:2px dashed var(--neutral-300);left:calc(50% + 2rem);width:calc(100% + 1rem);z-index:1}}.how-it-works-cta{margin-top:4rem;text-align:center}.how-it-works-cta a{display:inline-block;background-color:var(--secondary-color);color:var(--white-color);font-weight:500;padding:.75rem 2rem;border-radius:var(--border-radius-lg);transition:var(--transition-custom);transform:translateY(0px);box-shadow:var(--shadow-md)}.how-it-works-cta a:hover{background-color:#ff7d00e6;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.how-it-works-cta a i{margin-left:.5rem}#faq .faq-container{max-width:1024px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}.faq-item{background-color:var(--neutral-50);border:1px solid var(--neutral-200);border-radius:var(--border-radius-lg);overflow:hidden}.faq-toggle{width:100%;text-align:left;padding:1.2rem 1.5rem;display:flex;justify-content:space-between;align-items:center;background:none;border:none;font-size:1rem;cursor:pointer;color:var(--neutral-800)}.faq-toggle:focus{outline:none}.faq-toggle:focus-visible{box-shadow:#165dff80 0 0 0 2px}.faq-toggle i{color:var(--neutral-500);transition:transform .3s ease-in-out 0s}.faq-toggle i.rotate-180{transform:rotate(180deg)}.faq-content{padding:.25rem 1.5rem 1.25rem}.faq-content p{color:var(--neutral-600);font-size:.875rem;line-height:1.6}#cta-section{padding:5rem 0;background:linear-gradient(to bottom right,#165dffe6,var(--primary-color));color:var(--white-color);text-align:center}#cta-section h2{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700;margin-bottom:1.5rem}#cta-section p{color:#ffffffe6;max-width:672px;margin:0 auto 2.5rem;font-size:1rem}#cta-section a{display:inline-block;background-color:var(--secondary-color);color:var(--white-color);font-weight:500;padding:.75rem 2rem;border-radius:var(--border-radius-lg);font-size:1.125rem;box-shadow:var(--shadow-md);transition:var(--transition-custom);transform:translateY(0px)}#cta-section a:hover{background-color:#ff7d00e6;box-shadow:var(--shadow-lg);transform:translateY(-2px)}#cta-section a i{margin-left:.5rem}@media (min-width: 768px){#cta-section p{font-size:1.125rem}}footer{background-color:var(--neutral-800);color:var(--neutral-300);padding:4rem 0}footer .grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2.5rem;border-bottom:1px solid var(--neutral-700);padding-bottom:2rem}footer .footer-about .logo-container{display:flex;align-items:center;margin-bottom:1rem}footer .footer-about .logo-icon{color:var(--white-color);font-size:1.5rem;margin-right:.75rem}footer .footer-about h3{font-size:1.25rem;font-weight:700;color:var(--white-color)}footer .footer-about p{font-size:.875rem;margin-bottom:1.25rem}footer .footer-socials{display:none}footer h4{font-size:1rem;font-weight:600;margin-bottom:1rem;color:var(--white-color);text-transform:uppercase;letter-spacing:.05em}.footer-links ul{display:grid;gap:.5rem;grid-template-columns:1fr}.footer-links li{display:block}.footer-links a{font-size:.875rem;transition:var(--transition-custom);padding:.25rem 0}.footer-links a:hover{color:var(--white-color)}.footer-links .language-links{grid-template-columns:repeat(2,1fr)}.footer-bottom{text-align:center;color:var(--neutral-400);font-size:.875rem}@media (min-width: 768px){footer .grid{grid-template-columns:2fr 2fr 1fr;gap:2rem}}#custom-popup{position:fixed;top:1.25rem;right:1.25rem;background-color:var(--neutral-800);color:var(--white-color);padding:.75rem 1.25rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);z-index:100;transform:translateX(120%);opacity:0;max-width:320px;transition:all .3s ease-out 0s}#custom-popup.visible{transform:translateX(0px);opacity:1}.bg-grid-pattern{background-image:url(/assets/sprite.svg#gridPattern)}#about{padding:2.5rem 1rem}#about h1,#about h2,#about h3{padding:1rem 0}#about p,#about li{padding:.5rem 0}#about ul,#about ol{padding:.5rem 0;list-style-position:inside}