/* ═══════════════════════════════════════════════════════════════════════════
   Senhas Já — Main Stylesheet
   Design inspired by 1Password, Bitwarden, Dashlane
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CSS Variables ───────────────────────────────────────────────────────── */
:root {
    --clr-primary:      #6366f1;
    --clr-primary-dark: #4f46e5;
    --clr-primary-light:#818cf8;
    --clr-secondary:    #10b981;
    --clr-danger:       #ef4444;
    --clr-warning:      #f59e0b;
    --clr-info:         #3b82f6;
    --clr-gold:         #f59e0b;

    --clr-bg:           #0f0f1a;
    --clr-bg-card:      #1a1a2e;
    --clr-bg-input:     #1e1e3a;
    --clr-bg-hover:     #252545;
    --clr-border:       #2d2d5a;
    --clr-border-light: #3a3a6a;

    --clr-text:         #e2e8f0;
    --clr-text-muted:   #94a3b8;
    --clr-text-light:   #64748b;
    --clr-text-white:   #ffffff;

    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full:9999px;

    --shadow-sm:  0 1px 3px rgba(0,0,0,.4);
    --shadow-md:  0 4px 16px rgba(0,0,0,.5);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.6);
    --shadow-glow:0 0 40px rgba(99,102,241,.25);

    --font:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --trans:  0.2s ease;
    --trans-slow: 0.4s ease;
}

/* ─── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font); background:var(--clr-bg); color:var(--clr-text); line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased; }
a { color:var(--clr-primary-light); text-decoration:none; transition:color var(--trans); }
a:hover { color:var(--clr-primary); }
img { max-width:100%; height:auto; display:block; }
button { cursor:pointer; font-family:var(--font); }
input,select,textarea { font-family:var(--font); }

/* ─── Utility ─────────────────────────────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.text-muted { color:var(--clr-text-muted); font-size:.875rem; }
.gradient-text { background:linear-gradient(135deg,var(--clr-primary),var(--clr-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.625rem 1.25rem; border-radius:var(--radius-md); font-size:.9rem; font-weight:600; border:2px solid transparent; transition:all var(--trans); text-decoration:none; white-space:nowrap; }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn--primary { background:var(--clr-primary); color:#fff; border-color:var(--clr-primary); }
.btn--primary:hover { background:var(--clr-primary-dark); border-color:var(--clr-primary-dark); color:#fff; box-shadow:var(--shadow-glow); }
.btn--outline { background:transparent; color:var(--clr-primary-light); border-color:var(--clr-border-light); }
.btn--outline:hover { border-color:var(--clr-primary); color:var(--clr-primary); background:rgba(99,102,241,.1); }
.btn--ghost { background:transparent; color:var(--clr-text-muted); border-color:transparent; }
.btn--ghost:hover { background:var(--clr-bg-hover); color:var(--clr-text); }
.btn--danger { background:var(--clr-danger); color:#fff; border-color:var(--clr-danger); }
.btn--danger:hover { background:#dc2626; }
.btn--gold { background:linear-gradient(135deg,#f59e0b,#d97706); color:#000; border-color:transparent; font-weight:700; }
.btn--gold:hover { box-shadow:0 0 24px rgba(245,158,11,.4); }
.btn--oauth { background:var(--clr-bg-card); color:var(--clr-text); border-color:var(--clr-border); width:100%; justify-content:center; gap:.75rem; padding:.75rem 1rem; }
.btn--oauth:hover { background:var(--clr-bg-hover); color:var(--clr-text-white); }
.btn--google:hover { border-color:#4285F4; }
.btn--facebook { background:#1877F2; color:#fff; border-color:#1877F2; }
.btn--facebook:hover { background:#1462cc; }
.btn--sm { padding:.4rem .875rem; font-size:.825rem; }
.btn--lg { padding:.875rem 2rem; font-size:1rem; }
.btn--xl { padding:1.125rem 2.5rem; font-size:1.1rem; }
.btn--full { width:100%; }
.btn--xs { padding:.2rem .5rem; font-size:.75rem; border-radius:var(--radius-sm); }

/* ─── Icon Button ─────────────────────────────────────────────────────────── */
.icon-btn { background:none; border:none; cursor:pointer; padding:.375rem; border-radius:var(--radius-sm); color:var(--clr-text-muted); font-size:1rem; transition:all var(--trans); display:inline-flex; align-items:center; }
.icon-btn:hover { background:var(--clr-bg-hover); color:var(--clr-text); }

/* ─── Flash Messages ──────────────────────────────────────────────────────── */
.flash { display:flex; align-items:center; justify-content:space-between; padding:.875rem 1.25rem; margin:0 0 1rem; border-radius:var(--radius-md); font-size:.9rem; font-weight:500; animation:slideIn .3s ease; }
.flash--success { background:rgba(16,185,129,.15); color:#6ee7b7; border:1px solid rgba(16,185,129,.3); }
.flash--error   { background:rgba(239,68,68,.15);  color:#fca5a5; border:1px solid rgba(239,68,68,.3); }
.flash--info    { background:rgba(59,130,246,.15); color:#93c5fd; border:1px solid rgba(59,130,246,.3); }
.flash__close, .flash button { background:none; border:none; color:inherit; cursor:pointer; font-size:1.1rem; padding:0 .25rem; opacity:.6; }
.flash__close:hover, .flash button:hover { opacity:1; }
@keyframes slideIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* ─── Form Elements ───────────────────────────────────────────────────────── */
.form-group { margin-bottom:1.25rem; }
.form-label { display:flex; justify-content:space-between; align-items:center; font-size:.875rem; font-weight:600; color:var(--clr-text); margin-bottom:.5rem; }
.form-label__link { font-weight:400; font-size:.8rem; color:var(--clr-primary-light); }
.form-input, .form-select { width:100%; padding:.75rem 1rem; background:var(--clr-bg-input); border:1.5px solid var(--clr-border); border-radius:var(--radius-md); color:var(--clr-text); font-size:.9rem; transition:border-color var(--trans); outline:none; }
.form-input::placeholder { color:var(--clr-text-light); }
.form-input:focus, .form-select:focus { border-color:var(--clr-primary); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.form-select { cursor:pointer; }
.form-select option { background:var(--clr-bg-card); }
.input-password-wrap { position:relative; }
.input-password-wrap .form-input { padding-right:3rem; }
.toggle-password { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--clr-text-muted); font-size:1rem; padding:.25rem; }
.toggle-password:hover { color:var(--clr-text); }

/* ─── Range Slider ────────────────────────────────────────────────────────── */
.range-slider { -webkit-appearance:none; appearance:none; width:100%; height:6px; background:var(--clr-border); border-radius:var(--radius-full); outline:none; cursor:pointer; }
.range-slider::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--clr-primary); border:2px solid #fff; cursor:pointer; box-shadow:0 0 8px rgba(99,102,241,.5); }
.range-slider::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--clr-primary); border:2px solid #fff; cursor:pointer; }
.range-labels { display:flex; justify-content:space-between; font-size:.75rem; color:var(--clr-text-light); margin-top:.25rem; }

/* ─── Divider ─────────────────────────────────────────────────────────────── */
.divider { display:flex; align-items:center; gap:1rem; margin:1.25rem 0; color:var(--clr-text-light); font-size:.8rem; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--clr-border); }

/* ─── Badge ───────────────────────────────────────────────────────────────── */
.badge { display:inline-block; padding:.2rem .6rem; border-radius:var(--radius-full); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.badge--free    { background:rgba(100,116,139,.2); color:#94a3b8; }
.badge--premium { background:rgba(99,102,241,.2);  color:#818cf8; }
.badge--plus    { background:rgba(245,158,11,.2);  color:#fbbf24; }
.badge--success { background:rgba(16,185,129,.2);  color:#6ee7b7; }
.badge--danger  { background:rgba(239,68,68,.2);   color:#fca5a5; }
.badge--warning { background:rgba(245,158,11,.2);  color:#fcd34d; }
.badge-chip     { background:var(--clr-bg-card); border:1px solid var(--clr-border); padding:.375rem .875rem; border-radius:var(--radius-full); font-size:.8rem; color:var(--clr-text-muted); }
.badge-admin    { background:rgba(239,68,68,.2); color:#fca5a5; font-size:.6rem; padding:.1rem .4rem; border-radius:var(--radius-full); }

/* ─── HEADER ──────────────────────────────────────────────────────────────── */
.site-header { background:rgba(15,15,26,.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--clr-border); position:sticky; top:0; z-index:100; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; padding-top:.875rem; padding-bottom:.875rem; }
.header-logo { display:flex; align-items:center; gap:.5rem; color:var(--clr-text-white); font-weight:800; font-size:1.2rem; text-decoration:none; }
.header-logo:hover { color:var(--clr-primary-light); }
.logo-icon { font-size:1.4rem; }
.logo-name { font-weight:800; letter-spacing:-.02em; }
.header-nav { display:flex; align-items:center; gap:.75rem; }
.lang-switcher { display:flex; gap:.25rem; }
.lang-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; border-radius:var(--radius-sm); opacity:.55; transition:opacity var(--trans); text-decoration:none; }
.lang-btn:hover,.lang-btn--active { opacity:1; }
.lang-flag { border-radius:2px; flex-shrink:0; display:block; }
.lang-label { font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--clr-text-muted); }
.lang-btn--active .lang-label { color:var(--clr-text); }
.mobile-menu-btn { display:none; background:none; border:none; font-size:1.4rem; color:var(--clr-text); }

/* ─── HERO ────────────────────────────────────────────────────────────────── */
.hero { padding:4rem 0 2rem; text-align:center; }
.hero__inner { max-width:700px; margin:0 auto; }
.hero__title { display:flex; flex-direction:column; gap:.25rem; line-height:1.15; letter-spacing:-.03em; margin-bottom:1rem; }
.hero__title-main {
    font-size:clamp(2.25rem,5.5vw,4rem);
    font-weight:800;
    background:linear-gradient(135deg,#6366f1 0%,#06b6d4 45%,#a855f7 100%);
    background-size:200% auto;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:heroShimmer 3.5s linear infinite;
}
@keyframes heroShimmer { 0%{background-position:0% center} 100%{background-position:200% center} }
.hero__title-sub {
    font-size:clamp(1.05rem,2.5vw,1.5rem);
    font-weight:600;
    color:var(--clr-text-muted);
    letter-spacing:-.01em;
}
.hero__subtitle { font-size:1.05rem; color:var(--clr-text-muted); margin-bottom:1.5rem; max-width:560px; margin-left:auto; margin-right:auto; line-height:1.7; }
.hero__badges { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

/* ─── GENERATOR ───────────────────────────────────────────────────────────── */
.generator-section { padding:1rem 0 3rem; }
.generator-layout { display:grid; grid-template-columns:180px 1fr 180px; gap:1.5rem; align-items:start; }
.generator-card { background:var(--clr-bg-card); border:1px solid var(--clr-border); border-radius:var(--radius-xl); padding:2rem; box-shadow:var(--shadow-lg); }

/* Result display */
.generator-result { margin-bottom:1.75rem; }
.result-display { background:var(--clr-bg); border:2px solid var(--clr-border); border-radius:var(--radius-lg); padding:1.25rem 1.5rem; display:flex; align-items:center; gap:1rem; min-height:72px; }
.password-output { font-family:'Courier New', monospace; font-size:1.2rem; color:var(--clr-text-white); flex:1; word-break:break-all; letter-spacing:.05em; }
.result-actions { display:flex; gap:.25rem; flex-shrink:0; }

/* Strength Bar */
.strength-bar-wrap { margin-top:.875rem; }
.strength-bar { height:6px; background:var(--clr-border); border-radius:var(--radius-full); overflow:hidden; }
.strength-bar__fill { height:100%; border-radius:var(--radius-full); transition:width .5s ease, background .5s ease; }
.strength-meta { display:flex; justify-content:space-between; align-items:center; margin-top:.5rem; font-size:.8rem; }
.strength-label { font-weight:700; }
.strength-details { color:var(--clr-text-muted); }

/* Controls */
.control-group { margin-bottom:1.5rem; }
.control-label { display:block; font-size:.875rem; font-weight:600; margin-bottom:.75rem; color:var(--clr-text); }
.options-grid { display:grid; grid-template-columns:1fr 1fr; gap:.625rem; margin-bottom:1.5rem; }
.option-check { display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--clr-text-muted); cursor:pointer; padding:.5rem .625rem; border-radius:var(--radius-sm); transition:background var(--trans); user-select:none; }
.option-check:hover { background:var(--clr-bg-hover); color:var(--clr-text); }
.option-check input[type=checkbox] { width:16px; height:16px; accent-color:var(--clr-primary); cursor:pointer; flex-shrink:0; }
.option-check em { font-style:normal; color:var(--clr-text-light); font-size:.78rem; margin-left:auto; font-family:'Courier New',monospace; }

/* Limit bar */
.limit-bar { background:var(--clr-bg); border:1px solid var(--clr-border); border-radius:var(--radius-md); padding:.875rem 1rem; margin-top:1rem; }
.limit-bar__info { display:flex; justify-content:space-between; align-items:center; font-size:.8rem; margin-bottom:.5rem; color:var(--clr-text-muted); }
.limit-progress { height:4px; background:var(--clr-border); border-radius:var(--radius-full); overflow:hidden; }
.limit-progress__fill { height:100%; background:linear-gradient(90deg,var(--clr-primary),var(--clr-secondary)); border-radius:var(--radius-full); transition:width .5s ease; }
.upgrade-link { color:var(--clr-gold); font-weight:600; font-size:.8rem; }
.save-promo { background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.2); border-radius:var(--radius-md); padding:1rem; text-align:center; margin-top:1rem; }
.save-promo p { font-size:.875rem; color:var(--clr-text-muted); margin-bottom:.75rem; }

/* AdSense containers */
.ad-container { min-height:90px; }
.ad-footer { padding:1rem 0; text-align:center; }
.ad-mid    { padding:1.5rem 0; text-align:center; min-height:90px; }
.ad-sidebar { min-height:600px; }
.faq-ads-layout { display:grid; grid-template-columns:180px 1fr 180px; gap:1.5rem; align-items:start; }
@media (max-width:1024px) { .ad-sidebar { display:none; } .generator-layout { grid-template-columns:1fr; } .faq-ads-layout { grid-template-columns:1fr; } }

/* ─── FEATURES ────────────────────────────────────────────────────────────── */
.features-section { padding:4rem 0; }
.section-title { font-size:clamp(1.5rem,3vw,2.25rem); font-weight:800; text-align:center; margin-bottom:2.5rem; letter-spacing:-.02em; }
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.feature-card { background:var(--clr-bg-card); border:1px solid var(--clr-border); border-radius:var(--radius-lg); padding:1.75rem; transition:transform var(--trans),box-shadow var(--trans); }
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-glow); border-color:var(--clr-primary); }
.feature-icon { font-size:2.25rem; margin-bottom:1rem; }
.feature-card h3 { font-size:1rem; font-weight:700; margin-bottom:.5rem; }
.feature-card p { font-size:.875rem; color:var(--clr-text-muted); line-height:1.7; }

/* ─── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-section { padding:4rem 0; }
.faq-list { max-width:720px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--clr-border); }
.faq-question { width:100%; background:none; border:none; text-align:left; padding:1.25rem 0; color:var(--clr-text); font-size:.95rem; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap:1rem; transition:color var(--trans); }
.faq-question:hover { color:var(--clr-primary-light); }
.faq-icon { color:var(--clr-text-muted); transition:transform .3s; flex-shrink:0; font-size:.75rem; }
.faq-question[aria-expanded=true] .faq-icon { transform:rotate(180deg); }
.faq-answer { padding:0 0 1.25rem; }
.faq-answer p { color:var(--clr-text-muted); font-size:.875rem; line-height:1.8; }

/* ─── CTA ─────────────────────────────────────────────────────────────────── */
.cta-section { padding:4rem 0; }
.cta-inner { text-align:center; background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(16,185,129,.1)); border:1px solid rgba(99,102,241,.3); border-radius:var(--radius-xl); padding:3rem; }
.cta-inner h2 { font-size:2rem; font-weight:800; margin-bottom:.75rem; }
.cta-inner p  { color:var(--clr-text-muted); margin-bottom:1.75rem; font-size:1.05rem; }

/* ─── FOOTER ──────────────────────────────────────────────────────────────── */
.site-footer { border-top:1px solid var(--clr-border); padding:2.5rem 0; }
.footer-inner { display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; }
.footer-brand { display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.footer-brand p { font-size:.8rem; color:var(--clr-text-muted); }
.footer-links { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; }
.footer-links a { color:var(--clr-text-muted); font-size:.875rem; }
.footer-links a:hover { color:var(--clr-primary-light); }
.footer-copy { font-size:.775rem; color:var(--clr-text-light); }

/* ─── AUTH ────────────────────────────────────────────────────────────────── */
.auth-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:2rem; }
.auth-wrapper { width:100%; max-width:440px; }
.auth-card { background:var(--clr-bg-card); border:1px solid var(--clr-border); border-radius:var(--radius-xl); padding:2.5rem; box-shadow:var(--shadow-lg); }
.auth-brand { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-bottom:1.5rem; color:var(--clr-text-white); font-weight:800; font-size:1.3rem; text-decoration:none; }
.auth-title { font-size:1.4rem; font-weight:800; text-align:center; margin-bottom:1.75rem; letter-spacing:-.02em; }
.oauth-buttons { display:flex; flex-direction:column; gap:.75rem; }
.auth-form { margin-top:.25rem; }
.auth-switch { text-align:center; margin-top:1.25rem; font-size:.875rem; color:var(--clr-text-muted); }
.auth-terms { font-size:.75rem; color:var(--clr-text-light); text-align:center; margin-top:1rem; }
.auth-terms a { color:var(--clr-primary-light); }
.password-mini-strength { height:3px; background:var(--clr-border); border-radius:var(--radius-full); margin-top:.375rem; overflow:hidden; }

/* ─── PLANS ───────────────────────────────────────────────────────────────── */
.plans-body { background:var(--clr-bg); }
.plans-section { padding:5rem 0; }
.plans-header { text-align:center; margin-bottom:3rem; }
.plans-title { font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.03em; margin-bottom:.75rem; }
.plans-subtitle { font-size:1.05rem; color:var(--clr-text-muted); }
.plans-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; max-width:1000px; margin:0 auto; }
.plan-card { background:var(--clr-bg-card); border:2px solid var(--clr-border); border-radius:var(--radius-xl); padding:2.5rem; position:relative; transition:transform var(--trans),box-shadow var(--trans); display:flex; flex-direction:column; }
.plan-card:hover { transform:translateY(-4px); }
.plan-card--featured { border-color:var(--clr-primary); box-shadow:var(--shadow-glow); }
.plan-card__badge { position:absolute; top:-1px; right:1.5rem; background:var(--clr-primary); color:#fff; font-size:.7rem; font-weight:700; padding:.3rem .75rem; border-radius:0 0 var(--radius-sm) var(--radius-sm); letter-spacing:.05em; }
.plan-card__header { text-align:center; margin-bottom:1.5rem; }
.plan-icon { font-size:2.5rem; margin-bottom:.75rem; }
.plan-name { font-size:1.3rem; font-weight:800; margin-bottom:.75rem; }
.plan-price { margin-bottom:.25rem; }
.price-amount { font-size:2.25rem; font-weight:800; }
.price-period { font-size:.9rem; color:var(--clr-text-muted); }
.plan-price-alt { font-size:.8rem; color:var(--clr-text-muted); }
.price-discount { background:rgba(16,185,129,.15); color:#6ee7b7; padding:.1rem .4rem; border-radius:var(--radius-full); font-size:.7rem; }
.plan-features { list-style:none; margin-bottom:2rem; flex:1; }
.plan-feature { padding:.5rem 0; font-size:.875rem; border-bottom:1px solid rgba(255,255,255,.05); }
.plan-feature--no { color:var(--clr-text-light); }
.plan-card__footer { margin-top:auto; }
.guarantee-section { display:flex; align-items:center; gap:1.25rem; max-width:600px; margin:3rem auto 0; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.2); border-radius:var(--radius-lg); padding:1.5rem; }
.guarantee-icon { font-size:2.5rem; flex-shrink:0; }
.guarantee-section h3 { font-size:1rem; font-weight:700; margin-bottom:.25rem; }
.guarantee-section p { font-size:.875rem; color:var(--clr-text-muted); }
.payment-methods { text-align:center; margin-top:2.5rem; color:var(--clr-text-muted); font-size:.875rem; }
.payment-icons { display:flex; justify-content:center; gap:1.25rem; margin:.75rem 0; flex-wrap:wrap; }
.payment-icon { background:var(--clr-bg-card); border:1px solid var(--clr-border); padding:.375rem .875rem; border-radius:var(--radius-full); font-size:.8rem; }
.payment-note { font-size:.775rem; color:var(--clr-text-light); }

/* ─── MODAL ───────────────────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:1.5rem; animation:fadeIn .2s ease; }
.modal-overlay[hidden] { display:none; }
.modal { background:var(--clr-bg-card); border:1px solid var(--clr-border); border-radius:var(--radius-xl); padding:2.5rem; max-width:440px; width:100%; text-align:center; box-shadow:var(--shadow-lg); }
.modal__icon { font-size:2.5rem; margin-bottom:1rem; }
.modal__title { font-size:1.3rem; font-weight:800; margin-bottom:.75rem; }
.modal__text { color:var(--clr-text-muted); font-size:.9rem; margin-bottom:1.75rem; line-height:1.7; }
.modal__actions { display:flex; flex-direction:column; gap:.75rem; align-items:center; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width:768px) {
    /* ── Mobile menu dropdown ── */
    .site-header .container { position:relative; }
    .header-nav--open {
        position:absolute; top:100%; left:0; right:0;
        background:rgba(15,15,26,.98); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
        flex-direction:column; align-items:stretch;
        padding:1rem 1.5rem 1.5rem; gap:.75rem;
        border-bottom:1px solid var(--clr-border); z-index:99;
        box-shadow:var(--shadow-lg);
    }
    .header-nav--open .btn { display:flex !important; width:100%; justify-content:center; }
    .header-nav--open .lang-switcher { justify-content:center; }

    /* ── Hero ── */
    .hero { padding:2rem 0 1rem; text-align:center; }
    .hero__title-main { font-size:1.85rem; }
    .hero__title-sub  { font-size:1.05rem; }
    .hero__subtitle { font-size:.95rem; padding:0 .5rem; }
    .hero__badges { flex-wrap:nowrap; gap:.5rem; justify-content:center; }
    .badge-chip { font-size:.72rem; padding:.28rem .5rem; }

    /* ── Nav ── */
    .header-nav .btn { display:none; }
    .mobile-menu-btn { display:block; }

    /* ── Sections ── */
    .section-title { font-size:1.5rem; padding:0 .5rem; text-align:center; }
    .features-section { text-align:center; }
    .cta-inner { padding:2rem 1.25rem; }
    .cta-inner h2 { font-size:1.5rem; }
    .cta-inner p { font-size:.95rem; }
    .faq-section { padding:2.5rem 0; }
    .ad-mid { padding:.75rem 0; min-height:50px; }

    /* ── Generator ── */
    .options-grid { grid-template-columns:1fr; }
    .generator-card { padding:1.25rem; }
    .password-output { font-size:1rem; }
    .generator-layout { grid-template-columns:1fr; }

    /* ── Others ── */
    .features-grid { grid-template-columns:1fr; }
    .plans-grid { grid-template-columns:1fr; }
    .auth-card { padding:1.75rem; }
}
@media (max-width:480px) {
    /* Badges — one line, smaller font */
    .hero__badges { flex-direction:row; flex-wrap:nowrap; gap:.3rem; }
    .badge-chip { font-size:.65rem; padding:.22rem .4rem; white-space:nowrap; }
    .hero__title-main { font-size:1.65rem; }
    .hero__title-sub  { font-size:.95rem; }
    .auth-body { align-items:flex-start; padding:1rem; }
    .result-display { flex-direction:column; align-items:flex-start; gap:.75rem; }
    .result-actions { width:100%; justify-content:flex-end; }
}
@media (max-width:768px) {
    .lang-label { display:none; }
}

/* ─── Icon System (Lucide inline SVGs) ──────────────────────────────────── */
.lucide { display:inline-block; vertical-align:middle; flex-shrink:0; pointer-events:none; }

/* Icon animations */
@keyframes iconPulse  { 0%,100%{opacity:1} 50%{opacity:.55} }
@keyframes iconSpin   { to{transform:rotate(360deg)} }
@keyframes iconBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes iconGlow   { 0%,100%{filter:drop-shadow(0 0 3px currentColor)} 50%{filter:drop-shadow(0 0 10px currentColor)} }
@keyframes iconFloat  { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-7px) scale(1.06)} }
.icon-pulse  { animation:iconPulse  2.2s ease-in-out infinite; }
.icon-spin   { animation:iconSpin   1.5s linear infinite; }
.icon-bounce { animation:iconBounce 1.8s ease-in-out infinite; }
.icon-glow   { animation:iconGlow   2.5s ease-in-out infinite; }
.icon-float  { animation:iconFloat  3.2s ease-in-out infinite; }

/* Feature icon sizing */
.feature-icon .lucide { width:40px; height:40px; }