/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#1A1A2E;color:#E0E0E0;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
img,svg{display:block;max-width:100%}
a{color:#FFD700;text-decoration:none;transition:color 0.2s}
a:hover,a:focus{color:#FFEA70;text-decoration:underline}
button{cursor:pointer;font-family:inherit}

/* ===== SKIP LINK ===== */
.skip-link{position:absolute;top:-100px;left:8px;background:#FFD700;color:#1A1A2E;padding:8px 16px;border-radius:0 0 8px 8px;z-index:1000;font-weight:700}
.skip-link:focus{top:0}

/* ===== LAYOUT ===== */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

/* ===== HEADER ===== */
.site-header{background:#16213E;border-bottom:2px solid #FFD700;position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;flex-wrap:wrap;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.4rem;color:#FFD700;text-decoration:none}
.logo:hover,.logo:focus{text-decoration:none;color:#FFEA70}
.logo-text{letter-spacing:-0.5px}
.nav-list{display:flex;list-style:none;gap:24px;flex-wrap:wrap}
.nav-list a{font-weight:600;font-size:0.95rem;padding:4px 0;border-bottom:2px solid transparent}
.nav-list a.active,.nav-list a:hover,.nav-list a:focus{border-bottom-color:#FFD700;text-decoration:none}

/* ===== HERO ===== */
.hero{background:linear-gradient(135deg,#0F3460 0%,#1A1A2E 100%);text-align:center;padding:80px 20px 60px}
.hero h1{font-size:clamp(2.4rem,6vw,3.8rem);font-weight:900;color:#FFD700;line-height:1.15;margin-bottom:16px;text-shadow:2px 2px 0 #E94560}
.hero-sub{font-size:1.2rem;max-width:650px;margin:0 auto 32px;color:#CCCCDD}
.cta-button{display:inline-block;background:#E94560;color:#fff;font-weight:700;font-size:1.1rem;padding:14px 36px;border-radius:50px;border:none;transition:background 0.25s,transform 0.15s;text-decoration:none}
.cta-button:hover,.cta-button:focus{background:#FF6B81;transform:scale(1.04);text-decoration:none;color:#fff}

/* ===== GENERATOR SECTION ===== */
.generator-section{padding:64px 20px;background:#1A1A2E}
.generator-section h2{font-size:2rem;font-weight:800;color:#FFD700;text-align:center;margin-bottom:8px}
.section-desc{text-align:center;max-width:600px;margin:0 auto 40px;color:#AAAACC}

.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px;margin-bottom:36px}
.template-card{background:#16213E;border:2px solid #2D2D44;border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:border-color 0.2s,transform 0.15s,box-shadow 0.2s}
.template-card:hover,.template-card:focus-visible{border-color:#FFD700;transform:translateY(-3px);box-shadow:0 8px 20px rgba(255,215,0,0.15)}
.template-card.selected{border-color:#E94560;background:#1F2B47;box-shadow:0 0 0 2px #E94560}
.template-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;background:#2D2D44;margin-bottom:8px}
.template-card .template-name{font-weight:700;font-size:0.85rem;color:#E0E0E0}

.generator-controls{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:36px}
.generate-btn,.surprise-btn{padding:12px 28px;border-radius:50px;font-weight:700;font-size:1rem;border:none;transition:background 0.2s,opacity 0.2s}
.generate-btn{background:#FFD700;color:#1A1A2E}
.generate-btn:disabled{opacity:0.4;cursor:not-allowed}
.generate-btn:not(:disabled):hover,.generate-btn:not(:disabled):focus{background:#FFEA70}
.surprise-btn{background:#2D2D44;color:#FFD700;border:2px solid #FFD700}
.surprise-btn:hover,.surprise-btn:focus{background:#3D3D5C}

.result-area{max-width:500px;margin:0 auto}
.result-card{background:#16213E;border-radius:16px;padding:24px;border:2px solid #2D2D44;text-align:center}
.meme-preview{position:relative;width:100%;aspect-ratio:1/1;margin-bottom:20px;border-radius:12px;overflow:hidden;background:#0F3460}
.meme-image-placeholder{width:100%;height:100%}
.caption-overlay{position:absolute;left:0;right:0;padding:12px 16px;font-weight:900;font-size:clamp(1rem,3vw,1.4rem);color:#fff;text-align:center;text-shadow:2px 2px 0 #000;pointer-events:none;word-break:break-word}
.top-caption{top:8px}
.bottom-caption{bottom:8px}
.copy-btn{padding:10px 24px;border-radius:50px;background:#E94560;color:#fff;font-weight:700;border:none;transition:background 0.2s}
.copy-btn:disabled{opacity:0.4;cursor:not-allowed}
.copy-btn:not(:disabled):hover,.copy-btn:not(:disabled):focus{background:#FF6B81}
.copy-feedback{display:block;margin-top:8px;font-size:0.9rem;color:#FFD700;min-height:22px}

/* ===== HOW SECTION ===== */
.how-section{padding:64px 20px;background:#0F3460}
.how-section h2{font-size:2rem;font-weight:800;color:#FFD700;text-align:center;margin-bottom:40px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
.step{text-align:center;padding:24px;background:#1A1A2E;border-radius:16px;border:1px solid #2D2D44}
.step-icon{width:48px;height:48px;border-radius:50%;background:#FFD700;color:#1A1A2E;font-weight:900;font-size:1.4rem;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.step h3{font-size:1.2rem;color:#FFD700;margin-bottom:8px}
.step p{color:#CCCCDD;font-size:0.95rem}

/* ===== WHY SECTION ===== */
.why-section{padding:64px 20px;background:#1A1A2E}
.why-section h2{font-size:2rem;font-weight:800;color:#FFD700;text-align:center;margin-bottom:40px}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.why-card{background:#16213E;border-radius:16px;padding:24px;border:1px solid #2D2D44}
.why-card h3{font-size:1.15rem;color:#FFD700;margin-bottom:8px}
.why-card p{color:#CCCCDD;font-size:0.95rem}

/* ===== FOOTER ===== */
.site-footer{background:#16213E;border-top:2px solid #2D2D44;margin-top:auto;padding:24px 20px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-inner p{font-size:0.9rem;color:#AAAACC}
.footer-nav{display:flex;list-style:none;gap:20px;flex-wrap:wrap}
.footer-nav a{font-size:0.9rem;color:#AAAACC}
.footer-nav a:hover,.footer-nav a:focus{color:#FFD700}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .header-inner{flex-direction:column;align-items:flex-start}
  .hero{padding:48px 16px 40px}
  .hero h1{font-size:2rem}
  .template-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}
  .steps,.why-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;text-align:center}
}
@media (max-width:480px){
  .generator-controls{flex-direction:column;align-items:stretch}
  .generate-btn,.surprise-btn{width:100%}
}



/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}