/* ============================================================
   Saints Home — Shared Stylesheet
   Used by: index.html, wallpapers.html
   ============================================================ */

/* ── CSS Variables ── */
:root {
  --gold:      #D3B87D;
  --gold-dim:  rgba(211,184,125,0.22);
  --gold-faint:rgba(211,184,125,0.10);
  --bg:        #F8F5F0;
  --surface:   #FDFAF5;
  --white:     #FFFFFF;
  --text:      #111820;
  --text-mid:  #2e3d4a;
  --text-muted:#4a5660;
  --ink:       #0d1720;
  --r-sm:      8px;
  --r:         12px;
  --ease:      cubic-bezier(.16,1,.3,1);
  --r-lg:      20px;
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:'Montserrat',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ── Divider ornament ── */
.divider { display:flex; align-items:center; gap:10px; width:160px; margin:18px auto 0; }
.divider-line { flex:1; height:1px; }
.divider-line.l { background:linear-gradient(to right,transparent,var(--gold-dim)); }
.divider-line.r { background:linear-gradient(to left,transparent,var(--gold-dim)); }
.divider-dot { width:5px; height:5px; background:var(--gold); transform:rotate(45deg); flex-shrink:0; }

/* ── Find us / Social cards ── */
.find-us {
  padding:48px 32px;
  max-width:720px;
  margin:0 auto;
  text-align:center;
  border-top:1px solid var(--gold-dim);
}
.find-us-heading {
  font-family:'Cinzel',serif;
  font-size:18px; font-weight:400;
  letter-spacing:.06em; color:var(--text);
  margin-bottom:8px;
}
.find-us-sub {
  font-size:14px; color:var(--text-mid); font-weight:400;
  line-height:1.65; margin-bottom:28px;
}
.social-cards {
  display:flex; flex-direction:column; gap:10px;
  max-width:640px; margin:0 auto; width:100%;
}
@media (min-width:600px) {
  .social-cards { flex-direction:row; gap:12px; }
}
.social-card {
  flex:1; min-width:0;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  border:1px solid var(--gold-dim); border-radius:var(--r);
  background:#ffffff; text-decoration:none; color:var(--text);
  transition:border-color .2s,transform .2s,box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
  box-sizing:border-box; overflow:hidden;
}
.social-card:hover {
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(26,37,48,.06);
}
.social-card-icon { width:32px; height:32px; border-radius:7px; overflow:hidden; flex-shrink:0; }
.social-card-icon img { width:32px; height:32px; display:block; }
.social-card-text { flex:1; min-width:0; text-align:left; overflow:hidden; }
.social-card-name {
  font-family:'Cinzel',serif; font-size:13px; font-weight:400;
  letter-spacing:.04em; color:var(--text); display:block; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.social-card-handle {
  font-size:12px; color:var(--text-mid); font-weight:400;
  display:block; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Footer ── */
footer { border-top:1px solid var(--gold-dim); padding:24px; text-align:center; }
.footer-copy { font-size:12px; color:var(--text-mid); font-weight:400; text-align:center; }

/* ── Toast ── */
.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(72px);
  background:var(--text); color:var(--bg);
  font-family:'Montserrat',sans-serif;
  font-size:12px; font-weight:500; letter-spacing:.06em;
  padding:11px 22px; border-radius:50px;
  white-space:nowrap; transition:transform .26s;
  z-index:100; pointer-events:none;
}
.toast.show { transform:translateX(-50%) translateY(0); }

/* ── Animations ── */
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes up { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
@keyframes slideRight { from{opacity:0;transform:translateX(-20px);} to{opacity:1;transform:translateX(0);} }
@keyframes spin { to{transform:rotate(360deg);} }

/* ============================================================
   INDEX PAGE STYLES
   ============================================================ */

/* ── Ambient glow ── */
.ambient { position:fixed; width:600px; height:600px; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; }
.ambient-1 { top:-200px; left:-100px; background:radial-gradient(circle,rgba(211,184,125,.07) 0%,transparent 70%); animation:drift1 20s ease-in-out infinite alternate; }
.ambient-2 { bottom:-200px; right:-100px; background:radial-gradient(circle,rgba(211,184,125,.05) 0%,transparent 70%); animation:drift2 25s ease-in-out infinite alternate; }
@keyframes drift1 { to{transform:translate(60px,40px);} }
@keyframes drift2 { to{transform:translate(-40px,-60px);} }

/* ── Hero ── */
.hero {
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
@media(min-width:768px) { .hero { min-height:100vh; } }

/* Háttérkép */
.hero-bg {
  position:absolute; inset:0; z-index:0;
}
.hero-bg-img {
  width:100%; height:100%;
  object-fit:cover; object-position:center 20%;
  display:block;
}
.hero-bg-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(17,24,32,.45) 0%,
    rgba(17,24,32,.55) 50%,
    rgba(17,24,32,.70) 100%
  );
}

/* Tartalom */
.hero-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  padding:80px 24px 60px;
  width:100%; max-width:700px; margin:0 auto;
}
@media(min-width:768px) { .hero-content { padding:120px 48px 100px; } }

.hero-logo {
  width:140px; height:auto; display:block;
  margin-bottom:32px;
  /* Fehér logóhoz szükséges */
  filter:brightness(0) invert(1);
  opacity:0; animation:fadeIn .8s var(--ease) forwards .1s;
}
@media(min-width:768px) { .hero-logo { width:170px; } }

.hero-eyebrow {
  font-size:10px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
  margin-bottom:14px;
  opacity:0; animation:up .8s var(--ease) forwards .25s;
}
.hero-title {
  font-family:'Cinzel',serif;
  font-size:clamp(32px,6vw,64px); font-weight:400;
  letter-spacing:.01em; color:#ffffff; line-height:1.12;
  margin-bottom:20px;
  opacity:0; animation:up .9s var(--ease) forwards .35s;
}
.hero-title em { font-style:normal; font-weight:400; color:var(--gold); }
.hero-desc {
  font-size:15px; font-weight:400; color:rgba(255,255,255,.75);
  line-height:1.75; margin-bottom:36px; max-width:42ch;
  opacity:0; animation:up .9s var(--ease) forwards .45s;
}
@media(min-width:768px) { .hero-desc { font-size:16px; } }
.hero-actions {
  display:flex; flex-direction:column; gap:10px; align-items:center;
  opacity:0; animation:up .9s var(--ease) forwards .55s;
}
@media(min-width:480px) { .hero-actions { flex-direction:row; justify-content:center; } }

/* Scroll hint */
.hero-scroll {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  opacity:0; animation:fadeIn 1s var(--ease) forwards 1s;
}
.hero-scroll-line {
  width:1px; height:32px;
  background:linear-gradient(to bottom, rgba(211,184,125,.7), transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
.hero-scroll-label {
  font-size:9px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(211,184,125,.6);
}
@keyframes scrollPulse {
  0%,100% { opacity:.5; transform:scaleY(1); }
  50% { opacity:1; transform:scaleY(1.15); }
}

.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; background:var(--text); color:var(--bg);
  border:none; border-radius:var(--r-sm);
  font-family:'Montserrat',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; white-space:nowrap; min-height:50px;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:background .2s,transform .15s,box-shadow .2s;
}
.btn-primary:hover { background:var(--ink); transform:translateY(-2px); box-shadow:0 10px 28px rgba(13,23,32,.2); }
.btn-primary:active { transform:scale(.97); box-shadow:none; }
.btn-primary-icon { width:20px; height:20px; border-radius:4px; overflow:hidden; flex-shrink:0; }
.btn-primary-icon img { width:20px; height:20px; display:block; }

.btn-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:13px 20px; background:transparent; color:var(--text-muted);
  border:1px solid var(--gold-dim); border-radius:var(--r-sm);
  font-family:'Montserrat',sans-serif; font-size:11px; font-weight:400;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; white-space:nowrap; min-height:46px;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:border-color .2s,color .2s,transform .15s;
}
.btn-ghost:hover { border-color:var(--gold-dim); color:var(--text-mid); transform:translateY(-1px); }
.btn-ghost:active { transform:scale(.97); }

/* ── Stats ── */
.stats { position:relative; z-index:1; border-top:1px solid var(--gold-dim); border-bottom:1px solid var(--gold-dim); background:var(--surface); opacity:0; animation:fadeIn .8s forwards .75s; }
.stats-inner { display:flex; align-items:stretch; justify-content:center; width:100%; max-width:640px; margin:0 auto; }
.stat { flex:1; text-align:center; padding:20px 12px; position:relative; }
.stat+.stat::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:32px; background:var(--gold-dim); }
.stat-value { font-family:'Cinzel',serif; font-size:18px; font-weight:400; color:var(--text); letter-spacing:.02em; line-height:1.1; display:block; margin-bottom:4px; }
.stat-label { font-size:10px; font-weight:500; color:var(--text-muted); letter-spacing:.15em; text-transform:uppercase; display:block; }

/* ── Newsletter (shared) ── */
.newsletter { position:relative; z-index:1; padding:60px 24px; display:flex; flex-direction:column; align-items:center; border-top:1px solid var(--gold-dim); border-bottom:1px solid var(--gold-dim); }
.newsletter.nl-index { opacity:0; animation:fadeIn .8s forwards 1s; }
.nl-ornament { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.nl-line { width:36px; height:1px; background:var(--gold-dim); }
.nl-gem { width:5px; height:5px; background:var(--gold); transform:rotate(45deg); flex-shrink:0; }
.nl-gift-label { font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.newsletter-title { font-family:'Cinzel',serif; font-size:clamp(20px,4vw,28px); font-weight:400; color:var(--text); letter-spacing:.02em; text-align:center; margin-bottom:24px; line-height:1.25; }

/* Mockup image */
.nl-mockup-wrap { width:100%; max-width:480px; margin-bottom:24px; border-radius:var(--r); overflow:hidden; border:1px solid var(--gold-dim); position:relative; }
.nl-mockup-img { width:100%; display:block; object-fit:cover; }
.nl-mockup-placeholder { width:100%; aspect-ratio:4/3; background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.nl-mockup-placeholder-icon { width:40px; height:40px; border:1px solid var(--gold-dim); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--gold); }
.nl-mockup-placeholder-label { font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); }
.nl-free-badge { position:absolute; top:14px; right:14px; background:var(--gold); color:var(--ink); font-family:'Montserrat',sans-serif; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border-radius:20px; }

.newsletter-desc { font-size:14px; font-weight:400; color:var(--text-mid); text-align:center; line-height:1.75; margin-bottom:28px; max-width:38ch; }
.nl-form { display:flex; flex-direction:column; gap:10px; width:100%; max-width:420px; }
@media(min-width:480px) { .nl-form { flex-direction:row; } }
.nl-input { flex:1; padding:14px 18px; background:var(--surface); border:1px solid var(--gold-dim); border-radius:var(--r-sm); font-family:'Montserrat',sans-serif; font-size:14px; font-weight:400; color:var(--text); outline:none; min-height:50px; transition:border-color .2s,box-shadow .2s; }
.nl-input::placeholder { color:var(--text-muted); }
.nl-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(211,184,125,.15); }
.nl-btn { padding:14px 24px; background:var(--text); color:var(--bg); border:none; border-radius:var(--r-sm); font-family:'Montserrat',sans-serif; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; white-space:nowrap; min-height:50px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background .2s,transform .15s; }
.nl-btn:hover { background:var(--ink); transform:translateY(-1px); }
.nl-btn:active { transform:scale(.97); }
.nl-note { margin-top:10px; font-size:12px; color:var(--text-mid); font-weight:400; text-align:center; }
.nl-success { display:none; font-family:'Cinzel',serif; font-size:14px; color:var(--gold); letter-spacing:.05em; text-align:center; padding:14px; }

/* ── Index find-us ── */
.find-us-index { padding:48px 32px; max-width:720px; margin:0 auto; text-align:center; }

/* ============================================================
   WALLPAPERS PAGE STYLES
   ============================================================ */

/* ── Header ── */
.header { text-align:center; padding:48px 24px 0; }
.header-logo { width:110px; height:auto; display:block; margin:0 auto 20px; }
.header-eyebrow { font-size:10px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.header-h1 { font-family:'Cinzel',serif; font-size:clamp(22px,3.5vw,32px); font-weight:400; letter-spacing:.03em; color:var(--text); line-height:1.3; white-space:nowrap; }
@media(max-width:380px) { .header-h1 { white-space:normal; font-size:20px; } }

/* ── Steps ── */
.how { padding:32px 24px 24px; max-width:960px; margin:0 auto; }
.steps { display:flex; flex-direction:column; border:1px solid var(--gold-dim); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.step { display:flex; align-items:flex-start; gap:10px; padding:14px 20px; border-bottom:1px solid var(--gold-dim); }
.step:last-child { border-bottom:none; }
.step-num { font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; color:var(--text); background:rgba(211,184,125,.18); width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.step-body { flex:1; }
.step-title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:2px; }
.step-desc { font-size:13px; color:var(--text-mid); font-weight:400; line-height:1.6; }
@media(min-width:600px) {
  .steps { flex-direction:row; }
  .step { flex:1; flex-direction:column; align-items:center; text-align:center; border-bottom:none; border-right:1px solid var(--gold-dim); padding:20px 16px; }
  .step:last-child { border-right:none; }
  .step-num { margin-bottom:8px; margin-top:0; }
}

/* ── Wallpaper grid ── */
.wallpapers { padding:8px 24px 0; max-width:960px; margin:0 auto; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(min-width:600px) { .grid { grid-template-columns:repeat(3,1fr); gap:16px; } }
@media(min-width:900px) { .grid { grid-template-columns:repeat(4,1fr); gap:20px; } }
.card { background:var(--surface); border:1px solid var(--gold-dim); border-radius:var(--r); overflow:hidden; transition:transform .22s,box-shadow .22s; }
.card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,37,48,.08); }
.card-preview { width:100%; aspect-ratio:9/19.5; overflow:hidden; background:#1c1814; }
.card-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.card-body { padding:12px; }
.card-name { font-family:'Cinzel',serif; font-size:11px; font-weight:400; color:var(--text); letter-spacing:.05em; margin-bottom:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-actions { display:flex; gap:7px; }
.btn-dl { flex:1; background:var(--text); color:var(--bg); border:none; border-radius:7px; padding:9px 8px; font-family:'Montserrat',sans-serif; font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px; min-height:36px; transition:background .15s,transform .1s; -webkit-tap-highlight-color:transparent; }
.btn-dl:hover { background:var(--ink); }
.btn-dl:active { transform:scale(.97); }
.btn-dl.loading { background:#4a5560; pointer-events:none; }
.btn-share { width:36px; height:36px; background:transparent; border:1px solid var(--gold-dim); border-radius:7px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--gold); flex-shrink:0; padding:0; transition:background .15s,border-color .15s; -webkit-tap-highlight-color:transparent; }
.btn-share:hover { background:var(--gold-faint); border-color:var(--gold); }
.spinner { width:11px; height:11px; border:1.5px solid rgba(248,245,240,.25); border-top-color:var(--bg); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }
.empty-state { grid-column:1/-1; text-align:center; padding:60px 24px; border:1px dashed var(--gold-dim); border-radius:var(--r); }
.empty-icon { font-size:24px; opacity:.3; margin-bottom:12px; }
.empty-title { font-family:'Cinzel',serif; font-size:13px; font-weight:400; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.empty-desc { font-size:13px; color:var(--text-mid); font-weight:400; line-height:1.6; }

/* ── Newsletter (wallpapers) ── */
.newsletter-wp { margin-top:44px; }

/* ── 404 Page ── */
.page-404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px 0;
  text-align: center;
}
.logo-404 {
  width: 160px; height: auto; display: block;
  margin: 0 auto 36px;
  opacity: 0; animation: fadeIn .8s var(--ease) forwards .1s;
}
.num-404 {
  font-family: 'Cinzel', serif;
  font-size: clamp(80px, 18vw, 160px);
  font-weight: 400; letter-spacing: .04em; line-height: 1;
  margin-bottom: 36px;
  opacity: 0; animation: fadeIn .8s var(--ease) forwards .2s;
  background: linear-gradient(90deg, #A97F36 0%, #F1DFAF 60%, #B38831 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.quote-404 {
  max-width: 480px; margin: 0 auto 28px;
  opacity: 0; animation: fadeIn .8s var(--ease) forwards .35s;
}
.quote-text {
  font-family: 'Cinzel', serif;
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 400; color: var(--text);
  line-height: 1.65; letter-spacing: .02em;
  margin-bottom: 10px; font-style: italic;
  white-space: nowrap;
}
@media(max-width: 479px) {
  .quote-text { white-space: normal; font-size: 13px; }
}
.quote-ref {
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.desc-404 {
  font-size: 15px; font-weight: 400; color: var(--text-mid);
  margin-bottom: 36px;
  opacity: 0; animation: fadeIn .8s var(--ease) forwards .45s;
}
.actions-404 {
  display: flex; flex-direction: column;
  gap: 12px; padding-bottom: 48px; align-items: stretch;
  width: 100%; max-width: 340px;
  opacity: 0; animation: fadeIn .8s var(--ease) forwards .55s;
}
@media(min-width: 480px) {
  .actions-404 { flex-direction: row; justify-content: center; align-items: center; width: auto; max-width: none; }
}
.footer-404 {
  width: 100vw; margin-left: calc(-50vw + 50%);
  margin-top: 0;
  opacity: 0; animation: fadeIn .8s var(--ease) forwards .65s;
}
.footer-404-inner {
  border-top: 1px solid var(--gold-dim);
  padding: 24px; text-align: center;
}