/* =========================================
   QRFree.io — Clean, Apple-style UI
   ========================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");

:root{
  --bg-1:#ffffff;
  --bg-2:#f6f7fb;
  --ink-1:#0b0f19;
  --ink-2:#5b6473;
  --blue:#0b60ff;
  --green:#0dbd8b;
  --border:rgba(11,15,25,.10);
  --shadow-soft:0 10px 30px rgba(0,0,0,.06);
  --shadow-hover:0 16px 40px rgba(0,0,0,.10);
  --r-lg:20px; --r-md:12px; --r-sm:10px;
  --t:220ms cubic-bezier(.22,.61,.36,1);
  --max:1180px; --header:64px;
}

/* Base */
*,
*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--header)}
body{
  margin:0; min-height:100vh;
  color:var(--ink-1);
  background:linear-gradient(180deg,#fff 0%, var(--bg-2) 100%);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display:flex; flex-direction:column;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; border:0; background:none; cursor:pointer}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}

/* Layout */
.container{width:min(92%, var(--max)); margin:0 auto}
.section{padding:64px 0}
.section--tight{padding-top:12px}
.section-light{background:var(--bg-1)}
.section-soft{background:var(--bg-2)}
.section-heading{max-width:760px; margin:0 auto 32px; text-align:center}
.section-heading h2{margin:0; font-weight:800; letter-spacing:-.02em; font-size:clamp(1.9rem,3vw,2.6rem)}
.section-heading p{margin:10px 0 0; color:var(--ink-2); line-height:1.6}
.muted{color:var(--ink-2)}

/* =========================
   Header + Mobile Hamburger
   ========================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-bar{height:var(--header); display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:36px; height:36px; border-radius:10px; box-shadow:0 8px 16px rgba(11,96,255,.12)}
.brand strong{letter-spacing:-.01em}

.nav-links{display:flex; align-items:center; gap:16px}
.nav-links a{
  padding:8px 12px; border-radius:999px;
  color:var(--ink-2); font-weight:700; font-size:.92rem;
  transition:all var(--t)
}
.nav-links a:hover,.nav-links a.active{color:var(--blue); background:rgba(11,96,255,.08)}

/* Language */
.language-select{position:relative; display:inline-block}
.language-select select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:8px 34px 8px 12px; border-radius:999px; border:1px solid var(--border);
  background:#fff; color:var(--ink-2); font-weight:700; font-size:.9rem;
  transition:all var(--t); box-shadow:0 2px 4px rgba(0,0,0,.04)
}
.language-select select:hover{border-color:rgba(11,96,255,.35); color:var(--blue)}
.language-select::after{
  content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:.8rem; color:var(--ink-2); pointer-events:none
}

/* Hamburger */
.nav-burger{
  width:38px; height:38px; border-radius:10px; display:none; place-items:center; position:relative; transition:background var(--t)
}
.nav-burger::before,.nav-burger::after{
  content:""; position:absolute; left:10px; right:10px; height:2px; background:#151a23; transition:transform var(--t), top var(--t)
}
.nav-burger::before{top:13px} .nav-burger::after{top:23px}
.nav-burger:hover{background:rgba(0,0,0,.06)}
.nav-toggle{display:none}

@media (max-width:960px){
  .nav-burger{display:grid}
  .language-select{display:none}
  .nav-links{
    position:fixed; top:var(--header); right:0; width:min(86vw,320px);
    height:calc(100vh - var(--header)); background:#fff; border-left:1px solid var(--border);
    box-shadow:-14px 0 30px rgba(0,0,0,.14);
    transform:translateX(110%); transition:transform var(--t);
    display:flex; flex-direction:column; align-items:stretch; padding:18px; gap:8px
  }
  .nav-links a{padding:12px 14px; border-radius:12px; font-size:1rem}
  .nav-toggle:checked ~ .nav-burger::before{top:18px; transform:rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger::after{top:18px; transform:rotate(-45deg)}
  .nav-toggle:checked ~ .nav-links{transform:translateX(0)}
}

/* =========================
   Generator
   ========================= */
.generator-grid{
  display:grid; gap:24px;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:start;
}
.generator-card,.qr-preview-card{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-soft);
  padding:22px; display:grid; gap:18px; transition:transform var(--t), box-shadow var(--t)
}
.generator-card:hover,.qr-preview-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)}

.step-header{
  display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; color:var(--ink-2)
}
.step-header span{
  width:28px; height:28px; display:grid; place-items:center; border-radius:8px;
  background:rgba(11,96,255,.1); color:var(--blue); font-weight:800; font-size:.82rem
}

/* Types (buttons are created by your JS) */
.qr-types{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px}
.qr-type-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 12px; border:1px solid var(--border); border-radius:10px;
  background:#fff; color:#121620; font-weight:700; font-size:.92rem; transition:all .18s ease
}
.qr-type-button::before{font-size:1rem}
.qr-type-button[data-type="link"]::before{content:"🔗"}
.qr-type-button[data-type="text"]::before{content:"📝"}
.qr-type-button[data-type="email"]::before{content:"📧"}
.qr-type-button[data-type="call"]::before{content:"📞"}
.qr-type-button[data-type="sms"]::before{content:"💬"}
.qr-type-button[data-type="whatsapp"]::before{content:"🟢"}
.qr-type-button[data-type="wifi"]::before{content:"📶"}
.qr-type-button[data-type="pdf"]::before{content:"📄"}
.qr-type-button[data-type="event"]::before{content:"📅"}
.qr-type-button[data-type="vcard"]::before{content:"🪪"}
.qr-type-button[data-type="app"]::before{content:"📱"}
.qr-type-button:hover,.qr-type-button.active{
  color:var(--blue); border-color:rgba(11,96,255,.45); background:rgba(11,96,255,.06)
}

/* Inputs */
.input-group{display:grid; gap:12px}
.input-field{display:grid; gap:6px}
.input-field label{font-weight:700; font-size:.92rem}
.input-field input,.input-field textarea,.input-field select{
  padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-2); font-size:.98rem; transition:border-color var(--t), box-shadow var(--t), background var(--t)
}
.input-field textarea{min-height:110px; resize:vertical}
.input-field input:focus,.input-field textarea:focus,.input-field select:focus{
  border-color:rgba(11,96,255,.55); background:#fff; box-shadow:0 0 0 3px rgba(11,96,255,.12)
}

/* Design tabs */
.design-tabs{display:flex; flex-wrap:wrap}
.design-tab{
  padding:10px 14px; border:1px solid rgba(11,15,25,.12);
  font-weight:800; font-size:.9rem; color:var(--ink-2); background:#fff; transition:all var(--t)
}
.design-tab:first-child{border-top-left-radius:999px; border-bottom-left-radius:999px}
.design-tab:last-child{border-top-right-radius:999px; border-bottom-right-radius:999px}
.design-tab + .design-tab{margin-left:-1px}
.design-tab:hover{border-color:rgba(11,96,255,.45); color:var(--blue)}
.design-tab.active{color:#fff; background:linear-gradient(135deg,var(--blue),#2a6cff); border-color:transparent; box-shadow:0 10px 22px rgba(11,96,255,.18); z-index:1}

.design-panel{border:1px solid var(--border); background:var(--bg-2); border-radius:12px; padding:16px; display:grid; gap:14px}
.design-panel.hidden{display:none}
.option-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.option-tile{
  padding:14px; border-radius:10px; background:#fff; border:1px solid rgba(11,15,25,.10);
  display:grid; gap:6px; place-items:center; font-weight:700; color:var(--ink-2);
  transition:border-color var(--t), box-shadow var(--t), transform var(--t)
}
.option-tile:hover,.option-tile.active{border-color:rgba(13,189,139,.55); box-shadow:0 12px 26px rgba(13,189,139,.18); transform:translateY(-1px)}
.color-picker-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.color-picker{display:grid; gap:8px}
.color-picker input[type="color"]{width:100%; height:42px; border:0; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(11,15,25,.12)}

/* Preview & actions */
.qr-preview-card{text-align:center}
.qr-preview{
  width:min(320px,82%); margin:0 auto; aspect-ratio:1/1; display:grid; place-items:center;
  background:var(--bg-2); border:1px dashed rgba(11,15,25,.12); border-radius:12px; padding:18px
}
.qr-preview.has-logo{background:#fff}
.qr-preview[data-frame="rounded"]{background:#fff; border:1px solid rgba(13,189,139,.35); border-radius:24px; box-shadow:0 18px 36px rgba(13,189,139,.18)}
.qr-preview[data-frame="minimal"]{border:1px solid rgba(11,15,25,.08)}
.qr-preview[data-frame="inline"]{background:linear-gradient(135deg,rgba(11,96,255,.12),rgba(13,189,139,.12)); border:2px solid rgba(255,255,255,.6)}
.qr-preview[data-frame="tag"]{position:relative; background:#fff; border:1px solid rgba(11,96,255,.45)}
.qr-preview[data-frame="tag"]::after{
  content:"SCAN ME"; position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  padding:6px 14px; border-radius:999px; background:linear-gradient(135deg,var(--blue),#2f6dff);
  color:#fff; font-weight:800; font-size:.72rem; letter-spacing:.08em; box-shadow:0 12px 22px rgba(11,96,255,.22)
}

.download-actions{display:grid; gap:10px}
.button-primary,.button-secondary{
  padding:12px; border-radius:999px; font-weight:800; font-size:.92rem; transition:transform var(--t), box-shadow var(--t), background var(--t)
}
.button-primary{background:linear-gradient(135deg,var(--blue),#1a6bff); color:#fff; box-shadow:0 18px 36px rgba(11,96,255,.18)}
.button-primary:hover{transform:translateY(-1px); box-shadow:0 22px 44px rgba(11,96,255,.24)}
.button-secondary{background:rgba(13,189,139,.16); color:var(--green)}
.button-secondary:hover{background:rgba(13,189,139,.24)}
.button-ghost{padding:10px 14px; border-radius:999px; border:1px solid rgba(11,15,25,.12); font-weight:800; color:var(--ink-2); background:#fff; transition:all var(--t)}
.button-ghost:hover{border-color:rgba(11,96,255,.5); color:var(--blue); box-shadow:0 10px 20px rgba(11,96,255,.14)}

/* Donation (minimal, aligned) */
.donation-card{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px; border:1px solid var(--border); border-radius:14px;
  background:linear-gradient(180deg,#fff 0%, #f4f8ff 100%);
}
.donation-text h3{margin:0 0 4px; font-size:1.05rem}
.donation-text p{margin:0; color:var(--ink-2)}
.donation-actions{display:flex; gap:10px; flex-wrap:wrap}

/* =========================
   QR Types — 5 per row
   ========================= */
.qr-type-grid{
  display:grid; gap:16px; grid-template-columns:repeat(5,1fr);
}
.qr-type-card{
  padding:20px; border-radius:14px; background:#fff; border:1px solid var(--border);
  box-shadow:var(--shadow-soft); display:grid; gap:12px; transition:transform var(--t), box-shadow var(--t)
}
.qr-type-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)}
.qr-type-icon{width:50px; height:50px; border-radius:12px; display:grid; place-items:center; font-size:1.4rem; color:var(--blue); background:rgba(11,96,255,.10)}
.qr-type-card h3{margin:0; font-size:1.02rem}
.qr-type-card p{margin:0; color:var(--ink-2); line-height:1.55}

/* ==========
   Benefits
   ========== */
.benefits-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.benefit-card{
  padding:20px; border-radius:14px; background:#fff; border:1px solid var(--border);
  box-shadow:var(--shadow-soft); display:grid; gap:8px; transition:transform var(--t), box-shadow var(--t)
}
.benefit-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)}
.benefit-icon{font-size:1.5rem}
.benefit-card h3{margin:0; font-size:1.05rem}
.benefit-card p{margin:0; color:var(--ink-2)}

/* ===== How it works (refined) ===== */

.how-grid{
  --card-bg: #fff;
  --ring: rgba(0, 87, 255, 0.14);
  --hairline: rgba(15,16,19,0.07);

  display:grid;
  gap:20px;
  grid-template-columns: repeat(12,1fr);
  align-items: stretch;
  counter-reset: howstep;
}

.how-card{
  grid-column: span 4;                 /* 3-up on desktop */
  position: relative;
  padding: 24px 22px 22px;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  display:grid;
  gap:12px;
  text-align:left;
  isolation:isolate;                   /* keeps ring/shine inside */
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base),
              background-color var(--transition-base);
}

/* subtle gradient “sheen” on hover */
.how-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 10% -10%, rgba(0,87,255,0.08), transparent 45%),
              radial-gradient(120% 120% at 110% 110%, rgba(13,189,139,0.08), transparent 45%);
  opacity:0; pointer-events:none;
  transition: opacity var(--transition-base);
}

.how-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(0,87,255,0.18);
}
.how-card:hover::after{ opacity:1; }

/* Number badge – auto increments */
.how-step{
  counter-increment: howstep;
  width: 48px; height: 48px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color:#070707;
  background: linear-gradient(135deg, var(--accent-blue), #2a6cff);
  box-shadow: 0 8px 18px rgba(0,87,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.2);
}
.how-step::before{ content: counter(howstep); }

/* Title + body */
.how-card h3{
  margin: 6px 0 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.how-card p{
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
  font-size: 0.98rem;
}

/* Horizontal connector line (desktop) */
.how-grid[data-connect="true"]{
  position: relative;
}
.how-grid[data-connect="true"]::before{
  content:"";
  position:absolute;
  top: 48px;                           /* aligns with badge center */
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
              transparent 0 2%,
              rgba(15,16,19,0.06) 2% 98%,
              transparent 98% 100%);
  z-index: 0;
}
.how-card{ z-index: 1; }
.how-card .how-step{ margin-bottom: 6px; }

/* Compact CTA spacing */
.section-cta{
  margin-top: 22px;
  text-align: center;
}

/* Focus-visible ring for a11y (if cards are buttons/links) */
.how-card:focus-within{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring), var(--shadow-hover);
  border-color: rgba(0,87,255,0.28);
}

/* ===== Responsiveness ===== */

/* Large tablets: 2-up */
@media (max-width: 1024px){
  .how-card{ grid-column: span 6; }
  .how-grid[data-connect="true"]::before{
    left: 4%; right: 4%;
  }
}

/* =========================
   FAQ — calm, premium style
   ========================= */

.faq-accordion{
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid var(--border, rgba(15,16,19,.08));
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(15,23,42,.06);
  overflow: hidden;
}

.faq-item + .faq-item{
  border-top: 1px solid rgba(15,16,19,.06);
}

/* QUESTION ROW */
.faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: transparent;
  color: var(--ink-1, #0f1117);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .005em;
  text-align: left;

  transition: background 180ms ease, color 180ms ease;
}

/* subtle hover only (no heavy fills) */
.faq-question:hover{
  background: rgba(11,96,255,.05);
}

/* ACCESSIBILITY: clean focus */
.faq-question:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(11,96,255,.3);
  border-radius: 10px;
}

/* LEADING DOT (very light cue) */
.faq-question::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--blue, #0b60ff);
  opacity: .18;
}

/* CHEVRON */
.faq-question::after{
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-left: 0;
  border-top: 0;
  transform: rotate(-45deg);
  opacity: .7;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1), opacity 180ms ease, color 180ms ease;
  color: var(--ink-2, #475066);
}

/* expanded state (sync with aria-expanded) */
.faq-question[aria-expanded="true"]{
  color: var(--blue, #0b60ff);
  background: rgba(11,96,255,.06);
}
.faq-question[aria-expanded="true"]::after{
  transform: rotate(135deg); /* chevron up */
  opacity: 1;
  color: var(--blue, #0b60ff);
}

/* ANSWER — smooth + robust animation (no hard max-height caps) */
.faq-answer{
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  overflow: hidden;

  padding: 0 20px;            /* will expand on open */
  color: var(--ink-2, #475066);
  line-height: 1.65;
  background: #fbfcff;

  transition:
    max-height 380ms cubic-bezier(.22,.61,.36,1),
    opacity 220ms ease,
    transform 380ms cubic-bezier(.22,.61,.36,1),
    padding 220ms ease;
}

/* give it plenty of room to grow; smoother than guessing exact content height */
.faq-answer.open{
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0);
  padding: 6px 20px 18px;
  border-top: 1px solid rgba(15,16,19,.05);
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  .faq-question,
  .faq-answer{
    transition: none;
  }
}


/* =============
   Newsletter (polished)
   ============= */
:root{
  --nl-bg1:#ffffff;
  --nl-bg2:#f6f8ff;
  --nl-ring:#0b60ff;
  --nl-text:#0b0d13;
  --nl-muted:#5d6470;
  --nl-border:rgba(15,16,19,.10);
  --nl-shadow: 0 20px 40px rgba(16,24,40,.08);
}

.newsletter-box{
  --pad: 28px;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--pad);
  border-radius: 20px;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(11,96,255,.10) 0%, transparent 45%),
    linear-gradient(180deg, var(--nl-bg1) 0%, var(--nl-bg2) 100%);
  border: 1px solid var(--nl-border);
  box-shadow: var(--nl-shadow);
  display: grid;
  gap: 12px;
  text-align: center;
}

.newsletter-box h2{
  margin: 0;
  font-size: clamp(1.25rem, 1.1rem + .75vw, 1.6rem);
  letter-spacing: -.01em;
  color: var(--nl-text);
}

.newsletter-box p{
  margin: 2px 0 6px;
  color: var(--nl-muted);
  font-size: .98rem;
}

/* Form shell */
.newsletter-form{
  --in-pad: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  background:#fff;
  padding: 8px;
  border-radius: 999px;
  border:1px solid var(--nl-border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

/* Email field with icon */
.newsletter-form input[type="email"]{
  width: 100%;
  padding: var(--in-pad) 14px var(--in-pad) 42px;
  border-radius: 999px;
  border: 0;
  background:
    linear-gradient(180deg, #fff, #f9fafc);
  font-size: 1rem;
  outline: none;
  color: var(--nl-text);
}

.newsletter-form input[type="email"]::placeholder{
  color: #9aa3af;
}

/* Mail icon (pure CSS mask) */
.newsletter-form{
  position: relative;
}
.newsletter-form::before{
  content:"";
  position:absolute;
  left: 18px;
  width: 18px; height: 18px;
  pointer-events: none;
  /* simple envelope path as mask */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z"/></svg>') center/contain no-repeat;
  background: #99a3b0;
  top: 50%;
  transform: translateY(-50%);
}

/* Button */
.newsletter-form button{
  padding: var(--in-pad) 18px;
  border-radius: 999px;
  border: 0;
  font-weight: 800;
  font-size: .98rem;
  color:#fff;
  background:
    linear-gradient(135deg, var(--nl-ring), #2a6cff);
  box-shadow: 0 12px 24px rgba(11,96,255,.22);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  cursor: pointer;
}

.newsletter-form button:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(11,96,255,.28);
}

.newsletter-form button:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(11,96,255,.22);
}

.newsletter-form button:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--nl-ring);
}

/* Focus ring for input */
.newsletter-form:has(input[type="email"]:focus-visible){
  outline: 0;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--nl-ring);
}

/* Validation hint states (optional) */
.newsletter-form input[type="email"].is-invalid{
  box-shadow: inset 0 0 0 1px rgba(220,38,38,.5);
}
.newsletter-form input[type="email"].is-valid{
  box-shadow: inset 0 0 0 1px rgba(16,185,129,.55);
}

/* Success / info message */
.newsletter-message{
  font-size: .95rem;
  color: #059669; /* green-600 */
  background: linear-gradient(180deg, #ecfdf5, #e8fff7);
  border: 1px solid rgba(16,185,129,.25);
  padding: 10px 14px;
  border-radius: 12px;
  width: fit-content;
  margin: 6px auto 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
.newsletter-message.visible{
  opacity: 1;
  transform: translateY(0);
}

/* Compact variant (e.g., footer) */
.site-footer .newsletter-box{
  max-width: 680px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f7f9ff);
}


:root{
  --ft-bg1: var(--bg-1, #f7f8fb);
  --ft-bg2: #ffffff;
  --ft-ink: var(--ink-1, #0b0d13);
  --ft-muted: var(--ink-2, #606775);
  --ft-border: var(--border, rgba(15,16,19,.1));
  --ft-blue: var(--blue, #0b60ff);
  --ft-shadow: 0 18px 36px rgba(16,24,40,.10);
}

/* Shell */
.site-footer{
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(11,96,255,.06) 0%, transparent 45%),
    linear-gradient(180deg, var(--ft-bg1) 0%, var(--ft-bg2) 100%);
  border-top: 1px solid var(--ft-border);
}

.footer-wrap{ padding: 56px 0; }

/* Top row: brand + columns */
.footer-top{
  display: grid;
  gap: 36px;
  grid-template-columns: 1.2fr 2fr;
  align-items: start;
}

/* Brand block */
.footer-brand{ display: grid; gap: 14px; max-width: 560px; }
.footer-logo{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.01em; color: var(--ft-ink); }
.footer-logo img{ width:40px; height:40px; border-radius:12px; box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.footer-brand p{ margin: 4px 0 2px; color: var(--ft-muted); line-height: 1.5; }

/* Socials */
.footer-social{ display:flex; gap:12px; flex-wrap: wrap; }
.social-icon{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background: #fff;
  color: var(--ft-blue);
  border: 1px solid var(--ft-border);
  box-shadow: 0 6px 16px rgba(11,96,255,.10);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.social-icon:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,96,255,.18); }
.social-icon:active{ transform: translateY(0); box-shadow: 0 6px 16px rgba(11,96,255,.14); }
.social-icon:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--ft-blue);
}

/* Link columns */
.footer-columns{
  display:grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.footer-col{ display:grid; gap:10px; align-content:start; }
.footer-col h4{
  margin: 0 0 6px;
  font-size: .98rem;
  letter-spacing: .02em;
  color: var(--ft-ink);
}
.footer-col a{
  color: var(--ft-muted);
  text-decoration: none;
  transition: color .18s ease, text-underline-offset .18s ease;
}
.footer-col a:hover{
  color: var(--ft-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-col a:focus-visible{
  outline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ft-blue);
}

/* Divider */
.footer-divider{
  margin: 32px 0;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ft-border), transparent);
}

/* Bottom row */
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  color: var(--ft-muted);
  font-size: .95rem;
}

/* Language pill */
.footer-lang{
  display:flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border:1px solid var(--ft-border);
  border-radius: 999px;
  background:#fff;
  box-shadow: 0 4px 10px rgba(16,24,40,.06);
}
.footer-lang select{
  appearance:none; border:0; background:transparent; padding:0 2px 0 0;
  font-weight:700; color: var(--ft-ink);
  cursor: pointer;
}
.footer-lang select:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--ft-blue);
}
.footer-lang .globe{ opacity:.75; }

/* Toast (kept, refined) */
.toast{
  position:fixed; bottom:32px; right:32px;
  padding:12px 16px; border-radius:12px;
  background: linear-gradient(135deg, var(--ft-blue), #2a6cff);
  color:#fff; font-weight:800;
  box-shadow: 0 18px 42px rgba(11,96,255,.28);
  opacity:0; transform: translateY(16px);
  pointer-events:none; transition: opacity .2s ease, transform .2s ease;
  z-index: 120;
}
.toast.visible{ opacity:1; transform: translateY(0); }


/* Responsive */
@media (max-width:1200px){ .qr-type-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:960px){
  .generator-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-columns{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .section{padding:50px 0}
  .qr-type-grid{grid-template-columns:repeat(2,1fr)}
  .how-grid{grid-template-columns:1fr}
  .footer-columns{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .qr-type-grid{grid-template-columns:1fr}
  .footer-columns{grid-template-columns:1fr}
}
.hidden{display:none !important}