/* =========================================
   IMPORTANT
   THIS CSS DOES NOT TOUCH HEADER/FOOTER
========================================= */

header,
header *,
.site-header,
.site-header *,
nav,
nav *{
font-family:inherit !important;
}

/* =========================================
   PAGE
========================================= */

.qr-page{
max-width:1180px;
margin:0 auto;
padding:0 20px 18px;
position:relative;
}

/* BLUE BACKGROUND EFFECT */
.qr-page::before{
content:"";
position:absolute;
top:-180px;
right:-220px;
width:700px;
height:700px;
background:
radial-gradient(circle,
rgba(96,165,250,.16) 0%,
rgba(96,165,250,.08) 35%,
transparent 72%);
pointer-events:none;
z-index:-1;
}

/* =========================================
   HERO
========================================= */

.qr-hero{
padding-top:10px;
margin:0 0 10px;
text-align:center;
}
.qr-hero-bg{
display:none;
}

.qr-hero-content{
max-width:100%;
}

.qr-badge{
display:none;
}

.qr-hero h1{
font-family:'Inter',sans-serif;
font-size:42px;
font-weight:800;
line-height:1.08;
letter-spacing:-1.6px;
color:#0f172a;
margin:0;
text-align:center;
}

.qr-hero h1 span{
color:#78a6ff;
}

/* REMOVE DESCRIPTION */
.qr-hero p{
display:none;
}

/* =========================================
   GENERATOR SECTION
========================================= */

.qr-generator-section{
margin:0;
padding:0;
}

.qr-generator-card{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:24px;
background:#fff;
border:1px solid #e5e7eb;
border-radius:24px;
padding:26px;
box-shadow:
0 8px 24px rgba(15,23,42,.04);
}

/* =========================================
   LEFT
========================================= */

.qr-left{
display:flex;
flex-direction:column;
justify-content:center;
}

.qr-input-header{
display:flex;
align-items:center;
gap:18px;
margin-bottom:20px;
}

/* ICON BOX */

.qr-icon-box{
width:78px;
height:78px;
border-radius:18px;
background:#eff6ff;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #dbeafe;
flex-shrink:0;
}

.qr-icon-box img{
width:42px;
height:42px;
object-fit:contain;
}

/* TITLE */

.qr-input-header h2{
font-family:'Inter',sans-serif;
font-size:28px;
font-weight:800;
line-height:1.2;
color:#0f172a;
margin-bottom:6px;
}

/* SMALL TEXT */

.qr-input-header p{
font-size:15px;
line-height:1.7;
color:#64748b;
max-width:500px;
}

/* =========================================
   INPUT AREA
========================================= */

.qr-input-wrapper{
display:flex;
gap:14px;
align-items:center;
margin-bottom:12px;
}

#qr-input{
flex:1;
height:60px;
padding:0 20px;
border-radius:16px;
border:1px solid #dbe3ee;
background:#f8fafc;
font-size:17px;
font-weight:500;
color:#0f172a;
transition:.2s ease;
}

#qr-input:focus{
outline:none;
border-color:#60a5fa;
background:#fff;
box-shadow:
0 0 0 4px rgba(96,165,250,.10);
}

#qr-input::placeholder{
color:#94a3b8;
}

#download-btn{
height:60px;
padding:0 24px;
border:none;
border-radius:16px;
background:#4361e7;
color:#fff;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:.2s ease;
white-space:nowrap;
}

#download-btn:hover:not(:disabled){
background:#3150dd;
}

#download-btn:disabled{
background:#cbd5e1;
cursor:not-allowed;
}

.qr-note{
font-size:14px;
line-height:1.7;
color:#64748b;
}

/* =========================================
   RIGHT / QR PREVIEW
========================================= */

.qr-right{
display:flex;
align-items:center;
justify-content:center;
}

#qr-preview{
width:100%;
max-width:320px;
aspect-ratio:1/1;
border-radius:24px;
border:2px dashed #d6dbe4;
background:#f8fafc;
display:flex;
align-items:center;
justify-content:center;
padding:18px;
}

.qr-preview-inner{
width:100%;
height:100%;
border-radius:18px;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
box-shadow:
inset 0 0 0 1px #eef2f7;
}

#qr-preview img{
max-width:100%;
height:auto;
display:block;
}

.placeholder{
font-size:16px;
font-weight:600;
color:#94a3b8;
}

/* =========================================
   FAQ
========================================= */

.faq-section{
max-width:980px;
margin:48px auto 70px;
padding:0 24px;
}

.faq-section h2{
font-size:36px;
font-weight:800;
line-height:1.2;
color:#0f172a;
margin-bottom:44px;
}

.faq-section h3{
font-size:24px;
font-weight:700;
line-height:1.4;
color:#1e3a8a;
margin:58px 0 18px;
}

.faq-section p{
font-size:17px;
line-height:1.92;
color:#334155;
margin-bottom:18px;
}

.faq-section strong{
font-weight:700;
color:#0f172a;
}

.faq-section a{
color:#2563eb;
text-decoration:none;
border-bottom:1px solid rgba(37,99,235,.35);
transition:.2s ease;
}

.faq-section a:hover{
color:#1d4ed8;
border-bottom-color:#1d4ed8;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:980px){

.qr-page{
padding:0 16px 10px;
}

.qr-page::before{
right:-280px;
top:-220px;
}

.qr-hero{
padding-top:10px;
margin-bottom:4px;
}

.qr-hero h1{
font-size:30px;
line-height:1.12;
letter-spacing:-1px;
text-align:center;
}

.qr-generator-card{
grid-template-columns:1fr;
padding:22px;
gap:20px;
}

.qr-input-header{
flex-direction:column;
align-items:center;
text-align:center;
gap:14px;
margin-bottom:18px;
}

.qr-icon-box{
margin:0 auto;
}

.qr-input-wrapper{
flex-direction:column;
align-items:stretch;
}

#download-btn{
width:100%;
}

#qr-preview{
max-width:290px;
margin:0 auto;
}

.faq-section{
margin:34px auto 60px;
padding:0 18px;
}

.faq-section h2{
font-size:30px;
margin-bottom:34px;
}

.faq-section h3{
font-size:22px;
margin-top:48px;
}

.faq-section p{
font-size:16px;
line-height:1.88;
}

}

/* =========================================
   EXTRA SMALL DEVICES
========================================= */

@media(max-width:640px){

.qr-hero{
padding-top:12px;
margin-bottom:2px;
}

.qr-hero h1{
font-size:24px;
line-height:1.15;
}

.qr-generator-card{
padding:18px;
border-radius:22px;
}

.qr-input-header h2{
font-size:24px;
}

#qr-input{
height:56px;
font-size:16px;
}

#download-btn{
height:56px;
font-size:16px;
}

.faq-section{
margin-top:26px;
}

}












.qr-info-box {
    margin-top: 20px;
    padding: 14px 16px;
    border-left: 4px solid #facc15;
    background: rgba(250, 204, 21, 0.08);
    border-radius: 8px;
    line-height: 1.7;
}

.qr-warning-box {
    margin-top: 20px;
    padding: 14px 16px;
    border-left: 4px solid #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 8px;
    line-height: 1.7;
}

.faq-question {
    margin-top: 34px;
}

.faq-answer p {
    margin-bottom: 16px;
    line-height: 1.8;
}

.faq-answer a {
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.faq-answer a:hover {
    opacity: 0.9;
}